@verdocs/web-sdk 6.2.0-beta.11 → 6.2.0-beta.13

package/dist/components/{p-BdN73vyV.js.map → p-CO6oIgzX.js.map}

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

package/dist/components/{p-C2aep_b9.js → p-CQCFJea3.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-BuCJI6fl.js';
-import { d as defineCustomElement$1 } from './p-qPO42SgN.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Clw7inRP.js';
+import { d as defineCustomElement$1 } from './p-B5eQd9Mt.js';
 
 const verdocsOkDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-ok-dialog{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-ok-dialog.closed{display:none}verdocs-ok-dialog .buttons{gap:20px;display:-ms-flexbox;display:flex;margin-top:24px;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-ok-dialog .buttons button{-ms-flex:1;flex:1;border:0;height:38px;display:-ms-flexbox;display:flex;color:#ffffff;font-size:14px;cursor:pointer;border-radius:6px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-ok-dialog .buttons button.cancel{background-color:#654dcb}verdocs-ok-dialog .buttons button.ok{background-color:#55bc81}verdocs-ok-dialog .buttons button.ok.single{max-width:150px}verdocs-ok-dialog .buttons button:disabled{background-color:#6c727f}";
 
@@ -75,6 +75,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsOkDialog as V, defineCustomElement as d };
-//# sourceMappingURL=p-C2aep_b9.js.map
+//# sourceMappingURL=p-CQCFJea3.js.map
 
-//# sourceMappingURL=p-C2aep_b9.js.map
+//# sourceMappingURL=p-CQCFJea3.js.map

package/dist/components/{p-C2aep_b9.js.map → p-CQCFJea3.js.map}

@@ -1 +1 @@
-{"file":"p-C2aep_b9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  &.closed {\n    display: none;\n  }\n\n  .buttons {\n    gap: 20px;\n    display: flex;\n    margin-top: 24px;\n    flex-direction: row;\n    justify-content: center;\n\n    button {\n      flex: 1;\n      border: 0;\n      height: 38px;\n      display: flex;\n      color: #ffffff;\n      font-size: 14px;\n      cursor: pointer;\n      border-radius: 6px;\n      align-items: center;\n      justify-content: center;\n\n      &.cancel {\n        background-color: $verdocs-button-purple;\n      }\n\n      &.ok {\n        background-color: $verdocs-button-green;\n\n        &.single {\n          max-width: 150px;\n        }\n      }\n\n      &:disabled {\n        background-color: $verdocs-button-disabled;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * Override the \"OK\" button's label\n   */\n  @Prop() buttonLabel: string = 'OK';\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() showCancel: boolean = false;\n\n  /**\n   * Event fired when the user clicks the OK button.\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() closed = false;\n\n  handleOk() {\n    this.next.emit();\n  }\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    this.closed = true;\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.exit.emit();\n    }\n  }\n\n  render() {\n    return (\n      <verdocs-dialog onExit={e => this.handleDismiss(e)}>\n        <div slot=\"heading\" class=\"heading\">\n          <div class=\"icon\">\n            <svg width=\"22\" height=\"19\" viewBox=\"0 0 22 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_34208_4881)\">\n                <path\n                  d=\"M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z\"\n                  fill=\"white\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_34208_4881\">\n                  <path d=\"M0.875 0.75H21.125V18.75H0.875V0.75Z\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n\n          <div class=\"title\"> {this.heading}</div>\n        </div>\n\n        <div slot=\"content\" class=\"content\" innerHTML={this.message} />\n\n        <div class=\"footer\" slot=\"footer\">\n          <div class=\"buttons\">\n            {this.showCancel && (\n              <button class=\"cancel\" onClick={() => this.handleCancel()}>\n                Cancel\n              </button>\n            )}\n            <button class={!this.showCancel ? 'ok single' : 'ok'} onClick={() => this.handleOk()}>\n              OK\n            </button>\n          </div>\n        </div>\n      </verdocs-dialog>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CQCFJea3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  box-sizing: border-box;\n  font-family: $primary-font;\n\n  &.closed {\n    display: none;\n  }\n\n  .buttons {\n    gap: 20px;\n    display: flex;\n    margin-top: 24px;\n    flex-direction: row;\n    justify-content: center;\n\n    button {\n      flex: 1;\n      border: 0;\n      height: 38px;\n      display: flex;\n      color: #ffffff;\n      font-size: 14px;\n      cursor: pointer;\n      border-radius: 6px;\n      align-items: center;\n      justify-content: center;\n\n      &.cancel {\n        background-color: $verdocs-button-purple;\n      }\n\n      &.ok {\n        background-color: $verdocs-button-green;\n\n        &.single {\n          max-width: 150px;\n        }\n      }\n\n      &:disabled {\n        background-color: $verdocs-button-disabled;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * Override the \"OK\" button's label\n   */\n  @Prop() buttonLabel: string = 'OK';\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() showCancel: boolean = false;\n\n  /**\n   * Event fired when the user clicks the OK button.\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Event fired when Cancel is pressed. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() closed = false;\n\n  handleOk() {\n    this.next.emit();\n  }\n\n  handleCancel() {\n    this.exit.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    this.closed = true;\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.exit.emit();\n    }\n  }\n\n  render() {\n    return (\n      <verdocs-dialog onExit={e => this.handleDismiss(e)}>\n        <div slot=\"heading\" class=\"heading\">\n          <div class=\"icon\">\n            <svg width=\"22\" height=\"19\" viewBox=\"0 0 22 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_34208_4881)\">\n                <path\n                  d=\"M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z\"\n                  fill=\"white\"\n                />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_34208_4881\">\n                  <path d=\"M0.875 0.75H21.125V18.75H0.875V0.75Z\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n          </div>\n\n          <div class=\"title\"> {this.heading}</div>\n        </div>\n\n        <div slot=\"content\" class=\"content\" innerHTML={this.message} />\n\n        <div class=\"footer\" slot=\"footer\">\n          <div class=\"buttons\">\n            {this.showCancel && (\n              <button class=\"cancel\" onClick={() => this.handleCancel()}>\n                Cancel\n              </button>\n            )}\n            <button class={!this.showCancel ? 'ok single' : 'ok'} onClick={() => this.handleOk()}>\n              OK\n            </button>\n          </div>\n        </div>\n      </verdocs-dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CDAcaz4P.js → p-CQobV491.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BuCJI6fl.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-Clw7inRP.js';
 
 const verdocsProgressBarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-progress-bar{font-family:\"Inter\", \"Barlow\", sans-serif;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-progress-bar .labels{display:-ms-flexbox;display:flex;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-progress-bar .labels .label{display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin-right:8px;color:#33364b}verdocs-progress-bar .bar{display:-ms-flexbox;display:flex;-ms-flex:0 0 10px;flex:0 0 10px;border-radius:5px;background-color:#cccccc}verdocs-progress-bar .bar .slider{display:-ms-flexbox;display:flex;border-radius:5px;background-color:#55bc81}";
 
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsProgressBar as V, defineCustomElement as d };
-//# sourceMappingURL=p-CDAcaz4P.js.map
+//# sourceMappingURL=p-CQobV491.js.map
 
-//# sourceMappingURL=p-CDAcaz4P.js.map
+//# sourceMappingURL=p-CQobV491.js.map

package/dist/components/{p-CDAcaz4P.js.map → p-CQobV491.js.map}

@@ -1 +1 @@
-{"file":"p-CDAcaz4P.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ulCAAulC;;MCcxmC,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;AAmB5B;IAjBC,MAAM,GAAA;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC;QACzE,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;QAE9H,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAChB,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EACnD,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,OAAO,MAAQ,CACzD,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,EAAG,YAAY,CAAA,CAAA,CAAG,EAAC,GAAQ,CAC1D,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-progress-bar {\n  font-family: $primary-font;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  .labels {\n    display: flex;\n    margin: 0 0 8px 0;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .label {\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin-right: 8px;\n      color: $verdocs-grey-1;\n    }\n  }\n\n  .bar {\n    display: flex;\n    flex: 0 0 10px;\n    border-radius: 5px;\n    background-color: $verdocs-bg-1;\n\n    .slider {\n      display: flex;\n      border-radius: 5px;\n      background-color: $verdocs-green;\n    }\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Display a simple progress bar in a style consistent with the design system.\n *\n * ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n */\n@Component({\n  tag: 'verdocs-progress-bar',\n  styleUrl: 'verdocs-progress-bar.scss',\n  shadow: false,\n})\nexport class VerdocsProgressBar {\n  /**\n   * Optional label to display above the bar\n   */\n  @Prop() label: string = '';\n\n  /**\n   * If true, the progress percentage will be displayed above the bar.\n   */\n  @Prop() showPercent: boolean = false;\n\n  /**\n   * The current progress value (0-100)\n   */\n  @Prop() percent: number = 0;\n\n  render() {\n    const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);\n    console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n    return (\n      <Host>\n        <div class=\"labels\">\n          {this.label && <div class=\"label\">{this.label}</div>}\n          {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n        </div>\n\n        <div class=\"bar\">\n          <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CQobV491.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ulCAAulC;;MCcxmC,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;AAmB5B;IAjBC,MAAM,GAAA;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC;QACzE,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,EAAC,YAAY,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC;QAE9H,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAChB,IAAI,CAAC,KAAK,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,EACnD,IAAI,CAAC,WAAW,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,OAAO,MAAQ,CACzD,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,EAAG,YAAY,CAAA,CAAA,CAAG,EAAC,GAAQ,CAC1D,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-progress-bar/verdocs-progress-bar.scss?tag=verdocs-progress-bar","src/components/controls/verdocs-progress-bar/verdocs-progress-bar.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-progress-bar {\n  font-family: $primary-font;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  .labels {\n    display: flex;\n    margin: 0 0 8px 0;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .label {\n      display: flex;\n      font-size: 14px;\n      font-weight: 600;\n      margin-right: 8px;\n      color: $verdocs-grey-1;\n    }\n  }\n\n  .bar {\n    display: flex;\n    flex: 0 0 10px;\n    border-radius: 5px;\n    background-color: $verdocs-bg-1;\n\n    .slider {\n      display: flex;\n      border-radius: 5px;\n      background-color: $verdocs-green;\n    }\n  }\n}\n","import {Component, Prop, h, Host} from '@stencil/core';\n\n/**\n * Display a simple progress bar in a style consistent with the design system.\n *\n * ```ts\n * <verdocs-progress-bar label=\"Uploading...\" showPercent={true} percent={54} />\n * ```\n */\n@Component({\n  tag: 'verdocs-progress-bar',\n  styleUrl: 'verdocs-progress-bar.scss',\n  shadow: false,\n})\nexport class VerdocsProgressBar {\n  /**\n   * Optional label to display above the bar\n   */\n  @Prop() label: string = '';\n\n  /**\n   * If true, the progress percentage will be displayed above the bar.\n   */\n  @Prop() showPercent: boolean = false;\n\n  /**\n   * The current progress value (0-100)\n   */\n  @Prop() percent: number = 0;\n\n  render() {\n    const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);\n    console.log('Rendering progress bar', {widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent});\n\n    return (\n      <Host>\n        <div class=\"labels\">\n          {this.label && <div class=\"label\">{this.label}</div>}\n          {this.showPercent && <div class=\"label\">{this.percent}%</div>}\n        </div>\n\n        <div class=\"bar\">\n          <div class=\"slider\" style={{width: `${widthPercent}%`}}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D2tuZy4-.js → p-CRwSFWzI.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BuCJI6fl.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Clw7inRP.js';
 import { randomString } from '@verdocs/js-sdk';
-import { d as defineCustomElement$1 } from './p-BDofff4X.js';
+import { d as defineCustomElement$1 } from './p-ChYa_oDl.js';
 
 const verdocsDropdownCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-dropdown{height:26px;display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{height:26px;padding:0 4px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;text-wrap:nowrap;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
 
@@ -66,6 +66,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsDropdown as V, defineCustomElement as d };
-//# sourceMappingURL=p-D2tuZy4-.js.map
+//# sourceMappingURL=p-CRwSFWzI.js.map
 
-//# sourceMappingURL=p-D2tuZy4-.js.map
+//# sourceMappingURL=p-CRwSFWzI.js.map

package/dist/components/{p-D2tuZy4-.js.map → p-CRwSFWzI.js.map}

@@ -1 +1 @@
-{"file":"p-D2tuZy4-.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,ohDAAohD;;ACI/iD,MAAM,aAAa,GAAG,CAAA,+KAAA,CAAiL;MA6B1L,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAJ5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,EAAE;QAQ1B,IAAA,CAAA,WAAW,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;AAE3E,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAqC5B;IAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB,EAAA;;QAC5C,CAAC,CAAC,eAAe,EAAE;QACnB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,MAAM,CAAC;AACjC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;IAGzB,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;IAGpC,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,CAAoB,iBAAA,EAAA,YAAY,CAAC,CAAC,CAAC,EAAE;QAElD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,EAAA,YAAA,EAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAAI,CAAA,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,EAAA,EACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAG;AACzB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBACjB,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,GAAG;;iBACjD;AACL,gBAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN;;AAGf,SAAC,CAAC,CACa,CAClB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    height: 26px;\n    padding: 0 4px;\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  &.open {\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\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></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. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\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  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CRwSFWzI.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,ohDAAohD;;ACI/iD,MAAM,aAAa,GAAG,CAAA,+KAAA,CAAiL;MA6B1L,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAJ5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,EAAE;QAQ1B,IAAA,CAAA,WAAW,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;AAE3E,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAqC5B;IAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB,EAAA;;QAC5C,CAAC,CAAC,eAAe,EAAE;QACnB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,MAAM,CAAC;AACjC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;IAGzB,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;IAGpC,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,CAAoB,iBAAA,EAAA,YAAY,CAAC,CAAC,CAAC,EAAE;QAElD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,EAAA,YAAA,EAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAAI,CAAA,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,EAAA,EACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAG;AACzB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBACjB,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,GAAG;;iBACjD;AACL,gBAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN;;AAGf,SAAC,CAAC,CACa,CAClB,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    height: 26px;\n    padding: 0 4px;\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  &.open {\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\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></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. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\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  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-EXpiIDZa.js → p-CXSpP5Gm.js}

@@ -1,19 +1,20 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-BuCJI6fl.js';
-import { getRGBA } from '@verdocs/js-sdk';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-Clw7inRP.js';
+import { i as interact } from './p-CGNX5HqF.js';
+import { VerdocsEndpoint, updateField, getRGBA } from '@verdocs/js-sdk';
 import { S as SettingsIcon } from './p-7LXbcjVz.js';
 import { S as Store } from './p-DmsV595e.js';
-import { d as defineCustomElement$a } from './p-D_VkX_nC.js';
-import { d as defineCustomElement$9 } from './p-ChnAjOXc.js';
-import { d as defineCustomElement$8 } from './p-DPAlF5W0.js';
-import { d as defineCustomElement$7 } from './p-DGYycCbd.js';
-import { d as defineCustomElement$6 } from './p-VxVNy_Vd.js';
-import { d as defineCustomElement$5 } from './p-BDofff4X.js';
-import { d as defineCustomElement$4 } from './p-Bv5CFhqy.js';
-import { d as defineCustomElement$3 } from './p-C7wadjXX.js';
-import { d as defineCustomElement$2 } from './p-BNTIQRGG.js';
-import { d as defineCustomElement$1 } from './p-BlKUYiXH.js';
+import { d as defineCustomElement$a } from './p-BEuU1xX4.js';
+import { d as defineCustomElement$9 } from './p-BTA1be7y.js';
+import { d as defineCustomElement$8 } from './p-8YJmijSd.js';
+import { d as defineCustomElement$7 } from './p-C-4fLUhc.js';
+import { d as defineCustomElement$6 } from './p-DnaGcy-V.js';
+import { d as defineCustomElement$5 } from './p-ChYa_oDl.js';
+import { d as defineCustomElement$4 } from './p-Clx6y9zn.js';
+import { d as defineCustomElement$3 } from './p-D5p6S1bi.js';
+import { d as defineCustomElement$2 } from './p-18h9UMkx.js';
+import { d as defineCustomElement$1 } from './p-B9Ea7YKs.js';
 
-const verdocsFieldSignatureCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature.disabled img{opacity:0.5}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid rgb(204, 0, 0)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
+const verdocsFieldSignatureCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature.disabled img{opacity:0.5}verdocs-field-signature button{cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid rgb(204, 0, 0)}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-signature .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-signature .settings-icon svg{fill:#707ae5}verdocs-field-signature .settings-icon:hover{opacity:1}verdocs-field-signature .edge-top,verdocs-field-signature .edge-right,verdocs-field-signature .edge-left,verdocs-field-signature .edge-bottom{position:absolute;z-index:10}verdocs-field-signature .edge-top{top:-2px;left:0;right:0;height:5px}verdocs-field-signature .edge-right{top:0;bottom:0;right:-2px;width:5px}verdocs-field-signature .edge-left{top:0;left:-2px;bottom:0;width:5px}verdocs-field-signature .edge-bottom{bottom:-2px;left:0;right:0;height:5px}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 
 const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldSignature extends H {
     constructor(registerHost) {
@@ -82,6 +83,76 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
     async focusField() {
         this.handleShow();
     }
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        if (this.editable) {
+            interact(this.el).resizable({
+                edges: {
+                    top: '.edge-top',
+                    left: '.edge-left',
+                    bottom: '.edge-bottom',
+                    right: '.edge-right',
+                },
+                modifiers: [
+                    interact.modifiers.restrictSize({
+                        min: { width: 71, height: 36 },
+                    }),
+                ],
+                listeners: {
+                    start: this.handleResizeStart.bind(this),
+                    move: this.handleResize.bind(this),
+                    end: this.handleResizeEnd.bind(this),
+                },
+            });
+        }
+    }
+    handleResizeStart(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.dataset.originalBottom = e.target.style.bottom;
+    }
+    handleResize(e) {
+        let { width, height } = e.rect;
+        const dX = e.deltaRect.left;
+        const dY = e.deltaRect.bottom;
+        const currentLeft = parseFloat(e.target.style.left);
+        const currentBottom = parseFloat(e.target.style.bottom);
+        width /= this.xscale;
+        height /= this.yscale;
+        Object.assign(e.target.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+            left: `${currentLeft + dX}px`,
+            bottom: `${currentBottom - dY}px`,
+        });
+    }
+    async handleResizeEnd(e) {
+        const { sourceid, fieldname } = this;
+        const width = Math.round(parseFloat(e.target.style.width));
+        let height = Math.round(parseFloat(e.target.style.height));
+        if (height < 20) {
+            height = 15;
+        }
+        const newBottom = parseFloat(e.target.style.bottom);
+        const originalBottom = parseFloat(e.target.dataset.originalBottom);
+        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);
+        const oldField = template.fields.find(f => f.name === fieldname);
+        const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField === null || oldField === void 0 ? void 0 : oldField.y;
+        updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, { width, height, y })
+            .then(async (updatedField) => {
+            var _a;
+            const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);
+            const newTemplate = JSON.parse(JSON.stringify(template));
+            const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);
+            if (fieldIndex > -1) {
+                newTemplate.fields[fieldIndex] = updatedField;
+            }
+            Store.updateTemplate(this.sourceid, newTemplate);
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field: updatedField });
+            Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
+        })
+            .catch(e => console.log('Field update failed', e));
+    }
     hideDialog() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -126,7 +197,7 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), base64 ? h("img", { src: base64, alt: "" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
@@ -139,6 +210,7 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
                 return this.hideSettingsPanel();
             }, helpText: "Signature fields capture a recipient's signature on a document." })))))));
     }
