@verdocs/web-sdk 6.2.2 → 6.2.5

package/dist/verdocs-web-sdk/{p-CJgSjfS3.system.js.map → p-DjReAtE4.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-CJgSjfS3.system.js","sources":["src/components/templates/verdocs-template-create/verdocs-template-create.scss?tag=verdocs-template-create","src/components/templates/verdocs-template-create/verdocs-template-create.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-create {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .upload-box {\n      box-sizing: border-box;\n      width: 320px;\n      text-align: center;\n      padding: 44px 18px 66px;\n      border: 2px dashed #979797;\n      color: rgba(0, 0, 0, 0.54);\n\n      &.drag-over {\n        border: 2px solid $verdocs-deep-blue;\n      }\n\n      svg {\n        width: 64px;\n        fill: #5c6575;\n      }\n    }\n  }\n\n  p {\n    color: $verdocs-grey-1;\n    margin-top: 20px;\n    font-size: 18px;\n    font-weight: 500;\n    overflow-wrap: anywhere;\n\n    &.subscript {\n      color: $verdocs-bg-4;\n      font-size: 14px;\n      margin: 20px;\n    }\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  .error {\n    margin: 20px 0;\n    color: $verdocs-red-1;\n  }\n}\n","import {createTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n * This is typically the first step in a template creation workflow.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\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  @Prop({mutable: true})\n  maxSize: number = 20.5 * 1024 * 1024;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<ITemplate>;\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 updates the template.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; templateId: string}>;\n\n  @State() file: File | null;\n  @State() creating = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() errorMessage = '';\n\n  componentWillLoad() {\n    this.endpoint.setTimeout(30000);\n    this.endpoint.loadSession();\n  }\n\n  handleFileChanged(e: any) {\n    this.errorMessage = '';\n    this.file = e.target.files?.[0] || null;\n    console.log('[CREATE] Selected file', this.file);\n\n    const totalSize = this.file.size;\n    if (totalSize > this.maxSize) {\n      this.errorMessage = 'Total file size must not exceed 20MB.';\n    }\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    this.creating = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplate(\n        this.endpoint,\n        {\n          name: this.file.name,\n          // TODO: Make optional in the SDK\n          initial_reminder: 0,\n          followup_reminders: 0,\n          documents: [this.file],\n        },\n        percent => {\n          if (percent >= 99) {\n            this.progressLabel = 'Processing...';\n            this.progressPercent = 100;\n          } else {\n            this.progressPercent = percent;\n          }\n        },\n      );\n\n      console.log('[CREATE] Created template', template);\n      this.templateCreated?.emit({endpoint: this.endpoint, template, templateId: template.id});\n      this.next?.emit(template);\n      this.creating = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.creating = false;\n    }\n  }\n\n  render() {\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        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <input\n            type=\"file\"\n            id=\"verdocs-template-create-file\"\n            multiple\n            accept=\".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n            style={{display: 'none'}}\n            onChange={e => this.handleFileChanged(e)}\n          />\n\n          {this.creating ? (\n            <div class=\"loader-wrapper\">\n              <verdocs-loader />\n              {this.progressLabel && (\n                <div class=\"progress-wrapper\">\n                  <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n                </div>\n              )}\n            </div>\n          ) : (\n            <div\n              class=\"upload-box\"\n              onDrop={(e: any) => {\n                e.preventDefault();\n                e.target.classList.remove('drag-over');\n                this.file = e.dataTransfer.files[0];\n\n                if (this.file.size > this.maxSize) {\n                  this.errorMessage = 'Total file size must not exceed 20MB.';\n                }\n              }}\n              onDragOver={(e: any) => {\n                e.preventDefault();\n                e.dataTransfer.dropEffect = 'copy';\n              }}\n              onDragEnter={(e: any) => e.target.classList.add('drag-over')}\n              onDragLeave={(e: any) => e.target.classList.remove('drag-over')}\n            >\n              <span innerHTML={FileIcon} style={{display: 'flex', justifyContent: 'center'}} />\n              <p>{this.file ? this.file.name : 'Drag and drop your files here'}</p>\n              <p class=\"subscript\">Supported files: PDF, Word</p>\n\n              <verdocs-button label={this.file ? 'Select a different file' : 'Select a file from your computer'} size=\"small\" onClick={e => this.handleUpload(e)} />\n            </div>\n          )}\n\n          {!!this.errorMessage && <div class=\"error\">{this.errorMessage}</div>}\n\n          <div class=\"buttons\">\n            <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.creating} />\n            <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleSubmit(e)} disabled={!this.file || this.creating || !!this.errorMessage} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"p-DjReAtE4.system.js","sources":["src/components/templates/verdocs-template-create/verdocs-template-create.scss?tag=verdocs-template-create","src/components/templates/verdocs-template-create/verdocs-template-create.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-create {\n  font-family: $verdocs-primary-font;\n\n  form {\n    background-color: $verdocs-grey-4;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .upload-box {\n      box-sizing: border-box;\n      width: 320px;\n      text-align: center;\n      padding: 44px 18px 66px;\n      border: 2px dashed #979797;\n      color: rgba(0, 0, 0, 0.54);\n\n      &.drag-over {\n        border: 2px solid $verdocs-deep-blue;\n      }\n\n      svg {\n        width: 64px;\n        fill: #5c6575;\n      }\n    }\n  }\n\n  p {\n    color: $verdocs-grey-1;\n    margin-top: 20px;\n    font-size: 18px;\n    font-weight: 500;\n    overflow-wrap: anywhere;\n\n    &.subscript {\n      color: $verdocs-bg-4;\n      font-size: 14px;\n      margin: 20px;\n    }\n  }\n\n  .loader-wrapper {\n    background-color: $verdocs-grey-4;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n    position: relative;\n    width: 320px;\n    height: 320px;\n    text-align: center;\n    border: 2px dashed #979797;\n    justify-content: flex-end;\n  }\n\n  .progress-wrapper {\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  .error {\n    margin: 20px 0;\n    color: $verdocs-red-1;\n  }\n}\n","import {createTemplate, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {SDKError} from '../../../utils/errors';\n\nconst FileIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z\"></path></svg>';\n\n/**\n * Displays a file upload mechanism suitable for the first step of creating a template.\n * This is typically the first step in a template creation workflow.\n */\n@Component({\n  tag: 'verdocs-template-create',\n  styleUrl: 'verdocs-template-create.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateCreate {\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  @Prop({mutable: true})\n  maxSize: number = 20.5 * 1024 * 1024;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<ITemplate>;\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 updates the template.\n   */\n  @Event({composed: true}) templateCreated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; templateId: string}>;\n\n  @State() file: File | null;\n  @State() creating = false;\n  @State() progressLabel = 'Uploading...';\n  @State() progressPercent = 0;\n  @State() errorMessage = '';\n\n  componentWillLoad() {\n    this.endpoint.setTimeout(30000);\n    this.endpoint.loadSession();\n  }\n\n  handleFileChanged(e: any) {\n    this.errorMessage = '';\n    this.file = e.target.files?.[0] || null;\n    console.log('[CREATE] Selected file', this.file);\n\n    const totalSize = this.file.size;\n    if (totalSize > this.maxSize) {\n      this.errorMessage = 'Total file size must not exceed 20MB.';\n    }\n  }\n\n  handleUpload(e) {\n    e.stopPropagation();\n    const fileElem = document.getElementById('verdocs-template-create-file');\n    fileElem.click();\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.exit.emit();\n  }\n\n  async handleSubmit(e) {\n    e.stopPropagation();\n\n    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.\n    if (!this.file) {\n      return;\n    }\n\n    this.creating = true;\n    this.progressLabel = 'Uploading...';\n\n    try {\n      const template = await createTemplate(\n        this.endpoint,\n        {\n          name: this.file.name,\n          // TODO: Make optional in the SDK\n          initial_reminder: 0,\n          followup_reminders: 0,\n          documents: [this.file],\n        },\n        percent => {\n          if (percent >= 99) {\n            this.progressLabel = 'Processing...';\n            this.progressPercent = 100;\n          } else {\n            this.progressPercent = percent;\n          }\n        },\n      );\n\n      console.log('[CREATE] Created template', template);\n      this.templateCreated?.emit({endpoint: this.endpoint, template, templateId: template.id});\n      this.next?.emit(template);\n      this.creating = false;\n      this.progressLabel = '';\n      this.progressPercent = 0;\n    } catch (e) {\n      console.log('[CREATE] Error creating template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      this.creating = false;\n    }\n  }\n\n  render() {\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        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <input\n            type=\"file\"\n            id=\"verdocs-template-create-file\"\n            multiple\n            accept=\".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n            style={{display: 'none'}}\n            onChange={e => this.handleFileChanged(e)}\n          />\n\n          {this.creating ? (\n            <div class=\"loader-wrapper\">\n              <verdocs-loader />\n              {this.progressLabel && (\n                <div class=\"progress-wrapper\">\n                  <verdocs-progress-bar showPercent={true} percent={this.progressPercent} label={this.progressLabel} />\n                </div>\n              )}\n            </div>\n          ) : (\n            <div\n              class=\"upload-box\"\n              onDrop={(e: any) => {\n                e.preventDefault();\n                e.target.classList.remove('drag-over');\n                this.file = e.dataTransfer.files[0];\n\n                if (this.file.size > this.maxSize) {\n                  this.errorMessage = 'Total file size must not exceed 20MB.';\n                }\n              }}\n              onDragOver={(e: any) => {\n                e.preventDefault();\n                e.dataTransfer.dropEffect = 'copy';\n              }}\n              onDragEnter={(e: any) => e.target.classList.add('drag-over')}\n              onDragLeave={(e: any) => e.target.classList.remove('drag-over')}\n            >\n              <span innerHTML={FileIcon} style={{display: 'flex', justifyContent: 'center'}} />\n              <p>{this.file ? this.file.name : 'Drag and drop your files here'}</p>\n              <p class=\"subscript\">Supported files: PDF, Word</p>\n\n              <verdocs-button label={this.file ? 'Select a different file' : 'Select a file from your computer'} size=\"small\" onClick={e => this.handleUpload(e)} />\n            </div>\n          )}\n\n          {!!this.errorMessage && <div class=\"error\">{this.errorMessage}</div>}\n\n          <div class=\"buttons\">\n            <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} disabled={this.creating} />\n            <verdocs-button label=\"Next\" size=\"small\" onClick={e => this.handleSubmit(e)} disabled={!this.file || this.creating || !!this.errorMessage} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/verdocs-web-sdk/{p-BwvJ8lkq.system.js.map → p-DmidtinD.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-BwvJ8lkq.system.js","sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    height: 26px;\n    padding: 0 4px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  &.open {\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></svg>`;\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;MAAA,MAAM,kBAAkB,GAAG,ohDAAohD;;MCI/iD,MAAM,aAAa,GAAG,CAAA,+KAAA,CAAiL;YA6B1L,eAAe,+BAAA,MAAA;MAJ5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAQE;;MAEG;MACK,QAAA,IAAO,CAAA,OAAA,GAAkB,EAAE;cAQ1B,IAAA,CAAA,WAAW,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;MAE3E,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;MAqC5B;UAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB,EAAA;;cAC5C,CAAC,CAAC,eAAe,EAAE;cACnB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,MAAM,CAAC;MACjC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;UAGzB,MAAM,GAAA;MACJ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;UAGpC,MAAM,GAAA;cACJ,MAAM,IAAI,GAAG,CAAoB,iBAAA,EAAA,YAAY,CAAC,CAAC,CAAC,EAAE;cAElD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,EAAA,YAAA,EAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAAI,CAAA,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,EAAA,EACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAG;MACzB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;sBACjB,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,GAAG;;uBACjD;MACL,gBAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN;;MAGf,SAAC,CAAC,CACa,CAClB,CACI;;;;;;;;;;;;"}
+{"version":3,"file":"p-DmidtinD.system.js","sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  height: 26px;\n  display: block;\n  position: relative;\n  font-family: $primary-font;\n\n  .arrow {\n    height: 26px;\n    padding: 0 4px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  &.open {\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n\n#verdocs-dropdown-menu-items {\n  width: 200px;\n  z-index: 10000;\n  position: absolute;\n  border-radius: 5px;\n  background: $medium-bg;\n  border: 1px solid $item-border-color;\n}\n\n.verdocs-dropdown-menu-separator {\n  height: 1px;\n  margin-top: 5px;\n  padding-top: 5px;\n  border-top: 1px solid #ffffff5f;\n}\n\n.verdocs-dropdown-menu-option {\n  width: 100%;\n  color: #fff;\n  border: none;\n  display: block;\n  text-align: left;\n  background: none;\n  text-wrap: nowrap;\n  padding: 10px 20px;\n}\n\n.verdocs-dropdown-menu-option:hover {\n  cursor: pointer;\n  background: $primary-color;\n}\n\n.verdocs-dropdown-menu-option[disabled] {\n  color: $light-disabled-color;\n}\n\n.verdocs-dropdown-menu-option[disabled]:hover {\n  cursor: inherit;\n  background: transparent;\n  color: $light-disabled-color;\n}\n","import {Host, State} from '@stencil/core';\nimport {randomString} from '@verdocs/js-sdk';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst DropdownArrow = `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#50BE80\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M7 10l5 5 5-5H7z\"/></svg>`;\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected. Separators may be created by supplying an entry with an empty label.\n *\n * ```ts\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n *     {label: ''}\n *     {label: 'Option 3', id: '2'}\n *    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() showPicker = false;\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.optionSelected?.emit(option);\n    this.showPicker = false;\n  }\n\n  toggle() {\n    this.showPicker = !this.showPicker;\n  }\n\n  render() {\n    const elId = `verdocs-dropdown-${randomString(8)}`;\n\n    return (\n      <Host>\n        <button class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" id={elId} onClick={() => (this.showPicker = !this.showPicker)} />\n\n        {this.showPicker && (\n          <verdocs-portal anchor={elId} onClickAway={() => (this.showPicker = false)} id=\"verdocs-dropdown-menu-items\">\n            {this.options.map(option => {\n              if (!option.label) {\n                return <div class=\"verdocs-dropdown-menu-separator\" />;\n              } else {\n                return (\n                  <button class=\"verdocs-dropdown-menu-option\" disabled={option.disabled || false} onClick={e => this.handleSelectOption(e, option)}>\n                    {option.label}\n                  </button>\n                );\n              }\n            })}\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;MAAA,MAAM,kBAAkB,GAAG,ohDAAohD;;MCI/iD,MAAM,aAAa,GAAG,CAAA,+KAAA,CAAiL;YA6B1L,eAAe,+BAAA,MAAA;MAJ5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAQE;;MAEG;MACK,QAAA,IAAO,CAAA,OAAA,GAAkB,EAAE;cAQ1B,IAAA,CAAA,WAAW,GAAG,CAAA,aAAA,EAAgB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAE;MAE3E,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;MAqC5B;UAnCC,kBAAkB,CAAC,CAAM,EAAE,MAAmB,EAAA;;cAC5C,CAAC,CAAC,eAAe,EAAE;cACnB,CAAA,EAAA,GAAA,IAAI,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAAC,MAAM,CAAC;MACjC,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;UAGzB,MAAM,GAAA;MACJ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;;UAGpC,MAAM,GAAA;cACJ,MAAM,IAAI,GAAG,CAAoB,iBAAA,EAAA,YAAY,CAAC,CAAC,CAAC,EAAE;cAElD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,aAAa,EAAA,YAAA,EAAa,WAAW,EAAC,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,EAAI,CAAA,EAEvI,IAAI,CAAC,UAAU,KACd,uEAAgB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAC,6BAA6B,EAAA,EACzG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAG;MACzB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;sBACjB,OAAO,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iCAAiC,GAAG;;uBACjD;MACL,gBAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,8BAA8B,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAC9H,MAAM,CAAC,KAAK,CACN;;MAGf,SAAC,CAAC,CACa,CAClB,CACI;;;;;;;;;;;;"}

package/dist/verdocs-web-sdk/{p-Dcfn37ar.system.js.map → p-DnpXTA0c.system.js.map}

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

package/dist/verdocs-web-sdk/{p-C8Gi1rag.system.js.map → p-DpcvJtUM.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-C8Gi1rag.system.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    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\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":[],"mappings":"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"}
+{"version":3,"file":"p-DpcvJtUM.system.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    text-transform: uppercase;\n    justify-content: center;\n    display: inline-flex;\n    align-items: center;\n    font-weight: 700;\n    cursor: pointer;\n    margin: 0;\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":[],"mappings":"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"}

package/dist/verdocs-web-sdk/{p-BZ9rCFg-.system.js.map → p-DqN8pWd6.system.js.map}

@@ -1 +1 @@
-{"version":3,"file":"p-BZ9rCFg-.system.js","sources":["src/components/controls/verdocs-switch/verdocs-switch.scss?tag=verdocs-switch","src/components/controls/verdocs-switch/verdocs-switch.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-switch {\n  font-family: $primary-font;\n\n  .switch {\n    display: inline-flex;\n    height: 24px;\n    width: 44px;\n    flex-shrink: 0;\n    align-items: center;\n    cursor: pointer;\n    border-radius: 12px;\n    border: transparent;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n\n  .switch.primary[data-state='checked'] {\n    background: $primary-color;\n  }\n\n  .switch.primary[data-state='unchecked'] {\n    background: $extra-light-border-color;\n  }\n\n  .switch.secondary[data-state='checked'] {\n    background: $secondary-color;\n  }\n\n  .switch.secondary[data-state='unchecked'] {\n    background: $extra-light-border-color;\n  }\n\n  .slider {\n    display: block;\n    width: 20px;\n    height: 20px;\n    border-radius: 20px;\n    background: #ffffff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n\n  .slider[data-state='checked'] {\n    transform: translateX(16px);\n  }\n\n  .slider[data-state='unchecked'] {\n    transform: translateX(-4px);\n  }\n\n  .switch.disabled.primary,\n  .switch.disabled.secondary {\n    cursor: not-allowed;\n    background: $dark-disabled-color;\n  }\n}\n","import {Component, Prop, h, EventEmitter, Event} from '@stencil/core';\n\n/**\n * Displays a toggle switch\n *\n * ```ts\n * <verdocs-switch checked={sendReminders} onCheckedChange={setSendReminders} />\n * ```\n */\n@Component({\n  tag: 'verdocs-switch',\n  styleUrl: 'verdocs-switch.scss',\n})\nexport class VerdocsSwitch {\n  @Prop({mutable: true}) checked: boolean = false;\n\n  /**\n   * Select purple or green treatments.\n   */\n  @Prop() theme: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @Event({composed: true}) checkedChange: EventEmitter<boolean>;\n\n  render() {\n    return (\n      <button\n        value=\"on\"\n        type=\"button\"\n        role=\"switch\"\n        class={`switch ${this.theme} ${this.disabled ? 'disabled' : ''}`}\n        data-state={this.checked ? 'checked' : 'unchecked'}\n        aria-checked={this.checked ? 'checked' : 'unchecked'}\n        onClick={() => {\n          if (!this.disabled) {\n            this.checked = !this.checked;\n            this.checkedChange?.emit(this.checked);\n          }\n        }}\n      >\n        <span data-state={this.checked ? 'checked' : 'unchecked'} class=\"slider\"></span>\n      </button>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,gBAAgB,GAAG,44EAA44E;;YCax5E,aAAa,6BAAA,MAAA;MAJ1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAKyB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;MAE/C;;MAEG;MACK,QAAA,IAAK,CAAA,KAAA,GAA4B,SAAS;MAElD;;MAEG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;MAwBlC;UApBC,MAAM,GAAA;MACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,YAAA,EACpD,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAA,cAAA,EACpC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EACpD,OAAO,EAAE,MAAK;;MACZ,gBAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,oBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;MAC5B,oBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;MAE1C,aAAC,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAE,KAAK,EAAC,QAAQ,EAAQ,CAAA,CACzE;;;;;;;;;;;"}
+{"version":3,"file":"p-DqN8pWd6.system.js","sources":["src/components/controls/verdocs-switch/verdocs-switch.scss?tag=verdocs-switch","src/components/controls/verdocs-switch/verdocs-switch.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-switch {\n  font-family: $primary-font;\n\n  .switch {\n    display: inline-flex;\n    height: 24px;\n    width: 44px;\n    flex-shrink: 0;\n    align-items: center;\n    cursor: pointer;\n    border-radius: 12px;\n    border: transparent;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n\n  .switch.primary[data-state='checked'] {\n    background: $primary-color;\n  }\n\n  .switch.primary[data-state='unchecked'] {\n    background: $extra-light-border-color;\n  }\n\n  .switch.secondary[data-state='checked'] {\n    background: $secondary-color;\n  }\n\n  .switch.secondary[data-state='unchecked'] {\n    background: $extra-light-border-color;\n  }\n\n  .slider {\n    display: block;\n    width: 20px;\n    height: 20px;\n    border-radius: 20px;\n    background: #ffffff;\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n\n  .slider[data-state='checked'] {\n    transform: translateX(16px);\n  }\n\n  .slider[data-state='unchecked'] {\n    transform: translateX(-4px);\n  }\n\n  .switch.disabled.primary,\n  .switch.disabled.secondary {\n    cursor: not-allowed;\n    background: $dark-disabled-color;\n  }\n}\n","import {Component, Prop, h, EventEmitter, Event} from '@stencil/core';\n\n/**\n * Displays a toggle switch\n *\n * ```ts\n * <verdocs-switch checked={sendReminders} onCheckedChange={setSendReminders} />\n * ```\n */\n@Component({\n  tag: 'verdocs-switch',\n  styleUrl: 'verdocs-switch.scss',\n})\nexport class VerdocsSwitch {\n  @Prop({mutable: true}) checked: boolean = false;\n\n  /**\n   * Select purple or green treatments.\n   */\n  @Prop() theme: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @Event({composed: true}) checkedChange: EventEmitter<boolean>;\n\n  render() {\n    return (\n      <button\n        value=\"on\"\n        type=\"button\"\n        role=\"switch\"\n        class={`switch ${this.theme} ${this.disabled ? 'disabled' : ''}`}\n        data-state={this.checked ? 'checked' : 'unchecked'}\n        aria-checked={this.checked ? 'checked' : 'unchecked'}\n        onClick={() => {\n          if (!this.disabled) {\n            this.checked = !this.checked;\n            this.checkedChange?.emit(this.checked);\n          }\n        }}\n      >\n        <span data-state={this.checked ? 'checked' : 'unchecked'} class=\"slider\"></span>\n      </button>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;MAAA,MAAM,gBAAgB,GAAG,44EAA44E;;YCax5E,aAAa,6BAAA,MAAA;MAJ1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;MAKyB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;MAE/C;;MAEG;MACK,QAAA,IAAK,CAAA,KAAA,GAA4B,SAAS;MAElD;;MAEG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;MAwBlC;UApBC,MAAM,GAAA;MACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,YAAA,EACpD,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAA,cAAA,EACpC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EACpD,OAAO,EAAE,MAAK;;MACZ,gBAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,oBAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;MAC5B,oBAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;MAE1C,aAAC,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAkB,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAE,KAAK,EAAC,QAAQ,EAAQ,CAAA,CACzE;;;;;;;;;;;"}