'use strict';var objectSpread2=require('./objectSpread2-56f1d323.js');require('./es.array.map-30953c40.js');var index=require('./index-9dadef01.js'),BaseInput=require('./BaseInput-353ab2ec.js'),BaseLoader=require('./BaseLoader-a331376d.js'),normalizeComponent=require('./normalize-component-d9981c57.js');require('./export-61511812.js'),require('./array-iteration-f35df2b6.js'),require('./function-bind-context-e4685306.js'),require('./array-method-has-species-support-983ac207.js'),require('./es.object.to-string-f27a75a8.js'),require('./classof-819fc780.js'),require('./es.regexp.to-string-5606f728.js'),require('./regexp-flags-abc49c4a.js'),require('./es.array.concat-820e1246.js'),require('./create-property-240c71a5.js'),require('./utils-08ccde2c.js'),require('./typeof-6b9e62b8.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./es.array.join-88750c41.js'),require('./array-method-is-strict-99341ee3.js'),require('./regexp-exec-abstract-216cd44a.js'),require('./string-multibyte-a2dff6e3.js'),require('./es.string.split-98e29ede.js'),require('./is-regexp-d6f1551e.js'),require('./es.string.replace-25e9e098.js'),require('./es.array.includes-3990bfec.js'),require('./object-keys-12f2c5e5.js'),require('./es.string.includes-ec03e639.js'),require('./es.array.sort-60060df6.js'),require('./web.dom-collections.for-each-721f3fb0.js'),require('./dom-iterables-e2602b7e.js'),require('./es.object.keys-c57f02bd.js'),require('./es.number.constructor-daccdeab.js'),require('./object-set-prototype-of-dfa14cf5.js'),require('./BaseIcon-2d6ac6a6.js'),require('vue-svgicon'),require('./i18n-df4856a7.js');/**
 * Form Input Field Component with Autocomplete Functionality
 */

var script = {
  name: 'BaseAutocompleteInput',
  components: {
    BaseInput: BaseInput["default"],
    BaseLoader: BaseLoader["default"]
  },
  directives: {
    ClickOutside: index.v
  },
  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.a({}, objectSpread2._({}, _this.labelPropertyName, v));
      }) : val.map(function (v) {
        return objectSpread2.a({}, 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.a({}, objectSpread2._({}, _this2.labelPropertyName, v));
    }) : this.list.map(function (v) {
      return objectSpread2.a({}, 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._ssrNode(" "), _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 _vm._ssrNode("<div" + _vm._ssrClass("base-autocomplete-drop-down-entry-wrapper", {
      'base-autocomplete-drop-down-entry-wrapper-active': index === _vm.selectedMenuEntryIndex
    }) + " data-v-70ce27b8>", "</div>", [_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._ssrNode(" "), !_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()], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-70ce27b8";
/* module identifier */

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