@verdocs/web-sdk 5.0.75 → 5.1.1

package/dist/components/{p-z0ZD30Bi.js.map → p-BwIyL1sF.js.map}

@@ -1 +1 @@
-{"file":"p-z0ZD30Bi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: 2px;\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={disabled} required={required} />\n          <span />\n\n          {editable && (\n            <Fragment>\n              <div\n                id={`verdocs-settings-panel-trigger-${fieldname}`}\n                style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n                class=\"settings-icon\"\n                innerHTML={SettingsIcon}\n                onClick={(e: any) => {\n                  e.stopPropagation();\n                  this.showingProperties = !this.showingProperties;\n                }}\n              />\n\n              {this.showingProperties && (\n                <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\n                    onClose={() => (this.showingProperties = false)}\n                    onDelete={() => {\n                      this.deleted?.emit({fieldName: fieldname});\n                      return this.hideSettingsPanel();\n                    }}\n                    onSettingsChanged={e => {\n                      this.settingsChanged?.emit(e.detail);\n                      return this.hideSettingsPanel();\n                    }}\n                    helpText={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BwIyL1sF.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  padding: 0;\n  width: 16px;\n  height: 16px;\n  display: block;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  label {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    width: 14px;\n    height: 14px;\n    display: block;\n    box-sizing: border-box;\n  }\n\n  &.disabled label {\n    opacity: 0.5;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    margin: 0;\n    content: '';\n    width: 12px;\n    height: 12px;\n    display: block;\n    line-height: 12px;\n    border-radius: 2px;\n    box-sizing: border-box;\n    border: 1px solid $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    font-size: 12px;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    display: block;\n    margin-left: -20px;\n    margin-top: -17px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -5px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, Fragment, h, Host, Method, Prop, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method()\n  async focusField() {\n    // We don't have a visible input that we can actually focus on, so we fake it\n    this.focused = true;\n    setTimeout(() => {\n      this.focused = false;\n    }, 500);\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, label = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const checked = value === 'true';\n\n    if (done) {\n      return <Host class={{done}}>{checked ? '✓' : '☐'}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n\n        <label htmlFor={fieldname}>\n          <input id={fieldname} name={fieldname} type=\"checkbox\" checked={checked} disabled={disabled} required={required} />\n          <span />\n\n          {editable && (\n            <Fragment>\n              <div\n                id={`verdocs-settings-panel-trigger-${fieldname}`}\n                style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n                class=\"settings-icon\"\n                innerHTML={SettingsIcon}\n                onClick={(e: any) => {\n                  e.stopPropagation();\n                  this.showingProperties = !this.showingProperties;\n                }}\n              />\n\n              {this.showingProperties && (\n                <verdocs-portal anchor={`verdocs-settings-panel-trigger-${field.name}`} onClickAway={() => (this.showingProperties = false)}>\n                  <verdocs-template-field-properties\n                    templateId={sourceid}\n                    fieldName={field.name}\n                    onClose={() => (this.showingProperties = false)}\n                    onDelete={() => {\n                      this.deleted?.emit({fieldName: fieldname});\n                      return this.hideSettingsPanel();\n                    }}\n                    onSettingsChanged={e => {\n                      this.settingsChanged?.emit(e.detail);\n                      return this.hideSettingsPanel();\n                    }}\n                    helpText={'Check boxes allow the user to select one or more (non-exclusive) options.'}\n                  />\n                </verdocs-portal>\n              )}\n            </Fragment>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Dw5jTBu3.js → p-C2Fb8G6A.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-cuwa7Els.js';
 import { getRGBA } from '@verdocs/js-sdk';
 import { S as SettingsIcon } from './p-7LXbcjVz.js';
-import { S as Store } from './p-C_IIZj49.js';
+import { S as Store } from './p-DmsV595e.js';
 import { d as defineCustomElement$a } from './p-DxZzj3bW.js';
 import { d as defineCustomElement$9 } from './p-DBr1-dfD.js';
 import { d as defineCustomElement$8 } from './p-CUMKIsSw.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$6 } from './p-Bs52WSYR.js';
 import { d as defineCustomElement$5 } from './p-BV_wbVq4.js';
 import { d as defineCustomElement$4 } from './p-BPaxQrtW.js';
 import { d as defineCustomElement$3 } from './p-DmSZqyDY.js';
-import { d as defineCustomElement$2 } from './p-C3_yeGdH.js';
+import { d as defineCustomElement$2 } from './p-dIi8HYZ5.js';
 import { d as defineCustomElement$1 } from './p-CgbZe6eM.js';
 
 const verdocsFieldInitialCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial.disabled img{opacity:0.5}verdocs-field-initial button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-initial .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-initial .settings-icon svg{fill:#707ae5}verdocs-field-initial .settings-icon:hover{opacity:1}@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)}}";
@@ -224,6 +224,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsFieldInitial as V, defineCustomElement as d };
-//# sourceMappingURL=p-Dw5jTBu3.js.map
+//# sourceMappingURL=p-C2Fb8G6A.js.map
 
-//# sourceMappingURL=p-Dw5jTBu3.js.map
+//# sourceMappingURL=p-C2Fb8G6A.js.map

package/dist/components/{p-Dw5jTBu3.js.map → p-C2Fb8G6A.js.map}

@@ -1 +1 @@
-{"file":"p-Dw5jTBu3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/fields/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt an initial.\n *\n * NOTE: When initial fields are completed they will be filled with an initial \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop({reflect: true}) initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.setAttribute('initials', this.initials);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n    const {base64} = settings;\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={value} alt=\"Initial\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"Initial\" /> : <button onClick={() => !disabled && this.handleShow()}>Initial</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: field.name});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"initial fields capture the recipient's initials on a clause or page.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C2Fb8G6A.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-initial/verdocs-field-initial.scss?tag=verdocs-field-initial","src/components/fields/verdocs-field-initial/verdocs-field-initial.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-initial {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid $verdocs-red-1;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import {ITemplateField, getRGBA, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays an initial field. If an initial already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt an initial.\n *\n * NOTE: When initial fields are completed they will be filled with an initial \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-initial',\n  styleUrl: 'verdocs-field-initial.scss',\n  shadow: false,\n})\nexport class VerdocsFieldInitial {\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop({reflect: true}) initials: string = '';\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when an initial block is adopted by the user. The event detail will contain the base64 string of the initial image.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempInitials: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[INITIAL] Adopted initials');\n    this.tempInitials = e.detail;\n    this.fieldChange?.emit(this.tempInitials);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-initial-dialog');\n    this.dialog.setAttribute('initials', this.initials);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const backgroundColor = getRGBA(index);\n    const {base64} = settings;\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={value} alt=\"Initial\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"Initial\" /> : <button onClick={() => !disabled && this.handleShow()}>Initial</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: field.name});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"initial fields capture the recipient's initials on a clause or page.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-IcjPGPO7.js → p-CPRS8f3I.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
 import { VerdocsEndpoint, getTemplate, updateTemplateRole, deleteTemplateRole, isValidEmail } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-C1sRVZWv.js';
