@verdocs/web-sdk 6.5.0-beta.1 → 6.5.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-build.entry.cjs.js","sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipientFromTemplate, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build\n *   templateId={TEMPLATE_ID} step=\"preview\"\n *   onSend={({detail}) => { console.log('Sent envelope from template', detail) }}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }}\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\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. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\n\n  /**\n   * Event fired if the user clicks Cancel.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        this.loading = false;\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\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\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n    this.cancel?.emit();\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && <verdocs-template-settings templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["VerdocsEndpoint","SDKError","Store","getTemplate","h","Host"],"mappings":"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"}
+{"version":3,"file":"verdocs-build.entry.cjs.js","sources":["src/components/embeds/verdocs-build/verdocs-build.scss?tag=verdocs-build","src/components/embeds/verdocs-build/verdocs-build.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-build {\n  display: flex;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .content {\n    flex: 1;\n    gap: 20px;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    //box-shadow: 0 0 7px -3px #000000cc;\n  }\n\n  verdocs-template-attachments,\n  verdocs-template-roles {\n    margin: 20px;\n  }\n\n  verdocs-template-fields {\n    border-top: 1px solid #777777;\n  }\n\n  verdocs-template-attachments {\n    padding: 20px;\n    background: #ffffff;\n  }\n\n  verdocs-template-fields {\n    width: 100%;\n  }\n\n  verdocs-preview {\n    flex: 1;\n  }\n\n  .preview-container {\n    flex-direction: row;\n    display: flex;\n    width: 100%;\n    background-color: #eeeeee;\n    max-height: 100%;\n\n    @media all and (max-width: 450px) {\n      flex-direction: column;\n    }\n  }\n\n  .preview-send-wrapper {\n    display: flex;\n    flex: 0 0 300px;\n    background-color: #ffffff;\n    box-shadow: 1px 1px 6px -2px #0000007f;\n\n    @media all and (max-width: 450px) {\n      flex: 0;\n    }\n  }\n\n  .preview-preview-wrapper {\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    overflow-y: scroll;\n  }\n}\n","import {getTemplate, ICreateEnvelopeRecipientFromTemplate, IRole, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h, Element, Event, EventEmitter, Host, Watch, State} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nexport type TVerdocsBuildStep = 'attachments' | 'roles' | 'settings' | 'fields' | 'preview';\n\n/**\n * Display a template building experience. Several event callbacks provide status updates to the\n * parent application to support interface updates.\n *\n * ```ts\n * <verdocs-build\n *   templateId={TEMPLATE_ID} step=\"preview\"\n *   onSend={({detail}) => { console.log('Sent envelope from template', detail) }}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }}\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-build',\n  styleUrl: 'verdocs-build.scss',\n  shadow: false,\n})\nexport class VerdocsBuild {\n  private templateListenerId = null;\n\n  @Element() el!: any;\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. Unlike most other components, this is an optional parameter here.\n   * If the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\n   * If it is not specified, `step` will be ignored and the create step will be shown.\n   */\n  @Prop({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * The step in the creation process to display.\n   */\n  @Prop({reflect: true, mutable: true}) step: TVerdocsBuildStep = 'preview';\n\n  /**\n   * Event fired if the user clicks Cancel.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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  /**\n   * Event fired when the user selects a different step.\n   */\n  @Event({composed: true}) stepChanged: EventEmitter<TVerdocsBuildStep>;\n\n  /**\n   * The user completed the Send form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipients: ICreateEnvelopeRecipientFromTemplate[]; name: string; template_id: string}>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when the template is created by the upload step.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  /**\n   * Event fired when roles are updated in the roles step.\n   */\n  @Event({composed: true}) rolesUpdated: EventEmitter<{endpoint: VerdocsEndpoint; templateId: string; event: 'added' | 'deleted' | 'updated'; roles: IRole[]}>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string, oldTemplateId: string) {\n    if (!oldTemplateId && newTemplateId && this.step === 'attachments') {\n      this.step = 'preview';\n    }\n\n    this.loadTemplate(newTemplateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  @Watch('step')\n  onStepChanged() {\n    // We reload the template here even if only the step changed in case\n    // we were out of sync before\n    this.loadTemplate(this.templateId).catch((e: any) => console.log('Unknown Error', e));\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[BUILD] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[BUILD] No template ID, activating upload mode`);\n        this.step = 'attachments';\n        this.loading = false;\n        return;\n      }\n\n      try {\n        this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));\n      } catch (e) {\n        console.log('[BUILD] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[BUILD] Error with builder session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async loadTemplate(templateId: string) {\n    if (templateId) {\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\n  disconnectedCallback() {\n    console.log('[BUILD] Disconnected');\n    this.unlistenToTemplate();\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  handleCancel() {\n    this.step = 'preview';\n    this.cancel?.emit();\n  }\n\n  async handleTemplateCreated(templateId: string) {\n    await this.loadTemplate(templateId);\n    this.templateId = templateId;\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  async handleRolesUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  async handleTemplateUpdated(e: any) {\n    this.templateUpdated?.emit(e.detail);\n  }\n\n  handleAttachmentsNext() {\n    this.step = 'roles';\n    this.stepChanged?.emit('roles');\n  }\n\n  handleRolesNext() {\n    this.step = 'fields';\n    this.stepChanged?.emit('fields');\n  }\n\n  handleStepChanged(step: TVerdocsBuildStep) {\n    this.step = step;\n    this.stepChanged?.emit(step);\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"content\">\n          <verdocs-template-build-tabs\n            endpoint={this.endpoint}\n            templateId={this.templateId}\n            step={this.step}\n            onSdkError={e => this.sdkError?.emit(e.detail)}\n            onStepChanged={e => this.handleStepChanged(e.detail)}\n          />\n\n          {this.step === 'attachments' && (\n            <verdocs-template-attachments\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleAttachmentsNext()}\n              onTemplateUpdated={e => this.handleTemplateUpdated(e)}\n            />\n          )}\n\n          {this.step === 'roles' && (\n            <verdocs-template-roles\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onExit={() => this.handleCancel()}\n              onNext={() => this.handleRolesNext()}\n              onRolesUpdated={e => this.handleRolesUpdated(e)}\n            />\n          )}\n\n          {this.step === 'settings' && <verdocs-template-settings templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'fields' && <verdocs-template-fields templateId={this.templateId} endpoint={this.endpoint} onTemplateUpdated={e => this.handleTemplateUpdated(e)} />}\n\n          {this.step === 'preview' && (\n            <div class=\"preview-container\">\n              <div class=\"preview-send-wrapper\">\n                <verdocs-send templateId={this.templateId} endpoint={this.endpoint} onSend={e => this.send?.emit(e.detail)} style={{width: '100%'}} />\n              </div>\n              <div class=\"preview-preview-wrapper\">\n                <verdocs-preview templateId={this.templateId} endpoint={this.endpoint} style={{display: 'flex', flex: '1', maxWidth: '1000px'}} />\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["VerdocsEndpoint","SDKError","Store","getTemplate","h","Host"],"mappings":"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"}

package/dist/cjs/verdocs-button-panel.verdocs-tabs.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-button-panel.verdocs-tabs.entry.cjs.js","sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.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","@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"],"names":["createPopper","h","Host","index"],"mappings":"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"}
+{"version":3,"file":"verdocs-button-panel.verdocs-tabs.entry.cjs.js","sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.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","@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"],"names":["createPopper","h","Host","index"],"mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,wtDAAwtD;;MCwBzuD,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AA0BzB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AA4DhB;IApFC,kBAAkB,GAAA;QAChB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;;AAG/B,QAAA,IAAI,CAAC,cAAc,GAAGA,mBAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;;;AAG7D,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;AAC7B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;;AAG5B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;;AAQzB,IAAA,MAAM,SAAS,GAAA;;AACb,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;AAC3C,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAA,CAAG,KAAK,CAAC,MAAO,GAAC,CAAC;AAC7C,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QAEnB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,4BAA4B;QAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;QACjC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;QACxC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK;QAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK;QAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;QAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;QACjC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAM,KAAI;YAChC,CAAC,CAAC,eAAe,EAAE;YACnB,IAAI,CAAC,MAAM,EAAE;AACf,SAAC;QACD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;AAIzC,IAAA,MAAM,SAAS,GAAA;;AACb,QAAA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,8BAA8B,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAG;AACvF,YAAA,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC;AACjC,SAAC,CAAC;AACF,QAAA,CAAA,EAAA,GAAA,QAAQ,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE;AAC/D,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAItB,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,MAAM,IAAI,CAAC,SAAS,EAAE;;aACjB;AACL,YAAA,MAAM,IAAI,CAAC,SAAS,EAAE;;;IAI1B,MAAM,GAAA;AACJ,QAAA,QACEC,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,OAAO,EAAE,CAAC,CAAM,KAAI;gBAClB,CAAC,CAAC,eAAe,EAAE;AACnB,gBAAA,OAAO,IAAI,CAAC,MAAM,EAAE;AACtB,aAAC,EACD,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC7B,CAAA,EACFA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,8BAA8B,EAAuB,uBAAA,EAAA,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,EAAA,EACtIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,mBAAA,EAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,EAAG,CAAA,EAC9CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;ACpHb,MAAM,cAAc,GAAG,w7BAAw7B;;MCqBl8B,WAAW,GAAA,MAAA;AAJxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAKE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAEzB;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AA6BhC;AArBC,IAAA,eAAe,CAAC,KAAa,EAAA;;AAC3B,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,CAAC;;IAGtD,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEC,OAAK,MACxBF,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,IAAA,EAAOE,OAAK,KAAK,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAI,CAAA,EAAA,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAE,OAAO,EAAE,GAAG,CAAC,QAAQ,GAAG,MAAK,GAAG,GAAG,MAAM,IAAI,CAAC,eAAe,CAACA,OAAK,CAAC,IACpK,GAAG,CAAC,KAAK,CACN,CACP,CAAC,EAEFF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAE3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAO,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACF;;;;;;;;"}

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

@@ -3,7 +3,7 @@
 var index = require('./index-CQ5bTnED.js');
 var popper = require('./popper-Dmp8OTYh.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}";
+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:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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}";
 
 const VerdocsButtonPanel = class {
     constructor(hostRef) {

package/dist/cjs/verdocs-button.verdocs-help-icon.verdocs-text-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-button.verdocs-help-icon.verdocs-text-input.entry.cjs.js","sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx","src/components/controls/verdocs-help-icon/verdocs-help-icon.scss?tag=verdocs-help-icon","src/components/controls/verdocs-help-icon/verdocs-help-icon.tsx","src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 500;\n    cursor: pointer;\n    margin: 0;\n    width: 100%;\n\n    &:disabled {\n      cursor: inherit;\n      pointer-events: none;\n    }\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .button-label {\n      padding: 0 12px;\n    }\n\n    // Small-sized button size adjustments\n    &.xsmall {\n      height: 26px;\n      font-size: 12px;\n\n      .icon {\n        margin: 0 3px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 18px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .button-label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .button-label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .button-label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/**\n * A simple button, with consistent styling to other controls in the design system.\n *\n * ```ts\n * <verdocs-button label=\"Click Me\" size=\"normal\" variant=\"standard\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button.\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button.\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'xsmall' | 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"button-label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-help-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n  opacity: 0.3;\n  position: relative;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  .icon {\n    display: inline-block;\n  }\n\n  .tooltip {\n    display: none;\n    min-width: 200px;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: 500;\n    position: absolute;\n    padding: 5px 10px;\n    font-size: 12px;\n    border-radius: 4px;\n    z-index: 10005;\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}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n\nconst helpIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n *\n * ```ts\n * <verdocs-help-icon text=\"Sample help text\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-help-icon',\n  styleUrl: 'verdocs-help-icon.scss',\n  shadow: false,\n})\nexport class VerdocsHelpIcon {\n  iconEl: HTMLDivElement;\n  tooltipEl: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Optional icon to display. If not supplied, a standard help icon will be shown.\n   */\n  @Prop() icon: string = helpIcon;\n\n  @State() containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {\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\n  show() {\n    this.tooltipEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltipEl?.removeAttribute('data-show');\n  }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div\n          id={this.containerId}\n          role=\"tooltip\"\n          class=\"tooltip\"\n          data-popper-placement=\"bottom\"\n          ref={el => (this.tooltipEl = el as HTMLDivElement)}\n        >\n          <span innerHTML={this.text} />\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 34px;\n    padding: 0 9px;\n    outline: none;\n\n    &:disabled {\n      cursor: not-allowed;\n      background: $verdocs-grey-2;\n      border: 1px solid $verdocs-grey-1;\n    }\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 600;\n    font-size: 13px;\n    margin: 0 0 2px 0;\n  }\n\n  .required {\n    color: red;\n    margin-left: 2px;\n    display: inline-block;\n  }\n\n  .description {\n    font-size: 11px;\n    margin: 0 0 0 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .input-container {\n    position: relative;\n  }\n\n  .clear {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: #720101;\n      cursor: pointer;\n    }\n  }\n\n  .copy {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  .toggle-pw {\n    top: 5px;\n    right: 7px;\n    width: 18px;\n    height: 18px;\n    stroke: #cccccc;\n    //fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  &.clearable,\n  &.copyable {\n    .input-element {\n      padding-right: 32px;\n    }\n  }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  private inputEl: HTMLInputElement;\n\n  @Element()\n  hostEl: HTMLElement;\n\n  /**\n   * The initial value for the input field.\n   */\n  @Prop({mutable: true, reflect: true}) value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Displayed below the field in a small font, typically used for instructions or reminders.\n   */\n  @Prop() description: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * If supplied, a help icon will be displayed to provide the user more information.\n   */\n  @Prop() helpText: string = '';\n\n  /**\n   * If set, a clear button will be displayed.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n   * both clearable and copyable. If both properties are set to true, copyable will\n   * be ignored.\n   */\n  @Prop() copyable = false;\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Should the field be required?\n   */\n  @Prop() required: boolean = false;\n\n  @State() showingPw: boolean = false;\n\n  copyToClipboard() {\n    this.inputEl.select();\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => VerdocsToast('Copied!'))\n      .catch(e => console.log('Error copying to clipboard', e));\n  }\n\n  render() {\n    return (\n      <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n        <label>\n          {this.label && (\n            <div class=\"input-label\">\n              {this.label + ':'}\n              {this.required && <span class=\"required\">*</span>}\n            </div>\n          )}\n\n          <div class=\"input-container\">\n            <input\n              type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n              value={this.value}\n              required={this.required}\n              class=\"input-element\"\n              data-lpignore=\"true\"\n              disabled={this.disabled}\n              placeholder={this.placeholder}\n              autoComplete={this.autocomplete}\n              // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n              ref={el => (this.inputEl = el as HTMLInputElement)}\n              onInput={(e: any) => (this.value = e.target.value)}\n            />\n\n            {this.description && <div class=\"description\">{this.description}</div>}\n\n            {this.clearable && this.value && (\n              <span\n                innerHTML={ClearIcon}\n                class=\"clear\"\n                onClick={() => {\n                  // We need to allow the onInput event to fire first in case\n                  // the user was focused on this field before clicking clear.\n                  setTimeout(() => {\n                    this.value = '';\n                    this.inputEl?.setAttribute('value', '');\n                    // We need to allow the value to \"settle\"\n                    setTimeout(() => {\n                      this.inputEl?.dispatchEvent(new window.Event('focusout'));\n                      this.inputEl?.blur();\n                    }, 50);\n                  }, 50);\n                }}\n              />\n            )}\n\n            {this.type === 'password' && (\n              <span\n                innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n                class=\"toggle-pw\"\n                onClick={() => {\n                  this.showingPw = !this.showingPw;\n                }}\n              />\n            )}\n\n            {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n          </div>\n\n          {this.helpText && <verdocs-help-icon text={this.helpText} />}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"names":["h","createPopper","Host","VerdocsToast"],"mappings":"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"}
+{"version":3,"file":"verdocs-button.verdocs-help-icon.verdocs-text-input.entry.cjs.js","sources":["src/components/controls/verdocs-button/verdocs-button.scss?tag=verdocs-button","src/components/controls/verdocs-button/verdocs-button.tsx","src/components/controls/verdocs-help-icon/verdocs-help-icon.scss?tag=verdocs-help-icon","src/components/controls/verdocs-help-icon/verdocs-help-icon.tsx","src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button {\n  button {\n    font-family: $verdocs-primary-font;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 500;\n    cursor: pointer;\n    margin: 0;\n    width: 100%;\n\n    &:disabled {\n      cursor: inherit;\n      pointer-events: none;\n    }\n\n    .icon {\n      margin: 0 12px;\n\n      svg {\n        fill: $verdocs-grey-4;\n        display: block;\n      }\n    }\n\n    .button-label {\n      padding: 0 12px;\n    }\n\n    // Small-sized button size adjustments\n    &.xsmall {\n      height: 26px;\n      font-size: 12px;\n\n      .icon {\n        margin: 0 3px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 18px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Small-sized button size adjustments\n    &.small {\n      height: 34px;\n      font-size: 13px;\n\n      .icon {\n        margin: 0 4px;\n\n        svg {\n          margin: 2px 0 0 0;\n          height: 20px;\n        }\n      }\n\n      .button-label {\n        padding: 0 4px;\n      }\n    }\n\n    // Normal-sized button size adjustments\n    &.normal {\n      height: 44px;\n      font-size: 14px;\n\n      .icon.start {\n        margin: 0 4px 0 8px;\n      }\n\n      .icon.end {\n        margin: 0 8px 0 4px;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 22px;\n        }\n      }\n\n      .button-label {\n        padding: 0 10px;\n      }\n    }\n\n    // Medium-sized button size adjustments\n    &.medium {\n      height: 52px;\n      font-size: 16px;\n\n      .icon.start {\n        margin: 0 0 0 18px;\n      }\n\n      .icon.end {\n        margin: 0 18px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 26px;\n        }\n      }\n\n      .button-label {\n        padding: 0 20px;\n      }\n    }\n\n    // Large-sized button size adjustments\n    &.large {\n      height: 60px;\n      font-size: 20px;\n\n      .icon.start {\n        margin: 0 0 0 24px;\n      }\n\n      .icon.end {\n        margin: 0 24px 0 0;\n      }\n\n      .icon {\n        svg {\n          margin: 2px 0 0 0;\n          height: 32px;\n        }\n      }\n\n      .button-label {\n        padding: 0 34px;\n      }\n    }\n\n    // Standard variant is a solid color\n    &.standard {\n      background: $verdocs-green;\n      border-radius: 4px;\n      outline: none;\n      border: none;\n      color: white;\n\n      &:disabled {\n        background-color: $disabled-color;\n        cursor: default;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(110%);\n      }\n    }\n\n    // Text variant is just a label\n    &.text {\n      color: $secondary-color;\n      background: transparent;\n      font-weight: 500;\n      padding: 0 4px;\n      outline: none;\n      border: none;\n\n      &:disabled {\n        color: $disabled-color;\n      }\n\n      &:active:not([disabled]) {\n        filter: brightness(130%);\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n\n    // Standard variant is a solid color\n    &.outline {\n      border: 1px solid $secondary-color;\n      color: $secondary-color;\n      outline: none;\n      background: transparent;\n      border-radius: 4px;\n      padding: 0 20px;\n\n      &:disabled {\n        color: $disabled-color;\n        border: 1px solid $disabled-color;\n      }\n\n      &:active {\n        background: $secondary-color;\n        color: white;\n      }\n\n      .icon {\n        svg {\n          fill: $secondary-color;\n        }\n      }\n    }\n  }\n}\n","import {Component, Prop, h} from '@stencil/core';\n\n/**\n * A simple button, with consistent styling to other controls in the design system.\n *\n * ```ts\n * <verdocs-button label=\"Click Me\" size=\"normal\" variant=\"standard\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-button',\n  styleUrl: 'verdocs-button.scss',\n})\nexport class VerdocsButton {\n  /**\n   * The label for the button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If desired, a prefix icon for the button.\n   */\n  @Prop() startIcon: string | null = null;\n\n  /**\n   * If desired, a suffix icon for the button.\n   */\n  @Prop() endIcon: string | null = null;\n\n  /**\n   * The size (height) of the button.\n   */\n  @Prop() size: 'xsmall' | 'small' | 'normal' | 'medium' | 'large' = 'normal';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The display variant of the button.\n   */\n  @Prop() variant: 'standard' | 'text' | 'outline' = 'standard';\n\n  /**\n   * Whether the button should be disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <button disabled={this.disabled} type={this.type} class={`${this.variant} ${this.size} ${this.type}`}>\n        {this.startIcon ? <span class=\"icon start\" innerHTML={this.startIcon} /> : null}\n        <span class=\"button-label\">{this.label}</span>\n        {this.endIcon ? <span class=\"icon end\" innerHTML={this.endIcon} /> : null}\n      </button>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-help-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n  opacity: 0.3;\n  position: relative;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  .icon {\n    display: inline-block;\n  }\n\n  .tooltip {\n    display: none;\n    min-width: 200px;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: 500;\n    position: absolute;\n    padding: 5px 10px;\n    font-size: 12px;\n    border-radius: 4px;\n    z-index: 10005;\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}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n\nconst helpIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" fill=\"#5c6575\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n *\n * ```ts\n * <verdocs-help-icon text=\"Sample help text\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-help-icon',\n  styleUrl: 'verdocs-help-icon.scss',\n  shadow: false,\n})\nexport class VerdocsHelpIcon {\n  iconEl: HTMLDivElement;\n  tooltipEl: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Optional icon to display. If not supplied, a standard help icon will be shown.\n   */\n  @Prop() icon: string = helpIcon;\n\n  @State() containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {\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\n  show() {\n    this.tooltipEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltipEl?.removeAttribute('data-show');\n  }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div\n          id={this.containerId}\n          role=\"tooltip\"\n          class=\"tooltip\"\n          data-popper-placement=\"bottom\"\n          ref={el => (this.tooltipEl = el as HTMLDivElement)}\n        >\n          <span innerHTML={this.text} />\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 34px;\n    padding: 0 9px;\n    outline: none;\n\n    &:disabled {\n      cursor: not-allowed;\n      background: $verdocs-grey-2;\n      border: 1px solid $verdocs-grey-1;\n    }\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 600;\n    font-size: 13px;\n    margin: 0 0 2px 0;\n  }\n\n  .required {\n    color: red;\n    margin-left: 2px;\n    display: inline-block;\n  }\n\n  .description {\n    font-size: 11px;\n    margin: 0 0 0 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n\n  .input-container {\n    position: relative;\n  }\n\n  .clear {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: #720101;\n      cursor: pointer;\n    }\n  }\n\n  .copy {\n    top: 7px;\n    right: 5px;\n    width: 18px;\n    height: 18px;\n    fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  .toggle-pw {\n    top: 5px;\n    right: 7px;\n    width: 18px;\n    height: 18px;\n    stroke: #cccccc;\n    //fill: #cccccc;\n    position: absolute;\n\n    &:hover {\n      fill: $verdocs-purple;\n      cursor: pointer;\n    }\n  }\n\n  &.clearable,\n  &.copyable {\n    .input-element {\n      padding-right: 32px;\n    }\n  }\n}\n","import {Component, Element, Prop, Host, h, State} from '@stencil/core';\nimport {VerdocsToast} from '../../../utils/Toast';\n\nconst ClearIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 122.881 122.88\"><g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z\"/></g></svg>`;\nconst CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z\" clip-rule=\"evenodd\" /><path fill-rule=\"evenodd\" d=\"M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z\" clip-rule=\"evenodd\" /></svg>`;\nconst EyeIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\" /><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" /></svg>`;\nconst EyeSlashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\" /></svg>`;\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emit.\n *\n * ```ts\n * <verdocs-text-input type=\"text\" label=\"Name\" placeholder=\"Enter your name...\" value=\"\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  private inputEl: HTMLInputElement;\n\n  @Element()\n  hostEl: HTMLElement;\n\n  /**\n   * The initial value for the input field.\n   */\n  @Prop({mutable: true, reflect: true}) value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Displayed below the field in a small font, typically used for instructions or reminders.\n   */\n  @Prop() description: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * If supplied, a help icon will be displayed to provide the user more information.\n   */\n  @Prop() helpText: string = '';\n\n  /**\n   * If set, a clear button will be displayed.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * If set, a copy-to-clipboard button will be displayed. NOTE: A field may not be\n   * both clearable and copyable. If both properties are set to true, copyable will\n   * be ignored.\n   */\n  @Prop() copyable = false;\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Should the field be required?\n   */\n  @Prop() required: boolean = false;\n\n  @State() showingPw: boolean = false;\n\n  copyToClipboard() {\n    this.inputEl.select();\n    navigator.clipboard\n      .writeText(this.value)\n      .then(() => VerdocsToast('Copied!'))\n      .catch(e => console.log('Error copying to clipboard', e));\n  }\n\n  render() {\n    return (\n      <Host class={`input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}`}>\n        <label>\n          {this.label && (\n            <div class=\"input-label\">\n              {this.label + ':'}\n              {this.required && <span class=\"required\">*</span>}\n            </div>\n          )}\n\n          <div class=\"input-container\">\n            <input\n              type={this.type === 'password' && this.showingPw ? 'text' : this.type}\n              value={this.value}\n              required={this.required}\n              class=\"input-element\"\n              data-lpignore=\"true\"\n              disabled={this.disabled}\n              placeholder={this.placeholder}\n              autoComplete={this.autocomplete}\n              // onBlur={(e: any) => this.blur?.emit(e.target.value)}\n              ref={el => (this.inputEl = el as HTMLInputElement)}\n              onInput={(e: any) => (this.value = e.target.value)}\n            />\n\n            {this.description && <div class=\"description\">{this.description}</div>}\n\n            {this.clearable && this.value && (\n              <span\n                innerHTML={ClearIcon}\n                class=\"clear\"\n                onClick={() => {\n                  // We need to allow the onInput event to fire first in case\n                  // the user was focused on this field before clicking clear.\n                  setTimeout(() => {\n                    this.value = '';\n                    this.inputEl?.setAttribute('value', '');\n                    // We need to allow the value to \"settle\"\n                    setTimeout(() => {\n                      this.inputEl?.dispatchEvent(new window.Event('focusout'));\n                      this.inputEl?.blur();\n                    }, 50);\n                  }, 50);\n                }}\n              />\n            )}\n\n            {this.type === 'password' && (\n              <span\n                innerHTML={this.showingPw ? EyeIcon : EyeSlashIcon}\n                class=\"toggle-pw\"\n                onClick={() => {\n                  this.showingPw = !this.showingPw;\n                }}\n              />\n            )}\n\n            {!this.clearable && this.copyable && this.value && <span innerHTML={CopyIcon} class=\"copy\" onClick={() => this.copyToClipboard()} />}\n          </div>\n\n          {this.helpText && <verdocs-help-icon text={this.helpText} />}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"names":["h","createPopper","Host","VerdocsToast"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ var index = require('./index-CQ5bTnED.js');
 var popper = require('./popper-Dmp8OTYh.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 
-const verdocsButtonCss = "@-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 button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:500;cursor:pointer;margin:0;width:100%}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.xsmall{height:26px;font-size:12px}verdocs-button button.xsmall .icon{margin:0 3px}verdocs-button button.xsmall .icon svg{margin:2px 0 0 0;height:18px}verdocs-button button.xsmall .button-label{padding:0 4px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const verdocsButtonCss = "@-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 button{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:500;cursor:pointer;margin:0;width:100%}verdocs-button button:disabled{cursor:inherit;pointer-events:none}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .button-label{padding:0 12px}verdocs-button button.xsmall{height:26px;font-size:12px}verdocs-button button.xsmall .icon{margin:0 3px}verdocs-button button.xsmall .icon svg{margin:2px 0 0 0;height:18px}verdocs-button button.xsmall .button-label{padding:0 4px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .button-label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .button-label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .button-label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .button-label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
 
 const VerdocsButton = class {
     constructor(hostRef) {
@@ -40,7 +40,7 @@ const VerdocsButton = class {
 };
 VerdocsButton.style = verdocsButtonCss;
 
-const verdocsHelpIconCss = "@-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-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10005}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const verdocsHelpIconCss = "@-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-help-icon{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);display:inline-block;opacity:0.3;position:relative}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .tooltip{display:none;min-width:200px;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:500;position:absolute;padding:5px 10px;font-size:12px;border-radius:4px;z-index:10005}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
 
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsHelpIcon = class {
@@ -78,7 +78,7 @@ const VerdocsHelpIcon = class {
         (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
     }
     render() {
-        return (index.h(index.Host, { key: '0b905cfd95b07050b34bf1587736871a66637210', class: {} }, index.h("div", { key: '92a0c44d55c69d683c72b90ec8c309becde3a139', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { key: 'f4de7382924d142eb17c4182ae62664840899b98', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, index.h("span", { key: 'a234a362f265a9cf1bb5e80f2b2153bc0330bb84', innerHTML: this.text }), index.h("div", { key: 'cdb2986f346829a29dca06a63ae6c27b47361e9e', "data-popper-arrow": "true", class: "arrow" }))));
+        return (index.h(index.Host, { key: '01561bbac755654aad935cc091c5e90103581381', class: {} }, index.h("div", { key: '9dceac15cceec19da5a95c9a4f31f7f11b7666ba', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { key: '5ed88cb901ccf283496e0920e73abdcd047f259d', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, index.h("span", { key: 'a7c5ca9d7ce4c0224c8ae35c51fd52bf108f7851', innerHTML: this.text }), index.h("div", { key: 'b83b7a614b8c4523376b435fe8756037399209ba', "data-popper-arrow": "true", class: "arrow" }))));
     }
 };
 VerdocsHelpIcon.style = verdocsHelpIconCss;
@@ -149,9 +149,9 @@ const VerdocsTextInput = class {
             .catch(e => console.log('Error copying to clipboard', e));
     }
     render() {
-        return (index.h(index.Host, { key: '6a5812204aef54882702cc4ae774828a7a5f9d20', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, index.h("label", { key: '66dff3172fe976cd4b59294a7aa866e9f5935ee8' }, this.label && (index.h("div", { key: '7ef33be8b4432f07d6b382b575abd4c517e4ac78', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: '09efdde96e263b296a1456f5107c63eea666ceaf', class: "required" }, "*"))), index.h("div", { key: '98bd42333f58857908e1c942431d242846f3f7d7', class: "input-container" }, index.h("input", { key: '5878d99c2f683378d85122807b8fb72083285cc4', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete,
+        return (index.h(index.Host, { key: '37856244423d55c7b0c03c259c1e1bf4940ede25', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, index.h("label", { key: '22ff61e3f1c3f7230960a59f4c863a3f93ea78ce' }, this.label && (index.h("div", { key: '4a73bba334959de8519f16c476fa21a120b159ed', class: "input-label" }, this.label + ':', this.required && index.h("span", { key: 'ee4e71aae1ed34c428f7ec302c2e20ccc279bd3f', class: "required" }, "*"))), index.h("div", { key: '5c2554158428d37bbad9a932a80fdf03058f1668', class: "input-container" }, index.h("input", { key: 'efee03c66041a5023a2f6fcb9c11fc015acba876', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete,
             // onBlur={(e: any) => this.blur?.emit(e.target.value)}
-            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.description && index.h("div", { key: 'e11f44395f7bce64bd22490ca4c705e75e299959', class: "description" }, this.description), this.clearable && this.value && (index.h("span", { key: 'c9c8ab86cfe0f8e094372671b058bf553c7b839d', innerHTML: ClearIcon, class: "clear", onClick: () => {
+            ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.description && index.h("div", { key: 'ea41c1c59de322d77a1079fb169dac1b46c69f22', class: "description" }, this.description), this.clearable && this.value && (index.h("span", { key: 'ee8f307810fd0f120913d3e8413d4e2e8908cf0f', innerHTML: ClearIcon, class: "clear", onClick: () => {
                 // We need to allow the onInput event to fire first in case
                 // the user was focused on this field before clicking clear.
                 setTimeout(() => {
@@ -165,9 +165,9 @@ const VerdocsTextInput = class {
                         (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
                     }, 50);
                 }, 50);
-            } })), this.type === 'password' && (index.h("span", { key: '47402b1fefd1716010d98cc48452b2f17a0cbf39', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
+            } })), this.type === 'password' && (index.h("span", { key: '232118598f2cd2dfc3a3bd9b40fbef44f9aef124', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
                 this.showingPw = !this.showingPw;
-            } })), !this.clearable && this.copyable && this.value && index.h("span", { key: 'eb9b9792a040a734109609f447afe65565b8d16e', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && index.h("verdocs-help-icon", { key: 'aef7243d497bc4c4513fb6984eb8290df959f990', text: this.helpText }))));
+            } })), !this.clearable && this.copyable && this.value && index.h("span", { key: '0bc6196a6cc4eea8492f15a5a457a3fa641f6a60', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && index.h("verdocs-help-icon", { key: '98092330afff1324449141e8c550384ae4a7a68f', text: this.helpText }))));
     }
     get hostEl() { return index.getElement(this); }
 };