import { Host, h } from '@stencil/core';
import { createPopper } from '@popperjs/core';
export class BsTooltip {
  constructor() {
    this.placement = 'top';
    this.show = false;
    this.tooltipContent = undefined;
    this._visible = false;
  }
  /**
     * sets up the initial state of the tooltip
  */
  componentDidLoad() {
    this._toggle = this.getToggleElement();
    this._content = this.el.shadowRoot.querySelector('.tooltip-content');
    this._visible = this.show;
    this.initializeTooltip();
    this.addToggleEvents();
  }
  /**
     * if placement changes after the tooltip is initialized, change the placement option used in Popper.js
     */
  updateTooltipOptions() {
    this._popper.setOptions({
      placement: this.placement,
    });
  }
  /**
    * allows external access to showing/hiding the tooltip
    */
  showChanged(show) {
    this._visible = show;
  }
  /**
   * A method exposed on bs-tooltip elements to show the tooltip
   */
  async showTooltip() {
    this._visible = true;
  }
  /**
   * A method exposed on bs-tooltip elements to hide the tooltip
   */
  async hideTooltip() {
    this._visible = false;
  }
  /**
   * A method exposed on bs-tooltip elements to toggle the tooltips visibility
   */
  async toggleTooltip() {
    this._visible = !this._visible;
  }
  /**
   * creates a new Popper instance
   */
  initializeTooltip() {
    this._popper = createPopper(this._toggle, this._content, {
      placement: this.placement,
      modifiers: [
        {
          name: 'offset',
          options: {
            offset: [0, 8],
          }
        }
      ]
    });
  }
  /**
   * adds mouse events to the toggle element
   */
  addToggleEvents() {
    this._toggle.onmouseenter = this.showTooltip.bind(this);
    this._toggle.onmouseleave = this.hideTooltip.bind(this);
  }
  /**
   * the toggle element could either be the button in the toggle slot or the last button in the toggle slot
  */
  getToggleElement() {
    const toggleSlot = this.el.shadowRoot.querySelector('slot[name="for-element"]');
    const slotEls = toggleSlot.assignedElements();
    if (!slotEls || !slotEls.length) {
      return;
    }
    return slotEls[0];
  }
  render() {
    return (h(Host, null, h("slot", { name: "for-element" }), h("slot", null), h("div", { class: `tooltip-content
            ${this.placement}
            ${this._visible ? 'show' : ''}
          ` }, this.tooltipContent, h("slot", { name: "tooltip-content" }), h("div", { id: "arrow", "data-popper-arrow": true }))));
  }
  static get is() { return "bs-tooltip"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-tooltip.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-tooltip.css"]
    };
  }
  static get properties() {
    return {
      "placement": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "Placement",
          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
          "references": {
            "Placement": {
              "location": "import",
              "path": "@popperjs/core"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "where the tooltip should appear (see: https://popper.js.org/docs/v2/constructors/#options)"
        },
        "attribute": "placement",
        "reflect": false,
        "defaultValue": "'top'"
      },
      "show": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "used to control the tooltip visiblity manually, rather than relying on toggle hover"
        },
        "attribute": "show",
        "reflect": false,
        "defaultValue": "false"
      },
      "tooltipContent": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "for simple tooltips, text to display in the tooltip (or use a slot for complex tooltip content)"
        },
        "attribute": "tooltip-content",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "_visible": {}
    };
  }
  static get methods() {
    return {
      "showTooltip": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "A method exposed on bs-tooltip elements to show the tooltip",
          "tags": []
        }
      },
      "hideTooltip": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "A method exposed on bs-tooltip elements to hide the tooltip",
          "tags": []
        }
      },
      "toggleTooltip": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "A method exposed on bs-tooltip elements to toggle the tooltips visibility",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "placement",
        "methodName": "updateTooltipOptions"
      }, {
        "propName": "show",
        "methodName": "showChanged"
      }];
  }
}
//# sourceMappingURL=bs-tooltip.js.map
