import './es.array.includes-1f433385.js';
import './es.number.constructor-16a232f3.js';
import { v as vueClickOutside } from './index-b4d779f7.js';
import { i as i18n } from './i18n-e25edebe.js';
import BaseIcon from './BaseIcon-a4fdc02d.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './object-set-prototype-of-9853ad1a.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.object.to-string-5a59fbfc.js';
import './classof-b10e7604.js';
import './array-iteration-dec5536e.js';
import './array-species-create-afb281e6.js';
import './es.object.keys-6369b884.js';
import './es.array.concat-9f3136dc.js';
import './create-property-c00b5c27.js';
import './array-method-has-species-support-d96108b0.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';

/**
 * Accessible drop down component
 */

var script = {
  name: 'BaseDropDown',
  components: {
    BaseIcon: BaseIcon
  },
  directives: {
    ClickOutside: vueClickOutside
  },
  mixins: [i18n],
  model: {
    prop: 'selectedOption',
    event: 'value-selected'
  },
  props: {
    /**
     * specify options to choose from <br>
     *   needs to be an array with label and value properties
     */
    options: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * label for the drop down, recommended to define for accessibility
     */
    label: {
      type: String,
      default: 'Drop Down'
    },

    /**
     * placeholder appearing in select when no option was
     * selected
     */
    placeholder: {
      type: String,
      default: 'Select'
    },

    /**
     * @model
     *
     * the selected value
     */
    selectedOption: {
      type: Object,
      default: function _default() {
        return {
          value: '',
          label: ''
        };
      }
    },

    /**
     * define if label should be shown
     */
    showLabel: {
      type: Boolean,
      default: false
    },

    /**
     * set the background color of drop down head
     */
    headerBackgroundColor: {
      type: String,
      default: 'inherit'
    },

    /**
     * set a language ()
     */
    language: {
      type: String,
      default: ''
    },

    /**
     * set the name of the property that holds the value
     */
    valueProp: {
      type: String,
      default: 'value'
    },

    /**
     * flag to set drop down inactive
     */
    isDisabled: {
      type: Boolean,
      default: false
    },

    /**
     * flag to disable spacing left and right
     * (needed for sidebar drop downs)
     */
    withSpacing: {
      type: Boolean,
      default: true
    },

    /**
     * align drop down with left or right border
     */
    alignDropDown: {
      type: String,
      default: 'left',
      validator: function validator(val) {
        return ['left', 'right'].includes(val);
      }
    },

    /**
     * set id if drop down with this label appears more than once
     */
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data: function data() {
    return {
      showDropDown: false,
      keySelectedIndex: -1,
      showFadeOut: false,
      maxDropDownHeight: '0',
      resizeObserver: null
    };
  },
  computed: {
    selectedOptionInt: function selectedOptionInt() {
      return this.getLangLabel(this.selectedOption.label, true) || this.placeholder || '';
    }
  },
  watch: {
    showDropDown: function showDropDown(val) {
      if (val) {
        // dont let drop down size be larger than window
        var maxHeight = window.innerHeight - this.$el.offsetTop - 120;
        this.maxDropDownHeight = "".concat(maxHeight < 300 ? maxHeight : 300, "px");
      } // reset index on close


      if (!val) {
        this.keySelectedIndex = -1;
      }
    }
  },
  mounted: function mounted() {
    this.initObserver();
  },
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) this.resizeObserver.unobserve(this.$refs.baseDropdown);
  },
  methods: {
    initObserver: function initObserver() {
      var _this = this;

      // create an observer with the set overflow calc function
      var resizeObserver = new ResizeObserver(function () {
        return _this.setOverflow();
      }); // put it on the relevant element

      resizeObserver.observe(this.$refs.baseDropdown); // store it

      this.resizeObserver = resizeObserver;
    },
    // event triggered by clicking on option or Enter after
    // selecting via keys
    selectValue: function selectValue(option) {
      this.showDropDown = false;
      /**
       * Event emitted when an option is selected
       *
       * @event value-selected
       * @type { Object }
       */

      this.$emit('value-selected', option);
    },
    // adding key navigation for accessibility
    selectByKey: function selectByKey(event) {
      if (event.key === 'ArrowDown') {
        this.showDropDown = true;

        if (this.keySelectedIndex < this.options.length - 1) {
          this.keySelectedIndex += 1;
        }
      } else if (event.key === 'ArrowUp') {
        if (this.keySelectedIndex > 0) {
          this.keySelectedIndex -= 1;
        }
      } else if (event.key === 'Enter') {
        if (this.showDropDown && this.keySelectedIndex >= 0) {
          this.selectValue(this.options[this.keySelectedIndex]);
        } else if (!this.showDropDown) {
          this.showDropDown = true;
        }
      } else if (event.key === 'Escape' || event.key === 'Tab') {
        this.showDropDown = false;
      }

      if (this.$refs.option && this.$refs.option[this.keySelectedIndex] && this.$refs.dropdownContainer.scrollHeight !== this.$refs.dropdownContainer.clientHeight) {
        this.$refs.option[this.keySelectedIndex].scrollIntoView({
          block: 'nearest',
          inline: 'nearest'
        });
      }
    },
    setOverflow: function setOverflow() {
      // eslint-disable-next-line max-len
      var headerWidth = this.$refs.dropDownButton ? this.$refs.dropDownButton.getBoundingClientRect().width : 0;
      var textWidth = this.$refs.headText ? this.$refs.headText.getBoundingClientRect().width : 0;
      this.showFadeOut = textWidth > headerWidth;
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _obj;

  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: function value() {
        return _vm.showDropDown = false;
      },
      expression: "() => showDropDown = false"
    }],
    ref: "baseDropdown",
    staticClass: "base-drop-down"
  }, [_c('div', {
    class: ['base-drop-down-label-wrapper', {
      'hide': !_vm.getLangLabel(_vm.label, true) || !_vm.showLabel
    }]
  }, [_c('label', {
    staticClass: "base-drop-down-label",
    attrs: {
      "for": _vm.getLangLabel(_vm.label) + '-' + _vm.id
    }
  }, [_vm._v("\n      " + _vm._s(_vm.getLangLabel(_vm.label, true)) + "\n    ")])]), _vm._v(" "), _c('button', {
    class: ['base-drop-down-head', {
      'base-drop-down-head-spacing': _vm.withSpacing
    }],
    style: {
      'background-color': _vm.headerBackgroundColor
    },
    attrs: {
      "id": _vm.getLangLabel(_vm.label) + '-' + _vm.id,
      "aria-expanded": String(_vm.showDropDown),
      "disabled": _vm.isDisabled,
      "aria-haspopup": "listbox",
      "type": "button"
    },
    on: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.showDropDown = !_vm.showDropDown;
      },
      "keydown": [function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]) && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]) && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) {
          return null;
        }

        $event.preventDefault();
        return _vm.selectByKey.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
          return null;
        }

        return _vm.selectByKey.apply(null, arguments);
      }]
    }
  }, [_c('div', {
    ref: "dropDownButton",
    class: ['base-drop-down-head-text-wrapper', {
      'base-drop-down-head-text-fade-out': _vm.showFadeOut
    }]
  }, [_c('span', {
    ref: "headText",
    staticClass: "base-drop-down-head-text"
  }, [_vm._v("\n        " + _vm._s(_vm.selectedOptionInt) + "\n      ")])]), _vm._v(" "), _vm._t("header-right", function () {
    return [_c('base-icon', {
      class: ['base-drop-down-icon', {
        'base-drop-down-icon-rotated': _vm.showDropDown
      }],
      attrs: {
        "name": "drop-down"
      }
    })];
  })], 2), _vm._v(" "), _vm.showDropDown ? _c('div', {
    ref: "dropdownContainer",
    staticClass: "base-drop-down-body",
    style: (_obj = {}, _obj[_vm.alignDropDown] = 0, _obj['max-height'] = _vm.maxDropDownHeight, _obj)
  }, [_vm._t("default", function () {
    return [_c('ul', {
      staticClass: "base-drop-down-body-list",
      attrs: {
        "tabindex": "-1",
        "role": "listbox"
      }
    }, _vm._l(_vm.options, function (option, index) {
      return _c('li', {
        key: option[_vm.valueProp],
        ref: "option",
        refInFor: true,
        class: ['base-drop-down-option', {
          'base-drop-down-option-selected': _vm.selectedOption && option[_vm.valueProp] === _vm.selectedOption[_vm.valueProp]
        }, {
          'base-drop-down-option-key-selected': _vm.keySelectedIndex === index
        }],
        attrs: {
          "role": "option"
        },
        on: {
          "click": function click($event) {
            return _vm.selectValue(option);
          }
        }
      }, [_vm._v("\n          " + _vm._s(_vm.getLangLabel(option.label, true)) + "\n        ")]);
    }), 0)];
  })], 2) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-092522b2";
/* 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 BaseDropDown = __vue_component__;

export { BaseDropDown as default };
