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

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

@@ -16,7 +16,6 @@ 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;
@@ -28,7 +27,7 @@ export class CalendarDatepicker {
         this.afValidationWrongFormat = _t.calendar.datepicker.validationWrongFormat;
         this.afValidationDisabledDate = _t.calendar.datepicker.validationDisabledDate;
         this.afRequired = undefined;
-        this.afDisableValidation = undefined;
+        this.afDisableValidation = false;
         this.afRequiredText = undefined;
         this.afSelectedDates = [];
         this.afYearSelect = false;
@@ -38,6 +37,7 @@ export class CalendarDatepicker {
         this.afShowWeekNumber = false;
         this.afMultipleDates = false;
         this.afCloseOnSelect = false;
+        this.afOpenCalendarTo = undefined;
     }
     afDisableValidationChangeHandler(newVal) {
         if (!newVal) {
@@ -124,6 +124,10 @@ export class CalendarDatepicker {
             e.stopPropagation();
         }
     }
+    focusOnCalendarInput() {
+        const input = this.hostElement.querySelector(`#${this.afId}-datepicker input`);
+        input === null || input === void 0 ? void 0 : input.focus();
+    }
     focusOnCalendarButton() {
         const calendarButton = this.hostElement.querySelector(`#${this.afId}-button`);
         calendarButton.focus();
@@ -148,7 +152,7 @@ export class CalendarDatepicker {
     }
     parseInputString(value) {
         return value
-            .split(/[&,]|och/g)
+            .split(new RegExp(`[&,]|${_t.and}`, 'g'))
             .map((text) => this.parseDateString(text.trim()));
     }
     resetValueAndState() {
@@ -175,8 +179,14 @@ export class CalendarDatepicker {
     validateInputAndShowErrors(dates) {
         this.showWrongFormatError = !!dates.find((date) => !isValid(date));
         this.showDisabledDateError = !!dates.find((date) => !this.isDateSelectable(date));
+        const inputIsValid = !this.showWrongFormatError && !this.showDisabledDateError;
         this.afOnValidationChange.emit({
-            valid: !this.showWrongFormatError && !this.showDisabledDateError
+            isValid: inputIsValid,
+            validationText: inputIsValid
+                ? undefined
+                : this.showWrongFormatError
+                    ? this.afValidationWrongFormat
+                    : this.afValidationDisabledDate
         });
     }
     setValue(value) {
@@ -197,10 +207,22 @@ export class CalendarDatepicker {
             return;
         }
         let dates = this.parseInputString(newValue);
-        if (this.afMultipleDates) {
+        // Single dates - acceptera inte flera datum inskrivna
+        if (!this.afDisableValidation &&
+            !this.afMultipleDates &&
+            dates.length > 1) {
+            this.showWrongFormatError = true;
+            this.afOnValidationChange.emit({
+                isValid: false,
+                validationText: this.afValidationWrongFormat
+            });
+            return;
+        }
+        // Multiple dates - filtrera bort dubbletter
+        if (!this.afDisableValidation && this.afMultipleDates) {
             const uniqueDates = this.removeDuplicateDates(dates);
             if (uniqueDates.length !== dates.length) {
-                dates = this.removeDuplicateDates(uniqueDates);
+                dates = uniqueDates;
                 this.userInput = this.datesToInputString(dates);
             }
         }
@@ -219,7 +241,7 @@ export class CalendarDatepicker {
         }
         this.userInput = '';
         this.setValue(evt.detail);
-        this.afOnDisplayChange.emit(this.inputValue);
+        this.afOnDateChangeRawText.emit(this.inputValue);
         if (this.afCloseOnSelect) {
             this.toggleCalendar();
             this.focusOnCalendarButton();
@@ -312,7 +334,7 @@ export class CalendarDatepicker {
     datesToInputString(dates) {
         return dates.every((date) => date instanceof Date && !isNaN(date.getTime()))
             ? dates
-                .map((date) => date.toLocaleDateString('sv-SE'))
+                .map((date) => date.toLocaleDateString(_t.locale))
                 .flatMap((date, index, all) => {
                 const isLast = index == all.length - 1;
                 const isFirst = index === 0;
@@ -320,7 +342,7 @@ export class CalendarDatepicker {
                     return date;
                 }
                 else if (isLast) {
-                    return [' och ', date];
+                    return [` ${_t.and} `, date];
                 }
                 else {
                     return [', ', date];
@@ -336,44 +358,37 @@ export class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        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) => {
+        return (h(Host, { key: '0e4fa182ae33ac82d440e3841f853e6328b67794' }, h("div", { key: '81e2d07ec330b4e2994e1fd86d693dcb5405410d', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'a47c94fa8498d8f88caea31f725fd0294ea03ac2', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'af7ad6bdec9ec1e45e11ff2ac06a51fdad7ea80a', 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();
-                this.isEditing = true;
                 this.parseInput(evt);
             }, 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.afOnDateChangeRawText.emit(this.inputValue);
+            }, onKeyDown: (e) => {
+                if (!this.showCalendar || e.key !== 'Tab' || !e.shiftKey)
+                    return;
+                if (e.target.tagName !== 'INPUT')
+                    return;
+                e.preventDefault();
+                const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
+                focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
+            } }, h("button", { key: 'fbd02f05da4d93f60a4c4d8b52adba311fc4a324', 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" }, 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
+                : 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: '07bed93717efb5bf1dba04ce61f2006403a860d2', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '8fc156658ea084cf2291149f2f4c6a7a246b731f', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), 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) => {
+            : ''), h("digi-calendar", { key: '0cf7d10740ad6be29431c366127893741184544d', 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);
-            }, onAfOnFocusOutside: (evt) => {
-                if (this.showCalendar) {
-                    const relatedTarget = evt.detail.relatedTarget;
-                    if (!relatedTarget)
-                        return;
-                    evt.preventDefault();
-                    const isDateButton = relatedTarget.classList.contains('digi-calendar__date');
-                    const isToggleButton = relatedTarget.id === `${this.afId}-button`;
-                    if (isDateButton) {
-                        this.focusOnCalendarButton();
-                    }
-                    else if (isToggleButton) {
-                        const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
-                        focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-                    }
-                }
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'e05fb1b11b44ad4c4f5c7ad452aa7f7e548f8db5', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
+            }, onKeyDown: (e) => {
+                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: 'ba8d4fb43fc1c54cc417e48c42c47264e2731e74', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -404,9 +419,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sets an id attribute. Standard \u00E4r slumpm\u00E4ssig str\u00E4ng."
+                            "text": "Sets an id attribute for the input field, and serves as the base for other ids in the component"
                         }],
-                    "text": "S\u00E4tter ett id attribut."
+                    "text": "S\u00E4tter attributet id f\u00F6r inputf\u00E4ltet, och utg\u00F6r basen f\u00F6r andra id:n i komponenten"
                 },
                 "getter": false,
                 "setter": false,
@@ -429,7 +444,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "The label text"
                         }],
-                    "text": "Texten till labelelementet"
+                    "text": "Texten till etiketten"
                 },
                 "getter": false,
                 "setter": false,
@@ -452,7 +467,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Optional description text"
                         }],
-                    "text": "Valfri beskrivande text"
+                    "text": "Beskrivande text som b\u00F6r beskriva det f\u00F6rv\u00E4ntade formatet och/eller andra krav"
                 },
                 "getter": false,
                 "setter": false,
@@ -473,9 +488,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sets the 'name' attribute on the inner input element."
+                            "text": "Sets the 'name' attribute on the inner input element"
                         }],
-                    "text": "S\u00E4tter attributet 'name' p\u00E5 det inre input-elementet."
+                    "text": "S\u00E4tter attributet 'name' p\u00E5 det inre input-elementet"
                 },
                 "getter": false,
                 "setter": false,
@@ -570,9 +585,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for custom validation"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r egen validering"
                 },
                 "getter": false,
                 "setter": false,
@@ -592,9 +607,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for the built-in format validation"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r den inbyggda formatvalideringen"
                 },
                 "getter": false,
                 "setter": false,
@@ -615,9 +630,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set input validation message"
+                            "text": "Set input validation message for the built-in min/max date validation"
                         }],
