@verdocs/web-sdk 5.0.49 → 5.0.52

package/dist/components/{p-ed777fb7.js.map → p-4b831194.js.map}

@@ -1 +1 @@
-{"file":"p-ed777fb7.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,++CAA++C,CAAC;AAC3gD,8BAAe,kBAAkB;;MCUpB,eAAe;IAJ5B;;;;;;;;QAQU,YAAO,GAAW,EAAE,CAAC;;;;QAKrB,YAAO,GAAW,EAAE,CAAC;;;;QAKrB,gBAAW,GAAW,IAAI,CAAC;;;;;QAM3B,eAAU,GAAY,KAAK,CAAC;QAY3B,WAAM,GAAG,KAAK,CAAC;KAsCzB;IApCC,QAAQ;QACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;;IAGD,aAAa,CAAC,CAAM;QAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;SAClB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,IACtC,4DAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,EAEhD,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9I,uEAAgB,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACvE,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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  font-family: $primary-font;\n  box-sizing: border-box;\n\n  &.closed {\n    display: none;\n  }\n\n  .background-overlay {\n    position: fixed;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    max-width: 60%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    padding: 8px 16px;\n    font-weight: bold;\n    color: $verdocs-grey-4;\n    background: $verdocs-grey-blue;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .message {\n    //white-space: pre;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 30px 0 0 0;\n    padding: 0 20px;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, 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 the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() 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      <Host class={this.closed ? 'closed' : ''}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              <div class=\"message\" innerHTML={this.message} />\n\n              <div class=\"buttons\">\n                {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label={this.buttonLabel} onClick={() => this.handleOk()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-4b831194.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,++CAA++C,CAAC;AAC3gD,8BAAe,kBAAkB;;MCUpB,eAAe;IAJ5B;;;;;;;;QAQU,YAAO,GAAW,EAAE,CAAC;;;;QAKrB,YAAO,GAAW,EAAE,CAAC;;;;QAKrB,gBAAW,GAAW,IAAI,CAAC;;;;;QAM3B,eAAU,GAAY,KAAK,CAAC;QAY3B,WAAM,GAAG,KAAK,CAAC;KAsCzB;IApCC,QAAQ;QACN,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;;IAGD,aAAa,CAAC,CAAM;QAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,oBAAoB,EAAE;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;SAClB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,IACtC,4DAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IACjE,4DAAK,KAAK,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAO,EACzC,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAI,EAEhD,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,UAAU,GAAG,sBAAgB,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAAI,GAAG,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,GAAI,EAC9I,uEAAgB,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAI,CACvE,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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  font-family: $primary-font;\n  box-sizing: border-box;\n\n  &.closed {\n    display: none;\n  }\n\n  .background-overlay {\n    position: fixed;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    max-width: 60%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    padding: 8px 16px;\n    font-weight: bold;\n    color: $verdocs-grey-4;\n    background: $verdocs-grey-blue;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .message {\n    //white-space: pre;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 30px 0 0 0;\n    padding: 0 20px;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host, 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 the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  @State() 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      <Host class={this.closed ? 'closed' : ''}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              <div class=\"message\" innerHTML={this.message} />\n\n              <div class=\"buttons\">\n                {this.showCancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onClick={() => this.handleCancel()} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label={this.buttonLabel} onClick={() => this.handleOk()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-96774726.js → p-4f96a7dc.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-20f1beff.js';
 
 const verdocsCheckboxCss = "@charset \"UTF-8\";@-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-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}verdocs-checkbox.small label>input[type=checkbox]+*::before{width:16px;height:16px;line-height:16px}";
 const VerdocsCheckboxStyle0 = verdocsCheckboxCss;
@@ -68,4 +68,4 @@ function defineCustomElement() {
 
 export { VerdocsCheckbox as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-96774726.js.map
+//# sourceMappingURL=p-4f96a7dc.js.map

package/dist/components/{p-96774726.js.map → p-4f96a7dc.js.map}

@@ -1 +1 @@
-{"file":"p-96774726.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,mxCAAmxC,CAAC;AAC/yC,8BAAe,kBAAkB;;MCuBpB,eAAe;IAL5B;;;;;;QASU,YAAO,GAAY,KAAK,CAAC;;;;QAKzB,SAAI,GAAW,EAAE,CAAC;;;;;QAMlB,UAAK,GAAW,EAAE,CAAC;;;;;;QAOnB,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,UAAK,GAAqB,OAAO,CAAC;;;;QAKlC,SAAI,GAAuB,QAAQ,CAAC;;;;QAKpC,aAAQ,GAAa,KAAK,CAAC;KAYpC;IAVC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAC,IAC3E,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7G,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// Your periodic reminder that it's 2022 and you still can't style HTML checkboxes\nverdocs-checkbox {\n  line-height: 18px;\n  font-family: $verdocs-primary-font;\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    margin-right: 8px;\n    line-height: 20px;\n    border-radius: 2px;\n    border-style: solid;\n    border-width: 0.1rem;\n    display: inline-block;\n    vertical-align: bottom;\n    border-color: $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.dark {\n    label > input[type='checkbox'] + *::before {\n      border-color: $verdocs-grey-4;\n    }\n\n    label > input[type='checkbox']:checked + *::before {\n      background: $verdocs-green;\n      border-color: $verdocs-green;\n    }\n  }\n\n  &.small {\n    label > input[type='checkbox'] + *::before {\n      width: 16px;\n      height: 16px;\n      line-height: 16px;\n    }\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```ts\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n   * repositioned with CSS.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n   * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n   * checkbox was clicked in a checkbox group.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  /**\n   * Size of checkbox to render.\n   */\n  @Prop() size: 'normal' | 'small' = 'normal';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled, [this.theme]: true, [this.size]: true}}>\n        <label>\n          <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n          <span>{this.label}</span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-4f96a7dc.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,mxCAAmxC,CAAC;AAC/yC,8BAAe,kBAAkB;;MCuBpB,eAAe;IAL5B;;;;;;QASU,YAAO,GAAY,KAAK,CAAC;;;;QAKzB,SAAI,GAAW,EAAE,CAAC;;;;;QAMlB,UAAK,GAAW,EAAE,CAAC;;;;;;QAOnB,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,UAAK,GAAqB,OAAO,CAAC;;;;QAKlC,SAAI,GAAuB,QAAQ,CAAC;;;;QAKpC,aAAQ,GAAa,KAAK,CAAC;KAYpC;IAVC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAC,IAC3E,gEACE,8DAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7G,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// Your periodic reminder that it's 2022 and you still can't style HTML checkboxes\nverdocs-checkbox {\n  line-height: 18px;\n  font-family: $verdocs-primary-font;\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    margin-right: 8px;\n    line-height: 20px;\n    border-radius: 2px;\n    border-style: solid;\n    border-width: 0.1rem;\n    display: inline-block;\n    vertical-align: bottom;\n    border-color: $verdocs-grey-2;\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.dark {\n    label > input[type='checkbox'] + *::before {\n      border-color: $verdocs-grey-4;\n    }\n\n    label > input[type='checkbox']:checked + *::before {\n      background: $verdocs-green;\n      border-color: $verdocs-green;\n    }\n  }\n\n  &.small {\n    label > input[type='checkbox'] + *::before {\n      width: 16px;\n      height: 16px;\n      line-height: 16px;\n    }\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```ts\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n   * repositioned with CSS.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n   * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n   * checkbox was clicked in a checkbox group.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  /**\n   * Size of checkbox to render.\n   */\n  @Prop() size: 'normal' | 'small' = 'normal';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled, [this.theme]: true, [this.size]: true}}>\n        <label>\n          <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n          <span>{this.label}</span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-1d98c6e0.js → p-50bc76e3.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-20f1beff.js';
 
 const verdocsTabsCss = "@-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-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";
 const VerdocsTabsStyle0 = verdocsTabsCss;
@@ -45,4 +45,4 @@ function defineCustomElement() {
 
 export { VerdocsTabs as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-1d98c6e0.js.map
+//# sourceMappingURL=p-50bc76e3.js.map

package/dist/components/{p-1d98c6e0.js.map → p-50bc76e3.js.map}

@@ -1 +1 @@
-{"file":"p-1d98c6e0.js","mappings":";;AAAA,MAAM,cAAc,GAAG,w7BAAw7B,CAAC;AACh9B,0BAAe,cAAc;;MCoBhB,WAAW;IAJxB;;;;;;;QAQU,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,gBAAW,GAAW,CAAC,CAAC;KA6BjC;IArBC,eAAe,CAAC,KAAa;;QAC3B,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,CAAC,CAAC;KACtD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,WAAK,KAAK,EAAE,OAAO,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,EAAE,IAAI,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,QAAQ,GAAG,SAAQ,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IACpK,GAAG,CAAC,KAAK,CACN,CACP,CAAC,EAEF,4DAAK,KAAK,EAAC,aAAa,GAAG,EAE3B,+DACE,6DAAO,CACF,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-tabs {\n  gap: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .tab {\n    display: flex;\n    color: #111111;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 5px 10px;\n    align-items: center;\n    text-transform: none;\n    justify-content: center;\n    border-bottom: 4px solid transparent;\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n\n    &.active {\n      color: #000000;\n      font-weight: 500;\n      border-bottom: 4px solid #654dcb;\n    }\n\n    &.disabled {\n      color: #aaaaaa;\n      cursor: default;\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter} from '@stencil/core';\n\nexport interface ITab {\n  id?: string;\n  label: string;\n  disabled?: boolean;\n  // TODO: Tooltips?\n}\n\n/**\n * Display a simple row of selectable tabs. This is a controlled element.\n * The parent must adjust selectedTab as selection events are fired.\n *\n * ```ts\n * <verdocs-tabs tabs={[...tabs]} />\n * ```\n */\n@Component({\n  tag: 'verdocs-tabs',\n  styleUrl: 'verdocs-tabs.scss',\n})\nexport class VerdocsTabs {\n  /**\n   * The tabs to display\n   */\n  @Prop() tabs: ITab[] = [];\n\n  /**\n   * The index of the tab to show selected.\n   */\n  @Prop() selectedTab: number = 0;\n\n  /**\n   * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\n   * to the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.\n   */\n  @Event({composed: true}) selectTab: EventEmitter<{tab: ITab; index: number}>;\n\n  handleSelectTab(index: number) {\n    this.selectTab?.emit({tab: this.tabs[index], index});\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab, index) => (\n          <div class={`tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`} onClick={tab.disabled ? () => {} : () => this.handleSelectTab(index)}>\n            {tab.label}\n          </div>\n        ))}\n\n        <div class=\"flex flex-1\" />\n\n        <slot>\n          <div />\n        </slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-50bc76e3.js","mappings":";;AAAA,MAAM,cAAc,GAAG,w7BAAw7B,CAAC;AACh9B,0BAAe,cAAc;;MCoBhB,WAAW;IAJxB;;;;;;;QAQU,SAAI,GAAW,EAAE,CAAC;;;;QAKlB,gBAAW,GAAW,CAAC,CAAC;KA6BjC;IArBC,eAAe,CAAC,KAAa;;QAC3B,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,CAAC,CAAC;KACtD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,WAAK,KAAK,EAAE,OAAO,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,EAAE,IAAI,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,QAAQ,GAAG,SAAQ,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IACpK,GAAG,CAAC,KAAK,CACN,CACP,CAAC,EAEF,4DAAK,KAAK,EAAC,aAAa,GAAG,EAE3B,+DACE,6DAAO,CACF,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-tabs {\n  gap: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .tab {\n    display: flex;\n    color: #111111;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 5px 10px;\n    align-items: center;\n    text-transform: none;\n    justify-content: center;\n    border-bottom: 4px solid transparent;\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n\n    &.active {\n      color: #000000;\n      font-weight: 500;\n      border-bottom: 4px solid #654dcb;\n    }\n\n    &.disabled {\n      color: #aaaaaa;\n      cursor: default;\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter} from '@stencil/core';\n\nexport interface ITab {\n  id?: string;\n  label: string;\n  disabled?: boolean;\n  // TODO: Tooltips?\n}\n\n/**\n * Display a simple row of selectable tabs. This is a controlled element.\n * The parent must adjust selectedTab as selection events are fired.\n *\n * ```ts\n * <verdocs-tabs tabs={[...tabs]} />\n * ```\n */\n@Component({\n  tag: 'verdocs-tabs',\n  styleUrl: 'verdocs-tabs.scss',\n})\nexport class VerdocsTabs {\n  /**\n   * The tabs to display\n   */\n  @Prop() tabs: ITab[] = [];\n\n  /**\n   * The index of the tab to show selected.\n   */\n  @Prop() selectedTab: number = 0;\n\n  /**\n   * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\n   * to the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.\n   */\n  @Event({composed: true}) selectTab: EventEmitter<{tab: ITab; index: number}>;\n\n  handleSelectTab(index: number) {\n    this.selectTab?.emit({tab: this.tabs[index], index});\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab, index) => (\n          <div class={`tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`} onClick={tab.disabled ? () => {} : () => this.handleSelectTab(index)}>\n            {tab.label}\n          </div>\n        ))}\n\n        <div class=\"flex flex-1\" />\n\n        <slot>\n          <div />\n        </slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-497ceba2.js → p-53900f81.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-20f1beff.js';
 
 const verdocsSelectInputCss = "@-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-select-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#092c4c;width:100%;font-size:14px;height:34px;padding:2px 3px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
 const VerdocsSelectInputStyle0 = verdocsSelectInputCss;
@@ -46,4 +46,4 @@ function defineCustomElement() {
 
 export { VerdocsSelectInput as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-497ceba2.js.map
+//# sourceMappingURL=p-53900f81.js.map

package/dist/components/{p-497ceba2.js.map → p-53900f81.js.map}

@@ -1 +1 @@
-{"file":"p-497ceba2.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,+rCAA+rC,CAAC;AAC9tC,iCAAe,qBAAqB;;MCcvB,kBAAkB;IAJ/B;;;;;;QAQU,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,UAAK,GAAW,EAAE,CAAC;;;;QAUnB,aAAQ,GAAY,KAAK,CAAC;KAkBnC;IAhBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACvB,gEACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,+DAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAClD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC/D,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACH,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-select-input/verdocs-select-input.scss?tag=verdocs-select-input","src/components/controls/verdocs-select-input/verdocs-select-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-select-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    background: $verdocs-grey-4;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: $verdocs-grey-0;\n    width: 100%;\n    font-size: 14px;\n    height: 34px;\n    padding: 2px 3px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      //border: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a combo box. This is just a standard HTML select field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-select-input label=\"Select:\" label=\"Select\" options={[...options]} onInput={() => {}} />\n * ```\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-53900f81.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,+rCAA+rC,CAAC;AAC9tC,iCAAe,qBAAqB;;MCcvB,kBAAkB;IAJ/B;;;;;;QAQU,UAAK,GAAW,EAAE,CAAC;;;;QAKnB,UAAK,GAAW,EAAE,CAAC;;;;QAUnB,aAAQ,GAAY,KAAK,CAAC;KAkBnC;IAhBC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACvB,gEACG,IAAI,CAAC,KAAK,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,GAAG,cAAO,EACzE,+DAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAClD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtB,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC/D,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACH,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-select-input/verdocs-select-input.scss?tag=verdocs-select-input","src/components/controls/verdocs-select-input/verdocs-select-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-select-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    background: $verdocs-grey-4;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: $verdocs-grey-0;\n    width: 100%;\n    font-size: 14px;\n    height: 34px;\n    padding: 2px 3px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      //border: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a combo box. This is just a standard HTML select field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-select-input label=\"Select:\" label=\"Select\" options={[...options]} onInput={() => {}} />\n * ```\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-956fb355.js → p-592a0baf.js}

@@ -1,31 +1,31 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-20f1beff.js';
 import { VerdocsEndpoint, getTemplate, integerSequence } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
-import { d as defineCustomElement$o } from './p-f5ccf125.js';
-import { d as defineCustomElement$n } from './p-96774726.js';
-import { d as defineCustomElement$m } from './p-39480096.js';
-import { d as defineCustomElement$l } from './p-71b30a91.js';
-import { d as defineCustomElement$k } from './p-4fff9f15.js';
-import { d as defineCustomElement$j } from './p-d47ac4f2.js';
-import { d as defineCustomElement$i } from './p-a8f59e9d.js';
-import { d as defineCustomElement$h } from './p-bcbe0f6b.js';
-import { d as defineCustomElement$g } from './p-162ae711.js';
-import { d as defineCustomElement$f } from './p-3077aff3.js';
-import { d as defineCustomElement$e } from './p-9c650a78.js';
-import { d as defineCustomElement$d } from './p-cf95858b.js';
-import { d as defineCustomElement$c } from './p-4a4de8d8.js';
-import { d as defineCustomElement$b } from './p-d5eae4db.js';
-import { d as defineCustomElement$a } from './p-0d7860de.js';
-import { d as defineCustomElement$9 } from './p-7f6c97d5.js';
-import { d as defineCustomElement$8 } from './p-ed777fb7.js';
-import { d as defineCustomElement$7 } from './p-acb41a2e.js';
-import { d as defineCustomElement$6 } from './p-497ceba2.js';
-import { d as defineCustomElement$5 } from './p-2b0d2fbd.js';
-import { d as defineCustomElement$4 } from './p-c83a272f.js';
-import { d as defineCustomElement$3 } from './p-c696e5d7.js';
-import { d as defineCustomElement$2 } from './p-a5c69199.js';
-import { d as defineCustomElement$1 } from './p-8e44cb14.js';
+import { d as defineCustomElement$o } from './p-77b37d23.js';
+import { d as defineCustomElement$n } from './p-4f96a7dc.js';
+import { d as defineCustomElement$m } from './p-82c79267.js';
+import { d as defineCustomElement$l } from './p-25c19f32.js';
+import { d as defineCustomElement$k } from './p-62c5c0fe.js';
+import { d as defineCustomElement$j } from './p-f1ccb5e1.js';
+import { d as defineCustomElement$i } from './p-44712551.js';
+import { d as defineCustomElement$h } from './p-843f0198.js';
+import { d as defineCustomElement$g } from './p-d666322a.js';
+import { d as defineCustomElement$f } from './p-e46946db.js';
+import { d as defineCustomElement$e } from './p-1c3c3f01.js';
+import { d as defineCustomElement$d } from './p-207fff69.js';
+import { d as defineCustomElement$c } from './p-07214348.js';
+import { d as defineCustomElement$b } from './p-bbf082ec.js';
+import { d as defineCustomElement$a } from './p-73ed27aa.js';
+import { d as defineCustomElement$9 } from './p-cd8c3571.js';
+import { d as defineCustomElement$8 } from './p-4b831194.js';
+import { d as defineCustomElement$7 } from './p-062e67e6.js';
+import { d as defineCustomElement$6 } from './p-53900f81.js';
+import { d as defineCustomElement$5 } from './p-c04daa8c.js';
+import { d as defineCustomElement$4 } from './p-bcdf821c.js';
+import { d as defineCustomElement$3 } from './p-e8f6e5b7.js';
+import { d as defineCustomElement$2 } from './p-200b75fc.js';
+import { d as defineCustomElement$1 } from './p-1dccb8a9.js';
 
 const verdocsPreviewCss = "@-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-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 const VerdocsPreviewStyle0 = verdocsPreviewCss;
@@ -257,4 +257,4 @@ function defineCustomElement() {
 
 export { VerdocsPreview as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-956fb355.js.map
+//# sourceMappingURL=p-592a0baf.js.map

package/dist/components/{p-956fb355.js.map → p-592a0baf.js.map}

@@ -1 +1 @@
-{"file":"p-956fb355.js","mappings":"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","names":[],"sources":["src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {getTemplate, integerSequence, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Event, EventEmitter, Host, Component, Prop, h, State, Fragment, Watch} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n *\n * ```ts\n * <verdocs-preview\n *   templateId={templateId}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[PREVIEW] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[PREVIEW] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[PREVIEW] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(_e: any) {\n    // const pageInfo = e.detail as IDocumentPageInfo;\n    // const fields = (this.template?.fields || []).filter(field => field.page === pageInfo.pageNumber);\n    // console.log('[PREVIEW] Page rendered', pageInfo, fields);\n    // fields.forEach(field => renderDocumentField(field, pageInfo, {disabled: true, editable: false, draggable: false}));\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(this.template?.documents || []).map(document => {\n          const pageNumbers = integerSequence(1, document.pages);\n          return (\n            <Fragment>\n              {pageNumbers.map(pageNumber => {\n                const pageSize = document.page_sizes?.[pageNumber] || {width: 612, height: 792};\n\n                return (\n                  <verdocs-template-document-page\n                    templateId={document.template_id}\n                    documentId={document.id}\n                    pageNumber={pageNumber}\n                    disabled={true}\n                    editable={false}\n                    done={false}\n                    virtualWidth={pageSize.width}\n                    virtualHeight={pageSize.height}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-592a0baf.js","mappings":"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","names":[],"sources":["src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  padding: 15px;\n  row-gap: 15px;\n  min-height: 200px;\n  position: relative;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: column;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n}\n","import {getTemplate, integerSequence, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Event, EventEmitter, Host, Component, Prop, h, State, Fragment, Watch} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n *\n * ```ts\n * <verdocs-preview\n *   templateId={templateId}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  private templateListenerId = null;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[PREVIEW] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[PREVIEW] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[PREVIEW] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(_e: any) {\n    // const pageInfo = e.detail as IDocumentPageInfo;\n    // const fields = (this.template?.fields || []).filter(field => field.page === pageInfo.pageNumber);\n    // console.log('[PREVIEW] Page rendered', pageInfo, fields);\n    // fields.forEach(field => renderDocumentField(field, pageInfo, {disabled: true, editable: false, draggable: false}));\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(this.template?.documents || []).map(document => {\n          const pageNumbers = integerSequence(1, document.pages);\n          return (\n            <Fragment>\n              {pageNumbers.map(pageNumber => {\n                const pageSize = document.page_sizes?.[pageNumber] || {width: 612, height: 792};\n\n                return (\n                  <verdocs-template-document-page\n                    templateId={document.template_id}\n                    documentId={document.id}\n                    pageNumber={pageNumber}\n                    disabled={true}\n                    editable={false}\n                    done={false}\n                    virtualWidth={pageSize.width}\n                    virtualHeight={pageSize.height}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-84929e4a.js → p-5d0a3040.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-20f1beff.js';
 import { c as createPopper } from './p-68a5aaff.js';
 
 const verdocsButtonPanelCss = "@-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-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
@@ -98,4 +98,4 @@ function defineCustomElement() {
 
 export { VerdocsButtonPanel as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-84929e4a.js.map
+//# sourceMappingURL=p-5d0a3040.js.map

package/dist/components/{p-84929e4a.js.map → p-5d0a3040.js.map}

@@ -1 +1 @@
-{"file":"p-84929e4a.js","mappings":"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","names":[],"sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.6;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 320px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 16px 0;\n    color: $verdocs-grey-0;\n    border-bottom: 1px solid #cccccc;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Method, Prop} from '@stencil/core';\n\n/**\n * Display an icon button that triggers a drop-down panel that can display\n * arbitrary child content, such as metadata, forms, or other controls.\n *\n * ```ts\n *   <verdocs-button-panel .icon=${icon}>\n *     <h6>Field Settings</h6>\n *     <form>\n *     <p>\n *       <label>Field Name</label>\n *       <input type=\"text\" placeholder=\"Field Name...\" />\n *     </p>\n *     </form>\n *   </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  // Not marked as @State because it's not the thing that controls our rendering\n  showing = false;\n\n  @Method()\n  async showPanel() {\n    this.panelEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n    this.showing = true;\n\n    this.hiderEl = document.createElement('div');\n    this.hiderEl.id = 'verdocs-button-panel-hider';\n    this.hiderEl.style.zIndex = '100';\n    this.hiderEl.style.position = 'absolute';\n    this.hiderEl.style.top = '0px';\n    this.hiderEl.style.left = '0px';\n    this.hiderEl.style.right = '0px';\n    this.hiderEl.style.bottom = '0px';\n    this.hiderEl.onclick = (e: any) => {\n      e.stopPropagation();\n      this.toggle();\n    };\n    document.body.appendChild(this.hiderEl);\n  }\n\n  @Method()\n  async hidePanel() {\n    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {\n      el.removeAttribute('data-show');\n    });\n    document.getElementById('verdocs-button-panel-hider')?.remove();\n    this.showing = false;\n  }\n\n  @Method()\n  async toggle() {\n    if (this.showing) {\n      await this.hidePanel();\n    } else {\n      await this.showPanel();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"icon\"\n          innerHTML={this.icon}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            return this.toggle();\n          }}\n          ref={el => (this.iconEl = el)}\n        />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-5d0a3040.js","mappings":"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","names":[],"sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.6;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 320px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 16px 0;\n    color: $verdocs-grey-0;\n    border-bottom: 1px solid #cccccc;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Method, Prop} from '@stencil/core';\n\n/**\n * Display an icon button that triggers a drop-down panel that can display\n * arbitrary child content, such as metadata, forms, or other controls.\n *\n * ```ts\n *   <verdocs-button-panel .icon=${icon}>\n *     <h6>Field Settings</h6>\n *     <form>\n *     <p>\n *       <label>Field Name</label>\n *       <input type=\"text\" placeholder=\"Field Name...\" />\n *     </p>\n *     </form>\n *   </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  // Not marked as @State because it's not the thing that controls our rendering\n  showing = false;\n\n  @Method()\n  async showPanel() {\n    this.panelEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n    this.showing = true;\n\n    this.hiderEl = document.createElement('div');\n    this.hiderEl.id = 'verdocs-button-panel-hider';\n    this.hiderEl.style.zIndex = '100';\n    this.hiderEl.style.position = 'absolute';\n    this.hiderEl.style.top = '0px';\n    this.hiderEl.style.left = '0px';\n    this.hiderEl.style.right = '0px';\n    this.hiderEl.style.bottom = '0px';\n    this.hiderEl.onclick = (e: any) => {\n      e.stopPropagation();\n      this.toggle();\n    };\n    document.body.appendChild(this.hiderEl);\n  }\n\n  @Method()\n  async hidePanel() {\n    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {\n      el.removeAttribute('data-show');\n    });\n    document.getElementById('verdocs-button-panel-hider')?.remove();\n    this.showing = false;\n  }\n\n  @Method()\n  async toggle() {\n    if (this.showing) {\n      await this.hidePanel();\n    } else {\n      await this.showPanel();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"icon\"\n          innerHTML={this.icon}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            return this.toggle();\n          }}\n          ref={el => (this.iconEl = el)}\n        />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-515f8afb.js → p-6130383b.js}

@@ -1,15 +1,15 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-20f1beff.js';
 import { VerdocsEndpoint, getTemplate, updateTemplateRole, createTemplateRole, formatFullName } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-33300e3a.js';
-import { d as defineCustomElement$8 } from './p-f5ccf125.js';
-import { d as defineCustomElement$7 } from './p-39480096.js';
-import { d as defineCustomElement$6 } from './p-d5eae4db.js';
-import { d as defineCustomElement$5 } from './p-7f6c97d5.js';
-import { d as defineCustomElement$4 } from './p-02f67734.js';
-import { d as defineCustomElement$3 } from './p-497ceba2.js';
-import { d as defineCustomElement$2 } from './p-008472ce.js';
-import { d as defineCustomElement$1 } from './p-a5c69199.js';
+import { d as defineCustomElement$8 } from './p-77b37d23.js';
+import { d as defineCustomElement$7 } from './p-82c79267.js';
+import { d as defineCustomElement$6 } from './p-bbf082ec.js';
+import { d as defineCustomElement$5 } from './p-cd8c3571.js';
+import { d as defineCustomElement$4 } from './p-debf0a8a.js';
+import { d as defineCustomElement$3 } from './p-53900f81.js';
+import { d as defineCustomElement$2 } from './p-2508f120.js';
+import { d as defineCustomElement$1 } from './p-200b75fc.js';
 
 /**!
  * Sortable 1.15.6
@@ -3048,4 +3048,4 @@ function defineCustomElement() {
 
 export { VerdocsTemplateRoles as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-515f8afb.js.map
+//# sourceMappingURL=p-6130383b.js.map