import { _ as _slicedToArray } from './utils-21c04279.js';
import { _ as _toConsumableArray } from './toConsumableArray-fb122614.js';
import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import './es.object.to-string-5a59fbfc.js';
import './es.array.map-093cfbca.js';
import './es.array.filter-9f634d7c.js';
import './es.array.includes-1f433385.js';
import './es.string.includes-53dbb113.js';
import './es.json.stringify-9b0e9796.js';
import BaseIcon from './BaseIcon-ae8a8a9b.js';
import BaseChipsInputField from './BaseChipsInputField-727a4b2e.js';
import { i as i18n } from './i18n-e25edebe.js';
import { n as navigateList } from './navigateList-733ab7c4.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './export-ecf4b1cb.js';
import './array-method-is-strict-903f485b.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './regexp-flags-b5fc4ddb.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './function-bind-context-b3fabf77.js';
import './es.array.slice-e9c3dd03.js';
import './array-species-create-afb281e6.js';
import './create-property-c00b5c27.js';
import './array-method-has-species-support-d96108b0.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './array-iteration-dec5536e.js';
import './es.object.keys-6369b884.js';
import './object-keys-a5d351f7.js';
import './classof-b10e7604.js';
import './es.array.concat-9f3136dc.js';
import './objectSpread2-605331b1.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-05b64129.js';
import './es.number.constructor-16a232f3.js';
import './index-b4d779f7.js';
import './vuedraggable.umd-8fe09713.js';

/**
 * Base Chips Input component with drop down and autocomplete functionality
 *
 */