-                    "text": "S\u00E4tter valideringsmeddelandet"
+                    "text": "S\u00E4tter valideringsmeddelandet f\u00F6r den inbyggda valideringen av min/max-datum"
                 },
                 "getter": false,
                 "setter": false,
@@ -640,7 +655,7 @@ export class CalendarDatepicker {
                             "name": "en",
                             "text": "Input required attribute"
                         }],
-                    "text": "S\u00E4tter attributet 'required'."
+                    "text": "S\u00E4tter attributet 'required'"
                 },
                 "getter": false,
                 "setter": false,
@@ -660,14 +675,15 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true to disable internal validation."
+                            "text": "Set this to true to disable internal validation"
                         }],
-                    "text": "S\u00E4tt denna till true f\u00F6r att st\u00E4nga av komponentens egna validering."
+                    "text": "S\u00E4tt denna till true f\u00F6r att st\u00E4nga av komponentens egna validering"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-disable-validation",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "afRequiredText": {
                 "type": "string",
@@ -682,9 +698,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set text for afRequired."
+                            "text": "Set text for afRequired"
                         }],
-                    "text": "S\u00E4tter text f\u00F6r afRequired."
+                    "text": "S\u00E4tter text f\u00F6r afRequired"
                 },
                 "getter": false,
                 "setter": false,
