@verdocs/web-sdk 1.9.6 → 1.9.10

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"names":["verdocsSendCss","editIcon","startIcon","stepIcon","doneIcon","VerdocsSend","this","levels","VerdocsEndpoint","getDefault","Math","random","toString","substring","[object Object]","sessionContacts","result","endpoint","loadSession","_a","session","profile","push","id","name","first_name","last_name","email","phone","e","console","log","templateId","template","getTemplate","roles","rolesAtLevel","forEach","role","level","sequence","length","Object","keys","map","levelStr","sort","a","b","h","class","innerHTML","preventDefault","recipientsAssigned","detail","showPickerForId","stopPropagation","send","emit","values","cancel","roleNames","_b","allRecipientsAssigned","filter","recipient","isValidEmail","isValidPhone","_c","Host","getLevelIcon","style","backgroundColor","getRGBA","getRoleIndex","onClick","handleClickRole","full_name","onCancel","contactSuggestions","templateRole","onSearchContacts","onContactSelected","handleSelectContact","label","size","variant","onPress","handleCancel","disabled","handleSend"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n  display: flex;\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/**\n * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n  /**\n   * The user canceled the process.\n   */\n  @Event({composed: true}) cancel: 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  @State() template: ITemplate | null = null;\n\n  @State() pdfUrl = null;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n  @State() showPickerForId = '';\n\n  @State() sessionContacts = [];\n\n  @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n  levels: number[] = [];\n\n  async componentWillLoad() {\n    this.sessionContacts = [];\n    try {\n      const result = await this.endpoint.loadSession();\n\n      if (result.session?.profile) {\n        this.sessionContacts.push({\n          id: result.session.profile.id,\n          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n          email: result.session.profile.email,\n          phone: result.session.profile.phone,\n        });\n      }\n    } catch (e) {\n      console.log('Error loading session', e);\n    }\n  }\n\n  async componentDidLoad() {\n    console.log('[SEND] Showing template', this.templateId);\n\n    try {\n      console.log(`[SEND] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[SEND] Got template', template);\n      this.template = template;\n\n      if (template?.roles) {\n        const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n        template.roles.forEach(role => {\n          const level = role.sequence - 1;\n          rolesAtLevel[level] ||= [];\n          const id = `r-${level}-${rolesAtLevel[level].length}`;\n          rolesAtLevel[level].push({...role, id});\n        });\n\n        this.rolesAtLevel = rolesAtLevel;\n        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n        this.levels.sort((a, b) => a - b);\n      }\n    } catch (e) {\n      console.log('[SEND] Error getting template', e);\n    }\n  }\n\n  getLevelIcon(level: number) {\n    if (level < 0) {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level >= this.levels.length) {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: TAnnotatedRole) {\n    e.preventDefault();\n    e.detail; // IContactSelectEvent\n    this.recipientsAssigned[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: TAnnotatedRole) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e) {\n    e.stopPropagation();\n    this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  render() {\n    const roleNames = this.template?.roles?.map(role => role.name) || [];\n    const allRecipientsAssigned =\n      Object.values(this.recipientsAssigned).filter(recipient => {\n        console.log('valid email', isValidEmail(recipient.email), recipient.email);\n        console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n        return isValidEmail(recipient.email) || isValidPhone(recipient.phone);\n      }).length >= this.template?.roles.length;\n    console.log('assigned', allRecipientsAssigned);\n\n    return (\n      <Host class={{}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon(-1)}\n            <div class=\"complete\">Send Document</div>\n          </div>\n\n          {this.levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon(level)}\n\n              {this.rolesAtLevel[level].map(role => (\n                <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n                  {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n                  <div class=\"icon\" innerHTML={editIcon} />\n                  {this.showPickerForId === role.id && (\n                    <verdocs-contact-picker\n                      onCancel={() => (this.showPickerForId = '')}\n                      contactSuggestions={this.sessionContacts}\n                      templateRole={this.recipientsAssigned[role.id] ?? role}\n                      onSearchContacts={e => console.log('Search', e.detail)}\n                      onContactSelected={e => this.handleSelectContact(e, role)}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon(this.levels.length)}\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onPress={e => this.handleSend(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"names":["verdocsSendCss","editIcon","startIcon","stepIcon","doneIcon","VerdocsSend","exports","this","levels","VerdocsEndpoint","getDefault","concat","Math","random","toString","substring","class_1","prototype","componentWillLoad","sessionContacts","endpoint","loadSession","result","_d","sent","_a","session","profile","push","id","name","first_name","last_name","email","phone","console","log","e_1","componentDidLoad","templateId","getTemplate","template","roles","rolesAtLevel_1","forEach","role","level","sequence","length","__assign","rolesAtLevel","Object","keys","map","levelStr","sort","a","b","e_2","getLevelIcon","h","class","innerHTML","handleSelectContact","e","preventDefault","recipientsAssigned","detail","showPickerForId","handleClickRole","stopPropagation","handleSend","send","emit","values","handleCancel","cancel","render","_this","roleNames","_b","allRecipientsAssigned","filter","recipient","isValidEmail","isValidPhone","_c","Host","style","backgroundColor","getRGBA","getRoleIndex","onClick","full_name","onCancel","contactSuggestions","templateRole","onSearchContacts","onContactSelected","label","size","variant","onPress","disabled"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n  display: flex;\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/**\n * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n  /**\n   * The user canceled the process.\n   */\n  @Event({composed: true}) cancel: 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  @State() template: ITemplate | null = null;\n\n  @State() pdfUrl = null;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n  @State() showPickerForId = '';\n\n  @State() sessionContacts = [];\n\n  @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n  levels: number[] = [];\n\n  async componentWillLoad() {\n    this.sessionContacts = [];\n    try {\n      const result = await this.endpoint.loadSession();\n\n      if (result.session?.profile) {\n        this.sessionContacts.push({\n          id: result.session.profile.id,\n          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n          email: result.session.profile.email,\n          phone: result.session.profile.phone,\n        });\n      }\n    } catch (e) {\n      console.log('Error loading session', e);\n    }\n  }\n\n  async componentDidLoad() {\n    console.log('[SEND] Showing template', this.templateId);\n\n    try {\n      console.log(`[SEND] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[SEND] Got template', template);\n      this.template = template;\n\n      if (template?.roles) {\n        const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n        template.roles.forEach(role => {\n          const level = role.sequence - 1;\n          rolesAtLevel[level] ||= [];\n          const id = `r-${level}-${rolesAtLevel[level].length}`;\n          rolesAtLevel[level].push({...role, id});\n        });\n\n        this.rolesAtLevel = rolesAtLevel;\n        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n        this.levels.sort((a, b) => a - b);\n      }\n    } catch (e) {\n      console.log('[SEND] Error getting template', e);\n    }\n  }\n\n  getLevelIcon(level: number) {\n    if (level < 0) {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level >= this.levels.length) {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: TAnnotatedRole) {\n    e.preventDefault();\n    e.detail; // IContactSelectEvent\n    this.recipientsAssigned[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: TAnnotatedRole) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e) {\n    e.stopPropagation();\n    this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  render() {\n    const roleNames = this.template?.roles?.map(role => role.name) || [];\n    const allRecipientsAssigned =\n      Object.values(this.recipientsAssigned).filter(recipient => {\n        console.log('valid email', isValidEmail(recipient.email), recipient.email);\n        console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n        return isValidEmail(recipient.email) || isValidPhone(recipient.phone);\n      }).length >= this.template?.roles.length;\n    console.log('assigned', allRecipientsAssigned);\n\n    return (\n      <Host class={{}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon(-1)}\n            <div class=\"complete\">Send Document</div>\n          </div>\n\n          {this.levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon(level)}\n\n              {this.rolesAtLevel[level].map(role => (\n                <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n                  {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n                  <div class=\"icon\" innerHTML={editIcon} />\n                  {this.showPickerForId === role.id && (\n                    <verdocs-contact-picker\n                      onCancel={() => (this.showPickerForId = '')}\n                      contactSuggestions={this.sessionContacts}\n                      templateRole={this.recipientsAssigned[role.id] ?? role}\n                      onSearchContacts={e => console.log('Search', e.detail)}\n                      onContactSelected={e => this.handleSelectContact(e, role)}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon(this.levels.length)}\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onPress={e => this.handleSend(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"names":["verdocsKbaDialogCss","VerdocsKbaDialog","[object Object]","this","cancel","emit","open","e","target","className","preventDefault","handleCancel","done","response","h","Host","style","display","class","onClick","handleDismiss","steps","step","Fragment","innerHTML","Question","helptitle","helptext","mode","choices","map","choice","htmlFor","label","type","id","name","placeholder","variant","onPress","handleDone","disabled"],"mappings":"+qCAAA,MAAMA,EAAsB,ukECYfC,EAAgB,mGAIJ,aAKC,iBAKI,8BAKD,2FAKO,oBAKV,uBAKM,iCAKF,CAAC,eAAgB,cAAe,cAAe,oBAAqB,YAAa,4BAKrF,oBAYJ,GAEpBC,eACEC,KAAKC,OAAOC,OACZF,KAAKG,KAAO,MAIdJ,cAAcK,GACZ,GAAIA,EAAEC,OAAOC,YAAc,qBAAsB,CAC/CF,EAAEG,iBACFP,KAAKQ,gBAITT,aACEC,KAAKS,KAAKP,KAAKF,KAAKU,UACpBV,KAAKG,KAAO,MAGdJ,SACE,OACEY,EAACC,EAAI,CAACC,MAAO,CAACC,QAASd,KAAKG,KAAO,QAAU,SAC3CQ,EAAA,MAAA,CAAKI,MAAM,qBAAqBC,QAASZ,GAAKJ,KAAKiB,cAAcb,IAC/DO,EAAA,MAAA,CAAKI,MAAM,UACTJ,EAAA,MAAA,CAAKI,MAAM,WAAS,wBAEjBf,KAAKkB,MAAQ,EACZP,EAAA,OAAA,CAAMI,MAAM,QAAM,IACdf,KAAKmB,KAAI,IAAGnB,KAAKkB,MAAK,KAG1BP,EAACS,EAAQ,OAIbT,EAAA,MAAA,CAAKI,MAAM,YACTJ,EAAA,MAAA,CAAKI,MAAM,YAAYM,UAAWC,IAClCX,EAAA,MAAA,CAAKI,MAAM,gBACTJ,EAAA,MAAA,CAAKI,MAAM,cAAcf,KAAKuB,WAC9BZ,EAAA,MAAA,CAAKI,MAAM,aAAaf,KAAKwB,YAIhCxB,KAAKyB,OAAS,SACbd,EAAA,MAAA,CAAKI,MAAM,WACRf,KAAK0B,QAAQC,KAAIC,GAChBjB,EAAA,MAAA,CACEI,MAAO,UAAUa,IAAW5B,KAAKU,SAAW,WAAa,KACzDM,QAAS,KACPhB,KAAKU,SAAWkB,IAGjBA,MAKPjB,EAAA,MAAA,CAAKI,MAAM,SACTJ,EAAA,QAAA,CAAOkB,QAAQ,qBAAqB7B,KAAK8B,OACzCnB,EAAA,QAAA,CAAOoB,KAAK,OAAOC,GAAG,oBAAoBC,KAAK,oBAAoBC,YAAalC,KAAKkC,eAIzFvB,EAAA,MAAA,CAAKI,MAAM,WACTJ,EAAA,iBAAA,CAAgBmB,MAAM,SAASK,QAAQ,UAAUC,QAAS,IAAMpC,KAAKQ,iBACrEG,EAAA,iBAAA,CAAgBmB,MAAM,OAAOM,QAAS,IAAMpC,KAAKqC,aAAcC,UAAWtC,KAAKU","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    margin: 14px 0;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.svg';\n\n/**\n * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-kba-dialog',\n  styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n  /**\n   * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n   */\n  @Prop() steps: number = 3;\n\n  /**\n   * If set, a help/instructions box will be displayed with this title\n   */\n  @Prop() helptitle: string = 'One Time Code';\n\n  /**\n   * If set, a help/instructions box will be displayed with this text\n   */\n  @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() mode: 'text' | 'choice' = 'choice';\n\n  /**\n   * For text input challenges, the label to display next to the input field.\n   */\n  @Prop() label: string = 'PIN';\n\n  /**\n   * For text input challenges, the placeholder to display inside the input field.\n   */\n  @Prop() placeholder: string = 'Enter your PIN...';\n\n  /**\n   * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n   */\n  @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<string>;\n\n  @State() response = '';\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.response);\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">\n              Confirm Your Identity\n              {this.steps > 1 ? (\n                <span class=\"step\">\n                  ({this.step}/{this.steps})\n                </span>\n              ) : (\n                <Fragment />\n              )}\n            </div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={Question} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">{this.helptitle}</div>\n                <div class=\"help-text\">{this.helptext}</div>\n              </div>\n            </div>\n\n            {this.mode === 'choice' ? (\n              <div class=\"choices\">\n                {this.choices.map(choice => (\n                  <div\n                    class={`choice ${choice === this.response ? 'selected' : ''}`}\n                    onClick={() => {\n                      this.response = choice;\n                    }}\n                  >\n                    {choice}\n                  </div>\n                ))}\n              </div>\n            ) : (\n              <div class=\"input\">\n                <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n                <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={!this.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"names":["verdocsOkDialogCss","VerdocsOkDialog","[object Object]","reason","this","closed","emit","open","e","target","className","preventDefault","handleClose","h","Host","style","display","class","onClick","handleDismiss","heading","message","cancel","label","variant","onPress"],"mappings":"yDAAA,MAAMA,EAAqB,4lCCWdC,EAAe,2EAIA,gBAKA,aAKF,kBAME,MAO1BC,YAAYC,GACVC,KAAKC,OAAOC,KAAKH,GACjBC,KAAKG,KAAO,MAIdL,cAAcM,GACZ,GAAIA,EAAEC,OAAOC,YAAc,qBAAsB,CAC/CF,EAAEG,iBACFP,KAAKQ,YAAY,WAIrBV,SACE,OACEW,EAACC,EAAI,CAACC,MAAO,CAACC,QAASZ,KAAKG,KAAO,QAAU,SAC3CM,EAAA,MAAA,CAAKI,MAAM,qBAAqBC,QAASV,GAAKJ,KAAKe,cAAcX,IAC/DK,EAAA,MAAA,CAAKI,MAAM,UACTJ,EAAA,MAAA,CAAKI,MAAM,WAAWb,KAAKgB,SAC3BP,EAAA,MAAA,CAAKI,MAAM,WACRb,KAAKiB,QAENR,EAAA,MAAA,CAAKI,MAAM,WACRb,KAAKkB,OAAST,EAAA,iBAAA,CAAgBU,MAAM,SAASC,QAAQ,UAAUC,QAAS,IAAMrB,KAAKQ,YAAY,YAAgBC,EAAA,MAAA,CAAKE,MAAO,CAACC,QAAS,UACtIH,EAAA,iBAAA,CAAgBU,MAAM,KAAKE,QAAS,IAAMrB,KAAKQ,YAAY","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    background: #444444;\n    padding: 8px 16px;\n    color: $verdocs-grey-4;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() cancel: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) closed: EventEmitter<'cancel' | 'ok'>;\n\n  handleClose(reason: 'cancel' | 'ok') {\n    this.closed.emit(reason);\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleClose('cancel');\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              {this.message}\n\n              <div class=\"buttons\">\n                {this.cancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onPress={() => this.handleClose('cancel')} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label=\"OK\" onPress={() => this.handleClose('ok')} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var o,i=1,t=arguments.length;i<t;i++){o=arguments[i];for(var n in o)if(Object.prototype.hasOwnProperty.call(o,n))e[n]=o[n]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,o,i){if(i||arguments.length===2)for(var t=0,n=o.length,r;t<n;t++){if(r||!(t in o)){if(!r)r=Array.prototype.slice.call(o,0,t);r[t]=o[t]}}return e.concat(r||Array.prototype.slice.call(o))};System.register(["./p-97329951.system.js","./p-e12b7fbc.system.js","./p-a4041773.system.js"],(function(e){"use strict";var o,i,t,n,r,d;return{setters:[function(e){o=e.r;i=e.c;t=e.h;n=e.H},function(e){r=e.c},function(e){d=e.g}],execute:function(){var s='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>\n';var a='verdocs-dropdown{font-family:"Barlow", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}';var l=e("verdocs_dropdown",function(){function e(e){o(this,e);this.optionSelected=i(this,"optionSelected",7);this.options=[];this.open=undefined;this.isOpen=undefined}e.prototype.componentWillLoad=function(){this.isOpen=!!this.open};e.prototype.componentDidLoad=function(){this.popper=r(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,6]}}]})};e.prototype.handleSelectOption=function(e,o){e.stopPropagation();this.isOpen=false;this.optionSelected.emit(o);this.hide()};e.prototype.showDropdown=function(){var e,o;this.isOpen=true;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})}));(o=this.popper)===null||o===void 0?void 0:o.update()};e.prototype.handleHideDropdown=function(e){var o,i;if(((o=e===null||e===void 0?void 0:e.target)===null||o===void 0?void 0:o.localName)==="button"&&((i=e===null||e===void 0?void 0:e.target)===null||i===void 0?void 0:i.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.isOpen){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.isOpen=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})}))};e.prototype.render=function(){var e=this;var o;return t(n,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),open:!!this.isOpen}},t("button",{class:"arrow",innerHTML:s,"aria-label":"Open Menu",onClick:function(o){return e.toggleDropdown(o)},onBlur:function(o){return e.handleHideDropdown(o)},ref:function(o){return e.dropdownButton=o}}),t("div",{class:"items","aria-hidden":!this.open,ref:function(o){return e.dropdownMenu=o}},(o=this.options)===null||o===void 0?void 0:o.map((function(o){return t("button",{onClick:function(i){return e.handleSelectOption(i,o)},class:"option",disabled:o.disabled},o.label)}))))};return e}());l.style=a;var c='@charset "UTF-8";verdocs-field-checkbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:"";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;background:#f5f5fa;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:"✓";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var p=e("verdocs_field_checkbox",function(){function e(e){o(this,e);this.fieldChange=i(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,i,r,s;var a=d(this.field);var l=(i=(o=a.options)===null||o===void 0?void 0:o[this.option])!==null&&i!==void 0?i:{checked:false};var c=(s=(r=this.disabled)!==null&&r!==void 0?r:a.disabled)!==null&&s!==void 0?s:false;return t(n,{class:{required:a.required,disabled:c}},t("label",null,t("input",{type:"checkbox",tabIndex:a.order,checked:l.checked,disabled:c,required:a.required,onChange:function(o){return e.handleChange(o)}}),t("span",null)))};return e}());p.style=c;var u='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:"";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var f=e("verdocs_field_radio_button",function(){function e(e){o(this,e);this.fieldChange=i(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){console.log("changed",e);this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,i;var r=d(this.field);var s=(i=(o=this.disabled)!==null&&o!==void 0?o:r.disabled)!==null&&i!==void 0?i:false;return t(n,{class:{required:r.required,disabled:s}},t("input",{type:"radio",tabIndex:r.order,value:r.value,name:r.name,id:"".concat(r.name,"=").concat(r.value),checked:r.checked,disabled:s,required:r.required,onChange:function(o){return e.handleChange(o)}}),t("label",{htmlFor:"".concat(r.name,"=").concat(r.value)}))};return e}());f.style=u}}}));
-//# sourceMappingURL=p-b8e6a9b6.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsDropdownCss","VerdocsDropdown","exports","class_1","prototype","componentWillLoad","this","isOpen","open","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","handleSelectOption","e","option","stopPropagation","optionSelected","emit","hide","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","_b","update","handleHideDropdown","target","localName","className","toggleDropdown","render","_this","h","Host","class","storybook","window","innerHTML","SortDown","aria-label","onClick","onBlur","ref","el","aria-hidden","map","disabled","label","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","class_2","handleChange","fieldChange","value","checked","settings","getFieldSettings","field","_d","_c","required","type","tabIndex","order","onChange","verdocsFieldRadioButtonCss","VerdocsFieldRadioButton","class_3","console","log","id","concat","htmlFor"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"]}