import { Host, h } from '@stencil/core';
/**
 * Outputs a tooltip which are floating labels that explain the function of a user
 * interface element.
 * @docsPage
 * @exSlot <bs-button aria-describedby="tooltip-id">Hover Me!</bs-button>
 */
export class BsTooltip {
  constructor() {
    this.tooltipId = undefined;
    this.content = undefined;
    this.position = undefined;
    this.isHoverOrFocused = undefined;
    this.isEscaped = undefined;
  }
  handleEnterOrFocus() {
    this.isHoverOrFocused = true;
  }
  handleLeaveOrFocusOut() {
    this.isHoverOrFocused = false;
    // Also reset escaped so it shows again on hover/focus
    this.isEscaped = false;
  }
  /** Handle escape key closing the tooltip */
  handleEscape(event) {
    // Only "close" the tooltip on "Escape" if it's showing
    // This check is needed otherwise *ALL* tooltips on the page
    // would be marked as "isEscaped" causing undesirable side-effects
    if (this.isHoverOrFocused && event.key === 'Escape') {
      this.isHoverOrFocused = false;
      this.isEscaped = true;
    }
  }
  /** Get tooltip text class based on current state */
  getTooltipTextClass() {
    let cssClass = 'bs-tooltip-text';
    if (this.isEscaped) {
      // Different positions have different translateX/Y style
      if (this.position === undefined ||
        this.position === 'top' ||
        this.position === 'bottom') {
        cssClass += ' escaped-x';
      }
      else if (this.position === 'left' || this.position === 'right') {
        cssClass += ' escaped-y';
      }
      else {
        cssClass += ' escaped';
      }
    }
    return cssClass;
  }
  render() {
    return (h(Host, null, h("div", { class: "bs-tooltip", "data-position": this.position || undefined }, h("div", { "data-slot": true }, h("slot", null)), h("div", { class: this.getTooltipTextClass(), id: this.tooltipId, role: "tooltip" }, this.content))));
  }
  static get is() { return "bs-tooltip"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-tooltip.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-tooltip.css"]
    };
  }
  static get properties() {
    return {
      "tooltipId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "tooltip-id"
            }],
          "text": ""
        },
        "attribute": "tooltip-id",
        "reflect": false
      },
      "content": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "Tooltip Text"
            }],
          "text": ""
        },
        "attribute": "content",
        "reflect": false
      },
      "position": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'bottom-left'|'bottom-right'",
          "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Positioning of the tooltip."
        },
        "attribute": "position",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "isHoverOrFocused": {},
      "isEscaped": {}
    };
  }
  static get listeners() {
    return [{
        "name": "mouseenter",
        "method": "handleEnterOrFocus",
        "target": undefined,
        "capture": false,
        "passive": true
      }, {
        "name": "focusin",
        "method": "handleEnterOrFocus",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "mouseleave",
        "method": "handleLeaveOrFocusOut",
        "target": undefined,
        "capture": false,
        "passive": true
      }, {
        "name": "focusout",
        "method": "handleLeaveOrFocusOut",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "keydown",
        "method": "handleEscape",
        "target": "window",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-tooltip.js.map
