import './es.array.concat-669570ef.js';
import './es.object.to-string-9e0d4e1d.js';
import './es.regexp.to-string-71ed70dc.js';
import './es.array.slice-27d0c7ca.js';
import { _ as _slicedToArray } from './utils-758ec5e2.js';
import { _ as _toConsumableArray } from './toConsumableArray-fb122614.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.array.includes-d05e3b05.js';
import './es.object.keys-9aa2f274.js';
import './es.string.includes-00e9ada6.js';
import { i as inheritIfRequired } from './es.number.constructor-5832cadd.js';
import './es.array.join-407e20e6.js';
import { b as regexpStickyHelpers } from './regexp-exec-abstract-6a5efbab.js';
import './es.string.split-7ed30d2b.js';
import './es.json.stringify-fd4825dc.js';
import './es.array.filter-6cdb02a1.js';
import './web.dom-collections.for-each-ccc220dc.js';
import { o as objectDefineProperty, g as global_1, d as descriptors, f as fails, b as isObject, n as normalizeComponent } from './normalize-component-1b2cdbb6.js';
import { o as objectGetOwnPropertyNames, w as wellKnownSymbol, B as isForced_1, b as redefine, q as internalState, _ as _export, r as requireObjectCoercible } from './well-known-symbol-6e9136be.js';
import { i as isRegexp } from './is-regexp-58409ce7.js';
import { r as regexpFlags } from './regexp-flags-e2ab70ab.js';
import { s as setSpecies } from './set-species-c523ed30.js';
import { g as getSubstitution } from './es.string.replace-b4ea85c2.js';
import BaseInput from './BaseInput-8402e00d.js';
import { v as vueClickOutside } from './index-bcf13e20.js';
import DatePicker from 'vue2-datepicker';
import { d as de, e as en, f as fr } from './fr-52b5e0b1.js';
import BaseIcon from './BaseIcon-d0b5435d.js';
import './array-species-create-6fc0b2c4.js';
import './create-property-2fc26c80.js';
import './array-method-has-species-support-4ec91b65.js';
import './classof-2816ca36.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.map-2dfef513.js';
import './array-iteration-ec419780.js';
import './function-bind-context-b3fabf77.js';
import './es.array.sort-fea6d291.js';
import './array-method-is-strict-52649d4d.js';
import './defineProperty-18999f8e.js';
import './object-keys-24d2d6fd.js';
import './object-set-prototype-of-a5b268a6.js';
import './string-multibyte-1626d420.js';
import './dom-iterables-b6f5ef3b.js';
import './i18n-ad4a7ece.js';

var defineProperty$1 = objectDefineProperty.f;
var getOwnPropertyNames = objectGetOwnPropertyNames.f;





var enforceInternalState = internalState.enforce;



var MATCH = wellKnownSymbol('match');
var NativeRegExp = global_1.RegExp;
var RegExpPrototype$2 = NativeRegExp.prototype;
var re1 = /a/g;
var re2 = /a/g;

// "new" should create a new object, old webkit bug
var CORRECT_NEW = new NativeRegExp(re1) !== re1;

var UNSUPPORTED_Y$1 = regexpStickyHelpers.UNSUPPORTED_Y;

var FORCED = descriptors && isForced_1('RegExp', (!CORRECT_NEW || UNSUPPORTED_Y$1 || fails(function () {
  re2[MATCH] = false;
  // RegExp constructor can alter flags and IsRegExp works correct with @@match
  return NativeRegExp(re1) != re1 || NativeRegExp(re2) == re2 || NativeRegExp(re1, 'i') != '/a/i';
})));

// `RegExp` constructor
// https://tc39.es/ecma262/#sec-regexp-constructor
if (FORCED) {
  var RegExpWrapper = function RegExp(pattern, flags) {
    var thisIsRegExp = this instanceof RegExpWrapper;
    var patternIsRegExp = isRegexp(pattern);
    var flagsAreUndefined = flags === undefined;
    var sticky;

    if (!thisIsRegExp && patternIsRegExp && pattern.constructor === RegExpWrapper && flagsAreUndefined) {
      return pattern;
    }

    if (CORRECT_NEW) {
      if (patternIsRegExp && !flagsAreUndefined) pattern = pattern.source;
    } else if (pattern instanceof RegExpWrapper) {
      if (flagsAreUndefined) flags = regexpFlags.call(pattern);
      pattern = pattern.source;
    }

    if (UNSUPPORTED_Y$1) {
      sticky = !!flags && flags.indexOf('y') > -1;
      if (sticky) flags = flags.replace(/y/g, '');
    }

    var result = inheritIfRequired(
      CORRECT_NEW ? new NativeRegExp(pattern, flags) : NativeRegExp(pattern, flags),
      thisIsRegExp ? this : RegExpPrototype$2,
      RegExpWrapper
    );

    if (UNSUPPORTED_Y$1 && sticky) {
      var state = enforceInternalState(result);
      state.sticky = true;
    }

    return result;
  };
  var proxy = function (key) {
    key in RegExpWrapper || defineProperty$1(RegExpWrapper, key, {
      configurable: true,
      get: function () { return NativeRegExp[key]; },
      set: function (it) { NativeRegExp[key] = it; }
    });
  };
  var keys = getOwnPropertyNames(NativeRegExp);
  var index = 0;
  while (keys.length > index) proxy(keys[index++]);
  RegExpPrototype$2.constructor = RegExpWrapper;
  RegExpWrapper.prototype = RegExpPrototype$2;
  redefine(global_1, 'RegExp', RegExpWrapper);
}

// https://tc39.es/ecma262/#sec-get-regexp-@@species
setSpecies('RegExp');

var UNSUPPORTED_Y = regexpStickyHelpers.UNSUPPORTED_Y;
var defineProperty = objectDefineProperty.f;
var getInternalState = internalState.get;
var RegExpPrototype$1 = RegExp.prototype;

// `RegExp.prototype.sticky` getter
// https://tc39.es/ecma262/#sec-get-regexp.prototype.sticky
if (descriptors && UNSUPPORTED_Y) {
  defineProperty(RegExp.prototype, 'sticky', {
    configurable: true,
    get: function () {
      if (this === RegExpPrototype$1) return undefined;
      // We can't use InternalStateModule.getterFor because
      // we don't add metadata for regexps created by a literal.
      if (this instanceof RegExp) {
        return !!getInternalState(this).sticky;
      }
      throw TypeError('Incompatible receiver, RegExp required');
    }
  });
}

// TODO: Remove from `core-js@4` since it's moved to entry points




var DELEGATES_TO_EXEC = function () {
  var execCalled = false;
  var re = /[ac]/;
  re.exec = function () {
    execCalled = true;
    return /./.exec.apply(this, arguments);
  };
  return re.test('abc') === true && execCalled;
}();

var nativeTest = /./.test;

// `RegExp.prototype.test` method
// https://tc39.es/ecma262/#sec-regexp.prototype.test
_export({ target: 'RegExp', proto: true, forced: !DELEGATES_TO_EXEC }, {
  test: function (str) {
    if (typeof this.exec !== 'function') {
      return nativeTest.call(this, str);
    }
    var result = this.exec(str);
    if (result !== null && !isObject(result)) {
      throw new Error('RegExp exec method returned something other than an Object or null');
    }
    return !!result;
  }
});

var REPLACE = wellKnownSymbol('replace');
var RegExpPrototype = RegExp.prototype;
var max = Math.max;

