{"version":3,"sources":["webpack:///src/components/v-date-input/src/components/v-date-input/v-date-input.vue"],"names":[],"mappings":"AAuJA,0CACA,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,kBAAA,CACA,UAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,WACA","file":"dd11aecc69505042.css","sourcesContent":["<template>\n  <fieldset class=\"v-date-input__container\" aria-label=\"Dato\">\n    <div class=\"row\">\n      <div class=\"col-4\">\n        <v-input\n          :required=\"required\"\n          date-input=\"date\"\n          type=\"tel\"\n          name=\"day\"\n          :placeholder=\"placeholders.day\"\n          :value=\"dateObj.day\"\n          error=\"Indtast gyldig dato\"\n          description=\"DD\"\n          pattern=\"^(0[1-9]|[12][0-9]|3[01])$\"\n          :min=\"1\"\n          :max=\"31\"\n          @input=\"dateObj.day = $event.target.value\"\n          :invalid=\"isInvalid\"\n        />\n      </div>\n      <div class=\"col-4\">\n        <v-input\n          :required=\"required\"\n          :value=\"dateObj.month\"\n          date-input=\"month\"\n          type=\"tel\"\n          name=\"month\"\n          :placeholder=\"placeholders.month\"\n          error=\"Indtast gyldigt måned\"\n          description=\"MM\"\n          pattern=\"^(0[1-9]|1[0-2])$\"\n          :min=\"1\"\n          :max=\"12\"\n          @input=\"dateObj.month = $event.target.value\"\n          :invalid=\"isInvalid\"\n        />\n      </div>\n      <div class=\"col-4\">\n        <v-input\n          :required=\"required\"\n          :value=\"dateObj.year\"\n          type=\"tel\"\n          name=\"year\"\n          description=\"ÅÅÅÅ\"\n          :placeholder=\"placeholders.year\"\n          date-input=\"year\"\n          error=\"Indtast gyldigt år\"\n          @input=\"dateObj.year = $event.target.value\"\n          pattern=\"^(19|20)\\d{2}$\"\n          :invalid=\"isInvalid\"\n        />\n      </div>\n    </div>\n  </fieldset>\n</template>\n<script>\nimport moment from \"moment\";\n\nexport default {\n  name: \"v-date-input\",\n  props: {\n    date: {\n      type: [String, Date],\n      default: null\n    },\n    required: {\n      type: Boolean,\n      default: false\n    },\n    reset: {\n      type: Boolean,\n      default: false\n    },\n    placeholders: {\n      type: Object,\n      default: () => ({\n        day: \"Dato\",\n        month: \"Måned\",\n        year: \"År\"\n      })\n    }\n  },\n  data() {\n    return {\n      dateObj: {\n        day: null,\n        month: null,\n        year: null\n      },\n      isInvalid: false\n    };\n  },\n  computed: {},\n  watch: {\n    reset(val) {\n      if (val) {\n        this.dateObj.day = null;\n        this.dateObj.month = null;\n        this.dateObj.year = null;\n      }\n    },\n    dateObj: {\n      handler(val) {\n        if (val.day && val.month && val.year && val.year.length === 4) {\n          this.onInput();\n        }\n      },\n      deep: true\n    },\n    date: {\n      immediate: true,\n      handler(val) {\n        // if there is date in iso format, autofill into input fields\n        if (val) {\n          const date = moment(val);\n          if (date) {\n            this.dateObj.day = date.format(\"DD\");\n            this.dateObj.month = date.format(\"MM\");\n            this.dateObj.year = date.format(\"YYYY\");\n          }\n        }\n      }\n    }\n  },\n  methods: {\n    onInput() {\n      this.isInvalid = false;\n      if (this.dateObj.day && this.dateObj.month && this.dateObj.year) {\n        const completeDate = `${this.dateObj.month}/${this.dateObj.day}/${this.dateObj.year}`;\n        const date = moment.utc(completeDate, \"MM/DD/YYYY\").toISOString();\n        if (moment(date).isValid()) {\n          this.isInvalid = false;\n          // Clear custom validity on all input fields\n          this.$el.querySelectorAll(\"input\").forEach(input => {\n            input.setCustomValidity(\"\");\n          });\n          this.$emit(\"date\", date);\n        } else {\n          this.isInvalid = true;\n          // Set custom validity on at least one input field to prevent form submission\n          this.$el\n            .querySelector('input[name=\"day\"]')\n            .setCustomValidity(\"Invalid date\");\n          // You can also set a more specific message\n        }\n      }\n    }\n  }\n};\n</script>\n<style scoped>\n.v-date-input__container {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  border: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n}\n</style>\n"]}