@designsystem-se/af 35.2.0 → 35.2.1-beta.1

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

@@ -16,21 +16,22 @@ export class CalendarDatepicker {
         this.showDisabledDateError = false;
         this.showCalendar = false;
         this.userInput = '';
+        this.isEditing = false;
         this.afId = randomIdGenerator('digi-calendar-datepicker');
         this.afLabel = _t.calendar.datepicker.label;
         this.afLabelDescription = _t.calendar.datepicker.description;
+        this.afName = undefined;
         this.afOpenCalendarAriaLabel = _t.calendar.datepicker.openCalendarAriaLabel;
         this.afCloseCalendarAriaLabel = _t.calendar.datepicker.closeCalendarAriaLabel;
         this.afValidation = CalendarDatepickerValidation.NEUTRAL;
         this.afValidationText = undefined;
-        this.afInvalid = false;
-        this.afValidationMessage = _t.calendar.datepicker.validationMessage;
         this.afValidationWrongFormat = _t.calendar.datepicker.validationWrongFormat;
         this.afValidationDisabledDate = _t.calendar.datepicker.validationDisabledDate;
         this.afRequired = undefined;
         this.afDisableValidation = undefined;
         this.afRequiredText = undefined;
         this.afSelectedDates = [];
+        this.afYearSelect = false;
         this.value = [];
         this.afMinDate = undefined;
         this.afMaxDate = undefined;
@@ -38,6 +39,23 @@ export class CalendarDatepicker {
         this.afMultipleDates = false;
         this.afCloseOnSelect = false;
     }
+    afDisableValidationChangeHandler(newVal) {
+        if (!newVal) {
+            const dates = this.userInput !== ''
+                ? this.parseInputString(this.userInput)
+                : this.afSelectedDates;
+            this.validateInputAndShowErrors(dates);
+        }
+        else {
+            this.showWrongFormatError = false;
+            this.showDisabledDateError = false;
+        }
+    }
+    afSelectedDatesChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal.length > 0) {
+            this.validateInputAndShowErrors(newVal);
+        }
+    }
     valueChangeHandler(newVal) {
         if (this.afDisableValidation && this.afSelectedDates.length > 0) {
             this.afSelectedDates = [];
@@ -51,6 +69,16 @@ export class CalendarDatepicker {
             this.userInput = '';
         }
     }
+    afMinDateChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal) {
+            this.validateInputAndShowErrors(this.afSelectedDates);
+        }
+    }
+    afMaxDateChangeHandler(newVal) {
+        if (!this.afDisableValidation && newVal) {
+            this.validateInputAndShowErrors(this.afSelectedDates);
+        }
+    }
     afMultipleDatesChangeHandler() {
         var _a;
         if (!this.afMultipleDates && this.afSelectedDates.length > 1) {
@@ -77,10 +105,15 @@ export class CalendarDatepicker {
             this.setValue(this.value);
         }
     }
+    componentDidUpdate() {
+        if (this.showCalendar) {
+            this.positionCalendar();
+        }
+    }
     get cssModifiers() {
         return {
             'digi-calendar-datepicker__show-week-numbers': this.afShowWeekNumber,
-            'digi-calendar-datepicker__show-error': this.getShowError(),
+            'digi-calendar-datepicker__show-error': this.hasBuiltInValidationError() || this.hasCustomValidationError(),
             'digi-calendar-datepicker__show-calendar': this.showCalendar
         };
     }
@@ -95,7 +128,19 @@ export class CalendarDatepicker {
         const calendarButton = this.hostElement.querySelector(`#${this.afId}-button`);
         calendarButton.focus();
     }
+    positionCalendar() {
+        const btn = this.hostElement.querySelector(`#${this.afId}-button`);
+        const datepickerEl = this.hostElement.querySelector(`#${this.afId}-datepicker`);
+        if (!btn || !datepickerEl)
+            return;
+        const btnRect = btn.getBoundingClientRect();
+        const containerRect = datepickerEl.getBoundingClientRect();
+        datepickerEl.style.setProperty('--digi--datepicker--calendar--popup-top', `${btnRect.bottom - containerRect.top + 5}px`);
+    }
     toggleCalendar() {
+        if (!this.showCalendar) {
+            this.positionCalendar();
+        }
         this.showCalendar = !this.showCalendar;
         if (this.showCalendar) {
             this.screenReaderUpdateTrigger = !this.screenReaderUpdateTrigger;
@@ -110,22 +155,34 @@ export class CalendarDatepicker {
         this.showWrongFormatError = false;
         this.showDisabledDateError = false;
         this.setValue([]);
-        this.afOnDateChange.emit(['']);
+        this.afOnDateChange.emit([]);
         this.afSelectedDates = [];
     }
+    removeDuplicateDates(dates) {
+        const seen = new Set();
+        return dates.filter((date) => {
+            if (!(date instanceof Date) || isNaN(date.getTime())) {
+                return true;
+            }
+            const key = date.toISOString().split('T')[0]; // yyyy-mm-dd
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
     validateInputAndShowErrors(dates) {
         this.showWrongFormatError = !!dates.find((date) => !isValid(date));
         this.showDisabledDateError = !!dates.find((date) => !this.isDateSelectable(date));
+        this.afOnValidationChange.emit({
+            valid: !this.showWrongFormatError && !this.showDisabledDateError
+        });
     }
     setValue(value) {
         this.afSelectedDates = value;
         this.value = value;
     }
-    /*
-    
-      Metoden tar både Stencil-specifika och vanliga DOM-event, extraherar texten användaren matat in, hanterar tom inmatning, par­sar till Date[], kör intern validering, uppdaterar komponentens state och slutligen emitterar alltid en string[] med exakt det användaren skrev – vilket gör det smidigare för Angular-value-accessorn att jobba vidare med.
-    
-    */
     parseInput(evt) {
         let newValue = '';
         if (evt.detail && typeof evt.detail.value === 'string') {
@@ -139,32 +196,30 @@ export class CalendarDatepicker {
             this.resetValueAndState();
             return;
         }
-        const dates = this.parseInputString(newValue);
-        this.setValue(dates); // target.value
-        if (!this.afDisableValidation) {
-            this.validateInputAndShowErrors(dates);
-            if (this.getShowError()) {
-                this.afOnDateChange.emit([]);
-            }
-            else {
-                this.afOnDateChange.emit(this.afSelectedDates);
+        let dates = this.parseInputString(newValue);
+        if (this.afMultipleDates) {
+            const uniqueDates = this.removeDuplicateDates(dates);
+            if (uniqueDates.length !== dates.length) {
+                dates = this.removeDuplicateDates(uniqueDates);
+                this.userInput = this.datesToInputString(dates);
             }
         }
-        else {
-            const dateStrs = newValue.split(/[&,]|och/g).map((s) => s.trim());
-            this.afOnDateChange.emit([...dateStrs]); // evt.detail
+        this.setValue(dates);
+        if (!this.afDisableValidation) {
+            this.validateInputAndShowErrors(dates);
         }
+        this.afOnDateChange.emit(dates);
     }
     parseCalendar(evt) {
         if (!(evt === null || evt === void 0 ? void 0 : evt.detail))
             return;
         if (!this.afDisableValidation) {
-            this.afInvalid = false;
             this.showWrongFormatError = false;
             this.showDisabledDateError = false;
         }
         this.userInput = '';
         this.setValue(evt.detail);
+        this.afOnDisplayChange.emit(this.inputValue);
         if (this.afCloseOnSelect) {
             this.toggleCalendar();
             this.focusOnCalendarButton();
@@ -227,17 +282,22 @@ export class CalendarDatepicker {
     dateWithoutTime(date) {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    getShowError() {
-        return (this.afInvalid || this.showWrongFormatError || this.showDisabledDateError);
+    hasBuiltInValidationError() {
+        return this.showWrongFormatError || this.showDisabledDateError;
+    }
+    hasCustomValidationError() {
+        return (this.afValidation &&
+            this.afValidation !== CalendarDatepickerValidation.NEUTRAL);
     }
     getErrorText() {
-        var _a;
-        if (this.afInvalid) {
-            return (_a = this.afValidationText) !== null && _a !== void 0 ? _a : this.afValidationMessage;
+        if (this.hasBuiltInValidationError()) {
+            return this.showWrongFormatError
+                ? this.afValidationWrongFormat
+                : this.afValidationDisabledDate;
+        }
+        if (this.hasCustomValidationError()) {
+            return this.afValidationText;
         }
-        return this.showWrongFormatError
-            ? this.afValidationWrongFormat
-            : this.afValidationDisabledDate;
     }
     get inputValue() {
         if (this.userInput !== '') {
@@ -270,25 +330,31 @@ export class CalendarDatepicker {
             : '';
     }
     get getSelectedDates() {
-        if (this.afDisableValidation && this.getShowError()) {
-            return this.afSelectedDates;
-        }
-        if (this.getShowError()) {
+        if (!this.afDisableValidation && this.hasBuiltInValidationError()) {
             return [];
         }
         return this.afSelectedDates;
     }
     render() {
-        return (h(Host, { key: '8112725ba8c875e94cc556da8921a74390d9c31e' }, h("div", { key: '4c3df5468b902a4d26fea152ebaeaea0c9bf3dd9', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'bcc79305b5bb0911e5f33f2ca8641ba1a3a5c588', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'cfe6189b8a529db4bda725f483ec899fe66b87cc', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afValue: this.inputValue, afValidation: this.getShowError()
-                ? FormInputValidation.ERROR
-                : FormInputValidation.NEUTRAL, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
+        return (h(Host, { key: '7498df7cd58780209c33cadaa0e65d8a935aa253' }, h("div", { key: 'edcf1672bb743fae4e802a8f73e30401139d89a1', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '8df4d331ce09fa8df6b333cd3a56f3dfd1b57af7', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'cc59e5a03540fe01340f7ce46817f160868234e0', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.isEditing
+                ? FormInputValidation.NEUTRAL
+                : 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();
+                this.isEditing = true;
                 this.parseInput(evt);
-            } }, h("button", { key: '3126acc01f2f9aef0a02990ef22acbde7c3ed3c7', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            }, onAfOnBlur: (evt) => {
+                evt.stopImmediatePropagation();
+                this.isEditing = false;
+                this.afOnDisplayChange.emit(this.inputValue);
+            }, onKeyDown: () => {
+                this.isEditing = true;
+            } }, h("button", { key: '4a1200715cc96e9cf53a0fb07db6038031cf35cd', 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: 'b48fc72cea6c3a94bd9821f2ec9416a4707e13d1', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'd7c78a170d2d855cca3c001427d1c64ebab48fb3', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '5651e12f6e3e06bfc879bb5c2aaf9920f9faf2e7', 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" }, this.showCalendar ? (h("digi-icon-x", { class: "digi-calendar-datepicker__button-icon", slot: "icon" })) : (h("digi-icon-calendar-alt", { class: "digi-calendar-datepicker__button-icon", slot: "icon" }))))), h("div", { key: '5db4a77bf061632b589721796236f802f6d9b479', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '830aa34e80ddd1c73bfc8c8592f3903b925703e5', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), h("digi-calendar", { key: '952ce82bb05beae68436d6a1a86bb00fefa2c3cb', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, onAfOnDateSelectedChange: (evt) => {
+            : ''), h("digi-calendar", { key: '12a2735b8811e53b618087004e9288fe2e9b8af2', 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, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onAfOnFocusOutside: (evt) => {
@@ -307,7 +373,7 @@ export class CalendarDatepicker {
                         focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
                     }
                 }
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '53f3d90d7a8864b323f9e23ffaf78330babf191e', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'e05fb1b11b44ad4c4f5c7ad452aa7f7e548f8db5', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -394,6 +460,28 @@ export class CalendarDatepicker {
                 "reflect": false,
                 "defaultValue": "_t.calendar.datepicker.description"
             },
+            "afName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets the 'name' attribute on the inner input element."
+                        }],
+                    "text": "S\u00E4tter attributet 'name' p\u00E5 det inre input-elementet."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-name",
+                "reflect": false
+            },
             "afOpenCalendarAriaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -461,7 +549,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Set input validation status"
                         }],
-                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting."
+                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting. Om v\u00E4rdet \u00E4r 'error' s\u00E4tts ocks\u00E5 aria-invalid=\"true\" p\u00E5 input-elementet."
                 },
                 "getter": false,
                 "setter": false,
@@ -491,52 +579,6 @@ export class CalendarDatepicker {
                 "attribute": "af-validation-text",
                 "reflect": false
             },
-            "afInvalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Set input validation message when using afInvalid property"
-                        }],
-                    "text": "S\u00E4tter valideringsmeddelandet n\u00E4r du anv\u00E4nder afInvalid"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-invalid",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "afValidationMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Set input validation message when using afInvalid property"
-                        }],
-                    "text": "S\u00E4tter valideringsmeddelandet n\u00E4r du anv\u00E4nder afInvalid"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-validation-message",
-                "reflect": false,
-                "defaultValue": "_t.calendar.datepicker.validationMessage"
-            },
             "afValidationWrongFormat": {
                 "type": "string",
                 "mutable": false,
@@ -679,6 +721,29 @@ export class CalendarDatepicker {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "afYearSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set this to true to change the previous/next month buttons to dropdowns for selecting month and year. Recommended when the expected date is many months back or forward in time, such as a birthdate."
+                        }],
+                    "text": "S\u00E4tts till true f\u00F6r att byta knapparna f\u00F6r f\u00F6reg\u00E5ende och n\u00E4sta m\u00E5nad till dropdowns f\u00F6r att v\u00E4lja m\u00E5nad och \u00E5r. Rekommenderas d\u00E5 f\u00F6rv\u00E4ntat datum \u00E4r m\u00E5nga m\u00E5nader bak\u00E5t eller fram\u00E5t i tiden, som exempelvis ett f\u00F6delsedatum."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-year-select",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "unknown",
                 "mutable": false,
@@ -838,7 +903,8 @@ export class CalendarDatepicker {
             "showWrongFormatError": {},
             "showDisabledDateError": {},
             "showCalendar": {},
-            "userInput": {}
+            "userInput": {},
+            "isEditing": {}
         };
     }
     static get events() {
@@ -851,13 +917,13 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "When date is updated"
+                            "text": "Sends the value as an array of Date objects when the date is updated."
                         }],
-                    "text": "Sker vid datum uppdatering"
+                    "text": "Skickar v\u00E4rdet som en array av Date-objekt n\u00E4r datumet uppdateras."
                 },
                 "complexType": {
-                    "original": "Date[] | string[] | []",
-                    "resolved": "Date[] | [] | string[]",
+                    "original": "Date[]",
+                    "resolved": "Date[]",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -865,13 +931,61 @@ export class CalendarDatepicker {
                         }
                     }
                 }
+            }, {
+                "method": "afOnDisplayChange",
+                "name": "afOnDisplayChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sends the string displayed in the input field when the date is updated."
+                        }],
+                    "text": "Skickar str\u00E4ngen som visas i inputf\u00E4ltet n\u00E4r datumet uppdateras."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "afOnValidationChange",
+                "name": "afOnValidationChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Emits validation status as a boolean when validation occurs."
+                        }],
+                    "text": "Skickar valideringsstatus som en boolean n\u00E4r validering sker."
+                },
+                "complexType": {
+                    "original": "{ valid: boolean }",
+                    "resolved": "{ valid: boolean; }",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "afDisableValidation",
+                "methodName": "afDisableValidationChangeHandler"
+            }, {
+                "propName": "afSelectedDates",
+                "methodName": "afSelectedDatesChangeHandler"
+            }, {
                 "propName": "value",
                 "methodName": "valueChangeHandler"
+            }, {
+                "propName": "afMinDate",
+                "methodName": "afMinDateChangeHandler"
+            }, {
+                "propName": "afMaxDate",
+                "methodName": "afMaxDateChangeHandler"
             }, {
                 "propName": "afMultipleDates",
                 "methodName": "afMultipleDatesChangeHandler"

package/dist/collection/components/_calendar/week-view/calendar-week-view.js

@@ -110,7 +110,7 @@ export class CalendarWeekView {
                 format(new Date(lastDate), 'MMMM yyyy', { locale: svlocale });
     }
     render() {
-        return (h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (h("div", { key: 'cf671623b23a03523dfd3ec0db0eec3df6f2dd76', class: "digi-calendar-week-view" }, h("nav", { key: '6aa79f9093a643a04a5b142dd64bc4647b69f6df', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a264a62fc6ef4f5c07a4618480a96792bd3827df', class: "digi-calendar-week-view__dates" }, h("div", { key: '8d7341cee9dcb0282273f3404c6885938de7f01d', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'ee209d98aa8899b55d912a0d26cd598c702f222e' }, h(this.afHeadingLevel, { key: 'eb23f5e42e562c2d0a880f0d70d09e662321f4e9', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: '5ea2d7a5d2e87ac3cb9393a36954b2d85ae9db35', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'f534204d77350b0bade6d081d221d68e3555ea88', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: '816553435601ca5a4d7197c35ff46af328cdf62e', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format(new Date(dateItem), 'd', {
                 locale: svlocale
             });
@@ -130,15 +130,15 @@ export class CalendarWeekView {
                 } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
+        })))), h("digi-button", { key: 'b3e13206cde9240aff492b1875f68f372779c53a', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '4c2913caad1960fac926fd167601229e6e4b6864', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '32f46f7f0752a8b26d273075f16763f2cf725171', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '7d5f0845dc359264849d55327ef7b1fdc195dd9a', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'f2b405ff5781a66353b718de8ed4043e8c499401', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'a11e26bab95f41515c948d69ea54f3a89fc37a60' }, h("slot", { key: 'acfe0aadbd1b7607d1d78b1be9d607b9b5ba74c2' })))));
     }
     static get is() { return "digi-calendar-week-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/bar-chart/bar-chart.js

@@ -1425,7 +1425,7 @@ export class barChart {
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
             }
         }
-        return (h(Host, { key: '7659fcc4817cdfb3f19f2bd11a41464c13b5e19e', ref: (el) => (this._host = el) }, h("div", { key: '063611cf8dbb2554904d972ed3fc1f89d714772e', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'ad58c43c2629e7b2b97e3ad1658646e5171b1531', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '2234460c0ffab8e7d251f099f4f2d38e1e5ebede', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'b82a89d578d997ab878d44a2928e5e31773bd34f', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b5dc532f7655bd383d0dcf42f8851edbc81b448c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f868d9fd2c37c247e8abdd59cf2b9342ad120fef', slot: "icon" }), "Visa diagram"), h("div", { key: '6a0f7838d86a43b46d9a036ad935f50ebb2b523f', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5f37b9eaf1030cd1d5b1b0360cdaaa61f953b624', class: "chartTooltip", id: this.afId }, h("div", { key: 'a89608cb64620456a165ba4fb57db823870d2231', class: "tooltipBody" }), h("digi-icon-x", { key: 'e842c2b42f6bc7d6dfdad1d1b8a7acb9f8df5a1a', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'f07154ab370a948016aa30a2547c4c9b25fae03b', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '385151df18d373779257040d298bf8c108184500', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'd5f07fc01a628aa2035a96d86621b6bab1e73f01', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '2d4b4d87fda1641635042c67028b7c84549f96cd', ref: (el) => (this._host = el) }, h("div", { key: '67ab0146d75868e264ab3634d2d0238948d6b0c1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'fecc4f007b31d84d881df69a1b872e12baff0f41', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '5984634338df29ed910c918419d754f55cd9b58f', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this._chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this._chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '96a9908153fccece462b14d8d9d9d44ecf2e6087', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '5e74950e7740943936dbd0aa53fe6d7806d2664a', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this._chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this._chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'f46f6a52186bbdf22942bf81372648489a90b870', slot: "icon" }), "Visa diagram"), h("div", { key: '628f26fd9c13494c179e3392a5aa2a8775d98773', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '5b510ad07b70def68a7c5bceae26814b867a326b', class: "chartTooltip", id: this.afId }, h("div", { key: '1c95d989c252c724682e180c9095370b1363a4d9', class: "tooltipBody" }), h("digi-icon-x", { key: '8911b337cd7420b6dccb4c2e749881aaac979f7c', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '80e03627039492a5b9d64e0089cb830720301fee', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '9e7d0772a59a50a8143de51ff59fa07ea56776d1', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '00b5b278015f6ec6fed1170f9b693a2b9150dc25', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/chart-line/chart-line.js

@@ -1616,7 +1616,7 @@ export class ChartLine {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '0aab34e11f412e3fea690e806cd2d9067bcafe09', ref: (el) => (this._host = el) }, h("div", { key: '941eef6b6e130641acec11ec4ee893611a811d75', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '2f4a69e973def39e52ef01bea01d2c6fe9accc47', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e7b8e1e0a202b33b1a3a32af43d642fd925dff90', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5dbedd2ceed7ef62100f610c57496675a2b2254b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9a0d402143c1087582f88ec8b8a12152fe665a3d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '082bd94e92917727ed627cce01daf437f71fcf39', slot: "icon" }), "Visa diagram"), h("div", { key: 'e0c445ff5e9c6832831d45ee1e8bd1c37c8c6ecc', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f012774817ee966de745cc20dd2410a44c7562d7', class: "chartTooltip", id: this.afId }, h("div", { key: 'da2b1f257ff3fb7b6b141af96fd85ebf3442accd', class: "tooltipHead" }, h("digi-icon-x", { key: 'a50f73e003c912a4123a83f4c64cd5cc03bf6c68', class: "close" }), ' '), h("div", { key: '25013c3bd2d261beed1bafce41d599b7625b5bbe', class: "tooltipBody" })), h("div", { key: '7d8ee22026572d3c6cdce7200c98c3b665ba948b', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bf0d27d67c1c86d701401828ec59bd6f873a96f7', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'b3539e60f97683d40b50e91be789eb78ab6d7061', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '3fd0ff05a416b160b504118a59440c3cd45540e1', ref: (el) => (this._host = el) }, h("div", { key: '72f480c3f41004e8892ecc758efb5f17f19975d6', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '14e57f41d3bdddc8d4dbf4a427d49c8f8efe4042', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '1d7f6264bc92f59cb3435e52f2c9c6d543b1f1ff', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'e30a5c70a165006be7d26ae7d2dce0194f7ef1db', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '736bc6dca71ac63039af38291b83954319823f86', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '785c60026da5b10357c576536fc961b4de240bc8', slot: "icon" }), "Visa diagram"), h("div", { key: '80c1446c2d0ed934240c76594b4d57c473ebe287', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'c1967d458dff110cac2c38ad5c6c7b1c0a9349ff', class: "chartTooltip", id: this.afId }, h("div", { key: '18c1ac0babb851fd86f8ebc82587179142cf427c', class: "tooltipHead" }, h("digi-icon-x", { key: '7eec9f8fc3c154e3e26c998d618d02da66d7e380', class: "close" }), ' '), h("div", { key: '358497a7f175754f43fb106d3a9d26e310923653', class: "tooltipBody" })), h("div", { key: '0013f988af31ddc540efe0d29ea1760eab60b34d', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '222ca9c2fe1acaef91fed817f5a885fb9bf89565', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'f6990353582af550e483ed78f06b5776c55811da', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_code/code/code.js

@@ -36,7 +36,7 @@ export class Code {
         };
     }
     render() {
-        return (h("span", { key: '8b58df902f5d794e1874e6b0f6f7790b5a10985d', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '3e26521ae19d2c7e08ab30a24e1c328ee709fa94', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: 'fe5bd7c4e18d5038c0edb7d3be15451069a86388', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'f5a186e1fd1c8021216c26bb2220460b4cd47921', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get is() { return "digi-code"; }
     static get originalStyleUrls() {

package/dist/collection/components/_code/code-block/code-block.js

@@ -46,7 +46,7 @@ export class CodeBlock {
         };
     }
     render() {
-        return (h("div", { key: 'efc4eab4b814bc5ec01559f89d951d694ed695e1', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: '85b42423a9f62a227739e3107972251f9a825a97', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '266c28f90184f60eab0fc1febf743a53f46aab3b', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '6230d33b96b03f7ea584d3b93efff81f636bad18', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'b54ad1cc57faafeb0f82cc0de0865cf3e585fddf', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: 'f223bd2e83be5d853c78c0322d69c7fe34cd257a', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
+        return (h("div", { key: '7da7c24753c591cf5d4cbaae14a8216656845fe1', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'ed0d821a7de52b976c43f400f3d18133748daf66', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: 'aec25bc79623ab7228a49c06ca94085966c0703e', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '96613b6086dfddf05e3c750940166a3a47dd669b', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'e24b2810009f096b615b600aefde8f9f5b2938f4', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '78df6930d661b8fbeca5e0d9d28ea40039efe904', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
     }
     static get is() { return "digi-code-block"; }
     static get originalStyleUrls() {

package/dist/collection/components/_code/code-example/code-example.css

@@ -57,6 +57,7 @@ License: none (public domain)
   --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
 }
 .digi-code-example__example {
+  height: 100%;
   padding: var(--digi--padding--largest-2);
   overflow-x: auto;
 }

package/dist/collection/components/_code/code-example/code-example.js

@@ -137,17 +137,17 @@ export class CodeExample {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (h("div", { key: '2504eb214d681d53d5db5f7ee4bbf070da4ac6bd', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: 'a0ceb68001efe0e88fa477ad8c2d01c9b1dd8644', class: {
+        return (h("div", { key: '92832626f4ab9639e40dcd035b19cda093241fa8', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '34065a2b928886bcdafee852c8bbde3cbcaa0fcb', class: {
                 'digi-code-example__container': true
-            } }, h("div", { key: '175257f48da6faf68791e79cca21b7ac32fcc7bf', class: "digi-code-example__example" }, h("slot", { key: '9f4c44dcc64eb3b3b8a471218052a59c2fd415e5' })), !this.afHideCode && (h("div", { key: '438208775e65656d25cccae3870a5efb892d176e', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '8fcbeaa3373450f5811d27bae2a2e7920f7949ea', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: 'df424b79ffa72a86c9af76c5445d8ba6af01c0bc', class: {
+            } }, h("div", { key: '35d295b3357c3cbd52a1355b1bf4bde93a1adc47', class: "digi-code-example__example" }, h("slot", { key: '1f6be5b28348188541226eb3c9a34442003ab634' })), !this.afHideCode && (h("div", { key: '297c430dbb2ae80a9b189477a04b399bbdae573b', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '5021875d50836b270b8cedbe27e0811d6c7b12d3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '750c97bbebe294c414c77a644e2f9f37f678b448', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: 'bda1ff7309767aafa1feef42769b197d16c4484b', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: 'b7179ceec32acda3f2e6f2f9baec813ce791e72d', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, h("digi-code-block", { key: 'e9a3ac82bbe4a6aca0ce15aa697efdb5ec5ec9f5', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: '83dc582d0daffeeef6722bd7bfe5db78e465dd58', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'