@verdocs/web-sdk 5.0.43 → 5.0.45

package/dist/components/{p-43b8738f.js → p-6507fba9.js}

@@ -5,10 +5,10 @@ import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
 import { d as defineCustomElement$6 } from './p-f5ccf125.js';
 import { d as defineCustomElement$5 } from './p-39480096.js';
-import { d as defineCustomElement$4 } from './p-57db7635.js';
-import { d as defineCustomElement$3 } from './p-f7dc9e74.js';
-import { d as defineCustomElement$2 } from './p-081465e0.js';
-import { d as defineCustomElement$1 } from './p-44e14cb9.js';
+import { d as defineCustomElement$4 } from './p-ec06fbd7.js';
+import { d as defineCustomElement$3 } from './p-7f6c97d5.js';
+import { d as defineCustomElement$2 } from './p-ed777fb7.js';
+import { d as defineCustomElement$1 } from './p-2985ae11.js';
 
 const verdocsTemplateAttachmentsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
 const VerdocsTemplateAttachmentsStyle0 = verdocsTemplateAttachmentsCss;
@@ -225,4 +225,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateAttachments as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-43b8738f.js.map
+//# sourceMappingURL=p-6507fba9.js.map

package/dist/components/{p-43b8738f.js.map → p-6507fba9.js.map}