@@ -840,9 +856,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show week number in the calander. Default is false"
+                            "text": "Show week number in the calander."
                         }],
-                    "text": "Visa veckonummer i kalender. F\u00F6rvalt \u00E4r false"
+                    "text": "Visa veckonummer i kalender"
                 },
                 "getter": false,
                 "setter": false,
@@ -863,9 +879,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true to be able to select multiple dates in the calander. Default is false"
+                            "text": "Set this to true to be able to select multiple dates in the calander"
                         }],
-                    "text": "S\u00E4tt denna till true f\u00F6r att kunna markera mer en ett datum i kalendern. F\u00F6rvalt \u00E4r false"
+                    "text": "S\u00E4tt denna till true f\u00F6r att kunna markera mer en ett datum i kalendern"
                 },
                 "getter": false,
                 "setter": false,
@@ -886,15 +902,40 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set this to true if the calendar should close when a date is selected. Default is false"
+                            "text": "Set this to true if the calendar should close when a date is selected"
                         }],
-                    "text": "S\u00E4tt denna till true om kalendern ska st\u00E4ngas n\u00E4r anv\u00E4ndaren v\u00E4ljer ett datum. F\u00F6rvalt \u00E4r false"
+                    "text": "S\u00E4tt denna till true om kalendern ska st\u00E4ngas n\u00E4r anv\u00E4ndaren v\u00E4ljer ett datum"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "af-close-on-select",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "afOpenCalendarTo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Controls which month is shown from start, and which date button is the entry point for keyboard navigation. If not provided, selected date or today's date is used."
+                        }],
+                    "text": "Styr vilken m\u00E5nad som visas fr\u00E5n start, samt vilken datumknapp som \u00E4r ing\u00E5ngspunkt f\u00F6r tangentbordsnavigering. Om inte angiven anv\u00E4nds valt datum eller dagens datum."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -903,8 +944,7 @@ export class CalendarDatepicker {
             "showWrongFormatError": {},
             "showDisabledDateError": {},
             "showCalendar": {},
-            "userInput": {},
-            "isEditing": {}
+            "userInput": {}
         };
     }
     static get events() {
@@ -917,9 +957,9 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sends the value as an array of Date objects when the date is updated."
+                            "text": "Sends the value as an array of Date objects when the date is updated"
                         }],
-                    "text": "Skickar v\u00E4rdet som en array av Date-objekt n\u00E4r datumet uppdateras."
+                    "text": "Skickar v\u00E4rdet som en array av Date-objekt n\u00E4r datumet uppdateras"
                 },
                 "complexType": {
                     "original": "Date[]",
@@ -932,17 +972,17 @@ export class CalendarDatepicker {
                     }
                 }
             }, {
-                "method": "afOnDisplayChange",
-                "name": "afOnDisplayChange",
+                "method": "afOnDateChangeRawText",
+                "name": "afOnDateChangeRawText",
                 "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": "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."
+                    "text": "Skickar str\u00E4ngen som visas i inputf\u00E4ltet n\u00E4r datumet uppdateras"
                 },
                 "complexType": {
                     "original": "string",
@@ -958,13 +998,13 @@ export class CalendarDatepicker {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Emits validation status as a boolean when validation occurs."
+                            "text": "Emits the validation result"
                         }],
