@verdocs/web-sdk 1.9.31 → 1.9.32

package/dist/esm-es5/verdocs-dropdown_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"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"],"names":["verdocsDropdownCss","VerdocsDropdown","this","clickListenerSymbol","AbortController","class_1","prototype","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","window","addEventListener","clickListener","bind","signal","disconnectedCallback","abort","e","outside","target","el","contains","hide","handleSelectOption","option","stopPropagation","optionSelected","emit","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","catch","_b","update","handleHideDropdown","localName","className","toggleDropdown","open","render","_this","h","Host","class","innerHTML","SortDown","aria-label","onClick","onBlur","ref","aria-hidden","map","disabled","label","verdocsViewCss","PrintIcon","DownloadIcon","VerdocsView","VerdocsEndpoint","getDefault","class_2","componentWillLoad","endpoint","loadSession","envelopeId","console","error","getEnvelopeById","_d","sent","sdkError","SDKError","e_1","message","response","status","_c","data","handlePageRendered","pageInfo","detail","log","EnvelopeStore","loading","envelope","Fragment","src","alt","style","flex","width","height","fill","cursor","print","marginLeft","maginRight","savePDF","envelope_document_id","documents","envelopeDocument","pages","sort","a","b","sequence","page","pageImageUri","display_uri","virtualWidth","virtualHeight","pageNumber","onPageRendered","layers","type"],"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, 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,"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"],"names":["verdocsDropdownCss","VerdocsDropdown","this","clickListenerSymbol","AbortController","class_1","prototype","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","window","addEventListener","clickListener","bind","signal","disconnectedCallback","abort","e","outside","target","el","contains","hide","handleSelectOption","option","stopPropagation","optionSelected","emit","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","catch","_b","update","handleHideDropdown","localName","className","toggleDropdown","open","render","_this","h","Host","class","innerHTML","SortDown","aria-label","onClick","onBlur","ref","aria-hidden","map","disabled","label","verdocsViewCss","PrintIcon","DownloadIcon","VerdocsView","VerdocsEndpoint","getDefault","class_2","componentWillLoad","endpoint","loadSession","envelopeId","console","error","getEnvelopeById","_d","sent","sdkError","SDKError","e_1","message","response","status","_c","data","handlePageRendered","pageInfo","detail","log","EnvelopeStore","loading","envelope","Fragment","src","alt","style","flex","width","height","fill","cursor","print","marginLeft","maginRight","savePDF","envelope_document_id","documents","envelopeDocument","pages","sort","a","b","sequence","page","pageImageUri","display_uri","virtualWidth","virtualHeight","pageNumber","onPageRendered","layers","type"],"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, 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"]}

package/dist/esm-es5/verdocs-field-checkbox.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-f78d163d.js";import{g as getRGBA}from"./Colors-1b298092.js";import{g as getFieldSettings}from"./utils-36d44309.js";import"./Token-54690789.js";var 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}';var VerdocsFieldCheckbox=function(){function e(e){registerInstance(this,e);this.field=null;this.option=0;this.disabled=false;this.done=false;this.roleindex=0}e.prototype.render=function(){var e,o,i,t;var d=getFieldSettings(this.field);var r=(o=(e=d.options)===null||e===void 0?void 0:e[this.option])!==null&&o!==void 0?o:{checked:false};var s=(t=(i=this.disabled)!==null&&i!==void 0?i:d.disabled)!==null&&t!==void 0?t:false;var c=this.field["rgba"]||getRGBA(this.roleindex);if(this.done){return h(Host,{class:{done:this.done}},r.checked?"✓":"☐")}return h(Host,{class:{required:d.required,disabled:s},style:{backgroundColor:c}},h("label",null,h("input",{type:"checkbox",tabIndex:d.order,checked:r.checked,disabled:s,required:d.required,value:r.id}),h("span",null)))};return e}();VerdocsFieldCheckbox.style=verdocsFieldCheckboxCss;export{VerdocsFieldCheckbox as verdocs_field_checkbox};
+import{r as registerInstance,h,H as Host}from"./index-f78d163d.js";import{g as getRGBA}from"./Colors-1b298092.js";import{g as getFieldSettings}from"./utils-6e8bd73f.js";import"./Token-54690789.js";import"./Files-70a192df.js";var 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}';var VerdocsFieldCheckbox=function(){function e(e){registerInstance(this,e);this.field=null;this.option=0;this.disabled=false;this.done=false;this.roleindex=0}e.prototype.render=function(){var e,o,i,t;var d=getFieldSettings(this.field);var s=(o=(e=d.options)===null||e===void 0?void 0:e[this.option])!==null&&o!==void 0?o:{checked:false};var r=(t=(i=this.disabled)!==null&&i!==void 0?i:d.disabled)!==null&&t!==void 0?t:false;var c=this.field["rgba"]||getRGBA(this.roleindex);if(this.done){return h(Host,{class:{done:this.done}},s.checked?"✓":"☐")}return h(Host,{class:{required:d.required,disabled:r},style:{backgroundColor:c}},h("label",null,h("input",{type:"checkbox",tabIndex:d.order,checked:s.checked,disabled:r,required:d.required,value:s.id}),h("span",null)))};return e}();VerdocsFieldCheckbox.style=verdocsFieldCheckboxCss;export{VerdocsFieldCheckbox as verdocs_field_checkbox};
 //# sourceMappingURL=verdocs-field-checkbox.entry.js.map

