'use strict';var objectSpread2=require('./objectSpread2-56f1d323.js'),_typeof=require('./typeof-6b9e62b8.js');require('./es.array.map-4cfed4ef.js'),require('./es.array.sort-7d68b195.js'),require('./es.object.to-string-f27a75a8.js'),require('./web.dom-collections.for-each-c07b0e22.js');var vuedraggable_umd=require('./vuedraggable.umd-72cec8f4.js'),BaseIcon=require('./BaseIcon-1ed3bf6e.js'),BaseChipsInput=require('./BaseChipsInput-f95a0827.js'),BaseChip=require('./BaseChip-36c96f71.js'),normalizeComponent=require('./normalize-component-d9981c57.js');require('./export-61511812.js'),require('./array-iteration-f8b4483d.js'),require('./function-bind-context-e4685306.js'),require('./array-species-create-c414c2ec.js'),require('./array-method-has-species-support-983ac207.js'),require('./create-property-240c71a5.js'),require('./array-method-is-strict-99341ee3.js'),require('./classof-819fc780.js'),require('./dom-iterables-e2602b7e.js'),require('./es.array.includes-3990bfec.js'),require('./object-keys-12f2c5e5.js'),require('./es.array.concat-bb8715dc.js'),require('./es.array.join-88750c41.js'),require('./utils-2e136d65.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('./is-regexp-d6f1551e.js'),require('./es.regexp.to-string-5606f728.js'),require('./es.string.replace-25e9e098.js'),require('./es.string.includes-ec03e639.js'),require('./es.object.keys-c57f02bd.js'),require('./toConsumableArray-b41bc2e2.js'),require('./es.array.filter-6fabfac0.js'),require('./es.json.stringify-f88f52bf.js'),require('./BaseChipsInputField-75402eb1.js'),require('./i18n-68e039d3.js'),require('./es.array.from-6c133395.js'),require('./es.string.iterator-97f3177b.js'),require('./set-to-string-tag-240bb3b0.js'),require('./object-set-prototype-of-dfa14cf5.js'),require('./BaseInput-6885694c.js'),require('./es.number.constructor-daccdeab.js'),require('./index-9dadef01.js'),require('./navigateList-43bf9e6c.js'),require('./BaseHoverBox-0955c07c.js'),require('./BaseImageBox-977aaf0b.js'),require('./es.symbol.description-bf683260.js'),require('./BaseBox-1df1f27d.js'),require('./BaseImage-b2322064.js'),require('./es.object.values-1f44a4ee.js'),require('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["default"],
    Draggable: vuedraggable_umd.a,
    BaseChip: BaseChip["default"],
    BaseIcon: BaseIcon["default"]
  },
  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.a({}, 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) {
      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 _objectSpread3;

        if (_typeof._(entry) === 'object') {
          return objectSpread2.a(objectSpread2.a({}, entry), {}, objectSpread2._({}, _this.additionalPropertyName, entry[_this.additionalPropertyName] || []));
        }

        return objectSpread2.a({}, (_objectSpread3 = {}, objectSpread2._(_objectSpread3, _this.labelPropertyName, entry), objectSpread2._(_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) {
      // destroy drag element again
      document.getElementById('chip-below-drag');

      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.a(objectSpread2.a({}, (_objectSpread4 = {}, objectSpread2._(_objectSpread4, _this2.additionalPropertyName, []), objectSpread2._(_objectSpread4, "idInt", _this2.identifierPropertyName && (entry[_this2.identifierPropertyName] === 0 || entry[_this2.identifierPropertyName]) ? entry[_this2.identifierPropertyName] : entry[_this2.labelPropertyName] + index), _objectSpread4)), entry);
        }

        return objectSpread2.a({}, (_objectSpread5 = {}, objectSpread2._(_objectSpread5, _this2.labelPropertyName, entry), objectSpread2._(_objectSpread5, "idInt", _this2.list.length + index), objectSpread2._(_objectSpread5, _this2.additionalPropertyName, []), _objectSpread5));
      });
    },
    emitInternalList: function emitInternalList(val) {
      var _this3 = this;

      var sendArr = [];
      val.forEach(function (sel, index) {
        return _this3.$set(sendArr, index, objectSpread2.a({}, 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
       *
       */

      this.$emit('selected-changed', sendArr);
    },
    modifyChipValue: function modifyChipValue(event, index) {
      if (!event) {
        this.selectedBelowListInt.splice(index, 1);
      } else {
        var modifiedEntry = objectSpread2.a({}, 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: {
      "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._ssrNode(" "), _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 + "_" + _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)], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

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