var script = {
  name: 'BaseChipsInput',
  components: {
    BaseIcon: BaseIcon,
    BaseDropDownList: function BaseDropDownList() {
      return import('./BaseDropDownList-78698dca.js');
    },
    BaseChipsInputField: BaseChipsInputField
  },
  mixins: [i18n, navigateList],
  model: {
    prop: 'selectedList',
    event: 'selected'
  },
  // currently this has all the props from BaseChipsInput v1 to ensure
  // backwards compatibility
  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 [];
      }
    },

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

    /**
     * define if chips should be displayed in the input field (inline) or below
     */
    chipsInline: {
      type: Boolean,
      default: true
    },

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

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

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

    /**
     * define if chips should be draggable (currently only available for inline)
     */
    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: ''
    },

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

    /**
     if field is occuring more then once - set an id
     */
    id: {
      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: ''
    },

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

    /**
     * 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 {
      /**
       * the current input field string
       * @type {string}
       */
      input: '',

      /**
       * internal representation of selected options list
       * @type {(string[]|Object[])}
       */
      selectedListInt: [],

      /**
       * the currently active option, styled with grey background
       * (only if selected by keyboard)
       *
       * @type {number}
       */
      activeOptionIndex: 0,

      /**
       * the currently selected option after mouse click or keyboard enter
       *
       * @type {?Object}
       */
      selectedOption: null,

      /**
       * variable to store state of input field (for drop down handling)
       * @type {boolean}
       */
      isActive: false,

      /**
       * variable for checking if cursor is withing drop down
       * @type {boolean}
       */
      dropDownActive: false,

      /**
       * variable for storing if external list was array of strings (or objects)
       * @type {boolean}
       */
      returnAsString: false,

      /**
       * the minimal width of the drop down element (calculated in js because ? )
       * TODO: above...
       * @type {string}
       */
      dropDownMinWidth: '100%',

      /**
       * the input element
       * @type {HTMLElement}
       */
      inputElem: null
    };
  },
  computed: {
    /**
     * internal representation of options list, filtered for already selected entries
     * and also handling input string matching with options list in case of
     * no dynamic autocomplete fetching
     * @returns {Object[]}
     */
    listInt: function listInt() {
      var _this = this;

      var tempList = [];

      if (this.list && this.list.length && typeof this.list[0] === 'string') {
        tempList = this.list.map(function (option) {
          return _defineProperty({}, _this.labelPropertyName, option);
        });
      } else {
        tempList = _toConsumableArray(this.list);
      } // if unknown entries are allowed add a "Add InputSting ..." as first option


      if (this.allowUnknownEntries && this.input) {
        tempList.unshift(_defineProperty({}, this.labelPropertyName, this.language ? _defineProperty({}, this.language, this.input) : this.input));
      } // filter entries that were already selected, if no identifier
      // compare by object property


      if (this.selectedListInt && this.selectedListInt.length) {
        tempList = tempList.filter(function (option) {
          return !_this.selectedListInt.map(function (selected) {
            return selected[_this.identifierPropertyName] || selected[_this.labelPropertyName];
          }).includes(option[_this.identifierPropertyName] || option[_this.labelPropertyName]);
        });
      } // in case of no dynamic autocomplete fetching match the input string
      // with the options list and only show matching options


      if (this.input && !this.allowDynamicDropDownEntries) {
        // also only return entries matching the input string
        return tempList.filter(function (option) {
          return _this.getLangLabel(option[_this.labelPropertyName]).toLowerCase().includes(_this.input.toLowerCase());
        });
      }

      return tempList;
    },

    /**
     * determine from state of input field and drop down state (is cursor within)
     * if drop down should be active
     * @returns {boolean}
     */
    chipsInputActive: {
      set: function set(val) {
        this.dropDownActive = val;
        this.isActive = val;
      },
      get: function get() {
        return this.isActive || this.dropDownActive;
      }
    },

    /**
     * the currently active option object
     */
    activeOption: {
      /**
       * setter function of activeOption - will set active option index
       * @param {?Object} val - the active option (by hover or arrow key use)
       */
      set: function set(val) {
        this.activeOptionIndex = this.listInt.indexOf(val);
      },

      /**
       * getter function for activeOption - determined by active option index
       * @returns {?Object}
       */
      get: function get() {
        return this.listInt[this.activeOptionIndex];
      }
    }
  },
  watch: {
    /**
     * if the selected option changed (by click or keybord enter) add
     * it to the list of selected options
     * @param {?Object} val
     */
    selectedOption: function selectedOption(val) {
      if (val) {
        this.addSelectedOption(val); // if input element was found - focus after chips select

        if (this.inputElem && this.allowMultipleEntries) {
          this.inputElem.focus();
        }
      }
    },
    listInt: {
      /**
       * watch listInt for changes to set the currently active option index
       * accordingly
       * @param {Object[]} val
       */
      handler: function handler(val) {
        if (val.length && !this.activeOption) {
          // set first option in list as active option
          this.activeOptionIndex = 0;
        } else if (!val.length && (!this.allowUnknownEntries || !this.input)) {
          this.activeOptionIndex = -1;
        }
      },
      immediate: true
    },
    list: {
      /**
       * watch list to determine if list should be returned as string
       * @param {Object[]} val
       */
      handler: function handler(val) {
        // if list changed externally - reset index to 0
        this.activeOptionIndex = val.length || this.allowUnknownEntries && this.input ? 0 : -1; // check if list should be returned as array of strings

        if (!this.returnAsString && val && val.length && typeof val[0] === 'string') {
          this.returnAsString = true;
        }
      },
      immediate: true
    },
    selectedList: {
      /**
       * get changes to selectedListInt as soon as selectedList changes
       * @param {(string[]|Object[])} val
       */
      handler: function handler(val) {
        this.selectedListInt = _toConsumableArray(val);
      },
      immediate: true
    },

    /**
     * watch for changes to selectedListInt and propagate to parent if necessary
     * @param {(string[]|Object[])} val
     */
    selectedListInt: function selectedListInt(val) {
      if (JSON.stringify(val) !== JSON.stringify(this.selectedList)) {
        this.updateParentSelectedList(val);
      }
    },

    /**
     * input is watched for follow up actions needed after input
     * --> fetch autocomplete entries
     * --> inform parent of input (this however is not needed anymore since
     * $listeners from input are now propagated to parent anyways!)
     * @param {string} val
     */
    input: function input(val) {
      // if dropdown content is dynamic alert parent to fetch new relevant entries (if desired)
      if (this.allowDynamicDropDownEntries) {
        /**
         * if input changed this event is emitted to fetch matching autocomplete options
         * (if allowDynamicDropDownEntries is set true)
         *
         * @event fetch-dropdown-entries
         * @property {string} value - the input string
         * @property {string} type - the labelPropertyName that was specified
         */
        this.$emit('fetch-dropdown-entries', {
          value: val,
          type: this.labelPropertyName
        }); // TODO: code there for backwards compatibility - event not necessary anymore
        // since now all input events are forwarded! remove for v2!
      } else {
        /**
         * event to fetch drop down entries with changing input<br>
         *   (this event is deprecated and will be removed in future versions -
         *   just use the standard &lt;input> @input event in future!)
         *
         * @event text-input
         * @property {string} val
         *
         */
        // still inform parent of the text input
        this.$emit('text-input', val);
      }
    },

    /**
     * watching drop down active to do neccessary actions once drop down opens
     * a) to fetch drop down entries for static drop downs on first show only
     * b) to calculate actual drop down width (TODO: do i need this?)
     * c) to inform parent of drop down state changes
     * @param {boolean} val
     */
    chipsInputActive: function chipsInputActive(val) {
      // allow also for static drop down entries to be loaded on first drop down show only
      if (val && !this.allowDynamicDropDownEntries && !this.listInt.length) {
        /**
         * event to fetch drop down entries with changing input
         *
         * @event fetch-dropdown-entries
         * @type { object }
         *
         */
        this.$emit('fetch-dropdown-entries', {
          value: this.input,
          type: this.labelPropertyName
        });
      }

      if (val) {
        // TODO: check again why this is needed bzw. it not sure if it is working
        // properly
        this.calcDropDownMinWidth(); // reset the active option index to first item

        this.activeOptionIndex = 0;
      }
    }
  },
  mounted: function mounted() {
    // get the input element(s) and store them for later
    var elems = this.$el.getElementsByTagName('input');

    if (elems && elems.length) {
      var _elems = _slicedToArray(elems, 1);

      this.inputElem = _elems[0];
    }
  },
  methods: {
    /** CHIPS (ADDING) FUNCTIONALITIES */

    /**
     * method for adding a selected option to selected option list
     * (remove works via setter - does not need a separate method)
     *
     * @param {Object} selected
     */
    addSelectedOption: function addSelectedOption(selected) {
      if (this.allowMultipleEntries) {
        this.selectedListInt.push(selected);
      } else {
        // set the option on first array index (either setting new if empty
        // array or replacing old option)
        this.$set(this.selectedListInt, 0, selected); // for single select the drop down should close again automatically
        // after choosing the option

        this.dropDownActive = false;
      } // inform parent of the changes


      this.updateParentSelectedList(this.selectedListInt); // clear input

      this.input = ''; // reset selected option

      this.selectedOption = null; // remove focus from input if element is single select

      if (!this.allowMultipleEntries) {
        this.chipsInputActive = false;
        this.inputElem.blur();
      }
    },

    /**
     * method for emitting selected list changes to parent
     * (called after adding or deleting an option to / from selected list)
     *
     * @param {Object[]} updatedList - the list that should be emitted in the event
     */
    updateParentSelectedList: function updateParentSelectedList(updatedList) {
      var _this2 = this;

      // only emit if updated list is different from parent list
      if (JSON.stringify(this.selectedList) !== JSON.stringify(updatedList)) {
        var tempList = _toConsumableArray(updatedList); // if list was provided as string also return selected list as string


        if (this.returnAsString) {
          tempList = tempList.map(function (selected) {
            return selected[_this2.labelPropertyName];
          });
        }
        /**
         * inform parent of changes to selectedList
         * @event selected
         * @property {(Object[]|string[])} tempList - the altered selectedList
         */


        this.$emit('selected', tempList);
      }
    },

    /** INPUT FIELD ACTIVE/INACTIVE HANDLING */
    onInputFocus: function onInputFocus() {
      this.chipsInputActive = true;
    },
    onInputBlur: function onInputBlur() {
      this.chipsInputActive = false; // if the focus goes to somewhere else on the page - remove input string

      if (!this.dropDownActive && document.activeElement.tagName === 'BODY') {
        this.input = '';
      }
    },

    /** KEYBOARD FUNCTIONALITIES */

    /**
     * general function for checking key events like semicolon or tab
     * @param {KeyboardEvent} event - the keydown event
     */
    checkKeyEvent: function checkKeyEvent(event) {
      // if tab this will trigger moving forward to next input field
      // --> this one should be inactive
      if (event.key === 'Tab') {
        this.chipsInputActive = false;
      }
    },

    /**
     * triggered on keydown enter event and will add
     * a selected option
     */
    onEnter: function onEnter() {
      // check if there is a currently active option
      if (this.activeOption) {
        this.addSelectedOption(this.activeOption);
      }
    },

    /**
     * event for keydown arrow (up, down) key use
     *
     * @param {KeyboardEvent} event - the keydown event
     */
    onArrowKey: function onArrowKey(event) {
      // check if the list has any options
      if (this.listInt.length) {
        // if yes trigger the navigate function
        this.activeOption = this.navigate(this.listInt, event.key === 'ArrowDown', this.activeOptionIndex, true);
      }
    },

    /** OTHER FUNCTIONALITIES */
    hoverBoxActive: function hoverBoxActive(value, entry) {
      /**
       * 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,
        entry: entry
      });
    },

    /**
     * calculate the minimum width of the drop down element by getting the
     * width of this element
     */
    calcDropDownMinWidth: function calcDropDownMinWidth() {
      // get the base input element
      var inputElement = this.$refs.baseInput; // see if it exists and has a width - if yes set drop down min width to the same

      if (inputElement && inputElement.$el && inputElement.$el.clientWidth) {
        this.dropDownMinWidth = "".concat(inputElement.$el.clientWidth, "px");
      }
    }
  }
};

