import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { _ as _typeof } from './typeof-6c6d8d7a.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.array.map-6e99e953.js';
import './es.array.sort-429613bb.js';
import './es.object.to-string-363bb00e.js';
import './web.dom-collections.for-each-88fb2ed7.js';
import { a as vuedraggable_umd } from './vuedraggable.umd-87a1f38a.js';
import BaseIcon from './BaseIcon-97f2c0df.js';
import BaseChipsInput from './BaseChipsInput-bb63268b.js';
import BaseChip from './BaseChip-e5e5f5a8.js';
import { n as normalizeComponent } from './normalize-component-f552f2b0.js';
import './export-ca205aa3.js';
import './array-iteration-174e15bc.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-734a2b2d.js';
import './array-method-has-species-support-4880738d.js';
import './create-property-64305cbf.js';
import './array-method-is-strict-b717b087.js';
import './classof-efe356f2.js';
import './dom-iterables-b6f5ef3b.js';
import './es.array.includes-429b943f.js';
import './object-keys-2117de4f.js';
import 'vue-svgicon';
import './utils-1ee736f4.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6d270396.js';
import './regexp-exec-abstract-f3a4fb3d.js';
import './string-multibyte-2334bbf7.js';
import './regexp-flags-0e12a922.js';
import './es.string.split-e8138ba0.js';
import './is-regexp-2d7aa8f2.js';
import './es.array.slice-8edbe7ac.js';
import './es.regexp.to-string-60b34f50.js';
import './es.string.replace-71289216.js';
import './es.string.includes-7cd9db5f.js';
import './es.object.keys-8d50ea2f.js';
import './toConsumableArray-fb122614.js';
import './es.array.filter-2c1d67da.js';
import './es.json.stringify-8f7fad43.js';
import './BaseChipsInputField-56ea478d.js';
import './i18n-380f73e4.js';
import './es.array.from-e253e8bc.js';
import './es.string.iterator-ca8d13fd.js';
import './set-to-string-tag-8223b960.js';
import './object-set-prototype-of-815338f2.js';
import './BaseInput-5f3adef2.js';
import './es.array.concat-2ab9770c.js';
import './es.number.constructor-806b1a22.js';
import './index-3299b831.js';
import './navigateList-733ab7c4.js';
import './BaseHoverBox-2fdf9c68.js';
import './BaseImageBox-47a03672.js';
import './es.symbol.description-ff7a02e9.js';
import './BaseBox-791c3ae3.js';
import './BaseImage-a23d437b.js';
import './es.object.values-3bb053e1.js';
import 'lazysizes';

/**
 * A very specialized component based on [BaseChipsInput](#basechipsinput)
 * in order to assign roles to selected entries)]
 *
 * slots 'drop-down-entry' and 'no-options' of component [BaseChipsInput](#basechipsinput)
 * are available here as well
 *
 */

