@designsystem-se/af 35.2.1-beta.3 → 35.2.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/digi-calendar-datepicker.js +10 -8
- package/components/digi-calendar.js +1 -1
- package/components/{p-d0470b9a.js → p-6c940092.js} +12 -7
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-button_16.cjs.entry.js +20 -14
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/_calendar/calendar/calendar.js +13 -7
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js +18 -10
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.types.js +1 -0
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-fdf7f586.entry.js +1 -0
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-button_16.entry.js +20 -14
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/_calendar/calendar/calendar.d.ts +1 -0
- package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.d.ts +3 -5
- package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.types.d.ts +4 -0
- package/dist/types/components.d.ts +4 -8
- package/hydrate/index.js +20 -14
- package/hydrate/index.mjs +20 -14
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-f075ab5c.entry.js +0 -1
|
@@ -2384,6 +2384,9 @@ const Calendar = class {
|
|
|
2384
2384
|
afOpenCalendarToChangeHandler() {
|
|
2385
2385
|
this.determineFocusedDate();
|
|
2386
2386
|
}
|
|
2387
|
+
afShowWeekNumberChangeHandler() {
|
|
2388
|
+
this.drawCalendar(this.focusedDate);
|
|
2389
|
+
}
|
|
2387
2390
|
afSelectedDateChangeHandler() {
|
|
2388
2391
|
this.afSelectedDates = isValid(this.afSelectedDate)
|
|
2389
2392
|
? [this.afSelectedDate]
|
|
@@ -2738,18 +2741,18 @@ const Calendar = class {
|
|
|
2738
2741
|
};
|
|
2739
2742
|
}
|
|
2740
2743
|
render() {
|
|
2741
|
-
return (h("div", { key: '
|
|
2744
|
+
return (h("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
|
|
2742
2745
|
'digi-calendar': true,
|
|
2743
2746
|
'digi-calendar--hide': !this.afActive
|
|
2744
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '
|
|
2747
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'd9667abd52111f456358d9e6a9adafca0d4ee1a0', class: "digi-calendar__header" }, h("div", { key: '98602c8c03ae35a5c2eca0f245b4d16a894fed23', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '5027e489a562e88cc3887e1899fa05c95d80c724', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
2745
2748
|
this.selectMonth(evt);
|
|
2746
2749
|
} }, _t.calendar.months.map((month, index) => {
|
|
2747
2750
|
return h("option", { value: index }, month);
|
|
2748
|
-
})), h("digi-form-select", { key: '
|
|
2751
|
+
})), h("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
2749
2752
|
this.selectYear(evt);
|
|
2750
|
-
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '
|
|
2751
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '
|
|
2752
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: '
|
|
2753
|
+
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '2a29c58612f574163fa45dbbcc488deb797827ff', class: "digi-calendar__header" }, h("div", { key: '6dfda3eeac53ef081aa7b4853c5a79b7b1cac390', class: "digi-calendar__header--month-step" }, h("button", { key: 'a5455fadeb481f8fe1db5094023c84c5c7392e6c', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
2754
|
+
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '116d16bbd8efc4c67c71fc1faf910a9ac9e628d6', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'a187702c9817ad145dbbfff26a708cf6528ac619', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '953f6e9d74ab935796b3c45e056c2b96242d1fae', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: 'e3b41587612b97e9a7a370c1c5d3316a83d3adde', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
2755
|
+
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: 'ab0f3e5fc595b0116e1c09ab511788ce312ece42', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '38816a1cba510a4d86585abb602f0616887eb4c8', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '75b0c5dc7c567e7129064231739d96454c20fa23', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: '1bc547fce844da11ca0c60cf6349316619b1830f', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'bc0c43868dfd448df74d6bba3e1037cffabf9b34' }, h("tr", { key: 'f90539a88f628bf9e4b2fe9ab057f0010571f71d', role: "row" }, this.afShowWeekNumber && (h("th", { key: '2f9eeddc560473fd2da253db45e516e68f80b865', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: '249e8d2f8d0426d78371d07f8216efb7a3313fb8', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
2753
2756
|
return (h("tr", null, week.map((day, i) => {
|
|
2754
2757
|
if (this.afShowWeekNumber && i === 0) {
|
|
2755
2758
|
return (h("th", { role: "rowheader", "aria-label": _t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
|
|
@@ -2764,11 +2767,12 @@ const Calendar = class {
|
|
|
2764
2767
|
: null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
2765
2768
|
}
|
|
2766
2769
|
})));
|
|
2767
|
-
})))), h("slot", { key: '
|
|
2770
|
+
})))), h("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
|
|
2768
2771
|
}
|
|
2769
2772
|
static get watchers() { return {
|
|
2770
2773
|
"focusedDate": ["focusedDateChanged"],
|
|
2771
2774
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
2775
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
2772
2776
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
2773
2777
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
2774
2778
|
}; }
|
|
@@ -3023,9 +3027,9 @@ const CalendarDatepicker = class {
|
|
|
3023
3027
|
this.afOnDateChange.emit(this.afSelectedDates);
|
|
3024
3028
|
}
|
|
3025
3029
|
/*
|
|
3026
|
-
|
|
3030
|
+
|
|
3027
3031
|
Metoden överskrider JavaScripts inbyggda "isValid"-funktion, då den tillåter att ex., "1" är rätt format medans ex., "13" är fel format vid YYYY-MM-DD krav på inmatat format.
|
|
3028
|
-
|
|
3032
|
+
|
|
3029
3033
|
*/
|
|
3030
3034
|
parseDateString(s) {
|
|
3031
3035
|
const raw = s.trim().replace(/[./]/g, '-');
|
|
@@ -3132,7 +3136,7 @@ const CalendarDatepicker = class {
|
|
|
3132
3136
|
return this.afSelectedDates;
|
|
3133
3137
|
}
|
|
3134
3138
|
render() {
|
|
3135
|
-
return (h(Host, { key: '
|
|
3139
|
+
return (h(Host, { key: 'ba1d1a44271b36303ebe317da2c6ad668784de5f' }, h("div", { key: '4266f5796fb351b7c907b84bc827857384d4f397', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '940434479a0786968d5af864e4225b2f70879fc0', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: '49a827f5c8f6bbe553970414964953e50e57a611', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
|
|
3136
3140
|
? FormInputValidation.ERROR
|
|
3137
3141
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
3138
3142
|
evt.stopImmediatePropagation();
|
|
@@ -3141,6 +3145,7 @@ const CalendarDatepicker = class {
|
|
|
3141
3145
|
evt.stopImmediatePropagation();
|
|
3142
3146
|
this.afOnDateChangeRawText.emit(this.inputValue);
|
|
3143
3147
|
}, onKeyDown: (e) => {
|
|
3148
|
+
// Focus trap: Catch backwards tab from input field and direct it to date button.
|
|
3144
3149
|
if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
|
|
3145
3150
|
return;
|
|
3146
3151
|
if (e.target.tagName !== 'INPUT')
|
|
@@ -3148,21 +3153,22 @@ const CalendarDatepicker = class {
|
|
|
3148
3153
|
e.preventDefault();
|
|
3149
3154
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
3150
3155
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
3151
|
-
} }, h("button", { key: '
|
|
3156
|
+
} }, h("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
3152
3157
|
? this.afCloseCalendarAriaLabel
|
|
3153
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '
|
|
3158
|
+
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '22691ce73d94985a39c1a40b3c286c653ac4d8f3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '69fa90455ee54bade344b0564dd9be3ba78a772a', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '4c3a52d1b9d44d8823132f6aec6407af70185888', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
|
|
3154
3159
|
? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
3155
|
-
: ''), h("digi-calendar", { key: '
|
|
3160
|
+
: ''), h("digi-calendar", { key: '3e13361bec51ac3bda8d3c5d87834fe2366693c9', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
|
|
3156
3161
|
evt.stopImmediatePropagation();
|
|
3157
3162
|
this.parseCalendar(evt);
|
|
3158
3163
|
}, onKeyDown: (e) => {
|
|
3164
|
+
// Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
|
|
3159
3165
|
if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
|
|
3160
3166
|
return;
|
|
3161
3167
|
if (!e.target.classList.contains('digi-calendar__date'))
|
|
3162
3168
|
return;
|
|
3163
3169
|
e.preventDefault();
|
|
3164
3170
|
this.focusOnCalendarInput();
|
|
3165
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '
|
|
3171
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
|
|
3166
3172
|
? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
3167
3173
|
: '')))));
|
|
3168
3174
|
}
|