import './regexp-exec-abstract-04d119fc.js';
import './es.regexp.test-86f2777f.js';
import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { _ as _typeof } from './typeof-6c6d8d7a.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.json.stringify-9b0e9796.js';
import './es.array.map-093cfbca.js';
import './es.array.sort-92cbfa54.js';
import './es.object.to-string-5a59fbfc.js';
import './web.dom-collections.for-each-917714ef.js';
import { a as vuedraggable_umd } from './vuedraggable.umd-8fe09713.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import BaseChipsInput from './BaseChipsInput-d1f19de2.js';
import BaseChip from './BaseChip-a5109284.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './export-ecf4b1cb.js';
import './string-multibyte-88926e02.js';
import './regexp-flags-b5fc4ddb.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-afb281e6.js';
import './array-method-has-species-support-d96108b0.js';
import './create-property-c00b5c27.js';
import './array-method-is-strict-903f485b.js';
import './classof-b10e7604.js';
import './dom-iterables-b6f5ef3b.js';
import './es.array.includes-1f433385.js';
import './object-keys-a5d351f7.js';
import './es.array.concat-9f3136dc.js';
import './es.array.join-6ca857ff.js';
import './utils-21c04279.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './es.array.slice-e9c3dd03.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.string.includes-53dbb113.js';
import './es.object.keys-6369b884.js';
import './toConsumableArray-fb122614.js';
import './es.array.filter-9f634d7c.js';
import './BaseChipsInputField-9d9254f8.js';
import './i18n-e25edebe.js';
import './es.array.from-3ef944e4.js';
import './es.string.iterator-eb7ab984.js';
import './set-to-string-tag-452fb9b0.js';
import './object-set-prototype-of-9853ad1a.js';
import './BaseInput-aea1e5fe.js';
import './es.number.constructor-16a232f3.js';
import './index-b4d779f7.js';
import './navigateList-733ab7c4.js';
import './BaseHoverBox-54eeaa46.js';
import './BaseImageBox-4087fcc1.js';
import './es.symbol.description-3b56bced.js';
import './BaseBox-a4447dc8.js';
import './BaseImage-7306e391.js';
import './es.object.values-a2198dd7.js';
import 'lazysizes';

/**
 * A very specialized component based on [BaseChipsInput](#basechipsinput)
 * in order to assign additional values (e.g. 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: 'selected-changed'
  },
  props: {
    /**
     * list of selectable options objects with at least an identifier and a label property<br>
     * property names can be set with props identifierPropertyName and labelPropertyName
     */
    list: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * @model
     *
     * list of already selected options objects with at least an identifier and a label property
     * and a property to use for the secondary drop down ('additional property'), displayed as
     * chips<br>
     * property names can be set with props identifierPropertyName, labelPropertyName and
     * additionalPropertyName
     */
    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 options 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
    },

    /**
     * Additional property options will set the drop down available for the selected entries<br>
     * needs to be an object with at least a label and an identifier property, using names set in
     * identifierPropertyName and labelPropertyName
     */
    additionalPropOptions: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * specify a placeholder of the additional property input field
     */
    additionalPropPlaceholder: {
      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: ''
    },

    /**
     * set a chips text for adding a new chip
     * (alternatively add a 'form.Add' value to your localization files)
     * if allowUnknownEntries is true please add this in one form or another!
     */
    addNewChipText: {
      type: String,
      default: ''
    },

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

    /**
     * specify the object property that should be used as value to be displayed
     */
    labelPropertyName: {
      type: String,
      default: 'label'
    },

    /**
     * define the name of the property that is relevant for the additional drop down
     * once a value was selected from the primary drop down
     */
    additionalPropertyName: {
      type: String,
      default: 'roles'
    },

    /**
     * mark as required field (currently only used for aria-required)
     */
    required: {
      type: Boolean,
      default: false
    },

    /**
     * mark the form field as invalid and ideally also provide an error message
     * to display below the form field<br>
     * for an example see [BaseInput](#baseinput)
     */
    invalid: {
      type: Boolean,
      default: false
    },

    /**
     * set true if input field should be disabled<br>
     * for an example see [BaseInput](#baseinput)
     */
    disabled: {
      type: Boolean,
      default: false
    },

    /**
     * add an error message to be displayed below form field if field is invalid<br>
     * for an example see [BaseInput](#baseinput)
     */
    errorMessage: {
      type: String,
      default: ''
    },

    /**
     * define if error icon should be shown<br>
     * for an example see [BaseInput](#baseinput)
     */
    showErrorIcon: {
      type: Boolean,
      default: false
    },

    /**
     * if true a remove icon will be shown allowing to remove
     * all input at once<br>
     * for an example see [BaseInput](#baseinput)
     */
    clearable: {
      type: Boolean,
      default: false
    },

    /**
     * specify additional input field styling
     */
    inputClass: {
      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
    // additonal property (roles)!
    // leads to unwanted behaviour else (creating multilang object)
    chipsInputProps: function chipsInputProps() {
      var newProps = _objectSpread2({}, this.$props);

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

      delete newProps.additionalPropOptions;
      delete newProps.additionalPropPlaceholder;
      delete newProps.additionalPropertyName;
      return newProps;
    }
  },
  watch: {
    selectedList: function selectedList(val) {
      console.log('selected list changed');
      console.log(JSON.stringify(val));
      console.log(JSON.stringify(this.selectedBelowListInt));
      this.createInternalList(val);
      console.log(JSON.stringify(val));
      console.log(JSON.stringify(this.selectedBelowListInt));
    }
  },
  created: function created() {
    this.createInternalList(this.selectedList);
  },
  methods: {
    test: function test(event) {
      console.log('test', event);
    },
    addedEntry: function addedEntry(list) {
      var _this = this;

      this.emitInternalList(list.map(function (entry) {
        var _objectSpread3;

        if (_typeof(entry) === 'object') {
          return _objectSpread2(_objectSpread2({}, entry), {}, _defineProperty({}, _this.additionalPropertyName, entry[_this.additionalPropertyName] || []));
        }

        return _objectSpread2({}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, _this.labelPropertyName, entry), _defineProperty(_objectSpread3, _this.additionalPropertyName, entry[_this.additionalPropertyName] || []), _objectSpread3));
      }));
    },
    removeEntry: function removeEntry(evt, index) {
      var item = this.selectedBelowListInt.splice(index, 1);
      this.$set(item, this.additionalPropertyName, {});
      this.emitInternalList(this.selectedBelowListInt);
    },
    updateList: function updateList(evt, list) {
      console.log('update list'); // destroy drag element again

      var elem = document.getElementById('chip-below-drag');
      console.log(elem);

      if (elem) {
        console.log('elem present');
        elem.parentNode.removeChild(elem);
      }

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

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

        if (_typeof(entry) === 'object') {
          var _objectSpread4;

          return _objectSpread2(_objectSpread2({}, (_objectSpread4 = {}, _defineProperty(_objectSpread4, _this2.additionalPropertyName, []), _defineProperty(_objectSpread4, "idInt", _this2.identifierPropertyName && (entry[_this2.identifierPropertyName] === 0 || entry[_this2.identifierPropertyName]) ? entry[_this2.identifierPropertyName] : entry[_this2.labelPropertyName] + index), _objectSpread4)), entry);
        }

        return _objectSpread2({}, (_objectSpread5 = {}, _defineProperty(_objectSpread5, _this2.labelPropertyName, entry), _defineProperty(_objectSpread5, "idInt", _this2.list.length + index), _defineProperty(_objectSpread5, _this2.additionalPropertyName, []), _objectSpread5));
      });
    },
    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 selected-changed
       * @param {Object} sendArr - the altered list
       *
       */

      console.log(sendArr);
      this.$emit('selected-changed', 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
      });
    }
  }
};

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: {
      "sortable": true,
      "is-loading": _vm.isLoading,
      "sort-text": _vm.sortText,
      "sort-name": _vm.sortName,
      "display-chips-inline": false
    },
    on: {
      "selected-changed": _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: "label-addition",
      fn: function fn() {
        return [_vm._t("label-addition")];
      },
      proxy: true
    }, {
      key: "input-field-addition-before",
      fn: function fn() {
        return [_vm._t("input-field-addition-before")];
      },
      proxy: true
    }, {
      key: "input-field-addition-after",
      fn: function fn() {
        return [_vm._t("input-field-addition-after")];
      },
      proxy: true
    }, {
      key: "post-input-field",
      fn: function fn() {
        return [_vm._t("post-input-field")];
      },
      proxy: true
    }, {
      key: "error-icon",
      fn: function fn() {
        return [_vm._t("error-icon")];
      },
      proxy: true
    }, {
      key: "remove-icon",
      fn: function fn() {
        return [_vm._t("remove-icon")];
      },
      proxy: true
    }, {
      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,
      "force-fallback": false,
      "group": "people",
      "handle": ".base-chips-below-list-icon-wrapper",
      "chosen-class": "test"
    },
    on: {
      "start": _vm.test,
      "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 + "_" + _vm.additionalPropertyName + "_" + (entry[_vm.identifierPropertyName] || entry.idInt),
        "show-label": false,
        "label": _vm.label + '-' + _vm.additionalPropertyName,
        "list": _vm.additionalPropOptions,
        "show-input-border": false,
        "allow-dynamic-drop-down-entries": false,
        "placeholder": _vm.additionalPropPlaceholder,
        "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-changed": function selectedChanged($event) {
          return _vm.updateAdditionalProperty($event, index);
        }
      },
      model: {
        value: entry[_vm.additionalPropertyName],
        callback: function callback($$v) {
          _vm.$set(entry, _vm.additionalPropertyName, $$v);
        },
        expression: "entry[additionalPropertyName]"
      }
    })], 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 };