var script = {
  name: 'BaseChipsBelow',
  components: {
    BaseChipsInput: BaseChipsInput,
    Draggable: vuedraggable_umd,
    BaseChip: BaseChip,
    BaseIcon: BaseIcon
  },
  model: {
    prop: 'selectedList',
    event: 'list-change'
  },
  props: {
    /**
     * list of selectable options (strings or objects)
     */
    list: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * @model
     *
     * list of already selected options (strings or objects), displayed as chips
     */
    selectedList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     if field is occuring more then once - set an id
     */
    id: {
      type: String,
      default: ''
    },

    /**
     * input field label
     */
    label: {
      type: String,
      required: true
    },

    /**
     * define if label should be visible
     */
    showLabel: {
      type: Boolean,
      default: true
    },

    /**
     * input field placeholder
     */
    placeholder: {
      type: String,
      default: null
    },

    /**
     * message displayed when no selectable obtions are available
     */
    dropDownNoOptionsInfo: {
      type: String,
      default: 'No options available'
    },

    /**
     * define if the user can add an option that is not in the list
     */
    // can the user add Entries that are not available in the vocabulary (selectable list)
    allowUnknownEntries: {
      type: Boolean,
      default: false
    },

    /**
     * define only a single or multiple options can be selected
     */
    // define if one or several entries can be selected from drop down menu
    allowMultipleEntries: {
      type: Boolean,
      default: true
    },

    /**
     * define if selectable list options should be fetched every time of if the
     * list passed in the beginning is used
     */
    allowDynamicDropDownEntries: {
      type: Boolean,
      default: false
    },

    /**
     * this prop was added because there was some action needed to be done before entry was added
     * so this is possible if entry is not added to selectedList directly but only in parent
     * component
     */
    addSelectedEntryDirectly: {
      type: Boolean,
      default: true
    },

    /**
     * Role options will set the roles available for the selected entries
     */
    roleOptions: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * specify a placeholder of the roles input field
     */
    rolesPlaceholder: {
      type: String,
      default: 'Select role(s)'
    },

    /**
     * set content for the info box activatable by click <br>
     * see BaseHoverBox for more details
     */
    hoverboxContent: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * show spinner to indicate that something is loading
     * (for dynamically fetched entries that need to do backend requests)
     */
    isLoading: {
      type: Boolean,
      default: false
    },

    /**
     * if sorting is enabled this will be the text shown in the button
     */
    sortText: {
      type: String,
      default: 'Sort A – Z'
    },

    /**
     * if true sorting will consider the last string in a label or if a comma is
     * present the string before the comma
     */
    sortName: {
      type: Boolean,
      default: false
    },

    /**
     * set a language (ISO 639-1)
     */
    language: {
      type: String,
      default: ''
    },

    /**
     * specify the object property that should be used as identifier
     */
    identifierPropertyName: {
      type: String,
      default: ''
    },

    /**
     * specify the object property that should be used as value to be displayed
     */
    labelPropertyName: {
      type: String,
      default: ''
    }
  },
  data: function data() {
    return {
      chipsArray: [],
      selectedBelowListInt: [],
      chipActive: -1
    };
  },
  computed: {
    // need to filter language from $props for chips input component since only needed for roles!
    // leads to unwanted behaviour else (creating multilang object)
    chipsInputProps: function chipsInputProps() {
      var newProps = _objectSpread2({}, this.$props);

      delete newProps.language; // also remove role related props since unknown to chips input component

      delete newProps.roleOptions;
      delete newProps.rolesPlaceholder;
      return newProps;
    }
  },
  watch: {
    selectedList: function selectedList(val) {
      this.createInternalList(val);
    }
  },
  created: function created() {
    this.createInternalList(this.selectedList);
  },
  methods: {
    addedEntry: function addedEntry(list) {
      var _this = this;

      this.emitInternalList(list.map(function (entry) {
        var _objectSpread2$1;

        if (_typeof(entry) === 'object') {
          return _objectSpread2(_objectSpread2({}, entry), {
            roles: entry.roles || []
          });
        }

        return _objectSpread2({}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, _this.labelPropertyName, entry), _defineProperty(_objectSpread2$1, "roles", entry.roles || []), _objectSpread2$1));
      }));
    },
    removeEntry: function removeEntry(evt, index) {
      var item = this.selectedBelowListInt.splice(index, 1);
      this.$set(item, 'roles', {});
      this.emitInternalList(this.selectedBelowListInt);
    },
    updateList: function updateList(evt, list) {
      // destroy drag element again
      document.getElementById('chip-below-drag');

      this.emitInternalList(list);
    },
    updateRoles: function updateRoles(evt, index) {
      this.$set(this.selectedBelowListInt[index], 'roles', evt);
      this.emitInternalList(this.selectedBelowListInt);
    },
    createInternalList: function createInternalList(val) {
      var _this2 = this;

      this.selectedBelowListInt = val.map(function (entry, index) {
        var _objectSpread3;

        if (_typeof(entry) === 'object') {
          return _objectSpread2(_objectSpread2({}, {
            roles: [],
            idInt: _this2.identifierPropertyName && (entry[_this2.identifierPropertyName] === 0 || entry[_this2.identifierPropertyName]) ? entry[_this2.identifierPropertyName] : entry[_this2.labelPropertyName] + index
          }), entry);
        }

        return _objectSpread2({}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, _this2.labelPropertyName, entry), _defineProperty(_objectSpread3, "idInt", _this2.list.length + index), _defineProperty(_objectSpread3, "roles", []), _objectSpread3));
      });
    },
    emitInternalList: function emitInternalList(val) {
      var _this3 = this;

      var sendArr = [];
      val.forEach(function (sel, index) {
        return _this3.$set(sendArr, index, _objectSpread2({}, sel));
      });
      sendArr.forEach(function (sel) {
        return _this3.$delete(sel, 'idInt');
      });
      /**
       * propagate list change from dragging event to parent
       *
       * @event list-change
       * @param {Object} sendArr - the altered list
       *
       */

      this.$emit('list-change', sendArr);
    },
    modifyChipValue: function modifyChipValue(event, index) {
      if (!event) {
        this.selectedBelowListInt.splice(index, 1);
      } else {
        var modifiedEntry = _objectSpread2({}, this.selectedBelowListInt[index]);

        if (this.identifierPropertyName) {
          this.$set(modifiedEntry, this.identifierPropertyName, '');
        }

        this.$set(modifiedEntry, this.labelPropertyName, event);
        this.$set(this.selectedBelowListInt, index, modifiedEntry);
      }

      this.emitInternalList(this.selectedBelowListInt);
    },
    fetchDropDownEntries: function fetchDropDownEntries(params) {
      /**
       * if drop down entries dynamically set - fetch new entries on input
       *
       * @event fetch-dropdown-entries
       * @param {Object} params - an Object with the following properties:
       * @property {string} value - the input string
       * @property {string} type - the labelPropertyName that was specified
       *
       */
      this.$emit('fetch-dropdown-entries', params);
    },
    hoverBoxActive: function hoverBoxActive(value, entry) {
      /**
       * event emitted on show / hide hoverbox
       *
       * @param {Object} obj - an object with the following properties:
       * @property {boolean} value - value describing if hoverbox active is true or false
       * @property {Object} option - the option for which the hoverbox was activated
       */
      this.$emit('hoverbox-active', {
        value: value,
        entry: entry
      });
    }
  }
};