package/dist/esm-es5/verdocs-field-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"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"],"names":["verdocsFieldCheckboxCss","VerdocsFieldCheckbox","prototype","render","settings","getFieldSettings","this","field","option","_b","_a","options","checked","disabled","_d","_c","backgroundColor","getRGBA","roleindex","done","h","Host","class","required","style","type","tabIndex","order","value","id"],"mappings":"qMAAA,IAAMA,wBAA0B,ghCCcnBC,qBAAoB,6DAIyB,iBAK/B,gBAKI,gBAKJ,qBAKI,EAE7BA,EAAAC,UAAAC,OAAA,uBACE,IAAMC,EAAWC,iBAAiBC,KAAKC,OACvC,IAAMC,GAASC,GAAAC,EAAAN,EAASO,WAAO,MAAAD,SAAA,OAAA,EAAAA,EAAGJ,KAAKE,WAAO,MAAAC,SAAA,EAAAA,EAAI,CAACG,QAAS,OAC5D,IAAMC,GAAWC,GAAAC,EAAAT,KAAKO,YAAQ,MAAAE,SAAA,EAAAA,EAAIX,EAASS,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBV,KAAKC,MAAM,SAAWU,QAAQX,KAAKY,WAE3D,GAAIZ,KAAKa,KAAM,CACb,OAAOC,EAACC,KAAI,CAACC,MAAO,CAACH,KAAMb,KAAKa,OAAQX,EAAOI,QAAU,IAAM,KAGjE,OACEQ,EAACC,KAAI,CAACC,MAAO,CAACC,SAAUnB,EAASmB,SAAUV,SAAQA,GAAGW,MAAO,CAACR,gBAAeA,IAC3EI,EAAA,QAAA,KACEA,EAAA,QAAA,CAAOK,KAAK,WAAWC,SAAUtB,EAASuB,MAAOf,QAASJ,EAAOI,QAASC,SAAUA,EAAUU,SAAUnB,EAASmB,SAAUK,MAAOpB,EAAOqB,KACzIT,EAAA,OAAA,kBAxCuB","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,"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"],"names":["verdocsFieldCheckboxCss","VerdocsFieldCheckbox","prototype","render","settings","getFieldSettings","this","field","option","_b","_a","options","checked","disabled","_d","_c","backgroundColor","getRGBA","roleindex","done","h","Host","class","required","style","type","tabIndex","order","value","id"],"mappings":"iOAAA,IAAMA,wBAA0B,ghCCcnBC,qBAAoB,6DAIyB,iBAK/B,gBAKI,gBAKJ,qBAKI,EAE7BA,EAAAC,UAAAC,OAAA,uBACE,IAAMC,EAAWC,iBAAiBC,KAAKC,OACvC,IAAMC,GAASC,GAAAC,EAAAN,EAASO,WAAO,MAAAD,SAAA,OAAA,EAAAA,EAAGJ,KAAKE,WAAO,MAAAC,SAAA,EAAAA,EAAI,CAACG,QAAS,OAC5D,IAAMC,GAAWC,GAAAC,EAAAT,KAAKO,YAAQ,MAAAE,SAAA,EAAAA,EAAIX,EAASS,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBV,KAAKC,MAAM,SAAWU,QAAQX,KAAKY,WAE3D,GAAIZ,KAAKa,KAAM,CACb,OAAOC,EAACC,KAAI,CAACC,MAAO,CAACH,KAAMb,KAAKa,OAAQX,EAAOI,QAAU,IAAM,KAGjE,OACEQ,EAACC,KAAI,CAACC,MAAO,CAACC,SAAUnB,EAASmB,SAAUV,SAAQA,GAAGW,MAAO,CAACR,gBAAeA,IAC3EI,EAAA,QAAA,KACEA,EAAA,QAAA,CAAOK,KAAK,WAAWC,SAAUtB,EAASuB,MAAOf,QAASJ,EAAOI,QAASC,SAAUA,EAAUU,SAAUnB,EAASmB,SAAUK,MAAOpB,EAAOqB,KACzIT,EAAA,OAAA,kBAxCuB","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"]}