-import { S as Store } from './p-C_IIZj49.js';
+import { S as Store } from './p-DmsV595e.js';
 import { d as defineCustomElement$4 } from './p-DxZzj3bW.js';
 import { d as defineCustomElement$3 } from './p-B86IoqG1.js';
 import { d as defineCustomElement$2 } from './p-DmSZqyDY.js';
@@ -238,6 +238,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateRoleProperties as V, defineCustomElement as d };
-//# sourceMappingURL=p-IcjPGPO7.js.map
+//# sourceMappingURL=p-CPRS8f3I.js.map
 
-//# sourceMappingURL=p-IcjPGPO7.js.map
+//# sourceMappingURL=p-CPRS8f3I.js.map

package/dist/components/{p-IcjPGPO7.js.map → p-CPRS8f3I.js.map}

@@ -1 +1 @@
-{"file":"p-IcjPGPO7.js","mappings":";;;;;;;;;AAAA,MAAM,gCAAgC,GAAG,2kFAA2kF;;ACKpnF,MAAM,SAAS,GAAG,CAAA,qkBAAA,CAAukB;MAS5kB,6BAA6B,iBAAAA,kBAAA,CAAA,MAAA,6BAAA,SAAAC,CAAA,CAAA;AAJ1C,IAAA,WAAA,GAAA;;;;;;AAKU,QAAA,IAAkB,CAAA,kBAAA,GAAG,IAAI;AAEjC;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE;AAEhE;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAmBpB,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AACb,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;AACT,QAAA,IAAI,CAAA,IAAA,GAAmB,QAAQ;AAC/B,QAAA,IAAU,CAAA,UAAA,GAAG,EAAE;AACf,QAAA,IAAS,CAAA,SAAA,GAAG,EAAE;AACd,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;AACV,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;AACV,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAEjB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;AACd,QAAA,IAAQ,CAAA,QAAA,GAAqB,IAAI;AAmQ3C;AAjQC,IAAA,MAAM,iBAAiB,GAAA;;AACrB,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;AAE3B,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,OAAO,CAAC,GAAG,CAAC,CAAA,qCAAA,EAAwC,IAAI,CAAC,UAAU,CAAE,CAAA,CAAC;gBACtE;;AAGF,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AAC1B,gBAAA,OAAO,CAAC,GAAG,CAAC,gEAAgE,CAAC;gBAC7E;;YAGF,IAAI,CAAC,gBAAgB,EAAE;;QACvB,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,CAAC,CAAC;AACnD,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA,EAAA,GAAA,CAAC,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,EAAA,GAAA,CAAC,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,CAAC;;;IAItF,oBAAoB,GAAA;QAClB,IAAI,CAAC,kBAAkB,EAAE;;AAG3B,IAAA,MAAM,gBAAgB,GAAA;QACpB,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,IAAI,CAAC,UAAU,CAAC;QACvD,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,KAAK,CAAC,SAAS,CACb,WAAW,EACX,IAAI,CAAC,UAAU,EACf,MAAM,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,EACjD,KAAK,EACL,CAAC,QAAmB,KAAI;;AACtB,YAAA,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,QAAQ,CAAC;AACjD,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;AACxB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AAEpB,YAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;YAClF,IAAI,WAAW,EAAE;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAC5B,gBAAA,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAC5B,gBAAA,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,SAAS;AACtC,gBAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC9B,gBAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC9B,gBAAA,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,SAAS;AACtC,gBAAA,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,WAAW,CAAC;;AAEpD,SAAC,CACF;;IAGH,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC;AAChD,YAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI;;;AAIlC,IAAA,YAAY,CAAC,CAAC,EAAA;;QACZ,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;QAClF,IAAI,WAAW,EAAE;AACf,YAAA,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,IAAI;AAC5B,YAAA,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU;AACxC,YAAA,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,SAAS;AACtC,YAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC9B,YAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,SAAS;;AAGxC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;IAGpB,MAAM,UAAU,CAAC,CAAC,EAAA;QAChB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAClB,QAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;YAChE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B;AACE,aAAA,IAAI,CAAC,OAAM,CAAC,KAAG;;AACd,YAAA,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACvC,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7D,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;AAClF,YAAA,IAAI,SAAS,GAAG,EAAE,EAAE;AAClB,gBAAA,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC;;YAElC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;YAClD,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;AACpB,SAAC;aACA,KAAK,CAAC,CAAC,IAAG;AACT,YAAA,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC;AACrC,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC,CAAC;;IAGN,MAAM,YAAY,CAAC,CAAC,EAAA;QAClB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,MAAM,CAAC,OAAO,CAAC,yHAAyH,CAAC,EAAE;AAC7I,YAAA,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ;iBAC7D,IAAI,CAAC,MAAK;;AACT,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAc;gBAC1E,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;AACjF,gBAAA,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;;AAEvD,gBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC;gBACzE,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;AACpB,aAAC;iBACA,KAAK,CAAC,CAAC,IAAG;AACT,gBAAA,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,aAAC,CAAC;;;IAIR,MAAM,GAAA;;QACJ,MAAM,SAAS,GAAG,CAAC,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,KAAI,EAAE,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,QAAQ,CAAC;;AAGhG,QAAA,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,MAAM,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAE3I,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK,EAAA,EAC5F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC1B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACnB,aAAC,EACD,CAAA,EAED,SAAS,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,kEAAkE,CAErG,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAY,EAAA,OAAA,CAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,OAAO,EAAE;AACP,gBAAA,EAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAC;AAClC,gBAAA,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC;AAC1B,gBAAA,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAC;AACvC,aAAA,EACD,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC1B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACnB,aAAC,GACD,CAKE,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAA4B,EAAA,uBAAA,CAAA,EAEpD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CACE,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,UAAU,EACtB,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAChC,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACnB,aAAC,EACD,CAAA,EAEF,CACE,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,SAAS,EACrB,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC/B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;aAClB,EAAA,CACD,CACE,CACF,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAC,KAAK,EAClB,WAAW,EAAC,kBAAkB,EAC9B,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC3B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;aAClB,EACD,CAAA,EAEF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,EAAI,CAAA,EAEhC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,yBAAyB,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAC,KAAK;;YAElB,WAAW,EAAC,iBAAiB,EAC7B,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AAC3B,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI;aAClB,EAAA,CACD,CAEE,CACF,EAiBN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,EAEhH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,EAAI,CAAA,EAG3B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAI,CAAA,CAC7G,CACD,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.scss?tag=verdocs-template-role-properties","src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-role-properties {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  form {\n    gap: 15px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n\n    .instructions {\n      margin: 7px 0 0 0;\n      font-size: 12px;\n      font-style: italic;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 14px;\n      flex: 0 0 100px;\n      font-weight: 700;\n      margin: 0 0 4px 0;\n      color: $label-color-light;\n    }\n\n    .first-last {\n      gap: 15px;\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  form verdocs-help-icon {\n    transform: scale(0.8);\n  }\n\n  verdocs-select-input {\n    //flex: 1;\n    //margin: 0;\n\n    label {\n      display: block;\n    }\n  }\n\n  verdocs-text-input {\n    margin: 0;\n\n    label {\n      display: block;\n    }\n\n    .input-label {\n      flex: 0 0 100px;\n    }\n\n    input {\n      flex: 1;\n      display: flex;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n    }\n  }\n\n  .checkbox-wrapper {\n    flex: 1;\n    display: flex;\n  }\n\n  .delete-button {\n    height: 34px;\n    display: flex;\n    padding: 0 6px;\n    cursor: pointer;\n    background: none;\n    border-radius: 4px;\n    align-items: center;\n    border: 1px solid #999;\n    justify-content: center;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    &:active {\n      background: #f3f3f3;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {deleteTemplateRole, getTemplate, isValidEmail, ITemplate, TRecipientType, updateTemplateRole, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#a50021\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\" /></svg>`;\n\n/**\n * Present an editing form suitable for adjusting template-role properties.\n */\n@Component({\n  tag: 'verdocs-template-role-properties',\n  styleUrl: 'verdocs-template-role-properties.scss',\n})\nexport class VerdocsTemplateRoleProperties {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The role name to edit.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) close: EventEmitter;\n\n  /**\n   * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\n   * the role will have already been deleted server-side.\n   */\n  @Event({composed: true}) delete: EventEmitter<{templateId: string; roleName: string}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() dirty = false;\n  @State() saving = false;\n  @State() name = '';\n  @State() type: TRecipientType = 'signer';\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() delegator = false;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[ROLES Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[ROLES] Loading tempate', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('[BUILD] Template Updated', template);\n        this.template = template;\n        this.loading = false;\n\n        const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n        if (editingRole) {\n          this.name = editingRole.name;\n          this.type = editingRole.type;\n          this.first_name = editingRole.first_name;\n          this.last_name = editingRole.last_name;\n          this.email = editingRole.email;\n          this.phone = editingRole.phone;\n          this.delegator = editingRole.delegator;\n          console.log('[ROLES] Editing role', editingRole);\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n    if (editingRole) {\n      this.name = editingRole.name;\n      this.type = editingRole.type;\n      this.first_name = editingRole.first_name;\n      this.last_name = editingRole.last_name;\n      this.email = editingRole.email;\n      this.phone = editingRole.phone;\n      this.delegator = editingRole.delegator;\n    }\n\n    this.dirty = false;\n    this.close?.emit();\n  }\n\n  async handleSave(e) {\n    e.stopPropagation();\n    this.saving = true;\n    updateTemplateRole(this.endpoint, this.templateId, this.roleName, {\n      name: this.name,\n      type: this.type,\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      delegator: this.delegator,\n    })\n      .then(async r => {\n        console.log('[ROLES] Update result', r);\n        this.saving = false;\n        this.dirty = false;\n        const newTemplate = JSON.parse(JSON.stringify(this.template));\n        const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);\n        if (roleIndex > -1) {\n          newTemplate.roles[roleIndex] = r;\n        }\n        Store.updateTemplate(this.templateId, newTemplate);\n        this.close?.emit();\n      })\n      .catch(e => {\n        console.log('[ROLES Update error', e);\n        this.saving = false;\n      });\n  }\n\n  async handleDelete(e) {\n    e.stopPropagation();\n    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {\n      deleteTemplateRole(this.endpoint, this.templateId, this.roleName)\n        .then(() => {\n          const newTemplate = JSON.parse(JSON.stringify(this.template)) as ITemplate;\n          newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);\n          Store.getTemplate(this.endpoint, this.templateId, true);\n          // Store.updateTemplate(this.templateId, newTemplate);\n          this.delete?.emit({templateId: this.templateId, roleName: this.roleName});\n          this.close?.emit();\n        })\n        .catch(e => {\n          console.log('[ROLES Deletion error', e);\n        });\n    }\n  }\n\n  render() {\n    const hasFields = (this.template?.fields || []).some(field => field.role_name === this.roleName);\n\n    // Either all three should be empty, or all three need to be filled\n    const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);\n\n    return (\n      <Host>\n        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-role-name\"\n              label=\"Role Name (Must be unique)\"\n              value={this.name}\n              autocomplete=\"off\"\n              disabled={hasFields}\n              placeholder=\"Role Name...\"\n              onInput={(e: any) => {\n                this.name = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            {hasFields && <div class=\"instructions\">This role has fields assigned and can no longer be renamed.</div>}\n            {/*<div class=\"instructions\">{hasFields ? 'This role has fields assigned and can no longer be renamed.' : 'A unique name to identify the role in the workflow.'}</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Type:</div>\n            <verdocs-select-input\n              value={this.type}\n              options={[\n                {label: 'Signer', value: 'signer'},\n                {label: 'CC', value: 'cc'},\n                {label: 'Approver', value: 'approver'},\n              ]}\n              onInput={(e: any) => {\n                this.type = e.target.value;\n                this.dirty = true;\n              }}\n            />\n            {/*<div class=\"instructions\">*/}\n            {/*  Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform*/}\n            {/*  a final review.*/}\n            {/*</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Default Contact Info:</div>\n\n            <div class=\"first-last\">\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.first_name}\n                autocomplete=\"off\"\n                placeholder=\"First...\"\n                onInput={(e: any) => {\n                  this.first_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.last_name}\n                autocomplete=\"off\"\n                placeholder=\"Last...\"\n                onInput={(e: any) => {\n                  this.last_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          </div>\n\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-recipient-email\"\n              value={this.email}\n              autocomplete=\"off\"\n              placeholder=\"Email Address...\"\n              onInput={(e: any) => {\n                this.email = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            <div style={{height: '15px'}} />\n\n            <div>\n              <verdocs-text-input\n                id=\"verdocs-recipient-phone\"\n                value={this.phone}\n                autocomplete=\"off\"\n                // helpText=\"The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.\"\n                placeholder=\"Phone Number...\"\n                onInput={(e: any) => {\n                  this.phone = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n              {/*<div class=\"instructions\">Default name and contact information. This may be changed later when creating and envelope with this template.</div>*/}\n            </div>\n          </div>\n\n          {/*<div class=\"row\">*/}\n          {/*  <div class=\"input-label\">May Delegate:</div>*/}\n          {/*  <div class=\"checkbox-wrapper\">*/}\n          {/*    <verdocs-checkbox*/}\n          {/*      checked={this.delegator}*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.delegator = e.target.checked;*/}\n          {/*        this.dirty = true;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n\n          {/*  <verdocs-help-icon text=\"If enabled, this recipient may delegate their actions to another individual.\" />*/}\n          {/*</div>*/}\n\n          <div class=\"buttons\">\n            <button class=\"delete-button\" disabled={this.dirty} onClick={e => this.handleDelete(e)} innerHTML={TrashIcon} />\n\n            <div style={{flex: '1'}} />\n\n            {/*<verdocs-button size=\"small\" variant=\"outline\" label=\"Cancel\" disabled={!this.dirty} onClick={e => this.handleCancel(e)} />*/}\n            <verdocs-button size=\"small\" label=\"Save\" disabled={!this.dirty || !isValid} onClick={e => this.handleSave(e)} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CPRS8f3I.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.scss?tag=verdocs-template-role-properties","src/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-role-properties {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: space-between;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  form {\n    gap: 15px;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n\n    .instructions {\n      margin: 7px 0 0 0;\n      font-size: 12px;\n      font-style: italic;\n    }\n\n    .input-label {\n      display: block;\n      font-size: 14px;\n      flex: 0 0 100px;\n      font-weight: 700;\n      margin: 0 0 4px 0;\n      color: $label-color-light;\n    }\n\n    .first-last {\n      gap: 15px;\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  form verdocs-help-icon {\n    transform: scale(0.8);\n  }\n\n  verdocs-select-input {\n    //flex: 1;\n    //margin: 0;\n\n    label {\n      display: block;\n    }\n  }\n\n  verdocs-text-input {\n    margin: 0;\n\n    label {\n      display: block;\n    }\n\n    .input-label {\n      flex: 0 0 100px;\n    }\n\n    input {\n      flex: 1;\n      display: flex;\n    }\n\n    verdocs-text-input {\n      margin: 0;\n    }\n  }\n\n  .checkbox-wrapper {\n    flex: 1;\n    display: flex;\n  }\n\n  .delete-button {\n    height: 34px;\n    display: flex;\n    padding: 0 6px;\n    cursor: pointer;\n    background: none;\n    border-radius: 4px;\n    align-items: center;\n    border: 1px solid #999;\n    justify-content: center;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    &:active {\n      background: #f3f3f3;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {deleteTemplateRole, getTemplate, isValidEmail, ITemplate, TRecipientType, updateTemplateRole, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"#a50021\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0\" /></svg>`;\n\n/**\n * Present an editing form suitable for adjusting template-role properties.\n */\n@Component({\n  tag: 'verdocs-template-role-properties',\n  styleUrl: 'verdocs-template-role-properties.scss',\n})\nexport class VerdocsTemplateRoleProperties {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * The role name to edit.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) close: EventEmitter;\n\n  /**\n   * Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\n   * the role will have already been deleted server-side.\n   */\n  @Event({composed: true}) delete: EventEmitter<{templateId: string; roleName: string}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() dirty = false;\n  @State() saving = false;\n  @State() name = '';\n  @State() type: TRecipientType = 'signer';\n  @State() first_name = '';\n  @State() last_name = '';\n  @State() email = '';\n  @State() phone = '';\n  @State() delegator = false;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[ROLES] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[ROLES] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[ROLES Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[ROLES] Loading tempate', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('[BUILD] Template Updated', template);\n        this.template = template;\n        this.loading = false;\n\n        const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n        if (editingRole) {\n          this.name = editingRole.name;\n          this.type = editingRole.type;\n          this.first_name = editingRole.first_name;\n          this.last_name = editingRole.last_name;\n          this.email = editingRole.email;\n          this.phone = editingRole.phone;\n          this.delegator = editingRole.delegator;\n          console.log('[ROLES] Editing role', editingRole);\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    const editingRole = this.template?.roles.find(role => role.name === this.roleName);\n    if (editingRole) {\n      this.name = editingRole.name;\n      this.type = editingRole.type;\n      this.first_name = editingRole.first_name;\n      this.last_name = editingRole.last_name;\n      this.email = editingRole.email;\n      this.phone = editingRole.phone;\n      this.delegator = editingRole.delegator;\n    }\n\n    this.dirty = false;\n    this.close?.emit();\n  }\n\n  async handleSave(e) {\n    e.stopPropagation();\n    this.saving = true;\n    updateTemplateRole(this.endpoint, this.templateId, this.roleName, {\n      name: this.name,\n      type: this.type,\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      delegator: this.delegator,\n    })\n      .then(async r => {\n        console.log('[ROLES] Update result', r);\n        this.saving = false;\n        this.dirty = false;\n        const newTemplate = JSON.parse(JSON.stringify(this.template));\n        const roleIndex = newTemplate.roles.findIndex(role => role.name === this.roleName);\n        if (roleIndex > -1) {\n          newTemplate.roles[roleIndex] = r;\n        }\n        Store.updateTemplate(this.templateId, newTemplate);\n        this.close?.emit();\n      })\n      .catch(e => {\n        console.log('[ROLES Update error', e);\n        this.saving = false;\n      });\n  }\n\n  async handleDelete(e) {\n    e.stopPropagation();\n    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {\n      deleteTemplateRole(this.endpoint, this.templateId, this.roleName)\n        .then(() => {\n          const newTemplate = JSON.parse(JSON.stringify(this.template)) as ITemplate;\n          newTemplate.roles = newTemplate.roles.filter(role => role.name !== this.roleName);\n          Store.getTemplate(this.endpoint, this.templateId, true);\n          // Store.updateTemplate(this.templateId, newTemplate);\n          this.delete?.emit({templateId: this.templateId, roleName: this.roleName});\n          this.close?.emit();\n        })\n        .catch(e => {\n          console.log('[ROLES Deletion error', e);\n        });\n    }\n  }\n\n  render() {\n    const hasFields = (this.template?.fields || []).some(field => field.role_name === this.roleName);\n\n    // Either all three should be empty, or all three need to be filled\n    const isValid = (!this.email && !this.first_name && !this.last_name) || (isValidEmail(this.email) && !!this.first_name && !!this.last_name);\n\n    return (\n      <Host>\n        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-role-name\"\n              label=\"Role Name (Must be unique)\"\n              value={this.name}\n              autocomplete=\"off\"\n              disabled={hasFields}\n              placeholder=\"Role Name...\"\n              onInput={(e: any) => {\n                this.name = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            {hasFields && <div class=\"instructions\">This role has fields assigned and can no longer be renamed.</div>}\n            {/*<div class=\"instructions\">{hasFields ? 'This role has fields assigned and can no longer be renamed.' : 'A unique name to identify the role in the workflow.'}</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Type:</div>\n            <verdocs-select-input\n              value={this.type}\n              options={[\n                {label: 'Signer', value: 'signer'},\n                {label: 'CC', value: 'cc'},\n                {label: 'Approver', value: 'approver'},\n              ]}\n              onInput={(e: any) => {\n                this.type = e.target.value;\n                this.dirty = true;\n              }}\n            />\n            {/*<div class=\"instructions\">*/}\n            {/*  Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform*/}\n            {/*  a final review.*/}\n            {/*</div>*/}\n          </div>\n\n          <div>\n            <div class=\"input-label\">Default Contact Info:</div>\n\n            <div class=\"first-last\">\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.first_name}\n                autocomplete=\"off\"\n                placeholder=\"First...\"\n                onInput={(e: any) => {\n                  this.first_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n\n              <verdocs-text-input\n                id=\"verdocs-recipient-first\"\n                value={this.last_name}\n                autocomplete=\"off\"\n                placeholder=\"Last...\"\n                onInput={(e: any) => {\n                  this.last_name = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          </div>\n\n          <div>\n            <verdocs-text-input\n              id=\"verdocs-recipient-email\"\n              value={this.email}\n              autocomplete=\"off\"\n              placeholder=\"Email Address...\"\n              onInput={(e: any) => {\n                this.email = e.target.value;\n                this.dirty = true;\n              }}\n            />\n\n            <div style={{height: '15px'}} />\n\n            <div>\n              <verdocs-text-input\n                id=\"verdocs-recipient-phone\"\n                value={this.phone}\n                autocomplete=\"off\"\n                // helpText=\"The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.\"\n                placeholder=\"Phone Number...\"\n                onInput={(e: any) => {\n                  this.phone = e.target.value;\n                  this.dirty = true;\n                }}\n              />\n              {/*<div class=\"instructions\">Default name and contact information. This may be changed later when creating and envelope with this template.</div>*/}\n            </div>\n          </div>\n\n          {/*<div class=\"row\">*/}\n          {/*  <div class=\"input-label\">May Delegate:</div>*/}\n          {/*  <div class=\"checkbox-wrapper\">*/}\n          {/*    <verdocs-checkbox*/}\n          {/*      checked={this.delegator}*/}\n          {/*      onInput={(e: any) => {*/}\n          {/*        this.delegator = e.target.checked;*/}\n          {/*        this.dirty = true;*/}\n          {/*      }}*/}\n          {/*    />*/}\n          {/*  </div>*/}\n\n          {/*  <verdocs-help-icon text=\"If enabled, this recipient may delegate their actions to another individual.\" />*/}\n          {/*</div>*/}\n\n          <div class=\"buttons\">\n            <button class=\"delete-button\" disabled={this.dirty} onClick={e => this.handleDelete(e)} innerHTML={TrashIcon} />\n\n            <div style={{flex: '1'}} />\n\n            {/*<verdocs-button size=\"small\" variant=\"outline\" label=\"Cancel\" disabled={!this.dirty} onClick={e => this.handleCancel(e)} />*/}\n            <verdocs-button size=\"small\" label=\"Save\" disabled={!this.dirty || !isValid} onClick={e => this.handleSave(e)} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CNJfehtH.js → p-Crehnwtj.js}

@@ -2,14 +2,14 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { g as getDefaultExportFromCjs } from './p-BFTU3MAI.js';
 import { VerdocsEndpoint, getTemplate, updateTemplateRole, createTemplateRole, formatFullName } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-C1sRVZWv.js';
-import { S as Store } from './p-C_IIZj49.js';
+import { S as Store } from './p-DmsV595e.js';
 import { d as defineCustomElement$8 } from './p-DxZzj3bW.js';
 import { d as defineCustomElement$7 } from './p-CUMKIsSw.js';
 import { d as defineCustomElement$6 } from './p-B86IoqG1.js';
 import { d as defineCustomElement$5 } from './p-BV_wbVq4.js';
 import { d as defineCustomElement$4 } from './p-Cn6fa00B.js';
 import { d as defineCustomElement$3 } from './p-DmSZqyDY.js';
-import { d as defineCustomElement$2 } from './p-IcjPGPO7.js';
+import { d as defineCustomElement$2 } from './p-CPRS8f3I.js';
 import { d as defineCustomElement$1 } from './p-CgbZe6eM.js';
 
 var Sortable_min$1 = {exports: {}};
@@ -401,6 +401,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateRoles as V, defineCustomElement as d };
-//# sourceMappingURL=p-CNJfehtH.js.map
+//# sourceMappingURL=p-Crehnwtj.js.map
 
-//# sourceMappingURL=p-CNJfehtH.js.map
+//# sourceMappingURL=p-Crehnwtj.js.map