import './es.object.to-string-5a59fbfc.js';
import './es.regexp.to-string-784af81c.js';
import './es.array.concat-9f3136dc.js';
import './es.array.slice-e9c3dd03.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.number.constructor-16a232f3.js';
import './es.array.includes-1f433385.js';
import { _ as _export } from './export-ecf4b1cb.js';
import { v as vueClickOutside } from './index-b4d779f7.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import { c as createId } from './utils-21c04279.js';
import { i as i18n } from './i18n-e25edebe.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './classof-b10e7604.js';
import './regexp-flags-b5fc4ddb.js';
import './array-species-create-afb281e6.js';
import './create-property-c00b5c27.js';
import './array-method-has-species-support-d96108b0.js';
import './defineProperty-18999f8e.js';
import './object-set-prototype-of-9853ad1a.js';
import './object-keys-a5d351f7.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.map-093cfbca.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './es.string.replace-07eeebfe.js';
import './es.string.includes-53dbb113.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './es.object.keys-6369b884.js';

// `Number.isNaN` method
// https://tc39.es/ecma262/#sec-number.isnan
_export({ target: 'Number', stat: true }, {
  isNaN: function isNaN(number) {
    // eslint-disable-next-line no-self-compare -- NaN check
    return number != number;
  }
});

/**
 * Form Input Field Component
 */

