'use strict';require('./es.array.includes-ec502589.js');var BaseIcon=require('./BaseIcon-7f18dc39.js'),BaseBox=require('./BaseBox-2e069e36.js'),BaseBoxTooltip=require('./BaseBoxTooltip-b037ed1c.js'),normalizeComponent=require('./normalize-component-ebe0c011.js');require('./well-known-symbol-08f3111a.js'),require('./object-keys-5cf8040b.js'),require('./es.array.concat-2f004403.js'),require('./array-species-create-447f37c0.js'),require('./create-property-8fd8ad81.js'),require('./array-method-has-species-support-9fe8fcbb.js'),require('./es.array.join-821b566c.js'),require('./array-method-is-strict-46936434.js');/**
 * A Base Box Shaped Button
 */

var script = {
  name: 'BaseBoxButton',
  components: {
    BaseIcon: BaseIcon["default"],
    BaseBox: BaseBox.B,
    BaseBoxTooltip: BaseBoxTooltip.B
  },
  props: {
    /**
     * specify the tag of the button
     */
    renderElementAs: {
      type: String,
      default: 'div'
    },

    /**
     * Define type of button box style: <br>'large' | 'small'
     */
    boxStyle: {
      type: String,
      default: 'large',
      validator: function validator(val) {
        return ['large', 'small'].includes(val);
      }
    },

    /**
     * specify icon name if desired, this uses the BaseIcon component; <br>
     * see [BaseIcon](#baseicon) for available icons<br>
     */
    icon: {
      type: String,
      default: null
    },

    /**
     * show a plus sign next to the icon if true <br>
     * only available for large button style
     */
    showPlus: {
      type: Boolean,
      default: false
    },

    /**
     * specify the text for the button
     */
    text: {
      type: String,
      default: ''
    },

    /**
     * specify subtext for the button <br>
     * only available for large button style
     */
    subtext: {
      type: String,
      default: ''
    },

    /**
     * define box size
     */
    boxSize: {
      type: Object,
      default: function _default() {
        return {
          width: '25%'
        };
      }
    },

    /**
     * define the ratio of width and height of the box
     * (in percent string, e.g. 1:1 --> '100', 1:2 --> '50')
     */
    boxRatio: {
      type: String,
      default: '100'
    },

    /**
     * set button inactive
     */
    disabled: {
      type: Boolean,
      default: false
    },

    /**
     * show tooltip
     */
    showTooltip: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      // to hide subtext if box is to small
      showSubtext: true
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.setShowSubtext();
    window.addEventListener('resize', function () {
      _this.setShowSubtext();
    });
  },
  methods: {
    clicked: function clicked(event) {
      /**
       * event emitted on box click
       *
       * @type {Event}
       */
      this.$emit('clicked', event);
    },
    onTooltip: function onTooltip(event) {
      /**
       * event emitted on tooltip click
       *
       * @type {Event}
       */
      this.$emit('onTooltip', event);
    },
    setShowSubtext: function setShowSubtext() {
      var subtextRef = this.$refs.baseBoxSubtext;

      if (subtextRef) {
        var subtextBottomPosition = subtextRef.offsetTop + subtextRef.offsetHeight;
        var boxHeight = this.$refs.baseBox.$el.offsetHeight;
        this.showSubtext = boxHeight >= subtextBottomPosition;
      }
    }
  }
};/* 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('base-box', {
    ref: "baseBox",
    staticClass: "base-box-button",
    attrs: {
      "render-element-as": _vm.renderElementAs,
      "box-size": _vm.boxSize,
      "box-ratio": _vm.boxRatio,
      "disabled": _vm.disabled
    },
    on: {
      "clicked": _vm.clicked
    }
  }, [_vm.boxStyle === 'large' ? _c('div', {
    staticClass: "button-box-content"
  }, [_c('div', {
    staticClass: "button-box-center"
  }, [_c('div', {
    staticClass: "button-box-image-row"
  }, [_c('div', {
    staticClass: "button-box-plus-container"
  }, [_vm.showPlus ? _c('base-icon', {
    staticClass: "button-box-plus",
    attrs: {
      "name": "plus",
      "alt": "add"
    }
  }) : _vm._e()], 1), _vm._v(" "), _c('div', {
    staticClass: "button-box-icon-container"
  }, [_vm.icon ? _c('base-icon', {
    staticClass: "button-box-icon",
    attrs: {
      "name": _vm.icon
    }
  }) : _vm._e()], 1)]), _vm._v(" "), _c('div', {
    staticClass: "button-box-text"
  }, [_vm._v("\n        " + _vm._s(_vm.text) + "\n      ")])]), _vm._v(" "), _c('div', {
    ref: "baseBoxSubtext",
    class: ['button-box-subtext', {
      'base-button-box__subtext-hidden': !_vm.showSubtext
    }]
  }, [_vm._v("\n      " + _vm._s(_vm.subtext) + "\n    ")]), _vm._v(" "), _vm.showTooltip ? _c('BaseBoxTooltip', {
    on: {
      "clicked": _vm.onTooltip
    }
  }) : _vm._e()], 1) : _c('div', {
    staticClass: "button-box-content-small"
  }, [_vm.icon ? _c('base-icon', {
    staticClass: "button-box-icon-small",
    attrs: {
      "name": _vm.icon
    }
  }) : _vm._e(), _vm._v(" "), _c('div', {
    staticClass: "button-box-text-small"
  }, [_vm._v("\n      " + _vm._s(_vm.text) + "\n    ")])], 1), _vm._v(" "), _vm._t("default")], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-4db46be3";
/* module identifier */

var __vue_module_identifier__ = "data-v-4db46be3";
/* 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 BaseBoxButton = __vue_component__;exports["default"]=BaseBoxButton;