/* 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('div', {
    staticClass: "base-chips-below"
  }, [_c('BaseChipsInput', _vm._b({
    ref: "chipsInput",
    attrs: {
      "chips-inline": false,
      "sortable": true,
      "is-loading": _vm.isLoading,
      "sort-text": _vm.sortText,
      "sort-name": _vm.sortName,
      "display-chips-inline": false
    },
    on: {
      "selected": _vm.addedEntry,
      "fetch-dropdown-entries": _vm.fetchDropDownEntries
    },
    scopedSlots: _vm._u([{
      key: "drop-down-entry",
      fn: function fn(props) {
        return [_vm._t("drop-down-entry", null, {
          "item": props.item
        })];
      }
    }, {
      key: "no-options",
      fn: function fn() {
        return [_vm._t("no-options")];
      },
      proxy: true
    }], null, true),
    model: {
      value: _vm.selectedBelowListInt,
      callback: function callback($$v) {
        _vm.selectedBelowListInt = $$v;
      },
      expression: "selectedBelowListInt"
    }
  }, 'BaseChipsInput', _vm.chipsInputProps, false)), _vm._v(" "), _c('draggable', {
    attrs: {
      "animation": 200,
      "group": "people",
      "handle": ".base-chips-below-list-icon-wrapper"
    },
    on: {
      "end": function end($event) {
        return _vm.updateList($event, _vm.selectedBelowListInt);
      }
    },
    model: {
      value: _vm.selectedBelowListInt,
      callback: function callback($$v) {
        _vm.selectedBelowListInt = $$v;
      },
      expression: "selectedBelowListInt"
    }
  }, _vm._l(_vm.selectedBelowListInt, function (entry, index) {
    return _c('div', {
      key: 'item' + entry.idInt,
      staticClass: "base-chips-below-list-item",
      attrs: {
        "name": entry[_vm.labelPropertyName]
      },
      on: {
        "mousedown": function mousedown($event) {
          _vm.chipActive = index;
        }
      }
    }, [_c('div', {
      key: 'line' + entry.idInt,
      staticClass: "base-chips-below-list-item-line"
    }, [_c('div', {
      key: 'iconwrapper' + entry.idInt,
      staticClass: "base-chips-below-list-icon-wrapper"
    }, [_c('base-icon', {
      key: 'icon' + entry.idInt,
      staticClass: "svg-icon base-chips-below-list-icon",
      attrs: {
        "name": "drag-lines"
      }
    })], 1), _vm._v(" "), _c('div', {
      key: 'chip-wrapper' + entry.idInt,
      staticClass: "base-chips-below-list-item-chip-wrapper"
    }, [_c('BaseChip', {
      key: 'chip' + entry.idInt,
      ref: "selectedChip",
      refInFor: true,
      staticClass: "base-chips-input-chip",
      attrs: {
        "id": 'chips-below' + index,
        "is-linked": !entry.edited && (entry[_vm.identifierPropertyName] === 0 || !!entry[_vm.identifierPropertyName]),
        "hover-box-content": _vm.hoverboxContent
      },
      on: {
        "value-changed": function valueChanged($event) {
          return _vm.modifyChipValue($event, index);
        },
        "hoverbox-active": function hoverboxActive($event) {
          return _vm.hoverBoxActive($event, entry);
        },
        "remove-entry": function removeEntry($event) {
          return _vm.removeEntry($event, index);
        }
      },
      model: {
        value: entry[_vm.labelPropertyName],
        callback: function callback($$v) {
          _vm.$set(entry, _vm.labelPropertyName, $$v);
        },
        expression: "entry[labelPropertyName]"
      }
    })], 1), _vm._v(" "), _c('BaseChipsInput', {
      key: 'input_' + entry.idInt,
      staticClass: "base-chips-below-chips-input",
      attrs: {
        "id": _vm.id + "_roles_" + (entry[_vm.identifierPropertyNameInt] || entry.idInt),
        "show-label": false,
        "label": _vm.label + '-roles',
        "list": _vm.roleOptions,
        "show-input-border": false,
        "allow-dynamic-drop-down-entries": false,
        "placeholder": _vm.rolesPlaceholder,
        "always-linked": true,
        "language": _vm.language,
        "draggable": true,
        "drop-down-no-options-info": _vm.dropDownNoOptionsInfo,
        "identifier-property-name": _vm.identifierPropertyName,
        "label-property-name": _vm.labelPropertyName
      },
      on: {
        "selected": function selected($event) {
          return _vm.updateRoles($event, index);
        }
      },
      model: {
        value: entry.roles,
        callback: function callback($$v) {
          _vm.$set(entry, "roles", $$v);
        },
        expression: "entry.roles"
      }
    })], 1)]);
  }), 0)], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* 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 BaseChipsBelow = __vue_component__;

export { BaseChipsBelow as default };
