@verdocs/web-sdk 6.2.2 → 6.2.5

package/dist/verdocs-web-sdk/{p-Xl_gS7bj.system.js.map → p-BTH3kXDy.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-Xl_gS7bj.system.js","sources":["src/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.scss?tag=verdocs-envelopes-list","src/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelopes-list {\n  display: flex;\n  padding: 10px;\n  font-size: 18px;\n  flex-wrap: nowrap;\n  border-radius: 6px;\n  color: $label-color;\n  flex-direction: column;\n  font-family: $primary-font;\n\n  @media screen and (max-width: 800px) {\n    font-size: 14px;\n  }\n\n  .envelope-placeholder {\n    height: 48px;\n    flex: 0 0 48px;\n    margin: 5px 0;\n    border-radius: 5px;\n    background: $verdocs-grey-3;\n  }\n\n  .header {\n    width: 100%;\n    row-gap: 4px;\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: 12px;\n    margin: 0 0 10px 0;\n    align-items: center;\n    flex-direction: row;\n\n    .filter {\n      width: 300px;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n\n      input {\n        height: 32px;\n      }\n    }\n  }\n\n  .filter {\n    align-items: center;\n  }\n\n  .envelope {\n    width: 100%;\n    margin: 3px 0;\n    background: $verdocs-grey-4;\n\n    &:hover {\n      cursor: pointer;\n      background: $verdocs-grey-3;\n    }\n\n    .inner {\n      gap: 12px;\n      display: flex;\n      padding: 8px 14px;\n      border-radius: 5px;\n      flex-direction: row;\n      align-items: center;\n      container-type: inline-size;\n\n      svg {\n        width: 24px;\n        height: 24px;\n      }\n    }\n  }\n\n  .vert-spacer {\n    height: 50px;\n    display: flex;\n    flex: 0 0 1px;\n    border-right: 1px solid #dad8dd;\n\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .envelope-icon {\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  verdocs-checkbox {\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .last-modified {\n    color: #444;\n    display: flex;\n    flex: 0 0 180px;\n    flex-direction: row;\n    align-items: center;\n    white-space: nowrap;\n\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .envelope-name {\n    flex: 1;\n    display: flex;\n    color: #000000;\n    line-height: 28px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .envelope-recipients {\n    color: #4b5563;\n    font-weight: 700;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .empty-text {\n    text-align: center;\n    margin: 16px 0 0 0;\n    padding: 80px 80px;\n    border: 2px solid #ccc;\n  }\n\n  .containing {\n    gap: 12px;\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n  }\n\n  verdocs-status-indicator {\n    @media screen and (max-width: 800px) {\n      font-size: 14px;\n    }\n  }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter, Watch} from '@stencil/core';\nimport {userCanCancelEnvelope, userCanAct, cancelEnvelope, integerSequence, formatFullName} from '@verdocs/js-sdk';\nimport {IEnvelope, IListEnvelopesParams, TEnvelopeStatus, VerdocsEndpoint, getEnvelopes, getRecipientsWithActions} from '@verdocs/js-sdk';\nimport {IFilterOption} from '../../controls/verdocs-quick-filter/verdocs-quick-filter';\nimport {saveEnvelopesAsZip} from '../../../utils/utils';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\n\nconst DocumentIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#000000\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z\" /></svg>`;\n\nconst ViewFilters: IFilterOption[] = [\n  {value: 'all', label: 'All'},\n  {value: 'inbox', label: 'Inbox'},\n  {value: 'sent', label: 'Sent'},\n  {value: 'completed', label: 'Completed'},\n  {value: 'action', label: 'Action Required'},\n  {value: 'waiting', label: 'Waiting on Others'},\n];\n\nconst StatusFilters: IFilterOption[] = [\n  {value: 'all', label: 'All'},\n  {value: 'pending', label: 'Pending'},\n  {value: 'in progress', label: 'In Progress'},\n  {value: 'complete', label: 'Completed'},\n  {value: 'declined', label: 'Declined'},\n  {value: 'canceled', label: 'Canceled'},\n];\n\nconst SortFilters: IFilterOption[] = [\n  {value: 'created_at', label: 'Created'},\n  {value: 'updated_at', label: 'Updated'},\n  {value: 'canceled_at', label: 'Canceled'},\n  {value: 'envelope_name', label: 'Name'},\n  {value: 'envelope_status', label: 'Status'},\n];\n\n/**\n * Displays a list of envelopes matching specified conditions.\n */\n@Component({\n  tag: 'verdocs-envelopes-list',\n  styleUrl: 'verdocs-envelopes-list.scss',\n})\nexport class VerdocsEnvelopesList {\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 filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\n   * show envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\n   * only envelopes where the user is the sender and the envelope is not completed.\n   */\n  @Prop({reflect: true, mutable: true}) view?: 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting' = undefined;\n\n  /**\n   * The status value to filter by\n   */\n  @Prop({reflect: true, mutable: true}) status: TEnvelopeStatus | 'all' = 'all';\n\n  /**\n   * The sort field to use\n   */\n  @Prop({reflect: true, mutable: true}) sort: 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status' = 'created_at';\n\n  /**\n   * If set, filter envelopes by the specified string.\n   */\n  @Prop({reflect: true, mutable: true}) match: string = '';\n\n  /**\n   * If set, filter envelopes by the specified \"containing\" value.\n   */\n  // @Prop({reflect: true, mutable: true}) containing: string = '';\n\n  /**\n   * Whether or not pagination should be enabled.\n   */\n  @Prop() showPagination = true;\n\n  /**\n   * The number of rows to display per page.\n   */\n  @Prop() rowsPerPage = 10;\n\n  /**\n   * The initial page number to select. Pagination is internally controlled but may be overriden by the\n   * host applicaiton.\n   */\n  @Prop() selectedPage = 0;\n\n  /**\n   * Event fired when the user changes their view. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeView: EventEmitter<'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'>;\n\n  /**\n   * Event fired when the user changes their status filter. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeStatus: EventEmitter<TEnvelopeStatus | 'all'>;\n\n  /**\n   * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeSort: EventEmitter<'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'>;\n\n  /**\n   * Event fired when the user changes the match filter. This is fired for every inputChange event (every character\n   * typed). This event is provided for balance with the other events, but host applications should generally not\n   * save this value. Users might appreciate applications remembering their sorting or filtering preferences, but\n   * probably not their search terms.\n   */\n  @Event({composed: true}) changeMatch: EventEmitter<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  /**\n   * Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\n   * to the envelope detail view.\n   */\n  @Event({composed: true}) viewEnvelope: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>;\n\n  /**\n   * Event fired when the user clicks to finish the envelope.\n   */\n  @Event({composed: true}) finishEnvelope: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>;\n\n  @State() count = 0;\n  @State() initiallyLoaded = false;\n  @State() loading = true;\n  @State() selectedEnvelopes: IEnvelope[] = [];\n  @State() envelopes: IEnvelope[] = [];\n\n  @Watch('view')\n  handleViewUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('status')\n  handleStatusUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('sort')\n  handleSortUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('match')\n  handleMatchUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  // @Watch('containing')\n  // handleContainingUpdated() {\n  //   return this.queryEnvelopes();\n  // }\n\n  @Watch('selectedPage')\n  handlePageUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  componentWillLoad() {\n    this.endpoint.onSessionChanged((_, session, profile) => {\n      console.log('[ENVELOPES_LIST] onSessionChanged', session, profile);\n    });\n    this.endpoint.loadSession();\n  }\n\n  async componentDidLoad() {\n    await this.queryEnvelopes();\n    this.initiallyLoaded = true;\n  }\n\n  async queryEnvelopes() {\n    try {\n      this.loading = true;\n      let queryParams: IListEnvelopesParams = {\n        page: this.selectedPage,\n        // sort: this.sort,\n        rows: this.rowsPerPage,\n      };\n\n      switch (this.view) {\n        case 'all':\n          queryParams = {\n            ...queryParams,\n            // sort: this.sort,\n            // direction: this.sort === 'name' ? 'asc' : 'desc',\n            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]) as TEnvelopeStatus[],\n          };\n          break;\n\n        case 'inbox':\n          queryParams = {\n            ...queryParams,\n            // is_recipient: true,\n            // sort: 'updated_at',\n            // recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],\n          };\n          break;\n\n        case 'sent':\n          queryParams = {\n            ...queryParams,\n            // FIXME\n            // is_owner: true,\n            // sort: 'updated_at',\n          };\n          break;\n\n        case 'action':\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // is_recipient: true,\n            status: ['pending', 'in progress'],\n            // recipient_status: ['invited', 'opened', 'signed'],\n          };\n          break;\n\n        case 'waiting':\n          queryParams = {\n            ...queryParams,\n            // FIXME\n            // is_owner: true,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: ['pending', 'in progress'],\n          };\n          break;\n\n        case 'completed':\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: ['complete'],\n          };\n          break;\n\n        default:\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]) as TEnvelopeStatus[],\n          };\n      }\n\n      // These filters should only be applied in \"View All\" mode. Otherwise the user could have set them to something\n      // then changed the view e.g. to Inbox and the filter could break the view (e.g. View:Inbox, Status:Declined\n      // would never return anything).\n      if (this.view === 'all') {\n        if (this.status !== 'all') {\n          queryParams.status = [this.status as TEnvelopeStatus];\n        }\n      }\n\n      if (this.sort !== 'updated_at') {\n        // queryParams.sort = this.sort;\n        // queryParams.direction = this.sort === 'name' ? 'asc' : 'desc';\n      }\n\n      if (this.match.trim()) {\n        // queryParams.match = this.match.trim();\n      }\n\n      // if (this.containing.trim()) {\n      //   queryParams.field_value = this.containing.trim();\n      // }\n\n      const response = await getEnvelopes(this.endpoint, queryParams);\n      this.envelopes = response.envelopes;\n      this.count = response.count;\n      this.loading = false;\n    } catch (e) {\n      this.loading = false;\n      console.log('[ENVELOPES] Error listing envelopes', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleDownload() {\n    saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)\n      .then(() => {\n        this.selectedEnvelopes = [];\n      })\n      .catch(e => {\n        console.log('[ENVELOPES] Download error', e);\n        VerdocsToast('Download error: ' + e.message, {style: 'error'});\n      });\n  }\n\n  downloadEnvelope(envelope: IEnvelope) {\n    saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {\n      console.log('[ENVELOPES] Download error', e);\n      VerdocsToast('Download error: ' + e.message, {style: 'error'});\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"filter\">\n            <verdocs-text-input\n              id=\"verdocs-filter-name\"\n              value={this.match}\n              clearable={true}\n              autocomplete=\"off\"\n              placeholder=\"Filter by Name, Recipient, or Field...\"\n              onFocusout={(e: any) => {\n                // We don't locally filter envelopes because there are too many fields to match against efficiently.\n                this.match = e.target.value.trim();\n                this.changeMatch?.emit(this.match);\n              }}\n            />\n          </div>\n\n          <verdocs-quick-filter\n            label=\"View\"\n            value={this.view}\n            options={ViewFilters}\n            onOptionSelected={e => {\n              this.view = e.detail.value as any;\n            }}\n          />\n\n          {this.view === 'all' && (\n            <verdocs-quick-filter\n              label=\"Status\"\n              value={this.status}\n              options={StatusFilters}\n              onOptionSelected={e => {\n                this.status = e.detail.value as any;\n              }}\n            />\n          )}\n\n          {this.view === 'all' && (\n            <verdocs-quick-filter\n              label=\"Sort By\"\n              value={this.sort}\n              options={SortFilters}\n              onOptionSelected={e => {\n                this.sort = e.detail.value as any;\n              }}\n            />\n          )}\n\n          {/*<div class=\"containing\">*/}\n          {/*  <div class=\"filter\">*/}\n          {/*    <verdocs-text-input*/}\n          {/*      id=\"verdocs-filter-containing\"*/}\n          {/*      value={this.containing}*/}\n          {/*      autocomplete=\"off\"*/}\n          {/*      placeholder=\"Fields Containing...\"*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.containing = e.target.value;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n          {/*</div>*/}\n\n          {this.loading && <verdocs-spinner mode=\"dark\" size={24} />}\n\n          <div style={{display: 'flex', flex: '1'}} />\n\n          {this.selectedEnvelopes.length > 0 && <verdocs-button label={`Download (${this.selectedEnvelopes.length})`} onClick={() => this.handleDownload()} />}\n        </div>\n\n        {this.envelopes.map(envelope => {\n          const recipientsWithActions = getRecipientsWithActions(envelope);\n          const userCanCancel = userCanCancelEnvelope(this.endpoint.profile, envelope);\n          const userRole = recipientsWithActions.find(recipient => recipient.email === this.endpoint.session?.email || '');\n          const userCanFinish = userRole && userCanCancel && userCanAct(this.endpoint.session?.email || '', recipientsWithActions);\n\n          const menuOptions = [\n            {label: 'View Envelope', id: 'view'},\n            {label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish},\n            {label: 'Download', id: 'download'},\n            {label: 'Cancel', id: 'cancel', disabled: !userCanCancel},\n          ];\n\n          return (\n            <div class=\"envelope\" key={envelope.id} onClick={() => this.viewEnvelope?.emit({endpoint: this.endpoint, envelope})}>\n              <div class=\"inner\">\n                <verdocs-checkbox\n                  checked={this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1}\n                  onClick={e => e.stopPropagation()} // So this doesn't trigger navigation\n                  onInput={(e: any) => {\n                    if (e.target.checked) {\n                      this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];\n                    } else {\n                      this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);\n                    }\n                  }}\n                />\n\n                <div class=\"vert-spacer\" />\n                <span innerHTML={DocumentIcon} class=\"envelope-icon\" />\n\n                <div class=\"envelope-name\">\n                  {envelope.name}:&nbsp; <div class=\"envelope-recipients\">{envelope.recipients.map(r => formatFullName(r))}</div>\n                </div>\n\n                <div class=\"vert-spacer\" />\n                <verdocs-status-indicator envelope={envelope} style={{width: '125px'}} />\n\n                <div class=\"vert-spacer\" />\n                <div class=\"last-modified\">{new Date(envelope.updated_at).toLocaleString()}</div>\n\n                <div class=\"vert-spacer\" />\n                <verdocs-dropdown\n                  options={menuOptions}\n                  onOptionSelected={e => {\n                    switch (e.detail.id) {\n                      case 'view':\n                        this.viewEnvelope?.emit({endpoint: this.endpoint, envelope});\n                        break;\n                      case 'finish':\n                        this.finishEnvelope?.emit({endpoint: this.endpoint, envelope});\n                        break;\n                      case 'download':\n                        this.downloadEnvelope(envelope);\n                        break;\n                      case 'cancel':\n                        if (window.confirm('Are you sure you want to cancel this envelope?')) {\n                          cancelEnvelope(this.endpoint, envelope.id)\n                            .then(() => VerdocsToast('Envelope canceled'))\n                            .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, {style: 'error'}));\n                          this.queryEnvelopes().catch(() => {});\n                        }\n                        break;\n                    }\n                  }}\n                />\n              </div>\n            </div>\n          );\n        })}\n\n        {!this.initiallyLoaded && (\n          <div style={{width: '100%'}}>\n            {integerSequence(0, this.rowsPerPage).map(() => (\n              <div class=\"envelope-placeholder\" />\n            ))}\n          </div>\n        )}\n\n        {this.initiallyLoaded && !this.envelopes.length && <div class=\"empty-text\">No matching envelopes found. Please adjust your filters and try again.</div>}\n\n        {this.initiallyLoaded && this.envelopes.length && this.showPagination ? (\n          <div style={{marginTop: '20px'}}>\n            <verdocs-pagination\n              selectedPage={this.selectedPage}\n              perPage={this.rowsPerPage}\n              itemCount={this.count}\n              onSelectPage={e => {\n                this.selectedPage = e.detail.selectedPage;\n              }}\n            />\n          </div>\n        ) : (\n          <div />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-BTH3kXDy.system.js","sources":["src/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.scss?tag=verdocs-envelopes-list","src/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelopes-list {\n  display: flex;\n  padding: 10px;\n  font-size: 18px;\n  flex-wrap: nowrap;\n  border-radius: 6px;\n  color: $label-color;\n  flex-direction: column;\n  font-family: $primary-font;\n\n  @media screen and (max-width: 800px) {\n    font-size: 14px;\n  }\n\n  .envelope-placeholder {\n    height: 48px;\n    flex: 0 0 48px;\n    margin: 5px 0;\n    border-radius: 5px;\n    background: $verdocs-grey-3;\n  }\n\n  .header {\n    width: 100%;\n    row-gap: 4px;\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: 12px;\n    margin: 0 0 10px 0;\n    align-items: center;\n    flex-direction: row;\n\n    .filter {\n      width: 300px;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n\n      input {\n        height: 32px;\n      }\n    }\n  }\n\n  .filter {\n    align-items: center;\n  }\n\n  .envelope {\n    width: 100%;\n    margin: 3px 0;\n    background: $verdocs-grey-4;\n\n    &:hover {\n      cursor: pointer;\n      background: $verdocs-grey-3;\n    }\n\n    .inner {\n      gap: 12px;\n      display: flex;\n      padding: 8px 14px;\n      border-radius: 5px;\n      flex-direction: row;\n      align-items: center;\n      container-type: inline-size;\n\n      svg {\n        width: 24px;\n        height: 24px;\n      }\n    }\n  }\n\n  .vert-spacer {\n    height: 50px;\n    display: flex;\n    flex: 0 0 1px;\n    border-right: 1px solid #dad8dd;\n\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .envelope-icon {\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  verdocs-checkbox {\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .last-modified {\n    color: #444;\n    display: flex;\n    flex: 0 0 180px;\n    flex-direction: row;\n    align-items: center;\n    white-space: nowrap;\n\n    @media screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n\n  .envelope-name {\n    flex: 1;\n    display: flex;\n    color: #000000;\n    line-height: 28px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .envelope-recipients {\n    color: #4b5563;\n    font-weight: 700;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .empty-text {\n    text-align: center;\n    margin: 16px 0 0 0;\n    padding: 80px 80px;\n    border: 2px solid #ccc;\n  }\n\n  .containing {\n    gap: 12px;\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n  }\n\n  verdocs-status-indicator {\n    @media screen and (max-width: 800px) {\n      font-size: 14px;\n    }\n  }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter, Watch} from '@stencil/core';\nimport {userCanCancelEnvelope, userCanAct, cancelEnvelope, integerSequence, formatFullName} from '@verdocs/js-sdk';\nimport {IEnvelope, IListEnvelopesParams, TEnvelopeStatus, VerdocsEndpoint, getEnvelopes, getRecipientsWithActions} from '@verdocs/js-sdk';\nimport {IFilterOption} from '../../controls/verdocs-quick-filter/verdocs-quick-filter';\nimport {saveEnvelopesAsZip} from '../../../utils/utils';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\n\nconst DocumentIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#000000\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z\" /></svg>`;\n\nconst ViewFilters: IFilterOption[] = [\n  {value: 'all', label: 'All'},\n  {value: 'inbox', label: 'Inbox'},\n  {value: 'sent', label: 'Sent'},\n  {value: 'completed', label: 'Completed'},\n  {value: 'action', label: 'Action Required'},\n  {value: 'waiting', label: 'Waiting on Others'},\n];\n\nconst StatusFilters: IFilterOption[] = [\n  {value: 'all', label: 'All'},\n  {value: 'pending', label: 'Pending'},\n  {value: 'in progress', label: 'In Progress'},\n  {value: 'complete', label: 'Completed'},\n  {value: 'declined', label: 'Declined'},\n  {value: 'canceled', label: 'Canceled'},\n];\n\nconst SortFilters: IFilterOption[] = [\n  {value: 'created_at', label: 'Created'},\n  {value: 'updated_at', label: 'Updated'},\n  {value: 'canceled_at', label: 'Canceled'},\n  {value: 'envelope_name', label: 'Name'},\n  {value: 'envelope_status', label: 'Status'},\n];\n\n/**\n * Displays a list of envelopes matching specified conditions.\n */\n@Component({\n  tag: 'verdocs-envelopes-list',\n  styleUrl: 'verdocs-envelopes-list.scss',\n})\nexport class VerdocsEnvelopesList {\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 filtered view to display. \"completed\" will show envelopes that have been submitted. \"action\" will\n   * show envelopes where the user is a recipient and the envelope is not completed. \"waiting\" will show\n   * only envelopes where the user is the sender and the envelope is not completed.\n   */\n  @Prop({reflect: true, mutable: true}) view?: 'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting' = undefined;\n\n  /**\n   * The status value to filter by\n   */\n  @Prop({reflect: true, mutable: true}) status: TEnvelopeStatus | 'all' = 'all';\n\n  /**\n   * The sort field to use\n   */\n  @Prop({reflect: true, mutable: true}) sort: 'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status' = 'created_at';\n\n  /**\n   * If set, filter envelopes by the specified string.\n   */\n  @Prop({reflect: true, mutable: true}) match: string = '';\n\n  /**\n   * If set, filter envelopes by the specified \"containing\" value.\n   */\n  // @Prop({reflect: true, mutable: true}) containing: string = '';\n\n  /**\n   * Whether or not pagination should be enabled.\n   */\n  @Prop() showPagination = true;\n\n  /**\n   * The number of rows to display per page.\n   */\n  @Prop() rowsPerPage = 10;\n\n  /**\n   * The initial page number to select. Pagination is internally controlled but may be overriden by the\n   * host applicaiton.\n   */\n  @Prop() selectedPage = 0;\n\n  /**\n   * Event fired when the user changes their view. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeView: EventEmitter<'all' | 'inbox' | 'sent' | 'completed' | 'action' | 'waiting'>;\n\n  /**\n   * Event fired when the user changes their status filter. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeStatus: EventEmitter<TEnvelopeStatus | 'all'>;\n\n  /**\n   * Event fired when the user changes their sort order. Host applications can use this to save the user's preferences.\n   */\n  @Event({composed: true}) changeSort: EventEmitter<'name' | 'created_at' | 'updated_at' | 'canceled_at' | 'status'>;\n\n  /**\n   * Event fired when the user changes the match filter. This is fired for every inputChange event (every character\n   * typed). This event is provided for balance with the other events, but host applications should generally not\n   * save this value. Users might appreciate applications remembering their sorting or filtering preferences, but\n   * probably not their search terms.\n   */\n  @Event({composed: true}) changeMatch: EventEmitter<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  /**\n   * Event fired when the user clicks an activity entry. Typically the host application will use this to navigate\n   * to the envelope detail view.\n   */\n  @Event({composed: true}) viewEnvelope: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>;\n\n  /**\n   * Event fired when the user clicks to finish the envelope.\n   */\n  @Event({composed: true}) finishEnvelope: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>;\n\n  @State() count = 0;\n  @State() initiallyLoaded = false;\n  @State() loading = true;\n  @State() selectedEnvelopes: IEnvelope[] = [];\n  @State() envelopes: IEnvelope[] = [];\n\n  @Watch('view')\n  handleViewUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('status')\n  handleStatusUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('sort')\n  handleSortUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  @Watch('match')\n  handleMatchUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  // @Watch('containing')\n  // handleContainingUpdated() {\n  //   return this.queryEnvelopes();\n  // }\n\n  @Watch('selectedPage')\n  handlePageUpdated() {\n    return this.queryEnvelopes();\n  }\n\n  componentWillLoad() {\n    this.endpoint.onSessionChanged((_, session, profile) => {\n      console.log('[ENVELOPES_LIST] onSessionChanged', session, profile);\n    });\n    this.endpoint.loadSession();\n  }\n\n  async componentDidLoad() {\n    await this.queryEnvelopes();\n    this.initiallyLoaded = true;\n  }\n\n  async queryEnvelopes() {\n    try {\n      this.loading = true;\n      let queryParams: IListEnvelopesParams = {\n        page: this.selectedPage,\n        // sort: this.sort,\n        rows: this.rowsPerPage,\n      };\n\n      switch (this.view) {\n        case 'all':\n          queryParams = {\n            ...queryParams,\n            // sort: this.sort,\n            // direction: this.sort === 'name' ? 'asc' : 'desc',\n            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]) as TEnvelopeStatus[],\n          };\n          break;\n\n        case 'inbox':\n          queryParams = {\n            ...queryParams,\n            // is_recipient: true,\n            // sort: 'updated_at',\n            // recipient_status: ['invited', 'declined', 'opened', 'signed', 'submitted', 'canceled'],\n          };\n          break;\n\n        case 'sent':\n          queryParams = {\n            ...queryParams,\n            // FIXME\n            // is_owner: true,\n            // sort: 'updated_at',\n          };\n          break;\n\n        case 'action':\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // is_recipient: true,\n            status: ['pending', 'in progress'],\n            // recipient_status: ['invited', 'opened', 'signed'],\n          };\n          break;\n\n        case 'waiting':\n          queryParams = {\n            ...queryParams,\n            // FIXME\n            // is_owner: true,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: ['pending', 'in progress'],\n          };\n          break;\n\n        case 'completed':\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: ['complete'],\n          };\n          break;\n\n        default:\n          queryParams = {\n            ...queryParams,\n            // sort: 'updated_at',\n            // direction: 'desc',\n            status: (this.status === 'all' ? ['pending', 'in progress', 'complete', 'declined', 'canceled'] : [this.status]) as TEnvelopeStatus[],\n          };\n      }\n\n      // These filters should only be applied in \"View All\" mode. Otherwise the user could have set them to something\n      // then changed the view e.g. to Inbox and the filter could break the view (e.g. View:Inbox, Status:Declined\n      // would never return anything).\n      if (this.view === 'all') {\n        if (this.status !== 'all') {\n          queryParams.status = [this.status as TEnvelopeStatus];\n        }\n      }\n\n      if (this.sort !== 'updated_at') {\n        // queryParams.sort = this.sort;\n        // queryParams.direction = this.sort === 'name' ? 'asc' : 'desc';\n      }\n\n      if (this.match.trim()) {\n        // queryParams.match = this.match.trim();\n      }\n\n      // if (this.containing.trim()) {\n      //   queryParams.field_value = this.containing.trim();\n      // }\n\n      const response = await getEnvelopes(this.endpoint, queryParams);\n      this.envelopes = response.envelopes;\n      this.count = response.count;\n      this.loading = false;\n    } catch (e) {\n      this.loading = false;\n      console.log('[ENVELOPES] Error listing envelopes', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleDownload() {\n    saveEnvelopesAsZip(this.endpoint, this.selectedEnvelopes)\n      .then(() => {\n        this.selectedEnvelopes = [];\n      })\n      .catch(e => {\n        console.log('[ENVELOPES] Download error', e);\n        VerdocsToast('Download error: ' + e.message, {style: 'error'});\n      });\n  }\n\n  downloadEnvelope(envelope: IEnvelope) {\n    saveEnvelopesAsZip(this.endpoint, [envelope]).catch(e => {\n      console.log('[ENVELOPES] Download error', e);\n      VerdocsToast('Download error: ' + e.message, {style: 'error'});\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"filter\">\n            <verdocs-text-input\n              id=\"verdocs-filter-name\"\n              value={this.match}\n              clearable={true}\n              autocomplete=\"off\"\n              placeholder=\"Filter by Name, Recipient, or Field...\"\n              onFocusout={(e: any) => {\n                // We don't locally filter envelopes because there are too many fields to match against efficiently.\n                this.match = e.target.value.trim();\n                this.changeMatch?.emit(this.match);\n              }}\n            />\n          </div>\n\n          <verdocs-quick-filter\n            label=\"View\"\n            value={this.view}\n            options={ViewFilters}\n            onOptionSelected={e => {\n              this.view = e.detail.value as any;\n            }}\n          />\n\n          {this.view === 'all' && (\n            <verdocs-quick-filter\n              label=\"Status\"\n              value={this.status}\n              options={StatusFilters}\n              onOptionSelected={e => {\n                this.status = e.detail.value as any;\n              }}\n            />\n          )}\n\n          {this.view === 'all' && (\n            <verdocs-quick-filter\n              label=\"Sort By\"\n              value={this.sort}\n              options={SortFilters}\n              onOptionSelected={e => {\n                this.sort = e.detail.value as any;\n              }}\n            />\n          )}\n\n          {/*<div class=\"containing\">*/}\n          {/*  <div class=\"filter\">*/}\n          {/*    <verdocs-text-input*/}\n          {/*      id=\"verdocs-filter-containing\"*/}\n          {/*      value={this.containing}*/}\n          {/*      autocomplete=\"off\"*/}\n          {/*      placeholder=\"Fields Containing...\"*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.containing = e.target.value;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n          {/*</div>*/}\n\n          {this.loading && <verdocs-spinner mode=\"dark\" size={24} />}\n\n          <div style={{display: 'flex', flex: '1'}} />\n\n          {this.selectedEnvelopes.length > 0 && <verdocs-button label={`Download (${this.selectedEnvelopes.length})`} onClick={() => this.handleDownload()} />}\n        </div>\n\n        {this.envelopes.map(envelope => {\n          const recipientsWithActions = getRecipientsWithActions(envelope);\n          const userCanCancel = userCanCancelEnvelope(this.endpoint.profile, envelope);\n          const userRole = recipientsWithActions.find(recipient => recipient.email === this.endpoint.session?.email || '');\n          const userCanFinish = userRole && userCanCancel && userCanAct(this.endpoint.session?.email || '', recipientsWithActions);\n\n          const menuOptions = [\n            {label: 'View Envelope', id: 'view'},\n            {label: 'Finish Envelope', id: 'finish', disabled: !userCanFinish},\n            {label: 'Download', id: 'download'},\n            {label: 'Cancel', id: 'cancel', disabled: !userCanCancel},\n          ];\n\n          return (\n            <div class=\"envelope\" key={envelope.id} onClick={() => this.viewEnvelope?.emit({endpoint: this.endpoint, envelope})}>\n              <div class=\"inner\">\n                <verdocs-checkbox\n                  checked={this.selectedEnvelopes.findIndex(e => e.id === envelope.id) !== -1}\n                  onClick={e => e.stopPropagation()} // So this doesn't trigger navigation\n                  onInput={(e: any) => {\n                    if (e.target.checked) {\n                      this.selectedEnvelopes = [...this.selectedEnvelopes, envelope];\n                    } else {\n                      this.selectedEnvelopes = this.selectedEnvelopes.filter(e => e.id !== envelope.id);\n                    }\n                  }}\n                />\n\n                <div class=\"vert-spacer\" />\n                <span innerHTML={DocumentIcon} class=\"envelope-icon\" />\n\n                <div class=\"envelope-name\">\n                  {envelope.name}:&nbsp; <div class=\"envelope-recipients\">{envelope.recipients.map(r => formatFullName(r))}</div>\n                </div>\n\n                <div class=\"vert-spacer\" />\n                <verdocs-status-indicator envelope={envelope} style={{width: '125px'}} />\n\n                <div class=\"vert-spacer\" />\n                <div class=\"last-modified\">{new Date(envelope.updated_at).toLocaleString()}</div>\n\n                <div class=\"vert-spacer\" />\n                <verdocs-dropdown\n                  options={menuOptions}\n                  onOptionSelected={e => {\n                    switch (e.detail.id) {\n                      case 'view':\n                        this.viewEnvelope?.emit({endpoint: this.endpoint, envelope});\n                        break;\n                      case 'finish':\n                        this.finishEnvelope?.emit({endpoint: this.endpoint, envelope});\n                        break;\n                      case 'download':\n                        this.downloadEnvelope(envelope);\n                        break;\n                      case 'cancel':\n                        if (window.confirm('Are you sure you want to cancel this envelope?')) {\n                          cancelEnvelope(this.endpoint, envelope.id)\n                            .then(() => VerdocsToast('Envelope canceled'))\n                            .catch(e => VerdocsToast('Unable to cancel envelope: ' + e.messabge, {style: 'error'}));\n                          this.queryEnvelopes().catch(() => {});\n                        }\n                        break;\n                    }\n                  }}\n                />\n              </div>\n            </div>\n          );\n        })}\n\n        {!this.initiallyLoaded && (\n          <div style={{width: '100%'}}>\n            {integerSequence(0, this.rowsPerPage).map(() => (\n              <div class=\"envelope-placeholder\" />\n            ))}\n          </div>\n        )}\n\n        {this.initiallyLoaded && !this.envelopes.length && <div class=\"empty-text\">No matching envelopes found. Please adjust your filters and try again.</div>}\n\n        {this.initiallyLoaded && this.envelopes.length && this.showPagination ? (\n          <div style={{marginTop: '20px'}}>\n            <verdocs-pagination\n              selectedPage={this.selectedPage}\n              perPage={this.rowsPerPage}\n              itemCount={this.count}\n              onSelectPage={e => {\n                this.selectedPage = e.detail.selectedPage;\n              }}\n            />\n          </div>\n        ) : (\n          <div />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;MAAA,MAAM,uBAAuB,GAAG,+kGAA+kG;;MCQ/mG,MAAM,YAAY,GAAG,CAAA,0vBAAA,CAA4vB;MAEjxB,MAAM,WAAW,GAAoB;MACnC,IAAA,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;MAC5B,IAAA,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC;MAChC,IAAA,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC;MAC9B,IAAA,EAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAC;MACxC,IAAA,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAC;MAC3C,IAAA,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,mBAAmB,EAAC;OAC/C;MAED,MAAM,aAAa,GAAoB;MACrC,IAAA,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC;MAC5B,IAAA,EAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC;MACpC,IAAA,EAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAC;MAC5C,IAAA,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAC;MACvC,IAAA,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAC;MACtC,IAAA,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAC;OACvC;MAED,MAAM,WAAW,GAAoB;MACnC,IAAA,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAC;MACvC,IAAA,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAC;MACvC,IAAA,EAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAC;MACzC,IAAA,EAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAC;MACvC,IAAA,EAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,QAAQ,EAAC;OAC5C;YASY,oBAAoB,qCAAA,MAAA;MAJjC,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;MAKE;;MAEG;MACK,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE;MAEhE;;;;MAIG;MACmC,QAAA,IAAI,CAAA,IAAA,GAAmE,SAAS;MAEtH;;MAEG;MACmC,QAAA,IAAM,CAAA,MAAA,GAA4B,KAAK;MAE7E;;MAEG;MACmC,QAAA,IAAI,CAAA,IAAA,GAAoE,YAAY;MAE1H;;MAEG;MACmC,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;MAExD;;MAEG;;MAGH;;MAEG;MACK,QAAA,IAAc,CAAA,cAAA,GAAG,IAAI;MAE7B;;MAEG;MACK,QAAA,IAAW,CAAA,WAAA,GAAG,EAAE;MAExB;;;MAGG;MACK,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC;MA0Cf,QAAA,IAAK,CAAA,KAAA,GAAG,CAAC;MACT,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;MACvB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;MACd,QAAA,IAAiB,CAAA,iBAAA,GAAgB,EAAE;MACnC,QAAA,IAAS,CAAA,SAAA,GAAgB,EAAE;MAoVrC;UAjVC,iBAAiB,GAAA;MACf,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;;UAI9B,mBAAmB,GAAA;MACjB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;;UAI9B,iBAAiB,GAAA;MACf,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;;UAI9B,kBAAkB,GAAA;MAChB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;;;;;;UAS9B,iBAAiB,GAAA;MACf,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE;;UAG9B,iBAAiB,GAAA;MACf,QAAA,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,KAAI;kBACrD,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,OAAO,EAAE,OAAO,CAAC;MACpE,SAAC,CAAC;MACF,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;;MAG7B,IAAA,MAAM,gBAAgB,GAAA;MACpB,QAAA,MAAM,IAAI,CAAC,cAAc,EAAE;MAC3B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;;MAG7B,IAAA,MAAM,cAAc,GAAA;;MAClB,QAAA,IAAI;MACF,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;MACnB,YAAA,IAAI,WAAW,GAAyB;sBACtC,IAAI,EAAE,IAAI,CAAC,YAAY;;sBAEvB,IAAI,EAAE,IAAI,CAAC,WAAW;mBACvB;MAED,YAAA,QAAQ,IAAI,CAAC,IAAI;MACf,gBAAA,KAAK,KAAK;MACR,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;MAGd,wBAAA,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,GAAG,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAsB;2BACtI;0BACD;MAEF,gBAAA,KAAK,OAAO;MACV,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;;2BAIf;0BACD;MAEF,gBAAA,KAAK,MAAM;MACT,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;;2BAIf;0BACD;MAEF,gBAAA,KAAK,QAAQ;MACX,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;MAGd,wBAAA,MAAM,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;;2BAEnC;0BACD;MAEF,gBAAA,KAAK,SAAS;MACZ,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;;;MAKd,wBAAA,MAAM,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;2BACnC;0BACD;MAEF,gBAAA,KAAK,WAAW;MACd,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;8BAGd,MAAM,EAAE,CAAC,UAAU,CAAC;2BACrB;0BACD;MAEF,gBAAA;MACE,oBAAA,WAAW,GAAG;MACZ,wBAAA,GAAG,WAAW;;;MAGd,wBAAA,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,GAAG,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAsB;2BACtI;;;;;MAML,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;MACvB,gBAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;0BACzB,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAyB,CAAC;;;MASzD,YAAA,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE;;;;kBAQvB,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC;MAC/D,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS;MACnC,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK;MAC3B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;cACpB,OAAO,CAAC,EAAE;MACV,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;MACpB,YAAA,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC;MACrD,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA,EAAA,GAAA,CAAC,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,EAAA,GAAA,CAAC,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC;;;UAItF,cAAc,GAAA;cACZ,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB;mBACrD,IAAI,CAAC,MAAK;MACT,YAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;MAC7B,SAAC;mBACA,KAAK,CAAC,CAAC,IAAG;MACT,YAAA,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,CAAC,CAAC;MAC5C,YAAA,YAAY,CAAC,kBAAkB,GAAG,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,CAAC;MAChE,SAAC,CAAC;;MAGN,IAAA,gBAAgB,CAAC,QAAmB,EAAA;MAClC,QAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAG;MACtD,YAAA,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,CAAC,CAAC;MAC5C,YAAA,YAAY,CAAC,kBAAkB,GAAG,CAAC,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,CAAC;MAChE,SAAC,CAAC;;UAGJ,MAAM,GAAA;MACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EACjB,CACE,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,qBAAqB,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,wCAAwC,EACpD,UAAU,EAAE,CAAC,CAAM,KAAI;;;sBAErB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;MAClC,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;MACpC,aAAC,GACD,CACE,EAEN,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,CAAC,IAAG;sBACpB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAY;MACnC,aAAC,EACD,CAAA,EAED,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,CACE,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,aAAa,EACtB,gBAAgB,EAAE,CAAC,IAAG;sBACpB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAY;MACrC,aAAC,GACD,CACH,EAEA,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,CACE,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,CAAC,IAAG;sBACpB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAY;mBAClC,GACD,CACH,EAgBA,IAAI,CAAC,OAAO,IAAI,CAAiB,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EAE1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAC,EAAI,CAAA,EAE3C,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAG,CAAA,CAAA,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAA,CAAI,CAChJ,EAEL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,IAAG;;MAC7B,YAAA,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,QAAQ,CAAC;MAChE,YAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC;kBAC5E,MAAM,QAAQ,GAAG,qBAAqB,CAAC,IAAI,CAAC,SAAS,IAAG,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,SAAS,CAAC,KAAK,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAA,IAAI,EAAE,CAAA,EAAA,CAAC;MAChH,YAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,aAAa,IAAI,UAAU,CAAC,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,KAAI,EAAE,EAAE,qBAAqB,CAAC;MAExH,YAAA,MAAM,WAAW,GAAG;MAClB,gBAAA,EAAC,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAC;MACpC,gBAAA,EAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,aAAa,EAAC;MAClE,gBAAA,EAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAC;MACnC,gBAAA,EAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,aAAa,EAAC;mBAC1D;kBAED,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,OAAO,EAAE,MAAK,EAAC,IAAA,EAAA,CAAA,CAAA,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC,CAAA,EAAA,EAAA,EACjH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAA,CAAA,kBAAA,EAAA,EACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,EAC3E,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EACjC,OAAO,EAAE,CAAC,CAAM,KAAI;MAClB,oBAAA,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;8BACpB,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC;;+BACzD;8BACL,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,EAAE,CAAC;;MAErF,iBAAC,EACD,CAAA,EAEF,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,YAAY,EAAE,KAAK,EAAC,eAAe,EAAG,CAAA,EAEvD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,QAAQ,CAAC,IAAI,cAAS,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,CAAO,CAC3G,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAC3B,CAA0B,CAAA,0BAAA,EAAA,EAAA,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,EAAI,CAAA,EAEzE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,cAAc,EAAE,CAAO,EAEjF,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAC3B,CACE,CAAA,kBAAA,EAAA,EAAA,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAE,CAAC,IAAG;;MACpB,oBAAA,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE;MACjB,wBAAA,KAAK,MAAM;MACT,4BAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;kCAC5D;MACF,wBAAA,KAAK,QAAQ;MACX,4BAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;kCAC9D;MACF,wBAAA,KAAK,UAAU;MACb,4BAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;kCAC/B;MACF,wBAAA,KAAK,QAAQ;MACX,4BAAA,IAAI,MAAM,CAAC,OAAO,CAAC,gDAAgD,CAAC,EAAE;sCACpE,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;2CACtC,IAAI,CAAC,MAAM,YAAY,CAAC,mBAAmB,CAAC;2CAC5C,KAAK,CAAC,CAAC,IAAI,YAAY,CAAC,6BAA6B,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC,CAAC,CAAC;sCACzF,IAAI,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,MAAK,GAAG,CAAC;;kCAEvC;;MAEN,iBAAC,EACD,CAAA,CACE,CACF;MAEV,SAAC,CAAC,EAED,CAAC,IAAI,CAAC,eAAe,KACpB,4DAAK,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EACxB,EAAA,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,OACxC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,GAAG,CACrC,CAAC,CACE,CACP,EAEA,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAA6E,EAAA,wEAAA,CAAA,EAEtJ,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,IACnE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAC,EAAA,EAC7B,CACE,CAAA,oBAAA,EAAA,EAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,YAAY,EAAE,CAAC,IAAG;sBAChB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY;MAC3C,aAAC,EAAA,CACD,CACE,KAEN,CAAO,CAAA,KAAA,EAAA,IAAA,CAAA,CACR,CACI;;;;;;;;;;;;;;;;;;"}

package/dist/verdocs-web-sdk/{p-BwAcNrO8.system.js.map → p-Bf1JxkHa.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-BwAcNrO8.system.js","sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n  display: flex;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n\n  .upload-box {\n    text-align: center;\n    box-sizing: border-box;\n    padding: 40px 15px;\n    //padding: 44px 18px 66px;\n    color: rgba(0, 0, 0, 0.54);\n\n    svg {\n      width: 64px;\n      height: 64px;\n      fill: #5c6575;\n    }\n  }\n\n  .selected-filename {\n    font-size: 20px;\n    //margin-top: 20px;\n    font-weight: bold;\n    overflow-wrap: anywhere;\n  }\n\n  .or-prefer {\n    height: 20px;\n    margin: 20px 0;\n    font-size: 16px;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/**\n * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n *\n * ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n */\n@Component({\n  tag: 'verdocs-file-chooser',\n  styleUrl: 'verdocs-file-chooser.scss',\n  shadow: false,\n})\nexport class VerdocsFileChooser {\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   * Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n   * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n   */\n  @Event({composed: true}) fileSelected: EventEmitter<{file: File | null}>;\n\n  @State() file: File | null;\n\n  handleFileChanged(e: any) {\n    this.file = e.target.files?.[0] || null;\n    this.fileSelected?.emit({file: this.file});\n    console.debug('[CHOOSER] Selected file', this.file);\n  }\n\n  handleSelectFile(e: any) {\n    e.stopPropagation();\n    this.file = null;\n    this.fileSelected?.emit({file: null});\n    document.getElementById('verdocs-file-chooser')?.click();\n  }\n\n  render() {\n    const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n    return (\n      <Host>\n        <input\n          type=\"file\"\n          multiple\n          id=\"verdocs-file-chooser\"\n          accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n          style={{display: 'none'}}\n          onChange={e => this.handleFileChanged(e)}\n        />\n\n        <div class=\"upload-box\">\n          {/*<div innerHTML={FileIcon} />*/}\n\n          <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n          <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n          <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-progress-bar {\n  font-family: $primary-font;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  .labels {\n    display: flex;\n    margin: 0 0 8px 0;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .label {\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin-right: 8px;\n      color: $verdocs-grey-1;\n    }\n  }\n\n  .bar {\n    display: flex;\n    flex: 0 0 10px;\n    border-radius: 5px;\n    background-color: $verdocs-bg-1;\n\n    .slider {\n      display: flex;\n      border-radius: 5px;\n      background-color: $verdocs-green;\n    }\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Display a simple progress bar in a style consistent with the design system.\n *\n * ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n */\n@Component({\n  tag: 'verdocs-progress-bar',\n  styleUrl: 'verdocs-progress-bar.scss',\n  shadow: false,\n})\nexport class VerdocsProgressBar {\n  /**\n   * Optional label to display above the bar\n   */\n  @Prop() label: string = '';\n\n  /**\n   * If true, the progress percentage will be displayed above the bar.\n   */\n  @Prop() showPercent: boolean = false;\n\n  /**\n   * The current progress value (0-100)\n   */\n  @Prop() percent: number = 0;\n\n  render() {\n    const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);\n    console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n    return (\n      <Host>\n        <div class=\"labels\">\n          {this.label && <div class=\"label\">{this.label}</div>}\n          {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n        </div>\n\n        <div class=\"bar\">\n          <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;MAAA,MAAM,qBAAqB,GAAG,45BAA45B;;YCiB76B,kBAAkB,mCAAA,MAAA;MAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAME;;MAEG;MACK,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE;MAiDjE;MAvCC,IAAA,iBAAiB,CAAC,CAAM,EAAA;;MACtB,QAAA,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,CAAC,KAAI,IAAI;MACvC,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;cAC1C,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,IAAI,CAAC,IAAI,CAAC;;MAGrD,IAAA,gBAAgB,CAAC,CAAM,EAAA;;cACrB,CAAC,CAAC,eAAe,EAAE;MACnB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;MAChB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC;MACrC,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;;UAG1D,MAAM,GAAA;MACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,yBAAyB,GAAG,kCAAkC;MAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,QAAQ,EACR,IAAA,EAAA,EAAE,EAAC,sBAAsB,EACzB,MAAM,EAAC,4HAA4H,EACnI,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EACxB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACxC,CAAA,EAEF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAGrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAO,EAEtF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAAE,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,sBAAsB,CAAO,EAE/E,CAAgB,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAI,CAAA,CACvF,CACD;;;;;MCnEb,MAAM,qBAAqB,GAAG,ulCAAulC;;YCcxmC,kBAAkB,mCAAA,MAAA;MAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;MAME;;MAEG;MACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;MAE1B;;MAEG;MACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;MAEpC;;MAEG;MACK,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;MAmB5B;UAjBC,MAAM,GAAA;cACJ,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC;cACzE,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;cAE9H,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAChB,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EACnD,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,OAAO,MAAQ,CACzD,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,EAAG,YAAY,CAAA,CAAA,CAAG,EAAC,GAAQ,CAC1D,CACD;;;;;;;;;;;"}
+{"version":3,"file":"p-Bf1JxkHa.system.js","sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n  display: flex;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n\n  .upload-box {\n    text-align: center;\n    box-sizing: border-box;\n    padding: 40px 15px;\n    //padding: 44px 18px 66px;\n    color: rgba(0, 0, 0, 0.54);\n\n    svg {\n      width: 64px;\n      height: 64px;\n      fill: #5c6575;\n    }\n  }\n\n  .selected-filename {\n    font-size: 20px;\n    //margin-top: 20px;\n    font-weight: bold;\n    overflow-wrap: anywhere;\n  }\n\n  .or-prefer {\n    height: 20px;\n    margin: 20px 0;\n    font-size: 16px;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/**\n * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n *\n * ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n */\n@Component({\n  tag: 'verdocs-file-chooser',\n  styleUrl: 'verdocs-file-chooser.scss',\n  shadow: false,\n})\nexport class VerdocsFileChooser {\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   * Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n   * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n   */\n  @Event({composed: true}) fileSelected: EventEmitter<{file: File | null}>;\n\n  @State() file: File | null;\n\n  handleFileChanged(e: any) {\n    this.file = e.target.files?.[0] || null;\n    this.fileSelected?.emit({file: this.file});\n    console.debug('[CHOOSER] Selected file', this.file);\n  }\n\n  handleSelectFile(e: any) {\n    e.stopPropagation();\n    this.file = null;\n    this.fileSelected?.emit({file: null});\n    document.getElementById('verdocs-file-chooser')?.click();\n  }\n\n  render() {\n    const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n    return (\n      <Host>\n        <input\n          type=\"file\"\n          multiple\n          id=\"verdocs-file-chooser\"\n          accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n          style={{display: 'none'}}\n          onChange={e => this.handleFileChanged(e)}\n        />\n\n        <div class=\"upload-box\">\n          {/*<div innerHTML={FileIcon} />*/}\n\n          <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n          <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n          <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-progress-bar {\n  font-family: $primary-font;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  .labels {\n    display: flex;\n    margin: 0 0 8px 0;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .label {\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin-right: 8px;\n      color: $verdocs-grey-1;\n    }\n  }\n\n  .bar {\n    display: flex;\n    flex: 0 0 10px;\n    border-radius: 5px;\n    background-color: $verdocs-bg-1;\n\n    .slider {\n      display: flex;\n      border-radius: 5px;\n      background-color: $verdocs-green;\n    }\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Display a simple progress bar in a style consistent with the design system.\n *\n * ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n */\n@Component({\n  tag: 'verdocs-progress-bar',\n  styleUrl: 'verdocs-progress-bar.scss',\n  shadow: false,\n})\nexport class VerdocsProgressBar {\n  /**\n   * Optional label to display above the bar\n   */\n  @Prop() label: string = '';\n\n  /**\n   * If true, the progress percentage will be displayed above the bar.\n   */\n  @Prop() showPercent: boolean = false;\n\n  /**\n   * The current progress value (0-100)\n   */\n  @Prop() percent: number = 0;\n\n  render() {\n    const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);\n    console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n    return (\n      <Host>\n        <div class=\"labels\">\n          {this.label && <div class=\"label\">{this.label}</div>}\n          {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n        </div>\n\n        <div class=\"bar\">\n          <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/verdocs-web-sdk/{p-DjDnOHB1.system.js.map → p-Bfjmk6kM.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-DjDnOHB1.system.js","sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipientFromTemplate, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build\n *   templateId={TEMPLATE_ID} step=\"preview\"\n *   onSend={({detail}) => { console.log('Sent envelope from template', detail) }}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }}\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\n\n  /**\n   * Event fired if the user clicks Cancel.\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        this.loading = false;\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\n      Store.subscribe(\n        'templates',\n        this.templateId,\n        () => getTemplate(this.endpoint, this.templateId),\n        false,\n        (template: ITemplate) => {\n          this.template = template;\n          this.loading = false;\n        },\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n    this.cancel?.emit();\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && <verdocs-template-settings templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-Bfjmk6kM.system.js","sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipientFromTemplate, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build\n *   templateId={TEMPLATE_ID} step=\"preview\"\n *   onSend={({detail}) => { console.log('Sent envelope from template', detail) }}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }}\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\n\n  /**\n   * Event fired if the user clicks Cancel.\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        this.loading = false;\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\n      Store.subscribe(\n        'templates',\n        this.templateId,\n        () => getTemplate(this.endpoint, this.templateId),\n        false,\n        (template: ITemplate) => {\n          this.template = template;\n          this.loading = false;\n        },\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n    this.cancel?.emit();\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && <verdocs-template-settings templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/verdocs-web-sdk/{p-CsthwGbE.system.js.map → p-C-KROPlf.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-CsthwGbE.system.js","sources":["src/components/templates/verdocs-template-tags/verdocs-template-tags.scss?tag=verdocs-template-tags","src/components/templates/verdocs-template-tags/verdocs-template-tags.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-tags {\n  font-family: $primary-font;\n\n  span {\n    margin: 0 4px;\n    height: 28px;\n    font-size: 12px;\n    font-weight: 600;\n    padding: 5px 12px 7px;\n    border-radius: 5px;\n    display: inline-block;\n    box-sizing: border-box;\n    text-transform: uppercase;\n    color: $label-color;\n    border: 1px solid $border-color;\n    background-color: $container-bg;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Displays a message listing a template's tags.\n */\n@Component({\n  tag: 'verdocs-template-tags',\n  styleUrl: 'verdocs-template-tags.scss',\n})\nexport class VerdocsTemplateTags {\n  /**\n   * The tags to display\n   */\n  @Prop() tags: any[];\n\n  render() {\n    return (\n      <Host>\n        {this.tags?.map(tag => (\n          <span>{tag}</span>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,sBAAsB,GAAG,0pBAA0pB;;YCS5qB,mBAAmB,oCAAA,MAAA;;;;UAM9B,MAAM,GAAA;;cACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,MAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,GAAG,CAAC,GAAG,KACjB,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAQ,CACnB,CAAC,CACG;;;;;;;;;;;"}
+{"version":3,"file":"p-C-KROPlf.system.js","sources":["src/components/templates/verdocs-template-tags/verdocs-template-tags.scss?tag=verdocs-template-tags","src/components/templates/verdocs-template-tags/verdocs-template-tags.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-tags {\n  font-family: $primary-font;\n\n  span {\n    margin: 0 4px;\n    height: 28px;\n    font-size: 12px;\n    font-weight: 600;\n    padding: 5px 12px 7px;\n    border-radius: 5px;\n    display: inline-block;\n    box-sizing: border-box;\n    text-transform: uppercase;\n    color: $label-color;\n    border: 1px solid $border-color;\n    background-color: $container-bg;\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Displays a message listing a template's tags.\n */\n@Component({\n  tag: 'verdocs-template-tags',\n  styleUrl: 'verdocs-template-tags.scss',\n})\nexport class VerdocsTemplateTags {\n  /**\n   * The tags to display\n   */\n  @Prop() tags: any[];\n\n  render() {\n    return (\n      <Host>\n        {this.tags?.map(tag => (\n          <span>{tag}</span>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,sBAAsB,GAAG,0pBAA0pB;;YCS5qB,mBAAmB,oCAAA,MAAA;;;;UAM9B,MAAM,GAAA;;cACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,MAAA,IAAI,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,GAAG,CAAC,GAAG,KACjB,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAQ,CACnB,CAAC,CACG;;;;;;;;;;;"}

package/dist/verdocs-web-sdk/{p-CJpYF1nP.system.js.map → p-C-Q0RpYH.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-CJpYF1nP.system.js","sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-envelope-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-envelope-document-page',\n  styleUrl: 'verdocs-envelope-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the envelope the document is for.\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  @Prop() type: 'original' | 'filled' | 'certificate' = 'original';\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-envelope-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n  // componentDidRender() {\n  //   this.notifyRenderedSize();\n  // }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale: this.renderedWidth / this.virtualWidth,\n      yScale: this.renderedHeight / this.virtualHeight,\n    });\n  }\n\n  render() {\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-envelope-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-C-Q0RpYH.system.js","sources":["src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.scss?tag=verdocs-envelope-document-page","src/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-envelope-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getEnvelopeDocumentPageDisplayUri, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {throttle} from '../../../utils/utils';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-envelope-document-page',\n  styleUrl: 'verdocs-envelope-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsEnvelopeDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the envelope the document is for.\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-envelope-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-envelope-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-envelope-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  @Prop() type: 'original' | 'filled' | 'certificate' = 'original';\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-envelope-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  @State() pageDisplayUri = 'https://verdocs-public-assets.s3.amazonaws.com/page-loading-placeholder.png';\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getEnvelopeDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber, this.type);\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n  // componentDidRender() {\n  //   this.notifyRenderedSize();\n  // }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale: this.renderedWidth / this.virtualWidth,\n      yScale: this.renderedHeight / this.virtualHeight,\n    });\n  }\n\n  render() {\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-envelope-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-envelope-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/verdocs-web-sdk/{p-DoFYKh5S.system.js.map → p-CJgSdGDZ.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-DoFYKh5S.system.js","sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.6;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 320px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 16px 0;\n    color: $verdocs-grey-0;\n    border-bottom: 1px solid #cccccc;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Method, Prop} from '@stencil/core';\n\n/**\n * Display an icon button that triggers a drop-down panel that can display\n * arbitrary child content, such as metadata, forms, or other controls.\n *\n * ```ts\n *   <verdocs-button-panel .icon=${icon}>\n *     <h6>Field Settings</h6>\n *     <form>\n *     <p>\n *       <label>Field Name</label>\n *       <input type=\"text\" placeholder=\"Field Name...\" />\n *     </p>\n *     </form>\n *   </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  // Not marked as @State because it's not the thing that controls our rendering\n  showing = false;\n\n  @Method()\n  async showPanel() {\n    this.panelEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n    this.showing = true;\n\n    this.hiderEl = document.createElement('div');\n    this.hiderEl.id = 'verdocs-button-panel-hider';\n    this.hiderEl.style.zIndex = '100';\n    this.hiderEl.style.position = 'absolute';\n    this.hiderEl.style.top = '0px';\n    this.hiderEl.style.left = '0px';\n    this.hiderEl.style.right = '0px';\n    this.hiderEl.style.bottom = '0px';\n    this.hiderEl.onclick = (e: any) => {\n      e.stopPropagation();\n      this.toggle();\n    };\n    document.body.appendChild(this.hiderEl);\n  }\n\n  @Method()\n  async hidePanel() {\n    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {\n      el.removeAttribute('data-show');\n    });\n    document.getElementById('verdocs-button-panel-hider')?.remove();\n    this.showing = false;\n  }\n\n  @Method()\n  async toggle() {\n    if (this.showing) {\n      await this.hidePanel();\n    } else {\n      await this.showPanel();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"icon\"\n          innerHTML={this.icon}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            return this.toggle();\n          }}\n          ref={el => (this.iconEl = el)}\n        />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-tabs {\n  gap: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .tab {\n    display: flex;\n    color: #111111;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 5px 10px;\n    align-items: center;\n    text-transform: none;\n    justify-content: center;\n    border-bottom: 4px solid transparent;\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n\n    &.active {\n      color: #000000;\n      font-weight: 500;\n      border-bottom: 4px solid #654dcb;\n    }\n\n    &.disabled {\n      color: #aaaaaa;\n      cursor: default;\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter} from '@stencil/core';\n\nexport interface ITab {\n  id?: string;\n  label: string;\n  disabled?: boolean;\n  // TODO: Tooltips?\n}\n\n/**\n * Display a simple row of selectable tabs. This is a controlled element.\n * The parent must adjust selectedTab as selection events are fired.\n *\n * ```ts\n * <verdocs-tabs tabs={[...tabs]} />\n * ```\n */\n@Component({\n  tag: 'verdocs-tabs',\n  styleUrl: 'verdocs-tabs.scss',\n})\nexport class VerdocsTabs {\n  /**\n   * The tabs to display\n   */\n  @Prop() tabs: ITab[] = [];\n\n  /**\n   * The index of the tab to show selected.\n   */\n  @Prop() selectedTab: number = 0;\n\n  /**\n   * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\n   * to the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.\n   */\n  @Event({composed: true}) selectTab: EventEmitter<{tab: ITab; index: number}>;\n\n  handleSelectTab(index: number) {\n    this.selectTab?.emit({tab: this.tabs[index], index});\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab, index) => (\n          <div class={`tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`} onClick={tab.disabled ? () => {} : () => this.handleSelectTab(index)}>\n            {tab.label}\n          </div>\n        ))}\n\n        <div class=\"flex flex-1\" />\n\n        <slot>\n          <div />\n        </slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-CJgSdGDZ.system.js","sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.6;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 320px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 16px 0;\n    color: $verdocs-grey-0;\n    border-bottom: 1px solid #cccccc;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Method, Prop} from '@stencil/core';\n\n/**\n * Display an icon button that triggers a drop-down panel that can display\n * arbitrary child content, such as metadata, forms, or other controls.\n *\n * ```ts\n *   <verdocs-button-panel .icon=${icon}>\n *     <h6>Field Settings</h6>\n *     <form>\n *     <p>\n *       <label>Field Name</label>\n *       <input type=\"text\" placeholder=\"Field Name...\" />\n *     </p>\n *     </form>\n *   </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  // Not marked as @State because it's not the thing that controls our rendering\n  showing = false;\n\n  @Method()\n  async showPanel() {\n    this.panelEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n    this.showing = true;\n\n    this.hiderEl = document.createElement('div');\n    this.hiderEl.id = 'verdocs-button-panel-hider';\n    this.hiderEl.style.zIndex = '100';\n    this.hiderEl.style.position = 'absolute';\n    this.hiderEl.style.top = '0px';\n    this.hiderEl.style.left = '0px';\n    this.hiderEl.style.right = '0px';\n    this.hiderEl.style.bottom = '0px';\n    this.hiderEl.onclick = (e: any) => {\n      e.stopPropagation();\n      this.toggle();\n    };\n    document.body.appendChild(this.hiderEl);\n  }\n\n  @Method()\n  async hidePanel() {\n    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {\n      el.removeAttribute('data-show');\n    });\n    document.getElementById('verdocs-button-panel-hider')?.remove();\n    this.showing = false;\n  }\n\n  @Method()\n  async toggle() {\n    if (this.showing) {\n      await this.hidePanel();\n    } else {\n      await this.showPanel();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"icon\"\n          innerHTML={this.icon}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            return this.toggle();\n          }}\n          ref={el => (this.iconEl = el)}\n        />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-tabs {\n  gap: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .tab {\n    display: flex;\n    color: #111111;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 5px 10px;\n    align-items: center;\n    text-transform: none;\n    justify-content: center;\n    border-bottom: 4px solid transparent;\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n\n    &.active {\n      color: #000000;\n      font-weight: 500;\n      border-bottom: 4px solid #654dcb;\n    }\n\n    &.disabled {\n      color: #aaaaaa;\n      cursor: default;\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter} from '@stencil/core';\n\nexport interface ITab {\n  id?: string;\n  label: string;\n  disabled?: boolean;\n  // TODO: Tooltips?\n}\n\n/**\n * Display a simple row of selectable tabs. This is a controlled element.\n * The parent must adjust selectedTab as selection events are fired.\n *\n * ```ts\n * <verdocs-tabs tabs={[...tabs]} />\n * ```\n */\n@Component({\n  tag: 'verdocs-tabs',\n  styleUrl: 'verdocs-tabs.scss',\n})\nexport class VerdocsTabs {\n  /**\n   * The tabs to display\n   */\n  @Prop() tabs: ITab[] = [];\n\n  /**\n   * The index of the tab to show selected.\n   */\n  @Prop() selectedTab: number = 0;\n\n  /**\n   * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\n   * to the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.\n   */\n  @Event({composed: true}) selectTab: EventEmitter<{tab: ITab; index: number}>;\n\n  handleSelectTab(index: number) {\n    this.selectTab?.emit({tab: this.tabs[index], index});\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab, index) => (\n          <div class={`tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`} onClick={tab.disabled ? () => {} : () => this.handleSelectTab(index)}>\n            {tab.label}\n          </div>\n        ))}\n\n        <div class=\"flex flex-1\" />\n\n        <slot>\n          <div />\n        </slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}