/* 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-input"
  }, [_c('BaseChipsInputField', _vm._g(_vm._b({
    ref: "baseInput",
    attrs: {
      "add-selected-entry-directly": false,
      "selected-list": _vm.selectedListInt,
      "drop-down-list-id": _vm.id,
      "linked-list-option": _vm.activeOption ? _vm.activeOption[_vm.identifierPropertyName] : null,
      "return-as-string": _vm.returnAsString,
      "is-active": _vm.isActive,
      "loadable": _vm.allowDynamicDropDownEntries
    },
    on: {
      "update:selectedList": function updateSelectedList($event) {
        _vm.selectedListInt = $event;
      },
      "update:selected-list": function updateSelectedList($event) {
        _vm.selectedListInt = $event;
      },
      "update:isActive": function updateIsActive($event) {
        _vm.isActive = $event;
      },
      "update:is-active": function updateIsActive($event) {
        _vm.isActive = $event;
      },
      "keydown": [function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.onEnter.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
          return null;
        }

        $event.preventDefault();
        return _vm.onArrowKey.apply(null, arguments);
      }],
      "click-input-field": _vm.onInputFocus,
      "clicked-outside": _vm.onInputBlur
    },
    scopedSlots: _vm._u([{
      key: "below-input",
      fn: function fn() {
        return [_vm.isActive ? _c('BaseDropDownList', {
          ref: "dropDownList",
          staticClass: "base-chips-input__drop-down",
          style: {
            'min-width': _vm.dropDownMinWidth
          },
          attrs: {
            "drop-down-options": _vm.listInt,
            "active-option": _vm.activeOption,
            "selected-option": _vm.selectedOption,
            "identifier-property-name": _vm.identifierPropertyName,
            "label-property-name": _vm.labelPropertyName,
            "list-id": _vm.id,
            "language": _vm.language,
            "drop-down-no-options-info": _vm.dropDownNoOptionsInfo
          },
          on: {
            "update:activeOption": function updateActiveOption($event) {
              _vm.activeOption = $event;
            },
            "update:active-option": function updateActiveOption($event) {
              _vm.activeOption = $event;
            },
            "update:selectedOption": function updateSelectedOption($event) {
              _vm.selectedOption = $event;
            },
            "update:selected-option": function updateSelectedOption($event) {
              _vm.selectedOption = $event;
            },
            "within-drop-down": function withinDropDown($event) {
              _vm.dropDownActive = $event;
            }
          },
          nativeOn: {
            "click": function click($event) {
              $event.stopPropagation();
            },
            "touchstart": function touchstart($event) {
              $event.stopPropagation();
            }
          },
          scopedSlots: _vm._u([{
            key: "option",
            fn: function fn(entry) {
              return [_vm.allowUnknownEntries && !entry.option[_vm.identifierPropertyName] ? _c('span', {
                key: entry.option[_vm.identifierPropertyName],
                ref: "option"
              }, [_vm._v("\n            " + _vm._s(_vm.addNewChipText ? _vm.addNewChipText + " " + _vm.getLangLabel(entry.option[_vm.labelPropertyName], true) + " ..." : _vm.getI18nTerm('form.Add', -1, {
                value: _vm.getLangLabel(entry.option[_vm.labelPropertyName], true)
              }) + " ...") + "\n          ")]) : entry ? [_vm._t("drop-down-entry", function () {
                return [_vm._v("\n              " + _vm._s(_vm.getLangLabel(entry.option[_vm.labelPropertyName], true)) + "\n            ")];
              }, {
                "item": entry.option
              })] : _vm._e()];
            }
          }], null, false, 2670602645)
        }) : _vm._e()];
      },
      proxy: true
    }, {
      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"), _vm._v(" "), !_vm.allowMultipleEntries ? _c('div', {
          staticClass: "base-chips-input__single-dropdown",
          on: {
            "click": function click($event) {
              $event.stopPropagation();
              _vm.isActive = !_vm.isActive;
            }
          }
        }, [_c('BaseIcon', {
          class: ['base-chips-input__single-dropdown-icon', {
            'base-chips-input__single-dropdown-icon-rotated': _vm.isActive
          }],
          attrs: {
            "name": "drop-down"
          }
        })], 1) : _vm._e()];
      },
      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
    }], null, true),
    model: {
      value: _vm.input,
      callback: function callback($$v) {
        _vm.input = $$v;
      },
      expression: "input"
    }
  }, 'BaseChipsInputField', _vm.$props, false), _vm.$listeners))], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-db5e3b2c";
/* 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 BaseChipsInput = __vue_component__;

export { BaseChipsInput as default };