var stringIndexOf = function (string, searchValue, fromIndex) {
  if (fromIndex > string.length) return -1;
  if (searchValue === '') return fromIndex;
  return string.indexOf(searchValue, fromIndex);
};

// `String.prototype.replaceAll` method
// https://tc39.es/ecma262/#sec-string.prototype.replaceall
_export({ target: 'String', proto: true }, {
  replaceAll: function replaceAll(searchValue, replaceValue) {
    var O = requireObjectCoercible(this);
    var IS_REG_EXP, flags, replacer, string, searchString, functionalReplace, searchLength, advanceBy, replacement;
    var position = 0;
    var endOfLastMatch = 0;
    var result = '';
    if (searchValue != null) {
      IS_REG_EXP = isRegexp(searchValue);
      if (IS_REG_EXP) {
        flags = String(requireObjectCoercible('flags' in RegExpPrototype
          ? searchValue.flags
          : regexpFlags.call(searchValue)
        ));
        if (!~flags.indexOf('g')) throw TypeError('`.replaceAll` does not allow non-global regexes');
      }
      replacer = searchValue[REPLACE];
      if (replacer !== undefined) {
        return replacer.call(searchValue, O, replaceValue);
      }
    }
    string = String(O);
    searchString = String(searchValue);
    functionalReplace = typeof replaceValue === 'function';
    if (!functionalReplace) replaceValue = String(replaceValue);
    searchLength = searchString.length;
    advanceBy = max(1, searchLength);
    position = stringIndexOf(string, searchString, 0);
    while (position !== -1) {
      if (functionalReplace) {
        replacement = String(replaceValue(searchString, position, string));
      } else {
        replacement = getSubstitution(searchString, string, position, [], undefined, replaceValue);
      }
      result += string.slice(endOfLastMatch, position) + replacement;
      endOfLastMatch = position + searchLength;
      position = stringIndexOf(string, searchString, position + advanceBy);
    }
    if (endOfLastMatch < string.length) {
      result += string.slice(endOfLastMatch);
    }
    return result;
  }
});

/**
 * Form Input Field Component for Date, Date - Date, Date - Time, or Time - Time
 *
 * for date also a format switch between date | year is available
 *
 */

