import './es.symbol.description-aad7a663.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.object.to-string-9e0d4e1d.js';
import './es.array.includes-d05e3b05.js';
import './es.string.includes-00e9ada6.js';
import './es.object.keys-9aa2f274.js';
import './es.number.constructor-5832cadd.js';
import './es.array.map-2dfef513.js';
import './web.dom-collections.for-each-ccc220dc.js';
import { a as vuedraggable_umd } from './vuedraggable.umd-f84261c3.js';
import { B as BaseMenuEntry } from './BaseMenuEntry-bf91b21b.js';
import { n as normalizeComponent } from './normalize-component-1b2cdbb6.js';
import './well-known-symbol-6e9136be.js';
import './array-species-create-6fc0b2c4.js';
import './object-keys-24d2d6fd.js';
import './set-to-string-tag-aa9c05b1.js';
import './array-iteration-ec419780.js';
import './function-bind-context-b3fabf77.js';
import './defineProperty-18999f8e.js';
import './classof-2816ca36.js';
import './is-regexp-58409ce7.js';
import './object-set-prototype-of-a5b268a6.js';
import './array-method-has-species-support-4ec91b65.js';
import './dom-iterables-b6f5ef3b.js';
import './array-method-is-strict-52649d4d.js';
import './BaseIcon-d0b5435d.js';
import './es.array.concat-669570ef.js';
import './create-property-2fc26c80.js';
import './es.array.join-407e20e6.js';
import './BaseCheckmark-d0c46478.js';
import './es.array.slice-27d0c7ca.js';
import './utils-758ec5e2.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './regexp-exec-abstract-6a5efbab.js';
import './string-multibyte-1626d420.js';
import './regexp-flags-e2ab70ab.js';
import './es.string.split-7ed30d2b.js';
import './es.regexp.to-string-71ed70dc.js';
import './es.string.replace-b4ea85c2.js';
import './es.array.sort-fea6d291.js';

/**
 * Base Component for SideBar Menu Entries<br>
 *   (this component is currently not ssr-capable)
 */

var script = {
  name: 'BaseMenuList',
  components: {
    BaseMenuEntry: BaseMenuEntry,
    Draggable: vuedraggable_umd
  },
  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 {
      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({}, {
          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-33fec96c";
/* 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 BaseMenuList = __vue_component__;

export { BaseMenuList as default };
