@verdocs/web-sdk 6.13.2 → 6.14.0

package/dist/components/p-CaFhF-9s.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/{p-DscL0SIM.js → p-D56nBgHQ.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as i,h as s,d as o,t as h}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as a,getEnvelopeDocumentPageDisplayUri as d}from"@verdocs/js-sdk";import{t as n}from"./p-BCwFpXpV.js";import{d as r}from"./p-C8yiLtCJ.js";const c=()=>`verdocs-envelope-document-page{width:100%;position:relative}verdocs-envelope-document-page .verdocs-envelope-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-envelope-document-page .verdocs-envelope-document-page-layer.img{width:100%}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.pageRendered=i(this,"pageRendered");this.endpoint=a.getDefault();this.envelopeId="";this.documentId="";this.pageNumber=1;this.virtualWidth=612;this.virtualHeight=792;this.layers=[{name:"page",type:"canvas"}];this.type="original";this.containerId=`verdocs-envelope-document-page-${Math.random().toString(36).substring(2,11)}`;this.renderedWidth=this.virtualWidth;this.renderedHeight=this.virtualHeight;this.naturalWidth=this.virtualWidth;this.naturalHeight=this.virtualHeight;this.aspectRatio=this.virtualWidth/this.virtualHeight;this.skipFirstNotification=true;this.pageDisplayUri="https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png"}async componentWillLoad(){this.pageDisplayUri=await d(this.endpoint,this.documentId,this.pageNumber,this.type)}componentDidLoad(){this.resizeObserver=new ResizeObserver(n((e=>{for(const t of e){const e=t.contentRect.width;this.renderedWidth=e;this.renderedHeight=this.virtualHeight*(e/this.virtualWidth)}this.notifyRenderedSize()}),100));this.resizeObserver.observe(this.container)}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}notifyRenderedSize(){if(this.skipFirstNotification){this.skipFirstNotification=false;return}this.pageRendered.emit({containerId:this.containerId,documentId:this.documentId,pageNumber:this.pageNumber,virtualWidth:this.virtualWidth,virtualHeight:this.virtualHeight,renderedWidth:this.renderedWidth,renderedHeight:this.renderedHeight,naturalWidth:this.naturalWidth,naturalHeight:this.naturalHeight,aspectRatio:this.aspectRatio,xScale:this.renderedWidth/this.virtualWidth,yScale:this.renderedHeight/this.virtualHeight})}render(){const e=`${this.renderedHeight}px`;return s(o,{key:"9f4eed5e187a1b37822c7e7d4ba69f4be519ad6d",id:`${this.containerId}`,style:{height:e,flex:`0 0 ${e}`}},this.layers.map((t=>t.type==="div"?s("div",{class:"verdocs-envelope-document-page-layer",id:`${this.containerId}-${t.name}`,style:{height:e}}):this.pageDisplayUri?s("img",{class:"verdocs-envelope-document-page-layer img",id:`${this.containerId}-${t.name}`,src:this.pageDisplayUri,alt:`Page ${this.pageNumber}`,"aria-hidden":true,loading:"lazy",onLoad:e=>{this.naturalWidth=e.target.naturalWidth;this.naturalHeight=e.target.naturalHeight;this.aspectRatio=this.naturalWidth/this.naturalHeight;this.virtualHeight=this.virtualWidth/this.aspectRatio;this.renderedHeight=e.target.offsetWidth/this.aspectRatio}}):s("div",null))))}get container(){return this}static get style(){return c()}},[0,"verdocs-envelope-document-page",{endpoint:[16],envelopeId:[1,"envelope-id"],documentId:[1,"document-id"],pageNumber:[2,"page-number"],virtualWidth:[2,"virtual-width"],virtualHeight:[1026,"virtual-height"],layers:[16],type:[1],containerId:[32],renderedWidth:[32],renderedHeight:[32],naturalWidth:[32],naturalHeight:[32],aspectRatio:[32],skipFirstNotification:[32],pageDisplayUri:[32]}]);function p(){if(typeof customElements==="undefined"){return}const e=["verdocs-envelope-document-page","verdocs-flag"];e.forEach((e=>{switch(e){case"verdocs-envelope-document-page":if(!customElements.get(h(e))){customElements.define(h(e),l)}break;case"verdocs-flag":if(!customElements.get(h(e))){r()}break}}))}export{l as V,p as d};
-//# sourceMappingURL=p-DscL0SIM.js.map
+import{p as e,H as t,c as i,h as s,d as o,t as a}from"./p-yZBlG3YQ.js";import{VerdocsEndpoint as h,getEnvelopeDocumentPageDisplayUri as d}from"@verdocs/js-sdk";import{t as n}from"./p-zYtapVJ0.js";import{d as r}from"./p-C8yiLtCJ.js";const c=()=>`verdocs-envelope-document-page{width:100%;position:relative}verdocs-envelope-document-page .verdocs-envelope-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-envelope-document-page .verdocs-envelope-document-page-layer.img{width:100%}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.pageRendered=i(this,"pageRendered");this.endpoint=h.getDefault();this.envelopeId="";this.documentId="";this.pageNumber=1;this.virtualWidth=612;this.virtualHeight=792;this.layers=[{name:"page",type:"canvas"}];this.type="original";this.containerId=`verdocs-envelope-document-page-${Math.random().toString(36).substring(2,11)}`;this.renderedWidth=this.virtualWidth;this.renderedHeight=this.virtualHeight;this.naturalWidth=this.virtualWidth;this.naturalHeight=this.virtualHeight;this.aspectRatio=this.virtualWidth/this.virtualHeight;this.skipFirstNotification=true;this.pageDisplayUri="https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png"}async componentWillLoad(){this.pageDisplayUri=await d(this.endpoint,this.documentId,this.pageNumber,this.type)}componentDidLoad(){this.resizeObserver=new ResizeObserver(n((e=>{for(const t of e){const e=t.contentRect.width;this.renderedWidth=e;this.renderedHeight=this.virtualHeight*(e/this.virtualWidth)}this.notifyRenderedSize()}),100));this.resizeObserver.observe(this.container)}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}notifyRenderedSize(){if(this.skipFirstNotification){this.skipFirstNotification=false;return}this.pageRendered.emit({containerId:this.containerId,documentId:this.documentId,pageNumber:this.pageNumber,virtualWidth:this.virtualWidth,virtualHeight:this.virtualHeight,renderedWidth:this.renderedWidth,renderedHeight:this.renderedHeight,naturalWidth:this.naturalWidth,naturalHeight:this.naturalHeight,aspectRatio:this.aspectRatio,xScale:this.renderedWidth/this.virtualWidth,yScale:this.renderedHeight/this.virtualHeight})}render(){const e=`${this.renderedHeight}px`;return s(o,{key:"9f4eed5e187a1b37822c7e7d4ba69f4be519ad6d",id:`${this.containerId}`,style:{height:e,flex:`0 0 ${e}`}},this.layers.map((t=>t.type==="div"?s("div",{class:"verdocs-envelope-document-page-layer",id:`${this.containerId}-${t.name}`,style:{height:e}}):this.pageDisplayUri?s("img",{class:"verdocs-envelope-document-page-layer img",id:`${this.containerId}-${t.name}`,src:this.pageDisplayUri,alt:`Page ${this.pageNumber}`,"aria-hidden":true,loading:"lazy",onLoad:e=>{this.naturalWidth=e.target.naturalWidth;this.naturalHeight=e.target.naturalHeight;this.aspectRatio=this.naturalWidth/this.naturalHeight;this.virtualHeight=this.virtualWidth/this.aspectRatio;this.renderedHeight=e.target.offsetWidth/this.aspectRatio}}):s("div",null))))}get container(){return this}static get style(){return c()}},[0,"verdocs-envelope-document-page",{endpoint:[16],envelopeId:[1,"envelope-id"],documentId:[1,"document-id"],pageNumber:[2,"page-number"],virtualWidth:[2,"virtual-width"],virtualHeight:[1026,"virtual-height"],layers:[16],type:[1],containerId:[32],renderedWidth:[32],renderedHeight:[32],naturalWidth:[32],naturalHeight:[32],aspectRatio:[32],skipFirstNotification:[32],pageDisplayUri:[32]}]);function p(){if(typeof customElements==="undefined"){return}const e=["verdocs-envelope-document-page","verdocs-flag"];e.forEach((e=>{switch(e){case"verdocs-envelope-document-page":if(!customElements.get(a(e))){customElements.define(a(e),l)}break;case"verdocs-flag":if(!customElements.get(a(e))){r()}break}}))}export{l as V,p as d};
+//# sourceMappingURL=p-D56nBgHQ.js.map

