@verdocs/web-sdk 1.9.6 → 1.9.9

package/dist/cjs/verdocs-build.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-0dcde19d.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-db38e942.js');
 
 const verdocsBuildCss = "verdocs-build{display:-ms-flexbox;display:flex;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
 

package/dist/cjs/verdocs-button-panel_3.cjs.entry.js

@@ -88,7 +88,7 @@ const VerdocsSelectInput = class {
 };
 VerdocsSelectInput.style = verdocsSelectInputCss;
 
-const verdocsTextInputCss = "verdocs-text-input{font-family:\"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:28px;padding:4px 12px;outline:none}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}";
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"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:28px;padding:4px 12px;outline:none}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 [data-lastpass-icon-root]{display:none !important}";
 
 const VerdocsTextInput = class {
   constructor(hostRef) {

package/dist/cjs/verdocs-button-panel_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-button-panel.verdocs-select-input.verdocs-text-input.entry.cjs.js","mappings":"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","names":["createPopper","h","Host"],"sources":["./src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","./src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","./src/components/controls/verdocs-select-input/verdocs-select-input.scss?tag=verdocs-select-input","./src/components/controls/verdocs-select-input/verdocs-select-input.tsx","./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-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $light-border-color;\n    }\n\n    &:hover {\n      svg {\n        fill: $verdocs-grey-4;\n      }\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 280px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    color: $verdocs-grey-0;\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 8px 0;\n  }\n\n  form {\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  label {\n    display: block;\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0 0 3px 0;\n    color: $verdocs-grey-1;\n  }\n\n  input {\n    flex: 1;\n    height: 34px;\n    display: flex;\n    font-size: 14px;\n    margin: 0 0 10px 0;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a clickable icon. When clicked, a customizable drop-down panel will be displayed.\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  showing = false;\n  toggle(e: any) {\n    e.stopPropagation();\n\n    if (this.showing) {\n      this.panelEl?.removeAttribute('data-show');\n      this.hiderEl?.remove();\n      this.showing = false;\n    } else {\n      this.panelEl?.setAttribute('data-show', '');\n      this.popperInstance?.update().catch(() => {});\n      this.showing = true;\n\n      this.hiderEl = document.createElement('div');\n      this.hiderEl.style.zIndex = '100';\n      this.hiderEl.style.position = 'absolute';\n      this.hiderEl.style.top = '0px';\n      this.hiderEl.style.left = '0px';\n      this.hiderEl.style.right = '0px';\n      this.hiderEl.style.bottom = '0px';\n      this.hiderEl.onclick = (e: any) => this.toggle(e);\n      document.body.appendChild(this.hiderEl);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-select-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: 28px;\n    padding: 4px 12px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      border: 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","import {Component, Prop, State, Host, h, Event, EventEmitter} from '@stencil/core';\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 emmit.\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  /**\n   * Event fired when the selection has changed\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(e: any) {\n    this._value = e.target.value;\n    this.fieldChange?.emit(e.target.value);\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled} onInput={e => this.handleInput(e)}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n","@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: 28px;\n    padding: 4px 12px;\n    outline: none;\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","import {Component, Prop, State, Host, h} from '@stencil/core';\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 emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() 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   * 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  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-button-panel.verdocs-select-input.verdocs-text-input.entry.cjs.js","mappings":"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","names":["createPopper","h","Host"],"sources":["./src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","./src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","./src/components/controls/verdocs-select-input/verdocs-select-input.scss?tag=verdocs-select-input","./src/components/controls/verdocs-select-input/verdocs-select-input.tsx","./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-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $light-border-color;\n    }\n\n    &:hover {\n      svg {\n        fill: $verdocs-grey-4;\n      }\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 280px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    color: $verdocs-grey-0;\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 8px 0;\n  }\n\n  form {\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  label {\n    display: block;\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0 0 3px 0;\n    color: $verdocs-grey-1;\n  }\n\n  input {\n    flex: 1;\n    height: 34px;\n    display: flex;\n    font-size: 14px;\n    margin: 0 0 10px 0;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a clickable icon. When clicked, a customizable drop-down panel will be displayed.\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  showing = false;\n  toggle(e: any) {\n    e.stopPropagation();\n\n    if (this.showing) {\n      this.panelEl?.removeAttribute('data-show');\n      this.hiderEl?.remove();\n      this.showing = false;\n    } else {\n      this.panelEl?.setAttribute('data-show', '');\n      this.popperInstance?.update().catch(() => {});\n      this.showing = true;\n\n      this.hiderEl = document.createElement('div');\n      this.hiderEl.style.zIndex = '100';\n      this.hiderEl.style.position = 'absolute';\n      this.hiderEl.style.top = '0px';\n      this.hiderEl.style.left = '0px';\n      this.hiderEl.style.right = '0px';\n      this.hiderEl.style.bottom = '0px';\n      this.hiderEl.onclick = (e: any) => this.toggle(e);\n      document.body.appendChild(this.hiderEl);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-select-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: 28px;\n    padding: 4px 12px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      border: 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","import {Component, Prop, State, Host, h, Event, EventEmitter} from '@stencil/core';\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 emmit.\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  /**\n   * Event fired when the selection has changed\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(e: any) {\n    this._value = e.target.value;\n    this.fieldChange?.emit(e.target.value);\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled} onInput={e => this.handleInput(e)}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n","@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: 28px;\n    padding: 4px 12px;\n    outline: none;\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  // @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","import {Component, Prop, State, Host, h} from '@stencil/core';\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 emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() 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   * 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  @State() _value: string = '';\n\n  componentWillLoad() {\n    // this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  // handleInput(e: any) {\n  //   this._value = e.target.value;\n  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-checkbox.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 
-const verdocsCheckboxCss = "verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-checkbox.disabled{opacity:0.5}verdocs-checkbox.hide{display:none}verdocs-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-checkbox input[type=checkbox]{width:18px;height:18px}";
+const verdocsCheckboxCss = "verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-checkbox.disabled{opacity:0.5}verdocs-checkbox.hide{display:none}verdocs-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#3f9d67}";
 
 const VerdocsCheckbox = class {
   constructor(hostRef) {

package/dist/cjs/verdocs-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,6hBAA6hB;;MCY3iB,eAAe;;;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;GACzC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpCD,mBACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,CACG,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","./src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-checkbox {\n  font-family: $verdocs-primary-font;\n  width: 20px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  input[type='checkbox'] {\n    width: 18px;\n    height: 18px;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio\n * button for UI displays e.g. dialogs and .\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-checkbox-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,kjBAAkjB;;MCYhkB,eAAe;;;;mBAIC,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;GACzC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,IACpCD,mBACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,oBAAoB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACjD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC,CACG,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","./src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-checkbox {\n  font-family: $verdocs-primary-font;\n  width: 20px;\n  height: 20px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  input[type='checkbox'] {\n    width: 18px;\n    height: 18px;\n    accent-color: $verdocs-green-accent;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check box\n * for UI displays e.g. dialog boxes.\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-checkbox-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-contact-picker.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-0dcde19d.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-db38e942.js');
 
-const verdocsContactPickerCss = "verdocs-contact-picker{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:100;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}";
+const verdocsContactPickerCss = "verdocs-contact-picker{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;background-color:#ffffff}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:100;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
 
 const messageIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
 const delegateIcon = '<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"></path></svg>';
@@ -83,7 +83,7 @@ const VerdocsContactPicker = class {
       onInput: e => this.handleNameChange(e) }), this.showSuggestions && (index.h("div", { class: "dropdown" }, this.contactSuggestions.map(suggestion => {
       var _a;
       return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : index.h("div", { class: "avatar", innerHTML: placeholderIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, suggestion.name), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
-    })))), index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-email" }, "Email:"), index.h("input", { id: "verdocs-contact-picker-email", name: "verdocs-contact-picker-email", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-phone" }, "Phone:"), index.h("input", { id: "verdocs-contact-picker-phone", name: "verdocs-contact-picker-phone", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { class: "buttons" }, index.h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+    })))), index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-email" }, "Email:"), index.h("input", { id: "verdocs-contact-picker-email", name: "verdocs-contact-picker-email", type: "text", "data-lpignore": "true", autoComplete: "off", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-phone" }, "Phone:"), index.h("input", { id: "verdocs-contact-picker-phone", name: "verdocs-contact-picker-phone", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (index.h("div", { class: "row" }, index.h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { class: "buttons" }, index.h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
         this.showMessage = e.detail.active;
         this.showSuggestions = false;
       } }), index.h("verdocs-toggle-button", { icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {

package/dist/cjs/verdocs-contact-picker.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-contact-picker.entry.cjs.js","mappings":"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","names":["VerdocsEndpoint","h"],"sources":["./src/components/elements/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","./src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-3;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .row {\n      width: 300px;\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 100;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          fill: #666666;\n        }\n\n        .avatar {\n          width: 48px;\n          height: 48px;\n          flex: 0 0 48px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\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 role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.contactSelected?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-contact-picker.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,uBAAuB,GAAG,m3EAAm3E;;ACIn5E,MAAM,WAAW,GACf,wRAAwR,CAAC;AAE3R,MAAM,YAAY,GAChB,whBAAwhB,CAAC;AAE3hB,MAAM,eAAe,GACnB,mfAAmf,CAAC;MAuEze,oBAAoB;;;;;;oBAIKA,+BAAe,CAAC,UAAU,EAAE;wBAK3B,IAAI;8BAMuB,EAAE;;;;;2BAsB9B,KAAK;uBACT,KAAK;qBACP,KAAK;;EAEnC,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,IAAI,EAAE,CAAC;MAC9C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;MAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;MAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,IAAI,KAAK,CAAC;MACtD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,CAAC;MAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,KAAK,EAAE,CAAC;KACxC;GACF;EAED,gBAAgB,CAAC,CAAM;;IACrB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,MAAA,IAAI,CAAC,cAAc,0CAAE,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;GAC/C;EAED,iBAAiB,CAAC,CAAM;IACtB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;GAC7B;EAED,iBAAiB,CAAC,CAAM;IACtB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;GAC7B;EAED,mBAAmB,CAAC,CAAM;IACxB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;GAC/B;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC7B,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,EAAE,CAAC;GACrB;EAED,YAAY,CAAC,CAAC;;IACZ,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC7B,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;MACzB,SAAS,EAAE,IAAI,CAAC,IAAI;MACpB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC,CAAC;GACJ;EAED,sBAAsB,CAAC,CAAM,EAAE,UAAyC;IACtE,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAED,MAAM;IACJ,QACEC,kBAAM,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAE,YAAY,EAAC,KAAK,IAC5FA,iBAAK,KAAK,EAAC,KAAK,IACdA,mBAAO,OAAO,EAAC,6BAA6B,YAAc,EAC1DA,mBACE,EAAE,EAAC,6BAA6B,EAChC,IAAI,EAAC,6BAA6B,EAClC,IAAI,EAAC,MAAM,mBACG,MAAM,EACpB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,WAAW,EAAC,mBAAmB,EAC/B,OAAO,EAAE,gBAAM,QAAC,IAAI,CAAC,eAAe,GAAG,CAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,MAAM,IAAG,CAAC,EAAC,EAAA;;MAE3E,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GACtC,EAED,IAAI,CAAC,eAAe,KACnBA,iBAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,UAAU;;MAAI,QACzCA,iBAAK,GAAG,EAAE,MAAA,UAAU,CAAC,EAAE,mCAAI,UAAU,CAAC,IAAI,EAAE,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,sBAAsB,CAAC,CAAC,EAAE,UAAU,CAAC,IACpH,UAAU,CAAC,MAAM,GAAGA,iBAAK,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,UAAU,CAAC,MAAM,GAAI,GAAGA,iBAAK,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,eAAe,GAAI,EACrIA,iBAAK,KAAK,EAAC,SAAS,IAClBA,iBAAK,KAAK,EAAC,MAAM,IAAE,UAAU,CAAC,IAAI,CAAO,EACxC,UAAU,CAAC,KAAK,IAAIA,iBAAK,KAAK,EAAC,aAAa,IAAE,UAAU,CAAC,KAAK,CAAO,EACrE,UAAU,CAAC,KAAK,IAAIA,iBAAK,KAAK,EAAC,aAAa,IAAE,UAAU,CAAC,KAAK,CAAO,CAClE,CACF,EACP;KAAA,CAAC,CACE,CACP,CACG,EAENA,iBAAK,KAAK,EAAC,KAAK,IACdA,mBAAO,OAAO,EAAC,8BAA8B,aAAe,EAC5DA,mBACE,EAAE,EAAC,8BAA8B,EACjC,IAAI,EAAC,8BAA8B,EACnC,IAAI,EAAC,MAAM,mBACG,MAAM,EACpB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAC,kBAAkB,EAC9B,OAAO,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,EAC7C,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACvC,CACE,EAENA,iBAAK,KAAK,EAAC,KAAK,IACdA,mBAAO,OAAO,EAAC,8BAA8B,aAAe,EAC5DA,mBACE,EAAE,EAAC,8BAA8B,EACjC,IAAI,EAAC,8BAA8B,EACnC,IAAI,EAAC,MAAM,mBACG,MAAM,EACpB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAC,iBAAiB,EAC7B,OAAO,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,EAC7C,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACvC,CACE,EAEL,IAAI,CAAC,WAAW,KACfA,iBAAK,KAAK,EAAC,KAAK,IACdA,mBAAO,OAAO,EAAC,gCAAgC,eAAiB,EAChEA,mBACE,EAAE,EAAC,gCAAgC,EACnC,IAAI,EAAC,gCAAgC,EACrC,IAAI,EAAC,MAAM,mBACG,MAAM,EACpB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,WAAW,EAAC,uBAAuB,EACnC,OAAO,EAAE,OAAO,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,EAC7C,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GACzC,CACE,CACP,EAEDA,iBAAK,KAAK,EAAC,SAAS,IAClBA,mCACE,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,QAAQ,EAAE,CAAC;QACT,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAC9B,GACD,EACFA,mCACE,IAAI,EAAE,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,IAAI,CAAC,SAAS,EACtB,QAAQ,EAAE,CAAC;QACT,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAC9B,GACD,EAEFA,iBAAK,KAAK,EAAC,WAAW,GAAG,EAEzBA,4BAAgB,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,EACpGA,4BAAgB,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAI,CAC1E,CACD,EACP;GACH;;;;;;","names":["VerdocsEndpoint","h"],"sources":["./src/components/elements/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","./src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  font-family: $verdocs-primary-font;\n  background-color: $verdocs-grey-4;\n\n  form {\n    background-color: $verdocs-grey-3;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .row {\n      width: 300px;\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 100;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          fill: #666666;\n        }\n\n        .avatar {\n          width: 48px;\n          height: 48px;\n          flex: 0 0 48px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\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","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\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 role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) contactSelected: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.contactSelected?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-document-page.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1329d89c.js');
+
+const verdocsDocumentPageCss = "verdocs-document-page{width:100%;position:relative}verdocs-document-page .verdocs-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-document-page .verdocs-document-page-layer.img{max-width:100%}";
+
+const VerdocsDocumentPage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageRendered = index.createEvent(this, "pageRendered", 7);
+    this.pageImageUri = '';
+    this.pageNumber = 1;
+    this.virtualWidth = 612;
+    this.virtualHeight = 792;
+    this.layers = [{ name: 'page', type: 'canvas' }];
+    this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
+    this.renderedWidth = this.virtualWidth;
+    this.renderedHeight = this.virtualHeight;
+    this.naturalWidth = this.virtualWidth;
+    this.naturalHeight = this.virtualHeight;
+    this.aspectRatio = this.virtualWidth / this.virtualHeight;
+    this.skipFirstNotification = true;
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const renderedWidth = entry.contentRect.width;
+        this.renderedWidth = renderedWidth;
+        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
+      }
+      this.notifyRenderedSize();
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
+  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
+  // componentDidRender() {
+  //   this.notifyRenderedSize();
+  // }
+  notifyRenderedSize() {
+    // We skip one notification because by default we will always get at least two, one when rendering the initial size
+    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
+    if (this.skipFirstNotification) {
+      this.skipFirstNotification = false;
+      return;
+    }
+    this.pageRendered.emit({
+      container: this.container,
+      containerId: this.containerId,
+      pageNumber: this.pageNumber,
+      virtualWidth: this.virtualWidth,
+      virtualHeight: this.virtualHeight,
+      renderedWidth: this.renderedWidth,
+      renderedHeight: this.renderedHeight,
+      naturalWidth: this.naturalWidth,
+      naturalHeight: this.naturalHeight,
+      xScale: this.renderedWidth / this.naturalWidth,
+      yScale: this.renderedHeight / this.naturalHeight,
+    });
+  }
+  render() {
+    const height = `${this.renderedHeight}px`;
+    return (index.h(index.Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : (index.h("img", { class: "verdocs-document-page-layer img", id: `${this.containerId}-${layer.name}`,
+      // style={{height}}
+      src: this.pageImageUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
+        this.naturalWidth = e.target.naturalWidth;
+        this.naturalHeight = e.target.naturalHeight;
+        this.aspectRatio = this.naturalWidth / this.naturalHeight;
+        console.log('[DOCPAGE] Loaded dimensions', { width: this.naturalWidth, height: this.naturalHeight, aspectRatio: this.aspectRatio });
+      } })))));
+  }
+  get container() { return index.getElement(this); }
+};
+VerdocsDocumentPage.style = verdocsDocumentPageCss;
+
+exports.verdocs_document_page = VerdocsDocumentPage;
+
+//# sourceMappingURL=verdocs-document-page.cjs.entry.js.map

package/dist/cjs/verdocs-document-page.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"verdocs-document-page.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/elements/verdocs-document-page/verdocs-document-page.scss?tag=verdocs-document-page","./src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      max-width: 100%;\n    }\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-document-page',\n  styleUrl: 'verdocs-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The URL of the image to render as the page background.\n   */\n  @Prop() pageImageUri: string = '';\n\n  /**\n   * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n   * are used everywhere in document handling. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const renderedWidth = entry.contentRect.width;\n        this.renderedWidth = renderedWidth;\n        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n      }\n\n      this.notifyRenderedSize();\n    });\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n  // componentDidRender() {\n  //   this.notifyRenderedSize();\n  // }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    this.pageRendered.emit({\n      container: this.container,\n      containerId: this.containerId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      xScale: this.renderedWidth / this.naturalWidth,\n      yScale: this.renderedHeight / this.naturalHeight,\n    });\n  }\n\n  render() {\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : (\n            <img\n              class=\"verdocs-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              // style={{height}}\n              src={this.pageImageUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              onLoad={(e: any) => {\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                console.log('[DOCPAGE] Loaded dimensions', {width: this.naturalWidth, height: this.naturalHeight, aspectRatio: this.aspectRatio});\n              }}\n            />\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-dropdown_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-dropdown.verdocs-field-checkbox.verdocs-field-radio-button.entry.cjs.js","mappings":"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","names":["createPopper","h","Host","getFieldSettings"],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  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: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\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    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-dropdown.verdocs-field-checkbox.verdocs-field-radio-button.entry.cjs.js","mappings":"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","names":["createPopper","h","Host","getFieldSettings"],"sources":["./src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","./src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","./src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","./src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  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: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\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    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/verdocs-field-attachment.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"verdocs-field-attachment.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,8lBAA8lB;;MCcnnB,sBAAsB;;;;iBAIuB,IAAI;;oBAU/B,KAAK;;EASxB,MAAM,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,IAClDD,kBAAM,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CACxE,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  span {\n    width: 20px;\n    cursor: pointer;\n  }\n\n  &.required {\n    span {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Documents/Types';\nimport Paperclip from './paperclip.svg';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={Paperclip} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-field-attachment.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,8lBAA8lB;;MCcnnB,sBAAsB;;;;iBAIuB,IAAI;;oBAU/B,KAAK;;EASxB,MAAM,UAAU;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAID,UAAU;IACR,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IACpE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA,EAAA,CAAC,CAAC;IAC/D,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,MAAM;;IACJ,IAAI,QAAQ,GAAmD,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC;IAC5E,IAAI,UAAU,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,EAAE;MACpD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;KAChC;SAAM,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAA,EAAE;MACzD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;KAC/B;IAED,MAAM,QAAQ,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,mCAAI,QAAQ,CAAC,QAAQ,mCAAI,KAAK,CAAC;IAC7D,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,EAAC,IAClDD,kBAAM,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAI,CACxE,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.scss?tag=verdocs-field-attachment","./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-attachment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n\n    span {\n      cursor: inherit;\n    }\n  }\n\n  span {\n    width: 20px;\n    cursor: pointer;\n  }\n\n  &.required {\n    span {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {Component, h, Host, Prop, Event, EventEmitter, Method} from '@stencil/core';\nimport {ITemplateField, ITemplateFieldSetting} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IDocumentFieldSettings, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport Paperclip from './paperclip.svg';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\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() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  private dialog?: any;\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-upload-dialog');\n    this.dialog.open = true;\n    this.dialog.addEventListener('cancel', () => this.dialog?.remove());\n    document.addEventListener('done', () => this.dialog?.remove());\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    let settings: IDocumentFieldSettings | ITemplateFieldSetting = {x: 0, y: 0};\n    if ('settings' in this.field && this.field?.settings) {\n      settings = this.field.settings;\n    } else if ('setting' in this.field && this.field?.setting) {\n      settings = this.field.setting;\n    }\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <span innerHTML={Paperclip} onClick={() => !disabled && this.handleShow()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}