vue-accessible-date-field - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/types/src/vue-accessible-date-field.vue.d.ts

@@ -33,5 +33,3 @@ import { PropType } from 'vue';
     uniqueString: string | undefined;
-    calendarIcon: string;
 }, {
-    icon(): string;
     calendarVisible(): boolean;
@@ -38,0 +36,0 @@ placeholderText(): string;

dist/vue-accessible-date-field.esm.js

@@ -1,2 +0,2 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, vModelText, withKeys, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode, createTextVNode } from 'vue';
+import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, vModelText, withKeys, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode, createTextVNode, pushScopeId, popScopeId } from 'vue';
 
@@ -54,3 +54,3 @@ const monthsData = {
 
-var calendarIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218pt%22%20height%3D%2218pt%22%20viewBox%3D%220%200%20815.000000%20822.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate%280.000000%2C822.000000%29%20scale%280.100000%2C-0.100000%29%22fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M2382%208200%20c-18%20-11%20-41%20-34%20-52%20-52%20-19%20-31%20-20%20-51%20-20%20-380%20l0-348%20-1022%20-2%20-1023%20-3%20-56%20-26%20c-79%20-37%20-133%20-90%20-171%20-167%20l-33%20-67%200%20-34450%20-3445%2033%20-67%20c38%20-77%2092%20-130%20171%20-167%20l56%20-26%201766%20-3%201767%20-2%20953%20250c1139%20300%202795%20732%203144%20821%20l250%2064%200%203010%200%203010%20-33%2067%20c-38%2077%20-92%20130-171%20167%20l-56%2026%20-1032%203%20-1033%202%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072-255%2072%20-190%200%20-215%20-7%20-255%20-72%20-19%20-31%20-20%20-51%20-20%20-380%20l0%20-348%20-1205%200-1205%200%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072%20-255%2072%20-152%200%20-173%20-2-203%20-20z%20m-72%20-1672%20c0%20-375%201%20-395%2020%20-426%2040%20-65%2065%20-72%20255%20-72%20190%200%202157%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%201205%200%201205%200%200%20-392%20c0%20-375%201%20-395%2020-426%2040%20-65%2065%20-72%20255%20-72%20190%200%20215%207%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%209150%20915%200%200%20-790%200%20-790%20-3575%200%20-3575%200%200%20790%200%20790%20905%200%20905%200%200%20-392z%20m5340-3180%20c0%20-848%20-4%20-1478%20-9%20-1473%20-5%206%20-73%20107%20-151%20225%20-78%20118%20-146%20219%20-150223%20-4%205%20-627%20-404%20-1384%20-907%20l-1378%20-916%20-2039%200%20-2039%200%200%202165%200%2021653575%200%203575%200%200%20-1482z%22%2F%3E%3Cpath%20d%3D%22M1336%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3526%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M5636%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M1336%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3546%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+var calendarIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18pt\" height=\"18pt\" viewBox=\"0 0 815.000000 822.000000\"\r\n preserveAspectRatio=\"xMidYMid meet\">\r\n\r\n<g transform=\"translate(0.000000,822.000000) scale(0.100000,-0.100000)\"\r\nfill=\"#000000\" stroke=\"none\">\r\n<path d=\"M2382 8200 c-18 -11 -41 -34 -52 -52 -19 -31 -20 -51 -20 -380 l0\r\n-348 -1022 -2 -1023 -3 -56 -26 c-79 -37 -133 -90 -171 -167 l-33 -67 0 -3445\r\n0 -3445 33 -67 c38 -77 92 -130 171 -167 l56 -26 1766 -3 1767 -2 953 250\r\nc1139 300 2795 732 3144 821 l250 64 0 3010 0 3010 -33 67 c-38 77 -92 130\r\n-171 167 l-56 26 -1032 3 -1033 2 0 348 c0 329 -1 349 -20 380 -40 65 -65 72\r\n-255 72 -190 0 -215 -7 -255 -72 -19 -31 -20 -51 -20 -380 l0 -348 -1205 0\r\n-1205 0 0 348 c0 329 -1 349 -20 380 -40 65 -65 72 -255 72 -152 0 -173 -2\r\n-203 -20z m-72 -1672 c0 -375 1 -395 20 -426 40 -65 65 -72 255 -72 190 0 215\r\n7 255 72 19 31 20 51 20 426 l0 392 1205 0 1205 0 0 -392 c0 -375 1 -395 20\r\n-426 40 -65 65 -72 255 -72 190 0 215 7 255 72 19 31 20 51 20 426 l0 392 915\r\n0 915 0 0 -790 0 -790 -3575 0 -3575 0 0 790 0 790 905 0 905 0 0 -392z m5340\r\n-3180 c0 -848 -4 -1478 -9 -1473 -5 6 -73 107 -151 225 -78 118 -146 219 -150\r\n223 -4 5 -627 -404 -1384 -907 l-1378 -916 -2039 0 -2039 0 0 2165 0 2165\r\n3575 0 3575 0 0 -1482z\"/>\r\n<path d=\"M1336 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M3526 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M5636 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M1336 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M3546 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n</g>\r\n</svg>";
 
@@ -108,4 +108,3 @@ var script = /*#__PURE__*/defineComponent({
       selectedTdCell,
-      uniqueString,
-      calendarIcon
+      uniqueString
     };
@@ -115,4 +114,5 @@ },
   created() {
-    // kun lisätään lokalisaatio, asetetaan komponentin kieleksi valittu kieli
+    document.body.appendChild(calendarIcon); // kun lisätään lokalisaatio, asetetaan komponentin kieleksi valittu kieli
     // toistaiseksi käytetään suomea   
+
     const html = document.documentElement;
@@ -157,6 +157,2 @@ const htmlLang = html.getAttribute('lang');
   computed: {
-    icon() {
-      return this.calendarIcon;
-    },
-
     calendarVisible() {
@@ -828,2 +824,4 @@ return this.showCalendar;
 
+const _withScopeId = n => (pushScopeId("data-v-e9227550"), n = n(), popScopeId(), n);
+
 const _hoisted_1 = {
@@ -840,9 +838,17 @@ class: "vue-accessible-date-field",
 const _hoisted_4 = ["id", "aria-describedby", "placeholder"];
-const _hoisted_5 = ["src"];
-const _hoisted_6 = ["id"];
-const _hoisted_7 = {
+
+const _hoisted_5 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("img", {
+  class: "open-calendar-icon",
+  alt: "calendar icon",
+  src: "{calendarIcon}",
+  type: "image/svg+xml"
+}, null, -1));
+
+const _hoisted_6 = [_hoisted_5];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = {
   key: 0,
   class: "datepicker-section"
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   class: "calendar-modal",
@@ -853,26 +859,26 @@ role: "dialog",
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   class: "datepicker"
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   class: "datepicker-header-line"
 };
-const _hoisted_11 = ["id"];
 const _hoisted_12 = ["id"];
-const _hoisted_13 = {
+const _hoisted_13 = ["id"];
+const _hoisted_14 = {
   class: "datepicker-header-month"
 };
 
-const _hoisted_14 = /*#__PURE__*/createTextVNode();
+const _hoisted_15 = /*#__PURE__*/createTextVNode();
 
-const _hoisted_15 = {
+const _hoisted_16 = {
   class: "datepicker-header-year"
 };
-const _hoisted_16 = ["id", "aria-labelledby"];
-const _hoisted_17 = ["abbr"];
-const _hoisted_18 = ["onClick", "data-date", "aria-selected", "onKeydown"];
-const _hoisted_19 = {
+const _hoisted_17 = ["id", "aria-labelledby"];
+const _hoisted_18 = ["abbr"];
+const _hoisted_19 = ["onClick", "data-date", "aria-selected", "onKeydown"];
+const _hoisted_20 = {
   class: "buttons"
 };
-const _hoisted_20 = ["id"];
+const _hoisted_21 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -895,15 +901,10 @@ return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [withDirectives(createElementVNode("input", {
     onKeydown: [_cache[3] || (_cache[3] = withKeys($event => _ctx.handleIconPress($event), ["enter"])), _cache[4] || (_cache[4] = withKeys($event => _ctx.handleIconPress($event), ["space"]))]
-  }, [createElementVNode("img", {
-    class: "open-calendar-icon",
-    alt: "calendar icon",
-    src: _ctx.icon,
-    type: "image/svg+xml"
-  }, null, 8, _hoisted_5)], 32)]), createElementVNode("span", {
+  }, _hoisted_6, 32)]), createElementVNode("span", {
     id: 'dateFieldDescription' + _ctx.uniqueString,
     class: "screen-reader-only"
-  }, toDisplayString(_ctx.possibleDateFormats), 9, _hoisted_6)]), _ctx.calendarVisible ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("div", {
+  }, toDisplayString(_ctx.possibleDateFormats), 9, _hoisted_7)]), _ctx.calendarVisible ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("div", {
     onClick: _cache[5] || (_cache[5] = $event => _ctx.handleBackdropClick($event)),
     class: "backdrop",
     ref: "backdrop"
-  }, null, 512), createElementVNode("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [createElementVNode("button", {
+  }, null, 512), createElementVNode("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [createElementVNode("div", _hoisted_11, [createElementVNode("button", {
     type: "button",
@@ -915,3 +916,3 @@ id: 'previousYear-' + _ctx.uniqueString,
     onKeydown: [_cache[7] || (_cache[7] = withKeys($event => _ctx.handlePrevYearTab($event), ["tab"])), _cache[8] || (_cache[8] = withKeys($event => _ctx.closeDatePickerModal($event), ["esc"])), _cache[9] || (_cache[9] = withKeys($event => _ctx.riffleYears('backward', $event), ["enter"]))]
-  }, " « ", 40, _hoisted_11), createElementVNode("button", {
+  }, " « ", 40, _hoisted_12), createElementVNode("button", {
     type: "button",
@@ -925,3 +926,3 @@ class: "arrow-button previous-month-button",
     class: "datepicker-header"
-  }, [createElementVNode("span", _hoisted_13, toDisplayString(_ctx.pickerHeaderMonth), 1), _hoisted_14, createElementVNode("span", _hoisted_15, toDisplayString(_ctx.pickerHeaderYear), 1)], 8, _hoisted_12), createElementVNode("button", {
+  }, [createElementVNode("span", _hoisted_14, toDisplayString(_ctx.pickerHeaderMonth), 1), _hoisted_15, createElementVNode("span", _hoisted_16, toDisplayString(_ctx.pickerHeaderYear), 1)], 8, _hoisted_13), createElementVNode("button", {
     type: "button",
@@ -948,3 +949,3 @@ class: "arrow-button",
       abbr: _ctx.localizationData.dayNames[i]
-    }, toDisplayString(day), 9, _hoisted_17);
+    }, toDisplayString(day), 9, _hoisted_18);
   }), 128))])]), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.daysVisibleCurrentMonth, (week, index) => {
@@ -968,5 +969,5 @@ return openBlock(), createElementBlock("tr", {
         onKeydown: [_cache[19] || (_cache[19] = withKeys($event => _ctx.closeDatePickerModal(), ["esc"])), withKeys($event => _ctx.handleDatePress($event, dayItem, false), ["space"]), withKeys($event => _ctx.handleDatePress($event, dayItem, true), ["enter"]), withKeys($event => _ctx.goToPreviousWeek(dayItem, $event), ["up"]), withKeys($event => _ctx.goToNextWeek(dayItem, $event), ["down"]), withKeys($event => _ctx.goToNextDay(dayItem, $event), ["right"]), withKeys($event => _ctx.goToPreviousDay(dayItem, $event), ["left"]), withKeys($event => _ctx.goToFirstDayOfWeek(dayItem, $event), ["home"]), withKeys($event => _ctx.goToLastDayOfWeek(dayItem, $event), ["end"]), withKeys($event => _ctx.handlePageDown($event, dayItem), ["page-down"]), withKeys($event => _ctx.handlePageUp($event, dayItem), ["page-up"])]
-      }, toDisplayString(dayItem.day), 43, _hoisted_18);
+      }, toDisplayString(dayItem.day), 43, _hoisted_19);
     }), 128))]);
-  }), 128))])], 8, _hoisted_16)]), createElementVNode("div", _hoisted_19, [createElementVNode("button", {
+  }), 128))])], 8, _hoisted_17)]), createElementVNode("div", _hoisted_20, [createElementVNode("button", {
     class: "close-calendar-modal",
@@ -980,3 +981,3 @@ onClick: _cache[20] || (_cache[20] = $event => _ctx.closeDatePickerModal($event)),
     onKeydown: [_cache[23] || (_cache[23] = withKeys($event => _ctx.closeDatePickerModal($event), ["esc"])), _cache[24] || (_cache[24] = withKeys($event => _ctx.handleOKButtonTab($event), ["tab"]))]
-  }, toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_20)])])])) : createCommentVNode("", true)]);
+  }, toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_21)])])])) : createCommentVNode("", true)]);
 }
@@ -1011,7 +1012,7 @@
 
-var css_248z = "\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\nbutton[data-v-c1e39cf6]::before {\r\n     content: url(\"./assets/calendar-icon.svg\");\n}\n.date-field-section .date-field[data-v-c1e39cf6] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-c1e39cf6] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n[data-v-c1e39cf6]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-c1e39cf6] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-c1e39cf6] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-c1e39cf6] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-c1e39cf6] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-c1e39cf6] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-c1e39cf6] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-c1e39cf6] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-c1e39cf6] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-c1e39cf6] {\r\n    color: #222222;\n}\nthead > tr th[data-v-c1e39cf6] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-c1e39cf6] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-c1e39cf6] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-c1e39cf6] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-c1e39cf6] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-c1e39cf6] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-c1e39cf6]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-c1e39cf6]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-c1e39cf6] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-c1e39cf6] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-c1e39cf6] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6],\r\n  button.close-calendar-modal[data-v-c1e39cf6] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-c1e39cf6]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n";
+var css_248z = "\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\r\n\r\n  /* button::before {\r\n     content: url(\"./assets/calendar-icon.svg\");\r\n  } */\n.date-field-section .date-field[data-v-e9227550] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-e9227550] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-e9227550] {\r\n    color: #222222;\n}\n[data-v-e9227550]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-e9227550] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-e9227550] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-e9227550] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-e9227550] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-e9227550] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-e9227550] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-e9227550] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-e9227550] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-e9227550] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-e9227550] {\r\n    color: #222222;\n}\nthead > tr th[data-v-e9227550] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-e9227550] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-e9227550] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-e9227550] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-e9227550] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-e9227550] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-e9227550]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-e9227550]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-e9227550] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-e9227550] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-e9227550] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-e9227550],\r\n  button.close-calendar-modal[data-v-e9227550] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-e9227550]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-e9227550]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-e9227550] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-e9227550]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-c1e39cf6";
+script.__scopeId = "data-v-e9227550";
 
@@ -1018,0 +1019,0 @@ // Import vue component

dist/vue-accessible-date-field.min.js

@@ -1,1 +0,1 @@
-var VueAccessibleDateField=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var a,r,o=[],i=!0,c=!1;try{for(n=n.call(e);!(i=(a=n.next()).done)&&(o.push(a.value),!t||o.length!==t);i=!0);}catch(e){c=!0,r=e}finally{try{i||null==n.return||n.return()}finally{if(c)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}var a={months:[{name:"tammikuu",numberOfDays:31},{name:"helmikuu",numberOfDays:void 0},{name:"maaliskuu",numberOfDays:31},{name:"huhtikuu",numberOfDays:30},{name:"toukokuu",numberOfDays:31},{name:"kesäkuu",numberOfDays:30},{name:"heinäkuu",numberOfDays:31},{name:"elokuu",numberOfDays:31},{name:"syyskuu",numberOfDays:30},{name:"lokakuu",numberOfDays:31},{name:"marraskuu",numberOfDays:30},{name:"joulukuu",numberOfDays:31}]},r={locale:"fi-FI",placeholderText:"Esim. pp.kk.yyyy",dateFormatString:"päivämäärän muoto: ",dateFormatOptions:["pp.kk.vvvv","pp-kk-vvvv","pp/kk/vvvv"],buttonLabel:"Valitse päivämäärä",dayNames:["maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai","sunnuntai"],dayNamesShort:["ma","ti","ke","to","pe","la","su"],selectFocusedButtonLabel:"OK"},o=e.defineComponent({name:"VueAccessibleDateField",props:{defaultDate:String,uniqueName:{type:String},dayOfMonth:{type:Object},months:{type:Object},monthsData:{type:Object},localization:{type:Object}},data:function(){var e=(new Date).getMonth(),t=(new Date).getFullYear();return{showCalendar:!1,monthsData:a,localizationDefaultData:r,localizationData:{locale:"",placeholderText:"",dateFormatString:"",dateFormatOptions:[],buttonLabel:"",dayNames:[],dayNamesShort:[],selectFocusedButtonLabel:""},currentMonth:e,year:t,selectedISODate:undefined,selectedDateString:undefined,selectedTdCell:undefined,uniqueString:undefined,calendarIcon:"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218pt%22%20height%3D%2218pt%22%20viewBox%3D%220%200%20815.000000%20822.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate%280.000000%2C822.000000%29%20scale%280.100000%2C-0.100000%29%22fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M2382%208200%20c-18%20-11%20-41%20-34%20-52%20-52%20-19%20-31%20-20%20-51%20-20%20-380%20l0-348%20-1022%20-2%20-1023%20-3%20-56%20-26%20c-79%20-37%20-133%20-90%20-171%20-167%20l-33%20-67%200%20-34450%20-3445%2033%20-67%20c38%20-77%2092%20-130%20171%20-167%20l56%20-26%201766%20-3%201767%20-2%20953%20250c1139%20300%202795%20732%203144%20821%20l250%2064%200%203010%200%203010%20-33%2067%20c-38%2077%20-92%20130-171%20167%20l-56%2026%20-1032%203%20-1033%202%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072-255%2072%20-190%200%20-215%20-7%20-255%20-72%20-19%20-31%20-20%20-51%20-20%20-380%20l0%20-348%20-1205%200-1205%200%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072%20-255%2072%20-152%200%20-173%20-2-203%20-20z%20m-72%20-1672%20c0%20-375%201%20-395%2020%20-426%2040%20-65%2065%20-72%20255%20-72%20190%200%202157%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%201205%200%201205%200%200%20-392%20c0%20-375%201%20-395%2020-426%2040%20-65%2065%20-72%20255%20-72%20190%200%20215%207%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%209150%20915%200%200%20-790%200%20-790%20-3575%200%20-3575%200%200%20790%200%20790%20905%200%20905%200%200%20-392z%20m5340-3180%20c0%20-848%20-4%20-1478%20-9%20-1473%20-5%206%20-73%20107%20-151%20225%20-78%20118%20-146%20219%20-150223%20-4%205%20-627%20-404%20-1384%20-907%20l-1378%20-916%20-2039%200%20-2039%200%200%202165%200%2021653575%200%203575%200%200%20-1482z%22%2F%3E%3Cpath%20d%3D%22M1336%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3526%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M5636%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M1336%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3546%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"}},created:function(){var e=document.documentElement,t=e.getAttribute("lang");t?e.setAttribute("lang",t):e.setAttribute("lang","fi")},mounted:function(){if(void 0!==this.localization?this.localizationData=this.localization:this.localizationData=this.localizationDefaultData,void 0===this.selectedISODate&&this.defaultDate)this.selectedISODate=this.defaultDate,this.selectedDateString=this.formatISODate(this.defaultDate,".");else{var e=new Date,t={day:e.getDate(),month:e.getMonth(),year:e.getFullYear()};this.selectedISODate=this.createDate(t)}this.uniqueString=this.uniqueName},computed:{icon:function(){return this.calendarIcon},calendarVisible:function(){return this.showCalendar},placeholderText:function(){return this.localizationData.placeholderText},possibleDateFormats:function(){for(var e="",t=0;t<this.localizationData.dateFormatOptions.length;t++)e=e+" "+this.localizationData.dateFormatOptions[t];return e},buttonLabel:function(){return void 0!==this.selectedDateString?this.buttonLabel+" "+this.selectedDateString:this.buttonLabel},selectedDate:function(){return this.$emit("update:selectedISODate",this.selectedISODate),this.selectedDateString},pickerHeaderMonth:function(){return this.checkIfLeapYear(this.year)?this.monthsData.months[1].numberOfDays=29:this.monthsData.months[1].numberOfDays=28,this.monthsData.months[this.currentMonth].name},pickerHeaderYear:function(){return this.year},daysVisibleCurrentMonth:function(){var e,t=void 0,n=[],a=this.previousMonthIndex(this.currentMonth),r=this.getLastDayOfPreviousMonth(a),o=null===(e=this.monthsData.months[a])||void 0===e?void 0:e.numberOfDays,i=this.year;if(o&&r&&0!==r){11===a&&(i=this.year-1);for(var c=r;c>=1;c--)t={day:o,month:a,year:i,previousMonthDay:!0},n.push(t),o-=1;n.reverse()}var s=this.monthsData.months[this.currentMonth].numberOfDays;if(null!=s){for(var d=1;d<=s;d++)t={day:d,month:this.currentMonth,year:this.year},n.push(t);if(7*this.amountOfWeeksInMonth()-n.length>0)for(var l=7*this.amountOfWeeksInMonth()-n.length,u=1;u<=l;u++)t={day:u,month:this.currentMonth+1,year:this.year,nextMonthDay:!0},n.push(t)}return this.sliceMonthToWeeks(n,7)}},methods:{checkDisabledDay:function(e){return e.previousMonthDay||e.nextMonthDay},closeDatePickerModal:function(e){var t,n;(this.showCalendar=!1,e&&(e.stopPropagation(),e.preventDefault()),!1===this.showCalendar)&&(this.year=Number(null===(t=this.selectedISODate)||void 0===t?void 0:t.split("-")[0]),this.currentMonth=Number(null===(n=this.selectedISODate)||void 0===n?void 0:n.split("-")[1])-1)},changeTabIndex:function(e,t){document.querySelector('td[tabindex="'+e+'"]').tabIndex=t},setFocusToCell:function(){var e=this.selectedISODate,t=document.querySelector("[data-date='"+e+"']");t.focus(),t.tabIndex=0},checkSelected:function(e){return this.createDate(e)===this.selectedISODate},getDateNow:function(){return new Date},setCalendarView:function(e){this.year=parseInt(e.substring(0,4)),this.currentMonth=parseInt(e.substring(5,7))-1},formatISODate:function(e,t){var n=e.split("-");return this.selectedDateString=n[2]+t+n[1]+t+n[0]},handleDateFormat:function(e){var t=e;if(new RegExp("^(?:(?:31(\\/|-|\\.)(?:0?[13578]|1[02]))\\1|(?:(?:29|30)(\\/|-|\\.)(?:0?[13-9]|1[0-2])\\2))(?:(?:1[6-9]|[2-9]\\d)?d{2})$|^(?:29(\\/|-|\\.)0?2\\3(?:(?:(?:1[6-9]|[2-9]\\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\\d|2[0-8])(\\/|-|\\.)(?:(?:0?[1-9])|(?:1[0-2]))\\4(?:(?:1[6-9]|[2-9]\\d)?\\d{2})$").test(t)){this.selectedDateString=t;var n=t.split(/[-./]+/);return n[2]+"-"+n[1]+"-"+n[0]}return""},updateSelectedDate:function(e){var t=e.target.value,n=this.handleDateFormat(t);this.setCalendarView(n),this.selectedISODate=n},handleIconPress:function(e){var t=this;this.showCalendar=!0,this.$nextTick((function(){t.setFocusToCell()})),e&&(e.stopPropagation(),e.preventDefault())},handleBackdropClick:function(e){this.closeDatePickerModal(),e.stopPropagation(),e.preventDefault()},handleDatePress:function(e,t,n){e.stopPropagation(),e.preventDefault(),this.selectedTdCell=e.target,this.selectedTdCell.ariaSelected="true",this.selectedTdCell.tabIndex=0;var a=this.createDate(t);(this.selectedISODate=a,this.selectedDateString=this.formatISODate(a,"."),this.$emit("update:selectedISODate",this.selectedISODate),!0===n)&&(this.closeDatePickerModal(),document.getElementById("calendarIcon").focus())},handleOKButtonClick:function(e){var t=document.querySelector('td[tabindex="0"]');this.selectedISODate=t.dataset.date;var n=this.selectedISODate;this.selectedDateString=this.formatISODate(n,"."),t.ariaSelected="true",this.closeDatePickerModal(),e&&(e.stopPropagation(),e.preventDefault())},handlePrevYearTab:function(e){e.shiftKey&&(document.querySelector("#OKButton-"+this.uniqueString).focus(),e.preventDefault())},handleOKButtonTab:function(e){e.shiftKey||(document.querySelector("#previousYear-"+this.uniqueString).focus(),e.preventDefault())},handlePageDown:function(e,t){e.stopPropagation(),e.preventDefault(),this.changeTabIndex(0,-1),e.shiftKey?this.goToNextYear():this.goToNextMonth();var n=this.createDate({day:t.day,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+n+"']");e.tabIndex=0,e.focus()}))},handlePageUp:function(e,t){e.stopPropagation(),e.preventDefault(),this.changeTabIndex(0,-1),e.shiftKey?this.goToPreviousYear():this.goToPreviousMonth();var n=this.createDate({day:t.day,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+n+"']");e.tabIndex=0,e.focus()}))},riffleMonths:function(e,t){var n=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextMonth():"backward"===e&&this.goToPreviousMonth();var a=Number(n.dataset.date.split("-")[2]),r=this.createDate({day:a,month:this.currentMonth,year:this.year});this.$nextTick((function(){document.querySelector("[data-date='"+r+"']").tabIndex=0})),t&&(t.stopPropagation(),t.preventDefault())},riffleYears:function(e,t){var n=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextYear():"backward"===e&&this.goToPreviousYear();var a=Number(n.dataset.date.split("-")[2]),r=this.createDate({day:a,month:this.currentMonth,year:this.year});this.$nextTick((function(){document.querySelector("[data-date='"+r+"']").tabIndex=0})),t&&(t.stopPropagation(),t.preventDefault())},checkIfLeapYear:function(e){return e%4==0&&e%100!=0||e%400==0},goToPreviousYear:function(){this.year&&(this.year=this.year-1)},goToNextYear:function(){this.year&&(this.year=this.year+1)},previousMonthIndex:function(e){return 0==e?11:e-1},goToPreviousMonth:function(){(this.currentMonth||0==this.currentMonth)&&(0==this.currentMonth?(this.currentMonth=11,this.year&&(this.year=this.year-1)):this.currentMonth=this.currentMonth-1)},goToNextMonth:function(){11==this.currentMonth?(this.currentMonth=0,this.year&&(this.year=this.year+1)):this.currentMonth=this.currentMonth+1},goToFirstDayOfWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=new Date(e.year,e.month,e.day).getDay(),r=this.previousMonthIndex(this.currentMonth),o=this.monthsData.months[r].numberOfDays;(n=0===a?e.day-6:e.day-(a-1))<1&&(n=o+n,this.goToPreviousMonth());var i=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+i+"']");e.tabIndex=0,e.focus()}))},goToLastDayOfWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=e.day,a=new Date(e.year,e.month,e.day).getDay(),r=this.monthsData.months[this.currentMonth].numberOfDays;0!==a&&(n=e.day+(7-a)),n>r&&(n-=r,this.goToNextMonth());var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToPreviousWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[a].numberOfDays;(n=e.day-7)<1&&(n=r+n,this.goToPreviousMonth());var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToNextWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0;n=e.day+7;var a=this.monthsData.months[this.currentMonth].numberOfDays;n>a&&(n-=a,this.goToNextMonth());var r=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+r+"']");e.tabIndex=0,e.focus()}))},goToPreviousDay:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[a].numberOfDays;1===e.day?(this.goToPreviousMonth(),n=r):n=e.day-1;var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToNextDay:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.monthsData.months[this.currentMonth].numberOfDays;e.day===a?(this.goToNextMonth(),n=1):n=e.day+1;var r=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+r+"']");e.tabIndex=0,e.focus()}))},getFirstDayOfMonth:function(e){var t,n=null,a=e;return null!==this.year&&(n=new Date(this.year,a,1)),null===(t=n)||void 0===t?void 0:t.getDay()},getLastDayOfPreviousMonth:function(e){var t,n=e,a=this.year;return 11===e&&(a=this.year-1),t=this.monthsData.months[n].numberOfDays,new Date(a,n,t).getDay()},amountOfWeeksInMonth:function(){var e=this.monthsData.months[this.currentMonth].numberOfDays,t=this.getFirstDayOfMonth(this.currentMonth),n=0===this.getFirstDayOfMonth(this.currentMonth);if(void 0!==t){if(28==e&&1==this.getFirstDayOfMonth(this.currentMonth))return 4;if(31==e&&(t>5||n)||30==e&&(t>6||n))return 6}return 5},sliceMonthToWeeks:function(e,t){for(var n=[],a=0;a<e.length;a+=t){var r=e.slice(a,a+t);n.push(r)}return n},toISOLocal:function(e){var t=function(e){return("0"+e).slice(-2)},n=e.getTimezoneOffset(),a=n>0?"-":"+";return n=Math.abs(n),e.getFullYear()+"-"+t(e.getMonth()+1)+"-"+t(e.getDate())+"T"+t(e.getHours())+":"+t(e.getMinutes())+":"+t(e.getSeconds())+"."+("00"+e.getMilliseconds()).slice(-3)+a+t(n/60|0)+":"+t(n%60)},createDate:function(e){var t=e.day,n=this.toISOLocal(new Date(e.year,e.month,t));return null==n?void 0:n.split("T")[0]}}}),i={class:"vue-accessible-date-field",lang:"fi"},c={class:"date-field-section"},s={class:"date-field-inline"},d=["id","aria-describedby","placeholder"],l=["src"],u=["id"],h={key:0,class:"datepicker-section"},f={class:"calendar-modal",role:"dialog","aria-modal":"true","aria-label":"buttonName"},p={class:"datepicker"},m={class:"datepicker-header-line"},y=["id"],g=["id"],v={class:"datepicker-header-month"},b=e.createTextVNode(),D={class:"datepicker-header-year"},k=["id","aria-labelledby"],x=["abbr"],w=["onClick","data-date","aria-selected","onKeydown"],M={class:"buttons"},S=["id"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\nbutton[data-v-c1e39cf6]::before {\r\n     content: url("./assets/calendar-icon.svg");\n}\n.date-field-section .date-field[data-v-c1e39cf6] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-c1e39cf6] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n[data-v-c1e39cf6]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-c1e39cf6] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-c1e39cf6] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-c1e39cf6] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-c1e39cf6] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-c1e39cf6] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-c1e39cf6] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-c1e39cf6] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-c1e39cf6] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-c1e39cf6] {\r\n    color: #222222;\n}\nthead > tr th[data-v-c1e39cf6] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-c1e39cf6] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-c1e39cf6] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-c1e39cf6] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-c1e39cf6] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-c1e39cf6] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-c1e39cf6]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-c1e39cf6]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex="0"][data-v-c1e39cf6] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-c1e39cf6] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-c1e39cf6] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6],\r\n  button.close-calendar-modal[data-v-c1e39cf6] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-c1e39cf6]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n'),o.render=function(t,n,a,r,o,F){return e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("div",c,[e.createElementVNode("div",s,[e.withDirectives(e.createElementVNode("input",{type:"text",id:"dateField-"+t.uniqueString,name:"dateInput","onUpdate:modelValue":n[0]||(n[0]=function(e){return t.selectedDate=e}),onChange:n[1]||(n[1]=function(e){return t.updateSelectedDate(e)}),class:"date-field","aria-describedby":"dateFieldDescription"+t.uniqueString,placeholder:t.placeholderText},null,40,d),[[e.vModelText,t.selectedDate]]),e.createElementVNode("button",{type:"button",id:"calendarIcon",class:"icon open-calendar-btn","aria-label":"buttonLabel",onClick:n[2]||(n[2]=function(e){return t.handleIconPress(e)}),onKeydown:[n[3]||(n[3]=e.withKeys((function(e){return t.handleIconPress(e)}),["enter"])),n[4]||(n[4]=e.withKeys((function(e){return t.handleIconPress(e)}),["space"]))]},[e.createElementVNode("img",{class:"open-calendar-icon",alt:"calendar icon",src:t.icon,type:"image/svg+xml"},null,8,l)],32)]),e.createElementVNode("span",{id:"dateFieldDescription"+t.uniqueString,class:"screen-reader-only"},e.toDisplayString(t.possibleDateFormats),9,u)]),t.calendarVisible?(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{onClick:n[5]||(n[5]=function(e){return t.handleBackdropClick(e)}),class:"backdrop",ref:"backdrop"},null,512),e.createElementVNode("div",f,[e.createElementVNode("div",p,[e.createElementVNode("div",m,[e.createElementVNode("button",{type:"button",id:"previousYear-"+t.uniqueString,class:"arrow-button previous-year-button",onClick:n[6]||(n[6]=function(e){return t.riffleYears("backward")}),"aria-label":"go to previous year",onKeydown:[n[7]||(n[7]=e.withKeys((function(e){return t.handlePrevYearTab(e)}),["tab"])),n[8]||(n[8]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[9]||(n[9]=e.withKeys((function(e){return t.riffleYears("backward",e)}),["enter"]))]}," « ",40,y),e.createElementVNode("button",{type:"button",class:"arrow-button previous-month-button",onClick:n[10]||(n[10]=function(e){return t.riffleMonths("backward",e)}),"aria-label":"go to previous month",onKeydown:[n[11]||(n[11]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[12]||(n[12]=e.withKeys((function(e){return t.riffleMonths("backward",e)}),["enter"]))]}," ‹ ",32),e.createElementVNode("h2",{id:"datepickerHeader-"+t.uniqueString,class:"datepicker-header"},[e.createElementVNode("span",v,e.toDisplayString(t.pickerHeaderMonth),1),b,e.createElementVNode("span",D,e.toDisplayString(t.pickerHeaderYear),1)],8,g),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:n[13]||(n[13]=function(e){return t.riffleMonths("forward")}),"aria-label":"go to next month",onKeydown:[n[14]||(n[14]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[15]||(n[15]=e.withKeys((function(e){return t.riffleMonths("forward",e)}),["enter"]))]}," › ",32),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:n[16]||(n[16]=function(e){return t.riffleYears("forward")}),"aria-label":"go to next year",onKeydown:[n[17]||(n[17]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[18]||(n[18]=e.withKeys((function(e){return t.riffleYears("forward",e)}),["enter"]))]}," » ",32)]),e.createElementVNode("table",{id:"datapickerTable-"+t.uniqueString,class:"datepicker-grid",role:"grid","aria-labelledby":"datepickerHeader-"+t.uniqueString},[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.localizationData.dayNamesShort,(function(n,a){return e.openBlock(),e.createElementBlock("th",{scope:"col",key:a,abbr:t.localizationData.dayNames[a]},e.toDisplayString(n),9,x)})),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysVisibleCurrentMonth,(function(a,r){return e.openBlock(),e.createElementBlock("tr",{key:r,class:"datepicker-table-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a,(function(a,r){return e.openBlock(),e.createElementBlock("td",{key:r,onClick:function(e){return t.handleDatePress(e,a,!0)},tabindex:"-1",class:e.normalizeClass(["datepicker-day",{"selected-date":t.createDate(a)===t.selectedISODate},{"disabled-day":t.checkDisabledDay(a)}]),"data-date":t.createDate(a),role:"gridcell","aria-selected":t.checkSelected(a),onKeydown:[n[19]||(n[19]=e.withKeys((function(e){return t.closeDatePickerModal()}),["esc"])),e.withKeys((function(e){return t.handleDatePress(e,a,!1)}),["space"]),e.withKeys((function(e){return t.handleDatePress(e,a,!0)}),["enter"]),e.withKeys((function(e){return t.goToPreviousWeek(a,e)}),["up"]),e.withKeys((function(e){return t.goToNextWeek(a,e)}),["down"]),e.withKeys((function(e){return t.goToNextDay(a,e)}),["right"]),e.withKeys((function(e){return t.goToPreviousDay(a,e)}),["left"]),e.withKeys((function(e){return t.goToFirstDayOfWeek(a,e)}),["home"]),e.withKeys((function(e){return t.goToLastDayOfWeek(a,e)}),["end"]),e.withKeys((function(e){return t.handlePageDown(e,a)}),["page-down"]),e.withKeys((function(e){return t.handlePageUp(e,a)}),["page-up"])]},e.toDisplayString(a.day),43,w)})),128))])})),128))])],8,k)]),e.createElementVNode("div",M,[e.createElementVNode("button",{class:"close-calendar-modal",onClick:n[20]||(n[20]=function(e){return t.closeDatePickerModal(e)}),onKeydown:n[21]||(n[21]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"]))},"Peruuta ",32),e.createElementVNode("button",{id:"OKButton-"+t.uniqueString,class:"choose-selected-date",onClick:n[22]||(n[22]=function(e){return t.handleOKButtonClick(e)}),onKeydown:[n[23]||(n[23]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[24]||(n[24]=e.withKeys((function(e){return t.handleOKButtonTab(e)}),["tab"]))]},e.toDisplayString(t.localizationData.selectFocusedButtonLabel),41,S)])])])):e.createCommentVNode("",!0)])},o.__scopeId="data-v-c1e39cf6";var F=function(){var e=o;return e.install=function(t){t.component("VueAccessibleDateField",e)},e}(),O=Object.freeze({__proto__:null,default:F});return Object.entries(O).forEach((function(e){var n=t(e,2),a=n[0],r=n[1];"default"!==a&&(F[a]=r)})),F}(Vue);
+var VueAccessibleDateField=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var a,r,o=[],i=!0,s=!1;try{for(n=n.call(e);!(i=(a=n.next()).done)&&(o.push(a.value),!t||o.length!==t);i=!0);}catch(e){s=!0,r=e}finally{try{i||null==n.return||n.return()}finally{if(s)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return n(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}var a={months:[{name:"tammikuu",numberOfDays:31},{name:"helmikuu",numberOfDays:void 0},{name:"maaliskuu",numberOfDays:31},{name:"huhtikuu",numberOfDays:30},{name:"toukokuu",numberOfDays:31},{name:"kesäkuu",numberOfDays:30},{name:"heinäkuu",numberOfDays:31},{name:"elokuu",numberOfDays:31},{name:"syyskuu",numberOfDays:30},{name:"lokakuu",numberOfDays:31},{name:"marraskuu",numberOfDays:30},{name:"joulukuu",numberOfDays:31}]},r={locale:"fi-FI",placeholderText:"Esim. pp.kk.yyyy",dateFormatString:"päivämäärän muoto: ",dateFormatOptions:["pp.kk.vvvv","pp-kk-vvvv","pp/kk/vvvv"],buttonLabel:"Valitse päivämäärä",dayNames:["maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai","sunnuntai"],dayNamesShort:["ma","ti","ke","to","pe","la","su"],selectFocusedButtonLabel:"OK"},o=e.defineComponent({name:"VueAccessibleDateField",props:{defaultDate:String,uniqueName:{type:String},dayOfMonth:{type:Object},months:{type:Object},monthsData:{type:Object},localization:{type:Object}},data:function(){var e=(new Date).getMonth(),t=(new Date).getFullYear();return{showCalendar:!1,monthsData:a,localizationDefaultData:r,localizationData:{locale:"",placeholderText:"",dateFormatString:"",dateFormatOptions:[],buttonLabel:"",dayNames:[],dayNamesShort:[],selectFocusedButtonLabel:""},currentMonth:e,year:t,selectedISODate:undefined,selectedDateString:undefined,selectedTdCell:undefined,uniqueString:undefined}},created:function(){document.body.appendChild('<?xml version="1.0" encoding="UTF-8"?>\r\n<svg version="1.0" xmlns="http://www.w3.org/2000/svg"\r\n width="18pt" height="18pt" viewBox="0 0 815.000000 822.000000"\r\n preserveAspectRatio="xMidYMid meet">\r\n\r\n<g transform="translate(0.000000,822.000000) scale(0.100000,-0.100000)"\r\nfill="#000000" stroke="none">\r\n<path d="M2382 8200 c-18 -11 -41 -34 -52 -52 -19 -31 -20 -51 -20 -380 l0\r\n-348 -1022 -2 -1023 -3 -56 -26 c-79 -37 -133 -90 -171 -167 l-33 -67 0 -3445\r\n0 -3445 33 -67 c38 -77 92 -130 171 -167 l56 -26 1766 -3 1767 -2 953 250\r\nc1139 300 2795 732 3144 821 l250 64 0 3010 0 3010 -33 67 c-38 77 -92 130\r\n-171 167 l-56 26 -1032 3 -1033 2 0 348 c0 329 -1 349 -20 380 -40 65 -65 72\r\n-255 72 -190 0 -215 -7 -255 -72 -19 -31 -20 -51 -20 -380 l0 -348 -1205 0\r\n-1205 0 0 348 c0 329 -1 349 -20 380 -40 65 -65 72 -255 72 -152 0 -173 -2\r\n-203 -20z m-72 -1672 c0 -375 1 -395 20 -426 40 -65 65 -72 255 -72 190 0 215\r\n7 255 72 19 31 20 51 20 426 l0 392 1205 0 1205 0 0 -392 c0 -375 1 -395 20\r\n-426 40 -65 65 -72 255 -72 190 0 215 7 255 72 19 31 20 51 20 426 l0 392 915\r\n0 915 0 0 -790 0 -790 -3575 0 -3575 0 0 790 0 790 905 0 905 0 0 -392z m5340\r\n-3180 c0 -848 -4 -1478 -9 -1473 -5 6 -73 107 -151 225 -78 118 -146 219 -150\r\n223 -4 5 -627 -404 -1384 -907 l-1378 -916 -2039 0 -2039 0 0 2165 0 2165\r\n3575 0 3575 0 0 -1482z"/>\r\n<path d="M1336 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z"/>\r\n<path d="M3526 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z"/>\r\n<path d="M5636 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z"/>\r\n<path d="M1336 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z"/>\r\n<path d="M3546 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z"/>\r\n</g>\r\n</svg>');var e=document.documentElement,t=e.getAttribute("lang");t?e.setAttribute("lang",t):e.setAttribute("lang","fi")},mounted:function(){if(void 0!==this.localization?this.localizationData=this.localization:this.localizationData=this.localizationDefaultData,void 0===this.selectedISODate&&this.defaultDate)this.selectedISODate=this.defaultDate,this.selectedDateString=this.formatISODate(this.defaultDate,".");else{var e=new Date,t={day:e.getDate(),month:e.getMonth(),year:e.getFullYear()};this.selectedISODate=this.createDate(t)}this.uniqueString=this.uniqueName},computed:{calendarVisible:function(){return this.showCalendar},placeholderText:function(){return this.localizationData.placeholderText},possibleDateFormats:function(){for(var e="",t=0;t<this.localizationData.dateFormatOptions.length;t++)e=e+" "+this.localizationData.dateFormatOptions[t];return e},buttonLabel:function(){return void 0!==this.selectedDateString?this.buttonLabel+" "+this.selectedDateString:this.buttonLabel},selectedDate:function(){return this.$emit("update:selectedISODate",this.selectedISODate),this.selectedDateString},pickerHeaderMonth:function(){return this.checkIfLeapYear(this.year)?this.monthsData.months[1].numberOfDays=29:this.monthsData.months[1].numberOfDays=28,this.monthsData.months[this.currentMonth].name},pickerHeaderYear:function(){return this.year},daysVisibleCurrentMonth:function(){var e,t=void 0,n=[],a=this.previousMonthIndex(this.currentMonth),r=this.getLastDayOfPreviousMonth(a),o=null===(e=this.monthsData.months[a])||void 0===e?void 0:e.numberOfDays,i=this.year;if(o&&r&&0!==r){11===a&&(i=this.year-1);for(var s=r;s>=1;s--)t={day:o,month:a,year:i,previousMonthDay:!0},n.push(t),o-=1;n.reverse()}var d=this.monthsData.months[this.currentMonth].numberOfDays;if(null!=d){for(var c=1;c<=d;c++)t={day:c,month:this.currentMonth,year:this.year},n.push(t);if(7*this.amountOfWeeksInMonth()-n.length>0)for(var l=7*this.amountOfWeeksInMonth()-n.length,u=1;u<=l;u++)t={day:u,month:this.currentMonth+1,year:this.year,nextMonthDay:!0},n.push(t)}return this.sliceMonthToWeeks(n,7)}},methods:{checkDisabledDay:function(e){return e.previousMonthDay||e.nextMonthDay},closeDatePickerModal:function(e){var t,n;(this.showCalendar=!1,e&&(e.stopPropagation(),e.preventDefault()),!1===this.showCalendar)&&(this.year=Number(null===(t=this.selectedISODate)||void 0===t?void 0:t.split("-")[0]),this.currentMonth=Number(null===(n=this.selectedISODate)||void 0===n?void 0:n.split("-")[1])-1)},changeTabIndex:function(e,t){document.querySelector('td[tabindex="'+e+'"]').tabIndex=t},setFocusToCell:function(){var e=this.selectedISODate,t=document.querySelector("[data-date='"+e+"']");t.focus(),t.tabIndex=0},checkSelected:function(e){return this.createDate(e)===this.selectedISODate},getDateNow:function(){return new Date},setCalendarView:function(e){this.year=parseInt(e.substring(0,4)),this.currentMonth=parseInt(e.substring(5,7))-1},formatISODate:function(e,t){var n=e.split("-");return this.selectedDateString=n[2]+t+n[1]+t+n[0]},handleDateFormat:function(e){var t=e;if(new RegExp("^(?:(?:31(\\/|-|\\.)(?:0?[13578]|1[02]))\\1|(?:(?:29|30)(\\/|-|\\.)(?:0?[13-9]|1[0-2])\\2))(?:(?:1[6-9]|[2-9]\\d)?d{2})$|^(?:29(\\/|-|\\.)0?2\\3(?:(?:(?:1[6-9]|[2-9]\\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\\d|2[0-8])(\\/|-|\\.)(?:(?:0?[1-9])|(?:1[0-2]))\\4(?:(?:1[6-9]|[2-9]\\d)?\\d{2})$").test(t)){this.selectedDateString=t;var n=t.split(/[-./]+/);return n[2]+"-"+n[1]+"-"+n[0]}return""},updateSelectedDate:function(e){var t=e.target.value,n=this.handleDateFormat(t);this.setCalendarView(n),this.selectedISODate=n},handleIconPress:function(e){var t=this;this.showCalendar=!0,this.$nextTick((function(){t.setFocusToCell()})),e&&(e.stopPropagation(),e.preventDefault())},handleBackdropClick:function(e){this.closeDatePickerModal(),e.stopPropagation(),e.preventDefault()},handleDatePress:function(e,t,n){e.stopPropagation(),e.preventDefault(),this.selectedTdCell=e.target,this.selectedTdCell.ariaSelected="true",this.selectedTdCell.tabIndex=0;var a=this.createDate(t);(this.selectedISODate=a,this.selectedDateString=this.formatISODate(a,"."),this.$emit("update:selectedISODate",this.selectedISODate),!0===n)&&(this.closeDatePickerModal(),document.getElementById("calendarIcon").focus())},handleOKButtonClick:function(e){var t=document.querySelector('td[tabindex="0"]');this.selectedISODate=t.dataset.date;var n=this.selectedISODate;this.selectedDateString=this.formatISODate(n,"."),t.ariaSelected="true",this.closeDatePickerModal(),e&&(e.stopPropagation(),e.preventDefault())},handlePrevYearTab:function(e){e.shiftKey&&(document.querySelector("#OKButton-"+this.uniqueString).focus(),e.preventDefault())},handleOKButtonTab:function(e){e.shiftKey||(document.querySelector("#previousYear-"+this.uniqueString).focus(),e.preventDefault())},handlePageDown:function(e,t){e.stopPropagation(),e.preventDefault(),this.changeTabIndex(0,-1),e.shiftKey?this.goToNextYear():this.goToNextMonth();var n=this.createDate({day:t.day,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+n+"']");e.tabIndex=0,e.focus()}))},handlePageUp:function(e,t){e.stopPropagation(),e.preventDefault(),this.changeTabIndex(0,-1),e.shiftKey?this.goToPreviousYear():this.goToPreviousMonth();var n=this.createDate({day:t.day,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+n+"']");e.tabIndex=0,e.focus()}))},riffleMonths:function(e,t){var n=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextMonth():"backward"===e&&this.goToPreviousMonth();var a=Number(n.dataset.date.split("-")[2]),r=this.createDate({day:a,month:this.currentMonth,year:this.year});this.$nextTick((function(){document.querySelector("[data-date='"+r+"']").tabIndex=0})),t&&(t.stopPropagation(),t.preventDefault())},riffleYears:function(e,t){var n=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextYear():"backward"===e&&this.goToPreviousYear();var a=Number(n.dataset.date.split("-")[2]),r=this.createDate({day:a,month:this.currentMonth,year:this.year});this.$nextTick((function(){document.querySelector("[data-date='"+r+"']").tabIndex=0})),t&&(t.stopPropagation(),t.preventDefault())},checkIfLeapYear:function(e){return e%4==0&&e%100!=0||e%400==0},goToPreviousYear:function(){this.year&&(this.year=this.year-1)},goToNextYear:function(){this.year&&(this.year=this.year+1)},previousMonthIndex:function(e){return 0==e?11:e-1},goToPreviousMonth:function(){(this.currentMonth||0==this.currentMonth)&&(0==this.currentMonth?(this.currentMonth=11,this.year&&(this.year=this.year-1)):this.currentMonth=this.currentMonth-1)},goToNextMonth:function(){11==this.currentMonth?(this.currentMonth=0,this.year&&(this.year=this.year+1)):this.currentMonth=this.currentMonth+1},goToFirstDayOfWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=new Date(e.year,e.month,e.day).getDay(),r=this.previousMonthIndex(this.currentMonth),o=this.monthsData.months[r].numberOfDays;(n=0===a?e.day-6:e.day-(a-1))<1&&(n=o+n,this.goToPreviousMonth());var i=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+i+"']");e.tabIndex=0,e.focus()}))},goToLastDayOfWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=e.day,a=new Date(e.year,e.month,e.day).getDay(),r=this.monthsData.months[this.currentMonth].numberOfDays;0!==a&&(n=e.day+(7-a)),n>r&&(n-=r,this.goToNextMonth());var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToPreviousWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[a].numberOfDays;(n=e.day-7)<1&&(n=r+n,this.goToPreviousMonth());var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToNextWeek:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0;n=e.day+7;var a=this.monthsData.months[this.currentMonth].numberOfDays;n>a&&(n-=a,this.goToNextMonth());var r=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+r+"']");e.tabIndex=0,e.focus()}))},goToPreviousDay:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[a].numberOfDays;1===e.day?(this.goToPreviousMonth(),n=r):n=e.day-1;var o=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+o+"']");e.tabIndex=0,e.focus()}))},goToNextDay:function(e,t){t.stopPropagation(),t.preventDefault(),this.changeTabIndex(0,-1);var n=0,a=this.monthsData.months[this.currentMonth].numberOfDays;e.day===a?(this.goToNextMonth(),n=1):n=e.day+1;var r=this.createDate({day:n,month:this.currentMonth,year:this.year});this.$nextTick((function(){var e=document.querySelector("[data-date='"+r+"']");e.tabIndex=0,e.focus()}))},getFirstDayOfMonth:function(e){var t,n=null,a=e;return null!==this.year&&(n=new Date(this.year,a,1)),null===(t=n)||void 0===t?void 0:t.getDay()},getLastDayOfPreviousMonth:function(e){var t,n=e,a=this.year;return 11===e&&(a=this.year-1),t=this.monthsData.months[n].numberOfDays,new Date(a,n,t).getDay()},amountOfWeeksInMonth:function(){var e=this.monthsData.months[this.currentMonth].numberOfDays,t=this.getFirstDayOfMonth(this.currentMonth),n=0===this.getFirstDayOfMonth(this.currentMonth);if(void 0!==t){if(28==e&&1==this.getFirstDayOfMonth(this.currentMonth))return 4;if(31==e&&(t>5||n)||30==e&&(t>6||n))return 6}return 5},sliceMonthToWeeks:function(e,t){for(var n=[],a=0;a<e.length;a+=t){var r=e.slice(a,a+t);n.push(r)}return n},toISOLocal:function(e){var t=function(e){return("0"+e).slice(-2)},n=e.getTimezoneOffset(),a=n>0?"-":"+";return n=Math.abs(n),e.getFullYear()+"-"+t(e.getMonth()+1)+"-"+t(e.getDate())+"T"+t(e.getHours())+":"+t(e.getMinutes())+":"+t(e.getSeconds())+"."+("00"+e.getMilliseconds()).slice(-3)+a+t(n/60|0)+":"+t(n%60)},createDate:function(e){var t=e.day,n=this.toISOLocal(new Date(e.year,e.month,t));return null==n?void 0:n.split("T")[0]}}}),i={class:"vue-accessible-date-field",lang:"fi"},s={class:"date-field-section"},d={class:"date-field-inline"},c=["id","aria-describedby","placeholder"],l=[function(t){return e.pushScopeId("data-v-e9227550"),t=t(),e.popScopeId(),t}((function(){return e.createElementVNode("img",{class:"open-calendar-icon",alt:"calendar icon",src:"{calendarIcon}",type:"image/svg+xml"},null,-1)}))],u=["id"],h={key:0,class:"datepicker-section"},p={class:"calendar-modal",role:"dialog","aria-modal":"true","aria-label":"buttonName"},f={class:"datepicker"},m={class:"datepicker-header-line"},y=["id"],g=["id"],b={class:"datepicker-header-month"},v=e.createTextVNode(),D={class:"datepicker-header-year"},k=["id","aria-labelledby"],x=["abbr"],w=["onClick","data-date","aria-selected","onKeydown"],M={class:"buttons"},S=["id"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\r\n\r\n  /* button::before {\r\n     content: url("./assets/calendar-icon.svg");\r\n  } */\n.date-field-section .date-field[data-v-e9227550] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-e9227550] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-e9227550] {\r\n    color: #222222;\n}\n[data-v-e9227550]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-e9227550] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-e9227550] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-e9227550] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-e9227550] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-e9227550] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-e9227550] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-e9227550] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-e9227550] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-e9227550] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-e9227550] {\r\n    color: #222222;\n}\nthead > tr th[data-v-e9227550] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-e9227550] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-e9227550] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-e9227550] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-e9227550] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-e9227550] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-e9227550]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-e9227550]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex="0"][data-v-e9227550] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-e9227550] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-e9227550] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-e9227550],\r\n  button.close-calendar-modal[data-v-e9227550] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-e9227550]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-e9227550]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-e9227550] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-e9227550]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n'),o.render=function(t,n,a,r,o,O){return e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("div",s,[e.createElementVNode("div",d,[e.withDirectives(e.createElementVNode("input",{type:"text",id:"dateField-"+t.uniqueString,name:"dateInput","onUpdate:modelValue":n[0]||(n[0]=function(e){return t.selectedDate=e}),onChange:n[1]||(n[1]=function(e){return t.updateSelectedDate(e)}),class:"date-field","aria-describedby":"dateFieldDescription"+t.uniqueString,placeholder:t.placeholderText},null,40,c),[[e.vModelText,t.selectedDate]]),e.createElementVNode("button",{type:"button",id:"calendarIcon",class:"icon open-calendar-btn","aria-label":"buttonLabel",onClick:n[2]||(n[2]=function(e){return t.handleIconPress(e)}),onKeydown:[n[3]||(n[3]=e.withKeys((function(e){return t.handleIconPress(e)}),["enter"])),n[4]||(n[4]=e.withKeys((function(e){return t.handleIconPress(e)}),["space"]))]},l,32)]),e.createElementVNode("span",{id:"dateFieldDescription"+t.uniqueString,class:"screen-reader-only"},e.toDisplayString(t.possibleDateFormats),9,u)]),t.calendarVisible?(e.openBlock(),e.createElementBlock("div",h,[e.createElementVNode("div",{onClick:n[5]||(n[5]=function(e){return t.handleBackdropClick(e)}),class:"backdrop",ref:"backdrop"},null,512),e.createElementVNode("div",p,[e.createElementVNode("div",f,[e.createElementVNode("div",m,[e.createElementVNode("button",{type:"button",id:"previousYear-"+t.uniqueString,class:"arrow-button previous-year-button",onClick:n[6]||(n[6]=function(e){return t.riffleYears("backward")}),"aria-label":"go to previous year",onKeydown:[n[7]||(n[7]=e.withKeys((function(e){return t.handlePrevYearTab(e)}),["tab"])),n[8]||(n[8]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[9]||(n[9]=e.withKeys((function(e){return t.riffleYears("backward",e)}),["enter"]))]}," « ",40,y),e.createElementVNode("button",{type:"button",class:"arrow-button previous-month-button",onClick:n[10]||(n[10]=function(e){return t.riffleMonths("backward",e)}),"aria-label":"go to previous month",onKeydown:[n[11]||(n[11]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[12]||(n[12]=e.withKeys((function(e){return t.riffleMonths("backward",e)}),["enter"]))]}," ‹ ",32),e.createElementVNode("h2",{id:"datepickerHeader-"+t.uniqueString,class:"datepicker-header"},[e.createElementVNode("span",b,e.toDisplayString(t.pickerHeaderMonth),1),v,e.createElementVNode("span",D,e.toDisplayString(t.pickerHeaderYear),1)],8,g),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:n[13]||(n[13]=function(e){return t.riffleMonths("forward")}),"aria-label":"go to next month",onKeydown:[n[14]||(n[14]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[15]||(n[15]=e.withKeys((function(e){return t.riffleMonths("forward",e)}),["enter"]))]}," › ",32),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:n[16]||(n[16]=function(e){return t.riffleYears("forward")}),"aria-label":"go to next year",onKeydown:[n[17]||(n[17]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[18]||(n[18]=e.withKeys((function(e){return t.riffleYears("forward",e)}),["enter"]))]}," » ",32)]),e.createElementVNode("table",{id:"datapickerTable-"+t.uniqueString,class:"datepicker-grid",role:"grid","aria-labelledby":"datepickerHeader-"+t.uniqueString},[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.localizationData.dayNamesShort,(function(n,a){return e.openBlock(),e.createElementBlock("th",{scope:"col",key:a,abbr:t.localizationData.dayNames[a]},e.toDisplayString(n),9,x)})),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysVisibleCurrentMonth,(function(a,r){return e.openBlock(),e.createElementBlock("tr",{key:r,class:"datepicker-table-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a,(function(a,r){return e.openBlock(),e.createElementBlock("td",{key:r,onClick:function(e){return t.handleDatePress(e,a,!0)},tabindex:"-1",class:e.normalizeClass(["datepicker-day",{"selected-date":t.createDate(a)===t.selectedISODate},{"disabled-day":t.checkDisabledDay(a)}]),"data-date":t.createDate(a),role:"gridcell","aria-selected":t.checkSelected(a),onKeydown:[n[19]||(n[19]=e.withKeys((function(e){return t.closeDatePickerModal()}),["esc"])),e.withKeys((function(e){return t.handleDatePress(e,a,!1)}),["space"]),e.withKeys((function(e){return t.handleDatePress(e,a,!0)}),["enter"]),e.withKeys((function(e){return t.goToPreviousWeek(a,e)}),["up"]),e.withKeys((function(e){return t.goToNextWeek(a,e)}),["down"]),e.withKeys((function(e){return t.goToNextDay(a,e)}),["right"]),e.withKeys((function(e){return t.goToPreviousDay(a,e)}),["left"]),e.withKeys((function(e){return t.goToFirstDayOfWeek(a,e)}),["home"]),e.withKeys((function(e){return t.goToLastDayOfWeek(a,e)}),["end"]),e.withKeys((function(e){return t.handlePageDown(e,a)}),["page-down"]),e.withKeys((function(e){return t.handlePageUp(e,a)}),["page-up"])]},e.toDisplayString(a.day),43,w)})),128))])})),128))])],8,k)]),e.createElementVNode("div",M,[e.createElementVNode("button",{class:"close-calendar-modal",onClick:n[20]||(n[20]=function(e){return t.closeDatePickerModal(e)}),onKeydown:n[21]||(n[21]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"]))},"Peruuta ",32),e.createElementVNode("button",{id:"OKButton-"+t.uniqueString,class:"choose-selected-date",onClick:n[22]||(n[22]=function(e){return t.handleOKButtonClick(e)}),onKeydown:[n[23]||(n[23]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),n[24]||(n[24]=e.withKeys((function(e){return t.handleOKButtonTab(e)}),["tab"]))]},e.toDisplayString(t.localizationData.selectFocusedButtonLabel),41,S)])])])):e.createCommentVNode("",!0)])},o.__scopeId="data-v-e9227550";var O=function(){var e=o;return e.install=function(t){t.component("VueAccessibleDateField",e)},e}(),T=Object.freeze({__proto__:null,default:O});return Object.entries(T).forEach((function(e){var n=t(e,2),a=n[0],r=n[1];"default"!==a&&(O[a]=r)})),O}(Vue);

dist/vue-accessible-date-field.ssr.js

@@ -105,3 +105,4 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {
   selectFocusedButtonLabel: 'OK'
-};var calendarIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218pt%22%20height%3D%2218pt%22%20viewBox%3D%220%200%20815.000000%20822.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cg%20transform%3D%22translate%280.000000%2C822.000000%29%20scale%280.100000%2C-0.100000%29%22fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M2382%208200%20c-18%20-11%20-41%20-34%20-52%20-52%20-19%20-31%20-20%20-51%20-20%20-380%20l0-348%20-1022%20-2%20-1023%20-3%20-56%20-26%20c-79%20-37%20-133%20-90%20-171%20-167%20l-33%20-67%200%20-34450%20-3445%2033%20-67%20c38%20-77%2092%20-130%20171%20-167%20l56%20-26%201766%20-3%201767%20-2%20953%20250c1139%20300%202795%20732%203144%20821%20l250%2064%200%203010%200%203010%20-33%2067%20c-38%2077%20-92%20130-171%20167%20l-56%2026%20-1032%203%20-1033%202%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072-255%2072%20-190%200%20-215%20-7%20-255%20-72%20-19%20-31%20-20%20-51%20-20%20-380%20l0%20-348%20-1205%200-1205%200%200%20348%20c0%20329%20-1%20349%20-20%20380%20-40%2065%20-65%2072%20-255%2072%20-152%200%20-173%20-2-203%20-20z%20m-72%20-1672%20c0%20-375%201%20-395%2020%20-426%2040%20-65%2065%20-72%20255%20-72%20190%200%202157%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%201205%200%201205%200%200%20-392%20c0%20-375%201%20-395%2020-426%2040%20-65%2065%20-72%20255%20-72%20190%200%20215%207%20255%2072%2019%2031%2020%2051%2020%20426%20l0%20392%209150%20915%200%200%20-790%200%20-790%20-3575%200%20-3575%200%200%20790%200%20790%20905%200%20905%200%200%20-392z%20m5340-3180%20c0%20-848%20-4%20-1478%20-9%20-1473%20-5%206%20-73%20107%20-151%20225%20-78%20118%20-146%20219%20-150223%20-4%205%20-627%20-404%20-1384%20-907%20l-1378%20-916%20-2039%200%20-2039%200%200%202165%200%2021653575%200%203575%200%200%20-1482z%22%2F%3E%3Cpath%20d%3D%22M1336%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3526%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M5636%203914%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M1336%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3Cpath%20d%3D%22M3546%202374%20c-14%20-14%20-16%20-75%20-16%20-519%200%20-444%202%20-505%2016%20-519%2014%20-1479%20-16%20569%20-16%20490%200%20555%202%20569%2016%2014%2014%2016%2075%2016%20519%200%20444%20-2%20505%20-16%20519-14%2014%20-79%2016%20-569%2016%20-490%200%20-555%20-2%20-569%20-16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";var script = /*#__PURE__*/vue.defineComponent({
+};var calendarIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18pt\" height=\"18pt\" viewBox=\"0 0 815.000000 822.000000\"\r\n preserveAspectRatio=\"xMidYMid meet\">\r\n\r\n<g transform=\"translate(0.000000,822.000000) scale(0.100000,-0.100000)\"\r\nfill=\"#000000\" stroke=\"none\">\r\n<path d=\"M2382 8200 c-18 -11 -41 -34 -52 -52 -19 -31 -20 -51 -20 -380 l0\r\n-348 -1022 -2 -1023 -3 -56 -26 c-79 -37 -133 -90 -171 -167 l-33 -67 0 -3445\r\n0 -3445 33 -67 c38 -77 92 -130 171 -167 l56 -26 1766 -3 1767 -2 953 250\r\nc1139 300 2795 732 3144 821 l250 64 0 3010 0 3010 -33 67 c-38 77 -92 130\r\n-171 167 l-56 26 -1032 3 -1033 2 0 348 c0 329 -1 349 -20 380 -40 65 -65 72\r\n-255 72 -190 0 -215 -7 -255 -72 -19 -31 -20 -51 -20 -380 l0 -348 -1205 0\r\n-1205 0 0 348 c0 329 -1 349 -20 380 -40 65 -65 72 -255 72 -152 0 -173 -2\r\n-203 -20z m-72 -1672 c0 -375 1 -395 20 -426 40 -65 65 -72 255 -72 190 0 215\r\n7 255 72 19 31 20 51 20 426 l0 392 1205 0 1205 0 0 -392 c0 -375 1 -395 20\r\n-426 40 -65 65 -72 255 -72 190 0 215 7 255 72 19 31 20 51 20 426 l0 392 915\r\n0 915 0 0 -790 0 -790 -3575 0 -3575 0 0 790 0 790 905 0 905 0 0 -392z m5340\r\n-3180 c0 -848 -4 -1478 -9 -1473 -5 6 -73 107 -151 225 -78 118 -146 219 -150\r\n223 -4 5 -627 -404 -1384 -907 l-1378 -916 -2039 0 -2039 0 0 2165 0 2165\r\n3575 0 3575 0 0 -1482z\"/>\r\n<path d=\"M1336 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M3526 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M5636 3914 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M1336 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n<path d=\"M3546 2374 c-14 -14 -16 -75 -16 -519 0 -444 2 -505 16 -519 14 -14\r\n79 -16 569 -16 490 0 555 2 569 16 14 14 16 75 16 519 0 444 -2 505 -16 519\r\n-14 14 -79 16 -569 16 -490 0 -555 -2 -569 -16z\"/>\r\n</g>\r\n</svg>";
+var script = /*#__PURE__*/vue.defineComponent({
   name: 'VueAccessibleDateField',
@@ -156,9 +157,9 @@ props: {
       selectedTdCell: selectedTdCell,
-      uniqueString: uniqueString,
-      calendarIcon: calendarIcon
+      uniqueString: uniqueString
     };
   },
   created: function created() {
-    // kun lisätään lokalisaatio, asetetaan komponentin kieleksi valittu kieli
+    document.body.appendChild(calendarIcon); // kun lisätään lokalisaatio, asetetaan komponentin kieleksi valittu kieli
     // toistaiseksi käytetään suomea   
+
     var html = document.documentElement;
@@ -201,5 +202,2 @@ var htmlLang = html.getAttribute('lang');
   computed: {
-    icon: function icon() {
-      return this.calendarIcon;
-    },
     calendarVisible: function calendarVisible() {
@@ -829,3 +827,7 @@ return this.showCalendar;
   }
-});var _hoisted_1 = {
+});var _withScopeId = function _withScopeId(n) {
+  return vue.pushScopeId("data-v-e9227550"), n = n(), vue.popScopeId(), n;
+};
+
+var _hoisted_1 = {
   class: "vue-accessible-date-field",
@@ -841,9 +843,19 @@ lang: "fi"
 var _hoisted_4 = ["id", "aria-describedby", "placeholder"];
-var _hoisted_5 = ["src"];
-var _hoisted_6 = ["id"];
-var _hoisted_7 = {
+
+var _hoisted_5 = /*#__PURE__*/_withScopeId(function () {
+  return /*#__PURE__*/vue.createElementVNode("img", {
+    class: "open-calendar-icon",
+    alt: "calendar icon",
+    src: "{calendarIcon}",
+    type: "image/svg+xml"
+  }, null, -1);
+});
+
+var _hoisted_6 = [_hoisted_5];
+var _hoisted_7 = ["id"];
+var _hoisted_8 = {
   key: 0,
   class: "datepicker-section"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   class: "calendar-modal",
@@ -854,26 +866,26 @@ role: "dialog",
 };
-var _hoisted_9 = {
+var _hoisted_10 = {
   class: "datepicker"
 };
-var _hoisted_10 = {
+var _hoisted_11 = {
   class: "datepicker-header-line"
 };
-var _hoisted_11 = ["id"];
 var _hoisted_12 = ["id"];
-var _hoisted_13 = {
+var _hoisted_13 = ["id"];
+var _hoisted_14 = {
   class: "datepicker-header-month"
 };
 
-var _hoisted_14 = /*#__PURE__*/vue.createTextVNode();
+var _hoisted_15 = /*#__PURE__*/vue.createTextVNode();
 
-var _hoisted_15 = {
+var _hoisted_16 = {
   class: "datepicker-header-year"
 };
-var _hoisted_16 = ["id", "aria-labelledby"];
-var _hoisted_17 = ["abbr"];
-var _hoisted_18 = ["onClick", "data-date", "aria-selected", "onKeydown"];
-var _hoisted_19 = {
+var _hoisted_17 = ["id", "aria-labelledby"];
+var _hoisted_18 = ["abbr"];
+var _hoisted_19 = ["onClick", "data-date", "aria-selected", "onKeydown"];
+var _hoisted_20 = {
   class: "buttons"
 };
-var _hoisted_20 = ["id"];
+var _hoisted_21 = ["id"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -906,11 +918,6 @@ return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [vue.createElementVNode("div", _hoisted_2, [vue.createElementVNode("div", _hoisted_3, [vue.withDirectives(vue.createElementVNode("input", {
     }, ["space"]))]
-  }, [vue.createElementVNode("img", {
-    class: "open-calendar-icon",
-    alt: "calendar icon",
-    src: _ctx.icon,
-    type: "image/svg+xml"
-  }, null, 8, _hoisted_5)], 32)]), vue.createElementVNode("span", {
+  }, _hoisted_6, 32)]), vue.createElementVNode("span", {
     id: 'dateFieldDescription' + _ctx.uniqueString,
     class: "screen-reader-only"
-  }, vue.toDisplayString(_ctx.possibleDateFormats), 9, _hoisted_6)]), _ctx.calendarVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.createElementVNode("div", {
+  }, vue.toDisplayString(_ctx.possibleDateFormats), 9, _hoisted_7)]), _ctx.calendarVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [vue.createElementVNode("div", {
     onClick: _cache[5] || (_cache[5] = function ($event) {
@@ -921,3 +928,3 @@ return _ctx.handleBackdropClick($event);
     ref: "backdrop"
-  }, null, 512), vue.createElementVNode("div", _hoisted_8, [vue.createElementVNode("div", _hoisted_9, [vue.createElementVNode("div", _hoisted_10, [vue.createElementVNode("button", {
+  }, null, 512), vue.createElementVNode("div", _hoisted_9, [vue.createElementVNode("div", _hoisted_10, [vue.createElementVNode("div", _hoisted_11, [vue.createElementVNode("button", {
     type: "button",
@@ -937,3 +944,3 @@ id: 'previousYear-' + _ctx.uniqueString,
     }, ["enter"]))]
-  }, " « ", 40, _hoisted_11), vue.createElementVNode("button", {
+  }, " « ", 40, _hoisted_12), vue.createElementVNode("button", {
     type: "button",
@@ -953,3 +960,3 @@ class: "arrow-button previous-month-button",
     class: "datepicker-header"
-  }, [vue.createElementVNode("span", _hoisted_13, vue.toDisplayString(_ctx.pickerHeaderMonth), 1), _hoisted_14, vue.createElementVNode("span", _hoisted_15, vue.toDisplayString(_ctx.pickerHeaderYear), 1)], 8, _hoisted_12), vue.createElementVNode("button", {
+  }, [vue.createElementVNode("span", _hoisted_14, vue.toDisplayString(_ctx.pickerHeaderMonth), 1), _hoisted_15, vue.createElementVNode("span", _hoisted_16, vue.toDisplayString(_ctx.pickerHeaderYear), 1)], 8, _hoisted_13), vue.createElementVNode("button", {
     type: "button",
@@ -988,3 +995,3 @@ class: "arrow-button",
       abbr: _ctx.localizationData.dayNames[i]
-    }, vue.toDisplayString(day), 9, _hoisted_17);
+    }, vue.toDisplayString(day), 9, _hoisted_18);
   }), 128))])]), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.daysVisibleCurrentMonth, function (week, index) {
@@ -1032,5 +1039,5 @@ return vue.openBlock(), vue.createElementBlock("tr", {
         }, ["page-up"])]
-      }, vue.toDisplayString(dayItem.day), 43, _hoisted_18);
+      }, vue.toDisplayString(dayItem.day), 43, _hoisted_19);
     }), 128))]);
-  }), 128))])], 8, _hoisted_16)]), vue.createElementVNode("div", _hoisted_19, [vue.createElementVNode("button", {
+  }), 128))])], 8, _hoisted_17)]), vue.createElementVNode("div", _hoisted_20, [vue.createElementVNode("button", {
     class: "close-calendar-modal",
@@ -1054,3 +1061,3 @@ onClick: _cache[20] || (_cache[20] = function ($event) {
     }, ["tab"]))]
-  }, vue.toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_20)])])])) : vue.createCommentVNode("", true)]);
+  }, vue.toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_21)])])])) : vue.createCommentVNode("", true)]);
 }function styleInject(css, ref) {
@@ -1081,5 +1088,5 @@ if ( ref === void 0 ) ref = {};
   }
-}var css_248z = "\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\nbutton[data-v-c1e39cf6]::before {\r\n     content: url(\"./assets/calendar-icon.svg\");\n}\n.date-field-section .date-field[data-v-c1e39cf6] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-c1e39cf6] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n[data-v-c1e39cf6]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-c1e39cf6] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-c1e39cf6] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-c1e39cf6]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-c1e39cf6] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-c1e39cf6] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-c1e39cf6] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-c1e39cf6] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-c1e39cf6] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-c1e39cf6] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-c1e39cf6] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-c1e39cf6] {\r\n    color: #222222;\n}\nthead > tr th[data-v-c1e39cf6] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-c1e39cf6] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-c1e39cf6] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-c1e39cf6] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-c1e39cf6] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-c1e39cf6] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-c1e39cf6]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-c1e39cf6]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-c1e39cf6]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-c1e39cf6] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-c1e39cf6] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-c1e39cf6] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6],\r\n  button.close-calendar-modal[data-v-c1e39cf6] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-c1e39cf6]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-c1e39cf6] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-c1e39cf6]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n";
+}var css_248z = "\r\n/* jos tarvitsee luoda esim. paljon z-indexejä, sen voi tehdä css custom propertisien avulla */\r\n/* :root {} */\r\n\r\n  /* datefield */\r\n  \r\n  /* .vue-accessible-date-field {\r\n    text-align: center;\r\n  } */\r\n\r\n  /* button::before {\r\n     content: url(\"./assets/calendar-icon.svg\");\r\n  } */\n.date-field-section .date-field[data-v-e9227550] {\r\n    max-width: 120px;\r\n    height: 27px;\r\n    padding-left: 5px;\r\n    vertical-align: bottom;\r\n    border-width: 0 0 1px 0;\r\n    background-color: #FFFFFF;\r\n    border-color: #323a45;\n}\n.date-field-section .date-field[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\n.date-field-inline[data-v-e9227550] {\r\n    white-space: nowrap;\n}\n.date-field[data-v-e9227550] {\r\n    color: #222222;\n}\n[data-v-e9227550]::placeholder {\r\n\t color: #767676;\r\n\t opacity: 1;\n}\n.date-field-section .field-description[data-v-e9227550] {\r\n    display: block;\r\n    font-size: 0.625rem;\r\n    left: 0;\r\n    top: 3.5em;\n}\n.screen-reader-only[data-v-e9227550] {\r\n    top: -2000em;\r\n    left: -3000em;\r\n    border: 0;\r\n    clip: rect(0,0,0,0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    width: 1px;\n}\nbutton[data-v-e9227550]:focus {\r\n    outline: 3px solid #d71ef7;\r\n    outline-offset: -3px;\n}\r\n\r\n  /* datepicker-modal */\n.calendar-modal[data-v-e9227550] {\r\n    position: absolute;\r\n    background-color: #FFFFFF;\r\n    border: 1px solid #000000;\r\n    max-width: 450px;\n}\n.open-calendar-btn[data-v-e9227550] {\r\n    height: 30px;\r\n    background-color: #FFFFFF;\r\n    padding-bottom: 0px;\r\n    border-width: 0 0 1px 0;\r\n    border-color: #323a45;\n}\n.open-calendar-btn svg[data-v-e9227550] {\r\n    margin-top: 1px;\n}\n.open-calendar-icon[data-v-e9227550] {\r\n    height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-e9227550] {\r\n    display: inline-flex; \r\n    width: 100%;    \r\n    min-width: 250px;\n}\n.datepicker-header[data-v-e9227550] {\r\n    width: 100%;\r\n    text-align: center;\r\n    margin-top: 15px;\r\n    margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-e9227550] {\r\n    color: #222222;\n}\n.datepicker-header-year[data-v-e9227550] {\r\n    color: #222222;\n}\nthead > tr th[data-v-e9227550] {\r\n    width: 20px;\r\n    height: 35px;\n}\n.arrow-button[data-v-e9227550] {\r\n      background-color: #FFFFFF;\r\n      border: none;\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n      padding-right: 10px;\r\n      padding-left: 10px;\n}\r\n\r\n  /* datepicker-grid */\n.datepicker-grid[data-v-e9227550] {\r\n    min-height: 225px;\r\n    width: 100%;\r\n    padding-right: 15px;\r\n    padding-left: 15px;\r\n    margin-bottom: 15px;\n}\n.datepicker-table-row[data-v-e9227550] {\r\n    text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-e9227550] {\r\n    width: 24px;\r\n    color: #222222;\r\n    padding: 5px;\r\n    margin: 2px;\r\n    border-radius: 3px;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day) {\r\n    font-weight: 600;\n}\n.disabled-day[data-v-e9227550] {\r\n    color: #595959;\n}\n.datepicker-day[data-v-e9227550]:hover {\r\n    background-color: #E8E7E7;\n}\n.datepicker-day[data-v-e9227550]:not(.disabled-day):hover {\r\n    padding: 3px;\r\n    border: 2px solid #F44A87;\n}\ntd.datepicker-day[data-v-e9227550]:focus {    \r\n    padding: 3px;\r\n    border: 2px solid #3182A0;\r\n    outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-e9227550] {\r\n    background-color: #FFD55F;\r\n    color: #000000;\n}\n.datepicker-day.selected-date[data-v-e9227550] {\r\n    padding: 3px;\r\n    border: 2px dotted #3182A0;\r\n    outline: 0;\n}\n.buttons[data-v-e9227550] {\r\n    float: right;\r\n    margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-e9227550],\r\n  button.close-calendar-modal[data-v-e9227550] {\r\n    border: none;\r\n    border-radius: 3px;\r\n    background-color: #39306B;\r\n    color: #FFFFFF;\r\n    margin-bottom: 6px;\r\n    margin-right: 10px;\r\n    padding: 8px;\n}\nbutton.choose-selected-date[data-v-e9227550]:hover {\r\n    background-color: #5C73BC;\n}\nbutton.close-calendar-modal[data-v-e9227550]:hover {\r\n    background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-e9227550] {\r\n    background-color: #272525;\n}\n.backdrop[data-v-e9227550]{\r\n        top: 0;\r\n        left: 0;\r\n        position: fixed;\r\n        background: rgba(0,0,0,0.5);\r\n        width: 100%;\r\n        height: 100%;\n}\r\n\r\n  /* XXL */\r\n  /* @media (min-width: 1281px) {\r\n  } */\r\n  \r\n  /* XL */\n@media (min-width: 1025px) and (max-width: 1280px){\n}\r\n  \r\n  /* L */\n@media (min-width: 768px) and (max-width: 1024px){\r\n    /* .calendar-modal {\r\n      width: 50%;\r\n    } */\n}\r\n\r\n  /* M */\n@media (min-width: 481px) and (max-width: 767px) {\r\n    /* .calendar-modal {\r\n      width: 70%;\r\n    } */\n}\r\n  /* S */\n@media (max-width: 480px) {\r\n    /* .calendar-modal {\r\n      width: 95%;\r\n    } */\n}\r\n";
 styleInject(css_248z);script.render = render;
-script.__scopeId = "data-v-c1e39cf6";// Import vue component
+script.__scopeId = "data-v-e9227550";// Import vue component
 
@@ -1086,0 +1093,0 @@ // Default export is installable instance of component.

package.json

 {
   "name": "vue-accessible-date-field",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "An open source Vue date field component designed to be as accessible as possible.",
@@ -14,4 +14,3 @@ "author": "Laladdin",
     "dist/*",
-    "src/**/*.vue",
-    "src/assets/*.svg"
+    "src/**/*.vue"
   ],
@@ -49,2 +48,3 @@ "sideEffects": false,
     "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -51,0 +51,0 @@ "rollup-plugin-typescript2": "^0.30.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

161524

decreased by-5.99%

Dev dependency count

27

increased by3.85%

Number of package files

14

decreased by-12.5%

Lines of code

2063

decreased by-0.63%

No dependency changes