@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
|
@@ -51,7 +51,7 @@ import './p-b0e88537.js';
|
|
|
51
51
|
import './p-cdcaf0eb.js';
|
|
52
52
|
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
|
|
53
53
|
import { d as detectClickOutside } from './p-430607cb.js';
|
|
54
|
-
import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-
|
|
54
|
+
import { i as isBefore, a as isAfter, d as defineCustomElement$f } from './p-6c940092.js';
|
|
55
55
|
import { d as defineCustomElement$e } from './p-936d6741.js';
|
|
56
56
|
import { d as defineCustomElement$d } from './p-a27dc6a3.js';
|
|
57
57
|
import { d as defineCustomElement$c } from './p-143dffff.js';
|
|
@@ -2438,9 +2438,9 @@ const CalendarDatepicker = /*@__PURE__*/ proxyCustomElement(class CalendarDatepi
|
|
|
2438
2438
|
this.afOnDateChange.emit(this.afSelectedDates);
|
|
2439
2439
|
}
|
|
2440
2440
|
/*
|
|
2441
|
-
|
|
2441
|
+
|
|
2442
2442
|
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.
|
|
2443
|
-
|
|
2443
|
+
|
|
2444
2444
|
*/
|
|
2445
2445
|
parseDateString(s) {
|
|
2446
2446
|
const raw = s.trim().replace(/[./]/g, '-');
|
|
@@ -2547,7 +2547,7 @@ const CalendarDatepicker = /*@__PURE__*/ proxyCustomElement(class CalendarDatepi
|
|
|
2547
2547
|
return this.afSelectedDates;
|
|
2548
2548
|
}
|
|
2549
2549
|
render() {
|
|
2550
|
-
return (h(Host, { key: '
|
|
2550
|
+
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()
|
|
2551
2551
|
? FormInputValidation.ERROR
|
|
2552
2552
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
2553
2553
|
evt.stopImmediatePropagation();
|
|
@@ -2556,6 +2556,7 @@ const CalendarDatepicker = /*@__PURE__*/ proxyCustomElement(class CalendarDatepi
|
|
|
2556
2556
|
evt.stopImmediatePropagation();
|
|
2557
2557
|
this.afOnDateChangeRawText.emit(this.inputValue);
|
|
2558
2558
|
}, onKeyDown: (e) => {
|
|
2559
|
+
// Focus trap: Catch backwards tab from input field and direct it to date button.
|
|
2559
2560
|
if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
|
|
2560
2561
|
return;
|
|
2561
2562
|
if (e.target.tagName !== 'INPUT')
|
|
@@ -2563,21 +2564,22 @@ const CalendarDatepicker = /*@__PURE__*/ proxyCustomElement(class CalendarDatepi
|
|
|
2563
2564
|
e.preventDefault();
|
|
2564
2565
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
2565
2566
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
2566
|
-
} }, h("button", { key: '
|
|
2567
|
+
} }, h("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
2567
2568
|
? this.afCloseCalendarAriaLabel
|
|
2568
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '
|
|
2569
|
+
: 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
|
|
2569
2570
|
? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
2570
|
-
: ''), h("digi-calendar", { key: '
|
|
2571
|
+
: ''), 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) => {
|
|
2571
2572
|
evt.stopImmediatePropagation();
|
|
2572
2573
|
this.parseCalendar(evt);
|
|
2573
2574
|
}, onKeyDown: (e) => {
|
|
2575
|
+
// Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
|
|
2574
2576
|
if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
|
|
2575
2577
|
return;
|
|
2576
2578
|
if (!e.target.classList.contains('digi-calendar__date'))
|
|
2577
2579
|
return;
|
|
2578
2580
|
e.preventDefault();
|
|
2579
2581
|
this.focusOnCalendarInput();
|
|
2580
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '
|
|
2582
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
|
|
2581
2583
|
? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
2582
2584
|
: '')))));
|
|
2583
2585
|
}
|
|
@@ -109,6 +109,9 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
|
|
|
109
109
|
afOpenCalendarToChangeHandler() {
|
|
110
110
|
this.determineFocusedDate();
|
|
111
111
|
}
|
|
112
|
+
afShowWeekNumberChangeHandler() {
|
|
113
|
+
this.drawCalendar(this.focusedDate);
|
|
114
|
+
}
|
|
112
115
|
afSelectedDateChangeHandler() {
|
|
113
116
|
this.afSelectedDates = isValid(this.afSelectedDate)
|
|
114
117
|
? [this.afSelectedDate]
|
|
@@ -463,18 +466,18 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
|
|
|
463
466
|
};
|
|
464
467
|
}
|
|
465
468
|
render() {
|
|
466
|
-
return (h("div", { key: '
|
|
469
|
+
return (h("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
|
|
467
470
|
'digi-calendar': true,
|
|
468
471
|
'digi-calendar--hide': !this.afActive
|
|
469
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '
|
|
472
|
+
}, 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) => {
|
|
470
473
|
this.selectMonth(evt);
|
|
471
474
|
} }, _t.calendar.months.map((month, index) => {
|
|
472
475
|
return h("option", { value: index }, month);
|
|
473
|
-
})), h("digi-form-select", { key: '
|
|
476
|
+
})), h("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
474
477
|
this.selectYear(evt);
|
|
475
|
-
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '
|
|
476
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '
|
|
477
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: '
|
|
478
|
+
} }, 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) +
|
|
479
|
+
', ' + _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) +
|
|
480
|
+
', ' + _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) => {
|
|
478
481
|
return (h("tr", null, week.map((day, i) => {
|
|
479
482
|
if (this.afShowWeekNumber && i === 0) {
|
|
480
483
|
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));
|
|
@@ -489,11 +492,12 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
|
|
|
489
492
|
: null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
490
493
|
}
|
|
491
494
|
})));
|
|
492
|
-
})))), h("slot", { key: '
|
|
495
|
+
})))), h("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
|
|
493
496
|
}
|
|
494
497
|
static get watchers() { return {
|
|
495
498
|
"focusedDate": ["focusedDateChanged"],
|
|
496
499
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
500
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
497
501
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
498
502
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
499
503
|
}; }
|
|
@@ -516,6 +520,7 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
|
|
|
516
520
|
}, [[4, "focusin", "focusoutHandler"], [8, "click", "clickHandler"]], {
|
|
517
521
|
"focusedDate": ["focusedDateChanged"],
|
|
518
522
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
523
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
519
524
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
520
525
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
521
526
|
}]);
|