import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.array.includes-1f433385.js';
import { v as vueClickOutside } from './index-b4d779f7.js';
import DatePicker from 'vue2-datepicker';
import { d as de, e as en, f as fr } from './fr-3b425a87.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './es.array.concat-9f3136dc.js';
import './array-species-create-afb281e6.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';

/**
 * Date Panel
 */

var script = {
  name: 'BaseDatePanel',
  components: {
    BaseIcon: BaseIcon,
    DatePicker: DatePicker
  },
  directives: {
    ClickOutside: vueClickOutside
  },
  model: {
    prop: 'input',
    event: 'selected'
  },
  props: {
    /**
     * specify if icon should be displayed left or right <br>
     * valid values: 'left' | 'right'
     */
    iconPosition: {
      type: String,
      default: 'left',
      validator: function validator(val) {
        return ['left', 'right'].includes(val);
      }
    },

    /**
     * @model
     *
     * set input field from outside<br>
     * format: { date: 'yyyy-MM-dd' }
     */
    input: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * show panel permanently
     */
    isInline: {
      type: Boolean,
      default: false
    },

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

    /**
     * set calendar language
     */
    language: {
      type: String,
      default: 'en'
    },

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

    /**
     * select type of calendar <br>
     * valid values: 'date' | 'week'
     */
    type: {
      type: String,
      default: 'date',
      validator: function validator(val) {
        return ['date', 'week'].includes(val);
      }
    },

    /**
     * label will be replace with selected date unless this is set false
     */
    showDateSelected: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      inputInt: null,
      isOpen: false,

      /**
       * datepicker localisations
       *   using object fixes problem of missing localisation files in rollup-esm-build
       */
      lang: {
        de: de,
        en: en,
        fr: fr
      }
    };
  },
  computed: {
    labelInt: function labelInt() {
      if (!this.isInline && this.showDateSelected && this.inputInt) {
        return new Date(this.inputInt).toLocaleDateString(this.language);
      }

      return this.label;
    }
  },
  watch: {
    input: {
      handler: function handler(val) {
        // check if input string is different from inputInt
        if (val && this.inputInt && val.date !== this.inputInt) {
          this.inputInt = val.date;
        }
      },
      // to not need to do extra assignment in created()
      immediate: true
    },
    inputInt: {
      handler: function handler(val, before) {
        if (val && val !== before) {
          this.emitData(val);
          this.isOpen = false;
        }
      },
      deep: true
    }
  },
  methods: {
    /**
     * Define object to emit
     *
     * @param {string} date
     * @returns {object}
     */
    emitObject: function emitObject(date) {
      var obj = {
        date: date
      };

      if (this.type === 'week') {
        obj.week = this.$refs.datePanel.getWeek(new Date(date));
      }

      return obj;
    },

    /**
     * emit data function
     */
    emitData: function emitData(value) {
      /**
       * emit event when date or week is selected<br>
       * format: { date: 'yyyy-MM-dd' }
       *
       * @event selected
       * @param {Object} value - an object with the following properties:
       * @property {string} date - the date string in format 'YYYY-MM-DD'
       * @property {string} week - if type is 'week' also the week is emitted
       */
      this.$emit('selected', this.emitObject(value));
    }
  }
};

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

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

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

  return _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: function value() {
        return _vm.isOpen = false;
      },
      expression: "() => isOpen = false"
    }],
    staticClass: "base-date-panel"
  }, [_c('div', {
    class: ['base-date-panel__label', {
      'base-date-panel__label--hover': !_vm.isInline
    }],
    on: {
      "click": function click($event) {
        $event.stopPropagation();
        _vm.isOpen = !_vm.isOpen;
      }
    }
  }, [!_vm.isInline ? _c('base-icon', {
    class: ['base-date-panel__icon', {
      'base-date-panel__icon--active': _vm.isOpen
    }, {
      'base-date-panel__icon--right': _vm.iconPosition === 'right'
    }],
    attrs: {
      "name": "calendar-many"
    }
  }) : _vm._e(), _vm._v(" "), _vm.showLabel || !_vm.isInline ? _c('label', [_vm._v("\n      " + _vm._s(_vm.labelInt || _vm.label) + "\n    ")]) : _vm._e()], 1), _vm._v(" "), _c('div', {
    on: {
      "click": function click($event) {
        $event.stopPropagation();
      }
    }
  }, [_c('date-picker', {
    ref: "datePanel",
    attrs: {
      "append-to-body": false,
      "clearable": false,
      "editable": false,
      "inline": _vm.isInline,
      "input": _vm.input,
      "lang": _vm.lang[_vm.language],
      "type": _vm.type,
      "format": 'YYYY-MM-DD',
      "open": _vm.isOpen,
      "value-type": "format"
    },
    model: {
      value: _vm.inputInt,
      callback: function callback($$v) {
        _vm.inputInt = $$v;
      },
      expression: "inputInt"
    }
  })], 1)]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-098daa39";
/* 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 BaseDatePanel = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseDatePanel);
  }
};
use(Plugin);

export { BaseDatePanel, Plugin as default };
