@verdocs/web-sdk 5.0.37 → 5.0.38

package/dist/components/{p-82efd79a.js → p-d013a90c.js}

@@ -33,7 +33,7 @@ const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class VerdocsButton exten
         this.disabled = false;
     }
     render() {
-        return (h("button", { key: '45a85361505bb16423aaceaad214c9d35afa0c3e', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '73223913d8f80d6c61a4efed0396c5437b9aaa9b', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
+        return (h("button", { key: '4df7c66508487f951fdf05f0ba748bf92a865248', disabled: this.disabled, type: this.type, class: `${this.variant} ${this.size} ${this.type}` }, this.startIcon ? h("span", { class: "icon start", innerHTML: this.startIcon }) : null, h("span", { key: '31c06cfdfe860e9a84e6a1efb103293208439e82', class: "button-label" }, this.label), this.endIcon ? h("span", { class: "icon end", innerHTML: this.endIcon }) : null));
     }
     static get style() { return VerdocsButtonStyle0; }
 }, [0, "verdocs-button", {
@@ -61,4 +61,4 @@ function defineCustomElement() {
 
 export { VerdocsButton as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-82efd79a.js.map
+//# sourceMappingURL=p-d013a90c.js.map

package/dist/components/{p-82efd79a.js.map → p-d013a90c.js.map}

@@ -1 +1 @@
-{"file":"p-82efd79a.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4kGAA4kG,CAAC;AACtmG,4BAAe,gBAAgB;;MCYlB,aAAa;IAJ1B;;;;;;QAaU,cAAS,GAAkB,IAAI,CAAC;;;;QAKhC,YAAO,GAAkB,IAAI,CAAC;;;;QAK9B,SAAI,GAAuD,QAAQ,CAAC;;;;QAKpE,SAAI,GAAkC,QAAQ,CAAC;;;;QAK/C,YAAO,GAAoC,UAAU,CAAC;;;;QAKtD,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,QACE,+DAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,IACjG,IAAI,CAAC,SAAS,GAAG,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC7C,IAAI,CAAC,OAAO,GAAG,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\n\n    &:disabled {\n      cursor: inherit;\n      pointer-events: none;\n    }\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .button-label {\n      padding: 0 12px;\n    }\n\n    // Small-sized button size adjustments\n    &.xsmall {\n      height: 26px;\n      font-size: 12px;\n\n      .icon {\n        margin: 0 3px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 18px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .button-label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .button-label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .button-label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/**\n * A simple button, with consistent styling to other controls in the design system.\n *\n * ```ts\n * <verdocs-button label=\"Click Me\" size=\"normal\" variant=\"standard\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button.\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button.\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'xsmall' | 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"button-label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-d013a90c.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,4kGAA4kG,CAAC;AACtmG,4BAAe,gBAAgB;;MCYlB,aAAa;IAJ1B;;;;;;QAaU,cAAS,GAAkB,IAAI,CAAC;;;;QAKhC,YAAO,GAAkB,IAAI,CAAC;;;;QAK9B,SAAI,GAAuD,QAAQ,CAAC;;;;QAKpE,SAAI,GAAkC,QAAQ,CAAC;;;;QAK/C,YAAO,GAAoC,UAAU,CAAC;;;;QAKtD,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,QACE,+DAAQ,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,IACjG,IAAI,CAAC,SAAS,GAAG,YAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC/E,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC7C,IAAI,CAAC,OAAO,GAAG,YAAM,KAAK,EAAC,UAAU,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,GAAG,IAAI,CAClE,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\n\n    &:disabled {\n      cursor: inherit;\n      pointer-events: none;\n    }\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .button-label {\n      padding: 0 12px;\n    }\n\n    // Small-sized button size adjustments\n    &.xsmall {\n      height: 26px;\n      font-size: 12px;\n\n      .icon {\n        margin: 0 3px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 18px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .button-label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .button-label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .button-label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/**\n * A simple button, with consistent styling to other controls in the design system.\n *\n * ```ts\n * <verdocs-button label=\"Click Me\" size=\"normal\" variant=\"standard\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button.\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button.\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'xsmall' | 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"button-label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e45b1daf.js → p-d0a95023.js}

@@ -54,7 +54,7 @@ const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class VerdocsToolbar
     //   this.press?.emit();
     // }
     render() {
-        return (h(Host, { key: '869ac7bc88e9985e3338183acfe2f794cb32f4b7', class: {} }, h("div", { key: 'a14eee006ba0eebacb118df48b3518e766be1c05', "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: '2dc9c1cccc90348cb8355d46db3c6bfe4e0845b3', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'd062ddd320b47a7f1c397c56721cb544018b9434', "data-popper-arrow": "true", class: "arrow" }))));
+        return (h(Host, { key: 'bb4ac065c1a6873c88a7a4d468e674524ffad255', class: {} }, h("div", { key: 'c19c62586b0a0c5085adb4a1133cd5d6b78792ad', "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: '9f64d63fcb1d8d126adf3a680cf2a9ea3d0e2827', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: 'e4a0d13321ffa070c41060d94da95549e009b0ff', "data-popper-arrow": "true", class: "arrow" }))));
     }
     static get style() { return VerdocsToolbarIconStyle0; }
 }, [0, "verdocs-toolbar-icon", {
@@ -79,4 +79,4 @@ function defineCustomElement() {
 
 export { VerdocsToolbarIcon as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-e45b1daf.js.map
+//# sourceMappingURL=p-d0a95023.js.map

package/dist/components/{p-e45b1daf.js.map → p-d0a95023.js.map}

@@ -1 +1 @@
-{"file":"p-e45b1daf.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,6pDAA6pD,CAAC;AAC5rD,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;QAaU,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,cAAS,GAAc,QAAQ,CAAC;;;;;QAO/B,gBAAW,GAAG,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;KAoD9F;IAlDC,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;YAC5D,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAC,EAAC,CAAC,GAAG,EAAE;SAC3F,CAAC,CAAC;;;;KAIJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAED,IAAI;;QACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;KAC/C;IAED,IAAI;;QACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IACb,gFACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C,EACF,4DAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,2BAAwB,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IAC9I,IAAI,CAAC,IAAI,EACV,iFAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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\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-d0a95023.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,6pDAA6pD,CAAC;AAC5rD,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;QAaU,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,cAAS,GAAc,QAAQ,CAAC;;;;;QAO/B,gBAAW,GAAG,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;KAoD9F;IAlDC,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;YAC5D,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAC,EAAC,CAAC,GAAG,EAAE;SAC3F,CAAC,CAAC;;;;KAIJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;KACF;IAED,IAAI;;QACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,SAAQ,CAAC,CAAC;KAC/C;IAED,IAAI;;QACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC5C;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,IACb,gFACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C,EACF,4DAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,2BAAwB,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IAC9I,IAAI,CAAC,IAAI,EACV,iFAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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\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-94444369.js → p-da190f9a.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
-import { d as defineCustomElement$3 } from './p-82efd79a.js';
-import { d as defineCustomElement$2 } from './p-170a9c27.js';
-import { d as defineCustomElement$1 } from './p-5ce9d56a.js';
+import { d as defineCustomElement$3 } from './p-d013a90c.js';
+import { d as defineCustomElement$2 } from './p-ad61d24b.js';
+import { d as defineCustomElement$1 } from './p-eebd0f45.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}";
 const VerdocsSignatureDialogStyle0 = verdocsSignatureDialogCss;
@@ -223,7 +223,7 @@ const VerdocsSignatureDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsSig
     }
      */
     render() {
-        return (h(Host, { key: 'db83cd26256c06ca64246476670f758c8769376f', onClick: e => this.handleCancel(e) }, h("div", { key: '0f0fbdb102c364788061d0d82eb661c9a75a4979', class: "dialog" }, h("div", { key: 'c1ab6d62024fffd47004cb3eaa2c44f4785ee43b', class: "heading" }, "Create Your Signature"), h("div", { key: '431f8053f3b5ab989e54b46fd9bf2903ac8c43b8', class: "content" }, h("verdocs-text-input", { key: '22ba82134555f3ef5874fee569089d9c24ea4d92', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '85790955c896b2c81fba86b053e08d45d4fedf61', 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: '6757442d1103cad7301e8d347bd4f589d8f10d71', 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: 'b9c409396f635d55f8cc9c5c32a838855d764c41', class: "buttons" }, h("verdocs-button", { key: 'f8e4dcfafbf3cbe46f251ee76cf4965e319bce42', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '2acfc782151721953b8c2c7f05fa967cc212581e', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
+        return (h(Host, { key: '88ef514634fef3e3773f13efeeb2b22cbaf9ff0a', onClick: e => this.handleCancel(e) }, h("div", { key: '31369669f68670330cb2f54ec9be44ff6100ac83', class: "dialog" }, h("div", { key: 'd161b9a0e0945cda909eabbd0404448a03e29198', class: "heading" }, "Create Your Signature"), h("div", { key: '9777dd4289072f0be511bb1ec828ed540011e6be', class: "content" }, h("verdocs-text-input", { key: 'afed3547dd47d4883ac84d83d4d05eca9a30d5a2', placeholder: "Full Name...", label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), h("div", { key: '728f24c1a88a395f940df350169ed6ba628d2685', 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: 'abafa624e941b6f6e758fbd75ddd7e0044a377dc', 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: 'fbcc0705c21b7ed206222a9b7382a5562ee7f83d', class: "buttons" }, h("verdocs-button", { key: '5f921b4dfc7df16867071b117a9b055a8aeee8da', label: "CANCEL", size: "normal", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'dbf88043b9deedb378181bf48d7a04428a32e653', label: "Adopt & Sign", size: "normal", onClick: e => this.handleAdopt(e) }))))));
     }
     static get style() { return VerdocsSignatureDialogStyle0; }
 }, [0, "verdocs-signature-dialog", {
@@ -263,4 +263,4 @@ function defineCustomElement() {
 
 export { VerdocsSignatureDialog as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-94444369.js.map
+//# sourceMappingURL=p-da190f9a.js.map

package/dist/components/{p-94444369.js.map → p-da190f9a.js.map}

@@ -1 +1 @@
-{"file":"p-94444369.js","mappings":"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","names":[],"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-da190f9a.js","mappings":"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","names":[],"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-691abc4a.js → p-dfc85c3a.js}

@@ -2,10 +2,10 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { VerdocsEndpoint, getTemplate, updateTemplateRole, deleteTemplateRole, isValidEmail } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-78d650ca.js';
-import { d as defineCustomElement$4 } from './p-82efd79a.js';
-import { d as defineCustomElement$3 } from './p-170a9c27.js';
-import { d as defineCustomElement$2 } from './p-c8802e82.js';
-import { d as defineCustomElement$1 } from './p-5ce9d56a.js';
+import { d as defineCustomElement$4 } from './p-d013a90c.js';
+import { d as defineCustomElement$3 } from './p-ad61d24b.js';
+import { d as defineCustomElement$2 } from './p-3f7340a9.js';
+import { d as defineCustomElement$1 } from './p-eebd0f45.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}";
 const VerdocsTemplateRolePropertiesStyle0 = verdocsTemplateRolePropertiesCss;
@@ -161,31 +161,31 @@ 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: '032d0af9e5c6792363c2b4e82ccfe4a0c598ae1b' }, h("form", { key: '2dad3d81db60ce6b7ad49799179ac1c796f77c49', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'cbed618e4f1622862efbf60cbac7c1c67b60d5b5' }, h("verdocs-text-input", { key: 'dfb1ce16276cfff5d83a988e2e0af4bf36ff1aa8', 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: '1ad55cc14a30cd9a7be12d8adf56ce83361ca223' }, h("form", { key: 'f43ca7546c1d5c28b45dfb17e18cd1b7404601b7', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '8f3248ac163e1b90fd2311cfdbbaaa03f5545981' }, h("verdocs-text-input", { key: 'a73fce39e7070844da9bda975ac1ebb8ccd21eea', 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: 'cc094a47868656c51a33de82720e07f90f02354c', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '5cf6187300bed3bbae716754838bc5026e92afca' }, h("div", { key: '89850c52f9425eaa3eba1945f9420e9bab2d4cf4', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '557b8f8da60b4e2c3981a9bbe87709e8ce711e87', value: this.type, options: [
+            } }), hasFields && h("div", { key: '45e3b1a720d24f6bf80793736f439b25d02cd761', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), h("div", { key: '84e8e7228127c6e7eb0ff988cf101c3b01f94722' }, h("div", { key: '54662ff3d0a5299a64f00fce052beb157efbe2c3', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '63f857624912c84d859799c02de0b2cff14201f6', 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: 'bf4ce9e0ba94bd7c7670828849b31da396f5bdb6' }, h("div", { key: '9db45ddcc2db5d128e9715a73ce12111b402481c', class: "input-label" }, "Default Contact Info:"), h("div", { key: '8581f42fdfe5ebfb71f8ff51b8f20679f2afaa09', class: "first-last" }, h("verdocs-text-input", { key: 'abad384c0b1cff21a8ecfbfeadaab7080d7bdd4f', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
+            } })), h("div", { key: '6da9230ff385d2c4c4b9e916d2318fbb94a545d0' }, h("div", { key: '6d222a2c12182d8c26954c80b5ef493eaf960a53', class: "input-label" }, "Default Contact Info:"), h("div", { key: '407e291c353ccfd49f5777ad1bea9c1b3fb2800b', class: "first-last" }, h("verdocs-text-input", { key: '6e3a55ff43490e4202293fd4f81e26a7e9897431', 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: 'd3b324723e676275c18ededbeb3519c4decc468a', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: 'f01e095ddb71525e6c032edebdef106d6b8be46f', 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: 'b9c4c66a2c19e25a33a957e35cb307ad84a5de3a' }, h("verdocs-text-input", { key: 'a342b83d7dd839ac361c7f06cbf1753a43d81977', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
+            } }))), h("div", { key: '3ca6ab94243a2841a7e330c48d30a00ff3ab5c18' }, h("verdocs-text-input", { key: '28dd98491e99fbea7b140553fdccdc1b783a9d1f', 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: '59d1095c753d5a02f9245889a691acfdbe951888', style: { height: '15px' } }), h("div", { key: 'ce149293e5f435bf2db055ebf8d2139cf61fa41f' }, h("verdocs-text-input", { key: 'ea2a576a5d832bcce40c2f6a1cdb844127bcafb1', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
+            } }), h("div", { key: '32035f36e92471ff6bd3f9e03c4a40e20856624b', style: { height: '15px' } }), h("div", { key: 'c65ed4a1d2c7961303fdf8f72dfaa9921c18cc1c' }, h("verdocs-text-input", { key: '55d51882fb166870a57e6761111008ae2a048c9a', 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: '4a4e4a1d1c645c3ccc7cfe525c132c8b6932d32e', class: "buttons" }, h("button", { key: '9b6127bedb60c3e4b336b9049cc7fa797c4ce70a', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'dab1a20710d104df860fd9e67568f326cbe713c1', style: { flex: '1' } }), h("verdocs-button", { key: 'e5a54ff7ce00b6ec5e5e19b0035fdfed1669f957', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
+            } }))), h("div", { key: 'c60f5b4e51021e3ce3d18eb55e17513b6fc836c1', class: "buttons" }, h("button", { key: 'c81a324c051f6f61988beaef648226a5a688ae60', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '6b6c1e98202cc6d4ddfa1ebfd371cdbc322ef618', style: { flex: '1' } }), h("verdocs-button", { key: 'a2049051f318bc992a6a064d181fc48951c39d2b', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
     }
     static get style() { return VerdocsTemplateRolePropertiesStyle0; }
 }, [0, "verdocs-template-role-properties", {
@@ -240,4 +240,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateRoleProperties as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-691abc4a.js.map
+//# sourceMappingURL=p-dfc85c3a.js.map

package/dist/components/{p-691abc4a.js.map → p-dfc85c3a.js.map}

@@ -1 +1 @@
-{"file":"p-691abc4a.js","mappings":"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","names":[],"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-dfc85c3a.js","mappings":"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","names":[],"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-83265390.js → p-e415c52f.js}

@@ -3,10 +3,10 @@ import { VerdocsEndpoint, getTemplate } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './p-04c07b7b.js';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-78d650ca.js';
-import { d as defineCustomElement$4 } from './p-e434599f.js';
-import { d as defineCustomElement$3 } from './p-6d982a9e.js';
-import { d as defineCustomElement$2 } from './p-b1c184ec.js';
-import { d as defineCustomElement$1 } from './p-13174089.js';
+import { d as defineCustomElement$4 } from './p-ae6ec4aa.js';
+import { d as defineCustomElement$3 } from './p-03019a61.js';
+import { d as defineCustomElement$2 } from './p-29a7261a.js';
+import { d as defineCustomElement$1 } from './p-3c5f915c.js';
 import { f as format } from './p-12bab948.js';
 
 const verdocsTemplateBuildTabsCss = "@-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-build-tabs{-ms-flex:1;flex:1;gap:15px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-button-panel svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}.template-details-panel .row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px;margin:10px 0}.template-details-panel label{-ms-flex:0 0 70px;flex:0 0 70px}.template-details-panel .value{-ms-flex:1;flex:1;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-details-panel .icon-button{cursor:pointer;opacity:0.8;-ms-flex:0;flex:0;width:18px;height:18px}.template-details-panel .icon-button svg{stroke:#000000;width:18px;height:18px}.template-details-panel .icon-button:hover{opacity:1}";
@@ -183,4 +183,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateBuildTabs as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-83265390.js.map
+//# sourceMappingURL=p-e415c52f.js.map

package/dist/components/{p-83265390.js.map → p-e415c52f.js.map}

@@ -1 +1 @@
-{"file":"p-83265390.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.scss?tag=verdocs-template-build-tabs","src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-build-tabs {\n  flex: 1;\n  gap: 15px;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  font-family: $verdocs-primary-font;\n\n  verdocs-button-panel {\n    svg {\n      transform: scale(0.8);\n    }\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n}\n\n.template-details-panel {\n  .row {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    margin: 10px 0;\n  }\n\n  label {\n    flex: 0 0 70px;\n  }\n\n  .value {\n    flex: 1;\n    font-weight: 300;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .icon-button {\n    cursor: pointer;\n    opacity: 0.8;\n    flex: 0;\n    width: 18px;\n    height: 18px;\n\n    svg {\n      stroke: #000000;\n      width: 18px;\n      height: 18px;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import {format} from 'date-fns';\nimport {getTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst HelpIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\" /></svg>`;\n\nconst STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a set of tabs for the template builder.\n */\n@Component({\n  tag: 'verdocs-template-build-tabs',\n  styleUrl: 'verdocs-template-build-tabs.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateBuildTabs {\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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[BUILD_TABS] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  @Watch('step')\n  onStepChanged(newStep: TVerdocsBuildStep) {\n    console.log('[BUILD_TABS] Step changed', newStep);\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        this.step = 'attachments';\n        console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[BUILD_TABS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  setStep(e: any) {\n    console.log('[BUILD_TABS] Selected step', e.detail.tab.id);\n    e.stopPropagation();\n    e.preventDefault();\n    this.step = e.detail.tab.id;\n    this.stepChanged?.emit(e.detail.tab.id);\n  }\n\n  copyTemplateId() {\n    navigator.clipboard\n      .writeText(this.templateId)\n      .then(() => {\n        VerdocsToast('Template ID copied', {style: 'success', duration: 3000});\n      })\n      .catch(e => {\n        console.warn('[BUILD_TABS] Error copying to clipboard', e);\n        this.sdkError?.emit(e);\n      });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const canEditRoles = (this.template?.documents || []).length > 0;\n    let canEditFields = canEditRoles && (this.template?.roles || []).length > 0;\n    const canPreview = canEditFields && (this.template?.fields || []).length > 0;\n\n    let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);\n    if (!canPreview && selectedStepIndex >= 4) {\n      selectedStepIndex = 3;\n    }\n    if (!canEditFields && selectedStepIndex >= 3) {\n      selectedStepIndex = 1;\n    }\n    if (!canEditRoles && selectedStepIndex >= 1) {\n      selectedStepIndex = 0;\n    }\n\n    return (\n      <Host>\n        <verdocs-tabs\n          onSelectTab={e => this.setStep(e)}\n          selectedTab={selectedStepIndex}\n          tabs={[\n            {id: 'attachments', disabled: false, label: 'Attachment(s)'},\n            {id: 'roles', disabled: !canEditRoles, label: 'Roles'},\n            {id: 'settings', disabled: !canEditFields, label: 'Settings'},\n            {id: 'fields', disabled: !canEditFields, label: 'Fields'},\n            {id: 'preview', disabled: !canPreview, label: 'Preview/Send'},\n          ]}\n        />\n\n        {this.templateId && (\n          <div class=\"info\">\n            <verdocs-button-panel icon={HelpIcon}>\n              <div class=\"template-details-panel\">\n                <h6>Template Details</h6>\n                <div class=\"row\">\n                  <label>ID:</label>\n                  <div class=\"value\">{this.templateId}</div>\n                  <div class=\"icon-button\" innerHTML={CopyIcon} onClick={() => this.copyTemplateId()} />\n                </div>\n                <div class=\"row\">\n                  <label>Name:</label>\n                  <div class=\"value\">{this.template?.name}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Visibility:</label>\n                  <div class=\"value\">{this.template?.is_public ? 'Public' : this.template?.is_personal ? 'Private' : 'Shared'}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Created:</label>\n                  <div class=\"value\">{this.template?.counter ? format(new Date(this.template?.created_at), 'P p') : ''}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Used:</label>\n                  <div class=\"value\">{this.template?.counter} time(s)</div>\n                </div>\n              </div>\n            </verdocs-button-panel>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-e415c52f.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.scss?tag=verdocs-template-build-tabs","src/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-build-tabs {\n  flex: 1;\n  gap: 15px;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  font-family: $verdocs-primary-font;\n\n  verdocs-button-panel {\n    svg {\n      transform: scale(0.8);\n    }\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n}\n\n.template-details-panel {\n  .row {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    margin: 10px 0;\n  }\n\n  label {\n    flex: 0 0 70px;\n  }\n\n  .value {\n    flex: 1;\n    font-weight: 300;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .icon-button {\n    cursor: pointer;\n    opacity: 0.8;\n    flex: 0;\n    width: 18px;\n    height: 18px;\n\n    svg {\n      stroke: #000000;\n      width: 18px;\n      height: 18px;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import {format} from 'date-fns';\nimport {getTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst HelpIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\" /></svg>`;\n\nconst STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a set of tabs for the template builder.\n */\n@Component({\n  tag: 'verdocs-template-build-tabs',\n  styleUrl: 'verdocs-template-build-tabs.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateBuildTabs {\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 ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[BUILD_TABS] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  @Watch('step')\n  onStepChanged(newStep: TVerdocsBuildStep) {\n    console.log('[BUILD_TABS] Step changed', newStep);\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        this.step = 'attachments';\n        console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[BUILD_TABS] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  setStep(e: any) {\n    console.log('[BUILD_TABS] Selected step', e.detail.tab.id);\n    e.stopPropagation();\n    e.preventDefault();\n    this.step = e.detail.tab.id;\n    this.stepChanged?.emit(e.detail.tab.id);\n  }\n\n  copyTemplateId() {\n    navigator.clipboard\n      .writeText(this.templateId)\n      .then(() => {\n        VerdocsToast('Template ID copied', {style: 'success', duration: 3000});\n      })\n      .catch(e => {\n        console.warn('[BUILD_TABS] Error copying to clipboard', e);\n        this.sdkError?.emit(e);\n      });\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const canEditRoles = (this.template?.documents || []).length > 0;\n    let canEditFields = canEditRoles && (this.template?.roles || []).length > 0;\n    const canPreview = canEditFields && (this.template?.fields || []).length > 0;\n\n    let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);\n    if (!canPreview && selectedStepIndex >= 4) {\n      selectedStepIndex = 3;\n    }\n    if (!canEditFields && selectedStepIndex >= 3) {\n      selectedStepIndex = 1;\n    }\n    if (!canEditRoles && selectedStepIndex >= 1) {\n      selectedStepIndex = 0;\n    }\n\n    return (\n      <Host>\n        <verdocs-tabs\n          onSelectTab={e => this.setStep(e)}\n          selectedTab={selectedStepIndex}\n          tabs={[\n            {id: 'attachments', disabled: false, label: 'Attachment(s)'},\n            {id: 'roles', disabled: !canEditRoles, label: 'Roles'},\n            {id: 'settings', disabled: !canEditFields, label: 'Settings'},\n            {id: 'fields', disabled: !canEditFields, label: 'Fields'},\n            {id: 'preview', disabled: !canPreview, label: 'Preview/Send'},\n          ]}\n        />\n\n        {this.templateId && (\n          <div class=\"info\">\n            <verdocs-button-panel icon={HelpIcon}>\n              <div class=\"template-details-panel\">\n                <h6>Template Details</h6>\n                <div class=\"row\">\n                  <label>ID:</label>\n                  <div class=\"value\">{this.templateId}</div>\n                  <div class=\"icon-button\" innerHTML={CopyIcon} onClick={() => this.copyTemplateId()} />\n                </div>\n                <div class=\"row\">\n                  <label>Name:</label>\n                  <div class=\"value\">{this.template?.name}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Visibility:</label>\n                  <div class=\"value\">{this.template?.is_public ? 'Public' : this.template?.is_personal ? 'Private' : 'Shared'}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Created:</label>\n                  <div class=\"value\">{this.template?.counter ? format(new Date(this.template?.created_at), 'P p') : ''}</div>\n                </div>\n                <div class=\"row\">\n                  <label>Used:</label>\n                  <div class=\"value\">{this.template?.counter} time(s)</div>\n                </div>\n              </div>\n            </verdocs-button-panel>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-67d270fa.js → p-e5f47d0c.js}

@@ -3,12 +3,12 @@ import { VerdocsEndpoint, getTemplate, createTemplateDocument, deleteTemplateDoc
 import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon, b as PageCountIcon, T as TrashIcon } from './p-b0766439.js';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-78d650ca.js';
-import { d as defineCustomElement$6 } from './p-82efd79a.js';
-import { d as defineCustomElement$5 } from './p-6d982a9e.js';
-import { d as defineCustomElement$4 } from './p-19259124.js';
-import { d as defineCustomElement$3 } from './p-b1c184ec.js';
-import { d as defineCustomElement$2 } from './p-8a9fc348.js';
-import { d as defineCustomElement$1 } from './p-3f14383e.js';
+import { d as defineCustomElement$6 } from './p-d013a90c.js';
+import { d as defineCustomElement$5 } from './p-03019a61.js';
+import { d as defineCustomElement$4 } from './p-c2860587.js';
+import { d as defineCustomElement$3 } from './p-29a7261a.js';
+import { d as defineCustomElement$2 } from './p-000bd55f.js';
+import { d as defineCustomElement$1 } from './p-0e7eb15a.js';
 
 const verdocsTemplateAttachmentsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
 const VerdocsTemplateAttachmentsStyle0 = verdocsTemplateAttachmentsCss;
@@ -225,4 +225,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateAttachments as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-67d270fa.js.map
+//# sourceMappingURL=p-e5f47d0c.js.map