'use strict';require('./es.symbol.description-bf683260.js');var objectSpread2=require('./objectSpread2-56f1d323.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('./es.number.constructor-daccdeab.js'),require('./es.array.map-4cfed4ef.js'),require('./web.dom-collections.for-each-c07b0e22.js');var vuedraggable_umd=require('./vuedraggable.umd-72cec8f4.js'),BaseMenuEntry=require('./BaseMenuEntry-512e1426.js'),normalizeComponent=require('./normalize-component-d9981c57.js');require('./export-61511812.js'),require('./array-species-create-c414c2ec.js'),require('./object-keys-12f2c5e5.js'),require('./set-to-string-tag-240bb3b0.js'),require('./array-iteration-f8b4483d.js'),require('./function-bind-context-e4685306.js'),require('./classof-819fc780.js'),require('./is-regexp-d6f1551e.js'),require('./object-set-prototype-of-dfa14cf5.js'),require('./array-method-has-species-support-983ac207.js'),require('./dom-iterables-e2602b7e.js'),require('./array-method-is-strict-99341ee3.js'),require('./BaseIcon-1ed3bf6e.js'),require('./es.array.concat-bb8715dc.js'),require('./create-property-240c71a5.js'),require('./es.array.join-88750c41.js'),require('./BaseCheckmark-fa4f96af.js'),require('./utils-2e136d65.js'),require('./typeof-6b9e62b8.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./regexp-exec-abstract-216cd44a.js'),require('./string-multibyte-a2dff6e3.js'),require('./regexp-flags-abc49c4a.js'),require('./es.string.split-98e29ede.js'),require('./es.regexp.to-string-5606f728.js'),require('./es.string.replace-25e9e098.js'),require('./es.array.sort-7d68b195.js');/**
 * Base Component for SideBar Menu Entries<br>
 *   (this component is currently not ssr-capable)
 */

var script = {
  name: 'BaseMenuList',
  components: {
    BaseMenuEntry: BaseMenuEntry.B,
    Draggable: vuedraggable_umd.a
  },
  props: {
    /**
     * define if entries are selectable -> d.h. the selectboxes are showing
     */
    selectActive: {
      type: Boolean,
      default: false
    },

    /**
     * list of menu entries - array of objects <br>
     *   Entry properties that can be displayed: <br>
     *     *required*:<br>
     *      **id** {string}: give every item an unique id<br>
     *     *optional*:<br>
     *      **title** {string}: main text line in the list item<br>
     *      **description**: {string}: second text line in the list item<br>
     *      **active** { boolean}: steer from outside if item should be displayed active (with left
     *        side color border)<br>
     *      **selected** {boolean}: steer from outside if entry select box should be checked<br>
     *      **disabled** {boolean}: steer from outside if entry select box should be disabled<br>
     *      **icon** {string}: a valid [BaseIcon](#baseicon) icon name<br>
     *      <br>
     *      Also see [BaseMenuEntry](#basemenuentry) component for more information on
     *        the mentioned properties.
     */
    list: {
      type: Array,
      default: function _default() {
        return [];
      },
      validator: function validator(val) {
        return val.every(function (item) {
          return Object.keys(item).includes('id');
        });
      }
    },

    /**
     * index of the entry that should currently be active
     * TODO: check if it would be better to use id here!
     */
    activeEntry: {
      type: Number,
      default: -1
    },

    /**
     * provide a list of entries that should appear selected
     */
    selectedList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * specify the group name for the drag receiver
     */
    dragName: {
      type: String,
      default: 'menuEntry'
    }
  },
  data: function data() {
    return {
      // have internally necessary props in separate array to prevent issues with
      // outside store mutations
      entryProps: [],
      dragging: false,
      dragAndDropCapable: false,
      isDraggable: true,
      resizeTimeout: null
    };
  },
  watch: {
    list: function list() {
      this.setInternalVar();
    },
    activeEntry: function activeEntry(val) {
      var _this = this;

      this.entryProps.map(function (item) {
        return _this.$set(item, 'active', false);
      });

      if (val >= 0 && this.entryProps[val]) {
        this.$set(this.entryProps[val], 'active', true);
      }
    },
    selectActive: function selectActive(val) {
      var _this2 = this;

      if (!val) {
        this.entryProps.forEach(function (entry) {
          return _this2.$set(entry, 'selected', false);
        });
      } else {
        this.setInternalVar();
      }
    },
    selectedList: function selectedList() {
      this.setInternalVar();
    }
  },
  created: function created() {
    this.setInternalVar();
  },
  mounted: function mounted() {
    var _this3 = this;

    this.isDraggable = !this.isMobile();
    this.dragAndDropCapable = 'DragEvent' in window;
    window.addEventListener('resize', function () {
      clearTimeout(_this3.resizeTimeout);
      _this3.resizeTimeout = setTimeout(function () {
        _this3.isDraggable = !_this3.isMobile();
      }, 250);
    }); // Set _sortable.nativeDraggable directly due
    // prop force-fallback in vue-draggable is not propagated to sortablejs if updated
    // eslint-disable-next-line

    if (typeof this.$refs.draggable._sortable.nativeDraggable !== 'undefined') {
      // eslint-disable-next-line
      this.$refs.draggable._sortable.nativeDraggable = this.dragAndDropCapable;
    } else {
      // eslint-disable-next-line
      console.warn('The option "nativeDraggable" in sortableJS is missing. ' + 'Please check for changes https://github.com/SortableJS/sortablejs.');
    }
  },
  methods: {
    // this function is called when a menu entry is clicked (when checkboxes not active)
    activateItem: function activateItem(index) {
      /**
       * event emitted when a menu entry is clicked
       * - returning the index of the respective entry
       *
       * @event clicked
       * @type { String }
       */
      this.$emit('clicked', index);
    },
    selectItem: function selectItem(index, selected) {
      this.$set(this.entryProps[index], 'selected', selected);
      /**
       * event emitted when entry is clicked and select is active
       * - returns the index and selected (true/false)
       *
       * @event selected
       * @type { Object }
       */

      this.$emit('selected', {
        index: index,
        selected: selected
      });
    },
    setInternalVar: function setInternalVar() {
      var _this4 = this;

      this.entryProps = this.list.map(function (entry) {
        return objectSpread2.a({}, {
          selected: entry.selected || _this4.selectedList.includes(entry.id),
          active: entry.active || false,
          error: entry.error || false
        });
      });

      if (this.entryProps.length && this.activeEntry >= 0) {
        this.$set(this.entryProps[this.activeEntry], 'active', true);
      }
    },
    dragStart: function dragStart() {
      this.dragging = true;
    },
    dragEnd: function dragEnd() {
      this.dragging = false;
    },
    modifyDragItem: function modifyDragItem(dataTransfer, dragEl) {
      var entryIcon = dragEl.getElementsByTagName('svg')[0];
      var size = "".concat(entryIcon.clientHeight * 2, "px"); // remove previous drag items from the body again if necessary

      var elem = document.getElementById('drag-icon');

      if (elem) {
        elem.parentNode.removeChild(elem);
      } // clone the svg used in this entry


      var pic = entryIcon.cloneNode(true);
      pic.id = 'drag-icon';
      pic.style.height = size;
      pic.style.maxHeight = size;
      pic.style.width = size;
      pic.style.backgroundColor = 'white';
      pic.style.position = 'absolute';
      pic.style.top = '-99999px';
      pic.style.left = '-99999px'; // add the element to the dom

      document.body.appendChild(pic); // Edge does not support setDragImage

      if (typeof DataTransfer.prototype.setDragImage === 'function') {
        dataTransfer.setDragImage(pic, 0, 0);
      }

      dataTransfer.setData('draggable', '');
    },
    isMobile: function isMobile() {
      return window.innerWidth < 640;
    }
  }
};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('draggable', {
    ref: "draggable",
    staticClass: "base-menu-list",
    attrs: {
      "sort": false,
      "disabled": !_vm.isDraggable || _vm.selectActive,
      "group": {
        name: _vm.dragName,
        pull: 'clone',
        put: false
      },
      "set-data": _vm.modifyDragItem,
      "force-fallback": !_vm.dragAndDropCapable,
      "fallback-on-body": !_vm.dragAndDropCapable,
      "tag": "ul"
    },
    on: {
      "start": _vm.dragStart,
      "end": _vm.dragEnd
    },
    model: {
      value: _vm.list,
      callback: function callback($$v) {
        _vm.list = $$v;
      },
      expression: "list"
    }
  }, _vm._l(_vm.list, function (item, index) {
    return _c('li', {
      key: item.id || item.title,
      staticClass: "base-menu-list__list-entry"
    }, [_c('base-menu-entry', {
      ref: "menuEntry",
      refInFor: true,
      attrs: {
        "entry-id": item.id,
        "title": item.title,
        "is-active": _vm.entryProps[index].active,
        "is-selected": _vm.entryProps[index].selected,
        "is-disabled": item.disabled,
        "icon": item.icon,
        "description": item.description,
        "is-selectable": true,
        "select-active": _vm.selectActive
      },
      on: {
        "clicked": function clicked($event) {
          return _vm.activateItem(index);
        },
        "selected": function selected($event) {
          return _vm.selectItem(index, $event);
        }
      },
      scopedSlots: _vm._u([{
        key: "thumbnails",
        fn: function fn() {
          return [_vm._t("thumbnails", null, {
            "item": item
          })];
        },
        proxy: true
      }], null, true)
    })], 1);
  }), 0);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

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