@verdocs/web-sdk 6.8.1 → 6.8.3

package/dist/components/verdocs-envelopes-list.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
 import { VerdocsEndpoint, getEnvelopes, integerSequence, getRecipientsWithActions, userCanCancelEnvelope, userCanAct, formatFullName, cancelEnvelope } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './p-Dk8BEvRP.js';
-import { V as VerdocsToast } from './p-CyvDgtoV.js';
+import { s as saveEnvelopesAsZip } from './p-Dpu4D5bv.js';
+import { V as VerdocsToast } from './p-D97GxsI-.js';
 import { S as SDKError } from './p-C1sRVZWv.js';
 import { d as defineCustomElement$c } from './p-C_yyK5xE.js';
 import { d as defineCustomElement$b } from './p-BvV9rOTP.js';
@@ -10,10 +10,10 @@ import { d as defineCustomElement$9 } from './p-BC5N3FIA.js';
 import { d as defineCustomElement$8 } from './p-CnPaJH5T.js';
 import { d as defineCustomElement$7 } from './p-tvraq_IT.js';
 import { d as defineCustomElement$6 } from './p-DUYRis3A.js';
-import { d as defineCustomElement$5 } from './p-B_5Ul4Jm.js';
+import { d as defineCustomElement$5 } from './p-CRIrD66O.js';
 import { d as defineCustomElement$4 } from './p-lE3_dyeh.js';
 import { d as defineCustomElement$3 } from './p-pbP-pBTr.js';
-import { d as defineCustomElement$2 } from './p-BhfPQRmb.js';
+import { d as defineCustomElement$2 } from './p--qy4LrSt.js';
 
 const verdocsEnvelopesListCss = "verdocs-envelopes-list{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}@media screen and (max-width: 800px){verdocs-envelopes-list{font-size:14px}}verdocs-envelopes-list .envelope-placeholder{height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin:5px 0;border-radius:5px;background:#f5f5fa}verdocs-envelopes-list .header{width:100%;row-gap:4px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-envelopes-list .header .filter{width:300px}verdocs-envelopes-list .header verdocs-text-input{margin:0}verdocs-envelopes-list .header verdocs-text-input input{height:32px}verdocs-envelopes-list .filter{-ms-flex-align:center;align-items:center}verdocs-envelopes-list .envelope{width:100%;margin:3px 0;background:#ffffff}verdocs-envelopes-list .envelope:hover{cursor:pointer;background:#f5f5fa}verdocs-envelopes-list .envelope .inner{gap:12px;display:-ms-flexbox;display:flex;padding:8px 14px;border-radius:5px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;container-type:inline-size}verdocs-envelopes-list .envelope .inner svg{width:24px;height:24px}verdocs-envelopes-list .vert-spacer{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 1px;flex:0 0 1px;border-right:1px solid #dad8dd}@media screen and (max-width: 800px){verdocs-envelopes-list .vert-spacer{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list .envelope-icon{display:none}}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-checkbox{display:none}}verdocs-envelopes-list .last-modified{color:#444;display:-ms-flexbox;display:flex;-ms-flex:0 0 180px;flex:0 0 180px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;white-space:nowrap}@media screen and (max-width: 800px){verdocs-envelopes-list .last-modified{display:none}}verdocs-envelopes-list .envelope-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;color:#000000;line-height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .envelope-recipients{color:#4b5563;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}verdocs-envelopes-list .empty-text{text-align:center;margin:16px 0 0 0;padding:80px 80px;border:2px solid #ccc}verdocs-envelopes-list .containing{gap:12px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 800px){verdocs-envelopes-list verdocs-status-indicator{font-size:14px}}";
 

package/dist/components/verdocs-field-attachment.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldAttachment$1, d as defineCustomElement$1 } from './p-BFALqJGq.js';
+import { V as VerdocsFieldAttachment$1, d as defineCustomElement$1 } from './p-D5iqEzJy.js';
 
 const VerdocsFieldAttachment = VerdocsFieldAttachment$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-checkbox.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldCheckbox$1, d as defineCustomElement$1 } from './p-BnrYh7lb.js';
+import { V as VerdocsFieldCheckbox$1, d as defineCustomElement$1 } from './p-CNwYj4cS.js';
 
 const VerdocsFieldCheckbox = VerdocsFieldCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-date.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldDate$1, d as defineCustomElement$1 } from './p-CC0KCzJ2.js';
