@verdocs/web-sdk 1.9.30 → 1.9.32

package/dist/cjs/verdocs-dropdown_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-dropdown.verdocs-view.entry.cjs.js","mappings":"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","names":["createPopper","h","Host","VerdocsEndpoint","getEnvelopeById","SDKError","EnvelopeStore","Fragment","savePDF"],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"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, Element, 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 * ```html\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\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   * 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  @State() open: boolean;\n\n  // We need to do this to reliably disconnect the click-away listener\n  clickListenerSymbol = new AbortController();\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n\n    window.addEventListener('click', this.clickListener.bind(this), {signal: this.clickListenerSymbol.signal});\n  }\n\n  disconnectedCallback() {\n    this.clickListenerSymbol.abort();\n  }\n\n  clickListener(e: any) {\n    const outside = !(e.target == this.el || this.el.contains(e.target));\n    if (outside) {\n      this.hide();\n    }\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\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n      }))\n      .catch(() => {});\n\n    this.popper?.update().catch(() => {});\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.open) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.open = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n      }))\n      .catch(() => {});\n  }\n\n  render() {\n    return (\n      <Host class={{open: !!this.open}}>\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\nverdocs-view {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\nimport {savePDF} from '../../../utils/utils';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\n  @Element() component: 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 envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      console.error(`[VIEW] Missing required envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n  }\n\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <Fragment>\n                  <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                  <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                  <div style={{flex: '1'}} />\n                  <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                  <div\n                    innerHTML={DownloadIcon}\n                    style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                    onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                  />\n                </Fragment>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-dropdown.verdocs-view.entry.cjs.js","mappings":"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","names":["createPopper","h","Host","VerdocsEndpoint","getEnvelopeById","SDKError","EnvelopeStore","Fragment","savePDF"],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","./src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","./src/components/embeds/verdocs-view/verdocs-view.tsx"],"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, Element, 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 * ```html\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\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   * 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  @State() open: boolean;\n\n  // We need to do this to reliably disconnect the click-away listener\n  clickListenerSymbol = new AbortController();\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n\n    window.addEventListener('click', this.clickListener.bind(this), {signal: this.clickListenerSymbol.signal});\n  }\n\n  disconnectedCallback() {\n    this.clickListenerSymbol.abort();\n  }\n\n  clickListener(e: any) {\n    const outside = !(e.target == this.el || this.el.contains(e.target));\n    if (outside) {\n      this.hide();\n    }\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\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n      }))\n      .catch(() => {});\n\n    this.popper?.update().catch(() => {});\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.open) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.open = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n      }))\n      .catch(() => {});\n  }\n\n  render() {\n    return (\n      <Host class={{open: !!this.open}}>\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\nverdocs-view {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\nimport {savePDF} from '../../../utils/utils';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\n  @Element() component: 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 envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\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  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      console.error(`[VIEW] Missing required envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n  }\n\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <Fragment>\n                  <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                  <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                  <div style={{flex: '1'}} />\n                  <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                  <div\n                    innerHTML={DownloadIcon}\n                    style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                    onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                  />\n                </Fragment>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-field-checkbox.cjs.entry.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0666fb5d.js');
+const utils = require('./utils-787b2115.js');
 require('./Token-576f0e8a.js');
+require('./Files-4bdc0c0f.js');
 
 const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:14px;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;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}";
 

package/dist/cjs/verdocs-field-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-checkbox.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,yhCAAyhC;;MCc5iC,oBAAoB;;;iBAIyB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAE9B,MAAM;;IACJ,MAAM,QAAQ,GAAGA,sBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAG,IAAI,CAAC,MAAM,CAAC,mCAAI,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAIC,cAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAOC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,MAAM,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,CAAQ,CAAC;KAC5E;IAED,QACED,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5ED,uBACEA,mBAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,GAAI,EAC/IA,qBAAQ,CACF,CACH,EACP;GACH;;;;;;","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@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: 14px;\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 {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a 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 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   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{option.checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} value={option.id} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-checkbox.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,yhCAAyhC;;MCc5iC,oBAAoB;;;iBAIyB,IAAI;kBAKnC,CAAC;oBAKG,KAAK;gBAKT,KAAK;qBAKD,CAAC;;EAE9B,MAAM;;IACJ,MAAM,QAAQ,GAAGA,sBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAG,IAAI,CAAC,MAAM,CAAC,mCAAI,EAAC,OAAO,EAAE,KAAK,EAAC,CAAC;IACnE,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAIC,cAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtE,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAOC,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,IAAG,MAAM,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,CAAQ,CAAC;KAC5E;IAED,QACED,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAC,IAC5ED,uBACEA,mBAAO,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,GAAI,EAC/IA,qBAAQ,CACF,CACH,EACP;GACH;;;;;;","names":["getFieldSettings","getRGBA","h","Host"],"sources":["./src/components/elements/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@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: 14px;\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 {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a 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 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   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{option.checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} value={option.id} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-field-date.cjs.entry.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const utils = require('./utils-0666fb5d.js');
+const utils = require('./utils-787b2115.js');
 const Colors = require('./Colors-e809dcc9.js');
 const index$1 = require('./index-6528b430.js');
 require('./Token-576f0e8a.js');
+require('./Files-4bdc0c0f.js');
 
 var HOOKS = [
     "onChange",