import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.array.includes-1f433385.js';
import './es.number.constructor-16a232f3.js';
import { B as BaseBox } from './BaseBox-a4447dc8.js';
import BaseButton from './BaseButton-44a621e1.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './object-set-prototype-of-9853ad1a.js';
import './es.symbol.description-3b56bced.js';
import './array-species-create-afb281e6.js';
import './set-to-string-tag-452fb9b0.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './utils-21c04279.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './es.array.map-093cfbca.js';
import './array-method-has-species-support-d96108b0.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './regexp-flags-b5fc4ddb.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './es.array.slice-e9c3dd03.js';
import './create-property-c00b5c27.js';
import './es.object.to-string-5a59fbfc.js';
import './classof-b10e7604.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.string.includes-53dbb113.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './es.object.keys-6369b884.js';
import './BaseIcon-d03b1fa2.js';
import './es.array.concat-9f3136dc.js';
import './BaseBoxTooltip-e7e1d52e.js';

/**
 * Component to render content in expandable container
 */

var script = {
  name: 'BaseExpandBox',
  components: {
    BaseBox: BaseBox,
    BaseButton: BaseButton
  },
  props: {
    /**
     * expand box from outside
     */
    expand: {
      type: Boolean,
      default: false
    },

    /**
     * define padding of the box<br>
     * valid values: 'large' | 'small'
     */
    padding: {
      type: String,
      default: 'small',
      validator: function validator(val) {
        return ['large', 'small'].includes(val);
      }
    },

    /**
     * button text to show more content
     */
    showMoreText: {
      type: String,
      default: 'Show more'
    },

    /**
     * button text to show less content
     */
    showLessText: {
      type: String,
      default: 'Show less'
    },
    autoHeight: {
      type: Boolean,
      default: false
    },

    /**
     * define the max height of the collapsed box in px
     */
    maxCollapsedHeight: {
      type: Number,
      default: 300
    },

    /**
     * define the height including margin of the show-more button in px
     */
    showButtonHeight: {
      type: Number,
      default: 54
    }
  },
  data: function data() {
    return {
      expandInt: false,
      contentWidth: null,
      initialized: false,
      showButton: false
    };
  },
  computed: {
    maxCollapsedHeightInt: function maxCollapsedHeightInt() {
      return this.showButton ? this.maxCollapsedHeight - this.showButtonHeight : this.maxCollapsedHeight;
    },
    style: function style() {
      return {
        '--max-collapsed-height': "".concat(this.maxCollapsedHeightInt, "px")
      };
    }
  },
  mounted: function mounted() {
    this.init();
  },
  methods: {
    /**
     * init
     */
    init: function init() {
      if (this.expand) {
        // check if button is needed
        this.showButton = this.contentInnerHeight() > this.contentHeight();
        this.expandInt = true;
      }

      this.initialized = true; // observe resize of container and set visibility of button

      this.boxResize().observe(this.$el);
    },

    /**
     * check if box width changes and set visibility of button
     */
    boxResize: function boxResize() {
      var _this = this;

      return new ResizeObserver(function (entries) {
        var currentWidth = entries[0].contentRect.width;

        if (_this.contentWidth !== currentWidth) {
          // compare content to parent container -> set button visibility
          if (!_this.expandInt) {
            _this.showButton = _this.contentInnerHeight() > _this.contentHeight();
          } // close expanded box


          if (_this.expand && _this.expandInt && _this.contentWidth !== null) {
            _this.expandInt = false;
          }
        } // save currentWidth for next comparison


        _this.contentWidth = currentWidth; // emit box-size

        if (!_this.expandInt) {
          /**
           * emitting box-height on resize
           *
           * @type {String}
           */
          _this.$emit('box-height', _this.$el.offsetHeight);
        }
      });
    },

    /**
     * calculate height of content
     */
    contentHeight: function contentHeight() {
      return this.$el.querySelector('.base-expand-box-content').offsetHeight;
    },

    /**
     * calculate height of content inner
     */
    contentInnerHeight: function contentInnerHeight() {
      return this.$el.querySelector('.base-expand-box-content-inner > div').offsetHeight;
    },

    /**
     *
     */
    clicked: function clicked() {
      this.expandInt = !this.expandInt;
      /**
       * event emitted on button click
       *
       * @type {Event}
       */

      this.$emit('update:expand', this.expandInt);
    }
  }
};

/* 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', {
    class: ['base-expand-box', 'base-expand-box-padding-' + _vm.padding, {
      'base-expand-box-auto-height': _vm.autoHeight
    }, {
      'base-expand-box-open': _vm.expandInt
    }],
    style: _vm.style,
    attrs: {
      "box-ratio": "0",
      "box-size": {},
      "box-hover": false
    }
  }, [_c('div', {
    class: ['base-expand-box-content', {
      'base-expand-box-content-fade-out': !_vm.initialized || !_vm.expandInt && _vm.showButton
    }]
  }, [_c('div', {
    staticClass: "base-expand-box-content-inner"
  }, [_c('div', [_vm._t("default")], 2)])]), _vm._v(" "), _vm.showButton ? _c('base-button', {
    class: ['base-expand-box-button', {
      'base-button-icon-rotate-180': _vm.expandInt
    }],
    attrs: {
      "text": _vm.expandInt ? _vm.showLessText : _vm.showMoreText,
      "has-background-color": false,
      "align-text": "left",
      "icon": "drop-down",
      "icon-position": "right"
    },
    on: {
      "clicked": _vm.clicked
    }
  }) : _vm._e(), _vm._v(" "), !!_vm.$slots.footer ? _c('div', {
    staticClass: "base-expand-box-footer"
  }, [_c('div', {
    staticClass: "base-expand-box-footer-inner"
  }, [_vm._t("footer")], 2)]) : _vm._e()], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  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 BaseExpandBox = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseExpandBox);
  }
};
use(Plugin);

export { BaseExpandBox, Plugin as default };