+import { V as VerdocsFieldDate$1, d as defineCustomElement$1 } from './p-Bw4ea7Kw.js';
 
 const VerdocsFieldDate = VerdocsFieldDate$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-dropdown.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './p-CbqdqC8j.js';
+import { V as VerdocsFieldDropdown$1, d as defineCustomElement$1 } from './p-BYz85yxG.js';
 
 const VerdocsFieldDropdown = VerdocsFieldDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-initial.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldInitial$1, d as defineCustomElement$1 } from './p-Ct99f25g.js';
+import { V as VerdocsFieldInitial$1, d as defineCustomElement$1 } from './p-CcCp1gLW.js';
 
 const VerdocsFieldInitial = VerdocsFieldInitial$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-payment.js

@@ -1,5 +1,6 @@
 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-Du758Jse.js';
+import { i as interact } from './p-CGNX5HqF.js';
+import { S as SettingsIcon } from './p-4iMdAi-F.js';
 import { S as Store } from './p-bS8INhRF.js';
 import { d as defineCustomElement$a } from './p-C_yyK5xE.js';
 import { d as defineCustomElement$9 } from './p-BvV9rOTP.js';
@@ -8,8 +9,8 @@ import { d as defineCustomElement$7 } from './p-CnPaJH5T.js';
 import { d as defineCustomElement$6 } from './p-CNKACBaL.js';
 import { d as defineCustomElement$5 } from './p-DUYRis3A.js';
 import { d as defineCustomElement$4 } from './p-C1AtapGD.js';
-import { d as defineCustomElement$3 } from './p-ClKxADje.js';
-import { d as defineCustomElement$2 } from './p-BhfPQRmb.js';
+import { d as defineCustomElement$3 } from './p-Cal5IvqT.js';
+import { d as defineCustomElement$2 } from './p--qy4LrSt.js';
 
 const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{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-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}";
 
@@ -91,6 +92,12 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
             }
         }
     }