+    get el() { return this; }
     static get style() { return verdocsFieldSignatureCss; }
 }, [256, "verdocs-field-signature", {
         "source": [513],
@@ -225,6 +297,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsFieldSignature as V, defineCustomElement as d };
-//# sourceMappingURL=p-EXpiIDZa.js.map
+//# sourceMappingURL=p-CXSpP5Gm.js.map
 
-//# sourceMappingURL=p-EXpiIDZa.js.map
+//# sourceMappingURL=p-CXSpP5Gm.js.map

package/dist/components/p-CXSpP5Gm.js.map

@@ -0,0 +1 @@
+{"file":"p-CXSpP5Gm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/fields/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/fields/verdocs-field-signature/verdocs-field-signature.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &.disabled img {\n    opacity: 0.5;\n  }\n\n  button {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.4s 1;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -3px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .edge-top,\n  .edge-right,\n  .edge-left,\n  .edge-bottom {\n    position: absolute;\n    z-index: 10;\n  }\n\n  .edge-top {\n    top: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n\n  .edge-right {\n    top: 0;\n    bottom: 0;\n    right: -2px;\n    width: 5px;\n  }\n\n  .edge-left {\n    top: 0;\n    left: -2px;\n    bottom: 0;\n    width: 5px;\n  }\n\n  .edge-bottom {\n    bottom: -2px;\n    left: 0;\n    right: 0;\n    height: 5px;\n  }\n}\n\n@keyframes verdocs-field-pulse {\n  0% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n  50% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.35);\n  }\n}\n","import interact from 'interactjs';\nimport {ITemplateField, getRGBA, IEnvelopeField, VerdocsEndpoint, updateField, ITemplate} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, Fragment, State, Element} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\nimport {ResizeEvent} from '@interactjs/actions/resize/plugin';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field\n * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will\n * show a dialog to adopt a signature.\n *\n * NOTE: When signature fields are completed they will be filled with a signature \"stamp\".\n * This requires operation against a live, valid envelope. If you are testing this component\n * in Storybook, it will not be visible here.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop({reflect: true}) name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused?: boolean = false;\n\n  @Method() async focusField() {\n    this.handleShow();\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    if (this.editable) {\n      interact(this.el).resizable({\n        edges: {\n          top: '.edge-top',\n          left: '.edge-left',\n          bottom: '.edge-bottom',\n          right: '.edge-right',\n        },\n        modifiers: [\n          interact.modifiers.restrictSize({\n            min: {width: 71, height: 36},\n          }),\n        ],\n        listeners: {\n          start: this.handleResizeStart.bind(this),\n          move: this.handleResize.bind(this),\n          end: this.handleResizeEnd.bind(this),\n        },\n      });\n    }\n  }\n\n  handleResizeStart(e: ResizeEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.dataset.originalBottom = e.target.style.bottom;\n  }\n\n  handleResize(e: any) {\n    let {width, height} = e.rect;\n\n    const dX = e.deltaRect.left;\n    const dY = e.deltaRect.bottom;\n    const currentLeft = parseFloat(e.target.style.left);\n    const currentBottom = parseFloat(e.target.style.bottom);\n\n    width /= this.xscale;\n    height /= this.yscale;\n\n    Object.assign(e.target.style, {\n      width: `${width}px`,\n      height: `${height}px`,\n      left: `${currentLeft + dX}px`,\n      bottom: `${currentBottom - dY}px`,\n    });\n  }\n\n  async handleResizeEnd(e: any) {\n    const {sourceid, fieldname} = this;\n\n    const width = Math.round(parseFloat(e.target.style.width));\n    let height = Math.round(parseFloat(e.target.style.height));\n    if (height < 20) {\n      height = 15;\n    }\n\n    const newBottom = parseFloat(e.target.style.bottom);\n    const originalBottom = parseFloat(e.target.dataset.originalBottom);\n    const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n    const oldField = template.fields.find(f => f.name === fieldname);\n    const y = newBottom !== originalBottom ? newBottom / this.yscale : oldField?.y;\n\n    updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, {width, height, y})\n      .then(async updatedField => {\n        const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);\n        const newTemplate = JSON.parse(JSON.stringify(template)) as ITemplate;\n        const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);\n        if (fieldIndex > -1) {\n          newTemplate.fields[fieldIndex] = updatedField;\n        }\n        Store.updateTemplate(this.sourceid, newTemplate);\n\n        this.settingsChanged?.emit({fieldName: fieldname, field: updatedField});\n        Object.assign(e.target.dataset, {x: 0, y: 0, h: 0});\n      })\n      .catch(e => console.log('Field update failed', e));\n  }\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n    this.focused = false;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    // this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('exit', () => this.hideDialog());\n    this.dialog.addEventListener('next', (e: any) => this.handleAdopt(e));\n    document.body.append(this.dialog);\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n    this.showingProperties = false;\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', settings = {}} = field || {};\n    const {base64} = settings;\n    const backgroundColor = getRGBA(index);\n\n    if (done) {\n      return <Host class={{done}}>{value && <img src={base64} alt=\"\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused}} style={{backgroundColor}}>\n        {editable && <div class=\"edge-right\" />}\n        {editable && <div class=\"edge-left\" />}\n        {editable && <div class=\"edge-top\" />}\n        {editable && <div class=\"edge-bottom\" />}\n\n        {label && <label>{label}</label>}\n\n        {base64 ? <img src={base64} alt=\"\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => this.hideSettingsPanel()}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Signature fields capture a recipient's signature on a document.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BWZvzZ9w.js → p-CeFVEfcA.js}

@@ -23,9 +23,7 @@ const defaultWidth = (type) => {
             return 14;
         case 'signature':
         case 'initial':
-            // TODO: Review this. 71 seems to line up better with the final render.
             return 71;
-        // return 82;
     }
     return 150;
 };
@@ -49,9 +47,7 @@ const defaultHeight = (type) => {
             return 14;
         case 'signature':
         case 'initial':
-            // TODO: Review this. 71 seems to line up better with the final render.
             return 36;
-        // return 41;
     }
     return 50;
 };
