@nylas/web-elements 0.0.0-canary-20251006194336 → 0.0.0-canary-20251007161342

package/dist/cjs/info-icon.tooltip-component.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-icon.tooltip-component.entry.cjs.js","sources":["src/common/icons/icon.css?tag=info-icon&encapsulation=scoped","src/common/icons/info.tsx","src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'info-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class InfoIcon {\n  @Prop() width: string = '14';\n  @Prop() height: string = '14';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 5px 0;\n  position: absolute;\n  z-index: 1;\n  transition: opacity 0.3s;\n  padding: 0.5rem 1rem;\n  max-width: 200px;\n  width: max-content;\n}\n\n/* Position-specific styles */\n.tooltip-content.top {\n  bottom: 0;\n  left: 0;\n  margin-bottom: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.right {\n  top: 50%;\n  left: 0%;\n  margin-left: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-content.bottom {\n  top: 0;\n  left: 0;\n  margin-top: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.left {\n  top: 50%;\n  right: 0%;\n  margin-right: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-container:hover .tooltip-content,\n.tooltip-container:focus-within .tooltip-content {\n  display: inline;\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  top: -0.75rem;\n  left: 50%;\n  transform: rotate(180deg);\n  border-width: 6px;\n  border-style: solid;\n  border-color: var(--nylas-base-900) transparent transparent transparent;\n}\n\n.tooltip-content {\n  &.top::after {\n    top: 100%;\n    left: 50%;\n    transform: rotate(0deg);\n  }\n\n  &.bottom::after {\n    top: -0.75rem;\n    left: 50%;\n    transform: rotate(180deg);\n  }\n\n  &.left::after {\n    top: 47.5%;\n    left: 100%;\n    transform: rotate(270deg);\n  }\n\n  &.right::after {\n    top: 47.5%;\n    left: -0.75rem;\n    transform: rotate(90deg);\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n\n  showTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'inline';\n  }\n\n  hideTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'none';\n  }\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span class=\"info-icon\" tabindex=\"0\" onFocus={this.showTooltip.bind(this)} onBlur={this.hideTooltip.bind(this)}>\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span class={`tooltip-content ${this.position}`} part=\"tc__content\">\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,+BAA+B;;MCOlC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;AACpB,QAAA,IAAM,CAAA,MAAA,GAAW,IAAI;AAY9B;IAVC,MAAM,GAAA;QACJ,QACEA,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzFA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wmBAAwmB,EAAA,CAC1mB,CACE;;;;;AClBZ,MAAM,mBAAmB,GAAG,q4GAAq4G;;MCap5G,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAqBjE;AAnBC,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ;;AAG7F,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;IAE3F,MAAM,GAAA;QACJ,QACEA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC5GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAA,GAAA,CAAS,CAC7B,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAE,IAAI,EAAC,aAAa,EAAA,EACjEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,2BAA4B,CACnD,CACH;;;;;;;;;"}
+{"version":3,"file":"info-icon.tooltip-component.entry.cjs.js","sources":["src/common/icons/icon.css?tag=info-icon&encapsulation=scoped","src/common/icons/info.tsx","src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'info-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class InfoIcon {\n  @Prop() width: string = '14';\n  @Prop() height: string = '14';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.info-icon {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  &:active {\n    opacity: 0.6;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--nylas-primary-500, #2563eb);\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &[aria-pressed='true'] {\n    opacity: 1;\n    background-color: var(--nylas-primary-50, rgba(37, 99, 235, 0.1));\n    border-radius: 4px;\n  }\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 0.5rem 1rem;\n  max-width: 300px;\n  width: max-content;\n  z-index: 9999;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  pointer-events: none;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n  &.tooltip-visible {\n    display: block;\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  border-width: 6px;\n  border-style: solid;\n}\n\n.tooltip-content {\n  &.top::after {\n    bottom: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-color: var(--nylas-base-800) transparent transparent transparent;\n  }\n\n  &.bottom::after {\n    top: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-color: transparent transparent var(--nylas-base-800) transparent;\n  }\n\n  &.left::after {\n    right: -12px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-color: transparent transparent transparent var(--nylas-base-800);\n  }\n\n  &.right::after {\n    left: -12px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-color: transparent var(--nylas-base-800) transparent transparent;\n  }\n}\n\n/* Animation for tooltip appearance */\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.tooltip-visible {\n  animation: tooltip-fade-in 0.15s ease-out;\n}\n","import { Component, Element, Prop, State, h, Listen } from '@stencil/core';\n\ntype TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\ninterface PositionCoordinates {\n  top: number;\n  left: number;\n  position: TooltipPosition;\n}\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The preferred position of the tooltip.\n   * The tooltip will attempt to use this position but will automatically adjust if it would be cut off.\n   */\n  @Prop() position: TooltipPosition = 'bottom';\n\n  /**\n   * Controls the visibility of the tooltip.\n   */\n  @State() isVisible = false;\n\n  /**\n   * Tracks if the tooltip is pinned open via click.\n   */\n  @State() isPinned = false;\n\n  /**\n   * The actual position being used after boundary detection.\n   */\n  @State() actualPosition: TooltipPosition = this.position;\n\n  /**\n   * Calculated position coordinates for the tooltip.\n   */\n  @State() tooltipStyle: { top: string; left: string } = { top: '0', left: '0' };\n\n  private tooltipContentEl?: HTMLElement;\n  private tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Listen for Escape key to close tooltip\n   */\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.isVisible) {\n      this.isPinned = false;\n      this.hideTooltip();\n    }\n  }\n\n  /**\n   * Listen for clicks outside to close pinned tooltip\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.isPinned || !this.isVisible) {\n      return;\n    }\n\n    // Check if click is outside the component\n    const clickedInside = this.el.contains(event.target as Node);\n    if (!clickedInside) {\n      this.isPinned = false;\n      this.hideTooltip();\n    }\n  }\n\n  /**\n   * Calculate the best position for the tooltip to avoid cutoff\n   */\n  private calculatePosition(): PositionCoordinates {\n    if (!this.tooltipContentEl) {\n      return { top: 0, left: 0, position: this.position };\n    }\n\n    const triggerEl = this.el.shadowRoot?.querySelector('.info-icon') as HTMLElement;\n    if (!triggerEl) {\n      return { top: 0, left: 0, position: this.position };\n    }\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const tooltipRect = this.tooltipContentEl.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Calculate available space in each direction\n    const spaceAbove = triggerRect.top;\n    const spaceBelow = viewportHeight - triggerRect.bottom;\n    const spaceLeft = triggerRect.left;\n    const spaceRight = viewportWidth - triggerRect.right;\n\n    // Determine the best position based on available space\n    let bestPosition = this.position;\n    const positions: TooltipPosition[] = ['top', 'bottom', 'left', 'right'];\n\n    // Check if preferred position fits\n    const fitsInPreferred = this.checkPositionFits(this.position, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n\n    if (!fitsInPreferred) {\n      // Find alternative position with most space\n      bestPosition = this.findBestAlternativePosition(positions, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n    }\n\n    // Calculate coordinates based on the chosen position\n    const coordinates = this.getPositionCoordinates(bestPosition, triggerRect, tooltipRect, viewportWidth, viewportHeight);\n\n    return { ...coordinates, position: bestPosition };\n  }\n\n  /**\n   * Check if tooltip fits in a given position\n   */\n  private checkPositionFits(\n    position: TooltipPosition,\n    _triggerRect: DOMRect,\n    tooltipRect: DOMRect,\n    spaceAbove: number,\n    spaceBelow: number,\n    spaceLeft: number,\n    spaceRight: number,\n  ): boolean {\n    const margin = 20; // 1.25rem margin + arrow\n\n    switch (position) {\n      case 'top':\n        return spaceAbove >= tooltipRect.height + margin;\n      case 'bottom':\n        return spaceBelow >= tooltipRect.height + margin;\n      case 'left':\n        return spaceLeft >= tooltipRect.width + margin;\n      case 'right':\n        return spaceRight >= tooltipRect.width + margin;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Find the best alternative position with the most available space\n   */\n  private findBestAlternativePosition(\n    positions: TooltipPosition[],\n    _triggerRect: DOMRect,\n    _tooltipRect: DOMRect,\n    spaceAbove: number,\n    spaceBelow: number,\n    spaceLeft: number,\n    spaceRight: number,\n  ): TooltipPosition {\n    const spaces = {\n      top: spaceAbove,\n      bottom: spaceBelow,\n      left: spaceLeft,\n      right: spaceRight,\n    };\n\n    // Sort positions by available space\n    const sortedPositions = positions.sort((a, b) => spaces[b] - spaces[a]);\n\n    // Return the position with the most space\n    return sortedPositions[0];\n  }\n\n  /**\n   * Get position coordinates for the tooltip\n   */\n  private getPositionCoordinates(\n    position: TooltipPosition,\n    triggerRect: DOMRect,\n    tooltipRect: DOMRect,\n    viewportWidth: number,\n    viewportHeight: number,\n  ): { top: number; left: number } {\n    let top = 0;\n    let left = 0;\n    const margin = 8; // Small margin for spacing\n\n    switch (position) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - margin;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + margin;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.left - tooltipRect.width - margin;\n        break;\n      case 'right':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.right + margin;\n        break;\n    }\n\n    // Ensure tooltip stays within viewport bounds\n    left = Math.max(margin, Math.min(left, viewportWidth - tooltipRect.width - margin));\n    top = Math.max(margin, Math.min(top, viewportHeight - tooltipRect.height - margin));\n\n    return { top, left };\n  }\n\n  /**\n   * Show the tooltip with position calculation\n   */\n  private showTooltip() {\n    this.isVisible = true;\n\n    // Wait for next frame to ensure tooltip is rendered\n    requestAnimationFrame(() => {\n      const position = this.calculatePosition();\n      this.actualPosition = position.position;\n      this.tooltipStyle = {\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n      };\n    });\n  }\n\n  /**\n   * Hide the tooltip\n   */\n  private hideTooltip() {\n    // Don't hide if tooltip is pinned\n    if (this.isPinned) {\n      return;\n    }\n    this.isVisible = false;\n  }\n\n  /**\n   * Handle click to pin/unpin tooltip\n   */\n  private handleClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.isPinned = !this.isPinned;\n\n    if (this.isPinned) {\n      this.showTooltip();\n    } else {\n      this.isVisible = false;\n    }\n  };\n\n  /**\n   * Handle mouse enter\n   */\n  private handleMouseEnter = () => {\n    if (!this.isPinned) {\n      this.showTooltip();\n    }\n  };\n\n  /**\n   * Handle mouse leave\n   */\n  private handleMouseLeave = () => {\n    this.hideTooltip();\n  };\n\n  /**\n   * Handle focus\n   */\n  private handleFocus = () => {\n    if (!this.isPinned) {\n      this.showTooltip();\n    }\n  };\n\n  /**\n   * Handle blur\n   */\n  private handleBlur = () => {\n    this.hideTooltip();\n  };\n\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span\n          class=\"info-icon\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-describedby={this.tooltipId}\n          aria-expanded={this.isVisible ? 'true' : 'false'}\n          aria-pressed={this.isPinned ? 'true' : 'false'}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span\n          ref={el => (this.tooltipContentEl = el)}\n          id={this.tooltipId}\n          role=\"tooltip\"\n          aria-hidden={!this.isVisible ? 'true' : 'false'}\n          class={{\n            'tooltip-content': true,\n            'tooltip-visible': this.isVisible,\n            [this.actualPosition]: true,\n          }}\n          style={\n            this.isVisible\n              ? {\n                  position: 'fixed',\n                  top: this.tooltipStyle.top,\n                  left: this.tooltipStyle.left,\n                }\n              : {}\n          }\n          part=\"tc__content\"\n        >\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/dist/cjs/info-icon_2.cjs.entry.js

@@ -16,21 +16,165 @@ const InfoIcon = class {
 };
 InfoIcon.style = iconCss;
 
-const tooltipComponentCss = ".tooltip-container{position:relative;display:flex;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:5px 0;position:absolute;z-index:1;transition:opacity 0.3s;padding:0.5rem 1rem;max-width:200px;width:max-content}.tooltip-content.top{bottom:0;left:0;margin-bottom:1.25rem;transform:translateX(-50%)}.tooltip-content.right{top:50%;left:0%;margin-left:1.25rem;transform:translateY(-50%)}.tooltip-content.bottom{top:0;left:0;margin-top:1.25rem;transform:translateX(-50%)}.tooltip-content.left{top:50%;right:0%;margin-right:1.25rem;transform:translateY(-50%)}.tooltip-container:hover .tooltip-content,.tooltip-container:focus-within .tooltip-content{display:inline}.tooltip-content::after{content:\"\";position:absolute;top:-0.75rem;left:50%;transform:rotate(180deg);border-width:6px;border-style:solid;border-color:var(--nylas-base-900) transparent transparent transparent}.tooltip-content.top::after{top:100%;left:50%;transform:rotate(0deg)}.tooltip-content.bottom::after{top:-0.75rem;left:50%;transform:rotate(180deg)}.tooltip-content.left::after{top:47.5%;left:100%;transform:rotate(270deg)}.tooltip-content.right::after{top:47.5%;left:-0.75rem;transform:rotate(90deg)}";
+const tooltipComponentCss = ".tooltip-container{position:relative;display:flex;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-50:#ffeae8;--nylas-error-100:#ffc5bf;--nylas-error-200:#fecaca;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-color-blue-100:#e0e6f9;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif;--nylas-color-black:#000000;--nylas-color-grey-900:#2c2c2c;--nylas-color-grey-800:#4b4b4b;--nylas-color-grey-700:#6e6e6e;--nylas-color-grey-600:#8e8e8e;--nylas-color-grey-500:#b3b3b3;--nylas-color-grey-400:#cacaca;--nylas-color-grey-300:#e1e1e1;--nylas-color-grey-200:#eaeaea;--nylas-color-grey-100:#f5f5f5;--nylas-color-grey-50:#fbfcfe;--nylas-color-white:#ffffff;--nylas-color-red-900:#992222;--nylas-color-red-700:#cc4841;--nylas-color-red-500:#ff786a;--nylas-color-red-300:#ffa79e;--nylas-color-red-100:#ffc5bf;--nylas-color-red-50:#ffeae8;--nylas-color-blue-900:#213571;--nylas-color-blue-700:#314fa9;--nylas-color-blue-500:#4169e1;--nylas-color-blue-300:#bdccf9;--nylas-color-blue-100:#e0e6f9;--nylas-color-blue-50:#f6f8fd;--nylas-color-yellow-900:#7c6506;--nylas-color-yellow-700:#c29f09;--nylas-color-yellow-500:#f7c90b;--nylas-color-yellow-300:#f9de70;--nylas-color-yellow-100:#fceba9;--nylas-color-yellow-50:#fdf4ce;--nylas-color-green-900:#0e6b60;--nylas-color-green-700:#16a392;--nylas-color-green-500:#17c3b2;--nylas-color-green-300:#74dbd1;--nylas-color-green-100:#a2e7e0;--nylas-color-green-50:#d1f3f0;--nylas-color-purple-900:#643554;--nylas-color-purple-700:#954f7d;--nylas-color-purple-500:#c769a7;--nylas-color-purple-300:#dda5ca;--nylas-color-purple-100:#e0bdd6;--nylas-color-purple-50:#e9dde5;--nylas-color-sky-900:#20698f;--nylas-color-sky-700:#2b8fc2;--nylas-color-sky-500:#6dceff;--nylas-color-sky-300:#8fdaff;--nylas-color-sky-100:#b8e7ff;--nylas-color-sky-50:#d9f2ff}.info-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;outline:none;transition:opacity 0.2s ease-in-out}.info-icon:hover{opacity:0.8}.info-icon:active{opacity:0.6}.info-icon:focus-visible{outline:2px solid var(--nylas-primary-500, #2563eb);outline-offset:2px;border-radius:2px}.info-icon[aria-pressed=true]{opacity:1;background-color:var(--nylas-primary-50, rgba(37, 99, 235, 0.1));border-radius:4px}.tooltip-content{display:none;background-color:var(--nylas-base-800);color:var(--nylas-base-0);text-align:left;border-radius:6px;padding:0.5rem 1rem;max-width:300px;width:max-content;z-index:9999;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.tooltip-content.tooltip-visible{display:block;opacity:1;pointer-events:auto}.tooltip-content::after{content:\"\";position:absolute;border-width:6px;border-style:solid}.tooltip-content.top::after{bottom:-12px;left:50%;transform:translateX(-50%);border-color:var(--nylas-base-800) transparent transparent transparent}.tooltip-content.bottom::after{top:-12px;left:50%;transform:translateX(-50%);border-color:transparent transparent var(--nylas-base-800) transparent}.tooltip-content.left::after{right:-12px;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent var(--nylas-base-800)}.tooltip-content.right::after{left:-12px;top:50%;transform:translateY(-50%);border-color:transparent var(--nylas-base-800) transparent transparent}@keyframes tooltip-fade-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.tooltip-visible{animation:tooltip-fade-in 0.15s ease-out}";
 
 const TooltipComponent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.position = 'bottom';
+        this.isVisible = false;
+        this.isPinned = false;
+        this.actualPosition = this.position;
+        this.tooltipStyle = { top: '0', left: '0' };
+        this.tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+        this.handleClick = (event) => {
+            event.stopPropagation();
+            this.isPinned = !this.isPinned;
+            if (this.isPinned) {
+                this.showTooltip();
+            }
+            else {
+                this.isVisible = false;
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (!this.isPinned) {
+                this.showTooltip();
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.hideTooltip();
+        };
+        this.handleFocus = () => {
+            if (!this.isPinned) {
+                this.showTooltip();
+            }
+        };
+        this.handleBlur = () => {
+            this.hideTooltip();
+        };
     }
-    showTooltip(event) {
-        event.target.nextElementSibling.style.display = 'inline';
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isVisible) {
+            this.isPinned = false;
+            this.hideTooltip();
+        }
     }
-    hideTooltip(event) {
-        event.target.nextElementSibling.style.display = 'none';
+    handleDocumentClick(event) {
+        if (!this.isPinned || !this.isVisible) {
+            return;
+        }
+        const clickedInside = this.el.contains(event.target);
+        if (!clickedInside) {
+            this.isPinned = false;
+            this.hideTooltip();
+        }
+    }
+    calculatePosition() {
+        if (!this.tooltipContentEl) {
+            return { top: 0, left: 0, position: this.position };
+        }
+        const triggerEl = this.el.shadowRoot?.querySelector('.info-icon');
+        if (!triggerEl) {
+            return { top: 0, left: 0, position: this.position };
+        }
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const tooltipRect = this.tooltipContentEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const spaceAbove = triggerRect.top;
+        const spaceBelow = viewportHeight - triggerRect.bottom;
+        const spaceLeft = triggerRect.left;
+        const spaceRight = viewportWidth - triggerRect.right;
+        let bestPosition = this.position;
+        const positions = ['top', 'bottom', 'left', 'right'];
+        const fitsInPreferred = this.checkPositionFits(this.position, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);
+        if (!fitsInPreferred) {
+            bestPosition = this.findBestAlternativePosition(positions, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);
+        }
+        const coordinates = this.getPositionCoordinates(bestPosition, triggerRect, tooltipRect, viewportWidth, viewportHeight);
+        return { ...coordinates, position: bestPosition };
+    }
+    checkPositionFits(position, _triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight) {
+        const margin = 20;
+        switch (position) {
+            case 'top':
+                return spaceAbove >= tooltipRect.height + margin;
+            case 'bottom':
+                return spaceBelow >= tooltipRect.height + margin;
+            case 'left':
+                return spaceLeft >= tooltipRect.width + margin;
+            case 'right':
+                return spaceRight >= tooltipRect.width + margin;
+            default:
+                return false;
+        }
+    }
+    findBestAlternativePosition(positions, _triggerRect, _tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight) {
+        const spaces = {
+            top: spaceAbove,
+            bottom: spaceBelow,
+            left: spaceLeft,
+            right: spaceRight,
+        };
+        const sortedPositions = positions.sort((a, b) => spaces[b] - spaces[a]);
+        return sortedPositions[0];
+    }
+    getPositionCoordinates(position, triggerRect, tooltipRect, viewportWidth, viewportHeight) {
+        let top = 0;
+        let left = 0;
+        const margin = 8;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - margin;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + margin;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.left - tooltipRect.width - margin;
+                break;
+            case 'right':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.right + margin;
+                break;
+        }
+        left = Math.max(margin, Math.min(left, viewportWidth - tooltipRect.width - margin));
+        top = Math.max(margin, Math.min(top, viewportHeight - tooltipRect.height - margin));
+        return { top, left };
+    }
+    showTooltip() {
+        this.isVisible = true;
+        requestAnimationFrame(() => {
+            const position = this.calculatePosition();
+            this.actualPosition = position.position;
+            this.tooltipStyle = {
+                top: `${position.top}px`,
+                left: `${position.left}px`,
+            };
+        });
+    }
+    hideTooltip() {
+        if (this.isPinned) {
+            return;
+        }
+        this.isVisible = false;
     }
     render() {
-        return (index.h("div", { key: '2a4f34fe50836fd863f30d037de2df43238f04da', class: "tooltip-container", part: "tc__container" }, index.h("span", { key: '90e5c2cbcd0f911f44c1913f8bb44a4d7b9db65c', class: "info-icon", tabindex: "0", onFocus: this.showTooltip.bind(this), onBlur: this.hideTooltip.bind(this) }, index.h("slot", { key: '8173d93c63026171627fc99be32c6f94d4e6f45b', name: "tooltip-icon" }, "i")), index.h("span", { key: '375781fe085a1bea6d998d5b9cb8516b77acb744', class: `tooltip-content ${this.position}`, part: "tc__content" }, index.h("slot", { key: '3d7f984edbd2467b03ec1da7918a57ec6250b98e', name: "tooltip-content" }, "This is a help text."))));
+        return (index.h("div", { key: 'd82dac77b548a6d6ca9650aa429af409985e3bf4', class: "tooltip-container", part: "tc__container" }, index.h("span", { key: 'eb857c7fd2dbccede22e082fc348ab368925bced', class: "info-icon", tabindex: "0", role: "button", "aria-describedby": this.tooltipId, "aria-expanded": this.isVisible ? 'true' : 'false', "aria-pressed": this.isPinned ? 'true' : 'false', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("slot", { key: '339815177903ecda6f7dd9087e29ba7318646241', name: "tooltip-icon" }, "i")), index.h("span", { key: '2aeb712b6dfc88326fc09161d64b79e4e4aec4bb', ref: el => (this.tooltipContentEl = el), id: this.tooltipId, role: "tooltip", "aria-hidden": !this.isVisible ? 'true' : 'false', class: {
+                'tooltip-content': true,
+                'tooltip-visible': this.isVisible,
+                [this.actualPosition]: true,
+            }, style: this.isVisible
+                ? {
+                    position: 'fixed',
+                    top: this.tooltipStyle.top,
+                    left: this.tooltipStyle.left,
+                }
+                : {}, part: "tc__content" }, index.h("slot", { key: 'f777710f0713bc2ce34ad1a5db207bb249ff38f7', name: "tooltip-content" }, "This is a help text."))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/info-icon_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"info-icon.tooltip-component.entry.cjs.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,+BAA+B;;MCOlC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI;AACpB,QAAA,IAAM,CAAA,MAAA,GAAW,IAAI;AAY9B;IAVC,MAAM,GAAA;QACJ,QACEA,kEAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACzFA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wmBAAwmB,EAAA,CAC1mB,CACE;;;;;AClBZ,MAAM,mBAAmB,GAAG,q4GAAq4G;;MCap5G,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAwC,QAAQ;AAqBjE;AAnBC,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ;;AAG7F,IAAA,WAAW,CAAC,KAAiB,EAAA;QACzB,KAAK,CAAC,MAAsB,CAAC,kBAAmC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;;IAE3F,MAAM,GAAA;QACJ,QACEA,kEAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,eAAe,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAC,GAAG,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EAC5GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAA,GAAA,CAAS,CAC7B,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,EAAE,IAAI,EAAC,aAAa,EAAA,EACjEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,2BAA4B,CACnD,CACH;;;;;;;;;","names":["h"],"sources":["src/common/icons/icon.css?tag=info-icon&encapsulation=scoped","src/common/icons/info.tsx","src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'info-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class InfoIcon {\n  @Prop() width: string = '14';\n  @Prop() height: string = '14';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 5px 0;\n  position: absolute;\n  z-index: 1;\n  transition: opacity 0.3s;\n  padding: 0.5rem 1rem;\n  max-width: 200px;\n  width: max-content;\n}\n\n/* Position-specific styles */\n.tooltip-content.top {\n  bottom: 0;\n  left: 0;\n  margin-bottom: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.right {\n  top: 50%;\n  left: 0%;\n  margin-left: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-content.bottom {\n  top: 0;\n  left: 0;\n  margin-top: 1.25rem;\n  transform: translateX(-50%);\n}\n\n.tooltip-content.left {\n  top: 50%;\n  right: 0%;\n  margin-right: 1.25rem;\n  transform: translateY(-50%);\n}\n\n.tooltip-container:hover .tooltip-content,\n.tooltip-container:focus-within .tooltip-content {\n  display: inline;\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  top: -0.75rem;\n  left: 50%;\n  transform: rotate(180deg);\n  border-width: 6px;\n  border-style: solid;\n  border-color: var(--nylas-base-900) transparent transparent transparent;\n}\n\n.tooltip-content {\n  &.top::after {\n    top: 100%;\n    left: 50%;\n    transform: rotate(0deg);\n  }\n\n  &.bottom::after {\n    top: -0.75rem;\n    left: 50%;\n    transform: rotate(180deg);\n  }\n\n  &.left::after {\n    top: 47.5%;\n    left: 100%;\n    transform: rotate(270deg);\n  }\n\n  &.right::after {\n    top: 47.5%;\n    left: -0.75rem;\n    transform: rotate(90deg);\n  }\n}\n","import { Component, Element, Prop, h } from '@stencil/core';\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n  /**\n   * The position of the tooltip.\n   */\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n\n  showTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'inline';\n  }\n\n  hideTooltip(event: FocusEvent) {\n    ((event.target as HTMLElement).nextElementSibling as HTMLElement)!.style.display = 'none';\n  }\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span class=\"info-icon\" tabindex=\"0\" onFocus={this.showTooltip.bind(this)} onBlur={this.hideTooltip.bind(this)}>\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span class={`tooltip-content ${this.position}`} part=\"tc__content\">\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"info-icon.tooltip-component.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/common/icons/icon.css?tag=info-icon&encapsulation=scoped","src/common/icons/info.tsx","src/components/design-system/tooltip-component/tooltip-component.scss?tag=tooltip-component&encapsulation=shadow","src/components/design-system/tooltip-component/toolitp-component.tsx"],"sourcesContent":[":host {\n  display: flex;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'info-icon',\n  styleUrl: 'icon.css',\n  scoped: true,\n})\nexport class InfoIcon {\n  @Prop() width: string = '14';\n  @Prop() height: string = '14';\n\n  render() {\n    return (\n      <svg width={this.width} height={this.height} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          fill=\"currentColor\"\n          d=\"M6.5 5.5C6.77614 5.5 7 5.72386 7 6V9C7 9.27614 6.77614 9.5 6.5 9.5C6.22386 9.5 6 9.27614 6 9V6C6 5.72386 6.22386 5.5 6.5 5.5ZM6.50001 4.74907C6.91369 4.74907 7.24905 4.41371 7.24905 4.00003C7.24905 3.58635 6.91369 3.251 6.50001 3.251C6.08633 3.251 5.75098 3.58635 5.75098 4.00003C5.75098 4.41371 6.08633 4.74907 6.50001 4.74907ZM0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5C9.81371 0.5 12.5 3.18629 12.5 6.5C12.5 9.81371 9.81371 12.5 6.5 12.5C3.18629 12.5 0.5 9.81371 0.5 6.5ZM6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5Z\"\n        />\n      </svg>\n    );\n  }\n}\n","@use '../../../common/styles/variables' as *;\n\n.tooltip-container {\n  position: relative;\n  display: flex;\n  @include default-css-variables;\n}\n\n.info-icon {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  transition: opacity 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 0.8;\n  }\n\n  &:active {\n    opacity: 0.6;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--nylas-primary-500, #2563eb);\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &[aria-pressed='true'] {\n    opacity: 1;\n    background-color: var(--nylas-primary-50, rgba(37, 99, 235, 0.1));\n    border-radius: 4px;\n  }\n}\n\n.tooltip-content {\n  display: none;\n  background-color: var(--nylas-base-800);\n  color: var(--nylas-base-0);\n  text-align: left;\n  border-radius: 6px;\n  padding: 0.5rem 1rem;\n  max-width: 300px;\n  width: max-content;\n  z-index: 9999;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  pointer-events: none;\n  box-shadow:\n    0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n  &.tooltip-visible {\n    display: block;\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n/* Arrow styles */\n.tooltip-content::after {\n  content: '';\n  position: absolute;\n  border-width: 6px;\n  border-style: solid;\n}\n\n.tooltip-content {\n  &.top::after {\n    bottom: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-color: var(--nylas-base-800) transparent transparent transparent;\n  }\n\n  &.bottom::after {\n    top: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-color: transparent transparent var(--nylas-base-800) transparent;\n  }\n\n  &.left::after {\n    right: -12px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-color: transparent transparent transparent var(--nylas-base-800);\n  }\n\n  &.right::after {\n    left: -12px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-color: transparent var(--nylas-base-800) transparent transparent;\n  }\n}\n\n/* Animation for tooltip appearance */\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.tooltip-visible {\n  animation: tooltip-fade-in 0.15s ease-out;\n}\n","import { Component, Element, Prop, State, h, Listen } from '@stencil/core';\n\ntype TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\ninterface PositionCoordinates {\n  top: number;\n  left: number;\n  position: TooltipPosition;\n}\n\n/**\n * The `tooltip-component` component is a UI component that displays a tooltip.\n * It automatically adjusts its position to avoid being cut off by viewport or container boundaries.\n *\n * @part tc__container - The tooltip container.\n * @part tc__content - The tooltip content.\n */\n@Component({\n  tag: 'tooltip-component',\n  styleUrl: 'tooltip-component.scss',\n  shadow: true,\n})\nexport class TooltipComponent {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The preferred position of the tooltip.\n   * The tooltip will attempt to use this position but will automatically adjust if it would be cut off.\n   */\n  @Prop() position: TooltipPosition = 'bottom';\n\n  /**\n   * Controls the visibility of the tooltip.\n   */\n  @State() isVisible = false;\n\n  /**\n   * Tracks if the tooltip is pinned open via click.\n   */\n  @State() isPinned = false;\n\n  /**\n   * The actual position being used after boundary detection.\n   */\n  @State() actualPosition: TooltipPosition = this.position;\n\n  /**\n   * Calculated position coordinates for the tooltip.\n   */\n  @State() tooltipStyle: { top: string; left: string } = { top: '0', left: '0' };\n\n  private tooltipContentEl?: HTMLElement;\n  private tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;\n\n  /**\n   * Listen for Escape key to close tooltip\n   */\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.isVisible) {\n      this.isPinned = false;\n      this.hideTooltip();\n    }\n  }\n\n  /**\n   * Listen for clicks outside to close pinned tooltip\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.isPinned || !this.isVisible) {\n      return;\n    }\n\n    // Check if click is outside the component\n    const clickedInside = this.el.contains(event.target as Node);\n    if (!clickedInside) {\n      this.isPinned = false;\n      this.hideTooltip();\n    }\n  }\n\n  /**\n   * Calculate the best position for the tooltip to avoid cutoff\n   */\n  private calculatePosition(): PositionCoordinates {\n    if (!this.tooltipContentEl) {\n      return { top: 0, left: 0, position: this.position };\n    }\n\n    const triggerEl = this.el.shadowRoot?.querySelector('.info-icon') as HTMLElement;\n    if (!triggerEl) {\n      return { top: 0, left: 0, position: this.position };\n    }\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const tooltipRect = this.tooltipContentEl.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Calculate available space in each direction\n    const spaceAbove = triggerRect.top;\n    const spaceBelow = viewportHeight - triggerRect.bottom;\n    const spaceLeft = triggerRect.left;\n    const spaceRight = viewportWidth - triggerRect.right;\n\n    // Determine the best position based on available space\n    let bestPosition = this.position;\n    const positions: TooltipPosition[] = ['top', 'bottom', 'left', 'right'];\n\n    // Check if preferred position fits\n    const fitsInPreferred = this.checkPositionFits(this.position, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n\n    if (!fitsInPreferred) {\n      // Find alternative position with most space\n      bestPosition = this.findBestAlternativePosition(positions, triggerRect, tooltipRect, spaceAbove, spaceBelow, spaceLeft, spaceRight);\n    }\n\n    // Calculate coordinates based on the chosen position\n    const coordinates = this.getPositionCoordinates(bestPosition, triggerRect, tooltipRect, viewportWidth, viewportHeight);\n\n    return { ...coordinates, position: bestPosition };\n  }\n\n  /**\n   * Check if tooltip fits in a given position\n   */\n  private checkPositionFits(\n    position: TooltipPosition,\n    _triggerRect: DOMRect,\n    tooltipRect: DOMRect,\n    spaceAbove: number,\n    spaceBelow: number,\n    spaceLeft: number,\n    spaceRight: number,\n  ): boolean {\n    const margin = 20; // 1.25rem margin + arrow\n\n    switch (position) {\n      case 'top':\n        return spaceAbove >= tooltipRect.height + margin;\n      case 'bottom':\n        return spaceBelow >= tooltipRect.height + margin;\n      case 'left':\n        return spaceLeft >= tooltipRect.width + margin;\n      case 'right':\n        return spaceRight >= tooltipRect.width + margin;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Find the best alternative position with the most available space\n   */\n  private findBestAlternativePosition(\n    positions: TooltipPosition[],\n    _triggerRect: DOMRect,\n    _tooltipRect: DOMRect,\n    spaceAbove: number,\n    spaceBelow: number,\n    spaceLeft: number,\n    spaceRight: number,\n  ): TooltipPosition {\n    const spaces = {\n      top: spaceAbove,\n      bottom: spaceBelow,\n      left: spaceLeft,\n      right: spaceRight,\n    };\n\n    // Sort positions by available space\n    const sortedPositions = positions.sort((a, b) => spaces[b] - spaces[a]);\n\n    // Return the position with the most space\n    return sortedPositions[0];\n  }\n\n  /**\n   * Get position coordinates for the tooltip\n   */\n  private getPositionCoordinates(\n    position: TooltipPosition,\n    triggerRect: DOMRect,\n    tooltipRect: DOMRect,\n    viewportWidth: number,\n    viewportHeight: number,\n  ): { top: number; left: number } {\n    let top = 0;\n    let left = 0;\n    const margin = 8; // Small margin for spacing\n\n    switch (position) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - margin;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + margin;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.left - tooltipRect.width - margin;\n        break;\n      case 'right':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.right + margin;\n        break;\n    }\n\n    // Ensure tooltip stays within viewport bounds\n    left = Math.max(margin, Math.min(left, viewportWidth - tooltipRect.width - margin));\n    top = Math.max(margin, Math.min(top, viewportHeight - tooltipRect.height - margin));\n\n    return { top, left };\n  }\n\n  /**\n   * Show the tooltip with position calculation\n   */\n  private showTooltip() {\n    this.isVisible = true;\n\n    // Wait for next frame to ensure tooltip is rendered\n    requestAnimationFrame(() => {\n      const position = this.calculatePosition();\n      this.actualPosition = position.position;\n      this.tooltipStyle = {\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n      };\n    });\n  }\n\n  /**\n   * Hide the tooltip\n   */\n  private hideTooltip() {\n    // Don't hide if tooltip is pinned\n    if (this.isPinned) {\n      return;\n    }\n    this.isVisible = false;\n  }\n\n  /**\n   * Handle click to pin/unpin tooltip\n   */\n  private handleClick = (event: MouseEvent) => {\n    event.stopPropagation();\n    this.isPinned = !this.isPinned;\n\n    if (this.isPinned) {\n      this.showTooltip();\n    } else {\n      this.isVisible = false;\n    }\n  };\n\n  /**\n   * Handle mouse enter\n   */\n  private handleMouseEnter = () => {\n    if (!this.isPinned) {\n      this.showTooltip();\n    }\n  };\n\n  /**\n   * Handle mouse leave\n   */\n  private handleMouseLeave = () => {\n    this.hideTooltip();\n  };\n\n  /**\n   * Handle focus\n   */\n  private handleFocus = () => {\n    if (!this.isPinned) {\n      this.showTooltip();\n    }\n  };\n\n  /**\n   * Handle blur\n   */\n  private handleBlur = () => {\n    this.hideTooltip();\n  };\n\n  render() {\n    return (\n      <div class=\"tooltip-container\" part=\"tc__container\">\n        <span\n          class=\"info-icon\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-describedby={this.tooltipId}\n          aria-expanded={this.isVisible ? 'true' : 'false'}\n          aria-pressed={this.isPinned ? 'true' : 'false'}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <slot name=\"tooltip-icon\">i</slot>\n        </span>\n        <span\n          ref={el => (this.tooltipContentEl = el)}\n          id={this.tooltipId}\n          role=\"tooltip\"\n          aria-hidden={!this.isVisible ? 'true' : 'false'}\n          class={{\n            'tooltip-content': true,\n            'tooltip-visible': this.isVisible,\n            [this.actualPosition]: true,\n          }}\n          style={\n            this.isVisible\n              ? {\n                  position: 'fixed',\n                  top: this.tooltipStyle.top,\n                  left: this.tooltipStyle.left,\n                }\n              : {}\n          }\n          part=\"tc__content\"\n        >\n          <slot name=\"tooltip-content\">This is a help text.</slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}