import { Component, Event, Host, Listen, Prop, Element, h } from '@stencil/core';
export class GascoTooltip {
  constructor() {
    /**
     * 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();
    }
  }
  componentDidLoad() {
    setTimeout(() => {
      const div_height = this.tooltipRef.offsetHeight;
      const slot = this.tooltipSlotRef.offsetHeight;
      if (this.position === 'top') {
        this.tooltipRef.style.transform = `translateY(-${Math.ceil((div_height * 2) / 2) + slot}px)`;
      }
      else {
        this.tooltipRef.style.transform = `translateY(${Math.ceil((div_height * 2) / 1.9) + slot}px)`;
      }
    }, 1000);
  }
  render() {
    return (h(Host, { tabindex: "-1", "aria-hidden": "true", 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
        } }, this.label),
      h("div", { style: { display: 'inline' }, ref: (focusEl) => (this.tooltipSlotRef = focusEl) },
        h("slot", null))));
  }
  static get is() { return "gasco-tooltip"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-tooltip.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-tooltip.css"]
  }; }
  static get properties() { return {
    "visible": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the tooltip will be visible."
      },
      "attribute": "visible",
      "reflect": false,
      "defaultValue": "true"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If `true`, the tooltip will be visible."
      },
      "attribute": "label",
      "reflect": false
    },
    "position": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'top' | 'bottom'",
        "resolved": "\"bottom\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If `true`, the tooltip will be position."
      },
      "attribute": "position",
      "reflect": false,
      "defaultValue": "'top'"
    },
    "tappable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the tooltip will can be clicked and will emit the `gascoTooltip` event."
      },
      "attribute": "tappable",
      "reflect": false,
      "defaultValue": "true"
    },
    "stopPropagation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the tooltip will stop propagation on tap."
      },
      "attribute": "stop-propagation",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get events() { return [{
      "method": "gascoTooltip",
      "name": "gascoTooltip",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the tooltip is tapped."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get listeners() { return [{
      "name": "click",
      "method": "onMouseDown",
      "target": undefined,
      "capture": true,
      "passive": false
    }]; }
}