-                    "text": "Skickar valideringsstatus som en boolean n\u00E4r validering sker."
+                    "text": "Skickar resultatet n\u00E4r validering sker"
                 },
                 "complexType": {
-                    "original": "{ valid: boolean }",
-                    "resolved": "{ valid: boolean; }",
+                    "original": "{\n    isValid: boolean;\n    validationText?: string;\n  }",
+                    "resolved": "{ isValid: boolean; validationText?: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/_form/form-category-filter/form-category-filter.js

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: '4098c877261aa9b69dbfc0969d7d4b99a8ebe5f3' }, h("div", { key: '0907f7f36b12cd3324cae1ea48bd06f2da91012c', class: {
+        return (h(Host, { key: '1116adb138d4455a8946696bd148de4470fc8278' }, h("div", { key: '888f3e8c1133706105581a7a89966ef93ccad0c9', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -100,7 +100,7 @@ export class FormCategoryFilter {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: 'e6e524d7840a99cf360b9a2bb3c7967617b2de6d' }, h("digi-button", { key: '66a292db85e82ba5eafbf7ada307395ff777876b', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: 'b717e98f7a11951d09332be733c9f42ffce092df' }, h("digi-button", { key: '405ae252571b1702e02db338cf0137955f1cbef6', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }
@@ -162,9 +162,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start with a 'All categories' category"
+                            "text": "If the list should start with a button for 'All categories'"
                         }],
-                    "text": "Ifall listan ska b\u00F6rja med en 'Alla kategorier' kategori"
+                    "text": "Ifall listan ska b\u00F6rja med en knapp f\u00F6r 'Alla kategorier'"
                 },
                 "getter": false,
                 "setter": false,
@@ -185,9 +185,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the 'All categories' category should start selected"
+                            "text": "If the 'All categories' category should be selected from start"
                         }],
-                    "text": "Ifall 'Alla kategorier' kategorin ska b\u00F6rja vald"
+                    "text": "Ifall 'Alla kategorier' kategorin ska vara vald fr\u00E5n start"
                 },
                 "getter": false,
                 "setter": false,
@@ -210,7 +210,7 @@ export class FormCategoryFilter {
                             "name": "en",
                             "text": "The name of the 'All categories' category"
                         }],
-                    "text": "Namnet p\u00E5 'Alla kategorier' kategorin"
+                    "text": "Namnet p\u00E5 'Alla kategorier'-kategorin"
                 },
                 "getter": false,
                 "setter": false,
@@ -254,9 +254,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "If the list should start out collapsed"
+                            "text": "If the list should be collapsed from start"
                         }],
-                    "text": "Ifall listan ska var kollapsad fr\u00E5n b\u00F6rjan"
+                    "text": "Ifall listan ska vara kollapsad fr\u00E5n b\u00F6rjan"
                 },
                 "getter": false,
                 "setter": false,
@@ -300,9 +300,9 @@ export class FormCategoryFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Show all categories and hide button to \"visa fler\"/\"visa f\u00E4rre\""
+                            "text": "Show all categories and hide button to show more/fewer"
                         }],
-                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att \"visa fler/visa f\u00E4rre"
+                    "text": "Visa alla kategorier och d\u00F6lj knappen f\u00F6r att visa fler/f\u00E4rre"
                 },
                 "getter": false,
                 "setter": false,
@@ -333,8 +333,8 @@ export class FormCategoryFilter {
                     "text": "Sker vid \u00E4ndrade valda kategorier"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string[]",
+                    "resolved": "string[]",
                     "references": {}
                 }
             }];

package/dist/collection/components/_form/form-file-upload/form-file-upload.js

