@verdocs/web-sdk 5.3.4 → 5.4.1

package/dist/components/{p-BCfTxJfb.js → p-B0-ZXlBg.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-cuwa7Els.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D16h8pzh.js';
 import { c as createPopper } from './p-BfP9ezJQ.js';
 
 const verdocsToolbarIconCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";
@@ -56,7 +56,7 @@ const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class VerdocsToolbar
         return (h(Host, { key: '656b7717e9f46bf4d331a6e60f0aabcaae611018', class: {} }, h("div", { key: '4c14eeea26b0dced9d82e26e909fc1e85d11cadd', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '281a88b6d6fce3950a5beb24c56d3399f0125cfa', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'f0618b5716de254e43eecd233cc9d882a895e124', "data-popper-arrow": "true", class: "arrow" }))));
     }
     static get style() { return verdocsToolbarIconCss; }
-}, [0, "verdocs-toolbar-icon", {
+}, [256, "verdocs-toolbar-icon", {
         "text": [1],
         "icon": [1],
         "placement": [1],
@@ -77,6 +77,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsToolbarIcon as V, defineCustomElement as d };
-//# sourceMappingURL=p-BCfTxJfb.js.map
+//# sourceMappingURL=p-B0-ZXlBg.js.map
 
-//# sourceMappingURL=p-BCfTxJfb.js.map
+//# sourceMappingURL=p-B0-ZXlBg.js.map

package/dist/components/{p-BCfTxJfb.js.map → p-B0-ZXlBg.js.map}

@@ -1 +1 @@
-{"file":"p-BCfTxJfb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  //display: inline-block;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 20000;\n    white-space: nowrap;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n\n    // For the floating menu\n    &[data-popper-placement^='left'] {\n      //margin-right: 22px !important;\n      padding: 3px 10px;\n\n      & > .arrow {\n        right: -1px;\n      }\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\nimport {Placement} from '@popperjs/core/lib/enums';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n *\n * ```ts\n * <verdocs-toolbar-icon text=\"Sample tooltip text\" icon={CalendarIcon} />\n * ```\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Override the Popper \"placement\" setting\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      placement: this.placement,\n      modifiers: this.placement === 'left' ? [{name: 'offset', options: {offset: [0, 20]}}] : [],\n    });\n    // placement: 'top-end',\n    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    // });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement={this.placement} ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B0-ZXlBg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  //display: inline-block;\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 20000;\n    white-space: nowrap;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n\n    // For the floating menu\n    &[data-popper-placement^='left'] {\n      //margin-right: 22px !important;\n      padding: 3px 10px;\n\n      & > .arrow {\n        right: -1px;\n      }\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\nimport {Placement} from '@popperjs/core/lib/enums';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n *\n * ```ts\n * <verdocs-toolbar-icon text=\"Sample tooltip text\" icon={CalendarIcon} />\n * ```\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Override the Popper \"placement\" setting\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      placement: this.placement,\n      modifiers: this.placement === 'left' ? [{name: 'offset', options: {offset: [0, 20]}}] : [],\n    });\n    // placement: 'top-end',\n    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    // });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement={this.placement} ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CGQDpB88.js → p-B5fnyMp7.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
 import { VerdocsEndpoint, getTemplate, updateTemplateRole, deleteTemplateRole, isValidEmail } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-C1sRVZWv.js';
 import { S as Store } from './p-DmsV595e.js';
-import { d as defineCustomElement$4 } from './p-_nUQ5iEk.js';
-import { d as defineCustomElement$3 } from './p-IhdX5vVL.js';
-import { d as defineCustomElement$2 } from './p-dDTMckyL.js';
-import { d as defineCustomElement$1 } from './p-BDmKp20X.js';
+import { d as defineCustomElement$4 } from './p-BNrp2UP2.js';
+import { d as defineCustomElement$3 } from './p-BGZ_owBm.js';
+import { d as defineCustomElement$2 } from './p-Cy-AXBKH.js';
+import { d as defineCustomElement$1 } from './p-C_SISdpZ.js';
 
 const verdocsTemplateRolePropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-role-properties{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form{gap:15px;padding:20px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-role-properties form .instructions{margin:7px 0 0 0;font-size:12px;font-style:italic}verdocs-template-role-properties form .input-label{display:block;font-size:14px;-ms-flex:0 0 100px;flex:0 0 100px;font-weight:700;margin:0 0 4px 0;color:#555570}verdocs-template-role-properties form .first-last{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form verdocs-help-icon{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-role-properties verdocs-select-input label{display:block}verdocs-template-role-properties verdocs-text-input{margin:0}verdocs-template-role-properties verdocs-text-input label{display:block}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;padding:0 6px;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}";
 
@@ -160,34 +160,34 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class Ver
         const hasFields = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field.role_name === this.roleName);
         // Either all three should be empty, or all three need to be filled
         const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);
-        return (h(Host, { key: 'bcd42a969b8c8bc1e26230ee030fe3ecce41d19c' }, h("form", { key: 'c76c7ec1f28ecd3c5def9fd9909f623c8af54331', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'bfa5a347218860bd3a84c1a8b56f73b144c77635' }, h("verdocs-text-input", { key: 'c3be39c7b598497b508deca0524aebb483290fec', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
+        return (h(Host, { key: 'd4c37fca9a9c22c9f3003ea2a2c1a070117c8501' }, h("form", { key: 'd28575d04fecc59fcc121361eabd5461e001f12a', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'be7250c9e2ff836659df4cb0cb981157669e7e14' }, h("verdocs-text-input", { key: '723db8c1d20939240cb8a9f84361b814beca6a17', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), hasFields && h("div", { key: 'ffeef355eea5b39554c33f3921601ac052c17946', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: 'a6da7e387291e2dec0a8d4a53e914f2288280635' }, h("div", { key: '83a6ce83779b2598d698dfa975fcb6264fb66fbe', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: 'bf16d0f3886c28e83c55051e2d1ef89f3ac7472b', value: this.type, options: [
+            } }), hasFields && h("div", { key: '332f5540e44ef06c92996bcb8950626557df8150', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '56bf537b21242728085f77c24a41fb4a49213be5' }, h("div", { key: '693f574ea0f0b425f82cb6edbb3c7783233c6696', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '04ea33db6d24942f2a7c3b723c54b1336dac23ff', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } })), h("div", { key: '9f584a0f03b9f60ccb514d8a36df58b89d80dadd' }, h("div", { key: '24b0faf2816414d12da2d70199896ab878173197', class: "input-label" }, "Default Contact Info:"), h("div", { key: 'f37d35e63c2e80316db4d89e5b2a36cf900790e6', class: "first-last" }, h("verdocs-text-input", { key: 'e467a1abdd69b5873acf97a4752567f798d93429', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
+            } })), h("div", { key: '3411058195a726713ebdba433be7c072cd2be5dd' }, h("div", { key: '41b5f721eb1ff092ba566f64b6754bc5e90e005d', class: "input-label" }, "Default Contact Info:"), h("div", { key: '5d408963fe123ecca0f887352851e249f58e0757', class: "first-last" }, h("verdocs-text-input", { key: 'fbb4d52f70d1d7eb3c3d6e90a7fb4d657e2832d8', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
                 this.first_name = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: '6a29956cfaa7094718bbc668d8818edaf83ed7db', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: 'c90a3b9a7dc20341f927242ba1f07e74e385a0d6', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
                 this.last_name = e.target.value;
                 this.dirty = true;
-            } }))), h("div", { key: '023b95f0efb19db5e1663f63275f3fe1cf66cafa' }, h("verdocs-text-input", { key: '57f2a9693e3b7f010ec361c558610689583da297', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
+            } }))), h("div", { key: '8e2f1a1c777c056e8a5f0cd85752fcba307c97bf' }, h("verdocs-text-input", { key: 'ed96c96a0953fee944a4901179ce756c59c6d628', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: '3f4884d843f4363ea4d462a651b9bd2fcebc62f7', style: { height: '15px' } }), h("div", { key: 'b57692a25f3516a8b3b32e167dffe165ed61bbc7' }, h("verdocs-text-input", { key: 'cbe17684a4cca331e9816306e7a8302572baad2d', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
+            } }), h("div", { key: '57e9f058b09be51fb2fea5448db9fa0daf7dfb93', style: { height: '15px' } }), h("div", { key: 'ac2b3ab57b35d263f7ac61b1f53b7232d646ccca' }, h("verdocs-text-input", { key: 'a50deda8d68c2092c762d3c38e3a6c891b4a14d3', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
             // helpText="The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template."
             placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }))), h("div", { key: 'a23f985d88ab9d119762e65949987be75249a08b', class: "buttons" }, h("button", { key: 'd3c10128fcc3dce49c0c2103313e5b153008b5de', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '677a3157abb085ae08f5af0dbf9ed9ed8baa9b55', style: { flex: '1' } }), h("verdocs-button", { key: '2fe045a4b83f78aa271d520026f0cf0d1ef37851', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
+            } }))), h("div", { key: '186dee0aa79fb21f0df7dcc6068c35e908b3ce0a', class: "buttons" }, h("button", { key: '12b015e64c80673eb3dd841289e957378e6623e9', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '0f543abb38ae9d3737456ad8608a127b3832d1b7', style: { flex: '1' } }), h("verdocs-button", { key: '6469a66eaa588ef2555302f21af22cf70dcb4496', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
     }
     static get style() { return verdocsTemplateRolePropertiesCss; }
-}, [0, "verdocs-template-role-properties", {
+}, [256, "verdocs-template-role-properties", {
         "endpoint": [16],
         "templateId": [1, "template-id"],
         "roleName": [1, "role-name"],
@@ -238,6 +238,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateRoleProperties as V, defineCustomElement as d };
-//# sourceMappingURL=p-CGQDpB88.js.map
+//# sourceMappingURL=p-B5fnyMp7.js.map
 
-//# sourceMappingURL=p-CGQDpB88.js.map
+//# sourceMappingURL=p-B5fnyMp7.js.map

package/dist/components/{p-CGQDpB88.js.map → p-B5fnyMp7.js.map}

@@ -1 +1 @@
-{"file":"p-CGQDpB88.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.scss?tag=verdocs-template-role-properties","src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-role-properties {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  form {\n    gap: 15px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n\n    .instructions {\n      margin: 7px 0 0 0;\n      font-size: 12px;\n      font-style: italic;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 14px;\n      flex: 0 0 100px;\n      font-weight: 700;\n      margin: 0 0 4px 0;\n      color: $label-color-light;\n    }\n\n    .first-last {\n      gap: 15px;\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  form verdocs-help-icon {\n    transform: scale(0.8);\n  }\n\n  verdocs-select-input {\n    //flex: 1;\n    //margin: 0;\n\n    label {\n      display: block;\n    }\n  }\n\n  verdocs-text-input {\n    margin: 0;\n\n    label {\n      display: block;\n    }\n\n    .input-label {\n      flex: 0 0 100px;\n    }\n\n    input {\n      flex: 1;\n      display: flex;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n    }\n  }\n\n  .checkbox-wrapper {\n    flex: 1;\n    display: flex;\n  }\n\n  .delete-button {\n    height: 34px;\n    display: flex;\n    padding: 0 6px;\n    cursor: pointer;\n    background: none;\n    border-radius: 4px;\n    align-items: center;\n    border: 1px solid #999;\n    justify-content: center;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    &:active {\n      background: #f3f3f3;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {deleteTemplateRole, getTemplate, isValidEmail, ITemplate, TRecipientType, updateTemplateRole, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#a50021\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\" /></svg>`;\n\n/**\n * Present an editing form suitable for adjusting template-role properties.\n */\n@Component({\n  tag: 'verdocs-template-role-properties',\n  styleUrl: 'verdocs-template-role-properties.scss',\n})\nexport class VerdocsTemplateRoleProperties {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The role name to edit.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) close: EventEmitter;\n\n  /**\n   * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\n   * the role will have already been deleted server-side.\n   */\n  @Event({composed: true}) delete: EventEmitter<{templateId: string; roleName: string}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() dirty = false;\n  @State() saving = false;\n  @State() name = '';\n  @State() type: TRecipientType = 'signer';\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() delegator = false;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[ROLES Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[ROLES] Loading tempate', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('[BUILD] Template Updated', template);\n        this.template = template;\n        this.loading = false;\n\n        const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n        if (editingRole) {\n          this.name = editingRole.name;\n          this.type = editingRole.type;\n          this.first_name = editingRole.first_name;\n          this.last_name = editingRole.last_name;\n          this.email = editingRole.email;\n          this.phone = editingRole.phone;\n          this.delegator = editingRole.delegator;\n          console.log('[ROLES] Editing role', editingRole);\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n    if (editingRole) {\n      this.name = editingRole.name;\n      this.type = editingRole.type;\n      this.first_name = editingRole.first_name;\n      this.last_name = editingRole.last_name;\n      this.email = editingRole.email;\n      this.phone = editingRole.phone;\n      this.delegator = editingRole.delegator;\n    }\n\n    this.dirty = false;\n    this.close?.emit();\n  }\n\n  async handleSave(e) {\n    e.stopPropagation();\n    this.saving = true;\n    updateTemplateRole(this.endpoint, this.templateId, this.roleName, {\n      name: this.name,\n      type: this.type,\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      delegator: this.delegator,\n    })\n      .then(async r => {\n        console.log('[ROLES] Update result', r);\n        this.saving = false;\n        this.dirty = false;\n        const newTemplate = JSON.parse(JSON.stringify(this.template));\n        const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);\n        if (roleIndex > -1) {\n          newTemplate.roles[roleIndex] = r;\n        }\n        Store.updateTemplate(this.templateId, newTemplate);\n        this.close?.emit();\n      })\n      .catch(e => {\n        console.log('[ROLES Update error', e);\n        this.saving = false;\n      });\n  }\n\n  async handleDelete(e) {\n    e.stopPropagation();\n    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {\n      deleteTemplateRole(this.endpoint, this.templateId, this.roleName)\n        .then(() => {\n          const newTemplate = JSON.parse(JSON.stringify(this.template)) as ITemplate;\n          newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);\n          Store.getTemplate(this.endpoint, this.templateId, true);\n          // Store.updateTemplate(this.templateId, newTemplate);\n          this.delete?.emit({templateId: this.templateId, roleName: this.roleName});\n          this.close?.emit();\n        })\n        .catch(e => {\n          console.log('[ROLES Deletion error', e);\n        });\n    }\n  }\n\n  render() {\n    const hasFields = (this.template?.fields || []).some(field => field.role_name === this.roleName);\n\n    // Either all three should be empty, or all three need to be filled\n    const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);\n\n    return (\n      <Host>\n        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-role-name\"\n              label=\"Role Name (Must be unique)\"\n              value={this.name}\n              autocomplete=\"off\"\n              disabled={hasFields}\n              placeholder=\"Role Name...\"\n              onInput={(e: any) => {\n                this.name = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            {hasFields && <div class=\"instructions\">This role has fields assigned and can no longer be renamed.</div>}\n            {/*<div class=\"instructions\">{hasFields ? 'This role has fields assigned and can no longer be renamed.' : 'A unique name to identify the role in the workflow.'}</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Type:</div>\n            <verdocs-select-input\n              value={this.type}\n              options={[\n                {label: 'Signer', value: 'signer'},\n                {label: 'CC', value: 'cc'},\n                {label: 'Approver', value: 'approver'},\n              ]}\n              onInput={(e: any) => {\n                this.type = e.target.value;\n                this.dirty = true;\n              }}\n            />\n            {/*<div class=\"instructions\">*/}\n            {/*  Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform*/}\n            {/*  a final review.*/}\n            {/*</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Default Contact Info:</div>\n\n            <div class=\"first-last\">\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.first_name}\n                autocomplete=\"off\"\n                placeholder=\"First...\"\n                onInput={(e: any) => {\n                  this.first_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.last_name}\n                autocomplete=\"off\"\n                placeholder=\"Last...\"\n                onInput={(e: any) => {\n                  this.last_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          </div>\n\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-recipient-email\"\n              value={this.email}\n              autocomplete=\"off\"\n              placeholder=\"Email Address...\"\n              onInput={(e: any) => {\n                this.email = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            <div style={{height: '15px'}} />\n\n            <div>\n              <verdocs-text-input\n                id=\"verdocs-recipient-phone\"\n                value={this.phone}\n                autocomplete=\"off\"\n                // helpText=\"The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.\"\n                placeholder=\"Phone Number...\"\n                onInput={(e: any) => {\n                  this.phone = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n              {/*<div class=\"instructions\">Default name and contact information. This may be changed later when creating and envelope with this template.</div>*/}\n            </div>\n          </div>\n\n          {/*<div class=\"row\">*/}\n          {/*  <div class=\"input-label\">May Delegate:</div>*/}\n          {/*  <div class=\"checkbox-wrapper\">*/}\n          {/*    <verdocs-checkbox*/}\n          {/*      checked={this.delegator}*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.delegator = e.target.checked;*/}\n          {/*        this.dirty = true;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n\n          {/*  <verdocs-help-icon text=\"If enabled, this recipient may delegate their actions to another individual.\" />*/}\n          {/*</div>*/}\n\n          <div class=\"buttons\">\n            <button class=\"delete-button\" disabled={this.dirty} onClick={e => this.handleDelete(e)} innerHTML={TrashIcon} />\n\n            <div style={{flex: '1'}} />\n\n            {/*<verdocs-button size=\"small\" variant=\"outline\" label=\"Cancel\" disabled={!this.dirty} onClick={e => this.handleCancel(e)} />*/}\n            <verdocs-button size=\"small\" label=\"Save\" disabled={!this.dirty || !isValid} onClick={e => this.handleSave(e)} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B5fnyMp7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.scss?tag=verdocs-template-role-properties","src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-role-properties {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  form {\n    gap: 15px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n\n    .instructions {\n      margin: 7px 0 0 0;\n      font-size: 12px;\n      font-style: italic;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 14px;\n      flex: 0 0 100px;\n      font-weight: 700;\n      margin: 0 0 4px 0;\n      color: $label-color-light;\n    }\n\n    .first-last {\n      gap: 15px;\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  form verdocs-help-icon {\n    transform: scale(0.8);\n  }\n\n  verdocs-select-input {\n    //flex: 1;\n    //margin: 0;\n\n    label {\n      display: block;\n    }\n  }\n\n  verdocs-text-input {\n    margin: 0;\n\n    label {\n      display: block;\n    }\n\n    .input-label {\n      flex: 0 0 100px;\n    }\n\n    input {\n      flex: 1;\n      display: flex;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n    }\n  }\n\n  .checkbox-wrapper {\n    flex: 1;\n    display: flex;\n  }\n\n  .delete-button {\n    height: 34px;\n    display: flex;\n    padding: 0 6px;\n    cursor: pointer;\n    background: none;\n    border-radius: 4px;\n    align-items: center;\n    border: 1px solid #999;\n    justify-content: center;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    &:active {\n      background: #f3f3f3;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {deleteTemplateRole, getTemplate, isValidEmail, ITemplate, TRecipientType, updateTemplateRole, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#a50021\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\" /></svg>`;\n\n/**\n * Present an editing form suitable for adjusting template-role properties.\n */\n@Component({\n  tag: 'verdocs-template-role-properties',\n  styleUrl: 'verdocs-template-role-properties.scss',\n})\nexport class VerdocsTemplateRoleProperties {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The role name to edit.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) close: EventEmitter;\n\n  /**\n   * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\n   * the role will have already been deleted server-side.\n   */\n  @Event({composed: true}) delete: EventEmitter<{templateId: string; roleName: string}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() dirty = false;\n  @State() saving = false;\n  @State() name = '';\n  @State() type: TRecipientType = 'signer';\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() delegator = false;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[ROLES Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[ROLES] Loading tempate', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('[BUILD] Template Updated', template);\n        this.template = template;\n        this.loading = false;\n\n        const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n        if (editingRole) {\n          this.name = editingRole.name;\n          this.type = editingRole.type;\n          this.first_name = editingRole.first_name;\n          this.last_name = editingRole.last_name;\n          this.email = editingRole.email;\n          this.phone = editingRole.phone;\n          this.delegator = editingRole.delegator;\n          console.log('[ROLES] Editing role', editingRole);\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n    if (editingRole) {\n      this.name = editingRole.name;\n      this.type = editingRole.type;\n      this.first_name = editingRole.first_name;\n      this.last_name = editingRole.last_name;\n      this.email = editingRole.email;\n      this.phone = editingRole.phone;\n      this.delegator = editingRole.delegator;\n    }\n\n    this.dirty = false;\n    this.close?.emit();\n  }\n\n  async handleSave(e) {\n    e.stopPropagation();\n    this.saving = true;\n    updateTemplateRole(this.endpoint, this.templateId, this.roleName, {\n      name: this.name,\n      type: this.type,\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      delegator: this.delegator,\n    })\n      .then(async r => {\n        console.log('[ROLES] Update result', r);\n        this.saving = false;\n        this.dirty = false;\n        const newTemplate = JSON.parse(JSON.stringify(this.template));\n        const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);\n        if (roleIndex > -1) {\n          newTemplate.roles[roleIndex] = r;\n        }\n        Store.updateTemplate(this.templateId, newTemplate);\n        this.close?.emit();\n      })\n      .catch(e => {\n        console.log('[ROLES Update error', e);\n        this.saving = false;\n      });\n  }\n\n  async handleDelete(e) {\n    e.stopPropagation();\n    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {\n      deleteTemplateRole(this.endpoint, this.templateId, this.roleName)\n        .then(() => {\n          const newTemplate = JSON.parse(JSON.stringify(this.template)) as ITemplate;\n          newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);\n          Store.getTemplate(this.endpoint, this.templateId, true);\n          // Store.updateTemplate(this.templateId, newTemplate);\n          this.delete?.emit({templateId: this.templateId, roleName: this.roleName});\n          this.close?.emit();\n        })\n        .catch(e => {\n          console.log('[ROLES Deletion error', e);\n        });\n    }\n  }\n\n  render() {\n    const hasFields = (this.template?.fields || []).some(field => field.role_name === this.roleName);\n\n    // Either all three should be empty, or all three need to be filled\n    const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);\n\n    return (\n      <Host>\n        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-role-name\"\n              label=\"Role Name (Must be unique)\"\n              value={this.name}\n              autocomplete=\"off\"\n              disabled={hasFields}\n              placeholder=\"Role Name...\"\n              onInput={(e: any) => {\n                this.name = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            {hasFields && <div class=\"instructions\">This role has fields assigned and can no longer be renamed.</div>}\n            {/*<div class=\"instructions\">{hasFields ? 'This role has fields assigned and can no longer be renamed.' : 'A unique name to identify the role in the workflow.'}</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Type:</div>\n            <verdocs-select-input\n              value={this.type}\n              options={[\n                {label: 'Signer', value: 'signer'},\n                {label: 'CC', value: 'cc'},\n                {label: 'Approver', value: 'approver'},\n              ]}\n              onInput={(e: any) => {\n                this.type = e.target.value;\n                this.dirty = true;\n              }}\n            />\n            {/*<div class=\"instructions\">*/}\n            {/*  Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform*/}\n            {/*  a final review.*/}\n            {/*</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Default Contact Info:</div>\n\n            <div class=\"first-last\">\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.first_name}\n                autocomplete=\"off\"\n                placeholder=\"First...\"\n                onInput={(e: any) => {\n                  this.first_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.last_name}\n                autocomplete=\"off\"\n                placeholder=\"Last...\"\n                onInput={(e: any) => {\n                  this.last_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          </div>\n\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-recipient-email\"\n              value={this.email}\n              autocomplete=\"off\"\n              placeholder=\"Email Address...\"\n              onInput={(e: any) => {\n                this.email = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            <div style={{height: '15px'}} />\n\n            <div>\n              <verdocs-text-input\n                id=\"verdocs-recipient-phone\"\n                value={this.phone}\n                autocomplete=\"off\"\n                // helpText=\"The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.\"\n                placeholder=\"Phone Number...\"\n                onInput={(e: any) => {\n                  this.phone = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n              {/*<div class=\"instructions\">Default name and contact information. This may be changed later when creating and envelope with this template.</div>*/}\n            </div>\n          </div>\n\n          {/*<div class=\"row\">*/}\n          {/*  <div class=\"input-label\">May Delegate:</div>*/}\n          {/*  <div class=\"checkbox-wrapper\">*/}\n          {/*    <verdocs-checkbox*/}\n          {/*      checked={this.delegator}*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.delegator = e.target.checked;*/}\n          {/*        this.dirty = true;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n\n          {/*  <verdocs-help-icon text=\"If enabled, this recipient may delegate their actions to another individual.\" />*/}\n          {/*</div>*/}\n\n          <div class=\"buttons\">\n            <button class=\"delete-button\" disabled={this.dirty} onClick={e => this.handleDelete(e)} innerHTML={TrashIcon} />\n\n            <div style={{flex: '1'}} />\n\n            {/*<verdocs-button size=\"small\" variant=\"outline\" label=\"Cancel\" disabled={!this.dirty} onClick={e => this.handleCancel(e)} />*/}\n            <verdocs-button size=\"small\" label=\"Save\" disabled={!this.dirty || !isValid} onClick={e => this.handleSave(e)} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Dt1l1CiO.js → p-B85lx7qr.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
-import { d as defineCustomElement$3 } from './p-_nUQ5iEk.js';
-import { d as defineCustomElement$2 } from './p-IhdX5vVL.js';
-import { d as defineCustomElement$1 } from './p-BDmKp20X.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
+import { d as defineCustomElement$3 } from './p-BNrp2UP2.js';
+import { d as defineCustomElement$2 } from './p-BGZ_owBm.js';
+import { d as defineCustomElement$1 } from './p-C_SISdpZ.js';
 
 const verdocsSignatureDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-signature-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-signature-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-signature-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-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-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-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-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-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}";
 
@@ -222,10 +222,10 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSig
     }
      */
     render() {
-        return (h(Host, { key: 'deb2bce5a68396ae6957438e2ed313704bca58b1', onClick: e => this.handleCancel(e) }, h("div", { key: '477e5dc9accd28bcc8091c3bf242bdf4a0848f8d', class: "dialog" }, h("div", { key: '2a500b3df941ec50d1beb28eaf6eadf487e10203', class: "heading" }, "Create Your Signature"), h("div", { key: '032f6a787d3dee4821830db6dc5ffba4a3945072', class: "content" }, h("verdocs-text-input", { key: '0029661a25750017f3aff9739fbab475981b5ccc', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: 'a7409613568db441a1365acdb7dee6f4d176485c', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: '780e69a2d164b8d06b679b6ac71a30bac5680306', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: '06e9ef71b4d0e5762a49e3939a513efd32665ba9', class: "buttons" }, h("verdocs-button", { key: 'b71509de58c901e17d95905cb5ffa7ebff267163', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'a732f937f97757a09a3958285bc742839388650d', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: 'ffe99271873ff82caf074b937d4cf1e80f82f456', onClick: e => this.handleCancel(e) }, h("div", { key: 'ae554c79cfebfb744ab8e3e11f5f5e559bb53650', class: "dialog" }, h("div", { key: 'edb67e85fa755232480b3f78337da28198d5b278', class: "heading" }, "Create Your Signature"), h("div", { key: 'e98694069d3e750004842d21e9cfa23e3140336b', class: "content" }, h("verdocs-text-input", { key: '628e834cd03693a02cf04d685259b890bdaeba9c', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: 'a7a0fce481cc3ae5bba9559a0d1bcd00643b7890', class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { key: '220c0158153d181c40bf1ced0ebaccedac957d66', class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { key: '69e57fe6f3e9cea8d1fa35c9d495b71490c510a3', class: "buttons" }, h("verdocs-button", { key: 'c35b9bb3815a49afb5ffaa03c1340d8ea14b7f03', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '2a904101876ad8f7f3d085523680d124abfdf528', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
     }
     static get style() { return verdocsSignatureDialogCss; }
-}, [0, "verdocs-signature-dialog", {
+}, [256, "verdocs-signature-dialog", {
         "name": [1],
         "fontLoaded": [32],
         "enteredName": [32],
@@ -261,6 +261,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsSignatureDialog as V, defineCustomElement as d };
-//# sourceMappingURL=p-Dt1l1CiO.js.map
+//# sourceMappingURL=p-B85lx7qr.js.map
 
-//# sourceMappingURL=p-Dt1l1CiO.js.map
+//# sourceMappingURL=p-B85lx7qr.js.map

package/dist/components/{p-Dt1l1CiO.js.map → p-B85lx7qr.js.map}

@@ -1 +1 @@
-{"file":"p-Dt1l1CiO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-B85lx7qr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.exit.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BUkor2Zh.js → p-BEs2iroT.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
 import { verifySigner } from '@verdocs/js-sdk';
 import { D as DefaultEndpoint } from './p-C_Xku1v2.js';
 import { V as VerdocsToast } from './p-CyvDgtoV.js';
-import { d as defineCustomElement$1 } from './p-_nUQ5iEk.js';
+import { d as defineCustomElement$1 } from './p-BNrp2UP2.js';
 
 const verdocsOtpDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-otp-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-otp-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-otp-dialog .background-overlay{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-otp-dialog .dialog{width:440px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#fff;padding:16px;gap:10px;-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)}verdocs-otp-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-otp-dialog .step{margin-left:6px;color:#666}verdocs-otp-dialog .help-box{background-color:#707ae5;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:14px;-ms-flex-align:center;align-items:center;color:white}verdocs-otp-dialog .help-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:15px;font-size:14px}verdocs-otp-dialog .help-icon{width:40px;height:40px}verdocs-otp-dialog .help-title{font-weight:600;margin-bottom:4px}verdocs-otp-dialog .help-text{font-weight:400}verdocs-otp-dialog .input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:10px;-ms-flex-align:center;align-items:center;margin:16px 0 32px}verdocs-otp-dialog .input label{-ms-flex:0;flex:0;line-height:10px;font-weight:500;white-space:nowrap}verdocs-otp-dialog .input input{-ms-flex:1;flex:1;padding:5px 8px;border-radius:3px;border:1px solid #cccccc}verdocs-otp-dialog .field{gap:10px;margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;max-width:100%}verdocs-otp-dialog .field .required{color:red;position:relative;top:-0.5em;font-size:80%}verdocs-otp-dialog .field label{-ms-flex:0 0 120px;flex:0 0 120px;font-weight:500;line-height:10px;text-align:right;white-space:nowrap}verdocs-otp-dialog .field verdocs-date-input{width:40%;-ms-flex-positive:1;flex-grow:1}verdocs-otp-dialog .field verdocs-date-input input{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-otp-dialog .field input{width:40%;-ms-flex-positive:1;flex-grow:1;padding:5px 8px;border-radius:3px;border:1px solid #cccccc}verdocs-otp-dialog .choices{display:grid;gap:15px;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));margin:0 0 15px 0}verdocs-otp-dialog .choice{border:1px solid #707ae5;border-radius:5px;display:-ms-flexbox;display:flex;height:60px;font-size:14px;padding:0 5px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center;color:#5c6575;cursor:pointer}verdocs-otp-dialog .choice.selected{background-color:#707ae5;color:#ffffff}verdocs-otp-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-otp-dialog .buttons verdocs-button{margin-left:16px}";
 
@@ -91,10 +91,10 @@ const VerdocsOtpDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsOtpDialog
         this.response = '';
     }
     render() {
-        return (h(Host, { key: '9d7b5080c7d1d6ff5d62893d912ea3cbf486000c' }, h("div", { key: 'cacbff2537920a0c3f5308f0affcea540a06031a', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'a1106aa9dc9ca09456adff39e233f75179a4d947', class: "dialog" }, h("div", { key: '1a61fc9dd881e4ac981440af2a792ad3bbaa9035', class: "heading" }, "Verification Required"), h("div", { key: 'af5ffb1f07223649b9ec8108d3605ac27b6077ca', class: "help-box" }, h("div", { key: '364f7106a9b0111af3421455bf0275867ffb4e9b', class: "help-icon", innerHTML: QuestionIcon }), h("div", { key: 'eaa27cceb4db650cff45f1fde2f950e4ba9dce9f', class: "help-details" }, h("div", { key: '61a2867c74530a2dafdc8ce16705fdbf7bf17bc1', class: "help-title" }, "Please verify your email address"), h("div", { key: '3dee6b6b0c0f46b119cdb96478aaba22bef99b8a', class: "help-text" }, "Check your email for a one-time code, and enter it below."))), h("div", { key: '55b6dea178b09d17e4d3f68a30e906a4cab48df4', class: "input" }, h("label", { key: 'a615fc1fa2e0921c7d7a352c515adce22d21e5d1', htmlFor: "verdocs-otp-input" }, "Code:"), h("input", { key: 'a2090734031736d055328fdcaa2efb6620587b19', type: "text", id: "verdocs-otp-input", name: "verdocs-otp-input", placeholder: "Enter your one-time code...", value: this.response, onInput: (e) => (this.response = e.target.value) })), h("div", { key: 'c970a960024561dfa18c9e1b1a8feb57b9f0a138', class: "buttons" }, h("verdocs-button", { key: 'd1bb9532b2d5d2943213d8e9fca1dad95acc02f7', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'dd6cfe43ba8823224bde821613f622fe49fabd07', label: 'Resend', onClick: () => this.handleResend(), disabled: this.resendDisabled }), h("verdocs-button", { key: 'ac2848b438c0896b350c4ee1682f3820feccee1d', label: 'Submit', onClick: () => this.handleSubmit(), disabled: !this.response }))))));
+        return (h(Host, { key: 'ce2e313d5468d464665bdd7b6760a4c64261edad' }, h("div", { key: '34eb4afad3b064d6d77e389e792994704d193798', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'c3c2c4d4be7ac90c37f3c6f099ee570ed93c62a0', class: "dialog" }, h("div", { key: 'ab2b5ac5b21dec4df6a67caed63287fdb8d58696', class: "heading" }, "Verification Required"), h("div", { key: '083c1e280da29105deb0b69ec98fc040c379decd', class: "help-box" }, h("div", { key: 'b947f4d77cfea75050277e8df628a05e7ae032b2', class: "help-icon", innerHTML: QuestionIcon }), h("div", { key: '878aec9c254d42e617b21e72e7bddf5ce1dca3af', class: "help-details" }, h("div", { key: 'b9b7d925c18f74c4c1c4e45d32934b14ba67cf3c', class: "help-title" }, "Please verify your email address"), h("div", { key: '1dbb81ccc019b048883739fdc853c79806326055', class: "help-text" }, "Check your email for a one-time code, and enter it below."))), h("div", { key: '3251a5dc8d2e3747643e97efd40cfa5bb6fd7dfd', class: "input" }, h("label", { key: '7080712785cfbe90417d3dc9659df674cb9b6e10', htmlFor: "verdocs-otp-input" }, "Code:"), h("input", { key: 'd2a8bc3de0105ed93ac7b25301cdbeea8208f7e5', type: "text", id: "verdocs-otp-input", name: "verdocs-otp-input", placeholder: "Enter your one-time code...", value: this.response, onInput: (e) => (this.response = e.target.value) })), h("div", { key: '95587ae67e5f0918989dbcdf28fd49a6e06f2a1d', class: "buttons" }, h("verdocs-button", { key: '37ec84529d510d68b2d02dd38dfce3688f913359', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'e2de9b08273338ae3a15cf393b08cb32870aa7ea', label: 'Resend', onClick: () => this.handleResend(), disabled: this.resendDisabled }), h("verdocs-button", { key: '2ac4c7ce100b3ec1f08d8ee6ecfd698578bc27f1', label: 'Submit', onClick: () => this.handleSubmit(), disabled: !this.response }))))));
     }
     static get style() { return verdocsOtpDialogCss; }
-}, [0, "verdocs-otp-dialog", {
+}, [256, "verdocs-otp-dialog", {
         "endpoint": [1040],
         "method": [1],
         "recipient": [16],
@@ -121,6 +121,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsOtpDialog as V, defineCustomElement as d };
-//# sourceMappingURL=p-BUkor2Zh.js.map
+//# sourceMappingURL=p-BEs2iroT.js.map
 
-//# sourceMappingURL=p-BUkor2Zh.js.map
+//# sourceMappingURL=p-BEs2iroT.js.map

package/dist/components/{p-BUkor2Zh.js.map → p-BEs2iroT.js.map}

@@ -1 +1 @@
-{"file":"p-BUkor2Zh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-otp-dialog/verdocs-otp-dialog.scss?tag=verdocs-otp-dialog","src/components/dialogs/verdocs-otp-dialog/verdocs-otp-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-otp-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: fixed;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    padding: 16px;\n    gap: 10px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .input {\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: center;\n    margin: 16px 0 32px;\n\n    label {\n      flex: 0;\n      line-height: 10px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    input {\n      flex: 1;\n      padding: 5px 8px;\n      border-radius: 3px;\n      border: 1px solid #cccccc;\n    }\n  }\n\n  .field {\n    gap: 10px;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    max-width: 100%;\n\n    .required {\n      color: red;\n      position: relative;\n      top: -0.5em;\n      font-size: 80%;\n    }\n\n    label {\n      flex: 0 0 120px;\n      font-weight: 500;\n      line-height: 10px;\n      text-align: right;\n      white-space: nowrap;\n    }\n\n    verdocs-date-input {\n      width: 40%;\n      flex-grow: 1;\n\n      input {\n        width: 100%;\n        box-sizing: border-box;\n      }\n    }\n\n    input {\n      width: 40%;\n      flex-grow: 1;\n      padding: 5px 8px;\n      border-radius: 3px;\n      border: 1px solid #cccccc;\n    }\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    font-size: 14px;\n    padding: 0 5px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {IRecipient, ISignerTokenResponse, VerdocsEndpoint, verifySigner} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {DefaultEndpoint} from '../../../utils/Environment';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst QuestionIcon = `<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0C8.95313 0 0 8.95313 0 20C0 31.0469 8.95313 40 20 40C31.0469 40 40 31.0469 40 20C40 8.95313 31.0469 0 20 0ZM20 36.25C11.0391 36.25 3.75 28.9602 3.75 20C3.75 11.0398 11.0391 3.75 20 3.75C28.9609 3.75 36.25 11.0398 36.25 20C36.25 28.9602 28.9609 36.25 20 36.25Z\" fill=\"white\"/><path d=\"M20 26.25C18.5938 26.25 17.5 27.3438 17.5 28.75C17.5 30.1562 18.5234 31.25 20 31.25C21.3359 31.25 22.5 30.1562 22.5 28.75C22.5 27.3438 21.3359 26.25 20 26.25ZM22.5859 10H18.5938C15.5469 10 13.125 12.4219 13.125 15.4688C13.125 16.4844 13.9844 17.3438 15 17.3438C16.0156 17.3438 16.875 16.4844 16.875 15.4688C16.875 14.5312 17.5859 13.75 18.5234 13.75H22.5156C23.5234 13.75 24.375 14.5312 24.375 15.4688C24.375 16.0938 24.0625 16.5703 23.5156 16.8828L19.0625 19.6094C18.4375 20 18.125 20.625 18.125 21.25V22.5C18.125 23.5156 18.9844 24.375 20 24.375C21.0156 24.375 21.875 23.5156 21.875 22.5V22.3438L25.3984 20.1562C27.0391 19.1406 28.0547 17.3438 28.0547 15.4688C28.125 12.4219 25.7031 10 22.5859 10Z\" fill=\"#E7E7E7\"/></svg>`;\n\n/**\n * Prompt the user to confirm their identity with a one time code via email/SMS.\n */\n@Component({\n  tag: 'verdocs-otp-dialog',\n  styleUrl: 'verdocs-otp-dialog.scss',\n})\nexport class VerdocsOtpDialog {\n  private resendTimeout: any = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop({mutable: true}) endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The type of dialog to display. Three modes are supported.\n   */\n  @Prop() method: 'email' | 'sms' = 'email';\n\n  /**\n   * For identity confirmation, the current recipient details.\n   */\n  @Prop() recipient: IRecipient | null = null;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the process has completed successfully.\n   */\n  @Event({composed: true}) next: EventEmitter<{response: ISignerTokenResponse}>;\n\n  @State() resendDisabled = true;\n  @State() response = '';\n\n  componentDidLoad() {\n    this.startResendTimeout();\n\n    // Give the parent time to finish what it's doing.\n    setTimeout(() => {\n      verifySigner(this.endpoint, {auth_method: this.method, code: '', resend: true})\n        .then(r => {\n          console.log('Resend result', r);\n          this.response = '';\n        })\n        .catch(e => console.log('Error resending code', e));\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.resendTimeout) {\n      clearTimeout(this.resendTimeout);\n      this.resendTimeout = null;\n    }\n  }\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  startResendTimeout() {\n    this.resendDisabled = true;\n\n    if (this.resendTimeout) {\n      clearTimeout(this.resendTimeout);\n    }\n\n    this.resendTimeout = setTimeout(() => {\n      this.resendDisabled = false;\n    }, 30000);\n  }\n\n  handleResend() {\n    this.startResendTimeout();\n    verifySigner(this.endpoint, {auth_method: this.method, code: '', resend: true})\n      .then(r => {\n        console.log('Resend result', r);\n        this.response = '';\n        VerdocsToast('A new code has been sent.');\n      })\n      .catch(e => console.log('Error resending code', e));\n  }\n\n  handleSubmit() {\n    this.startResendTimeout();\n    verifySigner(this.endpoint, {auth_method: this.method, code: this.response})\n      .then(response => {\n        console.log('Verification completed', response);\n        this.next.emit({response});\n        VerdocsToast('Thank you. Your verification was successful.');\n      })\n      .catch(e => {\n        VerdocsToast('Invalid verification code. Please try again.');\n        console.log('Invalid code', e);\n      });\n\n    this.response = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Verification Required</div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={QuestionIcon} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">Please verify your email address</div>\n                <div class=\"help-text\">Check your email for a one-time code, and enter it below.</div>\n              </div>\n            </div>\n\n            <div class=\"input\">\n              <label htmlFor=\"verdocs-otp-input\">Code:</label>\n              <input\n                type=\"text\"\n                id=\"verdocs-otp-input\"\n                name=\"verdocs-otp-input\"\n                placeholder=\"Enter your one-time code...\"\n                value={this.response}\n                onInput={(e: any) => (this.response = e.target.value)}\n              />\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label={'Resend'} onClick={() => this.handleResend()} disabled={this.resendDisabled} />\n              <verdocs-button label={'Submit'} onClick={() => this.handleSubmit()} disabled={!this.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BEs2iroT.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-otp-dialog/verdocs-otp-dialog.scss?tag=verdocs-otp-dialog","src/components/dialogs/verdocs-otp-dialog/verdocs-otp-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-otp-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: fixed;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    padding: 16px;\n    gap: 10px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .input {\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: center;\n    margin: 16px 0 32px;\n\n    label {\n      flex: 0;\n      line-height: 10px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    input {\n      flex: 1;\n      padding: 5px 8px;\n      border-radius: 3px;\n      border: 1px solid #cccccc;\n    }\n  }\n\n  .field {\n    gap: 10px;\n    margin: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    max-width: 100%;\n\n    .required {\n      color: red;\n      position: relative;\n      top: -0.5em;\n      font-size: 80%;\n    }\n\n    label {\n      flex: 0 0 120px;\n      font-weight: 500;\n      line-height: 10px;\n      text-align: right;\n      white-space: nowrap;\n    }\n\n    verdocs-date-input {\n      width: 40%;\n      flex-grow: 1;\n\n      input {\n        width: 100%;\n        box-sizing: border-box;\n      }\n    }\n\n    input {\n      width: 40%;\n      flex-grow: 1;\n      padding: 5px 8px;\n      border-radius: 3px;\n      border: 1px solid #cccccc;\n    }\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    font-size: 14px;\n    padding: 0 5px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {IRecipient, ISignerTokenResponse, VerdocsEndpoint, verifySigner} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {DefaultEndpoint} from '../../../utils/Environment';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst QuestionIcon = `<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 0C8.95313 0 0 8.95313 0 20C0 31.0469 8.95313 40 20 40C31.0469 40 40 31.0469 40 20C40 8.95313 31.0469 0 20 0ZM20 36.25C11.0391 36.25 3.75 28.9602 3.75 20C3.75 11.0398 11.0391 3.75 20 3.75C28.9609 3.75 36.25 11.0398 36.25 20C36.25 28.9602 28.9609 36.25 20 36.25Z\" fill=\"white\"/><path d=\"M20 26.25C18.5938 26.25 17.5 27.3438 17.5 28.75C17.5 30.1562 18.5234 31.25 20 31.25C21.3359 31.25 22.5 30.1562 22.5 28.75C22.5 27.3438 21.3359 26.25 20 26.25ZM22.5859 10H18.5938C15.5469 10 13.125 12.4219 13.125 15.4688C13.125 16.4844 13.9844 17.3438 15 17.3438C16.0156 17.3438 16.875 16.4844 16.875 15.4688C16.875 14.5312 17.5859 13.75 18.5234 13.75H22.5156C23.5234 13.75 24.375 14.5312 24.375 15.4688C24.375 16.0938 24.0625 16.5703 23.5156 16.8828L19.0625 19.6094C18.4375 20 18.125 20.625 18.125 21.25V22.5C18.125 23.5156 18.9844 24.375 20 24.375C21.0156 24.375 21.875 23.5156 21.875 22.5V22.3438L25.3984 20.1562C27.0391 19.1406 28.0547 17.3438 28.0547 15.4688C28.125 12.4219 25.7031 10 22.5859 10Z\" fill=\"#E7E7E7\"/></svg>`;\n\n/**\n * Prompt the user to confirm their identity with a one time code via email/SMS.\n */\n@Component({\n  tag: 'verdocs-otp-dialog',\n  styleUrl: 'verdocs-otp-dialog.scss',\n})\nexport class VerdocsOtpDialog {\n  private resendTimeout: any = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop({mutable: true}) endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The type of dialog to display. Three modes are supported.\n   */\n  @Prop() method: 'email' | 'sms' = 'email';\n\n  /**\n   * For identity confirmation, the current recipient details.\n   */\n  @Prop() recipient: IRecipient | null = null;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the process has completed successfully.\n   */\n  @Event({composed: true}) next: EventEmitter<{response: ISignerTokenResponse}>;\n\n  @State() resendDisabled = true;\n  @State() response = '';\n\n  componentDidLoad() {\n    this.startResendTimeout();\n\n    // Give the parent time to finish what it's doing.\n    setTimeout(() => {\n      verifySigner(this.endpoint, {auth_method: this.method, code: '', resend: true})\n        .then(r => {\n          console.log('Resend result', r);\n          this.response = '';\n        })\n        .catch(e => console.log('Error resending code', e));\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.resendTimeout) {\n      clearTimeout(this.resendTimeout);\n      this.resendTimeout = null;\n    }\n  }\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.class === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  startResendTimeout() {\n    this.resendDisabled = true;\n\n    if (this.resendTimeout) {\n      clearTimeout(this.resendTimeout);\n    }\n\n    this.resendTimeout = setTimeout(() => {\n      this.resendDisabled = false;\n    }, 30000);\n  }\n\n  handleResend() {\n    this.startResendTimeout();\n    verifySigner(this.endpoint, {auth_method: this.method, code: '', resend: true})\n      .then(r => {\n        console.log('Resend result', r);\n        this.response = '';\n        VerdocsToast('A new code has been sent.');\n      })\n      .catch(e => console.log('Error resending code', e));\n  }\n\n  handleSubmit() {\n    this.startResendTimeout();\n    verifySigner(this.endpoint, {auth_method: this.method, code: this.response})\n      .then(response => {\n        console.log('Verification completed', response);\n        this.next.emit({response});\n        VerdocsToast('Thank you. Your verification was successful.');\n      })\n      .catch(e => {\n        VerdocsToast('Invalid verification code. Please try again.');\n        console.log('Invalid code', e);\n      });\n\n    this.response = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Verification Required</div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={QuestionIcon} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">Please verify your email address</div>\n                <div class=\"help-text\">Check your email for a one-time code, and enter it below.</div>\n              </div>\n            </div>\n\n            <div class=\"input\">\n              <label htmlFor=\"verdocs-otp-input\">Code:</label>\n              <input\n                type=\"text\"\n                id=\"verdocs-otp-input\"\n                name=\"verdocs-otp-input\"\n                placeholder=\"Enter your one-time code...\"\n                value={this.response}\n                onInput={(e: any) => (this.response = e.target.value)}\n              />\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label={'Resend'} onClick={() => this.handleResend()} disabled={this.resendDisabled} />\n              <verdocs-button label={'Submit'} onClick={() => this.handleSubmit()} disabled={!this.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CYuh1ogw.js → p-BGFhQ8wl.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-D16h8pzh.js';
 import { VerdocsEndpoint, toggleStar } from '@verdocs/js-sdk';
 
 const verdocsTemplateStarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-star{display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-template-star .star{line-height:10px}verdocs-template-star .star.updating{-webkit-animation:spinningStar 2s infinite linear;animation:spinningStar 2s infinite linear}verdocs-template-star .star svg{width:24px;height:24px}verdocs-template-star .count{color:#595c5d;font-size:14px;margin-left:10px}@-webkit-keyframes spinningStar{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinningStar{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}";
@@ -44,10 +44,10 @@ const VerdocsTemplateStar = /*@__PURE__*/ proxyCustomElement(class VerdocsTempla
         });
     }
     render() {
-        return (h(Host, { key: '893aa13234772cb3b2ed88bddd864ab506d7602d' }, h("div", { key: '4c055a74214f5005747c9cd15f4a7ffed9a83e58', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '4d52d0609b51c49fd14ab783dc3dcbb0d15a25de', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: '1f4073f349c45ba586385db8cadd695788bd23b9' }, h("div", { key: 'e6b4494f04d22bcc3d73d50193d132a9544d9c1d', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: 'd76b59710697048b1fef8b61333c5930d2aac097', class: "count" }, this.template.star_counter || '--')));
     }
     static get style() { return verdocsTemplateStarCss; }
-}, [0, "verdocs-template-star", {
+}, [256, "verdocs-template-star", {
         "endpoint": [16],
         "template": [1040],
         "updating": [32]
@@ -67,6 +67,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateStar as V, defineCustomElement as d };
-//# sourceMappingURL=p-CYuh1ogw.js.map
+//# sourceMappingURL=p-BGFhQ8wl.js.map
 
-//# sourceMappingURL=p-CYuh1ogw.js.map
+//# sourceMappingURL=p-BGFhQ8wl.js.map

package/dist/components/{p-CYuh1ogw.js.map → p-BGFhQ8wl.js.map}

@@ -1 +1 @@
-{"file":"p-CYuh1ogw.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,4mCAA4mC;;ACI3oC,MAAM,eAAe,GAAG,CAAA,qhBAAA,CAAuhB;AAE/iB,MAAM,aAAa,GAAG,CAAA,0aAAA,CAA4a;MASrb,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AAJhC,IAAA,WAAA,GAAA;;;;;AAKE;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE;AAmBvD,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAuC1B;AArCC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;AAE3B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AAC1B,YAAA,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC;YAChD;;;AAIJ,IAAA,MAAM,CAAC,CAAM,EAAA;QACX,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,UAAU,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;aACtD,IAAI,CAAC,CAAC,IAAG;AACR,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY;AAC3C,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;AAC5B,gBAAA,OAAO,EAAE,CAAC,CAAC,YAAY,GAAG,CAAC;gBAC3B,KAAK,EAAE,CAAC,CAAC,YAAY;AACtB,aAAA,CAAC;AACJ,SAAC;aACA,KAAK,CAAC,CAAC,IAAG;AACT,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,OAAO,CAAC;AAC7D,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,SAAC,CAAC;;IAGN,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,aAAa,GAAG,eAAe,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAI,CAAA,EAChK,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAO,CACxD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-star/verdocs-template-star.scss?tag=verdocs-template-star","src/components/templates/verdocs-template-star/verdocs-template-star.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-star {\n  display: flex;\n  flex: 0 0 60px;\n  align-items: center;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .star {\n    line-height: 10px;\n\n    &.updating {\n      animation: spinningStar 2s infinite linear;\n    }\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .count {\n    color: #595c5d;\n    font-size: 14px;\n    margin-left: 10px;\n  }\n}\n\n@keyframes spinningStar {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n","import {VerdocsEndpoint, toggleStar, ITemplate} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Host, Event, EventEmitter, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nconst OutlineStarIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" /></svg>`;\n\nconst SolidStarIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\" clip-rule=\"evenodd\" /></svg>`;\n\n/**\n * Displays a clickable star that allows users to mark frequently-used templates.\n */\n@Component({\n  tag: 'verdocs-template-star',\n  styleUrl: 'verdocs-template-star.scss',\n})\nexport class VerdocsTemplateStar {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template to display the star for.\n   */\n  @Prop({mutable: true}) template: ITemplate;\n\n  /**\n   * Event fired when the user toggles the star on or off. The event detail will contain\n   * the new \"starred\" status and count.\n   */\n  @Event({composed: true}) starChange: EventEmitter<{templateId: string; starred: boolean; count: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() updating = false;\n\n  async componentWillLoad() {\n    this.endpoint.loadSession();\n\n    if (!this.endpoint.session) {\n      console.log('[TEMPLATES] Must be authenticated');\n      return;\n    }\n  }\n\n  toggle(e: any) {\n    e.stopPropagation();\n    this.updating = true;\n    toggleStar(VerdocsEndpoint.getDefault(), this.template.id)\n      .then(r => {\n        this.updating = false;\n        this.template.star_counter = r.star_counter;\n        this.starChange.emit({\n          templateId: this.template.id,\n          starred: r.star_counter > 0,\n          count: r.star_counter,\n        });\n      })\n      .catch(e => {\n        this.updating = false;\n        console.log('[STAR] Error toggling template star', e.message);\n        this.sdkError.emit(e);\n      });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`star ${this.updating ? 'updating' : ''}`} innerHTML={this.template.star_counter ? SolidStarIcon : OutlineStarIcon} onClick={e => this.toggle(e)} />\n        <div class=\"count\">{this.template.star_counter || '--'}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BGFhQ8wl.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,4mCAA4mC;;ACI3oC,MAAM,eAAe,GAAG,CAAA,qhBAAA,CAAuhB;AAE/iB,MAAM,aAAa,GAAG,CAAA,0aAAA,CAA4a;MASrb,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AAJhC,IAAA,WAAA,GAAA;;;;;AAKE;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE;AAmBvD,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAuC1B;AArCC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;AAE3B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AAC1B,YAAA,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC;YAChD;;;AAIJ,IAAA,MAAM,CAAC,CAAM,EAAA;QACX,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACpB,UAAU,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;aACtD,IAAI,CAAC,CAAC,IAAG;AACR,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY;AAC3C,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE;AAC5B,gBAAA,OAAO,EAAE,CAAC,CAAC,YAAY,GAAG,CAAC;gBAC3B,KAAK,EAAE,CAAC,CAAC,YAAY;AACtB,aAAA,CAAC;AACJ,SAAC;aACA,KAAK,CAAC,CAAC,IAAG;AACT,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACrB,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,OAAO,CAAC;AAC7D,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,SAAC,CAAC;;IAGN,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,aAAa,GAAG,eAAe,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAI,CAAA,EAChK,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAO,CACxD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-star/verdocs-template-star.scss?tag=verdocs-template-star","src/components/templates/verdocs-template-star/verdocs-template-star.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-star {\n  display: flex;\n  flex: 0 0 60px;\n  align-items: center;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .star {\n    line-height: 10px;\n\n    &.updating {\n      animation: spinningStar 2s infinite linear;\n    }\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .count {\n    color: #595c5d;\n    font-size: 14px;\n    margin-left: 10px;\n  }\n}\n\n@keyframes spinningStar {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n","import {VerdocsEndpoint, toggleStar, ITemplate} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Host, Event, EventEmitter, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nconst OutlineStarIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" /></svg>`;\n\nconst SolidStarIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z\" clip-rule=\"evenodd\" /></svg>`;\n\n/**\n * Displays a clickable star that allows users to mark frequently-used templates.\n */\n@Component({\n  tag: 'verdocs-template-star',\n  styleUrl: 'verdocs-template-star.scss',\n})\nexport class VerdocsTemplateStar {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template to display the star for.\n   */\n  @Prop({mutable: true}) template: ITemplate;\n\n  /**\n   * Event fired when the user toggles the star on or off. The event detail will contain\n   * the new \"starred\" status and count.\n   */\n  @Event({composed: true}) starChange: EventEmitter<{templateId: string; starred: boolean; count: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() updating = false;\n\n  async componentWillLoad() {\n    this.endpoint.loadSession();\n\n    if (!this.endpoint.session) {\n      console.log('[TEMPLATES] Must be authenticated');\n      return;\n    }\n  }\n\n  toggle(e: any) {\n    e.stopPropagation();\n    this.updating = true;\n    toggleStar(VerdocsEndpoint.getDefault(), this.template.id)\n      .then(r => {\n        this.updating = false;\n        this.template.star_counter = r.star_counter;\n        this.starChange.emit({\n          templateId: this.template.id,\n          starred: r.star_counter > 0,\n          count: r.star_counter,\n        });\n      })\n      .catch(e => {\n        this.updating = false;\n        console.log('[STAR] Error toggling template star', e.message);\n        this.sdkError.emit(e);\n      });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`star ${this.updating ? 'updating' : ''}`} innerHTML={this.template.star_counter ? SolidStarIcon : OutlineStarIcon} onClick={e => this.toggle(e)} />\n        <div class=\"count\">{this.template.star_counter || '--'}</div>\n      </Host>\n    );\n  }\n}\n"],"version":3}