@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
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { EventEmitter } from '../../../stencil-public-runtime';
|
|
2
2
|
import type { HTMLStencilElement } from '../../../stencil-public-runtime';
|
|
3
3
|
import { CalendarDatepickerValidation } from './calendar-datepicker-validation.enum';
|
|
4
|
+
import { ValidationChange } from './calendar-datepicker.types';
|
|
4
5
|
/**
|
|
5
6
|
* @swedishName Datumväljare
|
|
6
7
|
*/
|
|
@@ -144,10 +145,7 @@ export declare class CalendarDatepicker {
|
|
|
144
145
|
* Skickar resultatet när validering sker
|
|
145
146
|
* @en Emits the validation result
|
|
146
147
|
*/
|
|
147
|
-
afOnValidationChange: EventEmitter<
|
|
148
|
-
isValid: boolean;
|
|
149
|
-
validationText?: string;
|
|
150
|
-
}>;
|
|
148
|
+
afOnValidationChange: EventEmitter<ValidationChange>;
|
|
151
149
|
connectedCallback(): void;
|
|
152
150
|
disconnectedCallback(): void;
|
|
153
151
|
componentDidLoad(): void;
|
|
@@ -177,7 +175,7 @@ export declare class CalendarDatepicker {
|
|
|
177
175
|
dateWithoutTime(date: Date): Date;
|
|
178
176
|
hasBuiltInValidationError(): boolean;
|
|
179
177
|
hasCustomValidationError(): boolean;
|
|
180
|
-
getErrorText(): string;
|
|
178
|
+
getErrorText(): string | undefined;
|
|
181
179
|
get inputValue(): string;
|
|
182
180
|
datesToInputString(dates: Date[]): string;
|
|
183
181
|
private get getSelectedDates();
|
|
@@ -14,6 +14,7 @@ import { ButtonSize } from "./components/_button/button/button-size.enum";
|
|
|
14
14
|
import { ButtonVariation } from "./components/_button/button/button-variation.enum";
|
|
15
15
|
import { ButtonType } from "./components/_button/button/button-type.enum";
|
|
16
16
|
import { CalendarDatepickerValidation } from "./components/_calendar/calendar-datepicker/calendar-datepicker-validation.enum";
|
|
17
|
+
import { ValidationChange } from "./components/_calendar/calendar-datepicker/calendar-datepicker.types";
|
|
17
18
|
import { CalendarWeekViewHeadingLevel } from "./components/_calendar/week-view/calendar-week-view-heading-level.enum";
|
|
18
19
|
import { CodeVariation } from "./components/_code/code/code-variation.enum";
|
|
19
20
|
import { CodeLanguage } from "./components/_code/code/code-language.enum";
|
|
@@ -141,6 +142,7 @@ export { ButtonSize } from "./components/_button/button/button-size.enum";
|
|
|
141
142
|
export { ButtonVariation } from "./components/_button/button/button-variation.enum";
|
|
142
143
|
export { ButtonType } from "./components/_button/button/button-type.enum";
|
|
143
144
|
export { CalendarDatepickerValidation } from "./components/_calendar/calendar-datepicker/calendar-datepicker-validation.enum";
|
|
145
|
+
export { ValidationChange } from "./components/_calendar/calendar-datepicker/calendar-datepicker.types";
|
|
144
146
|
export { CalendarWeekViewHeadingLevel } from "./components/_calendar/week-view/calendar-week-view-heading-level.enum";
|
|
145
147
|
export { CodeVariation } from "./components/_code/code/code-variation.enum";
|
|
146
148
|
export { CodeLanguage } from "./components/_code/code/code-language.enum";
|
|
@@ -8600,10 +8602,7 @@ declare global {
|
|
|
8600
8602
|
interface HTMLDigiCalendarDatepickerElementEventMap {
|
|
8601
8603
|
"afOnDateChange": Date[];
|
|
8602
8604
|
"afOnDateChangeRawText": string;
|
|
8603
|
-
"afOnValidationChange":
|
|
8604
|
-
isValid: boolean;
|
|
8605
|
-
validationText?: string;
|
|
8606
|
-
};
|
|
8605
|
+
"afOnValidationChange": ValidationChange;
|
|
8607
8606
|
}
|
|
8608
8607
|
/**
|
|
8609
8608
|
* @swedishName Datumväljare
|
|
@@ -11950,10 +11949,7 @@ declare namespace LocalJSX {
|
|
|
11950
11949
|
* Skickar resultatet när validering sker
|
|
11951
11950
|
* @en Emits the validation result
|
|
11952
11951
|
*/
|
|
11953
|
-
"onAfOnValidationChange"?: (event: DigiCalendarDatepickerCustomEvent<
|
|
11954
|
-
isValid: boolean;
|
|
11955
|
-
validationText?: string;
|
|
11956
|
-
}>) => void;
|
|
11952
|
+
"onAfOnValidationChange"?: (event: DigiCalendarDatepickerCustomEvent<ValidationChange>) => void;
|
|
11957
11953
|
/**
|
|
11958
11954
|
* Sätter attributet 'value'
|
|
11959
11955
|
* @en Input value attribute
|
package/hydrate/index.js
CHANGED
|
@@ -8077,6 +8077,9 @@ class Calendar {
|
|
|
8077
8077
|
afOpenCalendarToChangeHandler() {
|
|
8078
8078
|
this.determineFocusedDate();
|
|
8079
8079
|
}
|
|
8080
|
+
afShowWeekNumberChangeHandler() {
|
|
8081
|
+
this.drawCalendar(this.focusedDate);
|
|
8082
|
+
}
|
|
8080
8083
|
afSelectedDateChangeHandler() {
|
|
8081
8084
|
this.afSelectedDates = isValid(this.afSelectedDate)
|
|
8082
8085
|
? [this.afSelectedDate]
|
|
@@ -8431,18 +8434,18 @@ class Calendar {
|
|
|
8431
8434
|
};
|
|
8432
8435
|
}
|
|
8433
8436
|
render() {
|
|
8434
|
-
return (hAsync("div", { key: '
|
|
8437
|
+
return (hAsync("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
|
|
8435
8438
|
'digi-calendar': true,
|
|
8436
8439
|
'digi-calendar--hide': !this.afActive
|
|
8437
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (hAsync("div", { key: '
|
|
8440
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (hAsync("div", { key: 'd9667abd52111f456358d9e6a9adafca0d4ee1a0', class: "digi-calendar__header" }, hAsync("div", { key: '98602c8c03ae35a5c2eca0f245b4d16a894fed23', class: "digi-calendar__header--year-select" }, hAsync("digi-form-select", { key: '5027e489a562e88cc3887e1899fa05c95d80c724', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
8438
8441
|
this.selectMonth(evt);
|
|
8439
8442
|
} }, _t.calendar.months.map((month, index) => {
|
|
8440
8443
|
return hAsync("option", { value: index }, month);
|
|
8441
|
-
})), hAsync("digi-form-select", { key: '
|
|
8444
|
+
})), hAsync("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
8442
8445
|
this.selectYear(evt);
|
|
8443
|
-
} }, this.allSelectableYears().map((year) => (hAsync("option", { value: year.toString() }, year))))))), !this.afYearSelect && (hAsync("div", { key: '
|
|
8444
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, hAsync("digi-icon-chevron-left", { key: '
|
|
8445
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, hAsync("span", { key: '
|
|
8446
|
+
} }, this.allSelectableYears().map((year) => (hAsync("option", { value: year.toString() }, year))))))), !this.afYearSelect && (hAsync("div", { key: '2a29c58612f574163fa45dbbcc488deb797827ff', class: "digi-calendar__header" }, hAsync("div", { key: '6dfda3eeac53ef081aa7b4853c5a79b7b1cac390', class: "digi-calendar__header--month-step" }, hAsync("button", { key: 'a5455fadeb481f8fe1db5094023c84c5c7392e6c', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
8447
|
+
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, hAsync("digi-icon-chevron-left", { key: '116d16bbd8efc4c67c71fc1faf910a9ac9e628d6', slot: "icon", "aria-hidden": "true" }), hAsync("span", { key: 'a187702c9817ad145dbbfff26a708cf6528ac619', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), hAsync("div", { key: '953f6e9d74ab935796b3c45e056c2b96242d1fae', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), hAsync("button", { key: 'e3b41587612b97e9a7a370c1c5d3316a83d3adde', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
8448
|
+
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, hAsync("span", { key: 'ab0f3e5fc595b0116e1c09ab511788ce312ece42', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), hAsync("digi-icon-chevron-right", { key: '38816a1cba510a4d86585abb602f0616887eb4c8', slot: "icon", "aria-hidden": "true" }))))), hAsync("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) }, hAsync("table", { key: '1bc547fce844da11ca0c60cf6349316619b1830f', role: "grid", class: "digi-calendar__table" }, hAsync("thead", { key: 'bc0c43868dfd448df74d6bba3e1037cffabf9b34' }, hAsync("tr", { key: 'f90539a88f628bf9e4b2fe9ab057f0010571f71d', role: "row" }, this.afShowWeekNumber && (hAsync("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) => (hAsync("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()))))), hAsync("tbody", { key: '249e8d2f8d0426d78371d07f8216efb7a3313fb8', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
8446
8449
|
return (hAsync("tr", null, week.map((day, i) => {
|
|
8447
8450
|
if (this.afShowWeekNumber && i === 0) {
|
|
8448
8451
|
return (hAsync("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));
|
|
@@ -8457,11 +8460,12 @@ class Calendar {
|
|
|
8457
8460
|
: null }, hAsync("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
8458
8461
|
}
|
|
8459
8462
|
})));
|
|
8460
|
-
})))), hAsync("slot", { key: '
|
|
8463
|
+
})))), hAsync("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
|
|
8461
8464
|
}
|
|
8462
8465
|
static get watchers() { return {
|
|
8463
8466
|
"focusedDate": ["focusedDateChanged"],
|
|
8464
8467
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
8468
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
8465
8469
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
8466
8470
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
8467
8471
|
}; }
|
|
@@ -9640,9 +9644,9 @@ class CalendarDatepicker {
|
|
|
9640
9644
|
this.afOnDateChange.emit(this.afSelectedDates);
|
|
9641
9645
|
}
|
|
9642
9646
|
/*
|
|
9643
|
-
|
|
9647
|
+
|
|
9644
9648
|
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.
|
|
9645
|
-
|
|
9649
|
+
|
|
9646
9650
|
*/
|
|
9647
9651
|
parseDateString(s) {
|
|
9648
9652
|
const raw = s.trim().replace(/[./]/g, '-');
|
|
@@ -9749,7 +9753,7 @@ class CalendarDatepicker {
|
|
|
9749
9753
|
return this.afSelectedDates;
|
|
9750
9754
|
}
|
|
9751
9755
|
render() {
|
|
9752
|
-
return (hAsync(Host, { key: '
|
|
9756
|
+
return (hAsync(Host, { key: 'ba1d1a44271b36303ebe317da2c6ad668784de5f' }, hAsync("div", { key: '4266f5796fb351b7c907b84bc827857384d4f397', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '940434479a0786968d5af864e4225b2f70879fc0', class: "digi-calendar-datepicker__input-field" }, hAsync("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()
|
|
9753
9757
|
? FormInputValidation.ERROR
|
|
9754
9758
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
9755
9759
|
evt.stopImmediatePropagation();
|
|
@@ -9758,6 +9762,7 @@ class CalendarDatepicker {
|
|
|
9758
9762
|
evt.stopImmediatePropagation();
|
|
9759
9763
|
this.afOnDateChangeRawText.emit(this.inputValue);
|
|
9760
9764
|
}, onKeyDown: (e) => {
|
|
9765
|
+
// Focus trap: Catch backwards tab from input field and direct it to date button.
|
|
9761
9766
|
if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
|
|
9762
9767
|
return;
|
|
9763
9768
|
if (e.target.tagName !== 'INPUT')
|
|
@@ -9765,21 +9770,22 @@ class CalendarDatepicker {
|
|
|
9765
9770
|
e.preventDefault();
|
|
9766
9771
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
9767
9772
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
9768
|
-
} }, hAsync("button", { key: '
|
|
9773
|
+
} }, hAsync("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
9769
9774
|
? this.afCloseCalendarAriaLabel
|
|
9770
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '
|
|
9775
|
+
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '22691ce73d94985a39c1a40b3c286c653ac4d8f3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: '69fa90455ee54bade344b0564dd9be3ba78a772a', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '4c3a52d1b9d44d8823132f6aec6407af70185888', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
|
|
9771
9776
|
? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
9772
|
-
: ''), hAsync("digi-calendar", { key: '
|
|
9777
|
+
: ''), hAsync("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) => {
|
|
9773
9778
|
evt.stopImmediatePropagation();
|
|
9774
9779
|
this.parseCalendar(evt);
|
|
9775
9780
|
}, onKeyDown: (e) => {
|
|
9781
|
+
// Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
|
|
9776
9782
|
if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
|
|
9777
9783
|
return;
|
|
9778
9784
|
if (!e.target.classList.contains('digi-calendar__date'))
|
|
9779
9785
|
return;
|
|
9780
9786
|
e.preventDefault();
|
|
9781
9787
|
this.focusOnCalendarInput();
|
|
9782
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: '
|
|
9788
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
|
|
9783
9789
|
? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
9784
9790
|
: '')))));
|
|
9785
9791
|
}
|
package/hydrate/index.mjs
CHANGED
|
@@ -8073,6 +8073,9 @@ class Calendar {
|
|
|
8073
8073
|
afOpenCalendarToChangeHandler() {
|
|
8074
8074
|
this.determineFocusedDate();
|
|
8075
8075
|
}
|
|
8076
|
+
afShowWeekNumberChangeHandler() {
|
|
8077
|
+
this.drawCalendar(this.focusedDate);
|
|
8078
|
+
}
|
|
8076
8079
|
afSelectedDateChangeHandler() {
|
|
8077
8080
|
this.afSelectedDates = isValid(this.afSelectedDate)
|
|
8078
8081
|
? [this.afSelectedDate]
|
|
@@ -8427,18 +8430,18 @@ class Calendar {
|
|
|
8427
8430
|
};
|
|
8428
8431
|
}
|
|
8429
8432
|
render() {
|
|
8430
|
-
return (hAsync("div", { key: '
|
|
8433
|
+
return (hAsync("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
|
|
8431
8434
|
'digi-calendar': true,
|
|
8432
8435
|
'digi-calendar--hide': !this.afActive
|
|
8433
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (hAsync("div", { key: '
|
|
8436
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (hAsync("div", { key: 'd9667abd52111f456358d9e6a9adafca0d4ee1a0', class: "digi-calendar__header" }, hAsync("div", { key: '98602c8c03ae35a5c2eca0f245b4d16a894fed23', class: "digi-calendar__header--year-select" }, hAsync("digi-form-select", { key: '5027e489a562e88cc3887e1899fa05c95d80c724', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
8434
8437
|
this.selectMonth(evt);
|
|
8435
8438
|
} }, _t.calendar.months.map((month, index) => {
|
|
8436
8439
|
return hAsync("option", { value: index }, month);
|
|
8437
|
-
})), hAsync("digi-form-select", { key: '
|
|
8440
|
+
})), hAsync("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
8438
8441
|
this.selectYear(evt);
|
|
8439
|
-
} }, this.allSelectableYears().map((year) => (hAsync("option", { value: year.toString() }, year))))))), !this.afYearSelect && (hAsync("div", { key: '
|
|
8440
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, hAsync("digi-icon-chevron-left", { key: '
|
|
8441
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, hAsync("span", { key: '
|
|
8442
|
+
} }, this.allSelectableYears().map((year) => (hAsync("option", { value: year.toString() }, year))))))), !this.afYearSelect && (hAsync("div", { key: '2a29c58612f574163fa45dbbcc488deb797827ff', class: "digi-calendar__header" }, hAsync("div", { key: '6dfda3eeac53ef081aa7b4853c5a79b7b1cac390', class: "digi-calendar__header--month-step" }, hAsync("button", { key: 'a5455fadeb481f8fe1db5094023c84c5c7392e6c', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
8443
|
+
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, hAsync("digi-icon-chevron-left", { key: '116d16bbd8efc4c67c71fc1faf910a9ac9e628d6', slot: "icon", "aria-hidden": "true" }), hAsync("span", { key: 'a187702c9817ad145dbbfff26a708cf6528ac619', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), hAsync("div", { key: '953f6e9d74ab935796b3c45e056c2b96242d1fae', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), hAsync("button", { key: 'e3b41587612b97e9a7a370c1c5d3316a83d3adde', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
8444
|
+
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, hAsync("span", { key: 'ab0f3e5fc595b0116e1c09ab511788ce312ece42', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), hAsync("digi-icon-chevron-right", { key: '38816a1cba510a4d86585abb602f0616887eb4c8', slot: "icon", "aria-hidden": "true" }))))), hAsync("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) }, hAsync("table", { key: '1bc547fce844da11ca0c60cf6349316619b1830f', role: "grid", class: "digi-calendar__table" }, hAsync("thead", { key: 'bc0c43868dfd448df74d6bba3e1037cffabf9b34' }, hAsync("tr", { key: 'f90539a88f628bf9e4b2fe9ab057f0010571f71d', role: "row" }, this.afShowWeekNumber && (hAsync("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) => (hAsync("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()))))), hAsync("tbody", { key: '249e8d2f8d0426d78371d07f8216efb7a3313fb8', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
8442
8445
|
return (hAsync("tr", null, week.map((day, i) => {
|
|
8443
8446
|
if (this.afShowWeekNumber && i === 0) {
|
|
8444
8447
|
return (hAsync("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));
|
|
@@ -8453,11 +8456,12 @@ class Calendar {
|
|
|
8453
8456
|
: null }, hAsync("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
8454
8457
|
}
|
|
8455
8458
|
})));
|
|
8456
|
-
})))), hAsync("slot", { key: '
|
|
8459
|
+
})))), hAsync("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
|
|
8457
8460
|
}
|
|
8458
8461
|
static get watchers() { return {
|
|
8459
8462
|
"focusedDate": ["focusedDateChanged"],
|
|
8460
8463
|
"afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
|
|
8464
|
+
"afShowWeekNumber": ["afShowWeekNumberChangeHandler"],
|
|
8461
8465
|
"afSelectedDate": ["afSelectedDateChangeHandler"],
|
|
8462
8466
|
"afSelectedDates": ["afSelectedDatesChangeHandler"]
|
|
8463
8467
|
}; }
|
|
@@ -9636,9 +9640,9 @@ class CalendarDatepicker {
|
|
|
9636
9640
|
this.afOnDateChange.emit(this.afSelectedDates);
|
|
9637
9641
|
}
|
|
9638
9642
|
/*
|
|
9639
|
-
|
|
9643
|
+
|
|
9640
9644
|
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.
|
|
9641
|
-
|
|
9645
|
+
|
|
9642
9646
|
*/
|
|
9643
9647
|
parseDateString(s) {
|
|
9644
9648
|
const raw = s.trim().replace(/[./]/g, '-');
|
|
@@ -9745,7 +9749,7 @@ class CalendarDatepicker {
|
|
|
9745
9749
|
return this.afSelectedDates;
|
|
9746
9750
|
}
|
|
9747
9751
|
render() {
|
|
9748
|
-
return (hAsync(Host, { key: '
|
|
9752
|
+
return (hAsync(Host, { key: 'ba1d1a44271b36303ebe317da2c6ad668784de5f' }, hAsync("div", { key: '4266f5796fb351b7c907b84bc827857384d4f397', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '940434479a0786968d5af864e4225b2f70879fc0', class: "digi-calendar-datepicker__input-field" }, hAsync("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()
|
|
9749
9753
|
? FormInputValidation.ERROR
|
|
9750
9754
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
9751
9755
|
evt.stopImmediatePropagation();
|
|
@@ -9754,6 +9758,7 @@ class CalendarDatepicker {
|
|
|
9754
9758
|
evt.stopImmediatePropagation();
|
|
9755
9759
|
this.afOnDateChangeRawText.emit(this.inputValue);
|
|
9756
9760
|
}, onKeyDown: (e) => {
|
|
9761
|
+
// Focus trap: Catch backwards tab from input field and direct it to date button.
|
|
9757
9762
|
if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
|
|
9758
9763
|
return;
|
|
9759
9764
|
if (e.target.tagName !== 'INPUT')
|
|
@@ -9761,21 +9766,22 @@ class CalendarDatepicker {
|
|
|
9761
9766
|
e.preventDefault();
|
|
9762
9767
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
9763
9768
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
9764
|
-
} }, hAsync("button", { key: '
|
|
9769
|
+
} }, hAsync("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
9765
9770
|
? this.afCloseCalendarAriaLabel
|
|
9766
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '
|
|
9771
|
+
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '22691ce73d94985a39c1a40b3c286c653ac4d8f3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: '69fa90455ee54bade344b0564dd9be3ba78a772a', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '4c3a52d1b9d44d8823132f6aec6407af70185888', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
|
|
9767
9772
|
? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
9768
|
-
: ''), hAsync("digi-calendar", { key: '
|
|
9773
|
+
: ''), hAsync("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) => {
|
|
9769
9774
|
evt.stopImmediatePropagation();
|
|
9770
9775
|
this.parseCalendar(evt);
|
|
9771
9776
|
}, onKeyDown: (e) => {
|
|
9777
|
+
// Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
|
|
9772
9778
|
if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
|
|
9773
9779
|
return;
|
|
9774
9780
|
if (!e.target.classList.contains('digi-calendar__date'))
|
|
9775
9781
|
return;
|
|
9776
9782
|
e.preventDefault();
|
|
9777
9783
|
this.focusOnCalendarInput();
|
|
9778
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: '
|
|
9784
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
|
|
9779
9785
|
? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
9780
9786
|
: '')))));
|
|
9781
9787
|
}
|
package/package.json
CHANGED