'use strict';require('./es.symbol.description-f8df06f1.js'),require('./es.number.constructor-186d326b.js');var BaseIcon=require('./BaseIcon-d76fa559.js'),BaseCheckmark=require('./BaseCheckmark-7a277bea.js'),normalizeComponent=require('./normalize-component-a3a558e7.js');/**
 * Component to be used in Menu Entry List or as a sort of header element
 * with possibility to specify title description and more
 */

var script = {
  name: 'BaseMenuEntry',
  components: {
    BaseIcon: BaseIcon["default"],
    BaseCheckmark: BaseCheckmark["default"]
  },
  props: {
    /**
     * An id to allow identification needs to be specified
     */
    entryId: {
      type: [Number, String],
      default: null,
      required: true
    },

    /**
     * item main title
     */
    title: {
      type: String,
      default: ''
    },

    /**
     * additional text displayed directly after title
     */
    subtext: {
      type: String,
      default: ''
    },

    /**
     * specifiy if item is active - which will display a border on right side
     * and title in bold
     */
    isActive: {
      type: Boolean,
      default: false
    },

    /**
     * specify if item is selected - this will cause the included checkbox
     * to be checked
     */
    isSelected: {
      type: Boolean,
      default: false
    },

    /**
     * specify an icon that is displayed before the title
     * available values: see ***
     */
    icon: {
      type: String,
      default: ''
    },

    /**
     * Text displayed at the end of the item
     */
    description: {
      type: String,
      default: ''
    },

    /** control if the checkboxes are visible
     *
     */
    selectActive: {
      type: Boolean,
      default: false
    },

    /**
     * define if entry is selectable - thus if checkboxes are available
     */
    isSelectable: {
      type: Boolean,
      default: false
    },

    /**
     * define if entry is disabled - thus if checkboxes are available<br>
     *   will overrule prop isSelectable
     */
    isDisabled: {
      type: Boolean,
      default: false
    },

    /**
     * define if entry will be active upon click
     */
    isActivatable: {
      type: Boolean,
      default: true
    },

    /**
     * define if title should be displayed in bold constantly
     */
    titleBold: {
      type: Boolean,
      default: false
    },

    /**
     * define if thumbnail overlay should be shown
     */
    showThumbnails: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      isSelectedInt: false,
      // how many columns the thumbnail container takes
      columns: 0
    };
  },
  watch: {
    isSelected: function isSelected(val) {
      this.isSelectedInt = val;
    }
  },
  mounted: function mounted() {
    this.setThumbnailColumns();
    this.isSelectedInt = this.isSelected;
  },
  updated: function updated() {
    this.setThumbnailColumns();
  },
  methods: {
    clicked: function clicked() {
      if (this.isDisabled) {
        return;
      }

      if (this.selectActive) {
        this.isSelectedInt = !this.isSelectedInt;
        /**
         * Event emitted when selectActive is true and the entry is clicked
         *
         * @event selected
         * @type { Boolean }
         */

        this.$emit('selected', this.isSelectedInt);
      } else {
        /**
         * Event emitted when entry is clicked and selectActive is false (=checkbox not shown)
         *
         * @event clicked
         * @type { None }
         */
        this.$emit('clicked');
      }
    },
    slideFadeLeave: function slideFadeLeave() {
      // safari fix: somehow transition needs to be triggered manually
      this.$refs.slideFade.$el.style.right = '1px';
    },
    slideFadeAfterLeave: function slideFadeAfterLeave() {
      // sometimes newly duplicated element has no html element yet so
      // check if element exists first
      if (this.$refs.slideFade) {
        // safari fix: reset transition
        this.$refs.slideFade.$el.style.removeProperty('right');
      }
    },

    /**
     * Returns the count of columns that the thumbnail icons take.
     */
    setThumbnailColumns: function setThumbnailColumns() {
      if (this.showThumbnails) {
        // get the current count of thumbnails
        var thumbnailCount = this.$refs.thumbnailContainer.childElementCount; // find the count of columns (each column holds 2 thumbnails)

        this.columns = Math.ceil(thumbnailCount / 2);
      }
    }
  }
};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', {
    ref: "menuEntry",
    class: ['base-menu-entry', {
      'base-menu-entry-activatable': _vm.isActivatable && !_vm.isDisabled,
      'base-menu-entry-active': _vm.isActive,
      'base-menu-entry-no-icon': !_vm.icon,
      'base-menu-entry-disabled': _vm.isDisabled,
      'base-menu-entry-text-fade-out': !_vm.showThumbnails
    }],
    attrs: {
      "tabindex": _vm.isSelectable && _vm.selectActive ? -1 : 0,
      "href": '#' + _vm.title,
      "role": _vm.isSelectable && _vm.selectActive ? '' : 'link'
    },
    on: {
      "keyup": function keyup($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.clicked.apply(null, arguments);
      },
      "click": _vm.clicked
    }
  }, [_vm.icon ? _c('base-icon', {
    ref: "entryIcon",
    staticClass: "base-menu-entry-icon",
    attrs: {
      "name": _vm.icon
    }
  }) : _vm._e(), _vm._ssrNode(" <div" + _vm._ssrClass(null, ['base-menu-entry-text-wrapper', {
    'base-menu-entry-text-slide-overlay': _vm.showThumbnails && _vm.isSelectable
  }]) + " data-v-2bb84c02><div class=\"base-menu-entry-title-description-wrapper\" data-v-2bb84c02><div class=\"base-menu-entry__title-subtext-wrapper\" data-v-2bb84c02>" + (_vm.title ? "<div" + _vm._ssrClass(null, ['base-menu-entry-title', {
    'base-menu-entry-title-bold': _vm.isActive || _vm.titleBold
  }]) + " data-v-2bb84c02>" + _vm._ssrEscape("\n          " + _vm._s(_vm.title) + "\n        ") + "</div>" : "<!---->") + " " + (_vm.subtext ? "<div class=\"base-menu-entry-subtext\" data-v-2bb84c02>" + _vm._ssrEscape("\n          " + _vm._s(_vm.subtext) + "\n        ") + "</div>" : "<!---->") + "</div> <div class=\"base-menu-entry-description\" data-v-2bb84c02>" + _vm._ssrEscape("\n        " + _vm._s(_vm.description) + "\n      ") + "</div></div></div> "), _c('transition-group', {
    ref: "slideFade",
    staticClass: "slide-fade-group",
    attrs: {
      "name": "slide-fade"
    },
    on: {
      "leave": _vm.slideFadeLeave,
      "after-leave": _vm.slideFadeAfterLeave
    }
  }, [_vm.showThumbnails ? _c('div', {
    key: _vm.entryId + 'thumbnail',
    ref: "thumbnailContainer",
    staticClass: "base-menu-entry-thumbnail-container base-menu-entry-text-fade-out",
    style: {
      '--cols': _vm.columns
    }
  }, [_vm._t("thumbnails")], 2) : _vm._e(), _vm._v(" "), _vm.isSelectable && _vm.selectActive && !_vm.isDisabled ? _c('base-checkmark', {
    key: _vm.entryId + 'checkmark',
    staticClass: "base-menu-entry-checkbox",
    attrs: {
      "checked": _vm.isSelected,
      "title": "checkbox",
      "mark-style": "checkbox"
    },
    on: {
      "clicked": _vm.clicked
    }
  }) : _vm._e()], 1)], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-2bb84c02";
/* module identifier */

var __vue_module_identifier__ = "data-v-2bb84c02";
/* 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 BaseMenuEntry = __vue_component__;exports.B=BaseMenuEntry;