@@ -547,18 +547,18 @@ export class FormFileUpload {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '252d8551475a8efeafcb5422e3bc9a39ab766ee0', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'e04056de0ca60a999f38e7fc2ee3dddb14f3352e', class: "digi-form-file-upload__text-area" }, h("button", { key: '1068e450b48ab821622eb193016c330edb05fc67', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '252d8551475a8efeafcb5422e3bc9a39ab766ee0', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'e04056de0ca60a999f38e7fc2ee3dddb14f3352e', class: "digi-form-file-upload__text-area" }, h("button", { key: '9e7e1d5c75e32f5db420e92f32b428bfb66b430e', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: 'a439e424f83e4ea197215a3812459882c322678b', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: '16567976f7f354917cfe2c28046dcb99f302c828', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'd194bb6becbe173f833634a4484a4542c5dfabb1', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '2bd5c1af11f38d32964c46a89fd31b04908d3de5', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'b317ecd9f780111c20a529cd7d203ef5a765bb2c' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '85f16b73106ab1221a98591d01ee0157081d3778', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '8ba2509be773975eedfea52a75b51fb4f9890ed1' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '82c7c35bc1ad2766687ba683c3f3b14836a74515', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'eff456a01f0c09f4f6c1a80c76f3537e487d3fb2', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'df0c06072fd8df4cd77eca15f67a046fca028a07', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-input/form-input.js

@@ -18,7 +18,6 @@ export class FormInput {
         this.hasButton = undefined;
         this.dirty = false;
         this.touched = false;
-        this.isEditing = false;
         this.afLabel = undefined;
         this.afLabelDescription = undefined;
         this.afType = FormInputType.TEXT;
@@ -57,6 +56,9 @@ export class FormInput {
     }
     onAfValueChanged(value) {
         this.value = value;
+        if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
+            this._input.value = String(value !== null && value !== void 0 ? value : '');
+        }
     }
     afValidationTextWatch() {
         this.setActiveValidationMessage();
@@ -89,8 +91,8 @@ export class FormInput {
             'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
             'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
             'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
-            'digi-form-input--error': !this.isEditing && this.afValidation === FormInputValidation.ERROR,
-            'digi-form-input--warning': !this.isEditing && this.afValidation === FormInputValidation.WARNING,
+            'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
             [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
             [`digi-form-input--has-button-${this.hasButton}`]: true,
             'digi-form-input--empty': !this.afValue &&
@@ -122,7 +124,6 @@ export class FormInput {
             this.afOnTouched.emit(e);
             this.touched = true;
         }
-        this.isEditing = false;
         this.afOnBlur.emit(e);
     }
     changeHandler(e) {
@@ -154,10 +155,10 @@ export class FormInput {
         this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
     }
     render() {
-        return (h("div", { key: 'def034db4be8dcec58d6ee59c6ad9f5638cbc476', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: 'e461f9dd36690fc2aa08914972adcb8805121479', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'a986a18060e89a646e68e2e45bbc73d189bd5573', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'cb5e252a4bd3dab8f408c110ad0c37b0c5997129', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyDown: () => this.isEditing = true, onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR ? 'true' : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
+        return (h("div", { key: '6309c6b61d95e8a96c724c1493daac592aa79f81', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '3ef5a2a1251e0e3c1c99a761482c4ec5ff634430', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'ebcb01079c78738339e5317cf9239f1a89e31921', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: '6ec3288227014624b27d7d10797fb7fde4c47f26', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR ? 'true' : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
             ? {}
-            : { inputmode: this.afInputmode }))), h("slot", { key: '8a16fed00c0d4b8be2bb3f6e42cb11a920439e8c', name: "button" })), h("div", { key: '02415ad4300e58dfc8693fe4f16738cf822936a7', class: "digi-form-input__footer" }, h("div", { key: '8c3ffd5dfefa5303897d832b204d6b14a0a11f30', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, !this.isEditing && this.hasActiveValidationMessage &&
-            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '931d4f21777a7013164adeb51e3008d9aeebce6a', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+            : { inputmode: this.afInputmode }))), h("slot", { key: '0da5dfcd73e997a16bf3be18b4cbd3651cab7ebb', name: "button" })), h("div", { key: '4f24b7c3b070e5f8fbe4396d38865c1afa59709e', class: "digi-form-input__footer" }, h("div", { key: 'f0b6ee56051886efbecf82c136338c42130d80d8', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '0f00497d0bf3c0da8a11f60fbdb302c11b41e8aa', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
     }
     static get is() { return "digi-form-input"; }
     static get encapsulation() { return "scoped"; }
@@ -924,8 +925,7 @@ export class FormInput {
             "hasActiveValidationMessage": {},
             "hasButton": {},
             "dirty": {},
-            "touched": {},
-            "isEditing": {}
+            "touched": {}
         };
     }
     static get events() {