/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-211ca8fb.js';

const gascoTooltipCss = ":host{position:relative;cursor:default}:host .tooltip-show{position:absolute;left:0;z-index:99999;background:#999999;border-radius:4px;visibility:hidden;max-width:230px;width:max-content;word-wrap:break-word;padding:4px 12px;display:flex;align-items:center;color:#FFFFFF;font-weight:400;font-size:18px;line-height:28px;filter:drop-shadow(0px 4px 8px rgba(171, 190, 209, 0.4));transition:ease-in 200ms all}:host .tooltip-show .selector{background-color:#999999;border-radius:1px;bottom:-3px;height:8px;width:8px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg)}:host .tooltip-show.tooltip-top{top:calc(100% - 75px);opacity:0;top:-20px}:host .tooltip-show.tooltip-bottom{opacity:0;bottom:calc(100% - 75px);bottom:-20px}:host .tooltip-show.tooltip-bottom .selector{top:-3px}@media (any-hover: hover){:host(:hover) .tooltip-show.tooltip-top,:host(:hover) .tooltip-show.tooltip-bottom{opacity:1;top:0;visibility:visible}:host(:hover) .tooltip-show.tooltip-bottom{top:initial;bottom:0}}:host(.gasco-tooltip:active) .tooltip-show.tooltip-top,:host(.gasco-tooltip:active) .tooltip-show.tooltip-bottom{opacity:1;top:0;visibility:visible}:host(.gasco-tooltip:active) .tooltip-show.tooltip-bottom{top:initial;bottom:0}@media only screen and (max-width: 768px){:host .tooltip-show{font-size:16px;line-height:24px}}@media only screen and (max-width: 480px){:host .tooltip-show{font-size:14px;line-height:20px}}";

const GascoTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.gascoTooltip = createEvent(this, "gascoTooltip", 7);
    /**
     * If `true`, the tooltip will be visible.
     */
    this.visible = true;
    /**
     * If `true`, the tooltip will be position.
     */
    this.position = 'top';
    /**
     * If `true`, the tooltip will can be clicked and will emit the `gascoTooltip` event.
     */
    this.tappable = true;
    /**
     * If `true`, the tooltip will stop propagation on tap.
     */
    this.stopPropagation = true;
  }
  onMouseDown(ev) {
    this.emitTap(ev);
  }
  emitTap(ev) {
    if (this.stopPropagation) {
      ev.preventDefault();
      ev.stopPropagation();
    }
    if (this.tappable) {
      this.gascoTooltip.emit();
    }
  }
  handleResize() {
    this.handleTootltipResize();
  }
  componentDidLoad() {
    setTimeout(() => this.handleTootltipResize(), 800);
  }
  handleTootltipResize() {
    const clientWidth = document.documentElement.clientWidth;
    const { height, left } = this.tooltipRef.getClientRects()[0];
    const slot = this.tooltipSlotRef.offsetHeight;
    const divStyle = this.tooltipRef.style;
    const selector = this.selectorRef;
    const translateTop = height + slot;
    const translateBottom = height + slot;
    if (clientWidth > 480) {
      if (this.position === 'top') {
        divStyle.transform = `translateY(-${translateTop}px)`;
      }
      else {
        divStyle.transform = `translateY(${translateBottom}px)`;
      }
    }
    else {
      selector.style.left = `${left / 2}px`;
      if (this.position === 'top') {
        divStyle.transform = `
          translate(-${Math.ceil(clientWidth / 5)}px, -${translateTop}px) scale(0.9)`;
      }
      else {
        divStyle.transform = `
        translate(-${Math.ceil(clientWidth / 5)}px, ${translateBottom}px) scale(0.9)`;
      }
    }
  }
  render() {
    return (h(Host, { tabindex: "0", "aria-hidden": "true", "aria-role": "button", class: {
        'tooltip-hide': !this.visible,
        'tooltip-no-tappable': !this.tappable,
        'gasco-tooltip': true
      } }, h("div", { ref: (focusEl) => (this.tooltipRef = focusEl), class: {
        'tooltip-show': true,
        [`tooltip-${this.position}`]: true
      } }, h("span", { ref: (focusEl) => (this.selectorRef = focusEl), class: "selector" }), this.label), h("div", { style: { display: 'inline' }, ref: (focusEl) => (this.tooltipSlotRef = focusEl) }, h("slot", null))));
  }
  get el() { return getElement(this); }
};
GascoTooltip.style = gascoTooltipCss;

export { GascoTooltip as gasco_tooltip };
