@designsystem-se/af 35.2.1-beta.3 → 35.2.1-beta.5

package/dist/collection/components/_calendar/calendar/calendar.js

@@ -31,6 +31,9 @@ export class Calendar {
     afOpenCalendarToChangeHandler() {
         this.determineFocusedDate();
     }
+    afShowWeekNumberChangeHandler() {
+        this.drawCalendar(this.focusedDate);
+    }
     afSelectedDateChangeHandler() {
         this.afSelectedDates = isValid(this.afSelectedDate)
             ? [this.afSelectedDate]
@@ -385,18 +388,18 @@ export class Calendar {
         };
     }
     render() {
-        return (h("div", { key: '2951c3cb75fbace29267998e7e17ed48fd7c934f', class: {
+        return (h("div", { key: '81de98957bdf9f87d97dd6946fc3c653e432e100', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '0afa63be62669edd3ecef28953711892810a308b', class: "digi-calendar__header" }, h("div", { key: '37d19ca99a173d0195179a361d7460c18e3e75db', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '6c5cde1508e7948b675d4495190f04a69c321570', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+            }, 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) => {
                 this.selectMonth(evt);
             } }, _t.calendar.months.map((month, index) => {
             return h("option", { value: index }, month);
-        })), h("digi-form-select", { key: '2ac58393e542efb8dab01da4aa3367107646f524', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: '22727ccd4d99cb1de6e075c86433b713d6c97238', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
                 this.selectYear(evt);
-            } }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '0c715aeece50ada4c13173e95a431b4bf3b2d584', class: "digi-calendar__header" }, h("div", { key: '7183e490dbfe41f705b06e525907c63a11d13c7d', class: "digi-calendar__header--month-step" }, h("button", { key: '1ac729938041d87ee0a2588211c09ff8eaedafae', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
-                ', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '2fc849f377c0d817d2c03b2f365f5f35ae2ae422', slot: "icon", "aria-hidden": "true" }), h("span", { key: '9a454f6a75c8525d0559013f420083461e59e38c', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: 'fe11bd1a3e7fe57152136e6cd05763735d64c164', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '1b46134446f5fb21be57b3d9b492a227c732aded', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
-                ', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: '07efeb5a1b3341814e6a9fd3cbe9c81fdf8d55fb', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: 'f16b49b2d05d06a928b944f515b9706d21a860d7', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'dc86ed3df6e5f70384b9e2ada473f4af2a11ccca', 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: 'f493df85506b3482066bc542e19630311180d224', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'b2f33f1dc3b75c4406df209e0cd37ff6e915dfa4' }, h("tr", { key: '74baa5b744116ad187f5cb04ff5b160117698adc', role: "row" }, this.afShowWeekNumber && (h("th", { key: '4cd7f3261eb3fb270a0299a23f4ced5d21301270', 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: '40266516692ee0a3b67781ff51881bf71fa325ba', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            } }, 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) +
+                ', ' + _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) +
+                ', ' + _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) => {
             return (h("tr", null, week.map((day, i) => {
                 if (this.afShowWeekNumber && i === 0) {
                     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));
@@ -411,7 +414,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: 'a1d6061116378a7f60fbc8d779999db45cf04b86', name: "calendar-footer" })));
+        })))), h("slot", { key: '3c98da93386f651fcd91a1cd1b18fa7dc9c9b1fb', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -760,6 +763,9 @@ export class Calendar {
             }, {
                 "propName": "afOpenCalendarTo",
                 "methodName": "afOpenCalendarToChangeHandler"
+            }, {
+                "propName": "afShowWeekNumber",
+                "methodName": "afShowWeekNumberChangeHandler"
             }, {
                 "propName": "afSelectedDate",
                 "methodName": "afSelectedDateChangeHandler"

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js

@@ -249,9 +249,9 @@ export class CalendarDatepicker {
         this.afOnDateChange.emit(this.afSelectedDates);
     }
     /*
-    
+  
       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.
-    
+  
     */
     parseDateString(s) {
         const raw = s.trim().replace(/[./]/g, '-');
@@ -358,7 +358,7 @@ export class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (h(Host, { key: 'f827e4dbd2058dc0b2ae780bab810a4904c80e32' }, h("div", { key: '48fc7ed95e144d2011d0e9a96c898a2eecc81b6c', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '6b99bec92c6114eb3790317220bd3b2d871fd57a', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'c095c5d036b22934b1a548cf7e53d3bb42e2c9ad', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
+        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()
                 ? FormInputValidation.ERROR
                 : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
@@ -367,6 +367,7 @@ export class CalendarDatepicker {
                 evt.stopImmediatePropagation();
                 this.afOnDateChangeRawText.emit(this.inputValue);
             }, onKeyDown: (e) => {
+                // Focus trap: Catch backwards tab from input field and direct it to date button.
                 if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
                     return;
                 if (e.target.tagName !== 'INPUT')
@@ -374,21 +375,22 @@ export class CalendarDatepicker {
                 e.preventDefault();
                 const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
                 focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-            } }, h("button", { key: 'e0e24bd46c40f38fe9ebdcbe6b4235a994edbba7', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            } }, h("button", { key: 'c4ab01d4c497bbd4e65ceb67a2a964ecac6a0514', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
                 ? this.afCloseCalendarAriaLabel
-                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: 'c32da1f075986bd27af49b180634736b316f9e21', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '6f2f3214b2205de2b5554d1b207a633f18e32dee', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: 'ca4b3f022c74f980341e8f3a06092c0ff3a4814e', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+                : 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
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), h("digi-calendar", { key: '4a7b3e14f5955d56c4d031c470eafbbc305b06da', 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) => {
+            : ''), 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) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onKeyDown: (e) => {
+                // Focus trap: Catch forward tab from last focusable element in calendar and direct it to the input.
                 if (!this.showCalendar || e.key !== 'Tab' || e.shiftKey)
                     return;
                 if (!e.target.classList.contains('digi-calendar__date'))
                     return;
                 e.preventDefault();
                 this.focusOnCalendarInput();
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'c2bf479b2006ac39de70ee222c40c0b1ca0d83ca', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '8b4fb4863de8db45e11488e99c464792d9b56cce', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -1002,9 +1004,15 @@ export class CalendarDatepicker {
                     "text": "Skickar resultatet n\u00E4r validering sker"
                 },
                 "complexType": {
-                    "original": "{\n    isValid: boolean;\n    validationText?: string;\n  }",
-                    "resolved": "{ isValid: boolean; validationText?: string; }",
-                    "references": {}
+                    "original": "ValidationChange",
+                    "resolved": "ValidationChange",
+                    "references": {
+                        "ValidationChange": {
+                            "location": "import",
+                            "path": "./calendar-datepicker.types",
+                            "id": "src/components/_calendar/calendar-datepicker/calendar-datepicker.types.ts::ValidationChange"
+                        }
+                    }
                 }
             }];
     }

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.types.js

@@ -0,0 +1 @@
+export {};