@verdocs/web-sdk 6.5.0-beta.12 → 6.5.0-beta.15

package/dist/components/{p-D3fWzYW-.js.map → p-RIeHu5V1.js.map}

@@ -1 +1 @@
-{"file":"p-D3fWzYW-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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.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-RIeHu5V1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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.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-Cm1MIPkG.js → p-UPW-U544.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-CUAGH_8P.js';
-import { S as SettingsIcon } from './p-7LXbcjVz.js';
+import { S as SettingsIcon } from './p-Du758Jse.js';
 import { S as Store } from './p-bS8INhRF.js';
 import { d as defineCustomElement$9 } from './p-CfODrICH.js';
 import { d as defineCustomElement$8 } from './p-mThpW9TM.js';
@@ -190,6 +190,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsFieldCheckbox as V, defineCustomElement as d };
-//# sourceMappingURL=p-Cm1MIPkG.js.map
+//# sourceMappingURL=p-UPW-U544.js.map
 
-//# sourceMappingURL=p-Cm1MIPkG.js.map
+//# sourceMappingURL=p-UPW-U544.js.map

package/dist/components/{p-Cm1MIPkG.js.map → p-UPW-U544.js.map}

@@ -1 +1 @@
-{"file":"p-Cm1MIPkG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.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  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: var(--verdocs-field-radius);\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid var(--verdocs-required-field-border);\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\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\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * 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, 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, 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 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 the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = 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  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false, readonly = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, [signerClass]: true}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={readonly || disabled} required={required} />\n          <span />\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-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\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={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-UPW-U544.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.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  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: var(--verdocs-field-radius);\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid var(--verdocs-required-field-border);\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\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\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * 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, 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, 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 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 the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = 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  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false, readonly = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, [signerClass]: true}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={readonly || disabled} required={required} />\n          <span />\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-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\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={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-urGZIV9n.js → p-VPVigkt1.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-CUAGH_8P.js';
 import { D as DefaultEndpoint } from './p-C_Xku1v2.js';
-import { d as defineCustomElement$1 } from './p-D5_KiFFr.js';
+import { d as defineCustomElement$1 } from './p-CxLtKV1w.js';
 
 const verdocsDelegateDialogCss = "@-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-delegate-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-delegate-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-delegate-dialog .heading .icon{}verdocs-delegate-dialog .heading .icon svg{fill:var(--verdocs-dialog-icon-color, #ffffff)}verdocs-delegate-dialog{}verdocs-delegate-dialog .verdocs-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:16px;margin-bottom:24px}verdocs-delegate-dialog .verdocs-form-row{display:-ms-flexbox;display:flex;gap:16px;width:100%}verdocs-delegate-dialog .verdocs-form-row>*{-ms-flex:1;flex:1}verdocs-delegate-dialog .verdocs-form-label{font-size:13px;line-height:20px;font-weight:300;color:var(--verdocs-label-color, #616161);margin-bottom:2px;display:block}verdocs-delegate-dialog .verdocs-form-input{border:1px solid #d1d1d1;border-bottom-color:var(--verdocs-input-border-bottom-color, #d1d1d1);border-radius:4px;color:#707070;padding:8px 12px;font-size:14px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}verdocs-delegate-dialog .verdocs-form-input::-webkit-input-placeholder{color:#9ca3af}verdocs-delegate-dialog .verdocs-form-input::-moz-placeholder{color:#9ca3af}verdocs-delegate-dialog .verdocs-form-input:-ms-input-placeholder{color:#9ca3af}verdocs-delegate-dialog .verdocs-form-input::-ms-input-placeholder{color:#9ca3af}verdocs-delegate-dialog .verdocs-form-input::placeholder{color:#9ca3af}verdocs-delegate-dialog .verdocs-form-input:focus{outline:none;border-color:var(--verdocs-primary-color, #654dcb)}verdocs-delegate-dialog .buttons{gap:12px;display:-ms-flexbox;display:flex;margin-top:0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-delegate-dialog .buttons button{padding:8px 16px;height:40px;display:-ms-flexbox;display:flex;font-size:14px;font-weight:400;cursor:pointer;-ms-flex-align:center;align-items:center;border-radius:var(--verdocs-button-radius, 4px);-ms-flex-pack:center;justify-content:center;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}verdocs-delegate-dialog .buttons button.cancel{background-color:transparent;border:var(--verdocs-button-secondary-border, 1px solid #d1d5db);color:var(--verdocs-button-secondary-color, #374151)}verdocs-delegate-dialog .buttons button.proceed{background-color:var(--verdocs-primary-color, #55bc81);border:1px solid transparent;color:#ffffff}verdocs-delegate-dialog .buttons button.proceed:hover{background-color:var(--verdocs-primary-color-hover, #2b995b)}verdocs-delegate-dialog .buttons button:disabled{background-color:var(--verdocs-button-disabled-bg, #e5e7eb);color:var(--verdocs-button-disabled-color, #9ca3af);cursor:not-allowed}";
 
@@ -47,7 +47,7 @@ const VerdocsDelegateDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsDele
         });
     }
     render() {
-        return (h("verdocs-dialog", { key: '39860dabffeb4922c0ab466408e6a4ccf9ab136d' }, h("div", { key: 'c66abcbd720eebc64d37c0761fb43dfa847de344', slot: "heading", class: "heading" }, h("div", { key: '85b8f329483579a6f462ca3a1701c1dc2f072c8b', class: "icon" }, h("svg", { key: '4ea0b7e46c2cc13eccad3f46055c296b45224b40', width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'e60c4c7e7b3dd88a084ba513b1ccb151ccd9a288', "clip-path": "url(#clip0_34208_4881)" }, h("path", { key: '1628b68873ee129794fa8a5e41a0dad23c68bf9c', d: "M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z" })), h("defs", { key: '7066be4bbbfd4afc9e5f367951925f3611c56687' }, h("clipPath", { key: '9327b03dff7abaa3600c8381f56af10c043fa0f8', id: "clip0_34208_4881" }, h("path", { key: '03b065a5dd2677d806a114d29eb1dbfd5a42f5d3', d: "M0.875 0.75H21.125V18.75H0.875V0.75Z", fill: "white" }))))), h("div", { key: 'fe79eca43859bab5149adabfa4f1fddbce4c453c', class: "title" }, "Delegate Signing")), h("div", { key: 'c7512f467cc6ce5e007639ae5f98ee947cbfbaf1', slot: "content", class: "content" }, h("div", { key: '0c1e840986763224357d48813a8e64a026052f94', class: "verdocs-form" }, h("div", { key: 'f468c9f64fcbfd8bd832de05106c30001f6c865e', class: "verdocs-form-row" }, h("div", { key: '51c17fac898f8a884a847f8bb1176eb613cf7eb7', class: "field-group" }, h("label", { key: 'e596b12525ba429c69582635be7865fc5f32c771', htmlFor: "verdocs-delegate-first", class: "verdocs-form-label" }, "New Recipient*"), h("input", { key: '551ec3a60d08ec0a58b9260b796fb2d0a1fd5ef1', type: "text", id: "verdocs-delegate-first", name: "verdocs-delegate-first", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "First name", value: this.first_name, onInput: (e) => (this.first_name = e.target.value) })), h("div", { key: 'd47aa3522e31a29c66d3f5f4db2faaa15842eddd', class: "field-group" }, h("label", { key: '3acf46730462f8198aa227293b55d9c9c83bf77e', htmlFor: "verdocs-delegate-last", class: "verdocs-form-label" }, "\u00A0"), h("input", { key: '42121b2fa549b77d2cc272ff93d571f30f4a39a5', type: "text", id: "verdocs-delegate-last", name: "verdocs-delegate-last", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "Last name", value: this.last_name, onInput: (e) => (this.last_name = e.target.value) }))), h("div", { key: '55fa5dcc63e1801f6ece819ef175a16f7fcb527c' }, h("label", { key: 'a8ec3ea7517bc319359785f6bf990f3e030424d9', htmlFor: "verdocs-delegate-email", class: "verdocs-form-label" }, "Email Address*"), h("input", { key: '089d3791c71fd11991ea9968309236cb958c4f68', type: "text", id: "verdocs-delegate-email", name: "verdocs-delegate-email", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "New recipient email address", value: this.email, onInput: (e) => (this.email = e.target.value) })), h("div", { key: 'b217b432835b10cecd9a9ce5b4b2f66378b16c08' }, h("label", { key: 'ee0988af68b9c3b185006659928256e17b0513eb', htmlFor: "verdocs-delegate-phone", class: "verdocs-form-label" }, "Phone Number*"), h("input", { key: '81942700bb25d4a116d6114baf0a2b9d0bf6ee82', type: "text", id: "verdocs-delegate-phone", name: "verdocs-delegate-phone", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "Optional phone number", value: this.phone, onInput: (e) => (this.phone = e.target.value) })), h("div", { key: '808dd9e24fd4a808fd05d6a3628cf105b3565553' }, h("label", { key: '3eb478c3bb9e4decbb4875c372283c189a5e19b8', htmlFor: "verdocs-delegate-message", class: "verdocs-form-label" }, "Message (optional)"), h("textarea", { key: 'a1136cf1ef577e011a4c36d7747ed76a1da8dc2a', id: "verdocs-delegate-message", name: "verdocs-delegate-message", class: "verdocs-form-input", rows: 3, autocomplete: "blocked", placeholder: "Type message here...", onInput: (e) => (this.message = e.target.value) }, this.message)))), h("div", { key: 'd988d1bcfedb5f65fe43d674c7ce3f2c352cbe57', class: "footer", slot: "footer" }, h("div", { key: 'c5a0bcdf83a295662c96f08555cc7db7704d0f00', class: "buttons" }, h("button", { key: '199a55bdc87a0d1c89759b7908919cbc6cb8f1b3', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), h("button", { key: 'a43cd16603f6eec86eca897132aced0c725fd037', class: "proceed", onClick: () => this.handleDelegate(), disabled: !this.first_name || !this.last_name || !this.email }, "Delegate")))));
+        return (h("verdocs-dialog", { key: 'ba13ecc155bb843c98a9d8768b16ec5c4c1d371d' }, h("div", { key: '95ac7a62a85e1e6749da297a507c77d83b53cd3c', slot: "heading", class: "heading" }, h("div", { key: '1c927f72ada6f137617321aa72fa513e4f6e94c0', class: "icon" }, h("svg", { key: '4b36c1d368c193463d225e91f8c2f5321161a8ce', width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'b2b798c555b0c822bd70037f8d7822e19ed751bd', "clip-path": "url(#clip0_34208_4881)" }, h("path", { key: '98b7b44cd4a0ba118fe39d1c16482921777a764e', d: "M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z" })), h("defs", { key: '787596228bcc714055e52cdb7577ae6d9b158c47' }, h("clipPath", { key: 'c30f1096fb73275c5e096098ef0e076f18ffa137', id: "clip0_34208_4881" }, h("path", { key: '0a7a76bf76a4e5a2fa4ebd5b9b058dd98b2c218d', d: "M0.875 0.75H21.125V18.75H0.875V0.75Z", fill: "white" }))))), h("div", { key: '03555e4bc46cae9d8dfd3a2e2b94739d75f3932c', class: "title" }, "Delegate Signing")), h("div", { key: '16e14e947e7cad24fe9d9c6cfbb9921804340db0', slot: "content", class: "content" }, h("div", { key: 'c6cf1303be070f4b9fdf2d66c3ddcd9f96dee03e', class: "verdocs-form" }, h("div", { key: '3db901add742ee678c6a71de29b1feedd98eed88', class: "verdocs-form-row" }, h("div", { key: '6e0a498c42a06e39b4210bde2e6804aff5f77c25', class: "field-group" }, h("label", { key: 'dde423e5cf3b4e8779ec8d3f07ccf3aceb79bba0', htmlFor: "verdocs-delegate-first", class: "verdocs-form-label" }, "New Recipient*"), h("input", { key: '9fc5096acf857b2dcd3869d5624bf3e92a837ffe', type: "text", id: "verdocs-delegate-first", name: "verdocs-delegate-first", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "First name", value: this.first_name, onInput: (e) => (this.first_name = e.target.value) })), h("div", { key: '518296ccd696fb4cc4f5e346d59b9311925389bb', class: "field-group" }, h("label", { key: '31b2d88d23102213843e12f402c8790aa721f04f', htmlFor: "verdocs-delegate-last", class: "verdocs-form-label" }, "\u00A0"), h("input", { key: '541aba386a12c2633173835038f06c215f8884fa', type: "text", id: "verdocs-delegate-last", name: "verdocs-delegate-last", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "Last name", value: this.last_name, onInput: (e) => (this.last_name = e.target.value) }))), h("div", { key: 'f41b0bf11819e8c07c251565de14c1f8f6bfd4c5' }, h("label", { key: 'b44d558f6c0f7caeadfd51b3e86c30c38487e377', htmlFor: "verdocs-delegate-email", class: "verdocs-form-label" }, "Email Address*"), h("input", { key: 'ef443da2122be9f09bf0a4bf9664eebe4f9d31d4', type: "text", id: "verdocs-delegate-email", name: "verdocs-delegate-email", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "New recipient email address", value: this.email, onInput: (e) => (this.email = e.target.value) })), h("div", { key: '2eba8ca2d67a72f0fbc0127f1b85a09ab35727cf' }, h("label", { key: '5ea8a29edb1da249d4c80a6b9a51a5bb531a1415', htmlFor: "verdocs-delegate-phone", class: "verdocs-form-label" }, "Phone Number*"), h("input", { key: '0e2fe53edb93638ac0fadf8c152a41a837772d3b', type: "text", id: "verdocs-delegate-phone", name: "verdocs-delegate-phone", class: "verdocs-form-input", autocomplete: "blocked", placeholder: "Optional phone number", value: this.phone, onInput: (e) => (this.phone = e.target.value) })), h("div", { key: '708c478736f2dabdca15b461ab708f61c4392bfc' }, h("label", { key: '410be9a8f6a3089cd157cc4fce144db44a55c654', htmlFor: "verdocs-delegate-message", class: "verdocs-form-label" }, "Message (optional)"), h("textarea", { key: 'e048e656c46fe435b80dc2eeed6f1837292fadaf', id: "verdocs-delegate-message", name: "verdocs-delegate-message", class: "verdocs-form-input", rows: 3, autocomplete: "blocked", placeholder: "Type message here...", onInput: (e) => (this.message = e.target.value) }, this.message)))), h("div", { key: '6bdc7cf1b8b1a131d43c1b1e36e72b3df2eff495', class: "footer", slot: "footer" }, h("div", { key: '10d7a92d94f45c75500ac4c9ecfd5a09bda17099', class: "buttons" }, h("button", { key: '147a2bd25684b9c920c4b612cdd192f76bbae013', class: "cancel", onClick: () => this.handleCancel() }, "Cancel"), h("button", { key: 'a76e39a7776aa3e277a5d337675d856019cbdce3', class: "proceed", onClick: () => this.handleDelegate(), disabled: !this.first_name || !this.last_name || !this.email }, "Delegate")))));
     }
     static get style() { return verdocsDelegateDialogCss; }
 }, [256, "verdocs-delegate-dialog", {
@@ -79,6 +79,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsDelegateDialog as V, defineCustomElement as d };
-//# sourceMappingURL=p-urGZIV9n.js.map
+//# sourceMappingURL=p-VPVigkt1.js.map
 
-//# sourceMappingURL=p-urGZIV9n.js.map
+//# sourceMappingURL=p-VPVigkt1.js.map

package/dist/components/{p-urGZIV9n.js.map → p-VPVigkt1.js.map}

@@ -1 +1 @@
-{"file":"p-urGZIV9n.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-delegate-dialog/verdocs-delegate-dialog.scss?tag=verdocs-delegate-dialog","src/components/dialogs/verdocs-delegate-dialog/verdocs-delegate-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-delegate-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading .icon {\n    /* Ensure the icon takes the variable color. The SVG inside should use fill: currentColor or just inherit/use fill: var(...) if set here */\n    svg {\n      fill: var(--verdocs-dialog-icon-color, #ffffff);\n    }\n  }\n\n  /* New Form Layout Classes */\n  .verdocs-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .verdocs-form-row {\n    display: flex;\n    gap: 16px;\n    width: 100%;\n\n    > * {\n      flex: 1;\n    }\n  }\n\n  .verdocs-form-label {\n    font-size: 13px;\n    line-height: 20px;\n    font-weight: 300;\n    color: var(--verdocs-label-color, #616161);\n    margin-bottom: 2px;\n    display: block;\n  }\n\n  .verdocs-form-input {\n    border: 1px solid #d1d1d1;\n    border-bottom-color: var(--verdocs-input-border-bottom-color, #d1d1d1);\n    border-radius: 4px;\n    color: #707070;\n    padding: 8px 12px;\n    font-size: 14px;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: inherit;\n\n    &::placeholder {\n      color: #9ca3af;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: var(--verdocs-primary-color, $verdocs-purple);\n    }\n  }\n\n  .buttons {\n    gap: 12px;\n    display: flex;\n    margin-top: 0;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    button {\n      padding: 8px 16px;\n      height: 40px;\n      display: flex;\n      font-size: 14px;\n      font-weight: 400;\n      cursor: pointer;\n      align-items: center;\n      border-radius: var(--verdocs-button-radius, 4px);\n      justify-content: center;\n      transition: all 0.2s ease;\n\n      &.cancel {\n        background-color: transparent;\n        border: var(--verdocs-button-secondary-border, 1px solid #d1d5db);\n        color: var(--verdocs-button-secondary-color, #374151);\n      }\n\n      &.proceed {\n        background-color: var(--verdocs-primary-color, $verdocs-green);\n        border: 1px solid transparent;\n        color: #ffffff;\n\n        &:hover {\n          background-color: var(--verdocs-primary-color-hover, $verdocs-green-shade);\n        }\n      }\n\n      &:disabled {\n        background-color: var(--verdocs-button-disabled-bg, #e5e7eb);\n        color: var(--verdocs-button-disabled-color, #9ca3af);\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import {IEnvelope, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, State} from '@stencil/core';\nimport {DefaultEndpoint} from '../../../utils/Environment';\n\n/**\n * Delegate signing responsibility to another recipient.\n */\n@Component({\n  tag: 'verdocs-delegate-dialog',\n  styleUrl: 'verdocs-delegate-dialog.scss',\n})\nexport class VerdocsDelegateDialog {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop({mutable: true}) endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The envelope to process.\n   */\n  @Prop() envelope: IEnvelope | null = null;\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 process has completed successfully.\n   */\n  @Event({composed: true}) next: EventEmitter<{first_name: string; last_name: string; email: string; phone: string; message: string}>;\n\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() message = '';\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDelegate() {\n    this.next.emit({\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n    });\n  }\n\n  render() {\n    return (\n      <verdocs-dialog>\n        <div slot=\"heading\" class=\"heading\">\n          <div class=\"icon\">\n            <svg width=\"22\" height=\"19\" viewBox=\"0 0 22 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_34208_4881)\">\n                <path d=\"M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_34208_4881\">\n                  <path d=\"M0.875 0.75H21.125V18.75H0.875V0.75Z\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n\n          <div class=\"title\">Delegate Signing</div>\n        </div>\n\n        <div slot=\"content\" class=\"content\">\n          <div class=\"verdocs-form\">\n            <div class=\"verdocs-form-row\">\n              <div class=\"field-group\">\n                <label htmlFor=\"verdocs-delegate-first\" class=\"verdocs-form-label\">\n                  New Recipient*\n                </label>\n                <input\n                  type=\"text\"\n                  id=\"verdocs-delegate-first\"\n                  name=\"verdocs-delegate-first\"\n                  class=\"verdocs-form-input\"\n                  autocomplete=\"blocked\"\n                  placeholder=\"First name\"\n                  value={this.first_name}\n                  onInput={(e: any) => (this.first_name = e.target.value)}\n                />\n              </div>\n              <div class=\"field-group\">\n                <label htmlFor=\"verdocs-delegate-last\" class=\"verdocs-form-label\">\n                  &nbsp;\n                </label>\n                <input\n                  type=\"text\"\n                  id=\"verdocs-delegate-last\"\n                  name=\"verdocs-delegate-last\"\n                  class=\"verdocs-form-input\"\n                  autocomplete=\"blocked\"\n                  placeholder=\"Last name\"\n                  value={this.last_name}\n                  onInput={(e: any) => (this.last_name = e.target.value)}\n                />\n              </div>\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-email\" class=\"verdocs-form-label\">\n                Email Address*\n              </label>\n              <input\n                type=\"text\"\n                id=\"verdocs-delegate-email\"\n                name=\"verdocs-delegate-email\"\n                class=\"verdocs-form-input\"\n                autocomplete=\"blocked\"\n                placeholder=\"New recipient email address\"\n                value={this.email}\n                onInput={(e: any) => (this.email = e.target.value)}\n              />\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-phone\" class=\"verdocs-form-label\">\n                Phone Number*\n              </label>\n              <input\n                type=\"text\"\n                id=\"verdocs-delegate-phone\"\n                name=\"verdocs-delegate-phone\"\n                class=\"verdocs-form-input\"\n                autocomplete=\"blocked\"\n                placeholder=\"Optional phone number\"\n                value={this.phone}\n                onInput={(e: any) => (this.phone = e.target.value)}\n              />\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-message\" class=\"verdocs-form-label\">\n                Message (optional)\n              </label>\n              <textarea\n                id=\"verdocs-delegate-message\"\n                name=\"verdocs-delegate-message\"\n                class=\"verdocs-form-input\"\n                rows={3}\n                autocomplete=\"blocked\"\n                placeholder=\"Type message here...\"\n                onInput={(e: any) => (this.message = e.target.value)}\n              >\n                {this.message}\n              </textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"footer\" slot=\"footer\">\n          <div class=\"buttons\">\n            <button class=\"cancel\" onClick={() => this.handleCancel()}>\n              Cancel\n            </button>\n            <button class=\"proceed\" onClick={() => this.handleDelegate()} disabled={!this.first_name || !this.last_name || !this.email}>\n              Delegate\n            </button>\n          </div>\n        </div>\n      </verdocs-dialog>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-VPVigkt1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-delegate-dialog/verdocs-delegate-dialog.scss?tag=verdocs-delegate-dialog","src/components/dialogs/verdocs-delegate-dialog/verdocs-delegate-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-delegate-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading .icon {\n    /* Ensure the icon takes the variable color. The SVG inside should use fill: currentColor or just inherit/use fill: var(...) if set here */\n    svg {\n      fill: var(--verdocs-dialog-icon-color, #ffffff);\n    }\n  }\n\n  /* New Form Layout Classes */\n  .verdocs-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 24px;\n  }\n\n  .verdocs-form-row {\n    display: flex;\n    gap: 16px;\n    width: 100%;\n\n    > * {\n      flex: 1;\n    }\n  }\n\n  .verdocs-form-label {\n    font-size: 13px;\n    line-height: 20px;\n    font-weight: 300;\n    color: var(--verdocs-label-color, #616161);\n    margin-bottom: 2px;\n    display: block;\n  }\n\n  .verdocs-form-input {\n    border: 1px solid #d1d1d1;\n    border-bottom-color: var(--verdocs-input-border-bottom-color, #d1d1d1);\n    border-radius: 4px;\n    color: #707070;\n    padding: 8px 12px;\n    font-size: 14px;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: inherit;\n\n    &::placeholder {\n      color: #9ca3af;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: var(--verdocs-primary-color, $verdocs-purple);\n    }\n  }\n\n  .buttons {\n    gap: 12px;\n    display: flex;\n    margin-top: 0;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    button {\n      padding: 8px 16px;\n      height: 40px;\n      display: flex;\n      font-size: 14px;\n      font-weight: 400;\n      cursor: pointer;\n      align-items: center;\n      border-radius: var(--verdocs-button-radius, 4px);\n      justify-content: center;\n      transition: all 0.2s ease;\n\n      &.cancel {\n        background-color: transparent;\n        border: var(--verdocs-button-secondary-border, 1px solid #d1d5db);\n        color: var(--verdocs-button-secondary-color, #374151);\n      }\n\n      &.proceed {\n        background-color: var(--verdocs-primary-color, $verdocs-green);\n        border: 1px solid transparent;\n        color: #ffffff;\n\n        &:hover {\n          background-color: var(--verdocs-primary-color-hover, $verdocs-green-shade);\n        }\n      }\n\n      &:disabled {\n        background-color: var(--verdocs-button-disabled-bg, #e5e7eb);\n        color: var(--verdocs-button-disabled-color, #9ca3af);\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import {IEnvelope, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, State} from '@stencil/core';\nimport {DefaultEndpoint} from '../../../utils/Environment';\n\n/**\n * Delegate signing responsibility to another recipient.\n */\n@Component({\n  tag: 'verdocs-delegate-dialog',\n  styleUrl: 'verdocs-delegate-dialog.scss',\n})\nexport class VerdocsDelegateDialog {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop({mutable: true}) endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The envelope to process.\n   */\n  @Prop() envelope: IEnvelope | null = null;\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 process has completed successfully.\n   */\n  @Event({composed: true}) next: EventEmitter<{first_name: string; last_name: string; email: string; phone: string; message: string}>;\n\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() message = '';\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDelegate() {\n    this.next.emit({\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n    });\n  }\n\n  render() {\n    return (\n      <verdocs-dialog>\n        <div slot=\"heading\" class=\"heading\">\n          <div class=\"icon\">\n            <svg width=\"22\" height=\"19\" viewBox=\"0 0 22 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_34208_4881)\">\n                <path d=\"M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_34208_4881\">\n                  <path d=\"M0.875 0.75H21.125V18.75H0.875V0.75Z\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n\n          <div class=\"title\">Delegate Signing</div>\n        </div>\n\n        <div slot=\"content\" class=\"content\">\n          <div class=\"verdocs-form\">\n            <div class=\"verdocs-form-row\">\n              <div class=\"field-group\">\n                <label htmlFor=\"verdocs-delegate-first\" class=\"verdocs-form-label\">\n                  New Recipient*\n                </label>\n                <input\n                  type=\"text\"\n                  id=\"verdocs-delegate-first\"\n                  name=\"verdocs-delegate-first\"\n                  class=\"verdocs-form-input\"\n                  autocomplete=\"blocked\"\n                  placeholder=\"First name\"\n                  value={this.first_name}\n                  onInput={(e: any) => (this.first_name = e.target.value)}\n                />\n              </div>\n              <div class=\"field-group\">\n                <label htmlFor=\"verdocs-delegate-last\" class=\"verdocs-form-label\">\n                  &nbsp;\n                </label>\n                <input\n                  type=\"text\"\n                  id=\"verdocs-delegate-last\"\n                  name=\"verdocs-delegate-last\"\n                  class=\"verdocs-form-input\"\n                  autocomplete=\"blocked\"\n                  placeholder=\"Last name\"\n                  value={this.last_name}\n                  onInput={(e: any) => (this.last_name = e.target.value)}\n                />\n              </div>\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-email\" class=\"verdocs-form-label\">\n                Email Address*\n              </label>\n              <input\n                type=\"text\"\n                id=\"verdocs-delegate-email\"\n                name=\"verdocs-delegate-email\"\n                class=\"verdocs-form-input\"\n                autocomplete=\"blocked\"\n                placeholder=\"New recipient email address\"\n                value={this.email}\n                onInput={(e: any) => (this.email = e.target.value)}\n              />\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-phone\" class=\"verdocs-form-label\">\n                Phone Number*\n              </label>\n              <input\n                type=\"text\"\n                id=\"verdocs-delegate-phone\"\n                name=\"verdocs-delegate-phone\"\n                class=\"verdocs-form-input\"\n                autocomplete=\"blocked\"\n                placeholder=\"Optional phone number\"\n                value={this.phone}\n                onInput={(e: any) => (this.phone = e.target.value)}\n              />\n            </div>\n\n            <div>\n              <label htmlFor=\"verdocs-delegate-message\" class=\"verdocs-form-label\">\n                Message (optional)\n              </label>\n              <textarea\n                id=\"verdocs-delegate-message\"\n                name=\"verdocs-delegate-message\"\n                class=\"verdocs-form-input\"\n                rows={3}\n                autocomplete=\"blocked\"\n                placeholder=\"Type message here...\"\n                onInput={(e: any) => (this.message = e.target.value)}\n              >\n                {this.message}\n              </textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"footer\" slot=\"footer\">\n          <div class=\"buttons\">\n            <button class=\"cancel\" onClick={() => this.handleCancel()}>\n              Cancel\n            </button>\n            <button class=\"proceed\" onClick={() => this.handleDelegate()} disabled={!this.first_name || !this.last_name || !this.email}>\n              Delegate\n            </button>\n          </div>\n        </div>\n      </verdocs-dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DlWkjPea.js → p-Y0OyTFqS.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-CUAGH_8P.js';
 import { i as interact } from './p-CGNX5HqF.js';
 import { VerdocsEndpoint, updateField } from '@verdocs/js-sdk';
-import { S as SettingsIcon } from './p-7LXbcjVz.js';
+import { S as SettingsIcon, P as PencilIcon, E as EraserIcon } from './p-Du758Jse.js';
 import { S as Store } from './p-bS8INhRF.js';
 import { d as defineCustomElement$9 } from './p-CfODrICH.js';
 import { d as defineCustomElement$8 } from './p-mThpW9TM.js';
@@ -13,7 +13,7 @@ import { d as defineCustomElement$3 } from './p-QDVFg2YR.js';
 import { d as defineCustomElement$2 } from './p-C4OPC14W.js';
 import { d as defineCustomElement$1 } from './p-CbtdkfOR.js';
 
-const verdocsFieldInitialCss = "@-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-initial{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;scroll-margin:20px 0;background-color:var(--verdocs-field-background, transparent);-webkit-transform-origin:bottom left;transform-origin:bottom left;border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));border-radius:var(--verdocs-field-radius)}verdocs-field-initial label{top:-14px;left:-1px;height:14px;color:var(--verdocs-field-text-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-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial.disabled img{opacity:0.5}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-initial.filled{border:none !important;background-color:transparent !important}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .settings-icon:hover{opacity:1}verdocs-field-initial .edge-top,verdocs-field-initial .edge-right,verdocs-field-initial .edge-left,verdocs-field-initial .edge-bottom{position:absolute;z-index:10}verdocs-field-initial .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-initial .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-initial .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-initial .edge-bottom{bottom:-2px;left:0;right:0;height:5px}@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 verdocsFieldInitialCss = "@-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-initial{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;scroll-margin:20px 0;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--verdocs-field-radius);background-color:var(--verdocs-field-background, transparent);border:var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2))}verdocs-field-initial label{top:-14px;left:-1px;height:14px;color:var(--verdocs-field-text-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-initial.done{border:none;opacity:1}verdocs-field-initial .initial-container{width:100%;height:100%;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-initial .initial-container img{display:block;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}verdocs-field-initial .initial-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(220, 220, 220, 0.85);display:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:8px;border-radius:var(--verdocs-field-radius);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}verdocs-field-initial .initial-container .overlay .icon-button{background:white;border:1px solid rgba(0, 0, 0, 0.1);cursor:pointer;padding:4px;border-radius:6px;color:#444;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);width:auto;height:auto}verdocs-field-initial .initial-container .overlay .icon-button:hover{background-color:#fafafa;-webkit-transform:translateY(-1px);transform:translateY(-1px);-webkit-box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);color:#000}verdocs-field-initial .initial-container .overlay .icon-button svg{width:14px;height:14px}verdocs-field-initial .initial-container:hover .overlay{display:-ms-flexbox;display:flex}verdocs-field-initial.disabled .initial-container{opacity:0.5;pointer-events:none}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-initial.filled{border:none !important;background-color:transparent !important}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .settings-icon:hover{opacity:1}verdocs-field-initial .edge-top,verdocs-field-initial .edge-right,verdocs-field-initial .edge-left,verdocs-field-initial .edge-bottom{position:absolute;z-index:10}verdocs-field-initial .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-initial .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-initial .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-initial .edge-bottom{bottom:-2px;left:0;right:0;height:5px}@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 VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldInitial extends H {
     constructor(registerHost) {
@@ -179,13 +179,22 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), base64 ? (h("img", { src: base64, alt: "Initial", onClick: () => {
+        return (h(Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), base64 ? (h("div", { class: "initial-container" }, h("img", { src: base64, alt: "Initial" }), h("div", { class: "overlay" }, h("button", { class: "icon-button", innerHTML: PencilIcon, onClick: e => {
+                e.stopPropagation();
+                if (disabled)
+                    return;
+                // EDIT action: always open dialog
+                console.log('[INITIAL] Editing initials');
+                this.adopt.emit();
+            } }), h("button", { class: "icon-button", innerHTML: EraserIcon, onClick: e => {
                 var _a;
+                e.stopPropagation();
                 if (disabled)
                     return;
+                // CLEAR action
                 console.log('[INITIAL] Clearing initials');
                 (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(null);
-            } })) : (h("button", { onClick: () => {
+            } })))) : (h("button", { onClick: () => {
                 var _a;
                 if (disabled)
                     return;
@@ -293,6 +302,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsFieldInitial as V, defineCustomElement as d };
-//# sourceMappingURL=p-DlWkjPea.js.map
+//# sourceMappingURL=p-Y0OyTFqS.js.map
 
-//# sourceMappingURL=p-DlWkjPea.js.map
+//# sourceMappingURL=p-Y0OyTFqS.js.map

package/dist/components/p-Y0OyTFqS.js.map

@@ -0,0 +1 @@
+{"file":"p-Y0OyTFqS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/fields/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  scroll-margin: 20px 0;\n  transform-origin: bottom left;\n  border-radius: var(--verdocs-field-radius);\n  background-color: var(--verdocs-field-background, transparent);\n  border: var(--verdocs-field-border, 1px solid rgba(0, 0, 0, 0.2));\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: var(--verdocs-field-text-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  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  .initial-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    img {\n      display: block;\n      max-width: 100%;\n      max-height: 100%;\n      object-fit: contain;\n    }\n\n    .overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(220, 220, 220, 0.85);\n      display: none;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      border-radius: var(--verdocs-field-radius);\n      backdrop-filter: blur(1px);\n\n      .icon-button {\n        background: white;\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        cursor: pointer;\n        padding: 4px;\n        border-radius: 6px;\n        color: #444;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all 0.2s ease;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n        width: auto;\n        height: auto;\n\n        &:hover {\n          background-color: #fafafa;\n          transform: translateY(-1px);\n          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n          color: #000;\n        }\n\n        svg {\n          width: 14px;\n          height: 14px;\n        }\n      }\n    }\n\n    &:hover .overlay {\n      display: flex;\n    }\n  }\n\n  &.disabled .initial-container {\n    opacity: 0.5;\n    pointer-events: none;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: var(--verdocs-field-text-color, rgba(0, 0, 0, 0.87));\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid var(--verdocs-required-field-border);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  &.filled {\n    border: none !important;\n    background-color: transparent !important;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\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  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\nimport {ITemplateField, IEnvelopeField, VerdocsEndpoint, updateField, ITemplate} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State, Element, Listen} from '@stencil/core';\nimport {SettingsIcon, PencilIcon, EraserIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt an initial.\n *\n * NOTE: When initial fields are completed they will be filled with an initial \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  @Element() el: HTMLElement;\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   * The document or template field to display.\n   */\n  @Prop({reflect: true}) initials: string = '';\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   * If set, provides the ID of already-adopted initials. If present, clicking the field (when empty)\n   * will immediately use these initials instead of showing the adoption dialog.\n   */\n  @Prop({reflect: true}) initialid?: string;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<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 input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\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 on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.el.focus();\n    this.focused = true;\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 71, height: 36},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  @Listen('blur')\n  onBlur() {\n    this.focused = false;\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 20) {\n      height = 15;\n    }\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\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  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 signerClass = `signer-${(index % 10) + 1}`;\n    const {base64} = settings;\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={value} alt=\"Initial\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, filled: !!base64, [signerClass]: true}}>\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {base64 ? (\n          <div class=\"initial-container\">\n            <img src={base64} alt=\"Initial\" />\n            <div class=\"overlay\">\n              <button\n                class=\"icon-button\"\n                innerHTML={PencilIcon}\n                onClick={e => {\n                  e.stopPropagation();\n                  if (disabled) return;\n                  // EDIT action: always open dialog\n                  console.log('[INITIAL] Editing initials');\n                  this.adopt.emit();\n                }}\n              />\n              <button\n                class=\"icon-button\"\n                innerHTML={EraserIcon}\n                onClick={e => {\n                  e.stopPropagation();\n                  if (disabled) return;\n                  // CLEAR action\n                  console.log('[INITIAL] Clearing initials');\n                  this.fieldChange?.emit(null);\n                }}\n              />\n            </div>\n          </div>\n        ) : (\n          <button\n            onClick={() => {\n              if (disabled) return;\n              // If we already have an initial ID, use it immediately\n              if (this.initialid) {\n                console.log('[INITIAL] Reusing existing initials', this.initialid);\n                this.fieldChange?.emit(this.initialid);\n              } else {\n                this.adopt.emit();\n              }\n            }}\n          >\n            Initial\n          </button>\n        )}\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: field.name});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"initial fields capture the recipient's initials on a clause or page.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B4XIUesD.js → p-pPfQ3mVK.js}

@@ -1,30 +1,30 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-CUAGH_8P.js';
 import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
-import { t as throttle, f as getControlStyles, g as getFieldId } from './p-B3TbYvlU.js';
+import { t as throttle, e as getControlStyles, g as getFieldId } from './p-DDA_lXX8.js';
 import { S as Store } from './p-bS8INhRF.js';
 import { d as defineCustomElement$n } from './p-CfODrICH.js';
 import { d as defineCustomElement$m } from './p-mThpW9TM.js';
 import { d as defineCustomElement$l } from './p-DQ-sUhlC.js';
-import { d as defineCustomElement$k } from './p-D5_KiFFr.js';
-import { d as defineCustomElement$j } from './p-6RsbiMKu.js';
-import { d as defineCustomElement$i } from './p-Cm1MIPkG.js';
-import { d as defineCustomElement$h } from './p-M72Hb6bh.js';
-import { d as defineCustomElement$g } from './p-jbkmPUd-.js';
-import { d as defineCustomElement$f } from './p-DlWkjPea.js';
-import { d as defineCustomElement$e } from './p-B1dqyQbM.js';
-import { d as defineCustomElement$d } from './p-BzCNCMTQ.js';
-import { d as defineCustomElement$c } from './p-Bg4xDPiO.js';
-import { d as defineCustomElement$b } from './p-BdP0-Lom.js';
-import { d as defineCustomElement$a } from './p-C7eJlR29.js';
+import { d as defineCustomElement$k } from './p-CxLtKV1w.js';
+import { d as defineCustomElement$j } from './p-CMpYlbLu.js';
+import { d as defineCustomElement$i } from './p-UPW-U544.js';
+import { d as defineCustomElement$h } from './p-CudTfFTS.js';
+import { d as defineCustomElement$g } from './p-DqoBcfqq.js';
+import { d as defineCustomElement$f } from './p-Y0OyTFqS.js';
+import { d as defineCustomElement$e } from './p-LfDLlp5r.js';
+import { d as defineCustomElement$d } from './p-5G9qfsgg.js';
+import { d as defineCustomElement$c } from './p-DB-avV4_.js';
+import { d as defineCustomElement$b } from './p-Ddv42zlJ.js';
+import { d as defineCustomElement$a } from './p-DGVgIkrO.js';
 import { d as defineCustomElement$9 } from './p-CHLvWYEx.js';
 import { d as defineCustomElement$8 } from './p-D9zjm5AL.js';
 import { d as defineCustomElement$7 } from './p-ypE1cZc7.js';
-import { d as defineCustomElement$6 } from './p-BDrdwO_h.js';
+import { d as defineCustomElement$6 } from './p-CUrnqIyl.js';
 import { d as defineCustomElement$5 } from './p-BHVk6zkr.js';
 import { d as defineCustomElement$4 } from './p-QDVFg2YR.js';
 import { d as defineCustomElement$3 } from './p-C4OPC14W.js';
 import { d as defineCustomElement$2 } from './p-CbtdkfOR.js';
-import { d as defineCustomElement$1 } from './p-Ug9F8x3g.js';
+import { d as defineCustomElement$1 } from './p-BAwv4SNb.js';
 
 const verdocsTemplateDocumentPageCss = "@-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-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}verdocs-template-document-page .placeholder{opacity:0.1;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}";
 
@@ -383,6 +383,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateDocumentPage as V, defineCustomElement as d };
-//# sourceMappingURL=p-B4XIUesD.js.map
+//# sourceMappingURL=p-pPfQ3mVK.js.map
 
-//# sourceMappingURL=p-B4XIUesD.js.map
+//# sourceMappingURL=p-pPfQ3mVK.js.map