@verdocs/web-sdk 5.0.65 → 5.0.67

package/dist/components/{p-D8AC3n41.js.map → p-C_Iua_8I.js.map}

@@ -1 +1 @@
-{"file":"p-D8AC3n41.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  textarea {\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: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\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  &.required {\n    border: 1px solid rgb(204, 0, 0);\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 interact from 'interactjs';\nimport {IEnvelopeField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplateField, updateField, getRGBA} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Element, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a multi-line text input field. Reminder: the \"position\" of the field is specified\n * as the BOTTOM-LEFT corner.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLTextAreaElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, 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  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\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\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  @State() focused?: boolean = false;\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {top: true, bottom: true, left: true, right: true},\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: any) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  handleResize(e: any) {\n    let {x = 0, y = 0, h = 0} = e.target.dataset;\n    let {width, height} = e.rect;\n\n    x = (parseFloat(x) || 0) + e.deltaRect.left;\n    y = (parseFloat(y) || 0) + e.deltaRect.top;\n    h = (parseFloat(h) || 0) + e.deltaRect.height;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      transform: `translate(${x}px, ${y + h}px)`,\n    });\n\n    Object.assign(e.target.dataset, {x, y, h});\n  }\n\n  handleResizeEnd(e: any) {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    if (!field) {\n      return;\n    }\n\n    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);\n\n    const width = Math.round(parseFloat(e.target.style.width) / this.xscale);\n    const height = Math.round(parseFloat(e.target.style.height) / this.yscale);\n    const x = Math.round(field.x + translateX / this.xscale);\n    const y = Math.round(field.y - translateY / this.yscale);\n\n    updateField(this.endpoint, this.sourceid, this.fieldname, {x, y, width, height})\n      .then(field => {\n        this.settingsChanged?.emit({fieldName: this.fieldname, field});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\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, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <textarea\n          name={fieldname}\n          disabled={disabled}\n          required={required}\n          placeholder={placeholder}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        >\n          {value}\n        </textarea>\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: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Text areas may be used to create multi-line text fields.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C_Iua_8I.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/fields/verdocs-field-textarea/verdocs-field-textarea.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  box-sizing: border-box;\n  background-color: transparent;\n  transform-origin: bottom left;\n  font-family: $verdocs-primary-font;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  textarea {\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: 100%;\n    height: 100%;\n    resize: none;\n    border: none;\n    outline: none;\n    padding: 0 3px;\n    font-size: 11px;\n    background: none;\n    font-weight: 500;\n    transform-origin: 0 0;\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.disabled textarea {\n    opacity: 0.5;\n  }\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  &.required {\n    border: 1px solid rgb(204, 0, 0);\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 interact from 'interactjs';\nimport {IEnvelopeField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {ITemplateField, updateField, getRGBA} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, Element, Fragment, State} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a multi-line text input field. Reminder: the \"position\" of the field is specified\n * as the BOTTOM-LEFT corner.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  @Element() el: HTMLElement;\n  private inputEl: HTMLTextAreaElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   * This component self-manages its resize (width) behavior when in edit-template mode, and uses\n   * this endpoint to save changes.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, 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  @Method()\n  async focusField() {\n    this.inputEl.focus();\n  }\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\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  @State() focused?: boolean = false;\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {top: true, bottom: true, left: true, right: true},\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: any) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  handleResize(e: any) {\n    let {x = 0, y = 0, h = 0} = e.target.dataset;\n    let {width, height} = e.rect;\n\n    x = (parseFloat(x) || 0) + e.deltaRect.left;\n    y = (parseFloat(y) || 0) + e.deltaRect.top;\n    h = (parseFloat(h) || 0) + e.deltaRect.height;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      transform: `translate(${x}px, ${y + h}px)`,\n    });\n\n    Object.assign(e.target.dataset, {x, y, h});\n  }\n\n  handleResizeEnd(e: any) {\n    const {source, sourceid, fieldname} = this;\n    const {field} = Store.getField(source, sourceid, fieldname, this.field);\n    if (!field) {\n      return;\n    }\n\n    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);\n\n    const width = Math.round(parseFloat(e.target.style.width) / this.xscale);\n    const height = Math.round(parseFloat(e.target.style.height) / this.yscale);\n    const x = Math.round(field.x + translateX / this.xscale);\n    const y = Math.round(field.y - translateY / this.yscale);\n\n    updateField(this.endpoint, this.sourceid, this.fieldname, {x, y, width, height})\n      .then(field => {\n        this.settingsChanged?.emit({fieldName: this.fieldname, field});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\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, placeholder = '', value = '', label = ''} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <label>{label}</label>}\n\n        <textarea\n          name={fieldname}\n          disabled={disabled}\n          required={required}\n          placeholder={placeholder}\n          ref={el => (this.inputEl = el)}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        >\n          {value}\n        </textarea>\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: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Text areas may be used to create multi-line text fields.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BWBsjyPs.js → p-CdqJfcwh.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
 import { VerdocsEndpoint, getEnvelope, getInPersonLink, formatFullName } from '@verdocs/js-sdk';
 import { V as VerdocsToast } from './p-CyvDgtoV.js';
 import { S as SDKError } from './p-C1sRVZWv.js';
 import { S as Store } from './p-DoY8Nb0Y.js';
-import { d as defineCustomElement$1 } from './p-DMVmShTi.js';
+import { d as defineCustomElement$1 } from './p-DxZzj3bW.js';
 
 const verdocsEnvelopeRecipientLinkCss = "@-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-envelope-recipient-link{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-link .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-link .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-link .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-link .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-link .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-link .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-link .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-link .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;overflow:hidden;margin:0 6px 0 0;border-radius:4px;white-space:nowrap;-ms-flex-align:center;align-items:center;text-overflow:ellipsis;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-link .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-link .buttons verdocs-button button{width:100%}";
 
@@ -143,6 +143,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsEnvelopeRecipientLink as V, defineCustomElement as d };
-//# sourceMappingURL=p-BWBsjyPs.js.map
+//# sourceMappingURL=p-CdqJfcwh.js.map
 
