import './regexp-exec-abstract-04d119fc.js';
import './es.string.replace-07eeebfe.js';
import { _ as _typeof } from './typeof-6c6d8d7a.js';
import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.object.to-string-5a59fbfc.js';
import './es.array.map-093cfbca.js';
import './es.json.stringify-9b0e9796.js';
import './es.array.sort-92cbfa54.js';
import { i as i18n } from './i18n-e25edebe.js';
import './es.array.from-3ef944e4.js';
import './es.string.iterator-eb7ab984.js';
import { c as createId, s as sort } from './utils-21c04279.js';
import BaseInput from './BaseInput-aea1e5fe.js';
import { a as vuedraggable_umd } from './vuedraggable.umd-8fe09713.js';
import { n as navigateList } from './navigateList-733ab7c4.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 './classof-b10e7604.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 './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './es.array.includes-1f433385.js';
import './object-keys-a5d351f7.js';
import './es.object.keys-6369b884.js';
import './set-to-string-tag-452fb9b0.js';
import './object-set-prototype-of-9853ad1a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './es.array.slice-e9c3dd03.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.includes-53dbb113.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './es.array.concat-9f3136dc.js';
import './es.number.constructor-16a232f3.js';
import './index-b4d779f7.js';
import './BaseIcon-d03b1fa2.js';

/** input field with chips functionalities */