@@ -285,6 +281,6 @@ const convertToE164 = (input) => {
 };
 
 export { saveAttachment as a, renderedTextWidth as b, convertToE164 as c, getControlStyles as d, updateCssTransform as e, removeCssTransform as f, getFieldId as g, setControlStyles as h, defaultHeight as i, defaultWidth as j, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
-//# sourceMappingURL=p-BWZvzZ9w.js.map
+//# sourceMappingURL=p-CeFVEfcA.js.map
 
-//# sourceMappingURL=p-BWZvzZ9w.js.map
+//# sourceMappingURL=p-CeFVEfcA.js.map

package/dist/components/p-CeFVEfcA.js.map

@@ -0,0 +1 @@
+{"file":"p-CeFVEfcA.js","mappings":"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","names":["format"],"sources":["src/utils/utils.ts"],"sourcesContent":["import {format} from 'date-fns';\nimport {downloadBlob, getEnvelopeFile, getEnvelopesZip, IEnvelope, IEnvelopeField, ITemplateField, rescale, TFieldType, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {FORMAT_DATE, IDocumentPageInfo} from './Types';\n\nexport const defaultWidth = (type: TFieldType) => {\n  // checkbox was a legacy field type\n  switch (type as any) {\n    case 'textarea':\n      return 150;\n    case 'textbox':\n      return 150;\n    case 'timestamp':\n      return 105;\n    case 'date':\n      return 75;\n    case 'dropdown':\n      return 85;\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'radio':\n    case 'checkbox':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 71;\n  }\n\n  return 150;\n};\n\nexport const defaultHeight = (type: TFieldType) => {\n  switch (type as any) {\n    case 'textarea':\n      return 41;\n    case 'textbox':\n      return 15;\n    case 'timestamp':\n      return 15;\n    case 'date':\n      return 15;\n    case 'dropdown':\n      return 20;\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'radio':\n    case 'checkbox':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 36;\n  }\n\n  return 50;\n};\n\nexport const setControlStyles = (el: HTMLElement, field: ITemplateField | IEnvelopeField, xScale: number, yScale: number) => {\n  let {x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type)} = field;\n\n  el.style.width = `${width}px`;\n  el.style.height = `${height}px`;\n  el.style.position = 'absolute';\n  el.style.left = `${rescale(xScale, x)}px`;\n  el.style.bottom = `${rescale(yScale, y)}px`;\n  el.style.transform = `scale(${xScale}, ${yScale})`;\n};\n\nexport const getControlStyles = (field: ITemplateField | IEnvelopeField, xScale: number, yScale: number) => {\n  let {x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type)} = field;\n\n  return {\n    zIndex: '100',\n    width: `${width}px`,\n    height: `${height}px`,\n    position: 'absolute',\n    left: `${rescale(xScale, x)}px`,\n    bottom: `${rescale(yScale, y)}px`,\n    transform: `scale(${xScale}, ${yScale})`,\n  };\n};\n\nexport const getFieldId = (field: ITemplateField | IEnvelopeField) => {\n  return `verdocs-doc-fld-${field.name}`;\n};\n\ninterface IFieldOptions {\n  disabled?: boolean;\n  editable?: boolean;\n  draggable?: boolean;\n  done?: boolean;\n}\n\nexport const updateDocumentFieldValue = (field: ITemplateField | IEnvelopeField) => {\n  const id = getFieldId(field);\n  const existingField = document.getElementById(id) as any;\n  if (existingField) {\n    existingField.field = field;\n    existingField.roleindex = field;\n    existingField.setAttribute('id', id); // We need this to trigger a re-render\n    existingField.setAttribute('disabled', true); // We need this to trigger a re-render\n    existingField.setAttribute('disabled', false); // We need this to trigger a re-render\n  }\n};\n\nexport const renderDocumentField = (\n  source: 'envelope' | 'template',\n  field: ITemplateField | IEnvelopeField,\n  docPage: IDocumentPageInfo,\n  fieldOptions: IFieldOptions,\n  tabIndex: number = 1,\n) => {\n  const {disabled = false, editable = false, draggable = false, done = false} = fieldOptions;\n  const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n  if (!controlsDiv) {\n    console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);\n    return;\n  }\n\n  // console.log('[renderDocumentField] Rendering field', field);\n\n  switch (field.type as any) {\n    case 'attachment':\n    case 'date':\n    case 'dropdown':\n    case 'initial':\n    case 'payment':\n    case 'signature':\n    case 'timestamp':\n    case 'textarea':\n    case 'textbox': {\n      const id = getFieldId(field);\n      const existingField = document.getElementById(id);\n      if (existingField) {\n        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n        return existingField;\n      }\n\n      let {type} = field;\n      if (type === 'textbox') {\n        if (field['setting']?.leading > 0 || field['settings']?.leading > 0) {\n          type = 'textarea';\n        }\n      }\n\n      const el: any = document.createElement(`verdocs-field-${type}`);\n      el.field = field;\n      el.setAttribute('id', id);\n      el.setAttribute('fieldname', field.name);\n      el.setAttribute('source', source);\n      el.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);\n\n      if (disabled) {\n        el.setAttribute('tabindex', -1);\n        el.setAttribute('disabled', true);\n      } else {\n        el.setAttribute('tabIndex', tabIndex);\n      }\n\n      el.setAttribute('editable', editable);\n      el.setAttribute('draggable', draggable);\n      el.setAttribute('done', done);\n\n      setControlStyles(el, field, docPage.xScale, docPage.yScale);\n      controlsDiv.appendChild(el);\n\n      return el;\n    }\n\n    case 'checkbox': {\n      const id = getFieldId(field);\n      const existingField = document.getElementById(id);\n      if (existingField) {\n        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n        return existingField;\n      }\n\n      const cbEl: any = document.createElement(`verdocs-field-checkbox`);\n      cbEl.field = field;\n      cbEl.setAttribute('id', id);\n      cbEl.setAttribute('option', 0);\n      cbEl.setAttribute('source', source);\n      cbEl.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);\n      if (disabled) {\n        cbEl.setAttribute('disabled', true);\n      }\n      if (done) {\n        cbEl.setAttribute('done', true);\n      }\n      if (editable) {\n        cbEl.setAttribute('editable', true);\n      }\n      if (draggable) {\n        cbEl.setAttribute('draggable', true);\n      }\n      setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);\n      controlsDiv.appendChild(cbEl);\n\n      return cbEl;\n    }\n\n    case 'radio': {\n      const id = getFieldId(field);\n      const existingField = document.getElementById(id);\n      if (existingField) {\n        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n        return existingField;\n      }\n\n      const radioEl: any = document.createElement(`verdocs-field-radio`);\n      radioEl.field = field;\n      radioEl.setAttribute('id', id);\n      radioEl.setAttribute('option', 0);\n      radioEl.setAttribute('source', source);\n      radioEl.setAttribute('sourceid', 'template_id' in field ? field.template_id : field.envelope_id);\n      if (disabled) {\n        radioEl.setAttribute('disabled', true);\n      }\n      if (done) {\n        radioEl.setAttribute('done', true);\n      }\n      if (editable) {\n        radioEl.setAttribute('editable', true);\n      }\n      if (draggable) {\n        radioEl.setAttribute('draggable', true);\n      }\n      setControlStyles(radioEl, field, docPage.xScale, docPage.yScale);\n      controlsDiv.appendChild(radioEl);\n\n      return radioEl;\n    }\n\n    default:\n      console.log('[PREVIEW] Skipping unsupported field type', field);\n      return null;\n  }\n};\n\n// export const getFieldSettings = (field: ITemplateField | IEnvelopeField | undefined) => field?.settings || {};\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nexport const updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  const currentTransform = el.style.transform || '';\n\n  const newValue = `${key}(${value})`;\n  if (currentTransform.includes(key)) {\n    el.style.transform = currentTransform.replace(new RegExp(`${key}\\\\(.+?\\\\)`), newValue);\n  } else {\n    el.style.transform = currentTransform + ' ' + newValue;\n  }\n};\n\nexport const removeCssTransform = (el: HTMLElement) => {\n  // const currentTransform = el.style.transform || '';\n  el.style.transform = el.style.transform.split(')')[0] + ')';\n  // TODO: This is not working\n  // el.style.transform = currentTransform.replace(new RegExp(`\\(${key}\\\\(.+?\\\\)\\)`), '');\n};\n\n// TODO: Shift to getDownloadLilnk\nexport const saveAttachment = async (endpoint: VerdocsEndpoint, envelope: IEnvelope, documentId: string) => {\n  // e.g. \"Colorado-Motor-Vehicle-Bill-of-Sale.pdf\"\n  const date = format(new Date(envelope.updated_at), FORMAT_DATE);\n  const fileName = `${envelope.name} - ${date}.pdf`;\n  const data = await getEnvelopeFile(endpoint, documentId);\n  downloadBlob(data, fileName);\n};\n\nexport const saveEnvelopesAsZip = async (endpoint: VerdocsEndpoint, envelopes: IEnvelope[]) => {\n  const formattedDate = format(envelopes.length === 1 ? new Date(envelopes[0].updated_at) : new Date(), FORMAT_DATE);\n  const zipFileName = envelopes.length === 1 ? `${envelopes[0].name} - ${formattedDate}.zip` : `Verdocs-Envelopes-${formattedDate}`;\n  console.log('Downloading envelopes as ZIP', envelopes, zipFileName);\n  const result = await getEnvelopesZip(\n    endpoint,\n    envelopes.map(e => e.id),\n  );\n  downloadBlob(result.data, zipFileName);\n};\n\n/**\n * Throttle a given function by a delay value. Useful for things like resizeObserver.\n */\nexport const throttle = (f: Function, delay: number) => {\n  let timer: any = 0;\n  return function (...args) {\n    clearTimeout(timer);\n    timer = setTimeout(() => f.apply(this, args), delay);\n  };\n};\n\n/**\n * Compute the rendered width of a given text string, using a given font.\n */\nexport const renderedTextWidth = (text: string, font: string = '16px Arial') => {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n  ctx.font = font;\n  return ctx.measureText(text).width;\n};\n\n// \"(212) 555-1212\" => +12125551212\n// \"+46766861004\" => \"+46766861004\"\n// \"212-555-1212\" => +12125551212\n// \"212.555.1212\" => +12125551212\n// \"212 555 1212\" => +12125551212\n// @see https://46elks.com/kb/e164\nexport const convertToE164 = (input: string) => {\n  let temp = (input || '').trim();\n  // If we are already prefixed, assume the user did it deliberately and attempt to use what they entered. We also short-circuit blanks.\n  if (!temp || temp.startsWith('+')) {\n    return temp;\n  }\n\n  // Remove any spaces, parenthesis or other punctuation.\n  temp = temp.replace(/[^0-9]/g, '');\n\n  // If the number begins with a zero, remove the leading zero. Do not combine this with the previous step because it needs to be removed\n  // whether it's the actual first character e.g. `0(5)` or just the first digit e.g. `(05`.\n  temp = temp.replace(/^0/g, '');\n\n  // Prepend the country code and +. We're assuming US in this case given the target demographic. Users in other countries would/should be\n  // already entering a prefix so they'd shortcut out of this routine via the + prefix check.\n  return `+1${temp}`;\n};\n"],"version":3}

package/dist/components/{p-BDofff4X.js → p-ChYa_oDl.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BuCJI6fl.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-Clw7inRP.js';
 
 const verdocsPortalCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 
@@ -105,6 +105,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsPortal as V, defineCustomElement as d };
-//# sourceMappingURL=p-BDofff4X.js.map
+//# sourceMappingURL=p-ChYa_oDl.js.map
 
-//# sourceMappingURL=p-BDofff4X.js.map
+//# sourceMappingURL=p-ChYa_oDl.js.map

package/dist/components/{p-BDofff4X.js.map → p-ChYa_oDl.js.map}

@@ -1 +1 @@
-{"file":"p-BDofff4X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-portal/verdocs-portal.scss?tag=verdocs-portal","src/components/controls/verdocs-portal/verdocs-portal.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-portal {\n}\n","import {Component, EventEmitter, h, Host, Listen, Prop, Event} from '@stencil/core';\n\nconst Z_INDEX = '10001';\n\n/**\n * Display a child component in a \"portal\", popping it out of the main DOM tree\n * to allow it to escape the bounds set by its parent.\n * @credit https://github.com/tomas-teston/stencil-portal for the basic\n * technique. This has been altered in a few ways to make it more friendly\n * to cases where there may be multiple portals on the page and provide more\n * alignment options for the child to be displayed.\n *\n * ```ts\n * <div style=\"padding: 40px\">\n *     <div id=\"sample-tooltip\" style=\"border: 1px solid green; padding: 3px 10px;\">\n *       Tooltip Anchor\n *       <verdocs-portal anchor=\"sample-tooltip\" .align=${align} .voffset=${voffset}>\n *         <div style=\"border: 1px solid red; padding: 3px 10px;\">Tooltip</div>\n *       </verdocs-portal>\n *     </div>\n *   </div>\n * ```\n */\n@Component({\n  tag: 'verdocs-portal',\n  styleUrl: 'verdocs-portal.scss',\n  shadow: false,\n})\nexport class VerdocsPortal {\n  private portal: HTMLElement;\n  private element: HTMLElement;\n  private moved: boolean = false;\n\n  /**\n   * Unique ID of the parent element to anchor to.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * Vertical offset from the parent.\n   */\n  @Prop() voffset: number = 0;\n\n  @Event() clickAway: EventEmitter<void>;\n\n  @Listen('scroll', {target: 'window', capture: true})\n  handleScroll() {\n    this.calculatePosition();\n  }\n\n  @Listen('resize', {target: 'window'})\n  handleResize() {\n    this.calculatePosition();\n  }\n\n  @Listen('click', {target: 'document'})\n  handleClick(e) {\n    const closest = e.target.closest('.verdocs-portal');\n    if (!this.element.contains(e.target) && !closest) {\n      this.clickAway?.emit();\n    }\n\n    // Temporary hack to dismiss portals-in-portals, which right now is pretty much just\n    // multiselect.\n    document.querySelectorAll('.verdocs-multiselect-dropdown').forEach(el => el.remove());\n  }\n\n  private calculateLeft() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;\n    const leftOfPopup = Math.max(anchorRect.left, 0);\n    // Old centering logic, disabled temporarily\n    //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);\n    // Old right-align logic, disabled temporarily\n    //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);\n    const popupWidth = this.element?.offsetWidth || 400;\n    const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;\n\n    return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;\n  }\n\n  private calculateTop() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;\n    const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;\n    const popupHeight = this.element?.offsetHeight || 300;\n    const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;\n\n    return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;\n  }\n\n  private calculatePosition() {\n    this.portal.style.top = `${this.calculateTop()}px`;\n    this.portal.style.left = `${this.calculateLeft()}px`;\n  }\n\n  componentWillLoad() {\n    const id = `${this.anchor}-portal`;\n    document.getElementById(id)?.remove();\n\n    this.portal = document.createElement('div');\n    this.portal.setAttribute('id', id);\n    this.portal.style.zIndex = Z_INDEX;\n    this.portal.style.position = 'absolute';\n    this.portal.className = 'verdocs-portal-wrapper';\n    document.body.append(this.portal);\n  }\n\n  componentDidLoad() {\n    this.portal.appendChild(this.element);\n    this.calculatePosition();\n  }\n\n  disconnectedCallback() {\n    this.moved ? this.portal.remove() : (this.moved = true);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.element = el)} class=\"verdocs-portal\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ChYa_oDl.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0TAA0T;;ACEnV,MAAM,OAAO,GAAG,OAAO;MA0BV,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAO9B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,CAAC;AA2F5B;IAtFC,YAAY,GAAA;QACV,IAAI,CAAC,iBAAiB,EAAE;;IAI1B,YAAY,GAAA;QACV,IAAI,CAAC,iBAAiB,EAAE;;AAI1B,IAAA,WAAW,CAAC,CAAC,EAAA;;QACX,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC;AACnD,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE;YAChD,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE;;;;AAKxB,QAAA,QAAQ,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC;;IAG/E,aAAa,GAAA;;QACnB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;AACrD,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,CAAC;AAEvB,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,qBAAqB,EAAE;AAEnD,QAAA,MAAM,yBAAyB,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU;AAC5G,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC;;;;;AAKhD,QAAA,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,KAAI,GAAG;AACnD,QAAA,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,yBAAyB;AAEzE,QAAA,OAAO,YAAY,GAAG,yBAAyB,GAAG,UAAU,GAAG,EAAE,GAAG,WAAW;;IAGzE,YAAY,GAAA;;QAClB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;AACrD,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,CAAC;AAEvB,QAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,qBAAqB,EAAE;AAEnD,QAAA,MAAM,0BAA0B,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS;AAC7G,QAAA,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS;AACxF,QAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,KAAI,GAAG;AACrD,QAAA,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,0BAA0B;AAE3E,QAAA,OAAO,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,MAAM,GAAG,UAAU;;IAG1E,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,IAAI,CAAC,YAAY,EAAE,IAAI;AAClD,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAC,aAAa,EAAE,IAAI;;IAGtD,iBAAiB,GAAA;;AACf,QAAA,MAAM,EAAE,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,SAAS;AAClC,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;QAErC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;AACvC,QAAA,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,wBAAwB;QAChD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;IAGnC,gBAAgB,GAAA;QACd,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,oBAAoB,GAAA;QAClB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;;IAGzD,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,gBAAgB,EAAA,EAC1D,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-portal/verdocs-portal.scss?tag=verdocs-portal","src/components/controls/verdocs-portal/verdocs-portal.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-portal {\n}\n","import {Component, EventEmitter, h, Host, Listen, Prop, Event} from '@stencil/core';\n\nconst Z_INDEX = '10001';\n\n/**\n * Display a child component in a \"portal\", popping it out of the main DOM tree\n * to allow it to escape the bounds set by its parent.\n * @credit https://github.com/tomas-teston/stencil-portal for the basic\n * technique. This has been altered in a few ways to make it more friendly\n * to cases where there may be multiple portals on the page and provide more\n * alignment options for the child to be displayed.\n *\n * ```ts\n * <div style=\"padding: 40px\">\n *     <div id=\"sample-tooltip\" style=\"border: 1px solid green; padding: 3px 10px;\">\n *       Tooltip Anchor\n *       <verdocs-portal anchor=\"sample-tooltip\" .align=${align} .voffset=${voffset}>\n *         <div style=\"border: 1px solid red; padding: 3px 10px;\">Tooltip</div>\n *       </verdocs-portal>\n *     </div>\n *   </div>\n * ```\n */\n@Component({\n  tag: 'verdocs-portal',\n  styleUrl: 'verdocs-portal.scss',\n  shadow: false,\n})\nexport class VerdocsPortal {\n  private portal: HTMLElement;\n  private element: HTMLElement;\n  private moved: boolean = false;\n\n  /**\n   * Unique ID of the parent element to anchor to.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * Vertical offset from the parent.\n   */\n  @Prop() voffset: number = 0;\n\n  @Event() clickAway: EventEmitter<void>;\n\n  @Listen('scroll', {target: 'window', capture: true})\n  handleScroll() {\n    this.calculatePosition();\n  }\n\n  @Listen('resize', {target: 'window'})\n  handleResize() {\n    this.calculatePosition();\n  }\n\n  @Listen('click', {target: 'document'})\n  handleClick(e) {\n    const closest = e.target.closest('.verdocs-portal');\n    if (!this.element.contains(e.target) && !closest) {\n      this.clickAway?.emit();\n    }\n\n    // Temporary hack to dismiss portals-in-portals, which right now is pretty much just\n    // multiselect.\n    document.querySelectorAll('.verdocs-multiselect-dropdown').forEach(el => el.remove());\n  }\n\n  private calculateLeft() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;\n    const leftOfPopup = Math.max(anchorRect.left, 0);\n    // Old centering logic, disabled temporarily\n    //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);\n    // Old right-align logic, disabled temporarily\n    //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);\n    const popupWidth = this.element?.offsetWidth || 400;\n    const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;\n\n    return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;\n  }\n\n  private calculateTop() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;\n    const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;\n    const popupHeight = this.element?.offsetHeight || 300;\n    const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;\n\n    return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;\n  }\n\n  private calculatePosition() {\n    this.portal.style.top = `${this.calculateTop()}px`;\n    this.portal.style.left = `${this.calculateLeft()}px`;\n  }\n\n  componentWillLoad() {\n    const id = `${this.anchor}-portal`;\n    document.getElementById(id)?.remove();\n\n    this.portal = document.createElement('div');\n    this.portal.setAttribute('id', id);\n    this.portal.style.zIndex = Z_INDEX;\n    this.portal.style.position = 'absolute';\n    this.portal.className = 'verdocs-portal-wrapper';\n    document.body.append(this.portal);\n  }\n\n  componentDidLoad() {\n    this.portal.appendChild(this.element);\n    this.calculatePosition();\n  }\n\n  disconnectedCallback() {\n    this.moved ? this.portal.remove() : (this.moved = true);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.element = el)} class=\"verdocs-portal\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}