-//# sourceMappingURL=p-BWBsjyPs.js.map
+//# sourceMappingURL=p-CdqJfcwh.js.map

package/dist/components/{p-BWBsjyPs.js.map → p-CdqJfcwh.js.map}

@@ -1 +1 @@
-{"file":"p-BWBsjyPs.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.scss?tag=verdocs-envelope-recipient-link","src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-recipient-link {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  z-index: 100000;\n  position: fixed;\n  align-items: center;\n  justify-content: center;\n  font-family: $primary-font;\n  background-color: #0000007f;\n\n  .summary-content {\n    width: 600px;\n    display: flex;\n    max-width: 90%;\n    font-size: 18px;\n    flex: 0 0 600px;\n    border-radius: 6px;\n    background: #ffffff;\n    flex-direction: column;\n    padding: 30px 20px 20px;\n\n    .summary-title {\n      font-size: 20px;\n      font-weight: 700;\n      margin: 0 0 10px 0;\n      color: $verdocs-dark-blue;\n    }\n  }\n\n  .summary-recipient {\n    display: flex;\n    color: $verdocs-grey-1;\n    margin: 8px 0 24px 0;\n    flex-direction: column;\n\n    .role-name {\n      flex: 1;\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin: 0 0 8px 0;\n      color: $verdocs-grey-0;\n    }\n\n    .role-details {\n    }\n\n    .role-info {\n      gap: 5px;\n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n    }\n\n    .role-full-name {\n      flex: 1;\n      height: 34px;\n      display: flex;\n      font-size: 16px;\n      padding: 0 12px;\n      border-radius: 4px;\n      align-items: center;\n      border: 1px solid #cccccc;\n      background: rgb(249, 250, 251);\n    }\n\n    .recipient-link {\n      width: 120px;\n      padding: 0 16px;\n      font-weight: 500;\n      margin: 0 0 0 8px;\n      text-align: center;\n      font-size: 0.875rem;\n      border-radius: 100%;\n      color: rgb(55, 65, 81);\n      line-height: 1.25rem;\n      background-color: #d8d8d8;\n      border: 2px solid rgb(156, 163, 175);\n    }\n\n    .link-wrapper {\n      gap: 5px;\n      display: flex;\n      margin: 4px 0 0 0;\n      flex-direction: row;\n\n      .link {\n        flex: 1;\n        height: 34px;\n        display: flex;\n        font-size: 16px;\n        padding: 0 12px;\n        overflow: hidden;\n        margin: 0 6px 0 0;\n        border-radius: 4px;\n        white-space: nowrap;\n        align-items: center;\n        text-overflow: ellipsis;\n        border: 1px solid #cccccc;\n        background: rgb(249, 250, 251);\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 15px;\n    margin: 10px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    verdocs-button {\n      flex: 0 0 120px;\n      margin-left: 10px;\n      white-space: nowrap;\n\n      button {\n        width: 100%;\n      }\n    }\n  }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter} from '@stencil/core';\nimport {formatFullName, getEnvelope, getInPersonLink, IEnvelope, IRecipient, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a single recipient from an envelope, with the opportunity to copy an in-person\n * signing link for that recipient to use.\n */\n@Component({\n  tag: 'verdocs-envelope-recipient-link',\n  styleUrl: 'verdocs-envelope-recipient-link.scss',\n})\nexport class VerdocsEnvelopeRecipientLink {\n  private envelopeListenerId = 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 envelope ID to edit.\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * The role to load.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user clicks Done to proceed. It is up to the host application\n   * to redirect the user to the appropriate next workflow step.\n   */\n  @Event({composed: true}) next: EventEmitter<{envelope: IEnvelope}>;\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() isOpen: boolean;\n  @State() gettingLink = true;\n  @State() link = '';\n\n  @State() loading = true;\n  @State() envelope: IEnvelope | null = null;\n  @State() recipient: IRecipient | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.envelopeId) {\n        console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');\n        return;\n      }\n\n      this.listenToEnvelope();\n    } catch (e) {\n      console.log('[RECIPIENT_LINK] Error loading envelope', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToEnvelope();\n  }\n\n  async listenToEnvelope() {\n    console.log('[SIDEBAR] Loading envelope', this.envelopeId);\n    this.unlistenToEnvelope();\n    Store.subscribe(\n      'envelopes',\n      this.envelopeId,\n      () => getEnvelope(this.endpoint, this.envelopeId),\n      false,\n      (envelope: IEnvelope) => {\n        this.envelope = envelope;\n        this.loading = false;\n\n        this.recipient = (this.envelope?.recipients || []).find(r => r.role_name === this.roleName);\n        this.getLink(this.recipient);\n      },\n    );\n  }\n\n  unlistenToEnvelope() {\n    if (this.envelopeListenerId) {\n      Store.store.delListener(this.envelopeListenerId);\n      this.envelopeListenerId = null;\n    }\n  }\n\n  handleDone(e: any) {\n    e.preventDefault();\n    this.next?.emit({envelope: this.envelope});\n  }\n\n  copyLink(link: string) {\n    navigator.clipboard\n      .writeText(link)\n      .then(() => VerdocsToast('Link copied to clipboard!', {style: 'success', duration: 3000}))\n      .catch(e => {\n        console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);\n        VerdocsToast(`Unable to copy to clipboard: ${e.message}`, {style: 'error'});\n      });\n  }\n\n  getLink(recipient: IRecipient) {\n    this.gettingLink = true;\n    getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)\n      .then(response => {\n        this.gettingLink = false;\n        this.link = response.link;\n        // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now\n        // error on that because we aren't the focus/gesture-initiator since we're a new component just being\n        // drawn in the DOM. So we let the user click to trigger that.\n        // this.copyLink(response.link);\n      })\n      .catch(e => {\n        this.gettingLink = false;\n        console.log('[RECIPIENT_LINK] Error getting link', e);\n        VerdocsToast('Unable to get link: ' + e.message, {style: 'error'});\n      });\n  }\n\n  render() {\n    if (this.loading || !this.recipient) {\n      return <Host />;\n    }\n\n    // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =\n    //   this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (\n\n    const fullName = formatFullName(this.recipient);\n    return (\n      <Host>\n        <div class=\"summary-content\">\n          <h1 class=\"summary-title\">In-Person Signing Link</h1>\n          <div class=\"summary-rows\">\n            <div class=\"summary-recipient\">\n              <div class=\"role-name\">{this.recipient.role_name}</div>\n              <div class=\"role-details\">\n                <div class=\"role-info\">\n                  <div class=\"role-full-name\">\n                    {fullName} ({this.recipient.email || this.recipient.phone})\n                  </div>\n                  {!this.link && (\n                    <verdocs-button\n                      size=\"small\"\n                      variant=\"outline\"\n                      label={this.gettingLink ? 'Loading...' : 'Get Link'}\n                      disabled={this.gettingLink}\n                      onClick={() => this.getLink(this.recipient)}\n                    />\n                  )}\n                </div>\n\n                {this.link && (\n                  <div class=\"link-wrapper\">\n                    <div class=\"link\">{this.link}</div>\n                    <verdocs-button size=\"small\" variant=\"outline\" label=\"Copy\" onClick={() => this.copyLink(this.link)} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n\n          <div class=\"buttons\">\n            <verdocs-button size=\"small\" label=\"Done\" onClick={e => this.handleDone(e)} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CdqJfcwh.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.scss?tag=verdocs-envelope-recipient-link","src/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-envelope-recipient-link {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  z-index: 100000;\n  position: fixed;\n  align-items: center;\n  justify-content: center;\n  font-family: $primary-font;\n  background-color: #0000007f;\n\n  .summary-content {\n    width: 600px;\n    display: flex;\n    max-width: 90%;\n    font-size: 18px;\n    flex: 0 0 600px;\n    border-radius: 6px;\n    background: #ffffff;\n    flex-direction: column;\n    padding: 30px 20px 20px;\n\n    .summary-title {\n      font-size: 20px;\n      font-weight: 700;\n      margin: 0 0 10px 0;\n      color: $verdocs-dark-blue;\n    }\n  }\n\n  .summary-recipient {\n    display: flex;\n    color: $verdocs-grey-1;\n    margin: 8px 0 24px 0;\n    flex-direction: column;\n\n    .role-name {\n      flex: 1;\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin: 0 0 8px 0;\n      color: $verdocs-grey-0;\n    }\n\n    .role-details {\n    }\n\n    .role-info {\n      gap: 5px;\n      display: flex;\n      flex-direction: row;\n      align-items: flex-end;\n    }\n\n    .role-full-name {\n      flex: 1;\n      height: 34px;\n      display: flex;\n      font-size: 16px;\n      padding: 0 12px;\n      border-radius: 4px;\n      align-items: center;\n      border: 1px solid #cccccc;\n      background: rgb(249, 250, 251);\n    }\n\n    .recipient-link {\n      width: 120px;\n      padding: 0 16px;\n      font-weight: 500;\n      margin: 0 0 0 8px;\n      text-align: center;\n      font-size: 0.875rem;\n      border-radius: 100%;\n      color: rgb(55, 65, 81);\n      line-height: 1.25rem;\n      background-color: #d8d8d8;\n      border: 2px solid rgb(156, 163, 175);\n    }\n\n    .link-wrapper {\n      gap: 5px;\n      display: flex;\n      margin: 4px 0 0 0;\n      flex-direction: row;\n\n      .link {\n        flex: 1;\n        height: 34px;\n        display: flex;\n        font-size: 16px;\n        padding: 0 12px;\n        overflow: hidden;\n        margin: 0 6px 0 0;\n        border-radius: 4px;\n        white-space: nowrap;\n        align-items: center;\n        text-overflow: ellipsis;\n        border: 1px solid #cccccc;\n        background: rgb(249, 250, 251);\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 15px;\n    margin: 10px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    verdocs-button {\n      flex: 0 0 120px;\n      margin-left: 10px;\n      white-space: nowrap;\n\n      button {\n        width: 100%;\n      }\n    }\n  }\n}\n","import {Component, Prop, Host, h, State, Event, EventEmitter} from '@stencil/core';\nimport {formatFullName, getEnvelope, getInPersonLink, IEnvelope, IRecipient, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Displays a single recipient from an envelope, with the opportunity to copy an in-person\n * signing link for that recipient to use.\n */\n@Component({\n  tag: 'verdocs-envelope-recipient-link',\n  styleUrl: 'verdocs-envelope-recipient-link.scss',\n})\nexport class VerdocsEnvelopeRecipientLink {\n  private envelopeListenerId = 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 envelope ID to edit.\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * The role to load.\n   */\n  @Prop() roleName: string = '';\n\n  /**\n   * Event fired when the user clicks Done to proceed. It is up to the host application\n   * to redirect the user to the appropriate next workflow step.\n   */\n  @Event({composed: true}) next: EventEmitter<{envelope: IEnvelope}>;\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() isOpen: boolean;\n  @State() gettingLink = true;\n  @State() link = '';\n\n  @State() loading = true;\n  @State() envelope: IEnvelope | null = null;\n  @State() recipient: IRecipient | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.envelopeId) {\n        console.log(`[RECIPIENT_LINK] Missing required envelope ID ${this.envelopeId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[RECIPIENT_LINK] Unable to start session, must be authenticated');\n        return;\n      }\n\n      this.listenToEnvelope();\n    } catch (e) {\n      console.log('[RECIPIENT_LINK] Error loading envelope', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToEnvelope();\n  }\n\n  async listenToEnvelope() {\n    console.log('[SIDEBAR] Loading envelope', this.envelopeId);\n    this.unlistenToEnvelope();\n    Store.subscribe(\n      'envelopes',\n      this.envelopeId,\n      () => getEnvelope(this.endpoint, this.envelopeId),\n      false,\n      (envelope: IEnvelope) => {\n        this.envelope = envelope;\n        this.loading = false;\n\n        this.recipient = (this.envelope?.recipients || []).find(r => r.role_name === this.roleName);\n        this.getLink(this.recipient);\n      },\n    );\n  }\n\n  unlistenToEnvelope() {\n    if (this.envelopeListenerId) {\n      Store.store.delListener(this.envelopeListenerId);\n      this.envelopeListenerId = null;\n    }\n  }\n\n  handleDone(e: any) {\n    e.preventDefault();\n    this.next?.emit({envelope: this.envelope});\n  }\n\n  copyLink(link: string) {\n    navigator.clipboard\n      .writeText(link)\n      .then(() => VerdocsToast('Link copied to clipboard!', {style: 'success', duration: 3000}))\n      .catch(e => {\n        console.warn('[RECIPIENT_LINK] Error copying to clipboard', e);\n        VerdocsToast(`Unable to copy to clipboard: ${e.message}`, {style: 'error'});\n      });\n  }\n\n  getLink(recipient: IRecipient) {\n    this.gettingLink = true;\n    getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)\n      .then(response => {\n        this.gettingLink = false;\n        this.link = response.link;\n        // NOTE: Left here for documentation purposes. We don't auto-copy the link because many browsers now\n        // error on that because we aren't the focus/gesture-initiator since we're a new component just being\n        // drawn in the DOM. So we let the user click to trigger that.\n        // this.copyLink(response.link);\n      })\n      .catch(e => {\n        this.gettingLink = false;\n        console.log('[RECIPIENT_LINK] Error getting link', e);\n        VerdocsToast('Unable to get link: ' + e.message, {style: 'error'});\n      });\n  }\n\n  render() {\n    if (this.loading || !this.recipient) {\n      return <Host />;\n    }\n\n    // const recipientsWithActions = getRecipientsWithActions(this.store.state); const showLinkButton = recipientCanAct(recipient, recipientsWithActions); const link =\n    //   this.links[recipient.role_name]; const gettingLink = this.gettingLinks[recipient.role_name]; return (\n\n    const fullName = formatFullName(this.recipient);\n    return (\n      <Host>\n        <div class=\"summary-content\">\n          <h1 class=\"summary-title\">In-Person Signing Link</h1>\n          <div class=\"summary-rows\">\n            <div class=\"summary-recipient\">\n              <div class=\"role-name\">{this.recipient.role_name}</div>\n              <div class=\"role-details\">\n                <div class=\"role-info\">\n                  <div class=\"role-full-name\">\n                    {fullName} ({this.recipient.email || this.recipient.phone})\n                  </div>\n                  {!this.link && (\n                    <verdocs-button\n                      size=\"small\"\n                      variant=\"outline\"\n                      label={this.gettingLink ? 'Loading...' : 'Get Link'}\n                      disabled={this.gettingLink}\n                      onClick={() => this.getLink(this.recipient)}\n                    />\n                  )}\n                </div>\n\n                {this.link && (\n                  <div class=\"link-wrapper\">\n                    <div class=\"link\">{this.link}</div>\n                    <verdocs-button size=\"small\" variant=\"outline\" label=\"Copy\" onClick={() => this.copyLink(this.link)} />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n\n          <div class=\"buttons\">\n            <verdocs-button size=\"small\" label=\"Done\" onClick={e => this.handleDone(e)} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-xz67XcVg.js → p-CgbZe6eM.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-AiOs8RvA.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-cuwa7Els.js';
 import { V as VerdocsToast } from './p-CyvDgtoV.js';
-import { d as defineCustomElement$1 } from './p-Bbomvxyl.js';
+import { d as defineCustomElement$1 } from './p-B86IoqG1.js';
 
 const verdocsTextInputCss = "@-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-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:34px;padding:0 9px;outline:none}verdocs-text-input .input-element:disabled{cursor:not-allowed;background:#aeb4bf;border:1px solid #33364b}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
 
@@ -120,6 +120,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTextInput as V, defineCustomElement as d };
-//# sourceMappingURL=p-xz67XcVg.js.map
+//# sourceMappingURL=p-CgbZe6eM.js.map
 