@@ -1 +1 @@
-{"file":"p-43b8738f.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-attachments/verdocs-template-attachments.scss?tag=verdocs-template-attachments","src/components/templates/verdocs-template-attachments/verdocs-template-attachments.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-attachments {\n  font-family: $verdocs-primary-font;\n\n  h5 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 10px 0;\n    color: $verdocs-grey-blue;\n  }\n\n  .attachments {\n    margin: 0 0 40px 0;\n  }\n\n  .attachment {\n    display: flex;\n    padding: 5px 0;\n    column-gap: 15px;\n    align-items: center;\n    flex-direction: row;\n    color: $label-color;\n\n    &:hover {\n      .trash-icon {\n        display: flex;\n      }\n\n      .pages {\n        display: none;\n      }\n    }\n  }\n\n  svg {\n    width: 28px;\n    height: 28px;\n    fill: $verdocs-bg-4;\n    margin: 2px 0 0 0;\n  }\n\n  .file-icon {\n    flex: 0;\n  }\n\n  .pages {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n    padding-left: 4px;\n    position: relative;\n    margin: -10px 0 0 0;\n\n    .pages-icon {\n      top: 0;\n      left: 0;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n    }\n\n    .count {\n      top: 11px;\n      left: 7px;\n      z-index: 1;\n      width: 18px;\n      font-size: 12px;\n      font-weight: 500;\n      position: absolute;\n      text-align: center;\n      letter-spacing: -2px;\n    }\n  }\n\n  .filename {\n    flex: 1;\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    border-bottom: 1px dotted #cccccc;\n  }\n\n  .trash-icon {\n    flex: 0;\n    display: none;\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  verdocs-file-chooser {\n    margin: 10px 0;\n    border: 2px dashed #979797;\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {Component, h, Event, EventEmitter, Prop, Host, State} from '@stencil/core';\nimport {createTemplateDocument, deleteTemplateDocument, getTemplate, ITemplate, ITemplateDocument, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon} from '../../../utils/Icons';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an edit form that allows the user to view, add, or remove a template's attachments.\n * Note that an active session and valid template ID must be supplied.\n */\n@Component({\n  tag: 'verdocs-template-attachments',\n  styleUrl: 'verdocs-template-attachments.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateAttachments {\n  private templateListenerId = null;\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 template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user clicks the next button.\n   */\n  @Event({composed: true}) next: EventEmitter<{template: ITemplate}>;\n\n  /**\n   * Event fired when the user updates the template.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: 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  @State() uploading = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() showDeleteError = false;\n  @State() confirmDeleteDocument: ITemplateDocument | null = null;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\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  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  handleUploadProgress(percent: number) {\n    if (percent >= 99) {\n      this.progressPercent = 100;\n      this.progressLabel = 'Processing...';\n    } else {\n      this.progressPercent = percent;\n    }\n  }\n\n  async handleUpload(e) {\n    e.stopPropagation();\n\n    const file = e.detail.file as File;\n    if (!file) {\n      return;\n    }\n\n    console.log('[ATTACHMENTS] Uploading...', file);\n\n    this.uploading = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));\n      console.log('[ATTACHMENTS] Created attachment', template);\n\n      // TODO: Just updated it in place.\n      this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n      console.log('[ATTACHMENTS] Updated template', this.template);\n\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'attachments'});\n\n      this.uploading = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[ATTACHMENTS] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.uploading = false;\n    }\n  }\n\n  handleNext(e: any) {\n    e.stopPropagation();\n    this.uploading = false;\n    this.progressLabel = '';\n    this.progressPercent = 0;\n    this.next?.emit({template: this.template});\n  }\n\n  async confirmDelete() {\n    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);\n    // TODO: Update it in place\n    this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n    console.log('[ATTACHMENTS] New template', this.template);\n    this.confirmDeleteDocument = null;\n  }\n\n  async handleDelete(document: ITemplateDocument) {\n    if ((this.template?.documents || []).length > 1) {\n      this.confirmDeleteDocument = document;\n    } else {\n      this.showDeleteError = true;\n    }\n  }\n\n  getFileIcon(document: ITemplateDocument) {\n    switch (document.mime) {\n      case 'application/pdf':\n        return PdfIcon;\n      case 'image/jpeg':\n        return JpgIcon;\n      case 'image/png':\n        return PngIcon;\n      case 'application/msword':\n      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':\n        return DocIcon;\n    }\n\n    return FileIcon;\n  }\n\n  render() {\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    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.\n    if (!this.endpoint.session || !this.template) {\n      return <Host class=\"empty\" />;\n    }\n\n    return (\n      <Host>\n        <h5>Existing Attachments</h5>\n\n        <div class=\"attachments\">\n          {(this.template?.documents || []).map(document => (\n            <div class=\"attachment\">\n              <div class=\"file-icon\" innerHTML={this.getFileIcon(document)} />\n              <div class=\"filename\" title={document.name}>\n                {document.name}\n              </div>\n              <div class=\"pages\">\n                <div class=\"count\">{document.pages}</div>\n                <div class=\"pages-icon\" innerHTML={PageCountIcon} />\n              </div>\n              <div class=\"trash-icon\" innerHTML={TrashIcon} onClick={() => this.handleDelete(document)} />\n            </div>\n          ))}\n        </div>\n\n        <h5>Attach a New Document</h5>\n\n        {this.uploading ? (\n          <div class=\"loader-wrapper\">\n            <verdocs-loader />\n\n            {this.progressLabel && (\n              <div class=\"progress-wrapper\">\n                <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n              </div>\n            )}\n          </div>\n        ) : (\n          <verdocs-file-chooser onFileSelected={e => this.handleUpload(e)} />\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.uploading} />\n          <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleNext(e)} disabled={!(this.template?.documents || []).length || this.uploading} />\n        </div>\n\n        {this.showDeleteError && (\n          <verdocs-ok-dialog heading=\"Unable to Delete Attachment\" message=\"Templates must contain at least one attachment.\" onNext={() => (this.showDeleteError = false)} />\n        )}\n\n        {this.confirmDeleteDocument && (\n          <verdocs-ok-dialog\n            heading=\"Delete this Attachment?\"\n            message=\"This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.\"\n            onNext={() => this.confirmDelete()}\n            showCancel={true}\n            onExit={() => {\n              this.confirmDeleteDocument = null;\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-6507fba9.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-attachments/verdocs-template-attachments.scss?tag=verdocs-template-attachments","src/components/templates/verdocs-template-attachments/verdocs-template-attachments.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-attachments {\n  font-family: $verdocs-primary-font;\n\n  h5 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 10px 0;\n    color: $verdocs-grey-blue;\n  }\n\n  .attachments {\n    margin: 0 0 40px 0;\n  }\n\n  .attachment {\n    display: flex;\n    padding: 5px 0;\n    column-gap: 15px;\n    align-items: center;\n    flex-direction: row;\n    color: $label-color;\n\n    &:hover {\n      .trash-icon {\n        display: flex;\n      }\n\n      .pages {\n        display: none;\n      }\n    }\n  }\n\n  svg {\n    width: 28px;\n    height: 28px;\n    fill: $verdocs-bg-4;\n    margin: 2px 0 0 0;\n  }\n\n  .file-icon {\n    flex: 0;\n  }\n\n  .pages {\n    width: 24px;\n    height: 24px;\n    flex: 0 0 24px;\n    padding-left: 4px;\n    position: relative;\n    margin: -10px 0 0 0;\n\n    .pages-icon {\n      top: 0;\n      left: 0;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n    }\n\n    .count {\n      top: 11px;\n      left: 7px;\n      z-index: 1;\n      width: 18px;\n      font-size: 12px;\n      font-weight: 500;\n      position: absolute;\n      text-align: center;\n      letter-spacing: -2px;\n    }\n  }\n\n  .filename {\n    flex: 1;\n    display: block;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    border-bottom: 1px dotted #cccccc;\n  }\n\n  .trash-icon {\n    flex: 0;\n    display: none;\n\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  verdocs-file-chooser {\n    margin: 10px 0;\n    border: 2px dashed #979797;\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {Component, h, Event, EventEmitter, Prop, Host, State} from '@stencil/core';\nimport {createTemplateDocument, deleteTemplateDocument, getTemplate, ITemplate, ITemplateDocument, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon} from '../../../utils/Icons';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an edit form that allows the user to view, add, or remove a template's attachments.\n * Note that an active session and valid template ID must be supplied.\n */\n@Component({\n  tag: 'verdocs-template-attachments',\n  styleUrl: 'verdocs-template-attachments.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateAttachments {\n  private templateListenerId = null;\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 template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user clicks the next button.\n   */\n  @Event({composed: true}) next: EventEmitter<{template: ITemplate}>;\n\n  /**\n   * Event fired when the user updates the template.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: 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  @State() uploading = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() showDeleteError = false;\n  @State() confirmDeleteDocument: ITemplateDocument | null = null;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\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  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  handleUploadProgress(percent: number) {\n    if (percent >= 99) {\n      this.progressPercent = 100;\n      this.progressLabel = 'Processing...';\n    } else {\n      this.progressPercent = percent;\n    }\n  }\n\n  async handleUpload(e) {\n    e.stopPropagation();\n\n    const file = e.detail.file as File;\n    if (!file) {\n      return;\n    }\n\n    console.log('[ATTACHMENTS] Uploading...', file);\n\n    this.uploading = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));\n      console.log('[ATTACHMENTS] Created attachment', template);\n\n      // TODO: Just updated it in place.\n      this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n      console.log('[ATTACHMENTS] Updated template', this.template);\n\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'attachments'});\n\n      this.uploading = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[ATTACHMENTS] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.uploading = false;\n    }\n  }\n\n  handleNext(e: any) {\n    e.stopPropagation();\n    this.uploading = false;\n    this.progressLabel = '';\n    this.progressPercent = 0;\n    this.next?.emit({template: this.template});\n  }\n\n  async confirmDelete() {\n    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);\n    // TODO: Update it in place\n    this.template = await Store.getTemplate(this.endpoint, this.templateId, true);\n    console.log('[ATTACHMENTS] New template', this.template);\n    this.confirmDeleteDocument = null;\n  }\n\n  async handleDelete(document: ITemplateDocument) {\n    if ((this.template?.documents || []).length > 1) {\n      this.confirmDeleteDocument = document;\n    } else {\n      this.showDeleteError = true;\n    }\n  }\n\n  getFileIcon(document: ITemplateDocument) {\n    switch (document.mime) {\n      case 'application/pdf':\n        return PdfIcon;\n      case 'image/jpeg':\n        return JpgIcon;\n      case 'image/png':\n        return PngIcon;\n      case 'application/msword':\n      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':\n        return DocIcon;\n    }\n\n    return FileIcon;\n  }\n\n  render() {\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    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.\n    if (!this.endpoint.session || !this.template) {\n      return <Host class=\"empty\" />;\n    }\n\n    return (\n      <Host>\n        <h5>Existing Attachments</h5>\n\n        <div class=\"attachments\">\n          {(this.template?.documents || []).map(document => (\n            <div class=\"attachment\">\n              <div class=\"file-icon\" innerHTML={this.getFileIcon(document)} />\n              <div class=\"filename\" title={document.name}>\n                {document.name}\n              </div>\n              <div class=\"pages\">\n                <div class=\"count\">{document.pages}</div>\n                <div class=\"pages-icon\" innerHTML={PageCountIcon} />\n              </div>\n              <div class=\"trash-icon\" innerHTML={TrashIcon} onClick={() => this.handleDelete(document)} />\n            </div>\n          ))}\n        </div>\n\n        <h5>Attach a New Document</h5>\n\n        {this.uploading ? (\n          <div class=\"loader-wrapper\">\n            <verdocs-loader />\n\n            {this.progressLabel && (\n              <div class=\"progress-wrapper\">\n                <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n              </div>\n            )}\n          </div>\n        ) : (\n          <verdocs-file-chooser onFileSelected={e => this.handleUpload(e)} />\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.uploading} />\n          <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleNext(e)} disabled={!(this.template?.documents || []).length || this.uploading} />\n        </div>\n\n        {this.showDeleteError && (\n          <verdocs-ok-dialog heading=\"Unable to Delete Attachment\" message=\"Templates must contain at least one attachment.\" onNext={() => (this.showDeleteError = false)} />\n        )}\n\n        {this.confirmDeleteDocument && (\n          <verdocs-ok-dialog\n            heading=\"Delete this Attachment?\"\n            message=\"This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.\"\n            onNext={() => this.confirmDelete()}\n            showCancel={true}\n            onExit={() => {\n              this.confirmDeleteDocument = null;\n            }}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-eb4bd2d6.js → p-71b30a91.js}

@@ -5,14 +5,14 @@ import { S as Store } from './p-33300e3a.js';
 import { d as defineCustomElement$b } from './p-f5ccf125.js';
 import { d as defineCustomElement$a } from './p-96774726.js';
 import { d as defineCustomElement$9 } from './p-39480096.js';
-import { d as defineCustomElement$8 } from './p-54e4bcee.js';
-import { d as defineCustomElement$7 } from './p-f7dc9e74.js';
-import { d as defineCustomElement$6 } from './p-081465e0.js';
-import { d as defineCustomElement$5 } from './p-ca16a8ac.js';
-import { d as defineCustomElement$4 } from './p-8af753b4.js';
-import { d as defineCustomElement$3 } from './p-4dbb9783.js';
-import { d as defineCustomElement$2 } from './p-08ddf0b4.js';
-import { d as defineCustomElement$1 } from './p-f776eeae.js';
+import { d as defineCustomElement$8 } from './p-d5eae4db.js';
+import { d as defineCustomElement$7 } from './p-7f6c97d5.js';
+import { d as defineCustomElement$6 } from './p-ed777fb7.js';
+import { d as defineCustomElement$5 } from './p-acb41a2e.js';
+import { d as defineCustomElement$4 } from './p-497ceba2.js';
+import { d as defineCustomElement$3 } from './p-c696e5d7.js';
+import { d as defineCustomElement$2 } from './p-a5c69199.js';
+import { d as defineCustomElement$1 } from './p-8e44cb14.js';
 
 const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
@@ -237,4 +237,4 @@ function defineCustomElement() {
 
 export { VerdocsFieldAttachment as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-eb4bd2d6.js.map
+//# sourceMappingURL=p-71b30a91.js.map

package/dist/components/{p-eb4bd2d6.js.map → p-71b30a91.js.map}

@@ -1 +1 @@
-{"file":"p-eb4bd2d6.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.disabled svg {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  .attach {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.required {\n    .attach {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: 1px;\n    left: -19px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, VerdocsEndpoint, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.dialogOpen = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-71b30a91.js","mappings":"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","names":[],"sources":["src/components/fields/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.disabled svg {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  .attach {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &.required {\n    .attach {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  verdocs-button-panel {\n    top: 1px;\n    left: -19px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, VerdocsEndpoint, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#339933\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\n    this.focused = true;\n    this.dialogOpen = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-d89157e9.js → p-728ec158.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
 import { randomString } from '@verdocs/js-sdk';
-import { d as defineCustomElement$1 } from './p-ca16a8ac.js';
+import { d as defineCustomElement$1 } from './p-acb41a2e.js';
 
 const verdocsDropdownCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-dropdown{height:26px;display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;text-wrap:nowrap;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
 const VerdocsDropdownStyle0 = verdocsDropdownCss;
@@ -66,4 +66,4 @@ function defineCustomElement() {
 
 export { VerdocsDropdown as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-d89157e9.js.map
+//# sourceMappingURL=p-728ec158.js.map

package/dist/components/{p-d89157e9.js.map → p-728ec158.js.map}

@@ -1 +1 @@
-{"file":"p-d89157e9.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,ihDAAihD,CAAC;AAC7iD,8BAAe,kBAAkB;;ACGjC,MAAM,aAAa,GAAG,iLAAiL,CAAC;MA6B3L,eAAe;IAJ5B;;;;;;;QAWU,YAAO,GAAkB,EAAE,CAAC;QAQ3B,gBAAW,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;QAE5E,eAAU,GAAG,KAAK,CAAC;KAqC7B;IAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB;;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,MAAM;QACJ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,oBAAoB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnD,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,gBAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAI,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,IACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM;YACtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBACjB,OAAO,WAAK,KAAK,EAAC,iCAAiC,GAAG,CAAC;aACxD;iBAAM;gBACL,QACE,cAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN,EACT;aACH;SACF,CAAC,CACa,CAClB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  &.open {\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></svg>`;\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-728ec158.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,ihDAAihD,CAAC;AAC7iD,8BAAe,kBAAkB;;ACGjC,MAAM,aAAa,GAAG,iLAAiL,CAAC;MA6B3L,eAAe;IAJ5B;;;;;;;QAWU,YAAO,GAAkB,EAAE,CAAC;QAQ3B,gBAAW,GAAG,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;QAE5E,eAAU,GAAG,KAAK,CAAC;KAqC7B;IAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB;;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,MAAM;QACJ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,oBAAoB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnD,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,gBAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,GAAI,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,IACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM;YACtB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBACjB,OAAO,WAAK,KAAK,EAAC,iCAAiC,GAAG,CAAC;aACxD;iBAAM;gBACL,QACE,cAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN,EACT;aACH;SACF,CAAC,CACa,CAClB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  &.open {\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></svg>`;\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-641e2cc0.js → p-73629a90.js}

@@ -7193,11 +7193,11 @@ const VerdocsStatusIndicator = /*@__PURE__*/ proxyCustomElement(class VerdocsSta
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: '0d3a55cf87f1a0dba7e235e3b3fb19b7b44e67f5', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '3111e544a8f287a2b5a501cae08fc88752186477', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '9d1812f322823609640bbdcde955123f4dfb294e', class: "icon", innerHTML: icon }), h("span", { key: '3db7a2eca6b3a6894a56daace7a367726feb508e', class: "content" }, statusMessage), h("div", { key: 'a0b31ee1a68c854dc781ba6fa729fbde485db23e', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '2eab9e497070e97fe917ccc76d7c43ab2ae508f7', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '2dd4397db22358d7dd8e495f601c3f31687e400e', class: "icon", innerHTML: icon }), h("span", { key: 'fb37993d036b1a1552f19fc2bc57565bf3026a44', class: "content" }, statusMessage), h("div", { key: '5bc4ea53d9eec94c0dfd34662437bf90aaf76d60', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'e073e793dc4f0bef2d9826fb5b70f62f2495fa45', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
     static get style() { return VerdocsStatusIndicatorStyle0; }
 }, [0, "verdocs-status-indicator", {
@@ -7224,4 +7224,4 @@ function defineCustomElement() {
 
 export { VerdocsStatusIndicator as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-641e2cc0.js.map
+//# sourceMappingURL=p-73629a90.js.map