+    componentDidUpdate() {
+        if (this.isPreview) {
+            interact(this.el).unset();
+            return;
+        }
+    }
     async focusField() {
         this.el.focus();
         this.focused = true;
@@ -137,6 +144,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         "sourceid": [513],
         "fieldname": [513],
         "field": [16],
+        "isPreview": [516, "is-preview"],
         "disabled": [516],
         "done": [516],
         "editable": [516],

package/dist/components/verdocs-field-payment.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-payment.js","mappings":"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","names":["VerdocsFieldPayment","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/fields/verdocs-field-payment/verdocs-field-payment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position:\n      calc(100% - 7px) 4px,\n      calc(100% - 3px) 4px,\n      100% 0;\n    background-size:\n      5px 5px,\n      5px 5px,\n      2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\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","import {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Method, Fragment, Element, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\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   * 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 = false;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() signed: boolean = false;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  mode: string;\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find((r: any) => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\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 signerClass = `signer-${(index % 10) + 1}`;\n\n    if (!field) {\n      return <Fragment />;\n    }\n\n    if (done) {\n      return <Host class={{done}}>$✓</Host>;\n    }\n\n    return (\n      <Host class={{focused, disabled, [signerClass]: true}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} alt=\"Payment Icon\" />\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      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-payment.js","mappings":"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","names":["VerdocsFieldPayment","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/fields/verdocs-field-payment/verdocs-field-payment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position:\n      calc(100% - 7px) 4px,\n      calc(100% - 3px) 4px,\n      100% 0;\n    background-size:\n      5px 5px,\n      5px 5px,\n      2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\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","import interact from 'interactjs';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Method, Fragment, Element, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\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 to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\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 = false;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() signed: boolean = false;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  mode: string;\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find((r: any) => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.isPreview) {\n      interact(this.el).unset();\n      return;\n    }\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\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 signerClass = `signer-${(index % 10) + 1}`;\n\n    if (!field) {\n      return <Fragment />;\n    }\n\n    if (done) {\n      return <Host class={{done}}>$✓</Host>;\n    }\n\n    return (\n      <Host class={{focused, disabled, [signerClass]: true}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} alt=\"Payment Icon\" />\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      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-field-radio.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldRadio$1, d as defineCustomElement$1 } from './p-CdaVcvEc.js';
+import { V as VerdocsFieldRadio$1, d as defineCustomElement$1 } from './p-B4HqZ5yO.js';
 
 const VerdocsFieldRadio = VerdocsFieldRadio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-signature.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldSignature$1, d as defineCustomElement$1 } from './p-CxGK9zOT.js';
+import { V as VerdocsFieldSignature$1, d as defineCustomElement$1 } from './p-D0JcxROc.js';
 
 const VerdocsFieldSignature = VerdocsFieldSignature$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-textarea.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './p-CStsF8-Q.js';
+import { V as VerdocsFieldTextarea$1, d as defineCustomElement$1 } from './p-yvuxqHqW.js';
 
 const VerdocsFieldTextarea = VerdocsFieldTextarea$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-textbox.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './p-Bpu-zxZH.js';
+import { V as VerdocsFieldTextbox$1, d as defineCustomElement$1 } from './p-Bys760t8.js';
 
 const VerdocsFieldTextbox = VerdocsFieldTextbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-timestamp.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFieldTimestamp$1, d as defineCustomElement$1 } from './p-jeLHHnry.js';
+import { V as VerdocsFieldTimestamp$1, d as defineCustomElement$1 } from './p-wSGGYtAF.js';
 
 const VerdocsFieldTimestamp = VerdocsFieldTimestamp$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-file-chooser.js

@@ -1,4 +1,4 @@
-import { V as VerdocsFileChooser$1, d as defineCustomElement$1 } from './p-BuPGeecy.js';
+import { V as VerdocsFileChooser$1, d as defineCustomElement$1 } from './p-8aKU2veY.js';
 
 const VerdocsFileChooser = VerdocsFileChooser$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-initial-dialog.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
 import { d as defineCustomElement$4 } from './p-C_yyK5xE.js';
 import { d as defineCustomElement$3 } from './p-CnPaJH5T.js';
-import { d as defineCustomElement$2 } from './p-BhfPQRmb.js';
+import { d as defineCustomElement$2 } from './p--qy4LrSt.js';
 
 const verdocsInitialDialogCss = "verdocs-initial-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:rgba(0, 0, 0, 0.4980392157)}verdocs-initial-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-initial-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-initial-dialog .content{font-size:14px;padding:20px}verdocs-initial-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-initial-dialog .buttons verdocs-button{margin-left:16px}verdocs-initial-dialog canvas{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.1215686275)}verdocs-initial-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-initial-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-initial-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-initial-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-initial-dialog .tabs .tab:hover{color:#55bc81}";
 

package/dist/components/verdocs-kba-dialog.js

@@ -1,4 +1,4 @@
-import { V as VerdocsKbaDialog$1, d as defineCustomElement$1 } from './p-CuOkNuk2.js';
+import { V as VerdocsKbaDialog$1, d as defineCustomElement$1 } from './p-5374ZOPB.js';
 
 const VerdocsKbaDialog = VerdocsKbaDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-otp-dialog.js

@@ -1,4 +1,4 @@
-import { V as VerdocsOtpDialog$1, d as defineCustomElement$1 } from './p-D3vX2BjV.js';
+import { V as VerdocsOtpDialog$1, d as defineCustomElement$1 } from './p-6scipSAA.js';
 
 const VerdocsOtpDialog = VerdocsOtpDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-passcode-dialog.js

@@ -1,4 +1,4 @@
-import { V as VerdocsPasscodeDialog$1, d as defineCustomElement$1 } from './p-CEkIWhd-.js';
+import { V as VerdocsPasscodeDialog$1, d as defineCustomElement$1 } from './p-CErFd8ng.js';
 
 const VerdocsPasscodeDialog = VerdocsPasscodeDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-preview.js

@@ -1,4 +1,4 @@
-import { V as VerdocsPreview$1, d as defineCustomElement$1 } from './p-BndCPrX4.js';
+import { V as VerdocsPreview$1, d as defineCustomElement$1 } from './p-B91pFl_v.js';
 
 const VerdocsPreview = VerdocsPreview$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-quick-filter.js

@@ -1,4 +1,4 @@
-import { V as VerdocsQuickFilter$1, d as defineCustomElement$1 } from './p-B_5Ul4Jm.js';
+import { V as VerdocsQuickFilter$1, d as defineCustomElement$1 } from './p-CRIrD66O.js';
 
 const VerdocsQuickFilter = VerdocsQuickFilter$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-send.js

@@ -1,4 +1,4 @@
-import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-YBSd2E-F.js';
+import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-D1tvdWaA.js';
 
 const VerdocsSend = VerdocsSend$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-sign.js

@@ -1,35 +1,34 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-CUAGH_8P.js';
 import { VerdocsEndpoint, DEFAULT_DISCLOSURES, startSigningSession, envelopeRecipientAgree, getEnvelope, updateEnvelopeField, createSignature, createInitials, sortFields, envelopeRecipientSubmit, isFieldValid, isFieldFilled, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, verifySigner, delegateRecipient, envelopeRecipientDecline, integerSequence, askQuestion, getEnvelopeDocumentDownloadLink, getEnvelopesZip } from '@verdocs/js-sdk';
-import { u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentFlag, a as renderDocumentField, d as defaultHeight } from './p-Dk8BEvRP.js';
-import { D as DocumentPageIcon } from './p-Du758Jse.js';
-import { V as VerdocsToast } from './p-CyvDgtoV.js';
+import { u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentFlag, a as renderDocumentField, d as defaultHeight } from './p-Dpu4D5bv.js';
+import { D as DocumentPageIcon, C as CheckCircleIcon } from './p-4iMdAi-F.js';
+import { V as VerdocsToast } from './p-D97GxsI-.js';
 import { S as SDKError } from './p-C1sRVZWv.js';
 import { S as Store } from './p-bS8INhRF.js';
-import { d as defineCustomElement$q } from './p-BYxr_9pG.js';
-import { d as defineCustomElement$p } from './p-C_yyK5xE.js';
-import { d as defineCustomElement$o } from './p-BvV9rOTP.js';
-import { d as defineCustomElement$n } from './p-BWc1JSha.js';
-import { d as defineCustomElement$m } from './p-Ba_mXs1J.js';
-import { d as defineCustomElement$l } from './p-uPFNuSZV.js';
-import { d as defineCustomElement$k } from './p-Dlm5bUxv.js';
-import { d as defineCustomElement$j } from './p-Y8b066ow.js';
-import { d as defineCustomElement$i } from './p-BZMRf_1r.js';
-import { d as defineCustomElement$h } from './p-BC5N3FIA.js';
-import { d as defineCustomElement$g } from './p-CnPaJH5T.js';
-import { d as defineCustomElement$f } from './p-CuOkNuk2.js';
-import { d as defineCustomElement$e } from './p-CNKACBaL.js';
-import { d as defineCustomElement$d } from './p-o9BQIoXw.js';
-import { d as defineCustomElement$c } from './p-D3vX2BjV.js';
-import { d as defineCustomElement$b } from './p-CEkIWhd-.js';
-import { d as defineCustomElement$a } from './p-DUYRis3A.js';
-import { d as defineCustomElement$9 } from './p-RN0C-eM1.js';
-import { d as defineCustomElement$8 } from './p-ByFUP3AN.js';
-import { d as defineCustomElement$7 } from './p-C1AtapGD.js';
-import { d as defineCustomElement$6 } from './p-BgNCVox7.js';
-import { d as defineCustomElement$5 } from './p-DsyPm0eu.js';
+import { d as defineCustomElement$p } from './p-CwA1DkPT.js';
+import { d as defineCustomElement$o } from './p-C_yyK5xE.js';
+import { d as defineCustomElement$n } from './p-BvV9rOTP.js';
+import { d as defineCustomElement$m } from './p-BWc1JSha.js';
+import { d as defineCustomElement$l } from './p-Ba_mXs1J.js';
+import { d as defineCustomElement$k } from './p-uPFNuSZV.js';
+import { d as defineCustomElement$j } from './p-Dlm5bUxv.js';
+import { d as defineCustomElement$i } from './p-Y8b066ow.js';
+import { d as defineCustomElement$h } from './p-DyfpSDn-.js';
+import { d as defineCustomElement$g } from './p-BC5N3FIA.js';
+import { d as defineCustomElement$f } from './p-CnPaJH5T.js';
+import { d as defineCustomElement$e } from './p-5374ZOPB.js';
+import { d as defineCustomElement$d } from './p-CNKACBaL.js';
+import { d as defineCustomElement$c } from './p-o9BQIoXw.js';
+import { d as defineCustomElement$b } from './p-6scipSAA.js';
+import { d as defineCustomElement$a } from './p-CErFd8ng.js';
+import { d as defineCustomElement$9 } from './p-DUYRis3A.js';
+import { d as defineCustomElement$8 } from './p-RN0C-eM1.js';
+import { d as defineCustomElement$7 } from './p-ByFUP3AN.js';
+import { d as defineCustomElement$6 } from './p-C1AtapGD.js';
+import { d as defineCustomElement$5 } from './p-BgNCVox7.js';
 import { d as defineCustomElement$4 } from './p-lE3_dyeh.js';
-import { d as defineCustomElement$3 } from './p-BhfPQRmb.js';
-import { d as defineCustomElement$2 } from './p-YnO0Tmc-.js';
+import { d as defineCustomElement$3 } from './p--qy4LrSt.js';
+import { d as defineCustomElement$2 } from './p-DtpXCLdt.js';
 
 const verdocsSignCss = "verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;min-height:700px;position:relative;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign>.document .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:1028px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-sign>.document .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-sign>.document .document-separator:first-child{margin-top:0}verdocs-sign .signed-document-container{width:64%;margin-left:260px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}verdocs-sign .signed-document-container.zoom-normal{width:64%;margin-left:260px}verdocs-sign .signed-document-container.zoom-zoom1{width:80%;margin-left:200px}verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:150px}verdocs-sign .signed-document-container.zoom-zoom2 .verdocs-flag-instance{opacity:0;pointer-events:none}@media (max-width: 768px){verdocs-sign verdocs-sign-footer{padding:0 10px}verdocs-sign verdocs-sign-footer .buttons{gap:8px}verdocs-sign verdocs-sign-footer .buttons button{font-size:10px}verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign .signed-document-container.zoom-normal,verdocs-sign .signed-document-container.zoom-zoom1,verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}verdocs-sign .controls-toolbar .center-controls{display:none}verdocs-sign .controls-toolbar .right-controls .mobile-next-button{display:block;margin-right:10px}verdocs-sign .controls-toolbar .right-controls .minus,verdocs-sign .controls-toolbar .right-controls .plus{display:none}}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;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);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header,.controls-toolbar,.verdocs-flag-instance,verdocs-signing-progress{display:none !important}verdocs-sign{min-height:auto;background-color:white}verdocs-sign>.document{overflow:visible;height:auto;display:block;padding:0;margin:0}verdocs-sign>.document .document-separator{display:none}verdocs-sign .signed-document-container{width:100%;margin:0}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}.controls-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:54px;padding:0 12px 0 24px;background-color:#ffffff;border-bottom:1px solid #e0e0e0;-webkit-box-shadow:none;box-shadow:none;font-family:\"Inter\", sans-serif;color:#424242;z-index:1000}.controls-toolbar .left-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .left-controls .title{font-weight:500;font-size:16px;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls-toolbar .center-controls{-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px;display:none}.controls-toolbar .center-controls .label{color:#000000;font-weight:300}.controls-toolbar .center-controls .select-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .center-controls .select-wrapper verdocs-select-input{margin:0}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-label{display:none}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element{background:transparent;border:1px solid #e0e0e0;height:32px;padding:2px 8px;min-width:60px;text-align:center;font-family:inherit;color:#424242}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element:focus{border-color:#2a63f6}.controls-toolbar .center-controls .count{color:#000000;font-weight:300}.controls-toolbar .right-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.controls-toolbar .right-controls .mobile-next-button{display:none}.controls-toolbar .right-controls .icon-button{width:32px;height:32px;display:-ms-flexbox;display:flex;color:#424242;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}.controls-toolbar .right-controls .icon-button:hover{background-color:#f5f5f5}.controls-toolbar .right-controls .icon-button.disabled{opacity:0.3;pointer-events:none}.controls-toolbar .right-controls .icon-button svg{display:block;width:20px;height:20px}";
 
@@ -75,7 +74,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         /**
          * The style of the toolbar to display.
          */
-        this.toolbarStyle = 'controls';
+        this.toolbarStyle = 'menu';
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -577,10 +576,30 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             this.focusedField = nextUnfilled.name;
         }
     }
+    handleNextOptional() {
+        const unfilledOptional = this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f));
+        const next = this.getNextFieldFromList(unfilledOptional);
+        if (next) {
+            const id = getFieldId(next);
+            const el = document.getElementById(id);
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+            el === null || el === void 0 ? void 0 : el.focusField();
+            this.focusedField = next.name;
+        }
+    }
     getRecipientFields() {
         var _a;
         return ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.fields.filter(field => field.role_name === this.recipient.role_name)) || [];
     }
