@verdocs/web-sdk 1.9.16 → 1.9.20

package/dist/verdocs-web-sdk/p-b73576e6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","[object Object]","this","handleShow","console","log","_a","dialog","remove","e","tempSignature","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","name","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","redrawSignature","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","measureText","textAlign","textBaseline","fillText","target","stopPropagation","preventDefault","cancel","data","toDataURL","next","handleCancel","handleNameChange","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","popperInstance","createPopper","iconEl","tooltip","destroy","update","catch","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value && <img src={this.tempSignature || settings.base64} alt=\"Signature\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\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.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\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 id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}