var script = {
  name: 'BaseChipsInputField',
  components: {
    BaseInput: BaseInput,
    BaseChip: function BaseChip() {
      return import('./BaseChip-a5109284.js');
    },
    Draggable: vuedraggable_umd
  },
  mixins: [i18n, navigateList],
  model: {
    prop: 'input',
    event: 'input'
  },
  props: {
    /**
     if field is occurring more then once - set an id
     */
    id: {
      type: String,
      default: ''
    },

    /**
     * list of selected options (strings or objects), displayed as chips
     * (you can use the .sync modifier on this property)
     */
    selectedList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * @model
     *
     * input string
     */
    input: {
      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
    },

    /**
     * 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: true
    },

    /**
     * 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
    },

    /**
     * this means typed input will be added as chip directly
     */
    addSelectedEntryDirectly: {
      type: Boolean,
      default: false
    },

    /**
     * if true a button with that functionality will be visible
     */
    sortable: {
      type: Boolean,
      default: false
    },

    /**
     * define if chips should be draggable
     */
    draggable: {
      type: Boolean,
      default: false
    },

    /**
     * define if entries should always appear linked (-> with grey background)
     */
    alwaysLinked: {
      type: Boolean,
      default: false
    },

    /**
     * set content for the info box activatable by click <br>
     * see [BaseHoverBox](#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: ''
    },

    /**
     * option to have the border of the input field not displayed
     */
    showInputBorder: {
      type: Boolean,
      default: true
    },

    /**
     * define if standard form field styling should be
     * used (otherwise no border, no box shadow)
     */
    useFormFieldStyling: {
      type: Boolean,
      default: true
    },

    /**
     * specify the id of a linked drop down list
     */
    dropDownListId: {
      type: String,
      default: ''
    },

    /**
     * specify a linked list option (e.g. drop down) <br>
     *   (will be used in aria-activedescendant attribute)
     */
    linkedListOption: {
      type: String,
      default: null
    },

    /**
     * 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: 'label'
    },

    /**
     * specify true if selectedList array is a array of strings
     */
    isStringArray: {
      type: Boolean,
      default: false
    },

    /**
     * property for special case 'chips-below' - if false in this case chips will
     * not be displayed in the input field
     */
    displayChipsInline: {
      type: Boolean,
      default: true
    },

    /**
     * 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: true
    },

    /**
     * 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
    },

    /**
     * if true space is reserved for a loader that can be activated
     * with the 'isLoading' prop
     */
    loadable: {
      type: Boolean,
      default: false
    },

    /**
     * possibility to steer input field active state from outside<br>
     * it is possible to use the .sync modifier here
     */
    isActive: {
      type: Boolean,
      default: false
    },

    /**
     * specify additional input field styling
     */
    inputClass: {
      type: String,
      default: ''
    },

    /**
     * use this prop to deactivate automatic setting of focus as soon as input element
     * becomes active - this might require external handling of focus setting!
     */
    setFocusOnActive: {
      type: Boolean,
      default: true
    },

    /**
     * define true if chip should be editable on click
     * <br>
     * CAVEAT: chips can not be both draggable AND editable and it can not show
     *  hoverBoxContent as soon as it is editable respectively - if both are set true edit
     *  functionality takes precedent - chip will not be draggable, hoverBoxContent will not
     *  be shown!
     */
    chipsEditable: {
      type: Boolean,
      default: false
    },

    /**
     * this prop gives the option to add assistive text for screen readers<br>
     * properties:<br>
     * <b>selectedOption</b>: text read when a selected option is focused (currently only
     *  working for editable chips)
     */
    assistiveText: {
      type: Object,
      default: function _default() {
        return {};
      }
    }
  },
  data: function data() {
    return {
      /**
       * internal representation of selectedList
       * @type {(String[]|Object[])}
       */
      selectedListInt: [],

      /**
       * store active state of the base input field
       * @type {boolean}
       */
      isActiveInt: false,

      /**
       * for removing chips via backspace, to get delay after
       * keydown event
       * @type {?number}
       */
      timeout: null,

      /**
       * for removing chips via backspace, to no accidentally delete
       * chips on multiple backspace keydown events
       * @type {boolean}
       */
      fired: false,

      /**
       * for dragging functionality (transition)
       * @type {boolean}
       */
      drag: false,

      /**
       * variable for the currently active chip (for arrow key use)
       * @type {number}
       */
      chipActiveForRemove: -1,

      /**
       * variable for internal input handling
       * @type {string}
       */
      inputInt: ''
    };
  },
  watch: {
    /**
     * selectedList is watched to also change selectedListInt if necessary
     * was thinking of making this a computed property however if you do
     * list manipulations (e.g. push, splice) the setter is not triggered
     * --> more complicated to inform parent (because sometimes setter triggered sometimes not)
     */
    selectedList: {
      handler: function handler(val) {
        var _this = this;

        // check that new value is not undefined (would throw error with map)
        if (val) {
          // create a temporary list object and add an internal id
          var tempList = val.map(function (option) {
            return _objectSpread2(_objectSpread2({}, _this.isStringArray ? _defineProperty({}, _this.labelPropertyName, option) : option), {
              idInt: option[_this.identifierPropertyName] || _this.getIdInt(option)
            });
          }); // only update if internal list is different from outside list

          if (JSON.stringify(tempList) !== JSON.stringify(this.selectedListInt)) {
            this.selectedListInt = tempList;
          }
        } else {
          this.selectedListInt = [];
        }
      },
      deep: true,
      immediate: true
    },

    /**
     * to have isActive prop in sync
     * @param {boolean} val - internal input field active value
     */
    isActiveInt: function isActiveInt(val) {
      // check if values are in sync already
      if (val !== this.isActive) {
        /**
         * event updating the is-active prop in case of internal changes
         *
         * @event update:is-active
         * @type {boolean}
         */
        this.$emit('update:is-active', val);
      }
    },

    /**
     * watch for outside changes in the input field active state
     * @param {boolean} val - the prop value set from outside
     */
    isActive: function isActive(val) {
      // check is in sync already
      if (val !== this.isActiveInt) {
        this.isActiveInt = val;
      }
    },

    /**
     * also input needs to be synchronized between component and parent (if necessary)
     */
    input: {
      handler: function handler(val) {
        // check if sync already
        if (val !== this.inputInt) {
          this.inputInt = val;
        }
      },
      immediate: true
    },

    /**
     * watch if input changes internally and emit event if necessary
     */
    inputInt: {
      handler: function handler(val) {
        if (val !== this.input) {
          /**
           * emitting the input string if changed internally
           * @event input
           * @property {string} val - the new input string
           */
          this.$emit('input', val);
        }
      },
      immediate: true
    }
  },
  methods: {
    /** KEYBOARD HANDLING FOR CHIPS */

    /**
     * function triggered on any keydown on the input field
     * @param {KeyboardEvent} event
     */
    checkKeyEvent: function checkKeyEvent(event) {
      var _this2 = this;

      var key = event.key; // define conditions in which input field should be set inactive (in styling and blurring)

      if (key === 'Tab' && !(this.clearable && !!this.inputInt) || key === 'Enter' && !this.allowMultipleEntries) {
        this.isActiveInt = false;
      } // if event was Delete check if a chip should be deleted


      if (key === 'Backspace' || key === 'Delete') {
        // if backspace (once) is used make last chip active
        if (key === 'Backspace' && !this.fired && !this.inputInt && this.chipActiveForRemove < 0) {
          this.chipActiveForRemove = this.selectedListInt.length - 1; // on second backspace set timeout for delete
        } else if (this.chipActiveForRemove >= 0 && !this.fired && !this.inputInt) {
          // check if there is actually anything left to remove
          this.removeEntry(this.selectedListInt[this.chipActiveForRemove], this.chipActiveForRemove);
          this.chipActiveForRemove = -1;
        } // necessary to prevent accidential delete of chips when user keeps backspace pressed


        this.fired = true;

        if (this.timeout) {
          clearTimeout(this.timeout);
          this.timeout = null;
        }

        this.timeout = setTimeout(function () {
          _this2.fired = false;
        }, 200); // if there is no input and arrow right or left was pressed
        // navigate between the chips
      } else if (!this.inputInt && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
        // determine if index should be increased or decreased
        var isIndexUp = event.key === 'ArrowRight'; // do the navigation in the chips list, returns the chip that should be
        // active after navigation

        var activeChip = this.navigate(this.selectedListInt, isIndexUp, this.chipActiveForRemove, true); // set the chip active for removal (currently active one)

        this.chipActiveForRemove = this.selectedListInt.indexOf(activeChip); // in any other key event reset the chip active for remove
      } else {
        this.chipActiveForRemove = -1;
      }
    },

    /** LIST MODIFICATIONS */

    /**
     * remove an entry from the list of selected entries
     *
     * @param {Object} option - the option selected from the list of selected
     * options
     * @param {number} index - the index of the item in the list
     */
    removeEntry: function removeEntry(option, index) {
      var _this3 = this;

      // remove the item from the internal list
      this.selectedListInt.splice(index, 1); // emit an event to inform parent of altered list

      this.updateParentList(this.selectedListInt); // also emit event to inform which item was removed

      /**
       * event emitted if option is removed from the list of selected
       * options (additionally to altered list in case parent needs to know
       * which item was removed)
       *
       * @event removed
       * @property {Object} option - the removed option
       */

      this.$emit('removed', option); // lay the focus on the input field

      var inputElements = this.$refs.baseInput.$el.getElementsByTagName('input');
      var mainInputElement = Array.from(inputElements).find(function (elem) {
        return elem.id === _this3.id;
      });

      if (mainInputElement) {
        mainInputElement.focus();
      }
    },

    /**
     * adding an selected option to the array of selected options
     */
    addOption: function addOption() {
      var _this4 = this;

      // if there is input, unknown options are allowed and direct option addition
      // is enabled - we can add the option to the selected list directly
      if (this.inputInt && this.allowUnknownEntries && this.addSelectedEntryDirectly) {
        // check for duplicates
        var duplicate = this.selectedListInt.find(function (option) {
          return option[_this4.labelPropertyName] === _this4.inputInt;
        }); // if no duplicate was found add the entry

        if (!duplicate) {
          // where should new item be placed (added at the end or replacing old entry
          // if single select
          var setIndex = this.allowMultipleEntries ? this.selectedListInt.length : 0; // create object to add

          var newEntry = _defineProperty({
            idInt: this.getIdInt()
          }, this.labelPropertyName, this.inputInt); // set entry in selectedList


          this.$set(this.selectedListInt, setIndex, newEntry); // emit an event to inform parent of altered list

          this.updateParentList(this.selectedListInt); // otherwise just emit event to parent (for informing user)
        } else {
          /**
           * emitted when user was trying to add an option but there was already
           * an option with the same value in the list of selected options
           *
           * @event duplicate
           * @property {Object} duplicate - the option with the identical value
           */
          this.$emit('duplicate', duplicate);
        } // reset the input


        this.inputInt = '';
      }
    },
    modifyListEntry: function modifyListEntry(newString, index) {
      // since this is also checked when assigning value to chip we should also check
      // here if label is lang object (e.g. {de: '', en: '' })
      if (_typeof(this.selectedListInt[index][this.labelPropertyName]) === 'object' && this.selectedListInt[index][this.labelPropertyName][this.language] !== undefined) {
        // if so then assign the new value to the current language
        this.selectedListInt[index][this.labelPropertyName][this.language] = newString; // else check if label prop is string and assign it directly
        // (otherwise this case (an object with unknown properties) can not be handled)
      } else if (typeof this.selectedListInt[index][this.labelPropertyName] === 'string') {
        this.selectedListInt[index][this.labelPropertyName] = newString;
      } // trigger change propagation to parent


      this.updateParentList(this.selectedListInt);
    },

    /**
     * function called when parent needs to be informed of selected
     * list changes
     *
     * @param {Object[]} newSelectedListInt - the altered list of selected options
     */
    updateParentList: function updateParentList(newSelectedListInt) {
      var _this5 = this;

      var tempList = JSON.parse(JSON.stringify(newSelectedListInt)); // if provided selected list consisted of strings - return this way

      if (this.isStringArray) {
        tempList = tempList.map(function (selected) {
          return selected[_this5.labelPropertyName];
        });
      } else if (newSelectedListInt.length) {
        // remove internal ids again
        tempList = tempList.map(function (selected) {
          _this5.$delete(selected, 'idInt');

          return selected;
        });
      }
      /**
       * inform parent of changes to selected option list
       * (you can use the .sync modifier on prop selectedList)
       *
       * @event update:selected-list
       * @property {(Object[]|String[])} tempList - the modified list - array
       * of strings is returned if isStringArray was set to true
       */


      this.$emit('update:selected-list', tempList);
    },

    /**
     * every selected option needs an internal id to be uniquely identifyable
     * by draggablejs
     *
     * @param {Object} [option=null] - the option the internal id is determined for
     */
    getIdInt: function getIdInt() {
      var _this6 = this;

      var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

      // check if the selected option already has an internal identifier
      // not applicable for newly created entries so check if option was provided
      if (option) {
        // get matching option by value (this is only for options that dont have an
        // external id provided anyways (also duplicates are excluded in 'addOption()'
        var matchingOption = this.selectedListInt.find(function (opt) {
          return opt[_this6.labelPropertyName] === option[_this6.labelPropertyName] || opt[_this6.labelPropertyName] === option;
        }); // check if there was exactly one matching result

        if (matchingOption) {
          return matchingOption.idInt;
        }
      } // else return a new internal id


      return createId();
    },

    /** SORTING */

    /** function called when the 'sort' button is clicked */
    sortSelectedList: function sortSelectedList() {
      this.isActiveInt = false;
      sort(this.selectedListInt, this.labelPropertyName, this.sortName, this.language ? this.getLangLabel : null);
      this.updateParentList(this.selectedListInt);
    },

    /** DRAGGABLE FUNCTIONALITIES */

    /**
     * need to set custom due to some strange effects not showing correct element in some cases
     * @param {DataTransfer} dataTransfer
     * @param {HTMLElement} dragEl - the dragged HTML Element
     */
    setDragElement: function setDragElement(dataTransfer, dragEl) {
      var img = dragEl.cloneNode(true);
      img.id = 'chip-inline-drag';
      img.style.position = 'absolute';
      img.style.top = '-99999px';
      img.style.left = '-99999px'; // add the element to the dom

      document.body.appendChild(img);
      dataTransfer.setDragImage(img, 0, 0);
    },
    onDragEnd: function onDragEnd() {
      this.drag = false;
      var elem = document.getElementById('chip-inline-drag');

      if (elem) {
        elem.parentNode.removeChild(elem);
      } // check if dragging led to differently sorted list
      // and inform parent if yes


      if (JSON.stringify(this.selectedList) !== JSON.stringify(this.selectedListInt)) {
        this.updateParentList(this.selectedListInt);
      }
    },

    /** HOVER BOX FUNCTIONALITY */

    /**
     * function triggered when a chip is clicked and hover box functionality is
     * available
     * @param {boolean} value - should hover box be showing or not
     * @param {Object} option - the option on which click was made
     */
    hoverBoxActive: function hoverBoxActive(value, option) {
      /**
       * event emitted on show / hide hoverbox
       *
       * @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,
        option: option
      });
    }
  }
};

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-input-field"
  }, [_c('BaseInput', _vm._g({
    ref: "baseInput",
    attrs: {
      "id": _vm.id,
      "placeholder": _vm.allowMultipleEntries || !_vm.selectedListInt.length ? _vm.placeholder : '',
      "label": _vm.label,
      "show-label": _vm.showLabel,
      "show-input-border": _vm.showInputBorder,
      "is-active": _vm.isActiveInt,
      "use-form-field-styling": _vm.useFormFieldStyling,
      "drop-down-list-id": _vm.dropDownListId,
      "linked-list-option": _vm.linkedListOption,
      "hide-input-field": !_vm.allowMultipleEntries && !!_vm.selectedListInt.length,
      "invalid": _vm.invalid,
      "required": _vm.required,
      "disabled": _vm.disabled,
      "clearable": _vm.clearable,
      "loadable": _vm.loadable,
      "error-message": _vm.errorMessage,
      "show-error-icon": _vm.showErrorIcon,
      "is-loading": _vm.isLoading,
      "input-class": _vm.inputClass,
      "set-focus-on-active": _vm.setFocusOnActive
    },
    on: {
      "update:isActive": function updateIsActive($event) {
        _vm.isActiveInt = $event;
      },
      "update:is-active": function updateIsActive($event) {
        _vm.isActiveInt = $event;
      },
      "keydown": [function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.addOption.apply(null, arguments);
      }, _vm.checkKeyEvent]
    },
    scopedSlots: _vm._u([{
      key: "label-addition",
      fn: function fn() {
        return [_vm._t("label-addition"), _vm._v(" "), _vm.sortable ? _c('button', {
          staticClass: "base-chips-input-field__sort",
          attrs: {
            "aria-label": _vm.label + ". " + _vm.sortText.replace(/[—–-]/, 'to'),
            "type": "button"
          },
          on: {
            "click": function click($event) {
              return _vm.sortSelectedList(_vm.selectedListInt);
            }
          }
        }, [_vm._v("\n        " + _vm._s(_vm.sortText) + "\n      ")]) : _vm._e()];
      },
      proxy: true
    }, {
      key: "pre-input-field",
      fn: function fn() {
        return [_vm._t("pre-input-field")];
      },
      proxy: true
    }, {
      key: "input-field-addition-before",
      fn: function fn() {
        return [_vm._t("input-field-addition-before"), _vm._v(" "), _vm.displayChipsInline ? _c('div', {
          staticClass: "base-chips-input-field__chips"
        }, [_vm.draggable && !_vm.chipsEditable ? [_c('draggable', {
          attrs: {
            "set-data": _vm.setDragElement,
            "force-fallback": true,
            "animation": 200,
            "handle": ".base-chip__text"
          },
          on: {
            "start": function start($event) {
              _vm.drag = true;
            },
            "end": _vm.onDragEnd
          },
          model: {
            value: _vm.selectedListInt,
            callback: function callback($$v) {
              _vm.selectedListInt = $$v;
            },
            expression: "selectedListInt"
          }
        }, [_c('transition-group', {
          staticClass: "base-chips-input-field__chips-transition",
          attrs: {
            "name": !_vm.drag ? 'flip-list' : null,
            "type": "transition"
          }
        }, [_vm._l(_vm.selectedListInt, function (entry, index) {
          return [_vm._t("chip", function () {
            return [_c('BaseChip', {
              key: _vm.allowMultipleEntries ? 'chip-' + entry.idInt : index,
              attrs: {
                "id": entry.idInt,
                "entry": _vm.getLangLabel(entry[_vm.labelPropertyName], true),
                "hover-box-content": _vm.hoverboxContent,
                "is-linked": _vm.alwaysLinked || entry[_vm.identifierPropertyName] === 0 || !!entry[_vm.identifierPropertyName],
                "chip-active": _vm.chipActiveForRemove === index
              },
              on: {
                "remove-entry": function removeEntry($event) {
                  return _vm.removeEntry(entry, index);
                },
                "hoverbox-active": function hoverboxActive($event) {
                  return _vm.hoverBoxActive($event, entry);
                }
              }
            })];
          }, null, {
            entry: entry,
            index: index,
            chipActiveForRemove: _vm.chipActiveForRemove,
            removeEntry: _vm.removeEntry
          })];
        })], 2)], 1)] : [_vm._l(_vm.selectedListInt, function (entry, index) {
          return [_vm._t("chip", function () {
            return [_c('BaseChip', {
              key: _vm.allowMultipleEntries ? 'chip-' + entry.idInt : index,
              attrs: {
                "id": entry.idInt,
                "entry": _vm.getLangLabel(entry[_vm.labelPropertyName], true),
                "hover-box-content": _vm.hoverboxContent,
                "editable": _vm.chipsEditable,
                "is-linked": _vm.alwaysLinked || entry[_vm.identifierPropertyName] === 0 || !!entry[_vm.identifierPropertyName],
                "chip-active": _vm.chipActiveForRemove === index,
                "assistive-text": _vm.assistiveText.selectedOption
              },
              on: {
                "remove-entry": function removeEntry($event) {
                  return _vm.removeEntry(entry, index);
                },
                "value-changed": function valueChanged($event) {
                  return _vm.modifyListEntry($event, index);
                },
                "hoverbox-active": function hoverboxActive($event) {
                  return _vm.hoverBoxActive($event, entry);
                }
              }
            })];
          }, null, {
            entry: entry,
            index: index,
            chipActiveForRemove: _vm.chipActiveForRemove,
            removeEntry: _vm.removeEntry
          })];
        })]], 2) : _vm._e()];
      },
      proxy: true
    }, {
      key: "input-field-inline-before",
      fn: function fn() {
        return [_vm._t("input-field-inline-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: "below-input",
      fn: function fn() {
        return [_vm._t("below-input")];
      },
      proxy: true
    }], null, true),
    model: {
      value: _vm.inputInt,
      callback: function callback($$v) {
        _vm.inputInt = $$v;
      },
      expression: "inputInt"
    }
  }, _vm.$listeners))], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-9bc28fa8";
/* 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 BaseChipsInputField = __vue_component__;

export { BaseChipsInputField as default };
