@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
|
@@ -2388,6 +2388,9 @@ const Calendar = class {
|
|
|
2388
2388
|
afOpenCalendarToChangeHandler() {
|
|
2389
2389
|
this.determineFocusedDate();
|
|
2390
2390
|
}
|
|
2391
|
+
afShowWeekNumberChangeHandler() {
|
|
2392
|
+
this.drawCalendar(this.focusedDate);
|
|
2393
|
+
}
|
|
2391
2394
|
afSelectedDateChangeHandler() {
|
|
2392
2395
|
this.afSelectedDates = index$1.isValid(this.afSelectedDate)
|
|
2393
2396
|
? [this.afSelectedDate]
|
|
@@ -2742,18 +2745,18 @@ const Calendar = class {
|
|
|
2742
2745
|
};
|
|
2743
2746
|
}
|
|
2744
2747
|
render() {
|
|
2745
|
-
return (index.h("div", { key: '
|
|
2748
|
+
return (index.h("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
|
|
2746
2749
|
'digi-calendar': true,
|
|
2747
2750
|
'digi-calendar--hide': !this.afActive
|
|
2748
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (index.h("div", { key: '
|
|
2751
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (index.h("div", { key: 'd9667abd52111f456358d9e6a9adafca0d4ee1a0', class: "digi-calendar__header" }, index.h("div", { key: '98602c8c03ae35a5c2eca0f245b4d16a894fed23', class: "digi-calendar__header--year-select" }, index.h("digi-form-select", { key: '5027e489a562e88cc3887e1899fa05c95d80c724', afLabel: text._t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
2749
2752
|
this.selectMonth(evt);
|
|
2750
2753
|
} }, text._t.calendar.months.map((month, index$1) => {
|
|
2751
2754
|
return index.h("option", { value: index$1 }, month);
|
|
2752
|
-
})), index.h("digi-form-select", { key: '
|
|
2755
|
+
})), index.h("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: text._t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
2753
2756
|
this.selectYear(evt);
|
|
2754
|
-
} }, this.allSelectableYears().map((year) => (index.h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (index.h("div", { key: '
|
|
2755
|
-
', ' + text._t.calendar.previousMonth, onClick: () => this.subtractMonth() }, index.h("digi-icon-chevron-left", { key: '
|
|
2756
|
-
', ' + text._t.calendar.nextMonth, onClick: () => this.addMonth() }, index.h("span", { key: '
|
|
2757
|
+
} }, this.allSelectableYears().map((year) => (index.h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (index.h("div", { key: '2a29c58612f574163fa45dbbcc488deb797827ff', class: "digi-calendar__header" }, index.h("div", { key: '6dfda3eeac53ef081aa7b4853c5a79b7b1cac390', class: "digi-calendar__header--month-step" }, index.h("button", { key: 'a5455fadeb481f8fe1db5094023c84c5c7392e6c', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
2758
|
+
', ' + text._t.calendar.previousMonth, onClick: () => this.subtractMonth() }, index.h("digi-icon-chevron-left", { key: '116d16bbd8efc4c67c71fc1faf910a9ac9e628d6', slot: "icon", "aria-hidden": "true" }), index.h("span", { key: 'a187702c9817ad145dbbfff26a708cf6528ac619', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), index.h("div", { key: '953f6e9d74ab935796b3c45e056c2b96242d1fae', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), index.h("button", { key: 'e3b41587612b97e9a7a370c1c5d3316a83d3adde', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
2759
|
+
', ' + text._t.calendar.nextMonth, onClick: () => this.addMonth() }, index.h("span", { key: 'ab0f3e5fc595b0116e1c09ab511788ce312ece42', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), index.h("digi-icon-chevron-right", { key: '38816a1cba510a4d86585abb602f0616887eb4c8', slot: "icon", "aria-hidden": "true" }))))), index.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) }, index.h("table", { key: '1bc547fce844da11ca0c60cf6349316619b1830f', role: "grid", class: "digi-calendar__table" }, index.h("thead", { key: 'bc0c43868dfd448df74d6bba3e1037cffabf9b34' }, index.h("tr", { key: 'f90539a88f628bf9e4b2fe9ab057f0010571f71d', role: "row" }, this.afShowWeekNumber && (index.h("th", { key: '2f9eeddc560473fd2da253db45e516e68f80b865', role: "columnheader", abbr: text._t.calendar.week, class: "digi-calendar__table-header-week" }, text._t.calendar.week.toLowerCase())), Object.keys(text._t.calendar.weekdays).map((day) => (index.h("th", { role: "columnheader", "aria-label": text._t.calendar.weekdays[day], abbr: text._t.calendar.weekdays[day], class: "digi-calendar__table-header" }, text._t.calendar.weekdays_short[day].toLowerCase()))))), index.h("tbody", { key: '249e8d2f8d0426d78371d07f8216efb7a3313fb8', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
2757
2760
|
return (index.h("tr", null, week.map((day, i) => {
|
|
2758
2761
|
if (this.afShowWeekNumber && i === 0) {
|
|
2759
2762
|
return (index.h("th", { role: "rowheader", "aria-label": text._t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
|
|
@@ -2768,11 +2771,12 @@ const Calendar = class {
|
|
|
2768
2771
|
: null }, index.h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
2769
2772
|
}
|
|
2770
2773
|
})));
|
|
2771
|
-
})))), index.h("slot", { key: '
|
|
2774
|
+
})))), index.h("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
|
|
2772
2775
|
}
|
|
2773
2776
|
static get watchers() { return {
|
|
2774
2777
|
"focusedDate": ["focusedDateChanged"],
|
|
2775
2778
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
2779
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
2776
2780
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
2777
2781
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
2778
2782
|
}; }
|
|
@@ -3027,9 +3031,9 @@ const CalendarDatepicker = class {
|
|
|
3027
3031
|
this.afOnDateChange.emit(this.afSelectedDates);
|
|
3028
3032
|
}
|
|
3029
3033
|
/*
|
|
3030
|
-
|
|
3034
|
+
|
|
3031
3035
|
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.
|
|
3032
|
-
|
|
3036
|
+
|
|
3033
3037
|
*/
|
|
3034
3038
|
parseDateString(s) {
|
|
3035
3039
|
const raw = s.trim().replace(/[./]/g, '-');
|
|
@@ -3136,7 +3140,7 @@ const CalendarDatepicker = class {
|
|
|
3136
3140
|
return this.afSelectedDates;
|
|
3137
3141
|
}
|
|
3138
3142
|
render() {
|
|
3139
|
-
return (index.h(index.Host, { key: '
|
|
3143
|
+
return (index.h(index.Host, { key: 'ba1d1a44271b36303ebe317da2c6ad668784de5f' }, index.h("div", { key: '4266f5796fb351b7c907b84bc827857384d4f397', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, index.h("div", { key: '940434479a0786968d5af864e4225b2f70879fc0', class: "digi-calendar-datepicker__input-field" }, index.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()
|
|
3140
3144
|
? typographyVariation_enum.FormInputValidation.ERROR
|
|
3141
3145
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
3142
3146
|
evt.stopImmediatePropagation();
|
|
@@ -3145,6 +3149,7 @@ const CalendarDatepicker = class {
|
|
|
3145
3149
|
evt.stopImmediatePropagation();
|
|
3146
3150
|
this.afOnDateChangeRawText.emit(this.inputValue);
|
|
3147
3151
|
}, onKeyDown: (e) => {
|
|
3152
|
+
// Focus trap: Catch backwards tab from input field and direct it to date button.
|
|
3148
3153
|
if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
|
|
3149
3154
|
return;
|
|
3150
3155
|
if (e.target.tagName !== 'INPUT')
|
|
@@ -3152,21 +3157,22 @@ const CalendarDatepicker = class {
|
|
|
3152
3157
|
e.preventDefault();
|
|
3153
3158
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
3154
3159
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
3155
|
-
} }, index.h("button", { key: '
|
|
3160
|
+
} }, index.h("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
3156
3161
|
? this.afCloseCalendarAriaLabel
|
|
3157
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, index.h("digi-icon-calendar-alt", { key: '
|
|
3162
|
+
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, index.h("digi-icon-calendar-alt", { key: '22691ce73d94985a39c1a40b3c286c653ac4d8f3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), index.h("div", { key: '69fa90455ee54bade344b0564dd9be3ba78a772a', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, index.h("p", { key: '4c3a52d1b9d44d8823132f6aec6407af70185888', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
|
|
3158
3163
|
? `${text._t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
3159
|
-
: ''), index.h("digi-calendar", { key: '
|
|
3164
|
+
: ''), index.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) => {
|
|
3160
3165
|
evt.stopImmediatePropagation();
|
|
3161
3166
|
this.parseCalendar(evt);
|
|
3162
3167
|
}, onKeyDown: (e) => {
|
|
3168
|
+
// Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
|
|
3163
3169
|
if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
|
|
3164
3170
|
return;
|
|
3165
3171
|
if (!e.target.classList.contains('digi-calendar__date'))
|
|
3166
3172
|
return;
|
|
3167
3173
|
e.preventDefault();
|
|
3168
3174
|
this.focusOnCalendarInput();
|
|
3169
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (index.h("div", { key: '
|
|
3175
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (index.h("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
|
|
3170
3176
|
? `${text._t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
3171
3177
|
: '')))));
|
|
3172
3178
|
}
|