@verdocs/web-sdk 5.0.41 → 5.0.43

package/dist/components/{p-7481c7db.js → p-b474c324.js}

@@ -7,7 +7,7 @@ import { d as defineCustomElement$m } from './p-96774726.js';
 import { d as defineCustomElement$l } from './p-39480096.js';
 import { d as defineCustomElement$k } from './p-eb4bd2d6.js';
 import { d as defineCustomElement$j } from './p-e85acbfb.js';
-import { d as defineCustomElement$i } from './p-52c195dd.js';
+import { d as defineCustomElement$i } from './p-92cce3dc.js';
 import { d as defineCustomElement$h } from './p-1a83e46c.js';
 import { d as defineCustomElement$g } from './p-f66d6a07.js';
 import { d as defineCustomElement$f } from './p-9a24561a.js';
@@ -383,4 +383,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateDocumentPage as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-7481c7db.js.map
+//# sourceMappingURL=p-b474c324.js.map

package/dist/components/{p-7481c7db.js.map → p-b474c324.js.map}

@@ -1 +1 @@
-{"file":"p-7481c7db.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,8BAA8B,GAAG,g3BAAg3B,CAAC;AACx5B,0CAAe,8BAA8B;;MCkBhC,2BAA2B;IALxC;;;;QAMU,uBAAkB,GAAG,IAAI,CAAC;;;;QAQ1B,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;;;;QAKzD,aAAQ,GAAG,KAAK,CAAC;;;;QAKjB,aAAQ,GAAG,KAAK,CAAC;;;;QAKjB,SAAI,GAAG,KAAK,CAAC;;;;QAKb,eAAU,GAAW,EAAE,CAAC;;;;QAKxB,eAAU,GAAW,EAAE,CAAC;;;;QAKxB,eAAU,GAAW,CAAC,CAAC;;;;;QAMvB,iBAAY,GAAW,GAAG,CAAC;;;;;QAMZ,kBAAa,GAAW,GAAG,CAAC;;;;;;;;;;;;;QAc3C,WAAM,GAAiB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC,CAAC,CAAC;QAOvD,gBAAW,GAAG,yBAAyB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;QACrF,kBAAa,GAAW,IAAI,CAAC,YAAY,CAAC;QAC1C,mBAAc,GAAW,IAAI,CAAC,aAAa,CAAC;QAC5C,iBAAY,GAAW,IAAI,CAAC,YAAY,CAAC;QACzC,kBAAa,GAAW,IAAI,CAAC,aAAa,CAAC;QAC3C,gBAAW,GAAW,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;QAC7D,0BAAqB,GAAG,IAAI,CAAC;QAC7B,mBAAc,GAAG,EAAE,CAAC;QACpB,WAAM,GAAG,CAAC,CAAC;QACX,WAAM,GAAG,CAAC,CAAC;QAEX,YAAO,GAAG,IAAI,CAAC;QACf,aAAQ,GAAqB,IAAI,CAAC;KAyT5C;IAvTC,MAAM,iBAAiB;QACrB,IAAI,CAAC,cAAc,GAAG,MAAM,iCAAiC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/G,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CACtC,QAAQ,CAAC,OAAO;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBAC9C,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,IAAI,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;aAChF;YAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC7C;IAED,kBAAkB;;QAEhB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,MAAM,gBAAgB;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,KAAK,CAAC,SAAS,CACb,WAAW,EACX,IAAI,CAAC,UAAU,EACf,MAAM,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,EACjD,KAAK,EACL,CAAC,QAAmB;YAClB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB,CACF,CAAC;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACjD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;KACF;IAED,kBAAkB;;;QAGhB,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC9B,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACnC,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;QACtD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;SACtB;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC;QACxD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;SACtB;QAED,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;;YAErB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,cAAc,EAAE,IAAI,CAAC,cAAc;YACnC,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,MAAM;YACN,MAAM;SACP,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,QACE,EAAC,IAAI,QACH,WAAK,GAAG,EAAC,2DAA2D,EAAC,KAAK,EAAC,aAAa,EAAC,GAAG,EAAC,kBAAkB,GAAG,CAC7G,EACP;SACH;QAED,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC;QAE1C,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,MAAM,EAAE,EAAC,IACpE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK;;YACpB,OAAA,KAAK,CAAC,IAAI,KAAK,KAAK,IAClB,WAAK,KAAK,EAAC,sCAAsC,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAC,MAAM,EAAC,IACvG,KAAK,CAAC,IAAI,KAAK,UAAU;gBACxB,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,KAAI,EAAE;qBACzB,MAAM,CAAC,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC;qBACxD,GAAG,CAAC,KAAK;;oBACR,MAAM,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;oBAC7B,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,GAAG,KAAK,CAAC;oBACpC,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAC,GAAG,IAAI,CAAC;oBAChF,IAAI,CAAA,MAAA,KAAK,CAAC,SAAS,CAAC,0CAAE,OAAO,IAAG,CAAC,IAAI,CAAA,MAAA,KAAK,CAAC,UAAU,CAAC,0CAAE,OAAO,IAAG,CAAC,EAAE;wBACnE,IAAI,GAAG,UAAU,CAAC;wBAClB,SAAS,GAAG,IAAI,CAAC;qBAClB;oBACD,QAAQ,IAAW;wBACjB,KAAK,SAAS;4BACZ,QACE,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,UAAU;4BACb,QACE,8BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,MAAM;4BACT,QACE,0BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,YAAY;4BACf,QACE,gCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,UAAU;4BACb,QACE,8BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,SAAS;4BACZ,QACE,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,WAAW;4BACd,QACE,+BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,GACxD,EACF;wBACJ,KAAK,WAAW;4BACd,QACE,+BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,UAAU;4BACb,QACE,8BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ,KAAK,OAAO;4BACV,QACE,2BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAI,EACf,MAAM,EAAC,UAAU,EACjB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,GAC9C,EACF;wBACJ;4BACE,OAAO,EAAC,QAAQ,QAAE,IAAI,CAAY,CAAC;qBACtC;iBACF,CAAC,CACF,IACJ,IAAI,CAAC,cAAc,IACrB,WACE,KAAK,EAAC,0CAA0C,EAChD,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,EAAE,EACvC,GAAG,EAAE,IAAI,CAAC,cAAc,EACxB,GAAG,EAAE,QAAQ,IAAI,CAAC,UAAU,EAAE,iBACjB,IAAI,EACjB,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,CAAC,CAAM;;;;;;;;oBAQb,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;oBAC1C,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC;oBAC5C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;oBAC1D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;oBAC1D,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;iBAC/D,GACD,KAEF,cAAW,CACZ,CAAA;SAAA,CACF,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-template-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n\n  .placeholder {\n    opacity: 0.1;\n    width: 612px;\n    height: 792px;\n    box-shadow: 0 0 10px 5px #0000000f;\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-template-document-page',\n  styleUrl: 'verdocs-template-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n  private templateListenerId = null;\n  private resizeObserver: ResizeObserver;\n\n  @Element() container: HTMLElement;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Whether the fields should be editable (Builder)\n   */\n  @Prop() editable = false;\n\n  /**\n   * Whether the fields should be disabled (Builder)\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the field are interactable (done/submitted disables this)\n   */\n  @Prop() done = false;\n\n  /**\n   * The ID of the template the document is for.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n  @State() skipFirstNotification = true;\n  @State() pageDisplayUri = '';\n  @State() xScale = 1;\n  @State() yScale = 1;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n    this.listenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  componentDidUpdate() {\n    // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n    this.notifyRenderedSize();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\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  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    const xScale = this.renderedWidth / this.virtualWidth;\n    if (this.xScale !== xScale) {\n      this.xScale = xScale;\n    }\n\n    const yScale = this.renderedHeight / this.virtualHeight;\n    if (this.yScale !== yScale) {\n      this.yScale = yScale;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale,\n      yScale,\n    });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n        </Host>\n      );\n    }\n\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n              {layer.name === 'controls' &&\n                (this.template?.fields || [])\n                  .filter(field => field && field.page === this.pageNumber)\n                  .map(field => {\n                    const id = getFieldId(field);\n                    let {name, type, multiline} = field;\n                    const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n                    if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n                      type = 'textarea';\n                      multiline = true;\n                    }\n                    switch (type as any) {\n                      case 'textbox':\n                        return (\n                          <verdocs-field-textbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            multiline={multiline}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'textarea':\n                        return (\n                          <verdocs-field-textarea\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'date':\n                        return (\n                          <verdocs-field-date\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'attachment':\n                        return (\n                          <verdocs-field-attachment\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'dropdown':\n                        return (\n                          <verdocs-field-dropdown\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'initial':\n                        return (\n                          <verdocs-field-initial\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'signature':\n                        return (\n                          <verdocs-field-signature\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, this.xScale, this.yScale)}\n                          />\n                        );\n                      case 'timestamp':\n                        return (\n                          <verdocs-field-timestamp\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'checkbox':\n                        return (\n                          <verdocs-field-checkbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'radio':\n                        return (\n                          <verdocs-field-radio\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      default:\n                        return <Fragment>{name}</Fragment>;\n                    }\n                  })}\n            </div>\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-template-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-b474c324.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-document-page/verdocs-template-document-page.scss?tag=verdocs-template-document-page","src/components/templates/verdocs-template-document-page/verdocs-template-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-template-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      width: 100%;\n    }\n  }\n\n  .placeholder {\n    opacity: 0.1;\n    width: 612px;\n    height: 792px;\n    box-shadow: 0 0 10px 5px #0000000f;\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {getTemplate, getTemplateDocumentPageDisplayUri, type ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element, Fragment} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\nimport {getControlStyles, getFieldId} from '../../../utils/utils';\nimport {throttle} from '../../../utils/utils';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-template-document-page',\n  styleUrl: 'verdocs-template-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateDocumentPage {\n  private templateListenerId = null;\n  private resizeObserver: ResizeObserver;\n\n  @Element() container: HTMLElement;\n\n  /**\n   * The endpoint to load from.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Whether the fields should be editable (Builder)\n   */\n  @Prop() editable = false;\n\n  /**\n   * Whether the fields should be disabled (Builder)\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the field are interactable (done/submitted disables this)\n   */\n  @Prop() done = false;\n\n  /**\n   * The ID of the template the document is for.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The ID of the document to display.\n   */\n  @Prop() documentId: string = '';\n\n  /**\n   * The page number being rendered. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop({mutable: true}) virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n  @State() skipFirstNotification = true;\n  @State() pageDisplayUri = '';\n  @State() xScale = 1;\n  @State() yScale = 1;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);\n    this.listenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(\n      throttle(entries => {\n        for (const entry of entries) {\n          const renderedWidth = entry.contentRect.width;\n          this.renderedWidth = renderedWidth;\n          this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n        }\n\n        this.notifyRenderedSize();\n      }, 100),\n    );\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  componentDidUpdate() {\n    // This is fired when fields are updated and triggers the parent to re-attach behaviors like drag-and-drop\n    this.notifyRenderedSize();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\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  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    const xScale = this.renderedWidth / this.virtualWidth;\n    if (this.xScale !== xScale) {\n      this.xScale = xScale;\n    }\n\n    const yScale = this.renderedHeight / this.virtualHeight;\n    if (this.yScale !== yScale) {\n      this.yScale = yScale;\n    }\n\n    this.pageRendered.emit({\n      // container: this.container,\n      containerId: this.containerId,\n      documentId: this.documentId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      aspectRatio: this.aspectRatio,\n      xScale,\n      yScale,\n    });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <img src=\"https://public-assets.verdocs.com/loading-placeholder.png\" class=\"placeholder\" alt=\"Placeholder page\" />\n        </Host>\n      );\n    }\n\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height, flex: `0 0 ${height}`}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-template-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}}>\n              {layer.name === 'controls' &&\n                (this.template?.fields || [])\n                  .filter(field => field && field.page === this.pageNumber)\n                  .map(field => {\n                    const id = getFieldId(field);\n                    let {name, type, multiline} = field;\n                    const {xScale, yScale, templateId, editable, disabled, done, pageNumber} = this;\n                    if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n                      type = 'textarea';\n                      multiline = true;\n                    }\n                    switch (type as any) {\n                      case 'textbox':\n                        return (\n                          <verdocs-field-textbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            multiline={multiline}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'textarea':\n                        return (\n                          <verdocs-field-textarea\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'date':\n                        return (\n                          <verdocs-field-date\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'attachment':\n                        return (\n                          <verdocs-field-attachment\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'dropdown':\n                        return (\n                          <verdocs-field-dropdown\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'initial':\n                        return (\n                          <verdocs-field-initial\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'signature':\n                        return (\n                          <verdocs-field-signature\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, this.xScale, this.yScale)}\n                          />\n                        );\n                      case 'timestamp':\n                        return (\n                          <verdocs-field-timestamp\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'checkbox':\n                        return (\n                          <verdocs-field-checkbox\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      case 'radio':\n                        return (\n                          <verdocs-field-radio\n                            id={id}\n                            fieldname={name}\n                            source=\"template\"\n                            sourceid={templateId}\n                            editable={editable}\n                            disabled={disabled}\n                            done={done}\n                            xscale={xScale}\n                            yscale={yScale}\n                            pagenumber={pageNumber}\n                            style={getControlStyles(field, xScale, yScale)}\n                          />\n                        );\n                      default:\n                        return <Fragment>{name}</Fragment>;\n                    }\n                  })}\n            </div>\n          ) : this.pageDisplayUri ? (\n            <img\n              class=\"verdocs-template-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              src={this.pageDisplayUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              loading=\"lazy\"\n              onLoad={(e: any) => {\n                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that\n                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).\n                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values\n                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the\n                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the\n                // aspect ratio to adjust the \"virtual\" height in case the page is not 8.5\"x11\".\n                // TODO: Store this in the DB with each page.\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                this.virtualHeight = this.virtualWidth / this.aspectRatio;\n                this.renderedHeight = e.target.offsetWidth / this.aspectRatio;\n              }}\n            />\n          ) : (\n            <div></div>\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-build.js

@@ -6,10 +6,10 @@ import { d as defineCustomElement$H } from './p-f5ccf125.js';
 import { d as defineCustomElement$G } from './p-84929e4a.js';
 import { d as defineCustomElement$F } from './p-96774726.js';
 import { d as defineCustomElement$E } from './p-39480096.js';
-import { d as defineCustomElement$D } from './p-6bfb8eba.js';
+import { d as defineCustomElement$D } from './p-73a39d5a.js';
 import { d as defineCustomElement$C } from './p-eb4bd2d6.js';
 import { d as defineCustomElement$B } from './p-e85acbfb.js';
-import { d as defineCustomElement$A } from './p-52c195dd.js';
+import { d as defineCustomElement$A } from './p-92cce3dc.js';
 import { d as defineCustomElement$z } from './p-1a83e46c.js';
 import { d as defineCustomElement$y } from './p-f66d6a07.js';
 import { d as defineCustomElement$x } from './p-9a24561a.js';
@@ -25,19 +25,19 @@ import { d as defineCustomElement$o } from './p-bebd9b19.js';
 import { d as defineCustomElement$n } from './p-a50f7982.js';
 import { d as defineCustomElement$m } from './p-081465e0.js';
 import { d as defineCustomElement$l } from './p-ca16a8ac.js';
-import { d as defineCustomElement$k } from './p-36368807.js';
+import { d as defineCustomElement$k } from './p-4a04090c.js';
 import { d as defineCustomElement$j } from './p-44e14cb9.js';
 import { d as defineCustomElement$i } from './p-8af753b4.js';
-import { d as defineCustomElement$h } from './p-c1d312d8.js';
+import { d as defineCustomElement$h } from './p-4a4bf38c.js';
 import { d as defineCustomElement$g } from './p-51c8b927.js';
 import { d as defineCustomElement$f } from './p-61a2c23a.js';
 import { d as defineCustomElement$e } from './p-e1b7ca10.js';
 import { d as defineCustomElement$d } from './p-1d98c6e0.js';
 import { d as defineCustomElement$c } from './p-43b8738f.js';
 import { d as defineCustomElement$b } from './p-710ca15d.js';
-import { d as defineCustomElement$a } from './p-7481c7db.js';
+import { d as defineCustomElement$a } from './p-b474c324.js';
 import { d as defineCustomElement$9 } from './p-4dbb9783.js';
-import { d as defineCustomElement$8 } from './p-795b4192.js';
+import { d as defineCustomElement$8 } from './p-91eae04c.js';
 import { d as defineCustomElement$7 } from './p-444a3bdf.js';
 import { d as defineCustomElement$6 } from './p-5d578b83.js';
 import { d as defineCustomElement$5 } from './p-55edf913.js';

package/dist/components/verdocs-contact-picker.js

@@ -1,4 +1,4 @@
-import { V as VerdocsContactPicker$1, d as defineCustomElement$1 } from './p-6bfb8eba.js';
+import { V as VerdocsContactPicker$1, d as defineCustomElement$1 } from './p-73a39d5a.js';
 
 const VerdocsContactPicker = VerdocsContactPicker$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-52c195dd.js';
+import { V as VerdocsFieldDate$1, d as defineCustomElement$1 } from './p-92cce3dc.js';
 
 const VerdocsFieldDate = VerdocsFieldDate$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-36368807.js';
+import { V as VerdocsPreview$1, d as defineCustomElement$1 } from './p-4a04090c.js';
 
 const VerdocsPreview = VerdocsPreview$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-c1d312d8.js';
+import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-4a4bf38c.js';
 
 const VerdocsSend = VerdocsSend$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-sign.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-1f51246d.js';
-import { VerdocsEndpoint, startSigningSession, getKbaStep, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, sortFields, envelopeRecipientSubmit, getEnvelope, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, submitKbaPin, submitKbaIdentity, submitKbaChallengeResponse, integerSequence } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, startSigningSession, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, sortFields, envelopeRecipientSubmit, getEnvelope, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, authenticateSigner, integerSequence } from '@verdocs/js-sdk';
 import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './p-af5ecc92.js';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