+    getRequiredTotalCount() {
+        return this.getSortedFillableFields().filter(f => f.required).length;
+    }
+    getRequiredFilledCount() {
+        return this.getSortedFillableFields().filter(f => f.required && this.isFieldActuallyFilled(f)).length;
+    }
+    getOptionalUnfilledCount() {
+        return this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f)).length;
+    }
     // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
     checkRecipientFields() {
         const invalidFields = this.getRecipientFields().filter(field => !isFieldValid(field, this.getRecipientFields()));
@@ -691,9 +710,35 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             const variant = 'fill';
             let label = 'FILL';
             let showSkip = false;
+            switch (nextField.type) {
+                case 'signature':
+                    label = 'SIGN';
+                    break;
+                case 'initial':
+                    label = 'INITIAL';
+                    break;
+                case 'checkbox':
+                    label = 'CHECK';
+                    break;
+                case 'radio':
+                    label = 'SELECT';
+                    break;
+                case 'date':
+                case 'dropdown':
+                    label = 'SELECT';
+                    break;
+                case 'attachment':
+                    label = 'ATTACH';
+                    break;
+                case 'payment':
+                    label = 'PAY';
+                    break;
+                default:
+                    label = 'FILL';
+                    break;
+            }
             if (!nextField.required) {
-                label = 'FILL';
-                showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
+                showSkip = true;
             }
             renderDocumentFlag(pageInfo, nextField.y, nextField.height || defaultHeight(nextField.type), {
                 variant,
@@ -982,9 +1027,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
-                this.adoptingSignature = true;
-            }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && (() => {
+            const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
+            const optionalLeft = this.getOptionalUnfilledCount();
+            if (remaining > 0) {
+                return h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left");
+            }
+            return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional")));
+        })(), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("div", { innerHTML: DocumentPageIcon }), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
@@ -1146,7 +1196,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-sign", "verdocs-adopt-signature-dialog", "verdocs-button", "verdocs-checkbox", "verdocs-delegate-dialog", "verdocs-dialog", "verdocs-disclosure-dialog", "verdocs-download-dialog", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-flag", "verdocs-help-icon", "verdocs-kba-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-otp-dialog", "verdocs-passcode-dialog", "verdocs-portal", "verdocs-question-dialog", "verdocs-radio-button", "verdocs-select-input", "verdocs-sign-footer", "verdocs-signing-progress", "verdocs-spinner", "verdocs-text-input", "verdocs-view"];
+    const components = ["verdocs-sign", "verdocs-adopt-signature-dialog", "verdocs-button", "verdocs-checkbox", "verdocs-delegate-dialog", "verdocs-dialog", "verdocs-disclosure-dialog", "verdocs-download-dialog", "verdocs-dropdown", "verdocs-envelope-document-page", "verdocs-flag", "verdocs-help-icon", "verdocs-kba-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-otp-dialog", "verdocs-passcode-dialog", "verdocs-portal", "verdocs-question-dialog", "verdocs-radio-button", "verdocs-select-input", "verdocs-sign-footer", "verdocs-spinner", "verdocs-text-input", "verdocs-view"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-sign":
             if (!customElements.get(tagName)) {
@@ -1154,111 +1204,106 @@ function defineCustomElement$1() {
             }
             break;
         case "verdocs-adopt-signature-dialog":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$q();
-            }
-            break;
-        case "verdocs-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$p();
             }
             break;
-        case "verdocs-checkbox":
+        case "verdocs-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$o();
             }
             break;
-        case "verdocs-delegate-dialog":
+        case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$n();
             }
             break;
-        case "verdocs-dialog":
+        case "verdocs-delegate-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "verdocs-disclosure-dialog":
+        case "verdocs-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "verdocs-download-dialog":
+        case "verdocs-disclosure-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "verdocs-dropdown":
+        case "verdocs-download-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "verdocs-envelope-document-page":
+        case "verdocs-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "verdocs-flag":
+        case "verdocs-envelope-document-page":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "verdocs-help-icon":
+        case "verdocs-flag":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "verdocs-kba-dialog":
+        case "verdocs-help-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "verdocs-loader":
+        case "verdocs-kba-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "verdocs-ok-dialog":
+        case "verdocs-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "verdocs-otp-dialog":
+        case "verdocs-ok-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "verdocs-passcode-dialog":
+        case "verdocs-otp-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "verdocs-portal":
+        case "verdocs-passcode-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "verdocs-question-dialog":
+        case "verdocs-portal":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "verdocs-radio-button":
+        case "verdocs-question-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "verdocs-select-input":
+        case "verdocs-radio-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "verdocs-sign-footer":
+        case "verdocs-select-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "verdocs-signing-progress":
+        case "verdocs-sign-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }