Socket
Socket
Sign inDemoInstall

vue-accessible-date-field

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.3.5 to 0.3.6

21

dist/types/src/vue-accessible-date-field.vue.d.ts
import { PropType } from "vue";
import { DayOfMonth } from "./dayofmonth";
import { Localization } from "./ilocalization";
import { Months } from "./imonths";
declare const _default: import("vue").DefineComponent<{

@@ -9,11 +8,2 @@ defaultDate: StringConstructor;

usedLanguage: StringConstructor;
dayOfMonth: {
type: PropType<DayOfMonth>;
};
months: {
type: PropType<Months>;
};
monthsData: {
type: PropType<Months>;
};
localizationFi: {

@@ -30,3 +20,3 @@ type: PropType<Localization>;

showCalendar: boolean;
monthsData: Months;
monthsData: import("./imonths").Months;
localizationDefaultDataFi: Localization;

@@ -105,11 +95,2 @@ localizationDefaultDataSv: Localization;

usedLanguage: StringConstructor;
dayOfMonth: {
type: PropType<DayOfMonth>;
};
months: {
type: PropType<Months>;
};
monthsData: {
type: PropType<Months>;
};
localizationFi: {

@@ -116,0 +97,0 @@ type: PropType<Localization>;

40

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

@@ -49,3 +49,3 @@ import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, vModelText, withKeys, toDisplayString, createCommentVNode, Fragment, renderList, createTextVNode } from 'vue';

dateFormatOptions: ['pp.kk.vvvv', 'pp-kk-vvvv', 'pp/kk/vvvv'],
generalDateFieldError: 'Syöttämäsi päivämäärän {0} muoto ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ',
generalDateFieldError: 'Syöttämäsi päivämäärän muoto "{0}" ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ',
keyboardNavInstructions: 'Kalenterin sisältöä voi selata näppäimistöltä seuraavilla painikkeilla: ' + 'sarkainpainike: siirrä kohdistusta nuolipainikkeiden, kohdistetun päivämäärän sekä OK- ja Peruuta -painikkeiden välillä, ' + 'nuoli vasemmalle: siirry edelliseen päivään, ' + 'nuoli oikealle: Siirry seuraavaan päivään, ' + 'nuoli ylös: siirry edellisen viikon samaan viikonpäivään, ' + 'nuoli alas: siirry seuraavan viikon samaan viikonpäivään, ' + 'HOME-näppäin: siirry saman viikon ensimmäiseen päivään, ' + 'END-näppäin: siirry saman viikon viimeiseen päivään, ' + 'PAGE DOWN -näppäin: siirry edelliseen kuukauteen, ' + 'SHIFT + PAGE DOWN -näppäin: siirry edelliseen vuoteen, ' + 'PAGE UP -näppäin: siirry seuraavaan kuukauteen, ' + 'SHIFT + PAGE UP -näppäin: siirry seuraavaan vuoteen, ' + 'ENTER: valitse kohdistettu päivä ja sulje kalenteri, ' + 'SPACE: valitse kohdistettu päivä, kalenteri pysyy auki, ' + 'ESC: sulje kalenteri',

@@ -72,3 +72,3 @@ buttonLabelChoose: 'Valitse päivämäärä',

dateFormatOptions: ['dd.mm.åååå', 'dd-mm-åååå', 'dd/mm/åååå'],
generalDateFieldError: 'Datumformatet {0} du angav är ogiltigt. Ange datumet i något av följande format: ',
generalDateFieldError: 'Datumformatet "{0}" du angav är ogiltigt. Ange datumet i något av följande format: ',
keyboardNavInstructions: 'Du kan bläddra igenom kalenderinnehållet med följande tangenter:' + 'TAB-tangent: Flytta fokus mellan piltangenter, måldatum samt OK och Avbryt på skärmen, ' + 'vänsterpil: gå till föregående dag, ' + 'högerpil: Gå till nästa dag, ' + 'uppåtpil: gå till samma veckodag förra veckan, ' + 'nedåtpil: gå till samma veckodag nästa vecka, ' + 'HOME: gå till den första dagen i samma vecka, ' + 'END: gå till den sista dagen i samma vecka, ' + 'PAGE DOWN: gå till föregående månad ,' + 'SHIFT + PAGE DOWN: gå till föregående år, ' + 'PAGE UP: gå till nästa månad, ' + 'SHIFT + PAGE UP: gå till nästa år, ' + 'ENTER: välj den inriktade dagen och stäng kalendern, ' + 'SPACE: välj en inriktad dag, kalendern förblir öppen, ' + 'ESC: stäng kalendern',

@@ -95,3 +95,3 @@ buttonLabelChoose: 'Välj ett datum',

dateFormatOptions: ['dd.mm.yyyy', 'dd-mm-yyyy', 'dd/mm/yyyy'],
generalDateFieldError: 'Entered date format {0} is invalid. Date format options are: ',
generalDateFieldError: 'Entered date format "{0}" is invalid. Date format options are: ',
keyboardNavInstructions: 'You can navigate through the date picker contents with the following keys: ' + 'TAB: Move focus between the arrow buttons, the targeted date, and the OK and Cancel buttons, ' + 'left arrow: go to the previous day, ' + 'right arrow: Go to the next day, ' + 'up arrow: go to the same day of the week, ' + 'down arrow: go to the same day of the week next week, ' + 'HOME key: go to the first day of the same week, ' + 'END key: go to the last day of the same week, ' + 'PAGE DOWN key: go to the previous month, ' + 'SHIFT + PAGE DOWN key: go to the previous year, ' + 'PAGE UP key: go to the next month, ' + 'SHIFT + PAGE UP key: go to the next year, ' + 'ENTER: select the focused day and close the date picker, ' + 'SPACE: select the focused day, date picker will remain open, ' + 'ESC: close date picker',

@@ -118,11 +118,2 @@ buttonLabelChoose: 'Choose date',

usedLanguage: String,
dayOfMonth: {
type: Object
},
months: {
type: Object
},
monthsData: {
type: Object
},
localizationFi: {

@@ -948,10 +939,13 @@ type: Object

const _hoisted_26 = {
class: "table-head"
};
const _hoisted_27 = {
class: "datepicker-table-row"
};
const _hoisted_27 = ["abbr"];
const _hoisted_28 = ["onClick", "data-date", "aria-selected", "onKeydown"];
const _hoisted_29 = {
const _hoisted_28 = ["abbr"];
const _hoisted_29 = ["onClick", "data-date", "aria-selected", "onKeydown"];
const _hoisted_30 = {
class: "buttons"
};
const _hoisted_30 = ["id"];
const _hoisted_31 = ["id"];
function render(_ctx, _cache, $props, $setup, $data, $options) {

@@ -1036,3 +1030,3 @@ return openBlock(), createElementBlock("div", {

"aria-labelledby": 'datepickerHeader-' + _ctx.uniqueString
}, [createElementVNode("thead", null, [createElementVNode("tr", _hoisted_26, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.daysShort, (day, i) => {
}, [createElementVNode("thead", _hoisted_26, [createElementVNode("tr", _hoisted_27, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.daysShort, (day, i) => {
return openBlock(), createElementBlock("th", {

@@ -1042,3 +1036,3 @@ scope: "col",

abbr: _ctx.localizationData.dayNames[i]
}, toDisplayString(day), 9, _hoisted_27);
}, toDisplayString(day), 9, _hoisted_28);
}), 128))])]), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.daysVisibleCurrentMonth, (week, index) => {

@@ -1062,5 +1056,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_28);
}, toDisplayString(dayItem.day), 43, _hoisted_29);
}), 128))]);
}), 128))])], 8, _hoisted_25)]), createElementVNode("div", _hoisted_29, [createElementVNode("button", {
}), 128))])], 8, _hoisted_25)]), createElementVNode("div", _hoisted_30, [createElementVNode("button", {
class: "close-calendar-modal",

@@ -1074,3 +1068,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_30)])], 8, _hoisted_14)])) : createCommentVNode("", true)], 8, _hoisted_1);
}, toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_31)])], 8, _hoisted_14)])) : createCommentVNode("", true)], 8, _hoisted_1);
}

@@ -1105,7 +1099,7 @@

var css_248z = "\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 input.date-field[data-v-2a02d1bf] {\r\n max-width: 130px;\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-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-2a02d1bf] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-2a02d1bf] {\r\n outline: 3px solid #BB1331;\r\n outline-offset: -3px;\n}\n.date-field[data-v-2a02d1bf] {\r\n color: #222222;\n}\n[data-v-2a02d1bf]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-2a02d1bf] {\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-2a02d1bf] {\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}\nul.error-list[data-v-2a02d1bf] {\r\n color: #BB1331;\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\n.calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf] {\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-2a02d1bf] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-2a02d1bf] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-2a02d1bf] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-2a02d1bf] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\n.datepicker-header-year[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\nthead > tr th[data-v-2a02d1bf] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-2a02d1bf] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-2a02d1bf] {\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-2a02d1bf] {\r\n display: table-row;\r\n text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-2a02d1bf] {\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-2a02d1bf]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-2a02d1bf] {\r\n color: #595959;\n}\n.datepicker-day[data-v-2a02d1bf]:hover {\r\n background-color: #e8e7e7;\n}\n.datepicker-day[data-v-2a02d1bf]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid #f44a87;\n}\ntd.datepicker-day[data-v-2a02d1bf]:focus {\r\n padding: 3px;\r\n border: 2px solid #3182a0;\r\n outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-2a02d1bf] {\r\n background-color: #ffd55f;\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-2a02d1bf] {\r\n padding: 3px;\r\n border: 2px dotted #3182a0;\r\n outline: 0;\n}\n.buttons[data-v-2a02d1bf] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-2a02d1bf],\r\nbutton.close-calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf]:hover {\r\n background-color: #5c73bc;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf]:hover {\r\n background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf] {\r\n background-color: #272525;\n}\n.backdrop[data-v-2a02d1bf] {\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 */\n@media (min-width: 1281px) {\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 = "\n.vue-accessible-date-field[data-v-21954a86] {\r\n --main-color: #222222;\r\n\r\n /* date field section (text fields) */\r\n --date-field-section-outline-color: #d71ef7;\r\n --calendar-icon-focus-color: #d71ef7;\r\n --open-calendar-button-background-color: #ffffff;\r\n --error-text-color: #BB1331;\r\n\r\n /* date picker (modal) section */\r\n --day-hover-background-color: #e8e7e7;\r\n --day-not-disabled-hover-border-color: #f44a87;\r\n --day-focus-border: #3182a0;\r\n --day-tabindex-0-background-color: #ffd55f;\r\n --day-selected-border-color: #3182a0;\r\n --chooce-selected-button-background-color: #39306b;\r\n --chooce-selected-button-background-color-hover: #5c73bc;\r\n --close-modal-button-background-color: #272525;\r\n --close-modal-button-hover-background-color: #677983;\r\n\r\n --modal-backdrop-z-index: 1000;\r\n --date-picker-z-index: 1001;\n}\n.date-field-section input.date-field[data-v-21954a86] {\r\n max-width: 130px;\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-21954a86]:focus {\r\n outline: 3px solid var(--date-field-section-outline-color);\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-21954a86] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-21954a86] {\r\n outline: 3px solid var(--error-text-color);\r\n outline-offset: -3px;\n}\n.date-field[data-v-21954a86] {\r\n color: var(--main-color);\n}\n[data-v-21954a86]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-21954a86] {\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-21954a86] {\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}\nul.error-list[data-v-21954a86] {\r\n color: var(--error-text-color);\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-21954a86]:focus {\r\n outline: 3px solid var(--calendar-icon-focus-color);\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\ndiv.calendar-modal[data-v-21954a86] {\r\n position: absolute;\r\n background-color: #ffffff;\r\n border: 1px solid #000000;\r\n max-width: 450px;\r\n z-index: var(--date-picker-z-index);\n}\n.open-calendar-btn[data-v-21954a86] {\r\n height: 30px;\r\n background-color: var(--open-calendar-button-background-color);\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-21954a86] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-21954a86] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-21954a86] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-21954a86] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\n.datepicker-header-year[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\nthead.table-head[data-v-21954a86] {\r\n border-collapse: separate;\n}\nthead.table-head > tr th[data-v-21954a86] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-21954a86] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-21954a86] {\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-21954a86] {\r\n display: table-row;\r\n text-align: center;\n}\n.datepicker-table-row th[data-v-21954a86] {\r\n color: var(--main-color);\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-21954a86] {\r\n width: 24px;\r\n color: var(--main-color);\r\n padding: 5px;\r\n margin: 2px;\r\n border-radius: 3px;\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-21954a86] {\r\n color: #595959;\n}\n.datepicker-day[data-v-21954a86]:hover {\r\n background-color: var(--day-hover-background-color);\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid var(--day-not-disabled-hover-border-color);\n}\ntd.datepicker-day[data-v-21954a86]:focus {\r\n padding: 3px;\r\n border: 2px solid var(--day-focus-border);\r\n outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-21954a86] {\r\n background-color: var(--day-tabindex-0-background-color);\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-21954a86] {\r\n padding: 3px;\r\n border: 2px dotted var(--day-selected-border-color);\r\n outline: 0;\n}\n.buttons[data-v-21954a86] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--chooce-selected-button-background-color);\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-21954a86]:hover {\r\n background-color: var(--chooce-selected-button-background-color-hover);\n}\nbutton.close-calendar-modal[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--close-modal-button-background-color);\r\n color: #ffffff;\r\n margin-bottom: 6px;\r\n margin-right: 10px;\r\n padding: 8px;\n}\nbutton.close-calendar-modal[data-v-21954a86]:hover {\r\n background-color: var(--close-modal-button-hover-background-color);\n}\ndiv.backdrop[data-v-21954a86] {\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%;\r\n z-index: var(--modal-backdrop-z-index);\n}\r\n\r\n/* XXL */\n@media (min-width: 1281px) {\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-2a02d1bf";
script.__scopeId = "data-v-21954a86";

@@ -1112,0 +1106,0 @@ // Import vue component

2

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 a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var n,r,o=[],i=!0,s=!1;try{for(a=a.call(e);!(i=(n=a.next()).done)&&(o.push(n.value),!t||o.length!==t);i=!0);}catch(e){s=!0,r=e}finally{try{i||null==a.return||a.return()}finally{if(s)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(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 a(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var n={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.vvvv",dateFormatString:"päivämäärän muoto: ",wordOrTranslated:"tai",dateFormatOptions:["pp.kk.vvvv","pp-kk-vvvv","pp/kk/vvvv"],generalDateFieldError:"Syöttämäsi päivämäärän {0} muoto ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ",keyboardNavInstructions:"Kalenterin sisältöä voi selata näppäimistöltä seuraavilla painikkeilla: sarkainpainike: siirrä kohdistusta nuolipainikkeiden, kohdistetun päivämäärän sekä OK- ja Peruuta -painikkeiden välillä, nuoli vasemmalle: siirry edelliseen päivään, nuoli oikealle: Siirry seuraavaan päivään, nuoli ylös: siirry edellisen viikon samaan viikonpäivään, nuoli alas: siirry seuraavan viikon samaan viikonpäivään, HOME-näppäin: siirry saman viikon ensimmäiseen päivään, END-näppäin: siirry saman viikon viimeiseen päivään, PAGE DOWN -näppäin: siirry edelliseen kuukauteen, SHIFT + PAGE DOWN -näppäin: siirry edelliseen vuoteen, PAGE UP -näppäin: siirry seuraavaan kuukauteen, SHIFT + PAGE UP -näppäin: siirry seuraavaan vuoteen, ENTER: valitse kohdistettu päivä ja sulje kalenteri, SPACE: valitse kohdistettu päivä, kalenteri pysyy auki, ESC: sulje kalenteri",buttonLabelChoose:"Valitse päivämäärä",buttonLabelChange:"Muuta valittua päivämäärää, ",buttonLabelPreviousMonth:"Siirry edelliseen kuukauteen",buttonLabelPreviousYear:"Siirry edelliseen vuoteen",buttonLabelNextMonth:"Siirry seuraavaan kuukauteen",buttonLabelNextYear:"Siirry seuraavaan vuoteen",dayNames:["maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai","sunnuntai"],dayNamesShort:["ma","ti","ke","to","pe","la","su"],monthNames:["tammikuu","helmikuu","maaliskuu","huhtikuu","toukokuu","kesäkuu","heinäkuu","elokuu","syyskuu","lokakuu","marraskuu","joulukuu"],monthNamesForMessage:["tammikuuta","helmikuuta","maaliskuuta","huhtikuuta","toukokuuta","kesäkuuta","heinäkuuta","elokuuta","syyskuuta","lokakuuta","marraskuuta","joulukuuta"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Peruuta"},o={locale:"sv-SE",placeholderText:"T.ex. dd.mm.åååå",dateFormatString:"datumformat: ",wordOrTranslated:"eller",dateFormatOptions:["dd.mm.åååå","dd-mm-åååå","dd/mm/åååå"],generalDateFieldError:"Datumformatet {0} du angav är ogiltigt. Ange datumet i något av följande format: ",keyboardNavInstructions:"Du kan bläddra igenom kalenderinnehållet med följande tangenter:TAB-tangent: Flytta fokus mellan piltangenter, måldatum samt OK och Avbryt på skärmen, vänsterpil: gå till föregående dag, högerpil: Gå till nästa dag, uppåtpil: gå till samma veckodag förra veckan, nedåtpil: gå till samma veckodag nästa vecka, HOME: gå till den första dagen i samma vecka, END: gå till den sista dagen i samma vecka, PAGE DOWN: gå till föregående månad ,SHIFT + PAGE DOWN: gå till föregående år, PAGE UP: gå till nästa månad, SHIFT + PAGE UP: gå till nästa år, ENTER: välj den inriktade dagen och stäng kalendern, SPACE: välj en inriktad dag, kalendern förblir öppen, ESC: stäng kalendern",buttonLabelChoose:"Välj ett datum",buttonLabelChange:"Ändra det valda datumet, ",buttonLabelPreviousMonth:"Gå till föregående månad",buttonLabelPreviousYear:"Gå till föregående år",buttonLabelNextMonth:"Gå till nästa månad",buttonLabelNextYear:"Gå till nästa år",dayNames:["måndag","tisdag","onsdag","torsdag","fredag","lördag","söndag"],dayNamesShort:["må","ti","on","to","fr","lö","sö"],monthNames:["januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december"],monthNamesForMessage:["januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Avbryt"},i={locale:"en-GB",placeholderText:"e.g. dd.mm.yyyy",dateFormatString:"date format: ",wordOrTranslated:"or",dateFormatOptions:["dd.mm.yyyy","dd-mm-yyyy","dd/mm/yyyy"],generalDateFieldError:"Entered date format {0} is invalid. Date format options are: ",keyboardNavInstructions:"You can navigate through the date picker contents with the following keys: TAB: Move focus between the arrow buttons, the targeted date, and the OK and Cancel buttons, left arrow: go to the previous day, right arrow: Go to the next day, up arrow: go to the same day of the week, down arrow: go to the same day of the week next week, HOME key: go to the first day of the same week, END key: go to the last day of the same week, PAGE DOWN key: go to the previous month, SHIFT + PAGE DOWN key: go to the previous year, PAGE UP key: go to the next month, SHIFT + PAGE UP key: go to the next year, ENTER: select the focused day and close the date picker, SPACE: select the focused day, date picker will remain open, ESC: close date picker",buttonLabelChoose:"Choose date",buttonLabelChange:"Change selected date, ",buttonLabelPreviousMonth:"Move to previous month",buttonLabelPreviousYear:"Move to previous year",buttonLabelNextMonth:"Move to next month",buttonLabelNextYear:"Move to next year",dayNames:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],dayNamesShort:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesForMessage:["January","February","March","April","May","June","July","August","September","October","November","December"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Cancel"},s=e.defineComponent({name:"VueAccessibleDateField",props:{defaultDate:String,uniqueName:String,usedLanguage:String,dayOfMonth:{type:Object},months:{type:Object},monthsData:{type:Object},localizationFi:{type:Object},localizationSv:{type:Object},localizationEn:{type:Object}},data:function(){var e=(new Date).getMonth(),t=(new Date).getFullYear();return{showCalendar:!1,monthsData:n,localizationDefaultDataFi:r,localizationDefaultDataSv:o,localizationDefaultDataEn:i,localizationData:{locale:"",placeholderText:"",dateFormatString:"",wordOrTranslated:"",dateFormatOptions:[],generalDateFieldError:"",keyboardNavInstructions:"",buttonLabelChoose:"",buttonLabelChange:"",buttonLabelPreviousMonth:"",buttonLabelPreviousYear:"",buttonLabelNextMonth:"",buttonLabelNextYear:"",dayNames:[],monthNames:[],monthNamesForMessage:[],dayNamesShort:[],selectFocusedButtonLabel:"",cancelButtonLabel:""},currentMonth:e,year:t,selectedISODate:undefined,selectedDateString:undefined,selectedTdCell:undefined,uniqueString:undefined,errors:[],selectedDateMessage:"",componentLanguage:undefined}},created:function(){var e=document.documentElement.getAttribute("lang");this.usedLanguage?"en"===this.usedLanguage||"en-GB"===this.usedLanguage?this.componentLanguage="en":"sv"===this.usedLanguage||"sv-SE"===this.usedLanguage?this.componentLanguage="sv":"fi"!==this.usedLanguage&&"fi-FI"!==this.usedLanguage||(this.componentLanguage="fi"):this.componentLanguage=e||"en"},mounted:function(){"fi"===this.componentLanguage?this.localizationFi?this.localizationData=this.localizationFi:this.localizationData=this.localizationDefaultDataFi:"sv"===this.componentLanguage?this.localizationSv?this.localizationData=this.localizationSv:this.localizationData=this.localizationDefaultDataSv:this.localizationEn?this.localizationData=this.localizationEn:this.localizationData=this.localizationDefaultDataEn,void 0===this.selectedISODate&&this.defaultDate&&(this.selectedISODate=this.defaultDate,this.setCalendarView(this.selectedISODate),this.selectedDateString=this.formatISODate(this.defaultDate,".")),this.uniqueString=this.uniqueName},watch:{selectedDateISOFormat:function(e){this.updateButtonMessage(e),this.$emit("update:selectedISODate",e)}},computed:{naturalLanguage:function(){return this.componentLanguage},selectedDateISOFormat:function(){return this.selectedISODate},selectedDate:function(){return this.selectedDateString},buttonLabel:function(){return this.selectedDateString?this.selectedDateMessage:this.localizationData.buttonLabelChoose},iconSrc:function(){return"https://raw.githubusercontent.com/laladdin/vue-accessible-date-field/main/src/assets/calendar-icon-black.svg"},navInstr:function(){return this.localizationData.keyboardNavInstructions},calendarVisible:function(){return this.showCalendar},daysShort:function(){return this.localizationData.dayNamesShort},placeholderText:function(){return this.localizationData.placeholderText},possibleDateFormats:function(){for(var e=this.localizationData.dateFormatString,t=this.localizationData.dateFormatOptions.length,a=0;a<t;a++){var n=", ";0===a?n=" ":a===t-1&&(n=" "+this.localizationData.wordOrTranslated+" "),e=e+n+this.localizationData.dateFormatOptions[a]}return e},monthYearDescription:function(){return this.localizationData.monthNames[this.currentMonth]+this.year.toString()},pickerHeaderMonth:function(){return this.checkIfLeapYear(this.year)?this.monthsData.months[1].numberOfDays=29:this.monthsData.months[1].numberOfDays=28,this.localizationData.monthNames[this.currentMonth]},pickerHeaderYear:function(){return this.year},daysVisibleCurrentMonth:function(){var e,t=void 0,a=[],n=this.previousMonthIndex(this.currentMonth),r=this.getLastDayOfPreviousMonth(n),o=null===(e=this.monthsData.months[n])||void 0===e?void 0:e.numberOfDays,i=this.year;if(o&&r&&0!==r){11===n&&(i=this.year-1);for(var s=r;s>=1;s--)t={day:o,month:n,year:i,previousMonthDay:!0},a.push(t),o-=1;a.reverse()}var l=this.monthsData.months[this.currentMonth].numberOfDays;if(null!=l){for(var d=1;d<=l;d++)t={day:d,month:this.currentMonth,year:this.year},a.push(t);if(7*this.amountOfWeeksInMonth()-a.length>0)for(var u=7*this.amountOfWeeksInMonth()-a.length,c=1;c<=u;c++)t={day:c,month:this.currentMonth+1,year:this.year,nextMonthDay:!0},a.push(t)}return this.sliceMonthToWeeks(a,7)}},methods:{updateButtonMessage:function(e){var t=new Date(e),a=this.localizationData.dayNames[t.getDay()],n=t.getDate(),r=this.localizationData.monthNamesForMessage[t.getMonth()],o=t.getFullYear();this.selectedDateMessage=this.localizationData.buttonLabelChange+a+" "+n+" "+r+" "+o},checkDisabledDay:function(e){return e.previousMonthDay||e.nextMonthDay},eventPrev:function(e){e.stopPropagation(),e.preventDefault()},closeDatePickerModal:function(e){var t,a;(this.showCalendar=!1,e&&this.eventPrev(e),!1===this.showCalendar)&&(this.year=Number(null===(t=this.selectedISODate)||void 0===t?void 0:t.split("-")[0]),this.currentMonth=Number(null===(a=this.selectedISODate)||void 0===a?void 0:a.split("-")[1])-1)},changeTabIndex:function(e,t){document.querySelector('td[tabindex="'+e+'"]').tabIndex=t},setFocusToCell:function(e,t){this.$nextTick((function(){var a=document.querySelector("[data-date='"+e+"']");a.tabIndex=0,!0===t&&a.focus()}))},checkSelected:function(e){return this.createDate(e)===this.selectedISODate},setCalendarView:function(e){this.year=Number(e.split("-")[0]),this.currentMonth=Number(e.split("-")[1])-1},formatISODate:function(e,t){var a=e.split("-"),n=a[2]+t+a[1]+t+a[0];return this.selectedDateString=n,n},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))return this.selectedDateString=t,!0;if(this.errors=[],t){this.selectedDateString=void 0;var a=this.localizationData.generalDateFieldError.replace("{0}",t)+this.localizationData.dateFormatOptions;this.errors.push(a)}else;return!1},updateSelectedDate:function(e){var a=e.target.value;if(this.selectedDateString=a,this.handleDateFormat(a)){this.errors=[];var n=t(a.split(/[-./]+/),3),r=n[0],o=n[1],i=n[2];r=Number(r).toString().padStart(2,"0"),o=Number(o).toString().padStart(2,"0");var s="".concat(i,"-").concat(o,"-").concat(r);this.setCalendarView(s),this.selectedISODate=s}},createDayOfMonth:function(e){return this.createDate({day:e,month:this.currentMonth,year:this.year})},handleIconPress:function(e){if(this.errors=[],this.showCalendar=!0,this.selectedISODate)this.setFocusToCell(this.selectedISODate,!0);else{var t=new Date,a=t.getDate();this.currentMonth=t.getMonth(),this.year=t.getFullYear();var n=this.createDayOfMonth(a);this.setFocusToCell(n,!0)}this.eventPrev(e)},handleBackdropClick:function(e){this.closeDatePickerModal(),this.eventPrev(e)},handleDatePress:function(e,t,a){this.selectedTdCell=e.target,this.selectedTdCell.ariaSelected="true",this.selectedTdCell.tabIndex=0;var n=this.createDate(t);(this.selectedISODate=n,this.selectedDateString=this.formatISODate(n,"."),!0===a)&&(this.closeDatePickerModal(),document.getElementById("calendarIcon").focus());this.eventPrev(e)},handleOKButtonClick:function(e){var t=document.querySelector('td[tabindex="0"]');this.selectedISODate=t.dataset.date;var a=this.selectedISODate;this.selectedDateString=this.formatISODate(a,"."),t.ariaSelected="true",this.closeDatePickerModal(),this.eventPrev(e)},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){this.eventPrev(e),this.changeTabIndex(0,-1),e.shiftKey?this.goToPreviousYear():this.goToPreviousMonth();var a=this.createDayOfMonth(t.day);this.setFocusToCell(a,!0)},handlePageUp:function(e,t){this.eventPrev(e),this.changeTabIndex(0,-1),e.shiftKey?this.goToNextYear():this.goToNextMonth();var a=this.createDayOfMonth(t.day);this.setFocusToCell(a,!0)},riffleMonths:function(e,t){var a=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextMonth():"backward"===e&&this.goToPreviousMonth();var n=Number(a.dataset.date.split("-")[2]),r=this.createDayOfMonth(n);this.setFocusToCell(r,!1),t&&this.eventPrev(t)},riffleYears:function(e,t){var a=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextYear():"backward"===e&&this.goToPreviousYear();var n=Number(a.dataset.date.split("-")[2]),r=this.createDayOfMonth(n);this.setFocusToCell(r,!1),t&&this.eventPrev(t)},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){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=new Date(e.year,e.month,e.day).getDay(),r=this.previousMonthIndex(this.currentMonth),o=this.monthsData.months[r].numberOfDays;(a=0===n?e.day-6:e.day-(n-1))<1&&(a=o+a,this.goToPreviousMonth());var i=this.createDayOfMonth(a);this.setFocusToCell(i,!0)},goToLastDayOfWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=e.day,n=new Date(e.year,e.month,e.day).getDay(),r=this.monthsData.months[this.currentMonth].numberOfDays;0!==n&&(a=e.day+(7-n)),a>r&&(a-=r,this.goToNextMonth());var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToPreviousWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[n].numberOfDays;(a=e.day-7)<1&&(a=r+a,this.goToPreviousMonth());var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToNextWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0;a=e.day+7;var n=this.monthsData.months[this.currentMonth].numberOfDays;a>n&&(a-=n,this.goToNextMonth());var r=this.createDayOfMonth(a);this.setFocusToCell(r,!0)},goToPreviousDay:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[n].numberOfDays;1===e.day?(this.goToPreviousMonth(),a=r):a=e.day-1;var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToNextDay:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.monthsData.months[this.currentMonth].numberOfDays;e.day===n?(this.goToNextMonth(),a=1):a=e.day+1;var r=this.createDayOfMonth(a);this.setFocusToCell(r,!0)},getFirstDayOfMonth:function(e){var t,a=null,n=e;return null!==this.year&&(a=new Date(this.year,n,1)),null===(t=a)||void 0===t?void 0:t.getDay()},getLastDayOfPreviousMonth:function(e){var t,a=e,n=this.year;return 11===e&&(n=this.year-1),t=this.monthsData.months[a].numberOfDays,new Date(n,a,t).getDay()},amountOfWeeksInMonth:function(){var e=this.monthsData.months[this.currentMonth].numberOfDays,t=this.getFirstDayOfMonth(this.currentMonth),a=0===this.getFirstDayOfMonth(this.currentMonth);if(void 0!==t){if(28==e&&1==this.getFirstDayOfMonth(this.currentMonth))return 4;if(31==e&&(t>5||a)||30==e&&(t>6||a))return 6}return 5},sliceMonthToWeeks:function(e,t){for(var a=[],n=0;n<e.length;n+=t){var r=e.slice(n,n+t);a.push(r)}return a},toISOLocal:function(e){var t=function(e){return("0"+e).slice(-2)},a=e.getTimezoneOffset(),n=a>0?"-":"+";return a=Math.abs(a),e.getFullYear()+"-"+t(e.getMonth()+1)+"-"+t(e.getDate())+"T"+t(e.getHours())+":"+t(e.getMinutes())+":"+t(e.getSeconds())+"."+("00"+e.getMilliseconds()).slice(-3)+n+t(a/60|0)+":"+t(a%60)},createDate:function(e){var t=e.day,a=this.toISOLocal(new Date(e.year,e.month,t));return null==a?void 0:a.split("T")[0]}}}),l=["lang"],d={class:"date-field-section"},u={class:"date-field-inline"},c=["id","aria-describedby","placeholder"],h=["aria-label","aria-description"],f=["src"],m=["id"],p={key:0,class:"screen-reader-only"},b={key:1,role:"alert"},y={class:"error-list"},g={key:0,class:"datepicker-section"},v=["id"],k={class:"screen-reader-only"},D=["aria-label"],x={class:"datepicker"},M={class:"datepicker-header-line"},w=["id","aria-label"],S=["aria-label"],O=["id"],N={class:"datepicker-header-month"},T=e.createTextVNode(),P={class:"datepicker-header-year"},E=["aria-label"],F=["aria-label"],L=["id","aria-labelledby"],I={class:"datepicker-table-row"},C=["abbr"],B=["onClick","data-date","aria-selected","onKeydown"],z={class:"buttons"},K=["id"];!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('\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 input.date-field[data-v-2a02d1bf] {\r\n max-width: 130px;\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-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-2a02d1bf] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-2a02d1bf] {\r\n outline: 3px solid #BB1331;\r\n outline-offset: -3px;\n}\n.date-field[data-v-2a02d1bf] {\r\n color: #222222;\n}\n[data-v-2a02d1bf]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-2a02d1bf] {\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-2a02d1bf] {\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}\nul.error-list[data-v-2a02d1bf] {\r\n color: #BB1331;\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\n.calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf] {\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-2a02d1bf] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-2a02d1bf] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-2a02d1bf] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-2a02d1bf] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\n.datepicker-header-year[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\nthead > tr th[data-v-2a02d1bf] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-2a02d1bf] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-2a02d1bf] {\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-2a02d1bf] {\r\n display: table-row;\r\n text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-2a02d1bf] {\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-2a02d1bf]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-2a02d1bf] {\r\n color: #595959;\n}\n.datepicker-day[data-v-2a02d1bf]:hover {\r\n background-color: #e8e7e7;\n}\n.datepicker-day[data-v-2a02d1bf]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid #f44a87;\n}\ntd.datepicker-day[data-v-2a02d1bf]:focus {\r\n padding: 3px;\r\n border: 2px solid #3182a0;\r\n outline: 0;\n}\n.datepicker-day[tabindex="0"][data-v-2a02d1bf] {\r\n background-color: #ffd55f;\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-2a02d1bf] {\r\n padding: 3px;\r\n border: 2px dotted #3182a0;\r\n outline: 0;\n}\n.buttons[data-v-2a02d1bf] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-2a02d1bf],\r\nbutton.close-calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf]:hover {\r\n background-color: #5c73bc;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf]:hover {\r\n background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf] {\r\n background-color: #272525;\n}\n.backdrop[data-v-2a02d1bf] {\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 */\n@media (min-width: 1281px) {\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'),s.render=function(t,a,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:"vue-accessible-date-field",lang:t.naturalLanguage},[e.createElementVNode("div",d,[e.createElementVNode("div",u,[e.withDirectives(e.createElementVNode("input",{type:"text",id:"dateField-"+t.uniqueString,name:"dateInput","onUpdate:modelValue":a[0]||(a[0]=function(e){return t.selectedDate=e}),onChange:a[1]||(a[1]=function(e){return t.updateSelectedDate(e)}),class:e.normalizeClass(["date-field",{error:t.errors.length>0}]),"aria-describedby":"dateFieldDescription"+t.uniqueString,placeholder:t.placeholderText},null,42,c),[[e.vModelText,t.selectedDate]]),e.createElementVNode("button",{type:"button",id:"calendarIcon",class:"icon open-calendar-btn","aria-label":t.buttonLabel,"aria-description":t.navInstr,onClick:a[2]||(a[2]=function(e){return t.handleIconPress(e)}),onKeydown:[a[3]||(a[3]=e.withKeys((function(e){return t.handleIconPress(e)}),["enter"])),a[4]||(a[4]=e.withKeys((function(e){return t.handleIconPress(e)}),["space"]))]},[e.createElementVNode("img",{class:"open-calendar-icon",alt:"calendar icon",src:t.iconSrc,type:"image/svg+xml"},null,8,f)],40,h),e.createElementVNode("span",{id:"dateFieldDescription"+t.uniqueString},[0===t.errors.length?(e.openBlock(),e.createElementBlock("span",p,e.toDisplayString(t.possibleDateFormats),1)):e.createCommentVNode("",!0),t.errors.length>0?(e.openBlock(),e.createElementBlock("span",b,[e.createElementVNode("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.errors,(function(t){return e.openBlock(),e.createElementBlock("li",{key:t},e.toDisplayString(t),1)})),128))])])):e.createCommentVNode("",!0)],8,m)])]),t.calendarVisible?(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("span",{id:"monthYearDescr-"+t.uniqueString,role:"status"},[e.createElementVNode("span",k,e.toDisplayString(t.monthYearDescription),1)],8,v),e.createElementVNode("div",{onClick:a[5]||(a[5]=function(e){return t.handleBackdropClick(e)}),class:"backdrop",ref:"backdrop"},null,512),e.createElementVNode("div",{class:"calendar-modal",role:"dialog","aria-modal":"true","aria-label":t.localizationData.buttonLabelChoose},[e.createElementVNode("div",x,[e.createElementVNode("div",M,[e.createElementVNode("button",{type:"button",id:"previousYear-"+t.uniqueString,class:"arrow-button previous-year-button",onClick:a[6]||(a[6]=function(e){return t.riffleYears("backward")}),"aria-label":t.localizationData.buttonLabelPreviousYear,onKeydown:[a[7]||(a[7]=e.withKeys((function(e){return t.handlePrevYearTab(e)}),["tab"])),a[8]||(a[8]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[9]||(a[9]=e.withKeys((function(e){return t.riffleYears("backward",e)}),["enter"]))]}," « ",40,w),e.createElementVNode("button",{type:"button",class:"arrow-button previous-month-button",onClick:a[10]||(a[10]=function(e){return t.riffleMonths("backward",e)}),"aria-label":t.localizationData.buttonLabelPreviousMonth,onKeydown:[a[11]||(a[11]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[12]||(a[12]=e.withKeys((function(e){return t.riffleMonths("backward",e)}),["enter"]))]}," ‹ ",40,S),e.createElementVNode("h3",{id:"datepickerHeader-"+t.uniqueString,class:"datepicker-header"},[e.createElementVNode("span",N,e.toDisplayString(t.pickerHeaderMonth),1),T,e.createElementVNode("span",P,e.toDisplayString(t.pickerHeaderYear),1)],8,O),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:a[13]||(a[13]=function(e){return t.riffleMonths("forward")}),"aria-label":t.localizationData.buttonLabelNextMonth,onKeydown:[a[14]||(a[14]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[15]||(a[15]=e.withKeys((function(e){return t.riffleMonths("forward",e)}),["enter"]))]}," › ",40,E),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:a[16]||(a[16]=function(e){return t.riffleYears("forward")}),"aria-label":t.localizationData.buttonLabelNextYear,onKeydown:[a[17]||(a[17]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[18]||(a[18]=e.withKeys((function(e){return t.riffleYears("forward",e)}),["enter"]))]}," » ",40,F)]),e.createElementVNode("table",{id:"datapickerTable-"+t.uniqueString,class:"datepicker-grid",role:"grid","aria-labelledby":"datepickerHeader-"+t.uniqueString},[e.createElementVNode("thead",null,[e.createElementVNode("tr",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysShort,(function(a,n){return e.openBlock(),e.createElementBlock("th",{scope:"col",key:n,abbr:t.localizationData.dayNames[n]},e.toDisplayString(a),9,C)})),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysVisibleCurrentMonth,(function(n,r){return e.openBlock(),e.createElementBlock("tr",{key:r,class:"datepicker-table-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n,(function(n,r){return e.openBlock(),e.createElementBlock("td",{key:r,onClick:function(e){return t.handleDatePress(e,n,!0)},tabindex:"-1",class:e.normalizeClass(["datepicker-day",{"selected-date":t.createDate(n)===t.selectedISODate},{"disabled-day":t.checkDisabledDay(n)}]),"data-date":t.createDate(n),role:"gridcell","aria-selected":t.checkSelected(n),onKeydown:[a[19]||(a[19]=e.withKeys((function(e){return t.closeDatePickerModal()}),["esc"])),e.withKeys((function(e){return t.handleDatePress(e,n,!1)}),["space"]),e.withKeys((function(e){return t.handleDatePress(e,n,!0)}),["enter"]),e.withKeys((function(e){return t.goToPreviousWeek(n,e)}),["up"]),e.withKeys((function(e){return t.goToNextWeek(n,e)}),["down"]),e.withKeys((function(e){return t.goToNextDay(n,e)}),["right"]),e.withKeys((function(e){return t.goToPreviousDay(n,e)}),["left"]),e.withKeys((function(e){return t.goToFirstDayOfWeek(n,e)}),["home"]),e.withKeys((function(e){return t.goToLastDayOfWeek(n,e)}),["end"]),e.withKeys((function(e){return t.handlePageDown(e,n)}),["page-down"]),e.withKeys((function(e){return t.handlePageUp(e,n)}),["page-up"])]},e.toDisplayString(n.day),43,B)})),128))])})),128))])],8,L)]),e.createElementVNode("div",z,[e.createElementVNode("button",{class:"close-calendar-modal",onClick:a[20]||(a[20]=function(e){return t.closeDatePickerModal(e)}),onKeydown:a[21]||(a[21]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"]))},e.toDisplayString(t.localizationData.cancelButtonLabel),33),e.createElementVNode("button",{id:"OKButton-"+t.uniqueString,class:"choose-selected-date",onClick:a[22]||(a[22]=function(e){return t.handleOKButtonClick(e)}),onKeydown:[a[23]||(a[23]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[24]||(a[24]=e.withKeys((function(e){return t.handleOKButtonTab(e)}),["tab"]))]},e.toDisplayString(t.localizationData.selectFocusedButtonLabel),41,K)])],8,D)])):e.createCommentVNode("",!0)],8,l)},s.__scopeId="data-v-2a02d1bf";var V=function(){var e=s;return e.install=function(t){t.component("VueAccessibleDateField",e)},e}(),Y=Object.freeze({__proto__:null,default:V});return Object.entries(Y).forEach((function(e){var a=t(e,2),n=a[0],r=a[1];"default"!==n&&(V[n]=r)})),V}(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 a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var n,r,o=[],i=!0,s=!1;try{for(a=a.call(e);!(i=(n=a.next()).done)&&(o.push(n.value),!t||o.length!==t);i=!0);}catch(e){s=!0,r=e}finally{try{i||null==a.return||a.return()}finally{if(s)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return a(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return a(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 a(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var n={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.vvvv",dateFormatString:"päivämäärän muoto: ",wordOrTranslated:"tai",dateFormatOptions:["pp.kk.vvvv","pp-kk-vvvv","pp/kk/vvvv"],generalDateFieldError:'Syöttämäsi päivämäärän muoto "{0}" ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ',keyboardNavInstructions:"Kalenterin sisältöä voi selata näppäimistöltä seuraavilla painikkeilla: sarkainpainike: siirrä kohdistusta nuolipainikkeiden, kohdistetun päivämäärän sekä OK- ja Peruuta -painikkeiden välillä, nuoli vasemmalle: siirry edelliseen päivään, nuoli oikealle: Siirry seuraavaan päivään, nuoli ylös: siirry edellisen viikon samaan viikonpäivään, nuoli alas: siirry seuraavan viikon samaan viikonpäivään, HOME-näppäin: siirry saman viikon ensimmäiseen päivään, END-näppäin: siirry saman viikon viimeiseen päivään, PAGE DOWN -näppäin: siirry edelliseen kuukauteen, SHIFT + PAGE DOWN -näppäin: siirry edelliseen vuoteen, PAGE UP -näppäin: siirry seuraavaan kuukauteen, SHIFT + PAGE UP -näppäin: siirry seuraavaan vuoteen, ENTER: valitse kohdistettu päivä ja sulje kalenteri, SPACE: valitse kohdistettu päivä, kalenteri pysyy auki, ESC: sulje kalenteri",buttonLabelChoose:"Valitse päivämäärä",buttonLabelChange:"Muuta valittua päivämäärää, ",buttonLabelPreviousMonth:"Siirry edelliseen kuukauteen",buttonLabelPreviousYear:"Siirry edelliseen vuoteen",buttonLabelNextMonth:"Siirry seuraavaan kuukauteen",buttonLabelNextYear:"Siirry seuraavaan vuoteen",dayNames:["maanantai","tiistai","keskiviikko","torstai","perjantai","lauantai","sunnuntai"],dayNamesShort:["ma","ti","ke","to","pe","la","su"],monthNames:["tammikuu","helmikuu","maaliskuu","huhtikuu","toukokuu","kesäkuu","heinäkuu","elokuu","syyskuu","lokakuu","marraskuu","joulukuu"],monthNamesForMessage:["tammikuuta","helmikuuta","maaliskuuta","huhtikuuta","toukokuuta","kesäkuuta","heinäkuuta","elokuuta","syyskuuta","lokakuuta","marraskuuta","joulukuuta"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Peruuta"},o={locale:"sv-SE",placeholderText:"T.ex. dd.mm.åååå",dateFormatString:"datumformat: ",wordOrTranslated:"eller",dateFormatOptions:["dd.mm.åååå","dd-mm-åååå","dd/mm/åååå"],generalDateFieldError:'Datumformatet "{0}" du angav är ogiltigt. Ange datumet i något av följande format: ',keyboardNavInstructions:"Du kan bläddra igenom kalenderinnehållet med följande tangenter:TAB-tangent: Flytta fokus mellan piltangenter, måldatum samt OK och Avbryt på skärmen, vänsterpil: gå till föregående dag, högerpil: Gå till nästa dag, uppåtpil: gå till samma veckodag förra veckan, nedåtpil: gå till samma veckodag nästa vecka, HOME: gå till den första dagen i samma vecka, END: gå till den sista dagen i samma vecka, PAGE DOWN: gå till föregående månad ,SHIFT + PAGE DOWN: gå till föregående år, PAGE UP: gå till nästa månad, SHIFT + PAGE UP: gå till nästa år, ENTER: välj den inriktade dagen och stäng kalendern, SPACE: välj en inriktad dag, kalendern förblir öppen, ESC: stäng kalendern",buttonLabelChoose:"Välj ett datum",buttonLabelChange:"Ändra det valda datumet, ",buttonLabelPreviousMonth:"Gå till föregående månad",buttonLabelPreviousYear:"Gå till föregående år",buttonLabelNextMonth:"Gå till nästa månad",buttonLabelNextYear:"Gå till nästa år",dayNames:["måndag","tisdag","onsdag","torsdag","fredag","lördag","söndag"],dayNamesShort:["må","ti","on","to","fr","lö","sö"],monthNames:["januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december"],monthNamesForMessage:["januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Avbryt"},i={locale:"en-GB",placeholderText:"e.g. dd.mm.yyyy",dateFormatString:"date format: ",wordOrTranslated:"or",dateFormatOptions:["dd.mm.yyyy","dd-mm-yyyy","dd/mm/yyyy"],generalDateFieldError:'Entered date format "{0}" is invalid. Date format options are: ',keyboardNavInstructions:"You can navigate through the date picker contents with the following keys: TAB: Move focus between the arrow buttons, the targeted date, and the OK and Cancel buttons, left arrow: go to the previous day, right arrow: Go to the next day, up arrow: go to the same day of the week, down arrow: go to the same day of the week next week, HOME key: go to the first day of the same week, END key: go to the last day of the same week, PAGE DOWN key: go to the previous month, SHIFT + PAGE DOWN key: go to the previous year, PAGE UP key: go to the next month, SHIFT + PAGE UP key: go to the next year, ENTER: select the focused day and close the date picker, SPACE: select the focused day, date picker will remain open, ESC: close date picker",buttonLabelChoose:"Choose date",buttonLabelChange:"Change selected date, ",buttonLabelPreviousMonth:"Move to previous month",buttonLabelPreviousYear:"Move to previous year",buttonLabelNextMonth:"Move to next month",buttonLabelNextYear:"Move to next year",dayNames:["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],dayNamesShort:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesForMessage:["January","February","March","April","May","June","July","August","September","October","November","December"],selectFocusedButtonLabel:"OK",cancelButtonLabel:"Cancel"},s=e.defineComponent({name:"VueAccessibleDateField",props:{defaultDate:String,uniqueName:String,usedLanguage:String,localizationFi:{type:Object},localizationSv:{type:Object},localizationEn:{type:Object}},data:function(){var e=(new Date).getMonth(),t=(new Date).getFullYear();return{showCalendar:!1,monthsData:n,localizationDefaultDataFi:r,localizationDefaultDataSv:o,localizationDefaultDataEn:i,localizationData:{locale:"",placeholderText:"",dateFormatString:"",wordOrTranslated:"",dateFormatOptions:[],generalDateFieldError:"",keyboardNavInstructions:"",buttonLabelChoose:"",buttonLabelChange:"",buttonLabelPreviousMonth:"",buttonLabelPreviousYear:"",buttonLabelNextMonth:"",buttonLabelNextYear:"",dayNames:[],monthNames:[],monthNamesForMessage:[],dayNamesShort:[],selectFocusedButtonLabel:"",cancelButtonLabel:""},currentMonth:e,year:t,selectedISODate:undefined,selectedDateString:undefined,selectedTdCell:undefined,uniqueString:undefined,errors:[],selectedDateMessage:"",componentLanguage:undefined}},created:function(){var e=document.documentElement.getAttribute("lang");this.usedLanguage?"en"===this.usedLanguage||"en-GB"===this.usedLanguage?this.componentLanguage="en":"sv"===this.usedLanguage||"sv-SE"===this.usedLanguage?this.componentLanguage="sv":"fi"!==this.usedLanguage&&"fi-FI"!==this.usedLanguage||(this.componentLanguage="fi"):this.componentLanguage=e||"en"},mounted:function(){"fi"===this.componentLanguage?this.localizationFi?this.localizationData=this.localizationFi:this.localizationData=this.localizationDefaultDataFi:"sv"===this.componentLanguage?this.localizationSv?this.localizationData=this.localizationSv:this.localizationData=this.localizationDefaultDataSv:this.localizationEn?this.localizationData=this.localizationEn:this.localizationData=this.localizationDefaultDataEn,void 0===this.selectedISODate&&this.defaultDate&&(this.selectedISODate=this.defaultDate,this.setCalendarView(this.selectedISODate),this.selectedDateString=this.formatISODate(this.defaultDate,".")),this.uniqueString=this.uniqueName},watch:{selectedDateISOFormat:function(e){this.updateButtonMessage(e),this.$emit("update:selectedISODate",e)}},computed:{naturalLanguage:function(){return this.componentLanguage},selectedDateISOFormat:function(){return this.selectedISODate},selectedDate:function(){return this.selectedDateString},buttonLabel:function(){return this.selectedDateString?this.selectedDateMessage:this.localizationData.buttonLabelChoose},iconSrc:function(){return"https://raw.githubusercontent.com/laladdin/vue-accessible-date-field/main/src/assets/calendar-icon-black.svg"},navInstr:function(){return this.localizationData.keyboardNavInstructions},calendarVisible:function(){return this.showCalendar},daysShort:function(){return this.localizationData.dayNamesShort},placeholderText:function(){return this.localizationData.placeholderText},possibleDateFormats:function(){for(var e=this.localizationData.dateFormatString,t=this.localizationData.dateFormatOptions.length,a=0;a<t;a++){var n=", ";0===a?n=" ":a===t-1&&(n=" "+this.localizationData.wordOrTranslated+" "),e=e+n+this.localizationData.dateFormatOptions[a]}return e},monthYearDescription:function(){return this.localizationData.monthNames[this.currentMonth]+this.year.toString()},pickerHeaderMonth:function(){return this.checkIfLeapYear(this.year)?this.monthsData.months[1].numberOfDays=29:this.monthsData.months[1].numberOfDays=28,this.localizationData.monthNames[this.currentMonth]},pickerHeaderYear:function(){return this.year},daysVisibleCurrentMonth:function(){var e,t=void 0,a=[],n=this.previousMonthIndex(this.currentMonth),r=this.getLastDayOfPreviousMonth(n),o=null===(e=this.monthsData.months[n])||void 0===e?void 0:e.numberOfDays,i=this.year;if(o&&r&&0!==r){11===n&&(i=this.year-1);for(var s=r;s>=1;s--)t={day:o,month:n,year:i,previousMonthDay:!0},a.push(t),o-=1;a.reverse()}var l=this.monthsData.months[this.currentMonth].numberOfDays;if(null!=l){for(var d=1;d<=l;d++)t={day:d,month:this.currentMonth,year:this.year},a.push(t);if(7*this.amountOfWeeksInMonth()-a.length>0)for(var c=7*this.amountOfWeeksInMonth()-a.length,u=1;u<=c;u++)t={day:u,month:this.currentMonth+1,year:this.year,nextMonthDay:!0},a.push(t)}return this.sliceMonthToWeeks(a,7)}},methods:{updateButtonMessage:function(e){var t=new Date(e),a=this.localizationData.dayNames[t.getDay()],n=t.getDate(),r=this.localizationData.monthNamesForMessage[t.getMonth()],o=t.getFullYear();this.selectedDateMessage=this.localizationData.buttonLabelChange+a+" "+n+" "+r+" "+o},checkDisabledDay:function(e){return e.previousMonthDay||e.nextMonthDay},eventPrev:function(e){e.stopPropagation(),e.preventDefault()},closeDatePickerModal:function(e){var t,a;(this.showCalendar=!1,e&&this.eventPrev(e),!1===this.showCalendar)&&(this.year=Number(null===(t=this.selectedISODate)||void 0===t?void 0:t.split("-")[0]),this.currentMonth=Number(null===(a=this.selectedISODate)||void 0===a?void 0:a.split("-")[1])-1)},changeTabIndex:function(e,t){document.querySelector('td[tabindex="'+e+'"]').tabIndex=t},setFocusToCell:function(e,t){this.$nextTick((function(){var a=document.querySelector("[data-date='"+e+"']");a.tabIndex=0,!0===t&&a.focus()}))},checkSelected:function(e){return this.createDate(e)===this.selectedISODate},setCalendarView:function(e){this.year=Number(e.split("-")[0]),this.currentMonth=Number(e.split("-")[1])-1},formatISODate:function(e,t){var a=e.split("-"),n=a[2]+t+a[1]+t+a[0];return this.selectedDateString=n,n},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))return this.selectedDateString=t,!0;if(this.errors=[],t){this.selectedDateString=void 0;var a=this.localizationData.generalDateFieldError.replace("{0}",t)+this.localizationData.dateFormatOptions;this.errors.push(a)}else;return!1},updateSelectedDate:function(e){var a=e.target.value;if(this.selectedDateString=a,this.handleDateFormat(a)){this.errors=[];var n=t(a.split(/[-./]+/),3),r=n[0],o=n[1],i=n[2];r=Number(r).toString().padStart(2,"0"),o=Number(o).toString().padStart(2,"0");var s="".concat(i,"-").concat(o,"-").concat(r);this.setCalendarView(s),this.selectedISODate=s}},createDayOfMonth:function(e){return this.createDate({day:e,month:this.currentMonth,year:this.year})},handleIconPress:function(e){if(this.errors=[],this.showCalendar=!0,this.selectedISODate)this.setFocusToCell(this.selectedISODate,!0);else{var t=new Date,a=t.getDate();this.currentMonth=t.getMonth(),this.year=t.getFullYear();var n=this.createDayOfMonth(a);this.setFocusToCell(n,!0)}this.eventPrev(e)},handleBackdropClick:function(e){this.closeDatePickerModal(),this.eventPrev(e)},handleDatePress:function(e,t,a){this.selectedTdCell=e.target,this.selectedTdCell.ariaSelected="true",this.selectedTdCell.tabIndex=0;var n=this.createDate(t);(this.selectedISODate=n,this.selectedDateString=this.formatISODate(n,"."),!0===a)&&(this.closeDatePickerModal(),document.getElementById("calendarIcon").focus());this.eventPrev(e)},handleOKButtonClick:function(e){var t=document.querySelector('td[tabindex="0"]');this.selectedISODate=t.dataset.date;var a=this.selectedISODate;this.selectedDateString=this.formatISODate(a,"."),t.ariaSelected="true",this.closeDatePickerModal(),this.eventPrev(e)},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){this.eventPrev(e),this.changeTabIndex(0,-1),e.shiftKey?this.goToPreviousYear():this.goToPreviousMonth();var a=this.createDayOfMonth(t.day);this.setFocusToCell(a,!0)},handlePageUp:function(e,t){this.eventPrev(e),this.changeTabIndex(0,-1),e.shiftKey?this.goToNextYear():this.goToNextMonth();var a=this.createDayOfMonth(t.day);this.setFocusToCell(a,!0)},riffleMonths:function(e,t){var a=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextMonth():"backward"===e&&this.goToPreviousMonth();var n=Number(a.dataset.date.split("-")[2]),r=this.createDayOfMonth(n);this.setFocusToCell(r,!1),t&&this.eventPrev(t)},riffleYears:function(e,t){var a=document.querySelector('td[tabindex="0"]');this.changeTabIndex(0,-1),"forward"===e?this.goToNextYear():"backward"===e&&this.goToPreviousYear();var n=Number(a.dataset.date.split("-")[2]),r=this.createDayOfMonth(n);this.setFocusToCell(r,!1),t&&this.eventPrev(t)},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){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=new Date(e.year,e.month,e.day).getDay(),r=this.previousMonthIndex(this.currentMonth),o=this.monthsData.months[r].numberOfDays;(a=0===n?e.day-6:e.day-(n-1))<1&&(a=o+a,this.goToPreviousMonth());var i=this.createDayOfMonth(a);this.setFocusToCell(i,!0)},goToLastDayOfWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=e.day,n=new Date(e.year,e.month,e.day).getDay(),r=this.monthsData.months[this.currentMonth].numberOfDays;0!==n&&(a=e.day+(7-n)),a>r&&(a-=r,this.goToNextMonth());var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToPreviousWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[n].numberOfDays;(a=e.day-7)<1&&(a=r+a,this.goToPreviousMonth());var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToNextWeek:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0;a=e.day+7;var n=this.monthsData.months[this.currentMonth].numberOfDays;a>n&&(a-=n,this.goToNextMonth());var r=this.createDayOfMonth(a);this.setFocusToCell(r,!0)},goToPreviousDay:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.previousMonthIndex(this.currentMonth),r=this.monthsData.months[n].numberOfDays;1===e.day?(this.goToPreviousMonth(),a=r):a=e.day-1;var o=this.createDayOfMonth(a);this.setFocusToCell(o,!0)},goToNextDay:function(e,t){this.eventPrev(t),this.changeTabIndex(0,-1);var a=0,n=this.monthsData.months[this.currentMonth].numberOfDays;e.day===n?(this.goToNextMonth(),a=1):a=e.day+1;var r=this.createDayOfMonth(a);this.setFocusToCell(r,!0)},getFirstDayOfMonth:function(e){var t,a=null,n=e;return null!==this.year&&(a=new Date(this.year,n,1)),null===(t=a)||void 0===t?void 0:t.getDay()},getLastDayOfPreviousMonth:function(e){var t,a=e,n=this.year;return 11===e&&(n=this.year-1),t=this.monthsData.months[a].numberOfDays,new Date(n,a,t).getDay()},amountOfWeeksInMonth:function(){var e=this.monthsData.months[this.currentMonth].numberOfDays,t=this.getFirstDayOfMonth(this.currentMonth),a=0===this.getFirstDayOfMonth(this.currentMonth);if(void 0!==t){if(28==e&&1==this.getFirstDayOfMonth(this.currentMonth))return 4;if(31==e&&(t>5||a)||30==e&&(t>6||a))return 6}return 5},sliceMonthToWeeks:function(e,t){for(var a=[],n=0;n<e.length;n+=t){var r=e.slice(n,n+t);a.push(r)}return a},toISOLocal:function(e){var t=function(e){return("0"+e).slice(-2)},a=e.getTimezoneOffset(),n=a>0?"-":"+";return a=Math.abs(a),e.getFullYear()+"-"+t(e.getMonth()+1)+"-"+t(e.getDate())+"T"+t(e.getHours())+":"+t(e.getMinutes())+":"+t(e.getSeconds())+"."+("00"+e.getMilliseconds()).slice(-3)+n+t(a/60|0)+":"+t(a%60)},createDate:function(e){var t=e.day,a=this.toISOLocal(new Date(e.year,e.month,t));return null==a?void 0:a.split("T")[0]}}}),l=["lang"],d={class:"date-field-section"},c={class:"date-field-inline"},u=["id","aria-describedby","placeholder"],h=["aria-label","aria-description"],m=["src"],f=["id"],p={key:0,class:"screen-reader-only"},b={key:1,role:"alert"},y={class:"error-list"},v={key:0,class:"datepicker-section"},g=["id"],k={class:"screen-reader-only"},D=["aria-label"],x={class:"datepicker"},M={class:"datepicker-header-line"},w=["id","aria-label"],S=["aria-label"],O=["id"],N={class:"datepicker-header-month"},T=e.createTextVNode(),P={class:"datepicker-header-year"},E=["aria-label"],F=["aria-label"],L=["id","aria-labelledby"],I={class:"table-head"},C={class:"datepicker-table-row"},z=["abbr"],B=["onClick","data-date","aria-selected","onKeydown"],K={class:"buttons"},V=["id"];!function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('\n.vue-accessible-date-field[data-v-21954a86] {\r\n --main-color: #222222;\r\n\r\n /* date field section (text fields) */\r\n --date-field-section-outline-color: #d71ef7;\r\n --calendar-icon-focus-color: #d71ef7;\r\n --open-calendar-button-background-color: #ffffff;\r\n --error-text-color: #BB1331;\r\n\r\n /* date picker (modal) section */\r\n --day-hover-background-color: #e8e7e7;\r\n --day-not-disabled-hover-border-color: #f44a87;\r\n --day-focus-border: #3182a0;\r\n --day-tabindex-0-background-color: #ffd55f;\r\n --day-selected-border-color: #3182a0;\r\n --chooce-selected-button-background-color: #39306b;\r\n --chooce-selected-button-background-color-hover: #5c73bc;\r\n --close-modal-button-background-color: #272525;\r\n --close-modal-button-hover-background-color: #677983;\r\n\r\n --modal-backdrop-z-index: 1000;\r\n --date-picker-z-index: 1001;\n}\n.date-field-section input.date-field[data-v-21954a86] {\r\n max-width: 130px;\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-21954a86]:focus {\r\n outline: 3px solid var(--date-field-section-outline-color);\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-21954a86] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-21954a86] {\r\n outline: 3px solid var(--error-text-color);\r\n outline-offset: -3px;\n}\n.date-field[data-v-21954a86] {\r\n color: var(--main-color);\n}\n[data-v-21954a86]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-21954a86] {\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-21954a86] {\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}\nul.error-list[data-v-21954a86] {\r\n color: var(--error-text-color);\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-21954a86]:focus {\r\n outline: 3px solid var(--calendar-icon-focus-color);\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\ndiv.calendar-modal[data-v-21954a86] {\r\n position: absolute;\r\n background-color: #ffffff;\r\n border: 1px solid #000000;\r\n max-width: 450px;\r\n z-index: var(--date-picker-z-index);\n}\n.open-calendar-btn[data-v-21954a86] {\r\n height: 30px;\r\n background-color: var(--open-calendar-button-background-color);\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-21954a86] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-21954a86] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-21954a86] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-21954a86] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\n.datepicker-header-year[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\nthead.table-head[data-v-21954a86] {\r\n border-collapse: separate;\n}\nthead.table-head > tr th[data-v-21954a86] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-21954a86] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-21954a86] {\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-21954a86] {\r\n display: table-row;\r\n text-align: center;\n}\n.datepicker-table-row th[data-v-21954a86] {\r\n color: var(--main-color);\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-21954a86] {\r\n width: 24px;\r\n color: var(--main-color);\r\n padding: 5px;\r\n margin: 2px;\r\n border-radius: 3px;\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-21954a86] {\r\n color: #595959;\n}\n.datepicker-day[data-v-21954a86]:hover {\r\n background-color: var(--day-hover-background-color);\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid var(--day-not-disabled-hover-border-color);\n}\ntd.datepicker-day[data-v-21954a86]:focus {\r\n padding: 3px;\r\n border: 2px solid var(--day-focus-border);\r\n outline: 0;\n}\n.datepicker-day[tabindex="0"][data-v-21954a86] {\r\n background-color: var(--day-tabindex-0-background-color);\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-21954a86] {\r\n padding: 3px;\r\n border: 2px dotted var(--day-selected-border-color);\r\n outline: 0;\n}\n.buttons[data-v-21954a86] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--chooce-selected-button-background-color);\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-21954a86]:hover {\r\n background-color: var(--chooce-selected-button-background-color-hover);\n}\nbutton.close-calendar-modal[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--close-modal-button-background-color);\r\n color: #ffffff;\r\n margin-bottom: 6px;\r\n margin-right: 10px;\r\n padding: 8px;\n}\nbutton.close-calendar-modal[data-v-21954a86]:hover {\r\n background-color: var(--close-modal-button-hover-background-color);\n}\ndiv.backdrop[data-v-21954a86] {\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%;\r\n z-index: var(--modal-backdrop-z-index);\n}\r\n\r\n/* XXL */\n@media (min-width: 1281px) {\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'),s.render=function(t,a,n,r,o,i){return e.openBlock(),e.createElementBlock("div",{class:"vue-accessible-date-field",lang:t.naturalLanguage},[e.createElementVNode("div",d,[e.createElementVNode("div",c,[e.withDirectives(e.createElementVNode("input",{type:"text",id:"dateField-"+t.uniqueString,name:"dateInput","onUpdate:modelValue":a[0]||(a[0]=function(e){return t.selectedDate=e}),onChange:a[1]||(a[1]=function(e){return t.updateSelectedDate(e)}),class:e.normalizeClass(["date-field",{error:t.errors.length>0}]),"aria-describedby":"dateFieldDescription"+t.uniqueString,placeholder:t.placeholderText},null,42,u),[[e.vModelText,t.selectedDate]]),e.createElementVNode("button",{type:"button",id:"calendarIcon",class:"icon open-calendar-btn","aria-label":t.buttonLabel,"aria-description":t.navInstr,onClick:a[2]||(a[2]=function(e){return t.handleIconPress(e)}),onKeydown:[a[3]||(a[3]=e.withKeys((function(e){return t.handleIconPress(e)}),["enter"])),a[4]||(a[4]=e.withKeys((function(e){return t.handleIconPress(e)}),["space"]))]},[e.createElementVNode("img",{class:"open-calendar-icon",alt:"calendar icon",src:t.iconSrc,type:"image/svg+xml"},null,8,m)],40,h),e.createElementVNode("span",{id:"dateFieldDescription"+t.uniqueString},[0===t.errors.length?(e.openBlock(),e.createElementBlock("span",p,e.toDisplayString(t.possibleDateFormats),1)):e.createCommentVNode("",!0),t.errors.length>0?(e.openBlock(),e.createElementBlock("span",b,[e.createElementVNode("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.errors,(function(t){return e.openBlock(),e.createElementBlock("li",{key:t},e.toDisplayString(t),1)})),128))])])):e.createCommentVNode("",!0)],8,f)])]),t.calendarVisible?(e.openBlock(),e.createElementBlock("div",v,[e.createElementVNode("span",{id:"monthYearDescr-"+t.uniqueString,role:"status"},[e.createElementVNode("span",k,e.toDisplayString(t.monthYearDescription),1)],8,g),e.createElementVNode("div",{onClick:a[5]||(a[5]=function(e){return t.handleBackdropClick(e)}),class:"backdrop",ref:"backdrop"},null,512),e.createElementVNode("div",{class:"calendar-modal",role:"dialog","aria-modal":"true","aria-label":t.localizationData.buttonLabelChoose},[e.createElementVNode("div",x,[e.createElementVNode("div",M,[e.createElementVNode("button",{type:"button",id:"previousYear-"+t.uniqueString,class:"arrow-button previous-year-button",onClick:a[6]||(a[6]=function(e){return t.riffleYears("backward")}),"aria-label":t.localizationData.buttonLabelPreviousYear,onKeydown:[a[7]||(a[7]=e.withKeys((function(e){return t.handlePrevYearTab(e)}),["tab"])),a[8]||(a[8]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[9]||(a[9]=e.withKeys((function(e){return t.riffleYears("backward",e)}),["enter"]))]}," « ",40,w),e.createElementVNode("button",{type:"button",class:"arrow-button previous-month-button",onClick:a[10]||(a[10]=function(e){return t.riffleMonths("backward",e)}),"aria-label":t.localizationData.buttonLabelPreviousMonth,onKeydown:[a[11]||(a[11]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[12]||(a[12]=e.withKeys((function(e){return t.riffleMonths("backward",e)}),["enter"]))]}," ‹ ",40,S),e.createElementVNode("h3",{id:"datepickerHeader-"+t.uniqueString,class:"datepicker-header"},[e.createElementVNode("span",N,e.toDisplayString(t.pickerHeaderMonth),1),T,e.createElementVNode("span",P,e.toDisplayString(t.pickerHeaderYear),1)],8,O),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:a[13]||(a[13]=function(e){return t.riffleMonths("forward")}),"aria-label":t.localizationData.buttonLabelNextMonth,onKeydown:[a[14]||(a[14]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[15]||(a[15]=e.withKeys((function(e){return t.riffleMonths("forward",e)}),["enter"]))]}," › ",40,E),e.createElementVNode("button",{type:"button",class:"arrow-button",onClick:a[16]||(a[16]=function(e){return t.riffleYears("forward")}),"aria-label":t.localizationData.buttonLabelNextYear,onKeydown:[a[17]||(a[17]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[18]||(a[18]=e.withKeys((function(e){return t.riffleYears("forward",e)}),["enter"]))]}," » ",40,F)]),e.createElementVNode("table",{id:"datapickerTable-"+t.uniqueString,class:"datepicker-grid",role:"grid","aria-labelledby":"datepickerHeader-"+t.uniqueString},[e.createElementVNode("thead",I,[e.createElementVNode("tr",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysShort,(function(a,n){return e.openBlock(),e.createElementBlock("th",{scope:"col",key:n,abbr:t.localizationData.dayNames[n]},e.toDisplayString(a),9,z)})),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.daysVisibleCurrentMonth,(function(n,r){return e.openBlock(),e.createElementBlock("tr",{key:r,class:"datepicker-table-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n,(function(n,r){return e.openBlock(),e.createElementBlock("td",{key:r,onClick:function(e){return t.handleDatePress(e,n,!0)},tabindex:"-1",class:e.normalizeClass(["datepicker-day",{"selected-date":t.createDate(n)===t.selectedISODate},{"disabled-day":t.checkDisabledDay(n)}]),"data-date":t.createDate(n),role:"gridcell","aria-selected":t.checkSelected(n),onKeydown:[a[19]||(a[19]=e.withKeys((function(e){return t.closeDatePickerModal()}),["esc"])),e.withKeys((function(e){return t.handleDatePress(e,n,!1)}),["space"]),e.withKeys((function(e){return t.handleDatePress(e,n,!0)}),["enter"]),e.withKeys((function(e){return t.goToPreviousWeek(n,e)}),["up"]),e.withKeys((function(e){return t.goToNextWeek(n,e)}),["down"]),e.withKeys((function(e){return t.goToNextDay(n,e)}),["right"]),e.withKeys((function(e){return t.goToPreviousDay(n,e)}),["left"]),e.withKeys((function(e){return t.goToFirstDayOfWeek(n,e)}),["home"]),e.withKeys((function(e){return t.goToLastDayOfWeek(n,e)}),["end"]),e.withKeys((function(e){return t.handlePageDown(e,n)}),["page-down"]),e.withKeys((function(e){return t.handlePageUp(e,n)}),["page-up"])]},e.toDisplayString(n.day),43,B)})),128))])})),128))])],8,L)]),e.createElementVNode("div",K,[e.createElementVNode("button",{class:"close-calendar-modal",onClick:a[20]||(a[20]=function(e){return t.closeDatePickerModal(e)}),onKeydown:a[21]||(a[21]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"]))},e.toDisplayString(t.localizationData.cancelButtonLabel),33),e.createElementVNode("button",{id:"OKButton-"+t.uniqueString,class:"choose-selected-date",onClick:a[22]||(a[22]=function(e){return t.handleOKButtonClick(e)}),onKeydown:[a[23]||(a[23]=e.withKeys((function(e){return t.closeDatePickerModal(e)}),["esc"])),a[24]||(a[24]=e.withKeys((function(e){return t.handleOKButtonTab(e)}),["tab"]))]},e.toDisplayString(t.localizationData.selectFocusedButtonLabel),41,V)])],8,D)])):e.createCommentVNode("",!0)],8,l)},s.__scopeId="data-v-21954a86";var Y=function(){var e=s;return e.install=function(t){t.component("VueAccessibleDateField",e)},e}(),A=Object.freeze({__proto__:null,default:Y});return Object.entries(A).forEach((function(e){var a=t(e,2),n=a[0],r=a[1];"default"!==n&&(Y[n]=r)})),Y}(Vue);

40

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

@@ -102,3 +102,3 @@ 'use strict';var vue=require('vue');function _slicedToArray(arr, i) {

dateFormatOptions: ['pp.kk.vvvv', 'pp-kk-vvvv', 'pp/kk/vvvv'],
generalDateFieldError: 'Syöttämäsi päivämäärän {0} muoto ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ',
generalDateFieldError: 'Syöttämäsi päivämäärän muoto "{0}" ei kelpaa. Syötä päivämäärä jossakin seuraavista muodoista: ',
keyboardNavInstructions: 'Kalenterin sisältöä voi selata näppäimistöltä seuraavilla painikkeilla: ' + 'sarkainpainike: siirrä kohdistusta nuolipainikkeiden, kohdistetun päivämäärän sekä OK- ja Peruuta -painikkeiden välillä, ' + 'nuoli vasemmalle: siirry edelliseen päivään, ' + 'nuoli oikealle: Siirry seuraavaan päivään, ' + 'nuoli ylös: siirry edellisen viikon samaan viikonpäivään, ' + 'nuoli alas: siirry seuraavan viikon samaan viikonpäivään, ' + 'HOME-näppäin: siirry saman viikon ensimmäiseen päivään, ' + 'END-näppäin: siirry saman viikon viimeiseen päivään, ' + 'PAGE DOWN -näppäin: siirry edelliseen kuukauteen, ' + 'SHIFT + PAGE DOWN -näppäin: siirry edelliseen vuoteen, ' + 'PAGE UP -näppäin: siirry seuraavaan kuukauteen, ' + 'SHIFT + PAGE UP -näppäin: siirry seuraavaan vuoteen, ' + 'ENTER: valitse kohdistettu päivä ja sulje kalenteri, ' + 'SPACE: valitse kohdistettu päivä, kalenteri pysyy auki, ' + 'ESC: sulje kalenteri',

@@ -123,3 +123,3 @@ buttonLabelChoose: 'Valitse päivämäärä',

dateFormatOptions: ['dd.mm.åååå', 'dd-mm-åååå', 'dd/mm/åååå'],
generalDateFieldError: 'Datumformatet {0} du angav är ogiltigt. Ange datumet i något av följande format: ',
generalDateFieldError: 'Datumformatet "{0}" du angav är ogiltigt. Ange datumet i något av följande format: ',
keyboardNavInstructions: 'Du kan bläddra igenom kalenderinnehållet med följande tangenter:' + 'TAB-tangent: Flytta fokus mellan piltangenter, måldatum samt OK och Avbryt på skärmen, ' + 'vänsterpil: gå till föregående dag, ' + 'högerpil: Gå till nästa dag, ' + 'uppåtpil: gå till samma veckodag förra veckan, ' + 'nedåtpil: gå till samma veckodag nästa vecka, ' + 'HOME: gå till den första dagen i samma vecka, ' + 'END: gå till den sista dagen i samma vecka, ' + 'PAGE DOWN: gå till föregående månad ,' + 'SHIFT + PAGE DOWN: gå till föregående år, ' + 'PAGE UP: gå till nästa månad, ' + 'SHIFT + PAGE UP: gå till nästa år, ' + 'ENTER: välj den inriktade dagen och stäng kalendern, ' + 'SPACE: välj en inriktad dag, kalendern förblir öppen, ' + 'ESC: stäng kalendern',

@@ -144,3 +144,3 @@ buttonLabelChoose: 'Välj ett datum',

dateFormatOptions: ['dd.mm.yyyy', 'dd-mm-yyyy', 'dd/mm/yyyy'],
generalDateFieldError: 'Entered date format {0} is invalid. Date format options are: ',
generalDateFieldError: 'Entered date format "{0}" is invalid. Date format options are: ',
keyboardNavInstructions: 'You can navigate through the date picker contents with the following keys: ' + 'TAB: Move focus between the arrow buttons, the targeted date, and the OK and Cancel buttons, ' + 'left arrow: go to the previous day, ' + 'right arrow: Go to the next day, ' + 'up arrow: go to the same day of the week, ' + 'down arrow: go to the same day of the week next week, ' + 'HOME key: go to the first day of the same week, ' + 'END key: go to the last day of the same week, ' + 'PAGE DOWN key: go to the previous month, ' + 'SHIFT + PAGE DOWN key: go to the previous year, ' + 'PAGE UP key: go to the next month, ' + 'SHIFT + PAGE UP key: go to the next year, ' + 'ENTER: select the focused day and close the date picker, ' + 'SPACE: select the focused day, date picker will remain open, ' + 'ESC: close date picker',

@@ -165,11 +165,2 @@ buttonLabelChoose: 'Choose date',

usedLanguage: String,
dayOfMonth: {
type: Object
},
months: {
type: Object
},
monthsData: {
type: Object
},
localizationFi: {

@@ -943,10 +934,13 @@ type: Object

var _hoisted_26 = {
class: "table-head"
};
var _hoisted_27 = {
class: "datepicker-table-row"
};
var _hoisted_27 = ["abbr"];
var _hoisted_28 = ["onClick", "data-date", "aria-selected", "onKeydown"];
var _hoisted_29 = {
var _hoisted_28 = ["abbr"];
var _hoisted_29 = ["onClick", "data-date", "aria-selected", "onKeydown"];
var _hoisted_30 = {
class: "buttons"
};
var _hoisted_30 = ["id"];
var _hoisted_31 = ["id"];
function render(_ctx, _cache, $props, $setup, $data, $options) {

@@ -1069,3 +1063,3 @@ return vue.openBlock(), vue.createElementBlock("div", {

"aria-labelledby": 'datepickerHeader-' + _ctx.uniqueString
}, [vue.createElementVNode("thead", null, [vue.createElementVNode("tr", _hoisted_26, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.daysShort, function (day, i) {
}, [vue.createElementVNode("thead", _hoisted_26, [vue.createElementVNode("tr", _hoisted_27, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.daysShort, function (day, i) {
return vue.openBlock(), vue.createElementBlock("th", {

@@ -1075,3 +1069,3 @@ scope: "col",

abbr: _ctx.localizationData.dayNames[i]
}, vue.toDisplayString(day), 9, _hoisted_27);
}, vue.toDisplayString(day), 9, _hoisted_28);
}), 128))])]), vue.createElementVNode("tbody", null, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.daysVisibleCurrentMonth, function (week, index) {

@@ -1119,5 +1113,5 @@ return vue.openBlock(), vue.createElementBlock("tr", {

}, ["page-up"])]
}, vue.toDisplayString(dayItem.day), 43, _hoisted_28);
}, vue.toDisplayString(dayItem.day), 43, _hoisted_29);
}), 128))]);
}), 128))])], 8, _hoisted_25)]), vue.createElementVNode("div", _hoisted_29, [vue.createElementVNode("button", {
}), 128))])], 8, _hoisted_25)]), vue.createElementVNode("div", _hoisted_30, [vue.createElementVNode("button", {
class: "close-calendar-modal",

@@ -1141,3 +1135,3 @@ onClick: _cache[20] || (_cache[20] = function ($event) {

}, ["tab"]))]
}, vue.toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_30)])], 8, _hoisted_14)])) : vue.createCommentVNode("", true)], 8, _hoisted_1);
}, vue.toDisplayString(_ctx.localizationData.selectFocusedButtonLabel), 41, _hoisted_31)])], 8, _hoisted_14)])) : vue.createCommentVNode("", true)], 8, _hoisted_1);
}function styleInject(css, ref) {

@@ -1168,5 +1162,5 @@ if ( ref === void 0 ) ref = {};

}
}var css_248z = "\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 input.date-field[data-v-2a02d1bf] {\r\n max-width: 130px;\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-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-2a02d1bf] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-2a02d1bf] {\r\n outline: 3px solid #BB1331;\r\n outline-offset: -3px;\n}\n.date-field[data-v-2a02d1bf] {\r\n color: #222222;\n}\n[data-v-2a02d1bf]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-2a02d1bf] {\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-2a02d1bf] {\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}\nul.error-list[data-v-2a02d1bf] {\r\n color: #BB1331;\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-2a02d1bf]:focus {\r\n outline: 3px solid #d71ef7;\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\n.calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf] {\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-2a02d1bf] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-2a02d1bf] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-2a02d1bf] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-2a02d1bf] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\n.datepicker-header-year[data-v-2a02d1bf] {\r\n display: inline-block;\r\n color: #222222;\n}\nthead > tr th[data-v-2a02d1bf] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-2a02d1bf] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-2a02d1bf] {\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-2a02d1bf] {\r\n display: table-row;\r\n text-align: center;\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-2a02d1bf] {\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-2a02d1bf]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-2a02d1bf] {\r\n color: #595959;\n}\n.datepicker-day[data-v-2a02d1bf]:hover {\r\n background-color: #e8e7e7;\n}\n.datepicker-day[data-v-2a02d1bf]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid #f44a87;\n}\ntd.datepicker-day[data-v-2a02d1bf]:focus {\r\n padding: 3px;\r\n border: 2px solid #3182a0;\r\n outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-2a02d1bf] {\r\n background-color: #ffd55f;\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-2a02d1bf] {\r\n padding: 3px;\r\n border: 2px dotted #3182a0;\r\n outline: 0;\n}\n.buttons[data-v-2a02d1bf] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-2a02d1bf],\r\nbutton.close-calendar-modal[data-v-2a02d1bf] {\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-2a02d1bf]:hover {\r\n background-color: #5c73bc;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf]:hover {\r\n background-color: #677983;\n}\nbutton.close-calendar-modal[data-v-2a02d1bf] {\r\n background-color: #272525;\n}\n.backdrop[data-v-2a02d1bf] {\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 */\n@media (min-width: 1281px) {\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 = "\n.vue-accessible-date-field[data-v-21954a86] {\r\n --main-color: #222222;\r\n\r\n /* date field section (text fields) */\r\n --date-field-section-outline-color: #d71ef7;\r\n --calendar-icon-focus-color: #d71ef7;\r\n --open-calendar-button-background-color: #ffffff;\r\n --error-text-color: #BB1331;\r\n\r\n /* date picker (modal) section */\r\n --day-hover-background-color: #e8e7e7;\r\n --day-not-disabled-hover-border-color: #f44a87;\r\n --day-focus-border: #3182a0;\r\n --day-tabindex-0-background-color: #ffd55f;\r\n --day-selected-border-color: #3182a0;\r\n --chooce-selected-button-background-color: #39306b;\r\n --chooce-selected-button-background-color-hover: #5c73bc;\r\n --close-modal-button-background-color: #272525;\r\n --close-modal-button-hover-background-color: #677983;\r\n\r\n --modal-backdrop-z-index: 1000;\r\n --date-picker-z-index: 1001;\n}\n.date-field-section input.date-field[data-v-21954a86] {\r\n max-width: 130px;\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-21954a86]:focus {\r\n outline: 3px solid var(--date-field-section-outline-color);\r\n outline-offset: -3px;\n}\n.date-field-inline[data-v-21954a86] {\r\n white-space: nowrap;\n}\n.date-field-inline input.error[data-v-21954a86] {\r\n outline: 3px solid var(--error-text-color);\r\n outline-offset: -3px;\n}\n.date-field[data-v-21954a86] {\r\n color: var(--main-color);\n}\n[data-v-21954a86]::placeholder {\r\n color: #767676;\r\n opacity: 1;\n}\n.date-field-section .field-description[data-v-21954a86] {\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-21954a86] {\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}\nul.error-list[data-v-21954a86] {\r\n color: var(--error-text-color);\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\n}\nbutton[data-v-21954a86]:focus {\r\n outline: 3px solid var(--calendar-icon-focus-color);\r\n outline-offset: -3px;\n}\r\n\r\n/* datepicker-modal */\ndiv.calendar-modal[data-v-21954a86] {\r\n position: absolute;\r\n background-color: #ffffff;\r\n border: 1px solid #000000;\r\n max-width: 450px;\r\n z-index: var(--date-picker-z-index);\n}\n.open-calendar-btn[data-v-21954a86] {\r\n height: 30px;\r\n background-color: var(--open-calendar-button-background-color);\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-21954a86] {\r\n margin-top: 1px;\n}\n.open-calendar-icon[data-v-21954a86] {\r\n height: 85%;\n}\r\n\r\n/* datepicker header-line */\n.datepicker-header-line[data-v-21954a86] { \r\n display: inline-flex;\r\n width: 100%;\r\n min-width: 250px;\n}\n.datepicker-header[data-v-21954a86] {\r\n font-size: 1.5rem;\r\n white-space: nowrap;\r\n width: 180px;\r\n text-align: center;\r\n margin-top: 15px;\r\n margin-bottom: 10px;\n}\n.datepicker-header-month[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\n.datepicker-header-year[data-v-21954a86] {\r\n display: inline-block;\r\n color: var(--main-color);\n}\nthead.table-head[data-v-21954a86] {\r\n border-collapse: separate;\n}\nthead.table-head > tr th[data-v-21954a86] {\r\n width: 20px;\r\n height: 35px;\n}\n.arrow-button[data-v-21954a86] {\r\n min-width: 30px;\r\n background-color: #ffffff;\r\n border: none;\r\n font-size: 1.5rem;\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-21954a86] {\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-21954a86] {\r\n display: table-row;\r\n text-align: center;\n}\n.datepicker-table-row th[data-v-21954a86] {\r\n color: var(--main-color);\n}\r\n\r\n/* suurenna */\n.datepicker-day[data-v-21954a86] {\r\n width: 24px;\r\n color: var(--main-color);\r\n padding: 5px;\r\n margin: 2px;\r\n border-radius: 3px;\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day) {\r\n font-weight: 600;\n}\n.disabled-day[data-v-21954a86] {\r\n color: #595959;\n}\n.datepicker-day[data-v-21954a86]:hover {\r\n background-color: var(--day-hover-background-color);\n}\n.datepicker-day[data-v-21954a86]:not(.disabled-day):hover {\r\n padding: 3px;\r\n border: 2px solid var(--day-not-disabled-hover-border-color);\n}\ntd.datepicker-day[data-v-21954a86]:focus {\r\n padding: 3px;\r\n border: 2px solid var(--day-focus-border);\r\n outline: 0;\n}\n.datepicker-day[tabindex=\"0\"][data-v-21954a86] {\r\n background-color: var(--day-tabindex-0-background-color);\r\n color: #000000;\n}\n.datepicker-day.selected-date[data-v-21954a86] {\r\n padding: 3px;\r\n border: 2px dotted var(--day-selected-border-color);\r\n outline: 0;\n}\n.buttons[data-v-21954a86] {\r\n float: right;\r\n margin-right: 10px;\n}\nbutton.choose-selected-date[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--chooce-selected-button-background-color);\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-21954a86]:hover {\r\n background-color: var(--chooce-selected-button-background-color-hover);\n}\nbutton.close-calendar-modal[data-v-21954a86] {\r\n border: none;\r\n border-radius: 3px;\r\n background-color: var(--close-modal-button-background-color);\r\n color: #ffffff;\r\n margin-bottom: 6px;\r\n margin-right: 10px;\r\n padding: 8px;\n}\nbutton.close-calendar-modal[data-v-21954a86]:hover {\r\n background-color: var(--close-modal-button-hover-background-color);\n}\ndiv.backdrop[data-v-21954a86] {\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%;\r\n z-index: var(--modal-backdrop-z-index);\n}\r\n\r\n/* XXL */\n@media (min-width: 1281px) {\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-2a02d1bf";// Import vue component
script.__scopeId = "data-v-21954a86";// Import vue component

@@ -1173,0 +1167,0 @@ // Default export is installable instance of component.

2

package.json
{
"name": "vue-accessible-date-field",
"version": "0.3.5",
"version": "0.3.6",
"description": "An open source Vue date field component designed to be as accessible as possible.",

@@ -5,0 +5,0 @@ "author": "Laladdin",

29

README.md

@@ -26,1 +26,30 @@ # vue-accessible-date-field

The W3C documents and the [Date Picker Dialog Example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) earlier found on their website have been used to help develop this component. In addition, [Duet Date Picker](https://www.npmjs.com/package/@duetds/date-picker) has influenced in the implementation of localization. The component is not ready yet, but many functionalities are already working.
## Styling
The component has some CSS custom variables that are possible to override by adding the following class to project's global stylesheet and editing it the way that suit's your needs.
```css
.vue-accessible-date-field {
--main-color: #222222;
/* date field section (text fields) */
--date-field-section-outline-color: #d71ef7;
--calendar-icon-focus-color: #d71ef7;
--open-calendar-button-background-color: #ffffff;
--error-text-color: #BB1331;
/* date picker (modal) section */
--day-hover-background-color: #e8e7e7;
--day-not-disabled-hover-border-color: #f44a87;
--day-focus-border: #3182a0;
--day-tabindex-0-background-color: #ffd55f;
--day-selected-border-color: #3182a0;
--chooce-selected-button-background-color: #39306b;
--chooce-selected-button-background-color-hover: #5c73bc;
--close-modal-button-background-color: #272525;
--close-modal-button-hover-background-color: #677983;
--modal-backdrop-z-index: 1000;
--date-picker-z-index: 1001;
}
```
You can also override other CSS styles as you like. Please keep accessibility in mind if changing the values.
src/vue-accessible-date-field.vue

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc