'use strict';require('./regexp-exec-abstract-216cd44a.js'),require('./es.string.replace-25e9e098.js');var BaseImageBox=require('./BaseImageBox-dd2ec65b.js'),normalizeComponent=require('./normalize-component-d9981c57.js');/**
 * A box for information display after mouse hover or click
 */

var script = {
  name: 'BaseHoverBox',
  components: {
    BaseImageBox: BaseImageBox.B
  },
  props: {
    /**
     * The title of the item in question, also used as img alt text
     * (atm - TODO: should there be a separate alt text (then again - what would that be since
     * file uploads dont have any properties)?)
     */
    title: {
      type: String,
      default: 'No title'
    },

    /**
     * Text displayed directly below title (max one line; max 2 lines with title)
     */
    subtext: {
      type: String,
      default: ''
    },

    /**
     * should the title be displayed or box only display the image
     */
    showTitle: {
      type: Boolean,
      default: true
    },

    /**
     * Specify text that should be displayed in the info box, should be an array of strings
     */
    boxText: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * image url
     */
    imageUrl: {
      type: String,
      default: null
    },

    /**
     * descriptive element displayed at bottom of box (e.g. item type like "Bilderserie")
     */
    description: {
      type: String,
      default: null
    },

    /**
     * determines if the box should be selectable and the checkbox is displayed
     */
    selectable: {
      type: Boolean,
      default: false
    },

    /**
     * specify the size of the box
     */
    boxSize: {
      type: Object,
      default: function _default() {
        return {
          width: '212px',
          height: '212px'
        };
      }
    }
  },
  data: function data() {
    return {
      boxPosition: {
        top: 0,
        left: 0
      }
    };
  },
  methods: {
    /**
     * to set the position of the box from outside
     * @param {MouseEvent} e
     */
    setPosition: function setPosition(e) {
      var x = e.layerX;
      var y = e.layerY;
      var width = parseInt(this.boxSize.width.replace('px', ''), 10);
      var elem = this.$el;
      var boxMargin = window.getComputedStyle(elem, null).getPropertyValue('margin').replace('px', '');

      if (e.clientX + 3 * boxMargin + width > window.innerWidth) {
        x = e.layerX - width - 2 * boxMargin;
      }

      if (e.clientY + 2 * boxMargin + width > window.innerHeight) {
        y = e.layerY - width - boxMargin;
      }

      this.boxPosition = {
        top: "".concat(y, "px"),
        left: "".concat(x, "px")
      };
    }
  }
};/* 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', {
    staticClass: "base-hover-box",
    style: [_vm.boxSize, _vm.boxPosition]
  }, [_c('base-image-box', _vm._b({}, 'base-image-box', _vm.$props, false))], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-1fa73caa";
/* module identifier */

var __vue_module_identifier__ = "data-v-1fa73caa";
/* 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 BaseHoverBox = __vue_component__;exports.B=BaseHoverBox;