'use strict';require('./es.symbol.description-bf683260.js'),require('./es.object.to-string-f27a75a8.js'),require('./es.array.includes-3990bfec.js'),require('./es.string.includes-ec03e639.js'),require('./es.object.keys-c57f02bd.js'),require('./regexp-exec-abstract-216cd44a.js'),require('./es.string.replace-25e9e098.js');var BaseBox=require('./BaseBox-1df1f27d.js'),BaseIcon=require('./BaseIcon-1ed3bf6e.js'),BaseImage=require('./BaseImage-b2322064.js'),normalizeComponent=require('./normalize-component-d9981c57.js');/**
 * A component with the primary purpose to display
 * images in responsive boxes but also allowing for text only
 */

var script = {
  name: 'BaseImageBox',
  components: {
    BaseCheckmark: function BaseCheckmark() {
      return Promise.resolve().then(function(){return require('./BaseCheckmark-fa4f96af.js')}).then(function (m) {
        return m.default || m;
      });
    },
    BaseIcon: BaseIcon["default"],
    BaseBox: BaseBox.B,
    BaseImage: BaseImage["default"]
  },
  props: {
    /**
     * The title of the item in question (max 2 lines), 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 two lines; max 3 lines with title)
     */
    subtext: {
      type: String,
      default: ''
    },

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

    /**
     * should the title be displayed on box hover
     */
    showTitleOnHover: {
      type: Boolean,
      default: false
    },

    /**
     * image url // TODO: should probably be required? otherwise we need definition of
     * what alternate content should be? (--> are there items without image? probably yes?)
     */
    imageUrl: {
      type: String,
      default: null
    },

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

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

    /**
     * set optional icon <br>
     * e.g. for items without image
     */
    icon: {
      type: String,
      default: ''
    },

    /**
     * set optional icon size <br>
     */
    iconSize: {
      type: String,
      default: 'xxlarge',
      validator: function validator(val) {
        return ['small', 'medium', 'large', 'xlarge', 'xxlarge'].includes(val);
      }
    },

    /**
     * display play icon <br>
     * e.g. for Video, Audio files
     */
    playIcon: {
      type: Boolean,
      default: false
    },

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

    /**
     * set prop true if box can be dragged - used solely for styling purposes
     */
    draggable: {
      type: Boolean,
      default: false
    },

    /**
     * set select status (checkbox checked) from outside
     */
    selected: {
      type: Boolean,
      default: false
    },

    /**
     * specify the size of the box
     */
    boxSize: {
      type: Object,
      default: function _default() {
        return {
          width: 'auto',
          height: 'auto'
        };
      }
    },

    /**
     * specify any text that should be displayed instead of an image;
     * each array element on new line
     */
    boxText: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * specify lazy image loading
     */
    lazyload: {
      type: Boolean,
      default: false
    },

    /**
     * specify position of image
     */
    imageFirst: {
      type: Boolean,
      default: false
    },

    /**
     * specify if header should be centered
     * (aligned left otherwise)
     */
    centerHeader: {
      type: Boolean,
      default: false
    },

    /**
     * define html element that should be rendered
     */
    renderElementAs: {
      type: String,
      default: 'div'
    },

    /**
     * if element is rendered as vue link component, specify a value for the 'to' attribute
     * can either be a string or a vue-router Location object (= object with 'path' property
     * and optional 'params' or 'query' object)<br>
     * (this needs vue-router)
     */
    linkTo: {
      type: [String, Object],
      default: '',
      validator: function validator(val) {
        return typeof val === 'string' || val instanceof Object && Object.keys(val).includes('path');
      }
    }
  },
  data: function data() {
    return {
      /**
       * internal variable for selection status
       */
      selectedInt: false,

      /**
       * needed to set text height and line-clamp correctly after resize
       */
      boxTextStyle: {},

      /**
       * steer displaying of image in case of display error
       */
      displayImage: true,

      /**
       * timeout variable to only do height calcs after certain time
       */
      resizeTimeout: null
    };
  },
  computed: {
    // determine if shadow should cover half or third of box
    imageShadowClass: function imageShadowClass() {
      return this.imageFirst ? 'base-image-box-img-third' : 'base-image-box-img-half';
    }
  },
  watch: {
    // TODO: could probably just be added to boxSelect method?
    selectedInt: function selectedInt(val) {
      if (val !== this.selected) {
        /**
         * event triggered when box is selectable and clicked upon
         *
         * @event select-triggered
         * @type { Boolean }
         */
        this.$emit('select-triggered', val);
      }
    },
    selected: function selected(val) {
      if (this.selectedInt !== val) {
        this.selectedInt = val;
      }
    },
    boxText: function boxText() {
      this.calcTextHeight();
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.selectedInt = this.selected;

    if (window) {
      window.addEventListener('resize', this.resizeTriggered);
    } // calcTextHeight when component is really mounted, even in ssr mode
    // otherwise the calculation will be wrong and not set as style attribute


    this.$nextTick(function () {
      _this.calcTextHeight();
    });
  },
  destroyed: function destroyed() {
    window.removeEventListener('resize', this.resizeTriggered);
  },
  methods: {
    boxSelect: function boxSelect() {
      if (this.selectable) {
        this.selectedInt = !this.selectedInt;
      } else {
        /**
         * event triggered when selectable is false and box is clicked
         *
         * @event clicked
         */
        this.$emit('clicked');
      }
    },
    resizeTriggered: function resizeTriggered() {
      var _this2 = this;

      // check if there is a timeout already set and clear it if yes
      if (this.resizeTimeout) {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = null;
      }

      this.resizeTimeout = setTimeout(function () {
        _this2.calcTextHeight();
      }, 500);
    },
    calcTextHeight: function calcTextHeight() {
      // only do this if no image is present and the boxText variable has items
      // and all the ui elements are there
      if (!this.imageUrl && this.boxText.length && this.$refs.baseBox && this.$refs.boxText) {
        var headerHeight = 0;

        if (this.$refs.headerBox) {
          var headerElem = this.$refs.headerBox;
          var elemInnerHeight = headerElem.clientHeight;
          var _boxMargin = headerElem.offsetTop;
          headerHeight = elemInnerHeight + 2 * _boxMargin;
        } // get text-wrapper element


        var elem = this.$refs.boxText; // get single text line in the text element (for line height only)

        var lineElement = this.$refs.boxTextInner[0] || this.$refs.boxTextInner; // get the height of the complete box

        var boxHeight = this.$refs.baseBox.$el.clientHeight; // get the line height property

        var lineHeight = window.getComputedStyle(lineElement, null).getPropertyValue('line-height').replace('px', ''); // get the box margin

        var boxMargin = window.getComputedStyle(elem, null).getPropertyValue('margin-bottom').replace('px', ''); // calculate the actual text box height from
        // complete box height - header height - box margin (bottom)

        var textBoxHeight = boxHeight - headerHeight - boxMargin; // if there is a description also leave space for that so its not overlapping
        // TODO: check if this is wanted

        if (this.description) {
          textBoxHeight -= lineHeight;
        } // calculate how many lines can be displayed


        var lines = Math.floor(textBoxHeight / lineHeight); // set the style of the text box

        this.boxTextStyle = {
          height: "".concat(lineHeight * lines, "px"),
          '-webkit-line-clamp': lines
        };
      }
    }
  }
};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('BaseBox', {
    ref: "baseBox",
    attrs: {
      "box-size": _vm.boxSize,
      "render-element-as": _vm.renderElementAs,
      "additional-attributes": _vm.linkTo ? {
        to: _vm.linkTo
      } : {},
      "box-ratio": "100"
    },
    on: {
      "clicked": _vm.boxSelect
    }
  }, [_c('div', {
    class: ['base-image-box-content-wrapper', {
      'base-image-box-hover': (_vm.playIcon || _vm.showTitleOnHover) && !_vm.selectable
    }, {
      'base-image-box-hover-show-title': _vm.showTitleOnHover && !_vm.selectable
    }, {
      'base-image-box-selectable': _vm.selectable
    }, {
      'base-image-box-draggable': _vm.draggable
    }, {
      'base-image-box-selected': _vm.selectable && _vm.selectedInt
    }]
  }, [_c('div', {
    staticClass: "base-image-box-content"
  }, [_vm.showTitle ? _c('div', {
    ref: "headerBox",
    class: ['base-image-box-header', {
      'base-image-box-header-centered': _vm.centerHeader
    }]
  }, [_c('div', {
    class: ['base-image-box-title', {
      'base-image-box-header-2-lines': !_vm.subtext
    }],
    attrs: {
      "title": _vm.title
    }
  }, [_vm._v("\n          " + _vm._s(_vm.title) + "\n        ")]), _vm._v(" "), _vm.subtext ? _c('div', {
    staticClass: "base-image-box-subtext",
    attrs: {
      "title": _vm.subtext
    }
  }, [_vm._v("\n          " + _vm._s(_vm.subtext) + "\n        ")]) : _vm._e()]) : _vm._e(), _vm._v(" "), _c('div', {
    class: ['base-image-box-body', {
      'base-image-box-inner-shadow-bottom-top': _vm.selectable && _vm.imageUrl && !_vm.showTitle
    }, {
      'base-image-box-inner-shadow-bottom': !_vm.icon && (!_vm.showTitleOnHover || _vm.showTitleOnHover && _vm.additional)
    }, {
      'base-image-box-order-first': _vm.imageFirst
    }, _vm.imageShadowClass]
  }, [_vm.imageUrl && _vm.displayImage ? _c('div', {
    class: ['base-image-box-img-wrapper']
  }, [_c('BaseImage', {
    ref: "image",
    class: ['base-image-box-image', {
      'base-image-box__image-second': !_vm.imageFirst
    }, {
      'base-image-box-no-title': !_vm.showTitle
    }],
    attrs: {
      "alt": _vm.title,
      "lazyload": _vm.lazyload,
      "src": _vm.imageUrl
    },
    on: {
      "error": function error($event) {
        _vm.displayImage = false;
      }
    }
  })], 1) : _vm._e(), _vm._v(" "), _vm.icon ? _c('BaseIcon', {
    class: ['base-image-box-icon', 'base-image-box-icon--' + _vm.iconSize],
    attrs: {
      "name": _vm.icon
    }
  }) : _vm._e(), _vm._v(" "), _vm.playIcon ? _c('BaseIcon', {
    class: ['base-image-box-icon-play', 'base-image-box-icon--' + _vm.iconSize],
    attrs: {
      "name": "play"
    }
  }) : _vm._e(), _vm._v(" "), !_vm.imageUrl || !_vm.displayImage ? _c('div', {
    ref: "boxText",
    staticClass: "base-image-box__text-wrapper"
  }, [_vm._t("text", function () {
    return [_c('div', {
      ref: "boxTextInner",
      staticClass: "base-image-box-text",
      style: _vm.boxTextStyle
    }, _vm._l(_vm.boxText, function (entry, index) {
      return _c('div', {
        key: index
      }, [_vm._v("\n                " + _vm._s(entry) + "\n              ")]);
    }), 0)];
  }, {
    "text": _vm.boxText
  })], 2) : _vm._e(), _vm._v(" "), _c('div', {
    class: ['base-image-box-footer', {
      'base-image-box-footer-invert': _vm.icon
    }]
  }, [_vm.$slots.footerLeft ? _c('div', {
    staticClass: "base-image-box-footer-left"
  }, [_vm._t("footerLeft")], 2) : _vm._e(), _vm._v(" "), _c('div', {
    staticClass: "base-image-box-footer-body"
  }, [_vm.showTitleOnHover ? _c('div', {
    staticClass: "base-image-box-footer-title bold",
    attrs: {
      "title": _vm.title
    }
  }, [_vm._v("\n              " + _vm._s(_vm.title) + "\n            ")]) : _vm._e(), _vm._v(" "), _vm.description ? _c('div', {
    class: ['base-image-box-footer-text', {
      'bold': !_vm.additional
    }],
    attrs: {
      "title": _vm.description
    }
  }, [_vm._v("\n              " + _vm._s(_vm.description) + "\n            ")]) : _vm._e(), _vm._v(" "), _vm.additional ? _c('div', {
    staticClass: "base-image-box-footer-text bold",
    attrs: {
      "title": _vm.additional
    }
  }, [_vm._v("\n              " + _vm._s(_vm.additional) + "\n            ")]) : _vm._e()]), _vm._v(" "), _vm.$slots.footer || _vm.playIcon ? _c('div', {
    staticClass: "base-image-box-footer-right"
  }, [_vm.playIcon ? _c('BaseIcon', {
    staticClass: "base-image-box-icon-play-small",
    attrs: {
      "name": "play"
    }
  }) : _vm._e(), _vm._v(" "), _vm._t("footer")], 2) : _vm._e()])], 1)]), _vm._v(" "), _c('div', {
    staticClass: "base-image-box-features"
  }, [_c('transition', {
    attrs: {
      "name": "slide-fade"
    }
  }, [_vm.selectable ? _c('BaseCheckmark', {
    staticClass: "base-image-box-checkbox",
    attrs: {
      "checked": _vm.selectedInt,
      "label": _vm.title,
      "mark-style": "checkbox",
      "check-box-size": "large"
    },
    on: {
      "clicked": _vm.boxSelect
    }
  }) : _vm._e()], 1)], 1)])]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-34bbe0fd";
/* module identifier */

var __vue_module_identifier__ = "data-v-34bbe0fd";
/* 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 BaseImageBox = __vue_component__;exports.B=BaseImageBox;