import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.array.map-6e99e953.js';
import { v as vueClickOutside } from './index-3299b831.js';
import BaseInput from './BaseInput-5f3adef2.js';
import BaseLoader from './BaseLoader-a88c5433.js';
import { n as normalizeComponent } from './normalize-component-f552f2b0.js';
import './export-ca205aa3.js';
import './array-iteration-174e15bc.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-734a2b2d.js';
import './array-method-has-species-support-4880738d.js';
import './es.object.to-string-363bb00e.js';
import './classof-efe356f2.js';
import './es.regexp.to-string-60b34f50.js';
import './regexp-flags-0e12a922.js';
import './es.array.concat-2ab9770c.js';
import './create-property-64305cbf.js';
import './es.array.slice-8edbe7ac.js';
import './es.number.constructor-806b1a22.js';
import './object-set-prototype-of-815338f2.js';
import './es.array.includes-429b943f.js';
import './object-keys-2117de4f.js';
import './BaseIcon-97f2c0df.js';
import 'vue-svgicon';
import './utils-1ee736f4.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6d270396.js';
import './array-method-is-strict-b717b087.js';
import './regexp-exec-abstract-f3a4fb3d.js';
import './string-multibyte-2334bbf7.js';
import './es.string.split-e8138ba0.js';
import './is-regexp-2d7aa8f2.js';
import './es.string.replace-71289216.js';
import './es.string.includes-7cd9db5f.js';
import './es.array.sort-429613bb.js';
import './web.dom-collections.for-each-88fb2ed7.js';
import './dom-iterables-b6f5ef3b.js';
import './es.object.keys-8d50ea2f.js';
import './i18n-380f73e4.js';

/**
 * Form Input Field Component with Autocomplete Functionality
 */

var script = {
  name: 'BaseAutocompleteInput',
  components: {
    BaseInput: BaseInput,
    BaseLoader: BaseLoader
  },
  directives: {
    ClickOutside: vueClickOutside
  },
  model: {
    prop: 'inputText',
    event: 'autocomplete'
  },
  props: {
    /**
     * input field settable from outside
     *
     * @model
     *
     */
    inputText: {
      type: String,
      default: ''
    },

    /**
     * list of selectable entries
     */
    list: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * label for the input field
     */
    label: {
      type: String,
      default: ''
    },

    /**
     * placeholder for the input field
     */
    placeholder: {
      type: String,
      default: ''
    },

    /**
     * text shown when no dynamic autocomplete entries present
     */
    dropDownNoOptionsInfo: {
      type: String,
      default: 'No options available'
    },

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

    /**
     * specify the object property that should be used as value to be displayed
     */
    labelPropertyName: {
      type: String,
      default: ''
    }
  },
  data: function data() {
    return {
      // internal list representation allows for string or object input
      // or also additional internal properties (not set (yet?) though)
      listInt: [],
      // internal copy of input text settable from outside
      inputTextInt: null,
      // index for use of arrow keys
      selectedMenuEntryIndex: -1,
      // these two variables are set by clickoutside directives
      // and are supposed to set the showDropDown variable
      insideInput: false,
      insideDropDown: false
    };
  },
  computed: {
    // show drop down is governed by these two variables - one from baseinput component
    // and one from drop down (to prevent label (which is part of baseinput)
    // to be inside the "clickoutside" area)
    showDropDown: {
      get: function get() {
        return this.insideInput || this.insideDropDown;
      },
      set: function set(val) {
        this.insideInput = val;
        this.insideDropDown = val;
      }
    }
  },
  watch: {
    // watch for changes in the drop down list and set internal variable accordingly
    list: function list(val) {
      var _this = this;

      this.listInt = val && val.length && typeof val[0] === 'string' ? val.map(function (v) {
        return _objectSpread2({}, _defineProperty({}, _this.labelPropertyName, v));
      }) : val.map(function (v) {
        return _objectSpread2({}, v);
      });
    },
    // watch for changes in the text input from outside and set internal value accordingly
    inputText: function inputText(val) {
      this.inputTextInt = val;
    }
  },
  mounted: function mounted() {
    var _this2 = this;

    // set internal text and list variables with values set in parent
    this.listInt = this.list && this.list.length && typeof this.list[0] === 'string' ? this.list.map(function (v) {
      return _objectSpread2({}, _defineProperty({}, _this2.labelPropertyName, v));
    }) : this.list.map(function (v) {
      return _objectSpread2({}, v);
    });
    this.inputTextInt = this.inputText;
  },
  methods: {
    // add an entry selected from the drop down list
    selectEntry: function selectEntry(entry) {
      // check if entry was selected by clicking in the dropdown
      if (entry) {
        this.inputTextInt = entry[this.labelPropertyName];
        this.$emit('selected', entry); // or was selected by use of arrow keys
        // (else no explicit setting of inputTextInt and event emitting is needed)
      } else if (this.selectedMenuEntryIndex >= 0) {
        this.inputTextInt = this.listInt[this.selectedMenuEntryIndex][this.labelPropertyName];
        /**
         * event triggered when entry is selected from drop down menu
         *
         * @type {object | string}
         */

        this.$emit('selected', this.listInt[this.selectedMenuEntryIndex]);
      } // as soon as entry was selected, hide the drop down, blur input focus and reset the list


      this.showDropDown = false;
      this.$refs.baseInput.$el.getElementsByTagName('input')[0].blur();
      this.listInt = [];
    },
    onInputFocus: function onInputFocus() {
      this.selectedMenuEntryIndex = -1; // TODO: check if maybe event should also be triggered if input is empty
      // e.g. for fetching of initial list??

      if (this.inputTextInt) {
        /**
         * emitting event on text input.
         *
         * @type {string}
         */
        this.$emit('autocomplete', this.inputTextInt);
      }

      this.showDropDown = true;
    },
    // allow for navigation with arrow keys
    triggerArrowKey: function triggerArrowKey(event) {
      if (event.key === 'ArrowDown') {
        // setting to -1 if outside list range was added to allow to get rid of active
        // element again (so user can add plain text (not from list) as well)
        this.selectedMenuEntryIndex = this.selectedMenuEntryIndex < this.listInt.length - 1 ? this.selectedMenuEntryIndex + 1 : -1;
      } else if (event.key === 'ArrowUp') {
        this.selectedMenuEntryIndex = this.selectedMenuEntryIndex > 0 ? this.selectedMenuEntryIndex - 1 : -1;
      }

      if (this.$refs.dropdownContainer.scrollHeight !== this.$refs.dropdownContainer.clientHeight) {
        this.$refs.option[this.selectedMenuEntryIndex].scrollIntoView({
          block: 'nearest',
          inline: 'nearest'
        });
      }
    }
  }
};