var script = {
  name: 'BaseDateInput',
  components: {
    BaseInput: BaseInput,
    BaseIcon: BaseIcon,
    BaseSwitchButton: function BaseSwitchButton() {
      return import('./BaseSwitchButton-aeaa4a27.js');
    },
    DatePicker: DatePicker
  },
  directives: {
    ClickOutside: vueClickOutside
  },
  model: {
    prop: 'input',
    event: 'selected'
  },
  props: {
    /**
     * select date or datetime or a range
     */
    type: {
      type: String,
      default: 'single',
      validator: function validator(val) {
        return ['daterange', 'datetime', 'single', 'timerange'].includes(val);
      }
    },

    /**
     * @model
     *
     * input field settable from outside<br>
     *   attention: if this is an object it needs to contain all the
     *   properties (e.g. date_from, time_to) already otherwise only
     *   a string will be returned
     */
    input: {
      type: [Object, String, Date],
      required: true
    },

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

    /**
     * set a placeholder for the input field (object with date and time attribute respectively)
     */
    placeholder: {
      type: [Object, String],
      default: function _default() {
        return {
          date: 'Select Date',
          time: 'Select Time'
        };
      }
    },

    /**
     * define the range separator
     */
    rangeSeparator: {
      type: String,
      default: '–'
    },

    /**
     * specify date format<br>
     *  'date_year': display tabs that allow for toggle between only choosing year
     *   or complete date
     */
    format: {
      type: String,
      default: 'day',
      validator: function validator(val) {
        return ['day', 'month', 'year', 'date_year'].includes(val);
      }
    },

    /**
     * specify labels displayed instead of 'DD.MM.YYYY' and 'YYYY' <br>
     *   should have the form { date: 'xxx', year: 'yyy' }
     */
    dateFormatLabels: {
      type: Object,
      default: function _default() {
        return {
          date: 'DD.MM.YYYY',
          year: 'YYYY'
        };
      },
      validator: function validator(val) {
        var labelKeys = Object.keys(val);
        return labelKeys.includes('date') && labelKeys.includes('year');
      }
    },

    /**
     * a legend for the date format switch buttons
     */
    formatTabsLegend: {
      type: String,
      default: 'Switch between date formats'
    },

    /**
     * set calendar language (ISO 639-1) (currently only 'en', 'de' and 'fr' are supported)
     *  @values de, en, fr
     */
    language: {
      type: String,
      default: 'en',
      validator: function validator(val) {
        return ['de', 'en', 'fr'].includes(val);
      }
    },

    /**
     * set id
     */
    id: {
      type: [Number, String],
      default: 1
    },

    /**
     * define if standard form field styling should be
     * used (otherwise no border, no box shadow)
     */
    useFormFieldStyling: {
      type: Boolean,
      default: true
    },

    /**
     * option to have the border of the input field not displayed
     */
    showInputBorder: {
      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: true
    },

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

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

    /**
     * in order to be able to set input field active state from outside
     */
    isActive: {
      type: Boolean,
      default: false
    },

    /**
     * use this prop to set a delay in ms before calender is displayed
     */
    isActiveDelay: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      /**
       * internal input representation with all possible values for
       * date and time
       * @typedef {Object} inputInt
       * @property {string} inputInt.date - attribute a single date or datetime date is stored in
       * @property {string} inputInt.date_from - storing daterange from
       * @property {string} inputInt.date_to - storing daterange to
       * @property {string} inputInt.time - storing the time for datetime type
       * @property {string} inputInt.time_from - storing timerange from
       * @property {string} inputInt.time_to - storing timerange to
       */
      inputInt: {
        date: '',
        date_from: '',
        date_to: '',
        time: '',
        time_from: '',
        time_to: ''
      },

      /**
       * variable for toggling format between date and year for date_year format
       * @type {string}
       */
      dateFormatInt: '',

      /**
       * variable to store the date when switching from date to year in order to be
       * able to restore exact date when switching back
       * @type {inputInt}
       */
      tempDateStore: {},

      /**
       * to steer closing of datepicker from input field once date is selected
       * @type {boolean}
       */
      fromOpen: false,

      /**
       * to steer closing of datepicker to input field once date is selected
       * @type {boolean}
       */
      toOpen: false,

      /**
       * variable to keep active state in sync with potential parent prop
       * (this is needed as independent variable from toOpen and fromOpen for example in
       * BaseAdvancedSearchRow to keep dropdown open even if datepicker is closed)
       */
      isActiveInt: false,

      /**
       * variable to steer if input fade out of from field should be shown
       * @type {boolean}
       */
      useFadeOutFrom: false,

      /**
       * variable to steer if input fade out of to field should be shown
       * @type {boolean}
       */
      useFadeOutTo: false,

      /**
       * variable to steer if icons should be shown (becoming false if not enough
       * space)
       * @type {boolean}
       */
      showIcons: true,

      /**
       * variable to store icon size which is calculated in the beginning and might be
       * hidden later
       * @type {number}
       */
      iconSize: 24,

      /**
       * Resize Observer to trigger fade out calculations when component is resized
       * @type {?ResizeObserver}
       */
      resizeObserver: null,

      /**
       * datepicker localisations
       *   using object fixes problem of missing localisation files in rollup-esm-build
       */
      lang: {
        de: de,
        en: en,
        fr: fr
      }
    };
  },
  computed: {
    /**
     * this is the format we want to store computed based on what
     * was specified in format and what date toggle tabs (via dateFormatInt) might say
     * TODO: check if this is still needed with custom input
     * @returns {string}
     */
    datePickerValueFormat: function datePickerValueFormat() {
      if (this.format === 'year' || this.dateFormatInt === 'YYYY') {
        return 'YYYY';
      }

      if (this.format === 'month') {
        return 'YYYY-MM';
      }

      return 'YYYY-MM-DD';
    },

    /**
     * compute the date format needed for the date picker (display!)
     * TODO: check if this is still needed with custom input
     * @returns {string}
     */
    dateFormatDisplay: function dateFormatDisplay() {
      return this.datePickerValueFormat.split('-').reverse().join('.');
    },

    /**
     * if the format is settable this.format is date_year and can not be
     * used directly for the date picker component
     * @returns {string}
     */
    minDateView: function minDateView() {
      if (this.format === 'date_year' && this.dateFormatInt === 'YYYY') {
        return 'year';
      }

      if (this.format === 'date_year' && this.dateFormatInt === 'DD.MM.YYYY') {
        return 'day';
      }

      return this.format;
    },

    /**
     * compute the properties of the object provided in input prop
     * @returns {string[]}
     */
    inputProperties: function inputProperties() {
      return Object.keys(this.input);
    },

    /**
     * check if format switch tabs should be shown
     * @returns {boolean}
     */
    showFormatOptions: function showFormatOptions() {
      return this.format === 'date_year';
    },

    /**
     * check if input is just a single date or an object
     * @returns {boolean}
     */
    isSingleDate: function isSingleDate() {
      return typeof this.input === 'string' || !this.inputProperties.length;
    },

    /**
     * handle input for the 'from' input field
     */
    inputFrom: {
      /**
       * get back the appropriate inputInt attribute value
       * @returns {string}
       */
      get: function get() {
        // if it is a time field just return the time_from value
        if (this.isFromTimeField) {
          return this.inputInt.time_from;
        } // else it is a date (either single or date_from) --> convert it into the
        // correct format for display (DD.MM.YYYY instead of the saved DD-MM-YYY)


        return this.dateDisplay(this.inputInt.date || this.inputInt.date_from);
      },

      /**
       * also assign them again accordingly
       * @param {string} val - the value provided by the input element
       */
      set: function set(val) {
        if (this.isFromTimeField) {
          this.inputInt.time_from = val;
        } else if (this.inputProperties.includes('date_from')) {
          this.inputInt.date_from = this.dateStorage(val);
        } else {
          this.inputInt.date = this.dateStorage(val);
        }
      }
    },

    /**
     * as above - if there is only a single time field get value from 'time' variable
     * if it is a range use 'time_to''
     */
    inputTo: {
      /**
       * get back the appropriate inputInt attribute value
       * @returns {string}
       */
      get: function get() {
        // check if a to time field exists
        if (this.isToTimeField) {
          // return the appropriate attribute value
          return this.inputInt.time || this.inputInt.time_to;
        } // else return the date_to attribute value


        return this.dateDisplay(this.inputInt.date_to);
      },

      /**
       * also assign them again accordingly
       * @param {string} val - the value provided by the input element
       */
      set: function set(val) {
        // check if field is date field
        if (!this.isToTimeField) {
          // if so, set date_to attribute value and transform value appropriately
          // TODO: this could be insufficient since currently no validity checks on input string
          this.inputInt.date_to = this.dateStorage(val); // else check if type is timerange
        } else if (this.inputProperties.includes('time_from')) {
          this.inputInt.time_to = val; // else assume the type is datetime
        } else {
          this.inputInt.time = val;
        }
      }
    },

    /**
     * determine if the initially provided date is a year or a full date
     * (used to set the correct date display format and date/year switch button)
     * @returns {boolean}
     */
    isDateFormatYear: function isDateFormatYear() {
      var _this = this;

      return this.isSingleDate && this.inputInt.date && this.inputInt.date.length <= 4 || this.inputProperties.some(function (key) {
        return !!key.includes('date') && _this.inputInt[key] && _this.inputInt[key].length <= 4;
      });
    },

    /**
     * determine if the from field is a time field
     * @returns {boolean}
     */
    isFromTimeField: function isFromTimeField() {
      return this.type === 'timerange';
    },

    /**
     * determine if the to field is a time field
     * @returns {boolean}
     */
    isToTimeField: function isToTimeField() {
      return this.type === 'datetime' || this.type === 'timerange';
    },

    /**
     * compute an object that takes component $listeners and manipulate them for custom
     * needs
     * @returns {Object}
     */
    inputListeners: function inputListeners() {
      var _this2 = this;

      return _objectSpread2(_objectSpread2({}, this.$listeners), {
        // stop these BaseInput originating events to substitute them with the
        // correct events in search container element
        'clicked-outside': function clickedOutside(event) {
          event.stopPropagation();
        },
        // need to stop the event triggered in original BaseInput as well
        // and replace it with the internal active state variable
        'update:is-active': function updateIsActive() {
          /**
           * replace BaseInput state with BaseDateInput field active state and
           * propagate this one
           *
           * @event update:is-active
           * @type {boolean}
           */
          _this2.$emit('update:is-active', _this2.isActiveInt);
        }
      });
    },

    /**
     * compute an object that takes component $listeners and manipulate them for custom
     * needs
     * @returns {Object}
     */
    dateInputListeners: function dateInputListeners() {
      var _this3 = this;

      return _objectSpread2(_objectSpread2({}, this.$listeners), {}, {
        // and add custom listeners
        input: function input() {
          /**
           * Event emitted on input, passing input string
           *
           * @event input
           * @param {string} value - the input event value however
           * passing only the event.target.value
           *
           */
          _this3.$emit('input', _this3.getInputData());
        }
      });
    }
  },
  watch: {
    /**
     * watch format and set correct dateFormat
     */
    format: {
      handler: function handler(val) {
        if (val === 'year') {
          this.dateFormatInt = 'YYYY';
          return;
        }

        if (val === 'month') {
          this.dateFormatInt = 'MM.YYYY';
          return;
        }

        this.dateFormatInt = 'DD.MM.YYYY';
      },
      immediate: true
    },

    /**
     * watch input set from outside and set internal inputInt accordingly as well as
     * set the correct display format
     */
    input: {
      handler: function handler(val) {
        // check if input string is different from inputInt
        if (JSON.stringify(val) !== JSON.stringify(this.getInputData())) {
          this.inputInt = this.isSingleDate ? {
            date: val
          } : _objectSpread2({}, val); // check if external input was year format and set internal format accordingly

          if (this.showFormatOptions) {
            this.dateFormatInt = this.isDateFormatYear ? 'YYYY' : 'DD.MM.YYYY';
          }
        }
      },
      // to not need to do extra assignment in created()
      immediate: true
    },

    /**
     * if inputInt changes inform parent about it
     */
    inputInt: {
      handler: function handler() {
        // the actual value is not needed here since data were transformed and
        // original object structure with correct data is retrieved with function getInputData
        if (JSON.stringify(this.input) !== JSON.stringify(this.getInputData())) {
          this.emitData();
        }
      },
      deep: true
    },

    /**
     * in order to allow user to restore previous date after switching
     * from date to year and back store in temp variable (but only if previous date was full date
     * (check necessary for starting with year where format is switched to 'YYYY'
     * but no previous full date avaliable))
     * @param {string} val - the changed dateFormatInt value
     */
    dateFormatInt: function dateFormatInt(val) {
      if (val === 'YYYY' && !this.isDateFormatYear) {
        this.tempDateStore = _objectSpread2({}, this.inputInt);
      }

      this.convertDate();
    },

    /**
     * when input becomes inactive always also blur input field just in case
     * @param {boolean} val - the changed fromOpen value
     */
    fromOpen: function fromOpen(val) {
      if (!val) {
        this.$refs.inputFrom.blur();
      } else {
        this.toOpen = false;
      }
    },

    /**
     * when input becomes inactive always also blur input field just in case
     * @param {boolean} val - the changed toOpen value
     */
    toOpen: function toOpen(val) {
      if (!val && this.$refs.inputTo) {
        this.$refs.inputTo.blur();
      } else if (val) {
        this.fromOpen = false;
      }
    },

    /**
     * watch for changes in input field active variable to keep in sync with parent
     * @param {boolean} val - the changed internal is active variable
     */
    isActiveInt: function isActiveInt(val) {
      if (val !== this.isActive) {
        this.$emit('update:is-active', val);
      }
    },

    /**
     * also adjust internal variable when active state changes from outside
     * @param {boolean} val - the changed isActive prop
     */
    isActive: {
      handler: function handler(val) {
        if (val !== this.isActiveInt) {
          this.isActiveInt = val;
        } // if isActive is set false from outside also close date picker


        if (!val) {
          this.fromOpen = false;
          this.toOpen = false;
        }
      },
      immediate: true
    }
  },
  mounted: function mounted() {
    if (this.$refs.baseIcon) {
      this.iconWidth = this.$refs.baseIcon.$el.clientWidth;
    } // initialize the resize observer to calculate fade out when component is resized


    this.initObserver();
  },
  updated: function updated() {
    var _this4 = this;

    // this hack is necessary because otherwise keyboard navigation was impaired by the datepicker
    // pop up elements
    // check if datepicker element is actually open
    if (this.fromOpen || this.toOpen) {
      // wait until elements are rendered
      this.$nextTick(function () {
        // get all focusable elements that have the 'mx-' in the class name
        // had to add 'div's as well because of some strange effect in Firefox
        var keyboardfocusableElements = _toConsumableArray(_this4.$el.querySelectorAll('div, a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')).filter(function (el) {
          return !el.hasAttribute('disabled');
        }).filter(function (el) {
          return el.className.includes('mx-');
        }); // iterate through the elements and add tabindex -1


        keyboardfocusableElements.forEach(function (element) {
          element.setAttribute('tabindex', -1);
        });
      });
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) this.resizeObserver.unobserve(this.$refs.baseDateInput);
  },
  methods: {
    initObserver: function initObserver() {
      var _this5 = this;

      // create an observer with the fade out calc function
      var tempResizeObserver = new ResizeObserver(function () {
        return _this5.calcFadeOut(['From', 'To']);
      }); // put it on the relevant element

      tempResizeObserver.observe(this.$refs.baseDateInput); // store it in variable

      this.resizeObserver = tempResizeObserver;
    },

    /**
     * transform the date to the correct display format
     * @param {string} dateString - the date string in YYYY-MM-DD format
     */
    dateDisplay: function dateDisplay(dateString) {
      return dateString ? dateString.split('-').reverse().join('.') : '';
    },

    /**
     * transform the date to the correct storage format
     * @param {string} dateString - the date string in DD.MM.YYYY format
     */
    dateStorage: function dateStorage(dateString) {
      return dateString ? dateString.split('.').reverse().join('-') : '';
    },

    /**
     * checks done on keydown events
     * a) tab key needs separate handling and only needs to set input field close when
     * there is no clearable button (or shift key was used for going to previous field)
     * b) prevent user from entering chars other than number or period (date) or colon (time)
     * and not more characters than the date format requires
     * @param {KeyboardEvent} event - the keydown event
     * @param {string} origin - is event coming from 'from' or 'to' field in title case
     */
    handleInputKeydown: function handleInputKeydown(event, origin) {
      var currentInputString = this["input".concat(origin)]; // get the key triggering the event

      var key = event.key; // now check for the specific input key to preventDefault and prevent unwanted
      // characters
      // create boolean to determine if it is a time field (otherwise date is assumed)

      var isTimeField = this.type === 'timerange' || this.type === 'datetime' && origin === 'to'; // if time ':' is allowed in input regex - otherwise '.'

      var allowedFieldKey = isTimeField ? ':' : '\\.'; // create regex for allowed keys

      var allowedKeysRegex = new RegExp("([0-9]|".concat(allowedFieldKey, "|Backspace|Delete|Tab|Enter|ArrowRight|ArrowLeft)")); // create regex that should not be allowed if max length is reached

      var disallowedKeysOnLengthRegex = new RegExp("([0-9]|".concat(allowedFieldKey, ")")); // get the max length for the respective format (for time: 'HH:mm' = 5)

      var formatLength = isTimeField ? 5 : this.dateFormatInt.length; // check if
      // * key was not any of the allowed keys
      // * or was an allowed key but the length is to long for the format in
      //    question (and no text was selected = will be replaced)
      // * if type is date and key was period and date format is year or last char in string was
      //    already a period
      // * if type is time and key was colon and last char was already a colon

      if (!allowedKeysRegex.test(key) || disallowedKeysOnLengthRegex.test(key) && this["input".concat(origin)].length >= formatLength && document.activeElement.selectionEnd - document.activeElement.selectionStart === 0 || !isTimeField && key === '.' && (this.dateFormatInt === 'YYYY' || currentInputString.charAt(currentInputString.length - 1) === '.') || isTimeField && key === ':' && currentInputString.charAt(currentInputString.length - 1) === ':') {
        event.preventDefault();
      } // when the user tries to leave the field check if input string is valid


      if (key === 'Enter' && currentInputString) {
        this.checkDateValidity(origin);
        currentInputString = this["input".concat(origin)];
      } // check if key was tab because of reasons specified above and close picker if necessary


      if (key === 'Enter' || key === 'Tab' && (event.shiftKey || !this.clearable || !currentInputString)) {
        // if yes set the relevant input field open status to false
        this["".concat(origin.charAt(0).toLowerCase()).concat(origin.slice(1), "Open")] = false;
      }
    },

    /**
     * this function is triggered with the input event - it checks the length of the value and
     * adds the '.' (date) or (':') or '0' in the correct places if necessary
     * @param {InputEvent} event - the input event
     * @param {string} origin - is event coming from 'from' or 'to' field in title case
     */
    checkDate: function checkDate(event, origin) {
      // get the value in question
      var value = this["input".concat(origin)];
      var isTimeField = this.type === 'timerange' || this.type === 'datetime' && origin.toLowerCase() === 'to';
      var charToAdd = isTimeField ? ':' : '.'; // check if value is present and if input type is other than 'deleteContentBackward' because
      // otherwise the dots can not be deleted anymore

      if (value && event.inputType !== 'deleteContentBackward') {
        // now check the date format and if input so far matches the appropriate regex
        if (!isTimeField && this.dateFormatInt === 'DD.MM.YYYY' && /^(\d{2}$|\d{2}\.\d{2})$/.test(value) || (this.dateFormatInt === 'MM.YYYY' || isTimeField) && /^\d{2}$/.test(value)) {
          // if so - add a period character
          this["input".concat(origin)] = "".concat(value).concat(charToAdd);
        }

        var firstTwoDigitsRegex = new RegExp("^[1-9]".concat(isTimeField ? ':' : '\\.', "$")); // check if input was a period - if yes - check date validity and add zeros if necessary

        if (firstTwoDigitsRegex.test(value)) {
          this["input".concat(origin)] = "0".concat(this["input".concat(origin)]);
        } else if (/^\d{2}\.\d\.$/.test(value)) {
          var _value$split = value.split('.'),
              _value$split2 = _slicedToArray(_value$split, 3),
              day = _value$split2[0],
              month = _value$split2[1],
              year = _value$split2[2];

          this["input".concat(origin)] = "".concat(day, ".0").concat(month, ".").concat(year);
        }
      }
    },

    /**
     * this function is triggered with the blur event on the input and does a last check on the
     * validity of the value
     * @param {string} origin - is event coming from 'from' or 'to' field in title case
     */
    checkDateValidity: function checkDateValidity(origin) {
      // get the value in question
      var value = this["input".concat(origin)]; // check if there is a value present

      if (value) {
        // important and mostly different checks to make depending if value is date or time
        // so save that in variable
        var isTimeField = this.type === 'timerange' || this.type === 'datetime' && origin.toLowerCase() === 'to'; // also save the current format length

        var formatLength = isTimeField ? 5 : this.dateFormatInt.length; // get the separator depending on time or date field

        var separator = isTimeField ? ':' : '.'; // get the array length of array with string split up by separator (should be same for
        // format and value string)

        var numberFormatParts = isTimeField ? 2 : this.dateFormatInt.split('.').length; // first check if periods (date) or colons (time) are too many

        if (value.split(separator).length > numberFormatParts) {
          // just remove all the periods or colons - there the next check will add some again
          this["input".concat(origin)] = value.replaceAll('.', '');
          value = this["input".concat(origin)];
        } // check if there are too little separators


        if (numberFormatParts > value.split(separator).length) {
          // check if day and month (for DDMMYYYY) or month and year (for MMYYYY) or time
          // are without period or colon respectively
          if (formatLength !== 4 && /^\d{3}/.test(value)) {
            // this assumes the first two digits are for day or month respectively!
            // TODO: not ideal that 2 digits are assumed - see if this can be improved
            this["input".concat(origin)] = "".concat(value.slice(0, 2)).concat(separator).concat(value.slice(2, value.length));
            value = this["input".concat(origin)];
          } // check if there is a second period between month and year (for DDMMYYYY)


          if (this.dateFormatInt === 'DD.MM.YYYY' && formatLength !== 4 && /^\d{2}\.\d{3}/.test(value)) {
            // this assumes there are two digits for day and month respectively!
            // TODO: not ideal that 2 digits are assumed - see if this can be improved
            this["input".concat(origin)] = "".concat(value.slice(0, 5), ".").concat(value.slice(5, value.length));
            value = this["input".concat(origin)];
          }
        } // second check if the length of the value is correct


        if (value.length !== formatLength) {
          // distinguish between date and time string
          if (isTimeField) {
            // check if minutes are missing
            if (/^\d{1,2}:?$/.test(value)) {
              var _value$split3 = value.split(':'),
                  _value$split4 = _slicedToArray(_value$split3, 1),
                  hours = _value$split4[0];

              this["input".concat(origin)] = "".concat(hours, ":00");
              value = this["input".concat(origin)];
            } // check if zeros out front are missing from hour


            if (/^\d:\d{1,2}$/.test(value)) {
              var _value$split5 = value.split(':'),
                  _value$split6 = _slicedToArray(_value$split5, 2),
                  _hours = _value$split6[0],
                  minutes = _value$split6[1];

              this["input".concat(origin)] = "0".concat(_hours, ":").concat(minutes);
              value = this["input".concat(origin)];
            } // check if zeros out front are missing from minute


            if (/^\d{2}:\d$/.test(value)) {
              var _value$split7 = value.split(':'),
                  _value$split8 = _slicedToArray(_value$split7, 2),
                  _hours2 = _value$split8[0],
                  _minutes = _value$split8[1];

              this["input".concat(origin)] = "".concat(_hours2, ":0").concat(_minutes);
              value = this["input".concat(origin)];
            }
          } else {
            // first check reason for length mismatch is year having only two digits or is
            // completely missing for date format
            if (this.dateFormatInt === 'DD.MM.YYYY' && /^\d{1,2}\.\d{1,2}\.?(\d{0}|\d{2})$/.test(value)) {
              // determine current year
              var currentYear = new Date().getFullYear();

              var _value$split9 = value.split('.'),
                  _value$split10 = _slicedToArray(_value$split9, 3),
                  day = _value$split10[0],
                  month = _value$split10[1],
                  year = _value$split10[2]; // repair date and add first two year digits - if date more than 10 years to the
              // future - make it 20. century


              var century = currentYear.toString().slice(0, 2);
              this["input".concat(origin)] = "".concat(day, ".").concat(month, ".").concat(year > (currentYear + 10).toString().slice(2, 4) ? Number(century - 1) : century).concat(year || currentYear.toString().slice(2, 4));
              value = this["input".concat(origin)];
            } // for month format


            if (this.dateFormatInt === 'MM.YYYY' && /^\d{1,2}\.?(\d{0}|\d{2})$/.test(value)) {
              // determine current year
              var _currentYear = new Date().getFullYear();

              var _value$split11 = value.split('.'),
                  _value$split12 = _slicedToArray(_value$split11, 2),
                  _month = _value$split12[0],
                  _year = _value$split12[1]; // repair date and add first two year digits - if date more than 10 years to the
              // future - make it current century - otherwise last century


              var _century = _currentYear.toString().slice(0, 2);

              this["input".concat(origin)] = "".concat(_month, ".").concat(_year > (_currentYear + 10).toString().slice(2, 4) ? Number(_century - 1) : _century).concat(_year || _currentYear.toString().slice(2, 4));
              value = this["input".concat(origin)];
            } // second check if the reason for the length not matching is that the day is
            // missing a zero


            if (this.dateFormatInt === 'DD.MM.YYYY' && /^[1-9]\.\d{1,2}\.\d{4}$/.test(value)) {
              // get the values
              var _value$split13 = value.split('.'),
                  _value$split14 = _slicedToArray(_value$split13, 3),
                  _day = _value$split14[0],
                  _month2 = _value$split14[1],
                  _year2 = _value$split14[2]; // repair date and add a zero to day


              this["input".concat(origin)] = "0".concat(_day, ".").concat(_month2, ".").concat(_year2);
              value = this["input".concat(origin)];
            } // second check if the reason for mismatching length is that the zero in month
            // is missing


            if (['DD.MM.YYYY', 'MM.YYYY'].includes(this.dateFormatInt) && /^\d{2}?\.?[1-9]\.\d{4}$/.test(value)) {
              // get values, reverse in order to be able to get also correct values for format
              // 'month'
              var _value$split$reverse = value.split('.').reverse(),
                  _value$split$reverse2 = _slicedToArray(_value$split$reverse, 3),
                  _year3 = _value$split$reverse2[0],
                  _month3 = _value$split$reverse2[1],
                  _day2 = _value$split$reverse2[2]; // repair date and add missing zero to month


              this["input".concat(origin)] = "".concat(_day2, ".0").concat(_month3, ".").concat(_year3);
              value = this["input".concat(origin)];
            }
          } // now check if time/date has now the correct length - if not still remove the value


          if (value.length !== formatLength) {
            this["input".concat(origin)] = '';
          }
        } // now check for general validity


        if (isTimeField) {
          // just add random date to see if time is valid
          if (Number.isNaN(Date.parse("12.12.1212T".concat(value)))) {
            var _value$split15 = value.split(':'),
                _value$split16 = _slicedToArray(_value$split15, 2),
                _hours3 = _value$split16[0],
                _minutes2 = _value$split16[1]; // check if valid hours


            if (!/^([0-1][0-9]|2[0-4])$/.test(_hours3)) {
              _hours3 = '00';
            } // check if valid minutes


            if (!/^[0-5][0-9]$/.test(_minutes2)) {
              _minutes2 = '00';
            } // construct a new time


            var newTime = "".concat(_hours3, ":").concat(_minutes2); // now check again if time is valid now if yes assign, if no delete the string

            this["input".concat(origin)] = Number.isNaN(Date.parse("12.12.1212T".concat(newTime))) ? newTime : '';
            value = this["input".concat(origin)];
          }
        } else {
          // now truly check if date is a valid date
          if (Number.isNaN(Date.parse(this.dateStorage(value)))) {
            // TODO: check if date has appropriate number of periods
            var _value$split$reverse3 = value.split('.').reverse(),
                _value$split$reverse4 = _slicedToArray(_value$split$reverse3, 3),
                _year4 = _value$split$reverse4[0],
                _month4 = _value$split$reverse4[1],
                _day3 = _value$split$reverse4[2];

            if (this.dateFormatInt === 'DD.MM.YYYY') {
              // TODO: could this check already be done on input???
              // check if something is wrong with the day
              if (!/^(0[1-9]|[1-2][0-9]|3[0-1])/.test(_day3)) {
                // replace day with appropriate value
                this["input".concat(origin)] = "01.".concat(_month4, ".").concat(_year4);
              }
            }

            if (this.dateFormatInt !== 'YYYY') {
              // check if something is wrong with the month
              if (!/^(0[1-9]|1[0-2])/.test(_month4)) {
                // replace month with appropriate value
                this["input".concat(origin)] = "".concat(_day3 ? "".concat(_day3, ".") : '', "01.").concat(_year4);
              }
            }
          } // since technically invalid dates (like 30.02.2000) will also be considered a
          // vaild date by Date.parse() just convert to Date and back one more time
          // new Date(input) will always convert to the actual day in the next month
          // e.g. 31.06. --> 01.07. ; 30.02. --> 02.03.


          var tempDate = this.getDateString(this.convertToDate(this.dateStorage(this["input".concat(origin)])));

          if (!Number.isNaN(Date.parse(this.dateStorage(tempDate)))) {
            this["input".concat(origin)] = this.getDateString(this.convertToDate(this.dateStorage(this["input".concat(origin)])));
          } else {
            this["input".concat(origin)] = '';
          }
        } // after everything also still check if the new date/time string needs a fade out


        this.calcFadeOut([origin]);
      }

      var data = this.getInputData();
      /**
       * this event is emitted when the value was validated in case input should just be considered
       * after date validation
       *
       * @event value-validated
       */

      this.$emit('value-validated', data);
    },

    /**
     * a function to have the time picker close automatically as soon as minutes
     * are selected
     * @param {string} origin - is it from the 'from' or 'to' part of the picker
     * @param {any} time - the selected time (not needed here but passed by event)
     * @param {string} type - was 'hour' or 'minute' selected
     */
    closeTimePicker: function closeTimePicker(origin, time, type) {
      if (type === 'minute') {
        this["".concat(origin, "Open")] = false; // check if the new date/time string needs a fade out

        this.calcFadeOut(["".concat(origin.charAt(0).toUpperCase()).concat(origin.slice(1))]);
      }
    },

    /**
     * function triggered on datepicker 'pick' event, handling date picker closing
     * and date validation
     * @param origin
     * @param isTimeField
     */
    datePicked: function datePicked(origin, isTimeField) {
      if (!isTimeField) {
        this["".concat(origin, "Open")] = false;
      } // need this here because on blur() date is not updated


      this.checkDateValidity(origin);
    },

    /**
     * handle click outside event and adjust input active variable accordingly
     * @param {MouseEvent} event - the event provided by the click outside directive
     */
    clickedOutside: function clickedOutside(event) {
      this.isActiveInt = false;
      /**
       * emit a custom clicked-outside event instead of BaseInput event (propagation stopped)
       *
       * @event clicked-outside
       * @type {MouseEvent}
       */

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

    /**
     * handle click inside the component and adjust input active variable accordingly
     * @param {MouseEvent} event - event triggered by mouse click
     */
    clickedInside: function clickedInside(event) {
      this.isActiveInt = true;
      /**
       * event additionally triggered to BaseInput default click-input-field to also
       * set field active if component sourroundings are clicked
       *
       * @event click-input-field
       * @type {MouseEvent}
       */

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

    /**
     * data emit function, transforming data before emit event
     */
    emitData: function emitData() {
      // get a data object that only contains fields that were also present
      // in external input
      var data = this.getInputData();
      /**
       * emit an event when focus leaves the input
       *
       * @event selected
       * @type {string | Object}
       */

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

    /**
     * convert function triggered on format tab switch
     */
    convertDate: function convertDate() {
      var _this6 = this;

      Object.keys(this.inputInt).filter(function (key) {
        return !!key.includes('date');
      }).forEach(function (dateKey) {
        if (_this6.inputInt[dateKey]) {
          if (_this6.minDateView === 'year') {
            // convert date string to real date in order to get year and convert back to string
            _this6.$set(_this6.inputInt, dateKey, _this6.convertToDate(_this6.inputInt[dateKey]).getFullYear().toString());
          } else {
            // check if year was changed or is still the same
            var yearIdent = new Date(_this6.tempDateStore[dateKey]).getFullYear().toString() === _this6.inputInt[dateKey]; // if there is a stored value set this, otherwise convert year string to date
            // and then to date string in correct format


            _this6.$set(_this6.inputInt, dateKey, yearIdent && _this6.tempDateStore[dateKey] ? _this6.tempDateStore[dateKey] : _this6.getDateString(_this6.convertToDate(_this6.inputInt[dateKey])));
          }
        }
      });
    },

    /**
     * if input was just a single string return that otherwise
     * only return the properties provided by external input <br>
     * if input is empty set value to empty string instead of null (default vue2-datepicker)
     * @returns {string | Object}
     */
    getInputData: function getInputData() {
      var _this7 = this;

      if (this.isSingleDate) {
        return this.inputInt.date !== null ? this.inputInt.date : '';
      }

      var data = {};
      this.inputProperties.forEach(function (key) {
        return _this7.$set(data, key, _this7.inputInt[key] !== null ? _this7.inputInt[key] : '');
      });
      return data;
    },

    /**
     * convert a value to a date in local time at zero hours
     *
     * @param value: the date string stored in db (format YYYY-MM-DD)
     * @returns {Date} - (e.g. Fri Jul 30 2021 00:00:00 GMT+0200 (Central European Summer Time))
     */
    convertToDate: function convertToDate(value) {
      return new Date("".concat(value, "T00:00:00.000"));
    },

    /**
     * a function to convert a date to a string in the format YYYY-MM-DD
     *
     * @param {Date} date in format
     * @returns {string} - returns a string in format YYYY-MM-DD
     */
    getDateString: function getDateString(date) {
      // there is always a year
      var dateString = "".concat(date.getFullYear().toString()); // if date format is not 'year' only - add month

      if (this.dateFormatInt !== 'YYYY') {
        var month = (date.getMonth() + 1).toString();
        dateString = "".concat(dateString, "-").concat(month.length < 2 ? '0' : '').concat(month);
      } // if date format is 'date' - add day


      if (this.dateFormatInt === 'DD.MM.YYYY') {
        var day = date.getDate().toString();
        dateString = "".concat(dateString, "-").concat(day.length < 2 ? '0' : '').concat(day);
      }

      return dateString;
    },

    /**
     * function to calculate if fade out in the input fields should be shown, needs to be
     * recalculated after resize or if input changes
     */
    calcFadeOut: function calcFadeOut(inputFields) {
      var _this8 = this;

      // now iterate through the relevant fields
      inputFields.forEach(function (field) {
        // check if element exists
        if (_this8.$refs["input".concat(field)]) {
          // now get the input field value
          var inputValue = _this8.$refs["input".concat(field)].value; // for width (and fade out) calculation either use that or the placeholder visible
          // in the field (this is saved in a separate variable from inputValue because for
          // show icons only input value is relevant)


          var text = inputValue || _this8.$refs["input".concat(field)].getAttribute('placeholder'); // now check if any of the two exists


          if (text) {
            // create a span
            var span = document.createElement('span'); // hide the span

            span.setAttribute('class', 'hide'); // add the input extracted text to this span

            span.innerHTML = text; // add the element to the document body

            document.body.appendChild(span); // get the width of that element

            var textWidth = span.offsetWidth; // remove the element again

            document.body.removeChild(span); // now also get the input width

            var inputWidth = _this8.$refs["input".concat(field)].offsetWidth; // check if the input value or placeholder width exceeds input width


            if (textWidth > inputWidth) {
              // if yes and there is input and icons are shown
              if (inputValue && _this8.showIcons) {
                // remove icons
                _this8.showIcons = false; // otherwise use fade out
              } else {
                _this8["useFadeOut".concat(field)] = true;
              } // if input value or placeholder fit the input width

            } else if (textWidth <= inputWidth) {
              // check first if the fade out is used
              if (_this8["useFadeOut".concat(field)]) {
                // if so - disable this one first
                _this8["useFadeOut".concat(field)] = false; // else check if the icon would actually fit in the input together with the
                // input width - if so - show icons
              } else if (!_this8.showIcons && textWidth + _this8.iconWidth <= inputWidth) {
                _this8.showIcons = true;
              }
            }
          }
        }
      });
    },

    /**
     * add delay before value is set
     *
     * @param {String} key
     * @param {boolean} value
     */
    isActiveHandler: function isActiveHandler(key, value) {
      var _this9 = this;

      // if false set value immediately
      if (!value) {
        this[key] = value;
        return;
      } // otherwise add a delay


      setTimeout(function () {
        _this9[key] = value;
      }, this.isActiveDelay);
    }
  }
};

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', {
    ref: "baseDateInput",
    staticClass: "base-date-input"
  }, [_c('div', {
    class: ['base-date-input__label-row', {
      'base-date-input__label-row_visible': _vm.showLabel
    }]
  }, [_vm.showLabel ? _c('legend', {
    staticClass: "base-date-input__label",
    on: {
      "click": function click($event) {
        $event.preventDefault();
      }
    }
  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n    ")]) : _vm._e(), _vm._v(" "), _vm.showFormatOptions ? _c('div', {
    staticClass: "base-date-input__format-tabs"
  }, [_c('BaseSwitchButton', {
    attrs: {
      "options": [{
        label: _vm.dateFormatLabels.date,
        value: 'DD.MM.YYYY'
      }, {
        label: _vm.dateFormatLabels.year,
        value: 'YYYY'
      }],
      "label": _vm.formatTabsLegend,
      "active-tab": _vm.dateFormatInt
    },
    model: {
      value: _vm.dateFormatInt,
      callback: function callback($$v) {
        _vm.dateFormatInt = $$v;
      },
      expression: "dateFormatInt"
    }
  })], 1) : _vm._e()]), _vm._v(" "), _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: _vm.clickedOutside,
      expression: "clickedOutside"
    }],
    staticClass: "base-date-input__field-wrapper",
    on: {
      "click": _vm.clickedInside
    }
  }, [_vm._t("pre-input-field"), _vm._v(" "), _c('div', {
    staticClass: "base-date-input__input-fields"
  }, [_vm._t("input-field-addition-before"), _vm._v(" "), _c('div', {
    staticClass: "base-date-input__input-line"
  }, [_vm._t("input-field-inline-before"), _vm._v(" "), _c('BaseInput', _vm._g({
    staticClass: "base-date-input__input-wrapper",
    attrs: {
      "id": _vm.label + '-' + _vm.id,
      "label": _vm.label,
      "show-label": false,
      "is-active": _vm.fromOpen,
      "use-form-field-styling": _vm.useFormFieldStyling,
      "show-input-border": _vm.showInputBorder,
      "clearable": _vm.clearable,
      "required": _vm.required,
      "invalid": _vm.invalid,
      "disabled": _vm.disabled,
      "show-error-icon": _vm.showErrorIcon,
      "error-message": _vm.errorMessage,
      "input-class": _vm.inputClass,
      "set-focus-on-active": _vm.setFocusOnActive,
      "use-fade-out": _vm.useFadeOutFrom
    },
    on: {
      "update:is-active": function updateIsActive($event) {
        return _vm.isActiveHandler('fromOpen', $event);
      }
    },
    scopedSlots: _vm._u([{
      key: "input",
      fn: function fn() {
        return [_c('div', {
          staticClass: "base-date-input__datepicker"
        }, [_c('DatePicker', {
          attrs: {
            "input-attr": {
              id: _vm.label + '-' + _vm.id
            },
            "placeholder": _vm.isFromTimeField ? _vm.placeholder.time : _vm.placeholder.date,
            "clearable": false,
            "append-to-body": false,
            "lang": _vm.lang[_vm.language],
            "open": _vm.fromOpen,
            "type": _vm.isFromTimeField ? 'time' : _vm.minDateView,
            "format": _vm.isFromTimeField ? 'HH:mm' : _vm.dateFormatDisplay,
            "value-type": _vm.isFromTimeField ? 'format' : _vm.dateFormatInt,
            "input-class": "base-date-input__datepicker-input"
          },
          on: {
            "pick": function pick($event) {
              return _vm.datePicked('from');
            },
            "change": function change($event) {
              var i = arguments.length,
                  argsArray = Array(i);

              while (i--) {
                argsArray[i] = arguments[i];
              }

              _vm.isFromTimeField ? _vm.closeTimePicker.apply(void 0, ['from'].concat(argsArray, [$event])) : '';
            }
          },
          nativeOn: {
            "click": function click($event) {
              $event.preventDefault();
              $event.stopPropagation();
            }
          },
          scopedSlots: _vm._u([{
            key: "input",
            fn: function fn() {
              return [_c('input', _vm._g({
                directives: [{
                  name: "model",
                  rawName: "v-model",
                  value: _vm.inputFrom,
                  expression: "inputFrom"
                }],
                ref: "inputFrom",
                class: ['base-date-input__input', _vm.inputClass],
                attrs: {
                  "id": _vm.label + '-' + _vm.id,
                  "placeholder": _vm.placeholder.date || _vm.placeholder,
                  "aria-describedby": _vm.label + '-' + _vm.id,
                  "aria-required": _vm.required.toString(),
                  "aria-invalid": _vm.invalid.toString(),
                  "required": _vm.required,
                  "disabled": _vm.disabled,
                  "aria-disabled": _vm.disabled,
                  "autocomplete": "off",
                  "type": 'text'
                },
                domProps: {
                  "value": _vm.inputFrom
                },
                on: {
                  "blur": function blur($event) {
                    return _vm.checkDateValidity('From');
                  },
                  "input": [function ($event) {
                    if ($event.target.composing) {
                      return;
                    }

                    _vm.inputFrom = $event.target.value;
                  }, function ($event) {
                    return _vm.checkDate($event, 'From');
                  }],
                  "keydown": function keydown($event) {
                    return _vm.handleInputKeydown($event, 'From');
                  }
                }
              }, _vm.dateInputListeners))];
            },
            proxy: true
          }, {
            key: "icon-calendar",
            fn: function fn() {
              return [_c('div', {
                staticClass: "base-date-input__icon-wrapper"
              })];
            },
            proxy: true
          }]),
          model: {
            value: _vm.inputFrom,
            callback: function callback($$v) {
              _vm.inputFrom = $$v;
            },
            expression: "inputFrom"
          }
        })], 1)];
      },
      proxy: true
    }, {
      key: "post-input-field",
      fn: function fn() {
        return [_vm.showIcons ? _c('BaseIcon', {
          ref: "baseIcon",
          staticClass: "base-date-input__date-icon",
          attrs: {
            "name": _vm.isFromTimeField ? 'clock' : 'calendar-many'
          },
          on: {
            "click": function click($event) {
              $event.stopPropagation();
              _vm.fromOpen = !_vm.fromOpen;
            }
          }
        }) : _vm._e()];
      },
      proxy: true
    }]),
    model: {
      value: _vm.inputFrom,
      callback: function callback($$v) {
        _vm.inputFrom = $$v;
      },
      expression: "inputFrom"
    }
  }, _vm.inputListeners)), _vm._v(" "), _vm.type === 'daterange' || _vm.type === 'timerange' ? _c('span', {
    staticClass: "base-date-input__separator"
  }, [_vm._v(_vm._s(_vm.rangeSeparator))]) : _vm._e(), _vm._v(" "), _vm.type !== 'single' ? _c('BaseInput', _vm._g({
    staticClass: "base-date-input__input-wrapper",
    attrs: {
      "id": _vm.label + '-to-' + _vm.id,
      "label": _vm.label,
      "show-label": false,
      "is-active": _vm.toOpen,
      "use-form-field-styling": _vm.useFormFieldStyling,
      "show-input-border": _vm.showInputBorder,
      "clearable": _vm.clearable,
      "required": _vm.required,
      "invalid": _vm.invalid,
      "disabled": _vm.disabled,
      "show-error-icon": _vm.showErrorIcon,
      "error-message": _vm.errorMessage,
      "set-focus-on-active": _vm.setFocusOnActive,
      "use-fade-out": _vm.useFadeOutTo
    },
    on: {
      "update:is-active": function updateIsActive($event) {
        return _vm.isActiveHandler('toOpen', $event);
      }
    },
    scopedSlots: _vm._u([{
      key: "input",
      fn: function fn() {
        return [_c('div', {
          staticClass: "base-date-input__datepicker"
        }, [_c('DatePicker', {
          attrs: {
            "input-attr": {
              id: _vm.label + '-' + _vm.id
            },
            "placeholder": _vm.isToTimeField ? _vm.placeholder.time : _vm.placeholder.date,
            "clearable": false,
            "append-to-body": false,
            "lang": _vm.lang[_vm.language],
            "open": _vm.toOpen,
            "type": _vm.isToTimeField ? 'time' : _vm.minDateView,
            "format": _vm.isToTimeField ? 'HH:mm' : _vm.dateFormatDisplay,
            "value-type": _vm.isToTimeField ? 'format' : _vm.datePickerValueFormat,
            "input-class": "base-date-input__datepicker-input"
          },
          on: {
            "pick": function pick($event) {
              return _vm.datePicked('to');
            },
            "change": function change($event) {
              var i = arguments.length,
                  argsArray = Array(i);

              while (i--) {
                argsArray[i] = arguments[i];
              }

              _vm.isToTimeField ? _vm.closeTimePicker.apply(void 0, ['to'].concat(argsArray, [$event])) : '';
            }
          },
          nativeOn: {
            "click": function click($event) {
              $event.preventDefault();
              $event.stopPropagation();
            }
          },
          scopedSlots: _vm._u([{
            key: "input",
            fn: function fn() {
              return [_c('input', _vm._g({
                directives: [{
                  name: "model",
                  rawName: "v-model",
                  value: _vm.inputTo,
                  expression: "inputTo"
                }],
                ref: "inputTo",
                class: ['base-date-input__input', _vm.inputClass],
                attrs: {
                  "id": _vm.label + '-to-' + _vm.id,
                  "placeholder": _vm.placeholder.date || _vm.placeholder,
                  "aria-describedby": _vm.label + '-to-' + _vm.id,
                  "aria-required": _vm.required.toString(),
                  "aria-invalid": _vm.invalid.toString(),
                  "required": _vm.required,
                  "disabled": _vm.disabled,
                  "aria-disabled": _vm.disabled,
                  "autocomplete": "off",
                  "type": 'text'
                },
                domProps: {
                  "value": _vm.inputTo
                },
                on: {
                  "blur": function blur($event) {
                    return _vm.checkDateValidity('To');
                  },
                  "input": [function ($event) {
                    if ($event.target.composing) {
                      return;
                    }

                    _vm.inputTo = $event.target.value;
                  }, function ($event) {
                    return _vm.checkDate($event, 'To');
                  }],
                  "keydown": function keydown($event) {
                    return _vm.handleInputKeydown($event, 'To');
                  }
                }
              }, _vm.dateInputListeners))];
            },
            proxy: true
          }, {
            key: "icon-calendar",
            fn: function fn() {
              return [_c('div', {
                staticClass: "base-date-input__icon-wrapper"
              })];
            },
            proxy: true
          }], null, false, 2497183588),
          model: {
            value: _vm.inputTo,
            callback: function callback($$v) {
              _vm.inputTo = $$v;
            },
            expression: "inputTo"
          }
        })], 1)];
      },
      proxy: true
    }, {
      key: "post-input-field",
      fn: function fn() {
        return [_vm.showIcons ? _c('BaseIcon', {
          staticClass: "base-date-input__date-icon",
          attrs: {
            "name": _vm.isToTimeField ? 'clock' : 'calendar-many'
          },
          on: {
            "click": function click($event) {
              $event.stopPropagation();
              _vm.toOpen = !_vm.toOpen;
            }
          }
        }) : _vm._e()];
      },
      proxy: true
    }], null, false, 2937885247),
    model: {
      value: _vm.inputTo,
      callback: function callback($$v) {
        _vm.inputTo = $$v;
      },
      expression: "inputTo"
    }
  }, _vm.inputListeners)) : _vm._e()], 2)], 2), _vm._v(" "), _vm._t("post-input-field")], 2), _vm._v(" "), _c('div', {
    staticClass: "base-date-input__below"
  }, [_vm._t("below-input")], 2)]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-409ab2b1";
/* 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 BaseDateInput = __vue_component__;

export { BaseDateInput as default };