-//# sourceMappingURL=p-xz67XcVg.js.map
+//# sourceMappingURL=p-CgbZe6eM.js.map

package/dist/components/{p-xz67XcVg.js.map → p-CgbZe6eM.js.map}

@@ -1 +1 @@
-{"file":"p-xz67XcVg.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 34px;\n    padding: 0 9px;\n    outline: none;\n\n    &:disabled {\n      cursor: not-allowed;\n      background: $verdocs-grey-2;\n      border: 1px solid $verdocs-grey-1;\n    }\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  .required {\n    color: red;\n    margin-left: 2px;\n    display: inline-block;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .input-container {\n    position: relative;\n  }\n\n  .clear {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: #720101;\n      cursor: pointer;\n    }\n  }\n\n  .copy {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  .toggle-pw {\n    top: 5px;\n    right: 7px;\n    width: 18px;\n    height: 18px;\n    stroke: #cccccc;\n    //fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  &.clearable,\n  &.copyable {\n    .input-element {\n      padding-right: 32px;\n    }\n  }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  private inputEl: HTMLInputElement;\n\n  @Element()\n  hostEl: HTMLElement;\n\n  /**\n   * The initial value for the input field.\n   */\n  @Prop({mutable: true, reflect: true}) value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * If supplied, a help icon will be displayed to provide the user more information.\n   */\n  @Prop() helpText: string = '';\n\n  /**\n   * If set, a clear button will be displayed.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n   * both clearable and copyable. If both properties are set to true, copyable will\n   * be ignored.\n   */\n  @Prop() copyable = false;\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Should the field be required?\n   */\n  @Prop() required: boolean = false;\n\n  @State() showingPw: boolean = false;\n\n  copyToClipboard() {\n    this.inputEl.select();\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => VerdocsToast('Copied!'))\n      .catch(e => console.log('Error copying to clipboard', e));\n  }\n\n  render() {\n    return (\n      <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n        <label>\n          {this.label && (\n            <div class=\"input-label\">\n              {this.label + ':'}\n              {this.required && <span class=\"required\">*</span>}\n            </div>\n          )}\n\n          <div class=\"input-container\">\n            <input\n              type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n              value={this.value}\n              required={this.required}\n              class=\"input-element\"\n              data-lpignore=\"true\"\n              disabled={this.disabled}\n              placeholder={this.placeholder}\n              autoComplete={this.autocomplete}\n              // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n              ref={el => (this.inputEl = el as HTMLInputElement)}\n              onInput={(e: any) => (this.value = e.target.value)}\n            />\n\n            {this.clearable && this.value && (\n              <span\n                innerHTML={ClearIcon}\n                class=\"clear\"\n                onClick={() => {\n                  // We need to allow the onInput event to fire first in case\n                  // the user was focused on this field before clicking clear.\n                  setTimeout(() => {\n                    this.value = '';\n                    this.inputEl?.setAttribute('value', '');\n                    // We need to allow the value to \"settle\"\n                    setTimeout(() => {\n                      this.inputEl?.dispatchEvent(new window.Event('focusout'));\n                      this.inputEl?.blur();\n                    }, 50);\n                  }, 50);\n                }}\n              />\n            )}\n\n            {this.type === 'password' && (\n              <span\n                innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n                class=\"toggle-pw\"\n                onClick={() => {\n                  this.showingPw = !this.showingPw;\n                }}\n              />\n            )}\n\n            {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n          </div>\n\n          {this.helpText && <verdocs-help-icon text={this.helpText} />}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CgbZe6eM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 34px;\n    padding: 0 9px;\n    outline: none;\n\n    &:disabled {\n      cursor: not-allowed;\n      background: $verdocs-grey-2;\n      border: 1px solid $verdocs-grey-1;\n    }\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  .required {\n    color: red;\n    margin-left: 2px;\n    display: inline-block;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .input-container {\n    position: relative;\n  }\n\n  .clear {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: #720101;\n      cursor: pointer;\n    }\n  }\n\n  .copy {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  .toggle-pw {\n    top: 5px;\n    right: 7px;\n    width: 18px;\n    height: 18px;\n    stroke: #cccccc;\n    //fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  &.clearable,\n  &.copyable {\n    .input-element {\n      padding-right: 32px;\n    }\n  }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  private inputEl: HTMLInputElement;\n\n  @Element()\n  hostEl: HTMLElement;\n\n  /**\n   * The initial value for the input field.\n   */\n  @Prop({mutable: true, reflect: true}) value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * If supplied, a help icon will be displayed to provide the user more information.\n   */\n  @Prop() helpText: string = '';\n\n  /**\n   * If set, a clear button will be displayed.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n   * both clearable and copyable. If both properties are set to true, copyable will\n   * be ignored.\n   */\n  @Prop() copyable = false;\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Should the field be required?\n   */\n  @Prop() required: boolean = false;\n\n  @State() showingPw: boolean = false;\n\n  copyToClipboard() {\n    this.inputEl.select();\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => VerdocsToast('Copied!'))\n      .catch(e => console.log('Error copying to clipboard', e));\n  }\n\n  render() {\n    return (\n      <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n        <label>\n          {this.label && (\n            <div class=\"input-label\">\n              {this.label + ':'}\n              {this.required && <span class=\"required\">*</span>}\n            </div>\n          )}\n\n          <div class=\"input-container\">\n            <input\n              type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n              value={this.value}\n              required={this.required}\n              class=\"input-element\"\n              data-lpignore=\"true\"\n              disabled={this.disabled}\n              placeholder={this.placeholder}\n              autoComplete={this.autocomplete}\n              // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n              ref={el => (this.inputEl = el as HTMLInputElement)}\n              onInput={(e: any) => (this.value = e.target.value)}\n            />\n\n            {this.clearable && this.value && (\n              <span\n                innerHTML={ClearIcon}\n                class=\"clear\"\n                onClick={() => {\n                  // We need to allow the onInput event to fire first in case\n                  // the user was focused on this field before clicking clear.\n                  setTimeout(() => {\n                    this.value = '';\n                    this.inputEl?.setAttribute('value', '');\n                    // We need to allow the value to \"settle\"\n                    setTimeout(() => {\n                      this.inputEl?.dispatchEvent(new window.Event('focusout'));\n                      this.inputEl?.blur();\n                    }, 50);\n                  }, 50);\n                }}\n              />\n            )}\n\n            {this.type === 'password' && (\n              <span\n                innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n                class=\"toggle-pw\"\n                onClick={() => {\n                  this.showingPw = !this.showingPw;\n                }}\n              />\n            )}\n\n            {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n          </div>\n\n          {this.helpText && <verdocs-help-icon text={this.helpText} />}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Bpjri0PS.js → p-ChSdhofj.js}

@@ -1,16 +1,16 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-AiOs8RvA.js';
+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-DoY8Nb0Y.js';
-import { d as defineCustomElement$9 } from './p-DMVmShTi.js';
-import { d as defineCustomElement$8 } from './p-B4xcxu5g.js';
-import { d as defineCustomElement$7 } from './p-Bk16Ytky.js';
-import { d as defineCustomElement$6 } from './p-Bbomvxyl.js';
-import { d as defineCustomElement$5 } from './p-I7r_G5nS.js';
-import { d as defineCustomElement$4 } from './p-BQtWBtuj.js';
-import { d as defineCustomElement$3 } from './p-Cs2yaGJp.js';
-import { d as defineCustomElement$2 } from './p-Bvhap2eA.js';
-import { d as defineCustomElement$1 } from './p-xz67XcVg.js';
+import { d as defineCustomElement$9 } from './p-DxZzj3bW.js';
+import { d as defineCustomElement$8 } from './p-DBr1-dfD.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-DcGAyXll.js';
+import { d as defineCustomElement$3 } from './p-DmSZqyDY.js';
+import { d as defineCustomElement$2 } from './p-tmA3GCaL.js';
+import { d as defineCustomElement$1 } from './p-CgbZe6eM.js';
 
 const verdocsFieldRadioCss = "@-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-radio{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.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-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:0;top:0;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:rgb(160, 160, 207.5);background:rgb(160, 160, 207.5)}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid #cc0000}verdocs-field-radio.hide{display:none}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .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)}}";
 
@@ -196,6 +196,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsFieldRadio as V, defineCustomElement as d };
-//# sourceMappingURL=p-Bpjri0PS.js.map
+//# sourceMappingURL=p-ChSdhofj.js.map
 