@@ -80,7 +80,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         this.showFinishLater = false;
         this.agreed = false;
         this.documentsSingularPlural = 'document';
-        this.kbaStep = '';
+        // TODO
+        // @State() authStep: TRecipientAuthMethod | null = null;
+        this.authStep = null;
+        this.authDetails = null;
         this.kbaQuestions = [];
         this.showSpinner = false;
         this.kbaChoices = [];
@@ -128,15 +131,29 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             }
             this.recipientIndex = this.roleNames.findIndex(roleName => roleName == this.roleId);
             if (this.recipientIndex > -1) {
+                console.log('[SIGN] Processing recipient', this.authStep);
                 this.recipient = this.sortedRecipients[this.recipientIndex];
                 this.agreed = this.recipient.agreed;
+                this.submitted = this.recipient.status === 'submitted';
+                this.authStep = this.recipient.auth_step;
+                if (this.authStep) {
+                    console.log('[SIGN] Authentication required', this.authStep);
+                }
+                const auth_method_states = (this.recipient.auth_method_states || {});
+                if (Object.values(auth_method_states).includes('failed')) {
+                    this.fatalErrorHeader = 'Recipient Verification Failed';
+                    this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
+                    this.isDone = true;
+                }
+                // TODO
+                //               this.kbaQuestions = (r as any).questions?.question || [];
+                //               this.kbaChoices = [];
             }
             else {
                 console.warn('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
             }
             // TODO: Envelope "complete" | "declined" | "canceled"
             // TODO: Recipient "canceled"
-            this.submitted = this.recipient.status === 'submitted';
             this.isDone = this.submitted;
             this.showDone = this.submitted;
             if (this.envelope.status === 'canceled') {
@@ -152,24 +169,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             }
             this.checkRecipientFields();
             (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
-            if (!this.isDone) {
-                getKbaStep(this.endpoint, this.envelopeId, this.roleId)
-                    .then(r => {
-                    var _a;
-                    console.log('[SIGN] KBA Step', r);
-                    this.kbaStep = r.kba_step;
-                    if (this.kbaStep === 'failed') {
-                        this.fatalErrorHeader = 'Identity Verification Failed';
-                        this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
-                        this.isDone = true;
-                    }
-                    else {
-                        this.kbaQuestions = ((_a = r.questions) === null || _a === void 0 ? void 0 : _a.question) || [];
-                        this.kbaChoices = [];
-                    }
-                })
-                    .catch(e => console.log('Error getting KBA step', e));
-            }
         }
         catch (e) {
             console.log('[SIGN] Error with signing session', e);
@@ -588,7 +587,29 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         });
         this.checkRecipientFields();
     }
+    handleAuthenticateSigner(params) {
+        console.log('[SIGN] Submitting authentication step', params);
+        authenticateSigner(this.endpoint, params)
+            .then(r => {
+            console.log('[SIGN] Authentication successful', r);
+            this.authStep = r.auth_step;
+            this.authDetails = r.auth_details;
+        })
+            .catch(e => {
+            var _a, _b, _c, _d, _e;
+            console.log('[SIGN] Error submitting authentication step', e);
+            if ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.includes('failed')) {
+                this.fatalErrorHeader = 'Recipient Verification Failed';
+                this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
+                this.isDone = true;
+            }
+            else {
+                VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
+            }
+        });
+    }
     render() {
+        console.log('[SIGN] Rendering', { authStep: this.authStep });
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Sorry, your invite code is invalid or has expired. Please check your email for an updated invitation, or contact the sender.`, buttonLabel: "OK", onNext: () => {
                     window.location.reload();
@@ -611,86 +632,91 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         if (!this.agreed) {
             return (h(Host, { class: "agreed" }, 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", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), "."))))));
         }
-        if (this.kbaStep === 'pin') {
-            return (h(Host, { class: "kba" }, 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", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, h("verdocs-kba-dialog", { mode: "text", step: 1, steps: 1, helptitle: "Document is protected by a PIN code", helptext: "Please enter your PIN code to proceed. If you do not have one, please contact the sender.", label: "PIN Code", onNext: async (e) => {
-                    submitKbaPin(this.endpoint, this.envelopeId, this.roleId, e.detail)
-                        .then(r => {
-                        console.log('[SIGN] PIN code submission result', r);
-                        if (r.kba_step === 'complete') {
-                            this.kbaStep = '';
-                        }
-                    })
-                        .catch(e => {
-                        var _a, _b, _c, _d;
-                        console.log('[SIGN] Error submitting PIN', e);
-                        if (((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === 'Rejecting PIN submission, too many attempts') {
-                            this.fatalErrorHeader = 'PIN Verification Failed';
-                            this.fatalErrorMessage = 'Too many failed attempts. The sender has been notified.';
-                            this.isDone = true;
-                        }
-                        else {
-                            VerdocsToast(((_d = (_c = e.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error) || 'Unable to verify PIN code. Please try again.', { style: 'error' });
-                        }
-                    });
-                } })))));
+        if (this.authStep === 'passcode') {
+            return (h(Host, { class: "kba" }, 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", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, h("verdocs-kba-dialog", { mode: "text", step: 1, steps: 1, helptitle: "Document is protected by a Passcode", helptext: "Please enter your Passcode to proceed. If you do not have one, please contact the sender.", label: "Passcode", onNext: e => this.handleAuthenticateSigner({ auth_method: 'passcode', code: e.detail }) })))));
         }
-        if (this.kbaStep === 'identity') {
+        if (this.authStep === 'kba') {
             return (h(Host, { class: "kba" }, 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", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, h("verdocs-kba-dialog", { mode: "identity", helptitle: "Document requires identity verification", helptext: "Please complete your contact details to proceed.", recipient: this.recipient, onNext: async (e) => {
                     const recipDetails = e.detail;
-                    submitKbaIdentity(this.endpoint, this.envelopeId, this.roleId, {
-                        firstName: recipDetails.first_name,
-                        lastName: recipDetails.last_name,
+                    this.handleAuthenticateSigner({
+                        auth_method: 'kba',
+                        first_name: recipDetails.first_name,
+                        last_name: recipDetails.last_name,
                         address: recipDetails.address,
                         city: recipDetails.city,
                         state: recipDetails.state,
                         zip: recipDetails.zip,
-                        ssnLast4: recipDetails.ssn_last_4,
-                    })
-                        .then(r => {
-                        console.log('[SIGN] Identity submission result', r);
-                        this.kbaStep = r.kba_step;
-                    })
-                        .catch(e => {
-                        var _a, _b;
-                        console.log('[SIGN] Error submitting identity', e);
-                        VerdocsToast(((_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) || 'Unable to verify identity.', { style: 'error' });
+                        ssn_last_4: recipDetails.ssn_last_4,
+                        dob: recipDetails.dob,
                     });
                 } })))));
         }
-        if (this.kbaStep === 'challenge') {
-            const questionNumber = this.kbaChoices.length;
-            const kbaQuestion = this.kbaQuestions[questionNumber];
-            return (h(Host, { class: "kba" }, 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", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, this.kbaChoices.length >= this.kbaQuestions.length ? (h("verdocs-spinner", null)) : (h("verdocs-kba-dialog", { mode: "choice", helptitle: "Your identity requires additional verification", helptext: (kbaQuestion === null || kbaQuestion === void 0 ? void 0 : kbaQuestion.prompt) || 'Please select one of the options below.', choices: (kbaQuestion === null || kbaQuestion === void 0 ? void 0 : kbaQuestion.answer) || ['Skip Question'], step: questionNumber + 1, steps: this.kbaQuestions.length, onNext: async (e) => {
-                    var _a, _b, _c;
-                    const answer = e.detail;
-                    this.kbaChoices = [...this.kbaChoices, answer];
-                    if (this.kbaChoices.length >= this.kbaQuestions.length) {
-                        const responses = this.kbaQuestions.map((q, i) => ({ type: q.type, answer: this.kbaChoices[i] }));
-                        console.log('Submitting KBA responses', this.kbaChoices, responses);
-                        try {
-                            const response = await submitKbaChallengeResponse(this.endpoint, this.envelopeId, this.roleId, responses);
-                            console.log('KBA challenge response', response);
-                            this.kbaStep = response.kba_step;
-                            if (this.kbaStep === 'failed') {
-                                this.fatalErrorHeader = 'Identity Verification Failed';
-                                this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
-                                this.isDone = true;
-                            }
-                            else {
-                                this.kbaQuestions = ((_a = response.questions) === null || _a === void 0 ? void 0 : _a.question) || [];
-                                this.kbaChoices = [];
-                            }
-                        }
-                        catch (e) {
-                            console.log('Error submitting KBA challenge', e);
-                            this.kbaStep = '';
-                            this.fatalErrorHeader = 'Unable to Verify Identity';
-                            this.fatalErrorMessage = ((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) || 'Please try again later.';
-                            this.isDone = true;
-                        }
-                    }
-                } }))))));
-        }
+        // if (this.kbaStep === 'challenge') {
+        //   const questionNumber = this.kbaChoices.length;
+        //   const kbaQuestion = this.kbaQuestions[questionNumber];
+        //   return (
+        //     <Host class="kba">
+        //       <div id="verdocs-sign-header">
+        //         <div class="inner">
+        //           <img src="https://verdocs.com/assets/white-logo.svg" alt="Verdocs Logo" class="logo" />
+        //           <div class="title">{this.envelope.name}</div>
+        //         </div>
+        //       </div>
+        //
+        //       <div class="document" style={{paddingTop: '15px'}}>
+        //         <img
+        //           src="https://public-assets.verdocs.com/loading-placeholder.png"
+        //           style={{width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px'}}
+        //           alt="Placeholder page"
+        //         />
+        //       </div>
+        //
+        //       <div class="cover">
+        //         <div class="kba">
+        //           {this.kbaChoices.length >= this.kbaQuestions.length ? (
+        //             <verdocs-spinner />
+        //           ) : (
+        //             <verdocs-kba-dialog
+        //               mode="choice"
+        //               helptitle="Your identity requires additional verification"
+        //               helptext={kbaQuestion?.prompt || 'Please select one of the options below.'}
+        //               choices={kbaQuestion?.answer || ['Skip Question']}
+        //               step={questionNumber + 1}
+        //               steps={this.kbaQuestions.length}
+        //               onNext={async (e: any) => {
+        //                 const answer = e.detail as string;
+        //                 this.kbaChoices = [...this.kbaChoices, answer];
+        //                 if (this.kbaChoices.length >= this.kbaQuestions.length) {
+        //                   const responses = this.kbaQuestions.map((q, i) => ({type: q.type, answer: this.kbaChoices[i]}));
+        //                   console.log('Submitting KBA responses', this.kbaChoices, responses);
+        //                   try {
+        //                     const response = await submitKbaChallengeResponse(this.endpoint, this.envelopeId, this.roleId, responses);
+        //                     console.log('KBA challenge response', response);
+        //                     this.kbaStep = response.kba_step;
+        //                     if (this.kbaStep === 'failed') {
+        //                       this.fatalErrorHeader = 'Identity Verification Failed';
+        //                       this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
+        //                       this.isDone = true;
+        //                     } else {
+        //                       this.kbaQuestions = (response as any).questions?.question || [];
+        //                       this.kbaChoices = [];
+        //                     }
+        //                   } catch (e) {
+        //                     console.log('Error submitting KBA challenge', e);
+        //                     this.kbaStep = '';
+        //                     this.fatalErrorHeader = 'Unable to Verify Identity';
+        //                     this.fatalErrorMessage = e.response?.data?.error || 'Please try again later.';
+        //                     this.isDone = true;
+        //                   }
+        //                 }
+        //               }}
+        //             />
+        //           )}
+        //         </div>
+        //       </div>
+        //     </Host>
+        //   );
+        // }
         return (h(Host, null, 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, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
@@ -739,7 +765,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         "showFinishLater": [32],
         "agreed": [32],
         "documentsSingularPlural": [32],
-        "kbaStep": [32],
+        "authStep": [32],
+        "authDetails": [32],
         "kbaQuestions": [32],
         "showSpinner": [32],
         "kbaChoices": [32],