/* 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-autocomplete-input"
  }, [_c('BaseInput', {
    ref: "baseInput",
    attrs: {
      "placeholder": !_vm.inputTextInt ? _vm.placeholder : '',
      "label": _vm.label
    },
    on: {
      "clicked-outside": function clickedOutside($event) {
        _vm.insideInput = false;
      },
      "focus": _vm.onInputFocus,
      "keydown": [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.triggerArrowKey.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.selectEntry();
      }],
      "input": function input($event) {
        return _vm.$emit('autocomplete', _vm.inputTextInt);
      }
    },
    scopedSlots: _vm._u([{
      key: "input-field-addition-after",
      fn: function fn() {
        return [_vm.isLoading ? _c('div', {
          staticClass: "base-input-loader"
        }, [_c('BaseLoader')], 1) : _vm._e()];
      },
      proxy: true
    }]),
    model: {
      value: _vm.inputTextInt,
      callback: function callback($$v) {
        _vm.inputTextInt = $$v;
      },
      expression: "inputTextInt"
    }
  }), _vm._v(" "), _vm.showDropDown ? _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: function value() {
        return _vm.insideDropDown = false;
      },
      expression: "() => insideDropDown = false"
    }],
    ref: "dropdownContainer",
    staticClass: "base-autocomplete-drop-down",
    on: {
      "mouseleave": function mouseleave($event) {
        _vm.selectedMenuEntryIndex = -1;
      }
    }
  }, [_vm._l(_vm.listInt, function (entry, index) {
    return _c('div', {
      key: index,
      ref: "option",
      refInFor: true,
      staticClass: "base-autocomplete-drop-down-entry-wrapper",
      class: {
        'base-autocomplete-drop-down-entry-wrapper-active': index === _vm.selectedMenuEntryIndex
      },
      on: {
        "click": function click($event) {
          return _vm.selectEntry(entry);
        },
        "mouseover": function mouseover($event) {
          _vm.selectedMenuEntryIndex = index;
        }
      }
    }, [_vm._t("drop-down-entry", function () {
      return [_c('div', {
        staticClass: "base-autocomplete-drop-down-entry"
      }, [_vm._v("\n          " + _vm._s(entry[_vm.labelPropertyName]) + "\n        ")])];
    }, {
      "item": entry
    })], 2);
  }), _vm._v(" "), !_vm.listInt.length ? _vm._t("no-options", function () {
    return [_c('div', {
      staticClass: "base-autocomplete-drop-down-entry-wrapper"
    }, [_vm._v("\n        " + _vm._s(_vm.dropDownNoOptionsInfo) + "\n      ")])];
  }) : _vm._e()], 2) : _vm._e()], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-70ce27b8";
/* 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 BaseAutocompleteInput = __vue_component__;

export { BaseAutocompleteInput as default };