-//# sourceMappingURL=p-Bpjri0PS.js.map
+//# sourceMappingURL=p-ChSdhofj.js.map

package/dist/components/{p-Bpjri0PS.js.map → p-ChSdhofj.js.map}

@@ -1 +1 @@
-{"file":"p-Bpjri0PS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\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  div.group {\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: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\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    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\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\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\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 in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: 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  @State() showingProperties?: boolean = false;\n  @State() focused = false;\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  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\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\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\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: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ChSdhofj.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\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  div.group {\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: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        position: absolute;\n        left: 0;\n        top: 0;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\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    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\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\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\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 in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: 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  @State() showingProperties?: boolean = false;\n  @State() focused = false;\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  @Method()\n  async focusField() {\n    // Our input field is fake, so we fake the flash too\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\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false} = field || {};\n    const backgroundColor = getRGBA(index);\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: this.required || required, disabled, done, focused}} style={{backgroundColor}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={disabled} required={required} />\n        <label htmlFor={fieldname} />\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: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CXwqfO70.js → p-Cn6fa00B.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-cuwa7Els.js';
 
 const verdocsMenuPanelCss = "@-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-menu-panel-overlay{top:0;left:0;width:100%;height:100%;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.4980392157)}#verdocs-menu-panel{opacity:0;z-index:10001;position:fixed;overflow-y:scroll;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-animation:showVerdocsMenuPanel 0.35s;-webkit-animation-fill-mode:forwards}@-webkit-keyframes showVerdocsMenuPanel{0%{opacity:0;right:-300px}100%{right:0;opacity:1}}";
 
@@ -85,6 +85,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsMenuPanel as V, defineCustomElement as d };
-//# sourceMappingURL=p-CXwqfO70.js.map
+//# sourceMappingURL=p-Cn6fa00B.js.map
 
