'use strict';var normalizeComponent=require('./normalize-component-d9981c57.js');//
//
//
//
//
//
//
//
//
//
//
//
//

/**
 * Component to display a tooltip
 */
var script = {
  name: 'BaseTooltip',
  props: {
    /**
     * HTMLElement to attach the tooltip<br>
     * eg.: vue ref element
     */
    attachTo: {
      type: null,
      required: true
    },

    /**
     * additional styles<br>
     * properties 'top, left, right' will be overwritten due position calculation
     */
    styles: {
      type: Object,
      default: function _default() {}
    }
  },
  data: function data() {
    return {
      isActive: false,
      direction: 'top',
      css: {},
      thresholdX: 10,
      // px, distance from window left or right side
      thresholdY: 3 // px, distance between tooltip and attachTo element

    };
  },
  mounted: function mounted() {
    // move component to body to position it absolute in the document
    document.querySelector('body').appendChild(this.$el);
    this.calcPosition();
    this.isActive = true;
  },
  methods: {
    calcPosition: function calcPosition() {
      var attachTo = this.attachTo;
      var attachToRect = attachTo.getBoundingClientRect();
      var tooltip = this.$el;
      var tooltipTriangleHeight = parseFloat(window.getComputedStyle(tooltip, ':after').height) / 2;
      var tooltipWidth = tooltip.offsetWidth;
      var tooltipHeight = tooltip.offsetHeight + tooltipTriangleHeight; // reset styles

      this.css = {}; // set tooltip position before or after attachTo element

      var _window = window,
          scrollY = _window.scrollY;

      if (attachToRect.top < tooltipHeight) {
        this.direction = 'bottom';
        this.css.top = "".concat(attachToRect.bottom + tooltipTriangleHeight + this.thresholdY + scrollY, "px");
      } else {
        this.direction = 'top';
        this.css.top = "".concat(attachToRect.top - tooltipHeight - this.thresholdY + scrollY, "px");
      } // if tooltip overlaps window left side


      if (attachToRect.x < tooltipWidth / 2) {
        this.css.left = "".concat(this.thresholdX, "px");
        this.css['--triangle-left'] = "".concat(attachToRect.left + attachToRect.width / 2 - this.thresholdX, "px"); // if tooltip overlaps window right side
      } else if (attachTo.getBoundingClientRect().right + tooltipWidth / 2 > window.outerWidth) {
        this.css.right = "".concat(this.thresholdX, "px");
        this.css['--triangle-left'] = "".concat(tooltipWidth - attachToRect.width / 2 + this.thresholdX - (window.outerWidth - attachTo.getBoundingClientRect().right), "px"); // else center tooltip
      } else {
        this.css.left = "".concat(attachToRect.left + attachToRect.width / 2 - tooltipWidth / 2, "px");
        this.css['--triangle-left'] = '50%';
      }
    }
  }
};/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    class: ['base-tooltip', 'base-tooltip--' + _vm.direction, {
      'base-tooltip--active': _vm.isActive
    }],
    style: Object.assign({}, _vm.styles, _vm.css)
  }, [_vm._t("default", function () {
    return [_c('i', [_vm._v("use default slot")])];
  })], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-96d21402";
/* module identifier */

var __vue_module_identifier__ = "data-v-96d21402";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent.n({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseTooltip = __vue_component__;exports["default"]=BaseTooltip;