package/dist/components/{p-CFacV7mg.js → p-DMaRtkQF.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as o,h as s,F as i,d as r,t as d}from"./p-yZBlG3YQ.js";import{i as l}from"./p-COaijEV0.js";import{VerdocsEndpoint as a,updateField as n}from"@verdocs/js-sdk";import{S as c}from"./p-C7k2AOsW.js";import{S as p}from"./p-C7hFgM52.js";import{d as f}from"./p-Bb5V9TQx.js";import{d as h}from"./p-DGNIsXfr.js";import{d as b}from"./p-C-v22G3g.js";import{d as x}from"./p-DHzSlpJw.js";import{d as u}from"./p-DqzFuSNN.js";import{d as v}from"./p-DhOuB4nS.js";import{d as m}from"./p-Bodw4NVB.js";import{d as g}from"./p-Bxvw_LqR.js";import{d as w}from"./p-PfdIkMoz.js";const k=()=>`verdocs-field-textbox{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textbox.small input,verdocs-field-textbox.small textarea{font-size:8px}verdocs-field-textbox .edge-top,verdocs-field-textbox .edge-right,verdocs-field-textbox .edge-left,verdocs-field-textbox .edge-bottom{position:absolute;z-index:10}verdocs-field-textbox .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-textbox .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-textbox .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-textbox .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;line-height:13px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}`;const y=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=o(this,"settingsChanged");this.deleted=o(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.multiline=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}handleBlur(){this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}this.showingProperties=false}onEditableChanged(e,t){if(t&&!e){l(this.el).unset()}}disconnectedCallback(){l(this.el).unset()}componentDidRender(){l.dynamicDrop(true);if(this.editable){l(this.el).resizable({edges:{top:".edge-top",left:".edge-left",bottom:".edge-bottom",right:".edge-right"},modifiers:[l.modifiers.restrictSize({min:{width:30,height:10}})],listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation();e.target.dataset.originalBottom=e.target.style.bottom}handleResize(e){let{width:t,height:o}=e.rect;const s=e.deltaRect.left;const i=e.deltaRect.bottom;const r=parseFloat(e.target.style.left);const d=parseFloat(e.target.style.bottom);t/=this.xscale;o/=this.yscale;Object.assign(e.target.style,{width:`${t}px`,height:`${o}px`,left:`${r+s}px`,bottom:`${d-i}px`})}async handleResizeEnd(e){const{sourceid:t,fieldname:o}=this;const s=Math.round(parseFloat(e.target.style.width));let i=Math.round(parseFloat(e.target.style.height));if(i<10){i=10}const r=i>15;const d=parseFloat(e.target.style.bottom);const l=parseFloat(e.target.dataset.originalBottom);const c=await p.getTemplate(a.getDefault(),this.sourceid);const f=c.fields.find((e=>e.name===o));const h=d!==l?d/this.yscale:f===null||f===void 0?void 0:f.y;n(a.getDefault(),t,o,{width:s,height:i,y:h,multiline:r}).then((async t=>{var s;const i=await p.getTemplate(a.getDefault(),this.sourceid);const r=JSON.parse(JSON.stringify(i));const d=r.fields.findIndex((e=>e.name===o));if(d>-1){r.fields[d]=t}p.updateTemplate(this.sourceid,r);(s=this.settingsChanged)===null||s===void 0?void 0:s.emit({fieldName:o,field:t});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}render(){const{source:e,sourceid:t,fieldname:o,editable:d=false,done:l=false,disabled:a=false,focused:n,xscale:f=1,yscale:h=1}=this;const{index:b,field:x}=p.getField(e,t,o,this.field);let{required:u=false,placeholder:v="",label:m="",width:g=150,height:w=15,readonly:k=false,default:y="",multiline:z=false}=x||{};const j=`signer-${b%10+1}`;const E=w<15;if(x===null||x===void 0?void 0:x.value){y=x===null||x===void 0?void 0:x.value}const F=g/5;if(l){return s(r,{class:{"verdocs-field":true,done:l}},y)}return s(r,{class:{"verdocs-field":true,required:u,disabled:a,done:l,focused:n,small:E,[j]:true}},d&&s("div",{class:"edge-top"}),d&&s("div",{class:"edge-right"}),d&&s("div",{class:"edge-left"}),d&&s("div",{class:"edge-bottom"}),m&&s("label",null,m),z?s("textarea",{name:o,required:u,placeholder:v,disabled:k||a,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},y):s("input",{type:"text",value:y,name:o,required:u,maxlength:F,placeholder:v,disabled:k||a,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),d&&s(i,null,s("div",{id:`verdocs-settings-panel-trigger-${o}`,style:{transform:`scale(${Math.floor(1/f*1e3)/1e3}, ${Math.floor(1/h*1e3)/1e3})`},class:"settings-icon",innerHTML:c,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&s("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${o}`,onClickAway:()=>this.showingProperties=false},s("verdocs-template-field-properties",{templateId:t,fieldName:o,onClose:()=>this.hideSettingsPanel(),onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:o});return this.hideSettingsPanel()},onSettingsChanged:e=>{var t;(t=this.settingsChanged)===null||t===void 0?void 0:t.emit(e.detail);return this.hideSettingsPanel()},helpText:'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.'}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return k()}},[0,"verdocs-field-textbox",{source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],multiline:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function z(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-textbox","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-textbox":if(!customElements.get(d(e))){customElements.define(d(e),y)}break;case"verdocs-button":if(!customElements.get(d(e))){f()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){h()}break;case"verdocs-component-error":if(!customElements.get(d(e))){b()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){x()}break;case"verdocs-loader":if(!customElements.get(d(e))){u()}break;case"verdocs-portal":if(!customElements.get(d(e))){v()}break;case"verdocs-select-input":if(!customElements.get(d(e))){m()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){g()}break;case"verdocs-text-input":if(!customElements.get(d(e))){w()}break}}))}export{y as V,z as d};
-//# sourceMappingURL=p-CFacV7mg.js.map
+import{p as e,H as t,c as o,h as s,F as i,d as r,t as d}from"./p-yZBlG3YQ.js";import{i as l}from"./p-COaijEV0.js";import{VerdocsEndpoint as a,updateField as n}from"@verdocs/js-sdk";import{S as c}from"./p-C7k2AOsW.js";import{S as p}from"./p-C7hFgM52.js";import{d as f}from"./p-Bb5V9TQx.js";import{d as h}from"./p-NtvxlYzY.js";import{d as b}from"./p-C-v22G3g.js";import{d as x}from"./p-DHzSlpJw.js";import{d as u}from"./p-DqzFuSNN.js";import{d as v}from"./p-DhOuB4nS.js";import{d as m}from"./p-Bodw4NVB.js";import{d as g}from"./p-qLNetL5t.js";import{d as w}from"./p-PfdIkMoz.js";const k=()=>`verdocs-field-textbox{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-textbox.small input,verdocs-field-textbox.small textarea{font-size:8px}verdocs-field-textbox .edge-top,verdocs-field-textbox .edge-right,verdocs-field-textbox .edge-left,verdocs-field-textbox .edge-bottom{position:absolute;z-index:10}verdocs-field-textbox .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-textbox .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-textbox .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-textbox .edge-bottom{bottom:-2px;left:0;right:0;height:5px}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;line-height:13px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87))}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}`;const y=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=o(this,"settingsChanged");this.deleted=o(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.multiline=false;this.editable=false;this.moveable=false;this.done=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}handleBlur(){this.focused=false}async focusField(){this.inputEl.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}this.showingProperties=false}onEditableChanged(e,t){if(t&&!e){l(this.el).unset()}}disconnectedCallback(){l(this.el).unset()}componentDidRender(){l.dynamicDrop(true);if(this.editable){l(this.el).resizable({edges:{top:".edge-top",left:".edge-left",bottom:".edge-bottom",right:".edge-right"},modifiers:[l.modifiers.restrictSize({min:{width:30,height:10}})],listeners:{start:this.handleResizeStart.bind(this),move:this.handleResize.bind(this),end:this.handleResizeEnd.bind(this)}})}}handleResizeStart(e){e.preventDefault();e.stopPropagation();e.target.dataset.originalBottom=e.target.style.bottom}handleResize(e){let{width:t,height:o}=e.rect;const s=e.deltaRect.left;const i=e.deltaRect.bottom;const r=parseFloat(e.target.style.left);const d=parseFloat(e.target.style.bottom);t/=this.xscale;o/=this.yscale;Object.assign(e.target.style,{width:`${t}px`,height:`${o}px`,left:`${r+s}px`,bottom:`${d-i}px`})}async handleResizeEnd(e){const{sourceid:t,fieldname:o}=this;const s=Math.round(parseFloat(e.target.style.width));let i=Math.round(parseFloat(e.target.style.height));if(i<10){i=10}const r=i>15;const d=parseFloat(e.target.style.bottom);const l=parseFloat(e.target.dataset.originalBottom);const c=await p.getTemplate(a.getDefault(),this.sourceid);const f=c.fields.find((e=>e.name===o));const h=d!==l?Math.round(d/this.yscale):f===null||f===void 0?void 0:f.y;n(a.getDefault(),t,o,{width:s,height:i,y:h,multiline:r}).then((async t=>{var s;const i=await p.getTemplate(a.getDefault(),this.sourceid);const r=JSON.parse(JSON.stringify(i));const d=r.fields.findIndex((e=>e.name===o));if(d>-1){r.fields[d]=t}p.updateTemplate(this.sourceid,r);(s=this.settingsChanged)===null||s===void 0?void 0:s.emit({fieldName:o,field:t});Object.assign(e.target.dataset,{x:0,y:0,h:0})})).catch((e=>console.log("Field update failed",e)))}render(){const{source:e,sourceid:t,fieldname:o,editable:d=false,done:l=false,disabled:a=false,focused:n,xscale:f=1,yscale:h=1}=this;const{index:b,field:x}=p.getField(e,t,o,this.field);let{required:u=false,placeholder:v="",label:m="",width:g=150,height:w=15,readonly:k=false,default:y="",multiline:z=false}=x||{};const j=`signer-${b%10+1}`;const E=w<15;if(x===null||x===void 0?void 0:x.value){y=x===null||x===void 0?void 0:x.value}const F=g/5;if(l){return s(r,{class:{"verdocs-field":true,done:l}},y)}return s(r,{class:{"verdocs-field":true,required:u,disabled:a,done:l,focused:n,small:E,[j]:true}},d&&s("div",{class:"edge-top"}),d&&s("div",{class:"edge-right"}),d&&s("div",{class:"edge-left"}),d&&s("div",{class:"edge-bottom"}),m&&s("label",null,m),z?s("textarea",{name:o,required:u,placeholder:v,disabled:k||a,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},y):s("input",{type:"text",value:y,name:o,required:u,maxlength:F,placeholder:v,disabled:k||a,ref:e=>this.inputEl=e,onFocus:()=>this.focused=true,onBlur:()=>this.focused=false}),d&&s(i,null,s("div",{id:`verdocs-settings-panel-trigger-${o}`,style:{transform:`scale(${Math.floor(1/f*1e3)/1e3}, ${Math.floor(1/h*1e3)/1e3})`},class:"settings-icon",innerHTML:c,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&s("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${o}`,onClickAway:()=>this.showingProperties=false},s("verdocs-template-field-properties",{templateId:t,fieldName:o,onClose:()=>this.hideSettingsPanel(),onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:o});return this.hideSettingsPanel()},onSettingsChanged:e=>{var t;(t=this.settingsChanged)===null||t===void 0?void 0:t.emit(e.detail);return this.hideSettingsPanel()},helpText:'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.'}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return k()}},[0,"verdocs-field-textbox",{source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],multiline:[516],editable:[516],moveable:[516],done:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[2,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function z(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-textbox","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-textbox":if(!customElements.get(d(e))){customElements.define(d(e),y)}break;case"verdocs-button":if(!customElements.get(d(e))){f()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){h()}break;case"verdocs-component-error":if(!customElements.get(d(e))){b()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){x()}break;case"verdocs-loader":if(!customElements.get(d(e))){u()}break;case"verdocs-portal":if(!customElements.get(d(e))){v()}break;case"verdocs-select-input":if(!customElements.get(d(e))){m()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){g()}break;case"verdocs-text-input":if(!customElements.get(d(e))){w()}break}}))}export{y as V,z as d};
+//# sourceMappingURL=p-DMaRtkQF.js.map

package/dist/components/{p-CFacV7mg.js.map → p-DMaRtkQF.js.map}

@@ -1 +1 @@
-{"version":3,"names":["verdocsFieldTextboxCss","VerdocsFieldTextbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","field","disabled","multiline","editable","moveable","done","xscale","yscale","pagenumber","showingProperties","focused","handleBlur","focusField","inputEl","focus","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","onEditableChanged","newVal","oldVal","interact","el","unset","disconnectedCallback","componentDidRender","dynamicDrop","resizable","edges","top","left","bottom","right","modifiers","restrictSize","min","width","height","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","e","preventDefault","stopPropagation","target","dataset","originalBottom","style","rect","dX","deltaRect","dY","currentLeft","parseFloat","currentBottom","Object","assign","Math","round","newBottom","template","Store","getTemplate","VerdocsEndpoint","getDefault","oldField","fields","find","f","name","y","updateField","then","async","updatedField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","_a","settingsChanged","emit","fieldName","x","h","catch","console","log","render","index","getField","required","placeholder","label","readonly","default","value","signerClass","small","maxlength","Host","class","ref","onFocus","onBlur","type","Fragment","id","transform","floor","innerHTML","SettingsIcon","onClick","anchor","onClickAway","templateId","onClose","onDelete","deleted","onSettingsChanged","detail","helpText"],"sources":["src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: -0.2px;\n  background-color: var(--verdocs-field-background, transparent);\n  transform-origin: bottom left;\n  border: var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));\n  border-radius: var(--verdocs-field-radius);\n\n  &.small input,\n  &.small textarea {\n    font-size: 8px;\n  }\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    position: absolute;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    line-height: 13px;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    &.required {\n      border: 1px solid var(--verdocs-required-field-border);\n    }\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\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  .settings-icon {\n    position: absolute;\n    top: -4px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 10},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 10) {\n      height = 10;\n    }\n    const multiline = height > 15;\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 15;\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{'verdocs-field': true,done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            required={required}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            value={value}\n            name={fieldname}\n            required={required}\n            maxlength={maxlength}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["verdocsFieldTextboxCss","VerdocsFieldTextbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","field","disabled","multiline","editable","moveable","done","xscale","yscale","pagenumber","showingProperties","focused","handleBlur","focusField","inputEl","focus","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","onEditableChanged","newVal","oldVal","interact","el","unset","disconnectedCallback","componentDidRender","dynamicDrop","resizable","edges","top","left","bottom","right","modifiers","restrictSize","min","width","height","listeners","start","handleResizeStart","bind","move","handleResize","end","handleResizeEnd","e","preventDefault","stopPropagation","target","dataset","originalBottom","style","rect","dX","deltaRect","dY","currentLeft","parseFloat","currentBottom","Object","assign","Math","round","newBottom","template","Store","getTemplate","VerdocsEndpoint","getDefault","oldField","fields","find","f","name","y","updateField","then","async","updatedField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","_a","settingsChanged","emit","fieldName","x","h","catch","console","log","render","index","getField","required","placeholder","label","readonly","default","value","signerClass","small","maxlength","Host","class","ref","onFocus","onBlur","type","Fragment","id","transform","floor","innerHTML","SettingsIcon","onClick","anchor","onClickAway","templateId","onClose","onDelete","deleted","onSettingsChanged","detail","helpText"],"sources":["src/components/fields/verdocs-field-textbox/verdocs-field-textbox.scss?tag=verdocs-field-textbox","src/components/fields/verdocs-field-textbox/verdocs-field-textbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textbox {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: -0.2px;\n  background-color: var(--verdocs-field-background, transparent);\n  transform-origin: bottom left;\n  border: var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));\n  border-radius: var(--verdocs-field-radius);\n\n  &.small input,\n  &.small textarea {\n    font-size: 8px;\n  }\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    position: absolute;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  textarea {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    line-height: 13px;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.required {\n    &.required {\n      border: 1px solid var(--verdocs-required-field-border);\n    }\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\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  .settings-icon {\n    position: absolute;\n    top: -4px;\n    left: -18px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {IEnvelopeField, ITemplate, ITemplateField, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Element, Prop, Method, Event, EventEmitter, Fragment, State, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a simple 1-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textbox',\n  styleUrl: 'verdocs-field-textbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextbox {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) multiline?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  @Listen('blur', {capture: true})\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.inputEl.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 30, height: 10},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 10) {\n      height = 10;\n    }\n    const multiline = height > 15;\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? Math.round(newBottom / this.yscale) : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y, multiline})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    let {required = false, placeholder = '', label = '', width = 150, height = 15, readonly = false, default: value = '', multiline = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n    const small = height < 15;\n\n    // TODO: Consolidate value/defaultValue handling between template and envelope fields.\n    if ((field as any)?.value) {\n      value = (field as any)?.value;\n    }\n\n    // TODO: This is an outdated technique from the old system. We should compute it.\n    const maxlength = width / 5;\n\n    if (done) {\n      return <Host class={{'verdocs-field': true,done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required, disabled, done, focused, small, [signerClass]: true}}>\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {multiline ? (\n          <textarea\n            name={fieldname}\n            required={required}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          >\n            {value}\n          </textarea>\n        ) : (\n          <input\n            type=\"text\"\n            value={value}\n            name={fieldname}\n            required={required}\n            maxlength={maxlength}\n            placeholder={placeholder}\n            disabled={readonly || disabled}\n            ref={el => (this.inputEl = el)}\n            onFocus={() => (this.focused = true)}\n            onBlur={() => (this.focused = false)}\n          />\n        )}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\n                    'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the \"name\" field.<br /><br />If marked required, the participant must complete the field before proceeding.'\n                  }\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DPF2i0o5.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as i,h as n,d as t,t as o}from"./p-yZBlG3YQ.js";import{getTemplate as r,getBrands as d,getOrganization as a,formatFullName as l,getOrganizationContacts as c,isValidEmail as p,createEnvelope as h,getRGBA as f}from"@verdocs/js-sdk";import{D as v,g as x}from"./p-Cq60Emo_.js";import{u as m,d as u}from"./p-CaFhF-9s.js";import{V as b}from"./p-D97GxsI-.js";import{S as g}from"./p-C1sRVZWv.js";import{S as w}from"./p-C7hFgM52.js";import{d as k}from"./p-Bb5V9TQx.js";import{d as y}from"./p-NtvxlYzY.js";import{d as S}from"./p-C-v22G3g.js";import{d as z}from"./p-C8yiLtCJ.js";import{d as E}from"./p-DqzFuSNN.js";import{d as C}from"./p-DreV6Npp.js";const D=e=>((e===null||e===void 0?void 0:e.roles)||[]).map((e=>e.name));const N=(e,s)=>Math.max(D(e).findIndex((e=>e===s)),0);const M=()=>`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;width:0;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;width:0;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;width:0;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 j='<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 B='<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>';const _='<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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>';const I='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>';const T='<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 3h6v6M10 14 21 3M21 14v7H3V3h7"/></svg>';const L="https://app.verdocs.com/assets/blue-logo.svg";const $=.25;const V=60;const H=500;const R=1;const O=120;const F=120;const A={email:"Email",passcode:"Passcode",sms:"SMS",kba:"KBA",id:"ID check"};const G=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.beforeSend=i(this,"beforeSend");this.send=i(this,"send");this.exit=i(this,"exit");this.sdkError=i(this,"sdkError");this.searchContacts=i(this,"searchContacts");this.templateListenerId=null;this.endpoint=v;this.templateId=null;this.environment="";this.showCancel=true;this.brandKey="";this.swipeStart=null;this.swallowNextClick=false;this.loadedOrganizationId="";this.containerId=`verdocs-send-${Math.random().toString(36).substring(2,11)}`;this.view="main";this.editingRoleId="";this.sessionContacts=[];this.sending=false;this.brands=[];this.organization=null;this.expiresInDays="";this.noContact=false;this.senderDefaults={name:"",email:""};this.senderName="";this.senderEmail="";this.rolesCompleted={};this.loading=true;this.template=null}disconnectedCallback(){this.unlistenToTemplate()}componentDidLoad(){this.el.addEventListener("click",(e=>{if(this.swallowNextClick){this.swallowNextClick=false;e.stopPropagation();e.preventDefault()}}),true)}componentDidRender(){var e,s;m(this.el.querySelector(".detail-body"));(e=this.el.querySelector(".main-pane"))===null||e===void 0?void 0:e.toggleAttribute("inert",this.view!=="main");(s=this.el.querySelector(".detail-pane"))===null||s===void 0?void 0:s.toggleAttribute("inert",this.view==="main")}async listenToTemplate(){console.log("[SEND] Loading template",this.templateId);this.unlistenToTemplate();w.subscribe("templates",this.templateId,(()=>r(this.endpoint,this.templateId)),true,(e=>{console.log("[SEND] Got new template",e);this.template=e;this.loading=false;this.rolesCompleted={};this.view="main";this.editingRoleId="";this.recomputeRolesCompleted();this.loadBrands()}))}loadBrands(){var e;const s=(e=this.template)===null||e===void 0?void 0:e.organization_id;if(!s||s===this.loadedOrganizationId){return}const i=!!this.loadedOrganizationId;this.loadedOrganizationId=s;this.brands=[];this.organization=null;if(i){this.brandKey=""}const n=()=>{var e;return((e=this.template)===null||e===void 0?void 0:e.organization_id)===s};d(this.endpoint,s).then((e=>{if(n()){this.brands=e||[]}})).catch((e=>console.log("[SEND] Unable to load brands",e)));a(this.endpoint,s).then((e=>{if(n()){this.organization=e}})).catch((e=>console.log("[SEND] Unable to load organization",e)))}handleExpiryInput(e){const s=(e.target.value||"").replace(/[^0-9]/g,"");this.expiresInDays=s?String(Math.min(Math.max(Number(s),R),O)):"";e.target.value=this.expiresInDays}effectiveExpiryDays(){const e=Number(this.expiresInDays);return e>=R?e:F}expiresAt(){return new Date(Date.now()+this.effectiveExpiryDays()*24*60*60*1e3)}unlistenToTemplate(){if(this.templateListenerId){w.store.delListener(this.templateListenerId);this.templateListenerId=null}}async reset(){this.rolesCompleted={};this.view="main";this.editingRoleId="";this.brandKey="";this.expiresInDays="";this.noContact=false;this.senderName="";this.senderEmail=""}effectiveSenderName(){return this.senderName||this.senderDefaults.name}effectiveSenderEmail(){return this.senderEmail||this.senderDefaults.email}senderOverrides(){const e=this.senderName.trim();const s=this.senderEmail.trim();return{sender_name:e&&e!==this.senderDefaults.name?e:undefined,sender_email:s&&s!==this.senderDefaults.email?s:undefined}}onTemplateIdChanged(e){console.log("[SEND] Template ID changed",e);this.listenToTemplate()}async componentWillLoad(){var e,s,i;try{this.endpoint.onSessionChanged(((e,s,i)=>{if(!i){return}const n={id:i.id,first_name:i.first_name,last_name:i.last_name,email:i.email,phone:i.phone};if(i){this.senderDefaults={name:l(i),email:i.email||""};this.sessionContacts=[n];c(this.endpoint).then((e=>{console.log("[SEND] Got contacts",e);this.sessionContacts=[...e,n]})).catch((e=>{console.log("[SEND] Error getting contacts",e)}))}}));this.endpoint.loadSession();if(!this.endpoint.session){console.log("[SEND] Unable to start Send operation, must be authenticated");return}if(!this.templateId){console.log(`[SEND] Missing required template ID ${this.templateId}`);return}this.listenToTemplate()}catch(n){console.log("[SEND] Error with send session",n);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new g(n.message,(s=n.response)===null||s===void 0?void 0:s.status,(i=n.response)===null||i===void 0?void 0:i.data))}}recomputeRolesCompleted(){var e;this.rolesCompleted={};const s={};(((e=this.template)===null||e===void 0?void 0:e.roles)||[]).forEach((e=>{const i=e.sequence;s[i]||(s[i]=[]);const n=`r-${i}-${s[i].length}`;s[i].push({...e,id:n,role_name:e.name,first_name:e.first_name,last_name:e.last_name});if(e.first_name&&p(e.email)){this.rolesCompleted[n]={...e,id:n,role_name:e.name,first_name:e.first_name,last_name:e.last_name}}}))}getSequenceNumbers(){var e;const s={};(((e=this.template)===null||e===void 0?void 0:e.roles)||[]).forEach((e=>{s[e.sequence]=true}));return Object.keys(s).map((e=>+e)).sort(((e,s)=>e-s))}getRolesAtLevel(e){var s;const i=(((s=this.template)===null||s===void 0?void 0:s.roles)||[]).filter((s=>s.sequence===e)).map(((s,i)=>({...s,id:`r-${e}-${i}`,role_name:s.name,first_name:s.first_name,last_name:s.last_name})));return i}getRoleById(e){for(const s of this.getSequenceNumbers()){const i=this.getRolesAtLevel(s).find((s=>s.id===e));if(i){return i}}return null}getRecipientOptionLabels(e){if(!e){return[]}const s=(e.auth_methods||[]).filter((e=>e!=="email")).map((e=>A[e]||e));if(e.delegator){s.push("May delegate")}if(e.name_locked){s.push("Name locked")}return s}getDefaultBrand(){var e;const s=(e=this.organization)===null||e===void 0?void 0:e.default_brand_id;return s&&this.brands.find((e=>e.id===s))||null}getDefaultBrandLabel(){var e;const s=(e=this.getDefaultBrand())===null||e===void 0?void 0:e.name;return`Default (${s||"Verdocs"})`}getSelectedBrandLabel(){if(!this.brandKey){return this.getDefaultBrandLabel()}const e=this.brands.find((e=>e.key===this.brandKey));return(e===null||e===void 0?void 0:e.name)||(e===null||e===void 0?void 0:e.key)||this.brandKey}showView(e){this.view=e}handleSelectContact(e,s){e.preventDefault();this.rolesCompleted={...this.rolesCompleted,[s.id]:{...s,...e.detail}};this.editingRoleId="";this.view="main"}handleClickRole(e,s){e.stopPropagation();this.editingRoleId=s.id;this.view="recipient"}handleSend(e){var s;if(this.sending){console.log("[SEND] Skipping duplicate send",e);return}console.log("[SEND] Sending",e);e.preventDefault();e.stopPropagation();this.sending=true;const i=Intl.DateTimeFormat().resolvedOptions();const n={template_id:this.templateId,name:((s=this.template)===null||s===void 0?void 0:s.name)||"New Envelope",environment:this.environment,initial_reminder:0,followup_reminders:0,recipients:Object.values(this.rolesCompleted),timezone:i.timeZone,locale:i.locale,expires_at:this.expiresAt().toISOString()};n.no_contact=this.noContact;const{sender_name:t,sender_email:o}=this.senderOverrides();if(t){n.sender_name=t}if(o){n.sender_email=o}if(this.brandKey){n.brand_key=this.brandKey}const r=this.beforeSend.emit({...n,name:n.name,template:this.template});if(r.defaultPrevented){console.log("[SEND] Send cancelled by parent",n);this.sending=false;return}console.log("[SEND] Creating envelope",n);h(this.endpoint,n).then((e=>{var s;console.log("[SEND] Send envelope",e);this.reset().catch((e=>console.log("Unknown Error",e)));this.sending=false;(s=this.send)===null||s===void 0?void 0:s.emit({...n,name:n.name,envelope_id:e.id,envelope:e})})).catch((e=>{var s,i,n;console.log("[SEND] Send error",e);b(((i=(s=e.response)===null||s===void 0?void 0:s.data)===null||i===void 0?void 0:i.error)||"Error creating envelope, please try again later.");this.sending=false;(n=this.sdkError)===null||n===void 0?void 0:n.emit(e)}))}handleCancel(e){var s;e.stopPropagation();(s=this.exit)===null||s===void 0?void 0:s.emit()}handleSwipeStart(e){var s,i;this.swallowNextClick=false;const n=e.currentTarget;const t=n.getBoundingClientRect();const o=!!((i=(s=e.target)===null||s===void 0?void 0:s.closest)===null||i===void 0?void 0:i.call(s,"input, textarea, select, [contenteditable]"));if(this.view==="main"||o||e.clientX-t.left>t.width*$){this.swipeStart=null;return}this.swipeStart={x:e.clientX,y:e.clientY,time:Date.now()}}handleSwipeEnd(e){const s=this.swipeStart;this.swipeStart=null;if(!s){return}const i=e.clientX-s.x;const n=Math.abs(e.clientY-s.y);if(i>=V&&i>n&&Date.now()-s.time<=H){this.swallowNextClick=true;this.showView("main")}}renderDetailHeader(e){return n("div",{class:"detail-header"},n("button",{type:"button",class:"back",onClick:()=>this.showView("main")},n("span",{class:"icon",innerHTML:B}),"Back"),n("div",{class:"detail-title"},e),n("div",{class:"detail-header-spacer"}))}renderDetailBody(e){return n("div",{class:"detail-body-wrap"},n("div",{class:"detail-body",onScroll:e=>m(e.target)},e),n("div",{class:"scroll-fade"}))}renderDoneButton(){return n("div",{class:"detail-footer"},n("verdocs-button",{label:"Done",size:"small",onClick:()=>this.showView("main")}))}renderRecipientView(){var e;const s=this.getRoleById(this.editingRoleId);if(!s){return n("div",{class:"detail recipient-detail"},this.renderDetailHeader("Recipient"))}const i=N(this.template,s.role_name);return n("div",{class:"detail recipient-detail"},this.renderDetailHeader([n("span",{class:"role-dot",style:{backgroundColor:f(i)}}),s.role_name]),n("verdocs-contact-picker",{key:s.id,showCancel:false,onExit:()=>this.showView("main"),onNext:e=>this.handleSelectContact(e,s),contactSuggestions:this.sessionContacts,templateRole:(e=this.rolesCompleted[s.id])!==null&&e!==void 0?e:s,onSearchContacts:e=>{var s;return(s=this.searchContacts)===null||s===void 0?void 0:s.emit(e.detail)}}))}renderBrandSwatch(e,s){const i=(e===null||e===void 0?void 0:e.favicon_url)||(e===null||e===void 0?void 0:e.thumbnail_url)||(e?null:L);if(i){return n("span",{class:"swatch logo"},n("img",{src:i,alt:""}))}return n("span",{class:"swatch",style:{backgroundColor:(e===null||e===void 0?void 0:e.primary_color)||"#4c56cb"}},s.substring(0,2).toUpperCase())}renderBrandOption(e,s,i,t){return n("button",{type:"button",class:{option:true,selected:this.brandKey===e},onClick:()=>this.brandKey=e},n("span",{class:"radio"}),t,n("span",{class:"option-label"},s,n("small",null,i)))}renderBrandView(){const e=this.getDefaultBrand();const s=this.brands.filter((s=>s.id!==(e===null||e===void 0?void 0:e.id))).sort(((e,s)=>(e.name||e.key).localeCompare(s.name||s.key)));const i=this.brands.length>0;return n("div",{class:"detail"},this.renderDetailHeader("Brand"),this.renderDetailBody([n("div",{class:"option-list"},this.renderBrandOption("",this.getDefaultBrandLabel(),"Organization default",this.renderBrandSwatch(e,(e===null||e===void 0?void 0:e.name)||"V")),s.length>0&&n("div",{class:"option-divider"}),s.map((e=>this.renderBrandOption(e.key,e.name||e.key,e.key,this.renderBrandSwatch(e,e.name||e.key))))),!i&&n("p",{class:"hint"},"Configure the look and feel of the signing experience by"," ",n("a",{href:`${x(this.endpoint)}/settings/branding`,target:"_blank",rel:"noopener"},"Creating a Brand",n("span",{class:"icon",innerHTML:T})),".")]),this.renderDoneButton())}renderExpiresView(){const e=this.expiresAt();const s=`${e.toLocaleDateString(undefined,{month:"short",day:"numeric",year:"numeric"})} at ${e.toLocaleTimeString(undefined,{hour:"numeric",minute:"2-digit"})}`;return n("div",{class:"detail"},this.renderDetailHeader("Expiration"),this.renderDetailBody([n("div",{class:"expires-field"},n("input",{type:"text",inputMode:"numeric","aria-label":"Expires in (days)",placeholder:String(F),value:this.expiresInDays,disabled:this.sending,onInput:e=>this.handleExpiryInput(e)}),n("span",{class:"suffix"},"days")),n("p",{class:"hint"},"This envelope will expire on ",s,". Expirations may be set from ",R,"-",O," days. If left blank, this will default to ",F,".")]),this.renderDoneButton())}renderSenderView(){const e=!this.senderEmail.trim()||p(this.senderEmail.trim());return n("div",{class:"detail"},this.renderDetailHeader("Sender"),this.renderDetailBody([n("div",{class:"sender-field"},n("label",{htmlFor:`${this.containerId}-sender-name`},"Name"),n("input",{id:`${this.containerId}-sender-name`,type:"text",value:this.effectiveSenderName(),disabled:this.sending,onInput:e=>this.senderName=e.target.value})),n("div",{class:"sender-field"},n("label",{htmlFor:`${this.containerId}-sender-email`},"Email"),n("input",{id:`${this.containerId}-sender-email`,type:"email",value:this.effectiveSenderEmail(),disabled:this.sending,onInput:e=>this.senderEmail=e.target.value}),!e&&n("div",{class:"field-error"},"Enter a valid email address.")),n("div",{class:"notice"},n("span",{class:"icon",innerHTML:I}),n("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'," ",n("a",{href:`${x(this.endpoint)}/settings/brands`,target:"_blank",rel:"noopener"},"Brands",n("span",{class:"icon",innerHTML:T}))," ","."))]),this.renderDoneButton())}renderNotificationsView(){return n("div",{class:"detail"},this.renderDetailHeader("Notifications"),this.renderDetailBody([n("verdocs-checkbox",{size:"small",label:"Disable notifications",checked:this.noContact,onInput:e=>this.noContact=!!e.target.checked}),this.noContact&&n("div",{class:"warning"},n("span",{class:"icon",innerHTML:_}),n("div",null,"Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or via an API call. We strongly recommend enabling"," ",n("a",{href:`${x(this.endpoint)}/settings/webhooks`,target:"_blank",rel:"noopener"},"Webhooks",n("span",{class:"icon",innerHTML:T}))," ","to help automate this process."))]),this.renderDoneButton())}renderDetail(){switch(this.view){case"recipient":return this.renderRecipientView();case"brand":return this.renderBrandView();case"expires":return this.renderExpiresView();case"notifications":return this.renderNotificationsView();case"sender":return this.renderSenderView();default:return null}}render(){var e;if(this.loading){return n(t,null,n("verdocs-loader",null))}if(!this.endpoint.session){return n(t,{style:{display:"flex"}},n("verdocs-component-error",{message:"You must be authenticated to use this module."}))}const s=this.getSequenceNumbers();const i=Object.values(this.rolesCompleted).filter((e=>p(e.email)&&e.first_name&&e.last_name));const o=i.length>=D(this.template).length;const r=i.map((e=>e.email.toLowerCase()));const d=new Set(r).size<r.length;const a=this.expiresAt();const c=a.toLocaleDateString(undefined,{month:"short",day:"numeric"});return n(t,{class:{sendable:(e=this.template)===null||e===void 0?void 0:e.is_sendable,"detail-open":this.view!=="main"}},n("div",{class:"track"},n("div",{class:"pane main-pane","aria-hidden":this.view!=="main"?"true":"false"},n("div",{class:"section-title"},"Recipients"),n("div",{class:"recipients"},s.map((e=>[s.length>1&&n("div",{class:"step"},"Step ",e),this.getRolesAtLevel(e).map((e=>{const s=N(this.template,e.role_name);const t=this.rolesCompleted[e.id];const o=t&&i.findIndex((s=>s.role_name===e.role_name))>-1;const r=this.getRecipientOptionLabels(t);return n("button",{type:"button",class:"recipient","data-ri":s,"data-rn":e.role_name,onClick:s=>this.handleClickRole(s,e)},n("span",{class:"role-dot",style:{backgroundColor:f(s)}}),n("span",{class:"who"},n("span",{class:"role-name"},e.role_name),o?n("span",{class:"who-detail"},l(t)," · ",t.email):n("span",{class:"who-detail configure"},"Configure recipient"),r.length>0&&n("span",{class:"options"},r.map((e=>n("span",{class:"pill"},e))))),n("span",{class:"chevron",innerHTML:j}))}))]))),n("div",{class:"section-title delivery-title"},"Delivery"),n("div",{class:"delivery"},n("button",{type:"button",class:"kv",onClick:()=>this.showView("brand"),disabled:this.sending},n("span",{class:"key"},"Brand"),n("span",{class:"value"},this.getSelectedBrandLabel()),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("expires"),disabled:this.sending},n("span",{class:"key"},"Expires"),n("span",{class:"value"},this.effectiveExpiryDays()," days ",n("small",null,"· ",c)),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("sender"),disabled:this.sending},n("span",{class:"key"},"Sender"),n("span",{class:"value stacked"},n("span",{class:"line"},this.effectiveSenderName()||this.effectiveSenderEmail()),this.effectiveSenderName()&&this.effectiveSenderEmail()?n("small",{class:"line"},this.effectiveSenderEmail()):null),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("notifications"),disabled:this.sending},n("span",{class:"key"},"Notifications"),n("span",{class:{value:true,off:this.noContact}},this.noContact?"Off":"On"),n("span",{class:"chevron",innerHTML:j}))),n("div",{class:"main-spacer"}),n("div",{class:"buttons"},d&&n("div",{class:"error-message"},"Recipients cannot share the same email."),this.sending&&n("verdocs-spinner",null),this.showCancel&&n("verdocs-button",{label:"Cancel",size:"small",variant:"outline",onClick:e=>this.handleCancel(e),disabled:this.sending}),n("verdocs-button",{label:"Send",size:"small",disabled:!o||this.sending||d,onClick:e=>this.handleSend(e)}))),n("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 this}static get watchers(){return{templateId:[{onTemplateIdChanged:0}]}}static get style(){return M()}},[0,"verdocs-send",{endpoint:[16],templateId:[513,"template-id"],environment:[1],showCancel:[4,"show-cancel"],brandKey:[1025,"brand-key"],containerId:[32],view:[32],editingRoleId:[32],sessionContacts:[32],sending:[32],brands:[32],organization:[32],expiresInDays:[32],noContact:[32],senderDefaults:[32],senderName:[32],senderEmail:[32],rolesCompleted:[32],loading:[32],template:[32],reset:[64]},undefined,{templateId:[{onTemplateIdChanged:0}]}]);function P(){if(typeof customElements==="undefined"){return}const e=["verdocs-send","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-contact-picker","verdocs-flag","verdocs-loader","verdocs-spinner"];e.forEach((e=>{switch(e){case"verdocs-send":if(!customElements.get(o(e))){customElements.define(o(e),G)}break;case"verdocs-button":if(!customElements.get(o(e))){k()}break;case"verdocs-checkbox":if(!customElements.get(o(e))){y()}break;case"verdocs-component-error":if(!customElements.get(o(e))){S()}break;case"verdocs-contact-picker":if(!customElements.get(o(e))){u()}break;case"verdocs-flag":if(!customElements.get(o(e))){z()}break;case"verdocs-loader":if(!customElements.get(o(e))){E()}break;case"verdocs-spinner":if(!customElements.get(o(e))){C()}break}}))}export{G as V,P as d};
+//# sourceMappingURL=p-DPF2i0o5.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getRoleNames","template","roles","map","role","name","getRoleIndex","role_name","Math","max","findIndex","verdocsSendCss","chevronRightIcon","chevronLeftIcon","warningIcon","infoIcon","externalLinkIcon","VERDOCS_LOGO_URL","SWIPE_START_FRACTION","SWIPE_MIN_DISTANCE","SWIPE_MAX_DURATION","MIN_EXPIRY_DAYS","MAX_EXPIRY_DAYS","DEFAULT_EXPIRY_DAYS","AUTH_METHOD_LABELS","email","passcode","sms","kba","id","VerdocsSend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","DefaultEndpoint","templateId","environment","showCancel","brandKey","swipeStart","swallowNextClick","loadedOrganizationId","containerId","random","toString","substring","view","editingRoleId","sessionContacts","sending","brands","organization","expiresInDays","noContact","senderDefaults","senderName","senderEmail","rolesCompleted","loading","disconnectedCallback","unlistenToTemplate","componentDidLoad","el","addEventListener","e","stopPropagation","preventDefault","componentDidRender","updateScrollFade","querySelector","_a","toggleAttribute","_b","listenToTemplate","console","log","Store","subscribe","getTemplate","recomputeRolesCompleted","loadBrands","organizationId","organization_id","changedOrganization","stillCurrent","getBrands","then","catch","getOrganization","handleExpiryInput","digits","target","value","replace","String","min","Number","effectiveExpiryDays","days","expiresAt","Date","now","store","delListener","reset","effectiveSenderName","effectiveSenderEmail","senderOverrides","trim","sender_name","undefined","sender_email","onTemplateIdChanged","newTemplateId","componentWillLoad","onSessionChanged","_endpoint","_session","profile","me","first_name","last_name","phone","formatFullName","getOrganizationContacts","contacts","loadSession","session","sdkError","emit","SDKError","message","response","status","_c","data","rolesAtLevel","forEach","level","sequence","length","push","isValidEmail","getSequenceNumbers","sequences","Object","keys","s","sort","a","b","getRolesAtLevel","filter","index","getRoleById","match","find","getRecipientOptionLabels","recipient","labels","auth_methods","method","delegator","name_locked","getDefaultBrand","defaultId","default_brand_id","brand","getDefaultBrandLabel","getSelectedBrandLabel","key","showView","handleSelectContact","detail","handleClickRole","handleSend","localeData","Intl","DateTimeFormat","resolvedOptions","details","template_id","initial_reminder","followup_reminders","recipients","values","timezone","timeZone","locale","expires_at","toISOString","no_contact","brand_key","beforeSendResult","beforeSend","defaultPrevented","createEnvelope","r","send","envelope_id","envelope","VerdocsToast","error","handleCancel","exit","handleSwipeStart","pane","currentTarget","rect","getBoundingClientRect","onTextEntry","closest","call","clientX","left","width","x","y","clientY","time","handleSwipeEnd","start","dx","dy","abs","renderDetailHeader","title","h","class","type","onClick","innerHTML","renderDetailBody","content","onScroll","renderDoneButton","label","size","renderRecipientView","roleIndex","style","backgroundColor","getRGBA","onExit","onNext","contactSuggestions","templateRole","onSearchContacts","searchContacts","renderBrandSwatch","fallbackInitial","image","favicon_url","thumbnail_url","src","alt","primary_color","toUpperCase","renderBrandOption","sub","swatch","option","selected","renderBrandView","defaultBrand","others","localeCompare","hasBrands","href","getWebAppUrl","rel","renderExpiresView","when","toLocaleDateString","month","day","year","toLocaleTimeString","hour","minute","inputMode","placeholder","disabled","onInput","renderSenderView","validEmail","htmlFor","renderNotificationsView","checked","renderDetail","render","Host","display","levels","rolesAssigned","allRolesAssigned","assignedEmails","toLowerCase","hasDuplicateEmails","Set","expiresShort","sendable","is_sendable","completed","assigned","optionLabels","off","variant","onPointerDown","onPointerUp","onPointerCancel"],"sources":["src/utils/Templates.ts","src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["import {ITemplate} from '@verdocs/js-sdk';\n\nexport const getRoleNames = (template: ITemplate | null) => (template?.roles || []).map(role => role.name);\n\nexport const getRoleIndex = (template: ITemplate | null, role_name: string) =>\n  Math.max(\n    getRoleNames(template).findIndex(name => name === role_name),\n    0,\n  );\n","@import '../../../theme.scss';\n\nverdocs-send {\n  --send-ink: var(--verdocs-body-color, #111827);\n  --send-ink-2: #374151;\n  --send-muted: #6b7280;\n  --send-faint: #9ca3af;\n  --send-rule: #e5e7eb;\n  --send-control-border: #d1d5db;\n  --send-accent: var(--verdocs-link-color, #{$secondary-color});\n  --send-accent-tint: #f4f5fc;\n  --send-accent-tint-2: #e6e7f8;\n  --send-warning-bg: #fffbeb;\n  --send-warning-border: #fde68a;\n  --send-warning-icon: #d97706;\n  --send-warning-text: #78350f;\n  --send-radius: var(--verdocs-dialog-radius, 8px);\n  --send-min-height: 480px;\n  --send-max-width: 480px;\n\n  display: none;\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-width: 0;\n  max-width: var(--verdocs-send-max-width, var(--send-max-width));\n  box-sizing: border-box;\n  background: #ffffff;\n  color: var(--send-ink);\n  font-size: 14px;\n  border-radius: var(--send-radius);\n  border: 1px solid var(--send-rule);\n  font-family: $verdocs-primary-font;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &.sendable {\n    display: block;\n  }\n\n  // The main pane sets the card's height. The detail pane sits beside it, off-canvas to the\n  // right, and the track slides one pane-width left when a detail view is open. Detail views\n  // taller than the card scroll inside it.\n  .track {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--send-min-height);\n    transition: transform 220ms ease-out;\n  }\n\n  &.detail-open .track {\n    transform: translateX(-100%);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .track {\n      transition: none;\n    }\n  }\n\n  .pane {\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .main-pane {\n    flex: 1;\n  }\n\n  .detail-pane {\n    position: absolute;\n    top: 0;\n    left: 100%;\n    bottom: 0;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .detail {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  // The body scrolls between a fixed header and a pinned Done button. The fade sits over the\n  // body's bottom edge and shows only while there is more below (classes set by updateScrollFade).\n  .detail-body-wrap {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .detail-body {\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  .recipient-detail verdocs-contact-picker {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .section-title {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--send-ink-2);\n    margin: 0 0 6px 0;\n  }\n\n  .delivery-title {\n    margin-top: 16px;\n  }\n\n  .step {\n    font-size: 11px;\n    color: var(--send-muted);\n    padding: 10px 0 4px 0;\n  }\n\n  .recipient,\n  .kv {\n    all: unset;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    align-items: center;\n    column-gap: 10px;\n    border-top: 1px solid var(--send-rule);\n    color: var(--send-ink);\n    font-family: inherit;\n\n    &:focus-visible {\n      outline: 2px solid var(--send-accent);\n      outline-offset: -2px;\n      border-radius: 4px;\n    }\n\n    .chevron {\n      flex: 0 0 16px;\n      width: 16px;\n      height: 16px;\n      color: var(--send-faint);\n\n      svg {\n        width: 16px;\n        height: 16px;\n        display: block;\n      }\n    }\n  }\n\n  .recipient {\n    padding: 8px 6px 8px 0;\n\n    &:last-child {\n      border-bottom: 1px solid var(--send-rule);\n    }\n\n    .who {\n      flex: 1;\n      // Stop a long name/email from making the panel grow\n      width: 0;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .role-name {\n      font-size: 13px;\n      font-weight: 600;\n    }\n\n    .who-detail {\n      font-size: 12px;\n      color: var(--send-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &.configure {\n        color: var(--send-accent);\n        font-weight: 500;\n      }\n    }\n\n    .options {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 3px;\n    }\n\n    .pill {\n      height: 18px;\n      padding: 0 6px;\n      border-radius: 999px;\n      font-size: 10px;\n      font-weight: 500;\n      display: inline-flex;\n      align-items: center;\n      background: var(--send-accent-tint);\n      color: var(--send-ink-2);\n    }\n  }\n\n  .role-dot {\n    flex: 0 0 10px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.1);\n  }\n\n  .kv {\n    height: 40px;\n    padding: 0 6px 0 0;\n    font-size: 13px;\n\n    &:last-child {\n      border-bottom: 1px solid var(--send-rule);\n    }\n\n    &:disabled {\n      cursor: default;\n      color: var(--send-muted);\n    }\n\n    .key {\n      flex: 0 0 84px;\n      color: var(--send-muted);\n    }\n\n    .value {\n      flex: 1;\n      width: 0;\n      min-width: 0;\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      small {\n        font-size: inherit;\n        font-weight: 400;\n        color: var(--send-muted);\n      }\n\n      // Name on one line, email on the next: each line truncates on its own.\n      &.stacked {\n        display: flex;\n        flex-direction: column;\n        row-gap: 1px;\n        white-space: normal;\n\n        .line {\n          display: block;\n          min-width: 0;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        small.line {\n          font-size: 12px;\n        }\n      }\n\n      &.off {\n        color: var(--send-warning-icon);\n      }\n    }\n\n    &:has(.value.stacked) {\n      height: auto;\n      min-height: 40px;\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n  }\n\n  .main-spacer,\n  .detail-spacer {\n    flex: 1;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 14px;\n    column-gap: 10px;\n    flex-wrap: wrap;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    .error-message {\n      width: 100%;\n      color: $verdocs-red-1;\n      font-size: 13px;\n      margin-bottom: 10px;\n    }\n  }\n\n  // Detail views\n  .detail-header {\n    display: flex;\n    align-items: center;\n    column-gap: 8px;\n    margin: -2px 0 14px 0;\n\n    .back {\n      all: unset;\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--send-accent);\n      font-family: inherit;\n      flex: 0 0 52px;\n\n      .icon,\n      .icon svg {\n        width: 16px;\n        height: 16px;\n        display: block;\n      }\n\n      &:focus-visible {\n        outline: 2px solid var(--send-accent);\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n    }\n\n    .detail-title {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      column-gap: 8px;\n      font-size: 14px;\n      font-weight: 600;\n      text-align: center;\n    }\n\n    .detail-header-spacer {\n      flex: 0 0 52px;\n    }\n  }\n\n  .detail-footer {\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid var(--send-rule);\n\n    verdocs-button,\n    verdocs-button button {\n      width: 100%;\n    }\n  }\n\n  .hint {\n    font-size: 12px;\n    line-height: 1.5;\n    color: var(--send-muted);\n    margin: 10px 0 0 0;\n  }\n\n  .option-list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option {\n    all: unset;\n    display: flex;\n    width: 100%;\n    cursor: pointer;\n    align-items: center;\n    column-gap: 10px;\n    padding: 10px 0;\n    font-size: 13px;\n    font-family: inherit;\n    color: var(--send-ink);\n    border-top: 1px solid var(--send-rule);\n\n    &:first-child {\n      border-top: 0;\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--send-accent);\n      outline-offset: -2px;\n      border-radius: 4px;\n    }\n\n    .radio {\n      flex: 0 0 16px;\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n      border: 1px solid var(--send-control-border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &.selected .radio {\n      border-color: var(--send-accent);\n\n      &::after {\n        content: '';\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: var(--send-accent);\n      }\n    }\n\n    .swatch {\n      flex: 0 0 22px;\n      width: 22px;\n      height: 22px;\n      border-radius: 5px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 9px;\n      font-weight: 700;\n      color: #ffffff;\n      overflow: hidden;\n\n      &.logo {\n        background: #ffffff;\n        border: 1px solid var(--send-rule);\n      }\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n      }\n    }\n\n    .option-label {\n      flex: 1;\n      width: 0;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n\n      small {\n        font-size: 11px;\n        color: var(--send-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n\n  .option-divider {\n    height: 0;\n    margin: 2px 0;\n    border-top: 1px solid var(--send-control-border);\n\n    + .option {\n      border-top: 0;\n    }\n  }\n\n  .hint a {\n    color: var(--send-accent);\n    font-weight: 500;\n    text-decoration: none;\n    border-bottom: 1px solid var(--send-accent-tint-2);\n\n    .icon,\n    .icon svg {\n      width: 11px;\n      height: 11px;\n      display: inline-block;\n      vertical-align: -1px;\n      margin-left: 2px;\n    }\n  }\n\n  .expires-field {\n    position: relative;\n\n    input {\n      width: 100%;\n      height: 36px;\n      padding: 0 52px 0 10px;\n      font-size: 14px;\n      font-family: inherit;\n      color: var(--send-ink);\n      background: #ffffff;\n      border: 1px solid var(--send-control-border);\n      border-radius: 6px;\n      outline: none;\n\n      &:focus {\n        border-color: var(--send-accent);\n        box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n      }\n\n      &::placeholder {\n        color: var(--send-faint);\n      }\n    }\n\n    .suffix {\n      position: absolute;\n      right: 10px;\n      top: 0;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--send-muted);\n      pointer-events: none;\n    }\n  }\n\n  .sender-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(--send-ink-2);\n    }\n\n    input {\n      width: 100%;\n      height: 36px;\n      padding: 0 10px;\n      font-size: 14px;\n      font-family: inherit;\n      color: var(--send-ink);\n      background: #ffffff;\n      border: 1px solid var(--send-control-border);\n      border-radius: 6px;\n      outline: none;\n\n      &:focus {\n        border-color: var(--send-accent);\n        box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n      }\n    }\n\n    .field-error {\n      font-size: 12px;\n      color: $verdocs-red-1;\n    }\n  }\n\n  .notice {\n    display: flex;\n    column-gap: 10px;\n    margin-top: 4px;\n    padding: 10px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n    border-radius: 6px;\n    color: var(--send-ink-2);\n    background: var(--send-accent-tint);\n    border: 1px solid var(--send-accent-tint-2);\n\n    > .icon {\n      flex: 0 0 18px;\n      width: 18px;\n      height: 18px;\n      margin-top: 1px;\n      color: var(--send-accent);\n\n      svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n      }\n    }\n  }\n\n  .warning {\n    display: flex;\n    column-gap: 10px;\n    margin-top: 12px;\n    padding: 10px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n    border-radius: 6px;\n    color: var(--send-warning-text);\n    background: var(--send-warning-bg);\n    border: 1px solid var(--send-warning-border);\n\n    > .icon {\n      flex: 0 0 18px;\n      width: 18px;\n      height: 18px;\n      margin-top: 1px;\n      color: var(--send-warning-icon);\n\n      svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n      }\n    }\n\n    a {\n      color: var(--send-accent);\n      font-weight: 500;\n      text-decoration: none;\n      border-bottom: 1px solid var(--send-accent-tint-2);\n\n      .icon,\n      .icon svg {\n        width: 11px;\n        height: 11px;\n        display: inline-block;\n        vertical-align: -1px;\n        margin-left: 2px;\n      }\n    }\n  }\n\n  verdocs-checkbox {\n    display: block;\n    padding: 4px 0;\n    font-size: 13px;\n  }\n}\n","import type {IBrand, IOrganization, TRecipientAuthMethod} from '@verdocs/js-sdk';\nimport {Component, Element, Prop, State, h, Event, EventEmitter, Host, Method, Watch} from '@stencil/core';\nimport type {ICreateEnvelopeFromTemplateRequest, ICreateEnvelopeRecipientFromTemplate, IEnvelope, IRecipient, ITemplate} from '@verdocs/js-sdk';\nimport {createEnvelope, formatFullName, getBrands, getOrganization, getTemplate, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IContactSearchEvent} from '../../envelopes/verdocs-contact-picker/verdocs-contact-picker';\nimport {DefaultEndpoint, getWebAppUrl} from '../../../utils/Environment';\nimport {getRoleIndex, getRoleNames} from '../../../utils/Templates';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst chevronRightIcon =\n  '<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>';\n\nconst chevronLeftIcon =\n  '<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>';\n\nconst warningIcon =\n  '<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=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4M12 17h.01\"/></svg>';\n\nconst infoIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/></svg>';\n\nconst externalLinkIcon =\n  '<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 3h6v6M10 14 21 3M21 14v7H3V3h7\"/></svg>';\n\nconst VERDOCS_LOGO_URL = 'https://app.verdocs.com/assets/blue-logo.svg';\n\n// Swipe mechanics for mobile users in detail views\nconst SWIPE_START_FRACTION = 0.25;\nconst SWIPE_MIN_DISTANCE = 60;\nconst SWIPE_MAX_DURATION = 500;\n\n// Expiration controls. The API is less strict, but Web users prefer a simpler setup so we just range-limit it 1..120 here.\nconst MIN_EXPIRY_DAYS = 1;\nconst MAX_EXPIRY_DAYS = 120;\nconst DEFAULT_EXPIRY_DAYS = 120;\n\nconst AUTH_METHOD_LABELS: Record<TRecipientAuthMethod, string> = {\n  email: 'Email',\n  passcode: 'Passcode',\n  sms: 'SMS',\n  kba: 'KBA',\n  id: 'ID check',\n};\n\ntype TSendView = 'main' | 'recipient' | 'brand' | 'expires' | 'notifications' | 'sender';\n\nexport interface ISendEventDetail extends ICreateEnvelopeFromTemplateRequest {\n  name: string;\n  template_id: string;\n  recipients: ICreateEnvelopeRecipientFromTemplate[];\n  template: ITemplate;\n}\n\nexport interface ISentEventDetail extends ICreateEnvelopeFromTemplateRequest {\n  name: string;\n  template_id: string;\n  recipients: ICreateEnvelopeRecipientFromTemplate[];\n  envelope_id: string;\n  envelope: IEnvelope;\n}\n\n/**\n * Display a form to send a template to one or more recipients in an envelope for signing.\n * Host applications should ensure the template is \"sendable\" before displaying this component.\n * To be sendable, a template must have at least one document attached, at least one participant\n * defined, and at least one field assigned to every \"signer\" participant. This component will\n * hide itself if the template is not sendable.\n *\n * ```ts\n * <verdocs-send\n *   templateId={TEMPLATE_ID}\n *   onBeforeSend={({ detail })) => { console.log('Sending... Show a spinner...', detail) }\n *   onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) }\n *   onExit={({ detail }) => { console.log('Send cancelled.', detail) }\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  private templateListenerId = null;\n\n  @Element() el: 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 = DefaultEndpoint;\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop({reflect: true}) templateId: string | null = null;\n\n  /**\n   * The environment the control is being called from, e.g. 'web'. This has an impact on how certain\n   * operations such as email communications are handled to ensure users receive the correct URLs for\n   * their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors.\n   * If environment is not known, do this set this property.\n   */\n  @Prop() environment: string = '';\n\n  /**\n   * Whether to show the cancel button. It may be useful to disable this in environments where\n   * the embed is shown in a non-wizard flow with its own navigation for the user to exit.\n   */\n  @Prop() showCancel = true;\n\n  /**\n   * Preselect a brand by key, overriding the organization default.\n   */\n  @Prop({mutable: true}) brandKey = '';\n\n  /**\n   * The user is sending an envelope the form and clicked send.\n   */\n  @Event({composed: true}) beforeSend: EventEmitter<ISendEventDetail>;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<ISentEventDetail>;\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 if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  /**\n   * Event fired when the user enters text in a search field. The parent application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  private swipeStart: {x: number; y: number; time: number} | null = null;\n  private swallowNextClick = false;\n  private loadedOrganizationId = '';\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n  @State() view: TSendView = 'main';\n  @State() editingRoleId = '';\n  @State() sessionContacts: {id: string; first_name: string; last_name: string; email: string; phone: string}[] = [];\n  @State() sending = false;\n  @State() brands: IBrand[] = [];\n  @State() organization: IOrganization | null = null;\n  @State() expiresInDays = '';\n  @State() noContact = false;\n  @State() senderDefaults = {name: '', email: ''};\n  @State() senderName = '';\n  @State() senderEmail = '';\n  @State() rolesCompleted: Record<string, Partial<IRecipient>> = {};\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.el.addEventListener(\n      'click',\n      e => {\n        if (this.swallowNextClick) {\n          this.swallowNextClick = false;\n          e.stopPropagation();\n          e.preventDefault();\n        }\n      },\n      true,\n    );\n  }\n\n  // Make off-canvas controls leave the tab order\n  componentDidRender() {\n    updateScrollFade(this.el.querySelector('.detail-body'));\n    this.el.querySelector('.main-pane')?.toggleAttribute('inert', this.view !== 'main');\n    this.el.querySelector('.detail-pane')?.toggleAttribute('inert', this.view === 'main');\n  }\n\n  async listenToTemplate() {\n    console.log('[SEND] Loading template', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      true,\n      (template: ITemplate) => {\n        console.log('[SEND] Got new template', template);\n        this.template = template;\n        this.loading = false;\n        this.rolesCompleted = {};\n        this.view = 'main';\n        this.editingRoleId = '';\n        this.recomputeRolesCompleted();\n        this.loadBrands();\n      },\n    );\n  }\n\n  loadBrands() {\n    const organizationId = this.template?.organization_id;\n    if (!organizationId || organizationId === this.loadedOrganizationId) {\n      return;\n    }\n\n    const changedOrganization = !!this.loadedOrganizationId;\n    this.loadedOrganizationId = organizationId;\n    this.brands = [];\n    this.organization = null;\n    if (changedOrganization) {\n      this.brandKey = '';\n    }\n\n    const stillCurrent = () => this.template?.organization_id === organizationId;\n\n    getBrands(this.endpoint, organizationId)\n      .then(brands => {\n        if (stillCurrent()) {\n          this.brands = brands || [];\n        }\n      })\n      .catch(e => console.log('[SEND] Unable to load brands', e));\n\n    getOrganization(this.endpoint, organizationId)\n      .then(organization => {\n        if (stillCurrent()) {\n          this.organization = organization;\n        }\n      })\n      .catch(e => console.log('[SEND] Unable to load organization', e));\n  }\n\n  handleExpiryInput(e: any) {\n    const digits = (e.target.value || '').replace(/[^0-9]/g, '');\n    this.expiresInDays = digits ? String(Math.min(Math.max(Number(digits), MIN_EXPIRY_DAYS), MAX_EXPIRY_DAYS)) : '';\n    e.target.value = this.expiresInDays;\n  }\n\n  effectiveExpiryDays(): number {\n    const days = Number(this.expiresInDays);\n    return days >= MIN_EXPIRY_DAYS ? days : DEFAULT_EXPIRY_DAYS;\n  }\n\n  expiresAt(): Date {\n    return new Date(Date.now() + this.effectiveExpiryDays() * 24 * 60 * 60 * 1000);\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.rolesCompleted = {};\n    this.view = 'main';\n    this.editingRoleId = '';\n    this.brandKey = '';\n    this.expiresInDays = '';\n    this.noContact = false;\n    this.senderName = '';\n    this.senderEmail = '';\n  }\n\n  // sender_name and sender_email are the contact for recipient questions and the completion\n  // notice. They default to the signed-in user and are only sent when edited away from that.\n  // The From line of the invitation email is the brand's (then the org's) and is not set here.\n  effectiveSenderName() {\n    return this.senderName || this.senderDefaults.name;\n  }\n\n  effectiveSenderEmail() {\n    return this.senderEmail || this.senderDefaults.email;\n  }\n\n  senderOverrides() {\n    const name = this.senderName.trim();\n    const email = this.senderEmail.trim();\n    return {\n      sender_name: name && name !== this.senderDefaults.name ? name : undefined,\n      sender_email: email && email !== this.senderDefaults.email ? email : undefined,\n    };\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[SEND] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.onSessionChanged((_endpoint, _session, profile) => {\n        if (!profile) {\n          return;\n        }\n\n        const me = {\n          id: profile.id,\n          first_name: profile.first_name,\n          last_name: profile.last_name,\n          email: profile.email,\n          phone: profile.phone,\n        };\n\n        if (profile) {\n          this.senderDefaults = {name: formatFullName(profile), email: profile.email || ''};\n          this.sessionContacts = [me];\n\n          getOrganizationContacts(this.endpoint)\n            .then(contacts => {\n              console.log('[SEND] Got contacts', contacts);\n              this.sessionContacts = [...contacts, me];\n            })\n            .catch(e => {\n              console.log('[SEND] Error getting contacts', e);\n            });\n        }\n      });\n\n      this.endpoint.loadSession();\n\n      if (!this.endpoint.session) {\n        console.log('[SEND] Unable to start Send operation, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[SEND] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[SEND] Error with send session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  recomputeRolesCompleted() {\n    this.rolesCompleted = {};\n\n    const rolesAtLevel: Record<number, Partial<IRecipient>[]> = {};\n    (this.template?.roles || []).forEach(role => {\n      const level = role.sequence;\n      rolesAtLevel[level] ||= [];\n      const id = `r-${level}-${rolesAtLevel[level].length}`;\n      rolesAtLevel[level].push({...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name});\n\n      // if (role.first_name && (isValidEmail(role.email) || isValidPhone(role.phone))) {\n      if (role.first_name && isValidEmail(role.email)) {\n        this.rolesCompleted[id] = {...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name};\n      }\n    });\n  }\n\n  getSequenceNumbers() {\n    // This is cleaner with a Set but we found a regression in some target environments where\n    // this breaks down. Reverting to an older technique while we diagnose it.\n    const sequences: Record<number, boolean> = {};\n    (this.template?.roles || []).forEach(role => {\n      sequences[role.sequence] = true;\n    });\n    return Object.keys(sequences)\n      .map(s => +s)\n      .sort((a, b) => a - b);\n  }\n\n  getRolesAtLevel(level: number) {\n    const rolesAtLevel = (this.template?.roles || [])\n      .filter(role => role.sequence === level)\n      .map((role, index) => ({\n        ...role,\n        id: `r-${level}-${index}`,\n        role_name: role.name,\n        first_name: role.first_name,\n        last_name: role.last_name,\n      }));\n    return rolesAtLevel as Partial<IRecipient>[];\n  }\n\n  getRoleById(id: string): Partial<IRecipient> | null {\n    for (const level of this.getSequenceNumbers()) {\n      const match = this.getRolesAtLevel(level).find(role => role.id === id);\n      if (match) {\n        return match;\n      }\n    }\n\n    return null;\n  }\n\n  // We only show options the sender switched on.\n  getRecipientOptionLabels(recipient: Partial<IRecipient> | undefined): string[] {\n    if (!recipient) {\n      return [];\n    }\n\n    const labels = (recipient.auth_methods || []).filter(method => method !== 'email').map(method => AUTH_METHOD_LABELS[method] || method);\n    if (recipient.delegator) {\n      labels.push('May delegate');\n    }\n\n    if (recipient.name_locked) {\n      labels.push('Name locked');\n    }\n\n    return labels;\n  }\n\n  getDefaultBrand(): IBrand | null {\n    const defaultId = this.organization?.default_brand_id;\n    return (defaultId && this.brands.find(brand => brand.id === defaultId)) || null;\n  }\n\n  getDefaultBrandLabel() {\n    const name = this.getDefaultBrand()?.name;\n    return `Default (${name || 'Verdocs'})`;\n  }\n\n  getSelectedBrandLabel() {\n    if (!this.brandKey) {\n      return this.getDefaultBrandLabel();\n    }\n\n    const brand = this.brands.find(b => b.key === this.brandKey);\n    return brand?.name || brand?.key || this.brandKey;\n  }\n\n  showView(view: TSendView) {\n    this.view = view;\n  }\n\n  handleSelectContact(e: any, role: Partial<IRecipient>) {\n    e.preventDefault();\n    this.rolesCompleted = {...this.rolesCompleted, [role.id]: {...role, ...e.detail}};\n    this.editingRoleId = '';\n    this.view = 'main';\n  }\n\n  handleClickRole(e: any, role: Partial<IRecipient>) {\n    e.stopPropagation();\n    this.editingRoleId = role.id;\n    this.view = 'recipient';\n  }\n\n  handleSend(e: any) {\n    if (this.sending) {\n      console.log('[SEND] Skipping duplicate send', e);\n      return;\n    }\n\n    console.log('[SEND] Sending', e);\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.sending = true;\n    const localeData = Intl.DateTimeFormat().resolvedOptions();\n\n    const details: ICreateEnvelopeFromTemplateRequest = {\n      template_id: this.templateId,\n      name: this.template?.name || 'New Envelope',\n      environment: this.environment,\n      initial_reminder: 0,\n      followup_reminders: 0,\n      recipients: Object.values(this.rolesCompleted) as ICreateEnvelopeRecipientFromTemplate[],\n      timezone: localeData.timeZone,\n      locale: localeData.locale,\n      expires_at: this.expiresAt().toISOString(),\n    };\n\n    details.no_contact = this.noContact;\n    const {sender_name, sender_email} = this.senderOverrides();\n    if (sender_name) {\n      details.sender_name = sender_name;\n    }\n    if (sender_email) {\n      details.sender_email = sender_email;\n    }\n    if (this.brandKey) {\n      details.brand_key = this.brandKey;\n    }\n\n    const beforeSendResult = this.beforeSend.emit({...details, name: details.name!, template: this.template});\n    if (beforeSendResult.defaultPrevented) {\n      console.log('[SEND] Send cancelled by parent', details);\n      this.sending = false;\n      return;\n    }\n\n    console.log('[SEND] Creating envelope', details);\n    createEnvelope(this.endpoint, details)\n      .then(r => {\n        console.log('[SEND] Send envelope', r);\n        this.reset().catch((e: any) => console.log('Unknown Error', e));\n        this.sending = false;\n        this.send?.emit({...details, name: details.name!, envelope_id: r.id, envelope: r});\n      })\n      .catch(e => {\n        console.log('[SEND] Send error', e);\n        VerdocsToast(e.response?.data?.error || 'Error creating envelope, please try again later.');\n        this.sending = false;\n        this.sdkError?.emit(e);\n      });\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.exit?.emit();\n  }\n\n  handleSwipeStart(e: PointerEvent) {\n    this.swallowNextClick = false;\n    const pane = e.currentTarget as HTMLElement;\n    const rect = pane.getBoundingClientRect();\n    const onTextEntry = !!(e.target as HTMLElement)?.closest?.('input, textarea, select, [contenteditable]');\n    if (this.view === 'main' || onTextEntry || e.clientX - rect.left > rect.width * SWIPE_START_FRACTION) {\n      this.swipeStart = null;\n      return;\n    }\n\n    this.swipeStart = {x: e.clientX, y: e.clientY, time: Date.now()};\n  }\n\n  handleSwipeEnd(e: PointerEvent) {\n    const start = this.swipeStart;\n    this.swipeStart = null;\n    if (!start) {\n      return;\n    }\n\n    const dx = e.clientX - start.x;\n    const dy = Math.abs(e.clientY - start.y);\n    if (dx >= SWIPE_MIN_DISTANCE && dx > dy && Date.now() - start.time <= SWIPE_MAX_DURATION) {\n      this.swallowNextClick = true;\n      this.showView('main');\n    }\n  }\n\n  renderDetailHeader(title: any) {\n    return (\n      <div class=\"detail-header\">\n        <button type=\"button\" class=\"back\" onClick={() => this.showView('main')}>\n          <span class=\"icon\" innerHTML={chevronLeftIcon} />\n          Back\n        </button>\n        <div class=\"detail-title\">{title}</div>\n        <div class=\"detail-header-spacer\" />\n      </div>\n    );\n  }\n\n  renderDetailBody(content: any) {\n    return (\n      <div class=\"detail-body-wrap\">\n        <div class=\"detail-body\" onScroll={(e: any) => updateScrollFade(e.target)}>\n          {content}\n        </div>\n        <div class=\"scroll-fade\" />\n      </div>\n    );\n  }\n\n  renderDoneButton() {\n    return (\n      <div class=\"detail-footer\">\n        <verdocs-button label=\"Done\" size=\"small\" onClick={() => this.showView('main')} />\n      </div>\n    );\n  }\n\n  renderRecipientView() {\n    const role = this.getRoleById(this.editingRoleId);\n    if (!role) {\n      return <div class=\"detail recipient-detail\">{this.renderDetailHeader('Recipient')}</div>;\n    }\n\n    const roleIndex = getRoleIndex(this.template, role.role_name);\n    return (\n      <div class=\"detail recipient-detail\">\n        {this.renderDetailHeader([<span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />, role.role_name])}\n        <verdocs-contact-picker\n          key={role.id}\n          showCancel={false}\n          onExit={() => this.showView('main')}\n          onNext={e => this.handleSelectContact(e, role)}\n          contactSuggestions={this.sessionContacts}\n          templateRole={(this.rolesCompleted[role.id] ?? role) as IRecipient}\n          onSearchContacts={e => this.searchContacts?.emit(e.detail)}\n        />\n      </div>\n    );\n  }\n\n  renderBrandSwatch(brand: IBrand | null, fallbackInitial: string) {\n    const image = brand?.favicon_url || brand?.thumbnail_url || (brand ? null : VERDOCS_LOGO_URL);\n    if (image) {\n      return (\n        <span class=\"swatch logo\">\n          <img src={image} alt=\"\" />\n        </span>\n      );\n    }\n\n    return (\n      <span class=\"swatch\" style={{backgroundColor: brand?.primary_color || '#4c56cb'}}>\n        {fallbackInitial.substring(0, 2).toUpperCase()}\n      </span>\n    );\n  }\n\n  renderBrandOption(key: string, label: string, sub: string, swatch: any) {\n    return (\n      <button type=\"button\" class={{option: true, selected: this.brandKey === key}} onClick={() => (this.brandKey = key)}>\n        <span class=\"radio\" />\n        {swatch}\n        <span class=\"option-label\">\n          {label}\n          <small>{sub}</small>\n        </span>\n      </button>\n    );\n  }\n\n  renderBrandView() {\n    const defaultBrand = this.getDefaultBrand();\n    const others = this.brands.filter(brand => brand.id !== defaultBrand?.id).sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));\n    const hasBrands = this.brands.length > 0;\n\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Brand')}\n        {this.renderDetailBody([\n          <div class=\"option-list\">\n            {this.renderBrandOption('', this.getDefaultBrandLabel(), 'Organization default', this.renderBrandSwatch(defaultBrand, defaultBrand?.name || 'V'))}\n            {others.length > 0 && <div class=\"option-divider\" />}\n            {others.map(brand => this.renderBrandOption(brand.key, brand.name || brand.key, brand.key, this.renderBrandSwatch(brand, brand.name || brand.key)))}\n          </div>,\n          !hasBrands && (\n            <p class=\"hint\">\n              Configure the look and feel of the signing experience by{' '}\n              <a href={`${getWebAppUrl(this.endpoint)}/settings/branding`} target=\"_blank\" rel=\"noopener\">\n                Creating a Brand\n                <span class=\"icon\" innerHTML={externalLinkIcon} />\n              </a>\n              .\n            </p>\n          ),\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderExpiresView() {\n    const expiresAt = this.expiresAt();\n    const when = `${expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'})} at ${expiresAt.toLocaleTimeString(undefined, {hour: 'numeric', minute: '2-digit'})}`;\n\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Expiration')}\n        {this.renderDetailBody([\n          <div class=\"expires-field\">\n            <input\n              type=\"text\"\n              inputMode=\"numeric\"\n              aria-label=\"Expires in (days)\"\n              placeholder={String(DEFAULT_EXPIRY_DAYS)}\n              value={this.expiresInDays}\n              disabled={this.sending}\n              onInput={(e: any) => this.handleExpiryInput(e)}\n            />\n            <span class=\"suffix\">days</span>\n          </div>,\n          <p class=\"hint\">\n            This envelope will expire on {when}. Expirations may be set from {MIN_EXPIRY_DAYS}-{MAX_EXPIRY_DAYS} days. If left blank, this will default to {DEFAULT_EXPIRY_DAYS}.\n          </p>,\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderSenderView() {\n    const validEmail = !this.senderEmail.trim() || isValidEmail(this.senderEmail.trim());\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Sender')}\n        {this.renderDetailBody([\n          <div class=\"sender-field\">\n            <label htmlFor={`${this.containerId}-sender-name`}>Name</label>\n            <input\n              id={`${this.containerId}-sender-name`}\n              type=\"text\"\n              value={this.effectiveSenderName()}\n              disabled={this.sending}\n              onInput={(e: any) => (this.senderName = e.target.value)}\n            />\n          </div>,\n          <div class=\"sender-field\">\n            <label htmlFor={`${this.containerId}-sender-email`}>Email</label>\n            <input\n              id={`${this.containerId}-sender-email`}\n              type=\"email\"\n              value={this.effectiveSenderEmail()}\n              disabled={this.sending}\n              onInput={(e: any) => (this.senderEmail = e.target.value)}\n            />\n            {!validEmail && <div class=\"field-error\">Enter a valid email address.</div>}\n          </div>,\n          <div class=\"notice\">\n            <span class=\"icon\" innerHTML={infoIcon} />\n              <div>\n                Specify where envelope-completed email notifications and \"Ask a Question\" submissions are delivered.\n                To customize the \"From\" address for email notifications, please configure those in{' '}\n                <a href={`${getWebAppUrl(this.endpoint)}/settings/brands`} target=\"_blank\" rel=\"noopener\">\n                  Brands\n                  <span class=\"icon\" innerHTML={externalLinkIcon} />\n                </a>{' '}\n                .\n              </div>\n          </div>,\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderNotificationsView() {\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Notifications')}\n        {this.renderDetailBody([\n          <verdocs-checkbox size=\"small\" label=\"Disable notifications\" checked={this.noContact} onInput={(e: any) => (this.noContact = !!e.target.checked)} />,\n          this.noContact && (\n            <div class=\"warning\">\n              <span class=\"icon\" innerHTML={warningIcon} />\n              <div>\n                Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or\n                via an API call. We strongly recommend enabling{' '}\n                <a href={`${getWebAppUrl(this.endpoint)}/settings/webhooks`} target=\"_blank\" rel=\"noopener\">\n                  Webhooks\n                  <span class=\"icon\" innerHTML={externalLinkIcon} />\n                </a>{' '}\n                to help automate this process.\n              </div>\n            </div>\n          ),\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderDetail() {\n    switch (this.view) {\n      case 'recipient':\n        return this.renderRecipientView();\n      case 'brand':\n        return this.renderBrandView();\n      case 'expires':\n        return this.renderExpiresView();\n      case 'notifications':\n        return this.renderNotificationsView();\n      case 'sender':\n        return this.renderSenderView();\n      default:\n        return null;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host style={{display: 'flex'}}>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const levels = this.getSequenceNumbers();\n    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);\n    const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;\n    const assignedEmails = rolesAssigned.map(r => r.email.toLowerCase());\n    const hasDuplicateEmails = new Set(assignedEmails).size < assignedEmails.length;\n    const expiresAt = this.expiresAt();\n    const expiresShort = expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});\n\n    return (\n      <Host class={{'sendable': this.template?.is_sendable, 'detail-open': this.view !== 'main'}}>\n        <div class=\"track\">\n          <div class=\"pane main-pane\" aria-hidden={this.view !== 'main' ? 'true' : 'false'}>\n            <div class=\"section-title\">Recipients</div>\n            <div class=\"recipients\">\n              {levels.map(level => [\n                levels.length > 1 && <div class=\"step\">Step {level}</div>,\n                this.getRolesAtLevel(level).map(role => {\n                  const roleIndex = getRoleIndex(this.template, role.role_name);\n                  const completed = this.rolesCompleted[role.id];\n                  const assigned = completed && rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;\n                  const optionLabels = this.getRecipientOptionLabels(completed);\n\n                  return (\n                    <button type=\"button\" class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} onClick={e => this.handleClickRole(e, role)}>\n                      <span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />\n                      <span class=\"who\">\n                        <span class=\"role-name\">{role.role_name}</span>\n                        {assigned ? (\n                          <span class=\"who-detail\">\n                            {formatFullName(completed)} · {completed.email}\n                          </span>\n                        ) : (\n                          <span class=\"who-detail configure\">Configure recipient</span>\n                        )}\n                        {optionLabels.length > 0 && (\n                          <span class=\"options\">\n                            {optionLabels.map(label => (\n                              <span class=\"pill\">{label}</span>\n                            ))}\n                          </span>\n                        )}\n                      </span>\n                      <span class=\"chevron\" innerHTML={chevronRightIcon} />\n                    </button>\n                  );\n                }),\n              ])}\n            </div>\n\n            <div class=\"section-title delivery-title\">Delivery</div>\n            <div class=\"delivery\">\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('brand')} disabled={this.sending}>\n                <span class=\"key\">Brand</span>\n                <span class=\"value\">{this.getSelectedBrandLabel()}</span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('expires')} disabled={this.sending}>\n                <span class=\"key\">Expires</span>\n                <span class=\"value\">\n                  {this.effectiveExpiryDays()} days <small>· {expiresShort}</small>\n                </span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('sender')} disabled={this.sending}>\n                <span class=\"key\">Sender</span>\n                <span class=\"value stacked\">\n                  <span class=\"line\">{this.effectiveSenderName() || this.effectiveSenderEmail()}</span>\n                  {this.effectiveSenderName() && this.effectiveSenderEmail() ? <small class=\"line\">{this.effectiveSenderEmail()}</small> : null}\n                </span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('notifications')} disabled={this.sending}>\n                <span class=\"key\">Notifications</span>\n                <span class={{value: true, off: this.noContact}}>{this.noContact ? 'Off' : 'On'}</span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n            </div>\n\n            <div class=\"main-spacer\" />\n\n            <div class=\"buttons\">\n              {hasDuplicateEmails && <div class=\"error-message\">Recipients cannot share the same email.</div>}\n              {this.sending && <verdocs-spinner />}\n              {this.showCancel && <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} disabled={this.sending} />}\n              <verdocs-button label=\"Send\" size=\"small\" disabled={!allRolesAssigned || this.sending || hasDuplicateEmails} onClick={e => this.handleSend(e)} />\n            </div>\n          </div>\n\n          <div\n            class=\"pane detail-pane\"\n            aria-hidden={this.view === 'main' ? 'true' : 'false'}\n            onPointerDown={e => this.handleSwipeStart(e)}\n            onPointerUp={e => this.handleSwipeEnd(e)}\n            onPointerCancel={() => (this.swipeStart = null)}\n          >\n            {this.renderDetail()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}