-//# sourceMappingURL=p-CXwqfO70.js.map
+//# sourceMappingURL=p-Cn6fa00B.js.map

package/dist/components/{p-CXwqfO70.js.map → p-Cn6fa00B.js.map}

@@ -1 +1 @@
-{"file":"p-CXwqfO70.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-menu-panel/verdocs-menu-panel.scss?tag=verdocs-menu-panel","src/components/controls/verdocs-menu-panel/verdocs-menu-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n#verdocs-menu-panel-overlay {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10000;\n  position: fixed;\n  background-color: #0000007f;\n}\n\n#verdocs-menu-panel {\n  opacity: 0;\n  z-index: 10001;\n  position: fixed;\n  overflow-y: scroll;\n  background-color: #ffffff;\n  font-family: $verdocs-primary-font;\n\n  -webkit-animation: showVerdocsMenuPanel 0.35s;\n  -webkit-animation-fill-mode: forwards;\n}\n\n// TODO: Parameterize the width\n@-webkit-keyframes showVerdocsMenuPanel {\n  0% {\n    opacity: 0;\n    right: -300px;\n  }\n\n  100% {\n    right: 0;\n    opacity: 1;\n  }\n}\n","import {Component, EventEmitter, h, Host, Listen, Prop, Event} from '@stencil/core';\n\n/**\n * Display a menu panel in a left or right sidebar. The panel will animate (slide)\n * as it appears, and an background will be shown over the rest of the page. If\n * the background overlay is present, it can be clicked to dismiss the panel.\n *\n * ```ts\n * <verdocs-menu-panel>\n *   <div style=\"padding: 20px;\">Menu Panel</div>\n * </verdocs-menu-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-menu-panel',\n  styleUrl: 'verdocs-menu-panel.scss',\n  shadow: false,\n})\nexport class VerdocsMenuPanel {\n  private portal: HTMLElement;\n  private element: HTMLElement;\n  private moved: boolean = false;\n  private overlayId = `verdocs-menu-panel-overlay`;\n  private panelId = `verdocs-menu-panel`;\n\n  /**\n   * Which side of the screen to place the panel.\n   */\n  @Prop() side: 'left' | 'right' = 'right';\n\n  /**\n   * Whether to show an overlay over the rest of the page.\n   */\n  @Prop() overlay = true;\n\n  /**\n   * The width of the panel.\n   */\n  @Prop() width = 300;\n\n  @Event() close: EventEmitter<void>;\n\n  @Listen('click', {target: 'document'})\n  handleClick(e: any) {\n    if (!this.element.contains(e.target)) {\n      this.hide();\n      this.close?.emit();\n    }\n  }\n\n  componentWillLoad() {\n    this.hide();\n\n    if (this.overlay) {\n      this.portal = document.createElement('div');\n      this.portal.setAttribute('id', this.overlayId);\n      document.body.append(this.portal);\n    }\n\n    this.portal = document.createElement('div');\n    this.portal.setAttribute('id', this.panelId);\n    this.portal.style.top = `0px`;\n    this.portal.style.bottom = `0px`;\n    this.portal.style.width = `${this.width}px`;\n\n    if (this.side === 'left') {\n      this.portal.style.left = `0px`;\n    } else {\n      this.portal.style.right = `0px`;\n    }\n\n    document.body.append(this.portal);\n  }\n\n  componentDidLoad() {\n    this.portal.appendChild(this.element);\n  }\n\n  disconnectedCallback() {\n    this.moved ? this.portal.remove() : (this.moved = true);\n  }\n\n  hide() {\n    document.getElementById(this.overlayId)?.remove();\n    document.getElementById(this.panelId)?.remove();\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.element = el)}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Cn6fa00B.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-menu-panel/verdocs-menu-panel.scss?tag=verdocs-menu-panel","src/components/controls/verdocs-menu-panel/verdocs-menu-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n#verdocs-menu-panel-overlay {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10000;\n  position: fixed;\n  background-color: #0000007f;\n}\n\n#verdocs-menu-panel {\n  opacity: 0;\n  z-index: 10001;\n  position: fixed;\n  overflow-y: scroll;\n  background-color: #ffffff;\n  font-family: $verdocs-primary-font;\n\n  -webkit-animation: showVerdocsMenuPanel 0.35s;\n  -webkit-animation-fill-mode: forwards;\n}\n\n// TODO: Parameterize the width\n@-webkit-keyframes showVerdocsMenuPanel {\n  0% {\n    opacity: 0;\n    right: -300px;\n  }\n\n  100% {\n    right: 0;\n    opacity: 1;\n  }\n}\n","import {Component, EventEmitter, h, Host, Listen, Prop, Event} from '@stencil/core';\n\n/**\n * Display a menu panel in a left or right sidebar. The panel will animate (slide)\n * as it appears, and an background will be shown over the rest of the page. If\n * the background overlay is present, it can be clicked to dismiss the panel.\n *\n * ```ts\n * <verdocs-menu-panel>\n *   <div style=\"padding: 20px;\">Menu Panel</div>\n * </verdocs-menu-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-menu-panel',\n  styleUrl: 'verdocs-menu-panel.scss',\n  shadow: false,\n})\nexport class VerdocsMenuPanel {\n  private portal: HTMLElement;\n  private element: HTMLElement;\n  private moved: boolean = false;\n  private overlayId = `verdocs-menu-panel-overlay`;\n  private panelId = `verdocs-menu-panel`;\n\n  /**\n   * Which side of the screen to place the panel.\n   */\n  @Prop() side: 'left' | 'right' = 'right';\n\n  /**\n   * Whether to show an overlay over the rest of the page.\n   */\n  @Prop() overlay = true;\n\n  /**\n   * The width of the panel.\n   */\n  @Prop() width = 300;\n\n  @Event() close: EventEmitter<void>;\n\n  @Listen('click', {target: 'document'})\n  handleClick(e: any) {\n    if (!this.element.contains(e.target)) {\n      this.hide();\n      this.close?.emit();\n    }\n  }\n\n  componentWillLoad() {\n    this.hide();\n\n    if (this.overlay) {\n      this.portal = document.createElement('div');\n      this.portal.setAttribute('id', this.overlayId);\n      document.body.append(this.portal);\n    }\n\n    this.portal = document.createElement('div');\n    this.portal.setAttribute('id', this.panelId);\n    this.portal.style.top = `0px`;\n    this.portal.style.bottom = `0px`;\n    this.portal.style.width = `${this.width}px`;\n\n    if (this.side === 'left') {\n      this.portal.style.left = `0px`;\n    } else {\n      this.portal.style.right = `0px`;\n    }\n\n    document.body.append(this.portal);\n  }\n\n  componentDidLoad() {\n    this.portal.appendChild(this.element);\n  }\n\n  disconnectedCallback() {\n    this.moved ? this.portal.remove() : (this.moved = true);\n  }\n\n  hide() {\n    document.getElementById(this.overlayId)?.remove();\n    document.getElementById(this.panelId)?.remove();\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.element = el)}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BT5k5YVn.js → p-D-T2R8F1.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-AiOs8RvA.js';
+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-DoY8Nb0Y.js';
-import { d as defineCustomElement$4 } from './p-DMVmShTi.js';
-import { d as defineCustomElement$3 } from './p-Bbomvxyl.js';
-import { d as defineCustomElement$2 } from './p-Cs2yaGJp.js';
-import { d as defineCustomElement$1 } from './p-xz67XcVg.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';
+import { d as defineCustomElement$1 } from './p-CgbZe6eM.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}";
 
@@ -238,6 +238,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsTemplateRoleProperties as V, defineCustomElement as d };
-//# sourceMappingURL=p-BT5k5YVn.js.map
+//# sourceMappingURL=p-D-T2R8F1.js.map
 
-//# sourceMappingURL=p-BT5k5YVn.js.map
+//# sourceMappingURL=p-D-T2R8F1.js.map