var script = {
  name: 'BaseInput',
  directives: {
    ClickOutside: vueClickOutside
  },
  components: {
    BaseIcon: BaseIcon,
    BaseLoader: function BaseLoader() {
      return import('./BaseLoader-a5bfc4d9.js');
    }
  },
  mixins: [i18n],
  model: {
    prop: 'input',
    event: 'input'
  },
  props: {
    /**
     * @model
     *
     * input field settable from outside
     */
    input: {
      type: [String, Number],
      default: ''
    },

    /** label for input field, required for usability purposes, handle
     * showing of label with property showLabel
     */
    label: {
      type: String,
      required: true
    },

    /**
     * defines if input label should be visible
     */
    showLabel: {
      type: Boolean,
      default: true
    },

    /**
     * if field is occurring more then once - set an id<br>
     * in case a custom input is used with the input slot it is important to
     * assign the same id to the input element
     */
    id: {
      type: String,
      default: ''
    },

    /**
     * set a placeholder for the input field
     */
    placeholder: {
      type: String,
      default: 'Enter Text Here'
    },

    /**
     * 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
     */
    invalid: {
      type: Boolean,
      default: false
    },

    /**
     * add an error message to be displayed below form field if field is invalid
     */
    errorMessage: {
      type: String,
      default: ''
    },

    /**
     * define if error icon should be shown
     */
    showErrorIcon: {
      type: Boolean,
      default: true
    },

    /**
     * specify input type
     * @values text, number, password, email, url, search
     *
     */
    fieldType: {
      type: String,
      default: 'text',
      validator: function validator(val) {
        return ['text', 'number', 'password', 'email', 'url', 'search'].includes(val);
      }
    },

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

    /**
     * option to hide input field from outside (required for chips input)
     */
    hideInputField: {
      type: Boolean,
      default: false
    },

    /**
     * set input field in active state from outside<br>
     * the .sync modifier can be used on this prop
     */
    isActive: {
      type: Boolean,
      default: null
    },

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

    /**
     * if true a remove icon will be shown allowing to remove
     * all input at once
     */
    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
    },

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

    /**
     * turn off input fade out if it interferes with other styling (e.g. with custom input)
     */
    useFadeOut: {
      type: Boolean,
      default: true
    },

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

    /**
     * set a language (ISO 639-1)
     */
    language: {
      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
    },

    /**
     * set true if input field should be disabled
     */
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      isActiveInt: false,
      inputInt: ''
    };
  },
  computed: {
    /**
     * check if an id was provided (to handle label input connection), if not create one
     * @returns {String|string}
     */
    idInt: function idInt() {
      return this.id || createId();
    },

    /**
     * determines if label row should be shown
     * @returns {Boolean|boolean}
     */
    showLabelRow: function showLabelRow() {
      // get label-addition slot
      var slotElements = this.$slots['label-addition']; // check if slot exists and has data and actually has content
      // (this did not work with SSR otherwise...)

      var slotsHaveData = !!slotElements && !!slotElements.length && slotElements.some(function (elem) {
        return elem.tag;
      }); // show label when prop is set true or a label addition was added via slot

      return this.showLabel || slotsHaveData;
    },

    /**
     * determines if remove icon should be shown
     * @returns {boolean}
     */
    showRemoveIcon: function showRemoveIcon() {
      return this.clearable && !!this.inputInt;
    },
    inputListeners: function inputListeners() {
      var _this = this;

      return _objectSpread2(_objectSpread2({}, this.$listeners), {
        // for number fields: prevent the event if type is number (or e) but input is not
        keydown: function keydown(event) {
          if (_this.fieldType === 'number' && Number.isNaN(Number(event.key)) && !['e', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(event.key)) {
            event.preventDefault();
          } else {
            /**
             * keydown event, modified to have identical behaviour
             * across browsers for number input
             *
             * @event keydown
             * @param {KeyboardEvent} event
             *
             */
            _this.$emit('keydown', event);
          }
        },
        input: function input(event) {
          /**
           * Event emitted on input, passing input string
           *
           * @event input
           * @param {string} value - the input event value however
           * passing only the event.target.value
           *
           */
          _this.$emit('input', _this.fieldType === 'number' ? Number(event.target.value) : event.target.value);
        }
      });
    },

    /**
     * find and store the input element associated with this component in a variable
     */
    inputElement: function inputElement() {
      // check if client side
      if (window) {
        // if input element exists in ref use this one
        if (this.$refs && this.$refs.input) {
          return this.$refs.input;
        } // otherwise check for an custom element by id


        var tempElement = document.getElementById(this.idInt); // check if element exists

        if (tempElement) {
          return tempElement;
        } // otherwise warn that the id was not assigned to the input element


        console.warn('BaseInput: you did not assign the same id to the BaseInputComponent and the input element!');
      }

      return null;
    }
  },
  watch: {
    /**
     * watch input prop to sync with internal inputInt variable
     */
    input: {
      handler: function handler(val) {
        if (val !== this.inputInt) {
          this.inputInt = val;
        }
      },
      immediate: true
    },

    /**
     * if an external input element is used changes in inputInt need to be propagated to
     * parent manually
     * @param {string} val
     */
    inputInt: function inputInt(val) {
      // check if the internal input element exists and if values are in sync
      if (val !== this.input) {
        // if not propagate change to parent
        this.$emit('input', val);
      }
    },

    /**
     * keep externally set active variable and internal active variable in sync
     * @param {boolean} val
     */
    isActive: function isActive(val) {
      if (val !== this.isActiveInt) {
        this.isActiveInt = val;
      }
    },

    /**
     * keep externally set active variable and internal active variable in sync
     * @param {boolean} val
     */
    isActiveInt: function isActiveInt(val) {
      // if active was set true focus the input field
      if (this.inputElement && val && this.setFocusOnActive) {
        this.inputElement.focus();
      }

      if (val !== this.isActive) {
        /**
         * propagate active state changes of input field to parent
         * @event update:is-active
         * @param {boolean} val
         */
        this.$emit('update:is-active', val);
      }
    }
  },
  methods: {
    /**
     * special event triggered when tab was used on clear input button
     * @param {KeyboardEvent} event
     */
    blurInput: function blurInput(event) {
      // set input active state false
      this.setFieldState(false); // handle as if tab was coming from input to also allow parent to handle
      // active state if isActive is used

      this.$emit('keydown', event);
    },

    /**
     * function triggered if click event or focus event happened inside the
     * 'input-frame' element
     * @param {FocusEvent|MouseEvent} event the native event
     */
    clickedInside: function clickedInside(event) {
      if (!this.disabled) {
        this.setFieldState(true);
        /**
         * Event emitted on click on input field \<div\>
         *
         * @event click-input-field
         * @param {FocusEvent|MouseEvent} event - event triggered by focusin or click
         *
         */

        this.$emit('click-input-field', event);
      }
    },

    /**
     * triggered when click happened outside of 'input-frame' element
     * @param {Event} event
     */
    clickedOutsideInput: function clickedOutsideInput(event) {
      this.setFieldState(false);
      /**
       * Event emitted when click outside input field \<div\> is registered
       *
       * @event clicked-outside
       * @param {MouseEvent} event
       *
       */

      this.$emit('clicked-outside', event);
    },

    /**
     * triggered on clear input button click and removes input and returns focus
     * to input field
     */
    removeInput: function removeInput() {
      this.inputInt = '';

      if (this.inputElement) {
        this.inputElement.focus();
      }
    },

    /**
     * set the active input field state (used for visual active indication)
     * @param {boolean} val - the value to be set
     */
    setFieldState: function setFieldState(val) {
      this.isActiveInt = val;
    },
    handleInputTab: function handleInputTab(event) {
      if (!(this.showRemoveIcon && !!this.inputInt)) {
        this.setFieldState(false);
      }

      this.$emit('keydown', event);
    }
  }
};

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-input"
  }, [_c('div', {
    class: ['base-input__label-row', {
      'hide': !_vm.showLabelRow
    }]
  }, [_c('label', {
    class: ['base-input__label', {
      'hide': !_vm.showLabel
    }],
    attrs: {
      "for": _vm.idInt
    }
  }, [_vm._v("\n      " + _vm._s(_vm.getLangLabel(_vm.label)) + "\n    ")]), _vm._v(" "), _c('div', {
    staticClass: "base-input__label-spacer"
  }), _vm._v(" "), _vm._t("label-addition")], 2), _vm._v(" "), _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: _vm.clickedOutsideInput,
      expression: "clickedOutsideInput"
    }],
    class: ['base-input__input-frame', {
      'base-input__input-frame__border': _vm.showInputBorder
    }, {
      'base-input__input-frame__disabled': _vm.disabled
    }, {
      'base-input__input-frame__invalid': _vm.invalid
    }],
    on: {
      "focusin": _vm.clickedInside,
      "click": _vm.clickedInside
    }
  }, [_c('div', {
    class: ['base-input__input-container', {
      'base-input__input-container__is-active': _vm.isActiveInt && _vm.useFormFieldStyling
    }]
  }, [_vm._t("pre-input-field"), _vm._v(" "), _c('div', {
    class: ['base-input__input-line-container', {
      'base-input__input-line-container__wrap': !_vm.hideInputField
    }]
  }, [_vm._t("input-field-addition-before"), _vm._v(" "), _c('div', {
    staticClass: "base-input__input-line"
  }, [_vm._t("input-field-inline-before"), _vm._v(" "), _c('div', {
    class: ['base-input__input-wrapper', {
      'base-input__input-wrapper__fade-out': _vm.useFadeOut && !_vm.isActiveInt && !_vm.hideInputField
    }]
  }, [_vm._t("input", function () {
    return [_vm.fieldType === 'checkbox' ? _c('input', _vm._g({
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.inputInt,
        expression: "inputInt"
      }],
      ref: "input",
      class: [_vm.inputClass, 'base-input__input', {
        'base-input__input__hidden': _vm.hideInputField
      }],
      attrs: {
        "id": _vm.idInt,
        "placeholder": _vm.placeholder,
        "list": _vm.dropDownListId || false,
        "disabled": _vm.disabled,
        "aria-disabled": _vm.disabled.toString(),
        "aria-activedescendant": _vm.linkedListOption,
        "aria-describedby": _vm.idInt,
        "aria-required": _vm.required.toString(),
        "required": _vm.required.toString(),
        "aria-invalid": _vm.invalid.toString(),
        "autocomplete": "off",
        "type": "checkbox"
      },
      domProps: {
        "checked": Array.isArray(_vm.inputInt) ? _vm._i(_vm.inputInt, null) > -1 : _vm.inputInt
      },
      on: {
        "keydown": function keydown($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
            return null;
          }

          return _vm.handleInputTab.apply(null, arguments);
        },
        "change": function change($event) {
          var $$a = _vm.inputInt,
              $$el = $event.target,
              $$c = $$el.checked ? true : false;

          if (Array.isArray($$a)) {
            var $$v = null,
                $$i = _vm._i($$a, $$v);

            if ($$el.checked) {
              $$i < 0 && (_vm.inputInt = $$a.concat([$$v]));
            } else {
              $$i > -1 && (_vm.inputInt = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
            }
          } else {
            _vm.inputInt = $$c;
          }
        }
      }
    }, _vm.inputListeners)) : _vm.fieldType === 'radio' ? _c('input', _vm._g({
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.inputInt,
        expression: "inputInt"
      }],
      ref: "input",
      class: [_vm.inputClass, 'base-input__input', {
        'base-input__input__hidden': _vm.hideInputField
      }],
      attrs: {
        "id": _vm.idInt,
        "placeholder": _vm.placeholder,
        "list": _vm.dropDownListId || false,
        "disabled": _vm.disabled,
        "aria-disabled": _vm.disabled.toString(),
        "aria-activedescendant": _vm.linkedListOption,
        "aria-describedby": _vm.idInt,
        "aria-required": _vm.required.toString(),
        "required": _vm.required.toString(),
        "aria-invalid": _vm.invalid.toString(),
        "autocomplete": "off",
        "type": "radio"
      },
      domProps: {
        "checked": _vm._q(_vm.inputInt, null)
      },
      on: {
        "keydown": function keydown($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
            return null;
          }

          return _vm.handleInputTab.apply(null, arguments);
        },
        "change": function change($event) {
          _vm.inputInt = null;
        }
      }
    }, _vm.inputListeners)) : _c('input', _vm._g({
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.inputInt,
        expression: "inputInt"
      }],
      ref: "input",
      class: [_vm.inputClass, 'base-input__input', {
        'base-input__input__hidden': _vm.hideInputField
      }],
      attrs: {
        "id": _vm.idInt,
        "placeholder": _vm.placeholder,
        "list": _vm.dropDownListId || false,
        "disabled": _vm.disabled,
        "aria-disabled": _vm.disabled.toString(),
        "aria-activedescendant": _vm.linkedListOption,
        "aria-describedby": _vm.idInt,
        "aria-required": _vm.required.toString(),
        "required": _vm.required.toString(),
        "aria-invalid": _vm.invalid.toString(),
        "autocomplete": "off",
        "type": _vm.fieldType
      },
      domProps: {
        "value": _vm.inputInt
      },
      on: {
        "keydown": function keydown($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
            return null;
          }

          return _vm.handleInputTab.apply(null, arguments);
        },
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.inputInt = $event.target.value;
        }
      }
    }, _vm.inputListeners))];
  }, null, {
    id: _vm.idInt
  })], 2), _vm._v(" "), _vm.showRemoveIcon ? _c('button', {
    staticClass: "base-input__remove-icon-wrapper",
    on: {
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
          return null;
        }

        return _vm.blurInput.apply(null, arguments);
      },
      "click": function click($event) {
        $event.stopPropagation();
        return _vm.removeInput.apply(null, arguments);
      }
    }
  }, [_vm._t("remove-icon", function () {
    return [_c('BaseIcon', {
      staticClass: "base-input__remove-icon",
      attrs: {
        "name": "remove",
        "title": "Clear input"
      }
    })];
  })], 2) : _vm._e(), _vm._v(" "), _vm.loadable ? _c('div', {
    staticClass: "base-input__loader"
  }, [_c('BaseLoader', {
    attrs: {
      "hide": !_vm.isLoading
    }
  })], 1) : _vm._e(), _vm._v(" "), _vm._t("input-field-addition-after")], 2)], 2), _vm._v(" "), _vm.showErrorIcon && _vm.invalid ? _c('div', {
    staticClass: "base-input__error-icon-wrapper"
  }, [_vm._t("error-icon", function () {
    return [_c('BaseIcon', {
      staticClass: "base-input__error-icon",
      attrs: {
        "name": "attention"
      }
    })];
  })], 2) : _vm._e(), _vm._v(" "), _vm._t("post-input-field")], 2)]), _vm._v(" "), _c('div', [_vm._t("below-input")], 2), _vm._v(" "), _vm.invalid && _vm.errorMessage ? _c('div', {
    staticClass: "base-input__invalid-message"
  }, [_vm._v("\n    " + _vm._s(_vm.getLangLabel(_vm.errorMessage)) + "\n  ")]) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

export { BaseInput as default };
