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

package/components/{p-98765f91.js → p-504118d4.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-e5abfc2d.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { l as logger } from './p-e3d2e899.js';
-import { _ as _t } from './p-08cf2c0e.js';
+import { _ as _t } from './p-903a27d9.js';
 
 const formLabelCss = ".sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}";
 const DigiFormLabelStyle0 = formLabelCss;

package/components/{p-0dd35954.js → p-669e7c83.js}

@@ -3,9 +3,9 @@ import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { d as detectClickOutside } from './p-430607cb.js';
 import { d as detectFocusOutside } from './p-ee33960b.js';
 import { l as logger } from './p-e3d2e899.js';
-import { _ as _t } from './p-08cf2c0e.js';
-import { d as defineCustomElement$b } from './p-98765f91.js';
-import { d as defineCustomElement$a } from './p-05a97800.js';
+import { _ as _t } from './p-903a27d9.js';
+import { d as defineCustomElement$b } from './p-504118d4.js';
+import { d as defineCustomElement$a } from './p-cb20ea78.js';
 import { d as defineCustomElement$9 } from './p-49a67d97.js';
 import { d as defineCustomElement$8 } from './p-be3cec41.js';
 import { d as defineCustomElement$7 } from './p-b54d76b7.js';
@@ -88,15 +88,11 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         this.afOnFocusOutside = createEvent(this, "afOnFocusOutside", 7);
         this.afOnClickOutside = createEvent(this, "afOnClickOutside", 7);
         this.afOnDirty = createEvent(this, "afOnDirty", 7);
-        var _a;
-        this.locale = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang) || 'sv-SE';
-        this.activeCalendar = [];
-        this.months = [];
         this.selectedDates = [];
         this.focusedDate = undefined;
         this.dirty = false;
         this.afId = randomIdGenerator('digi-calendar');
-        this.afInitFocusDate = undefined;
+        this.afOpenCalendarTo = undefined;
         this.afShowWeekNumber = false;
         this.afSelectedDate = undefined;
         this.afSelectedDates = [];
@@ -105,6 +101,13 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         this.afMaxDate = undefined;
         this.afMultipleDates = false;
         this.afYearSelect = false;
+        this.activeCalendar = [];
+    }
+    focusedDateChanged() {
+        this.drawCalendar(this.focusedDate);
+    }
+    afOpenCalendarToChangeHandler() {
+        this.determineFocusedDate();
     }
     afSelectedDateChangeHandler() {
         this.afSelectedDates = isValid(this.afSelectedDate)
@@ -117,24 +120,12 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
                 const invalidDate = this.afSelectedDates.find((date) => !isValid(date));
                 if (invalidDate === undefined) {
                     this.selectedDates = this.afSelectedDates;
-                    if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-                        this.focusedDate = this.afInitFocusDate;
-                    }
-                    else {
-                        this.focusedDate = new Date(this.afSelectedDates
-                            .slice()
-                            .sort((a, b) => a.getTime() - b.getTime())[0]);
-                    }
+                    this.determineFocusedDate();
                 }
             }
             else if (isValid(this.afSelectedDates[0])) {
                 this.selectedDates = [this.afSelectedDates[0]];
-                if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-                    this.focusedDate = this.afInitFocusDate;
-                }
-                else {
-                    this.focusedDate = new Date(this.afSelectedDates[0]);
-                }
+                this.determineFocusedDate();
             }
         }
         else {
@@ -155,6 +146,20 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
             this.afOnClickOutside.emit(e);
         }
     }
+    determineFocusedDate() {
+        if (this.dirty) {
+            return; // Don't change focused date if user has already interacted with the calendar
+        }
+        else if (this.afOpenCalendarTo && isValid(this.afOpenCalendarTo)) {
+            this.focusedDate = this.afOpenCalendarTo;
+        }
+        else if (this.selectedDates.length > 0) {
+            this.focusedDate = this.selectedDates[0];
+        }
+        else {
+            this.focusedDate = new Date();
+        }
+    }
     drawCalendar(focusedDate) {
         const date = {
             year: focusedDate.getFullYear(),
@@ -164,20 +169,6 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         this.firstWeekOfNextMonth = this.getWeekDays(this.getFirstDayOfNextMonth(date));
         this.weeksBetween = this.getWeeksBetween(this.getLastDayOfPrevMonth(date), this.getFirstDayOfNextMonth(date));
         this.weekDaysbetween = this.getWeekdaysOfMonth(this.weeksBetween);
-        this.months = [
-            'januari',
-            'februari',
-            'mars',
-            'april',
-            'maj',
-            'juni',
-            'juli',
-            'augusti',
-            'september',
-            'oktober',
-            'november',
-            'december'
-        ];
         this.activeCalendar = this.appendFirstWeekOfNextMonth()
             ? [
                 this.lastWeekOfPreviousMonth,
@@ -208,10 +199,9 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
     getWeekDays(date) {
         const today = date || new Date();
         const week = [];
+        const dayOffset = today.getDay(); // 0=söndag
         for (let i = 1; i <= 7; i++) {
-            const first = today.getDate() - today.getDay() + i;
-            const day = new Date(today.setDate(first));
-            week.push(day);
+            week.push(new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOffset + i));
         }
         return week;
     }
@@ -262,13 +252,13 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
     }
     getMonthName(monthNumber) {
         return new Date(1992, monthNumber, 1)
-            .toLocaleDateString(this.locale, {
+            .toLocaleDateString(_t.locale, {
             month: 'short'
         })
             .replace('.', '');
     }
     getFullMonthName(monthNumber) {
-        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(this.locale, {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(_t.locale, {
             month: 'long',
             year: 'numeric'
         });
@@ -393,8 +383,8 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         if (this.dirty) {
             return this.isSameDate(date, this.focusedDate);
         }
-        if (this.afInitFocusDate) {
-            return this.isSameDate(date, this.afInitFocusDate);
+        if (this.afOpenCalendarTo) {
+            return this.isSameDate(date, this.afOpenCalendarTo);
         }
         return this.isSameMonth(date, new Date())
             ? this.isSameDate(date, new Date())
@@ -415,14 +405,14 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         const lastDayOfSelectedMonth = new Date(tempDate.getFullYear(), selectedMonth + 1, 0).getDate();
         tempDate.setDate(Math.min(currentDay, lastDayOfSelectedMonth));
         this.focusedDate = tempDate;
-        this.drawCalendar(this.focusedDate);
     }
     selectYear(evt) {
         this.onDirty();
-        const tempDate = this.focusedDate;
-        tempDate.setFullYear(evt.target.value);
-        this.focusedDate = tempDate;
-        this.drawCalendar(this.focusedDate);
+        const selectedYear = parseInt(evt.target.value, 10);
+        // Skydda mot ogiltiga datum som 29 februari
+        const day = Math.min(this.focusedDate.getDate(), new Date(selectedYear, this.focusedDate.getMonth() + 1, 0).getDate());
+        const newDate = new Date(selectedYear, this.focusedDate.getMonth(), day);
+        this.focusedDate = newDate;
     }
     earliestSelectableYear() {
         if (this.afMinDate)
@@ -452,20 +442,7 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
             if (valid.length > 0)
                 this.selectedDates = valid;
         }
-        if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
-            this.focusedDate = this.afInitFocusDate;
-        }
-        else if (this.selectedDates.length > 0) {
-            this.focusedDate = this.selectedDates
-                .slice()
-                .sort((a, b) => a.getTime() - b.getTime())[0];
-        }
-        else {
-            this.focusedDate = new Date();
-        }
-        this.drawCalendar(this.focusedDate);
-    }
-    componentWillUpdate() {
+        this.determineFocusedDate();
         this.drawCalendar(this.focusedDate);
     }
     async componentDidLoad() {
@@ -486,18 +463,18 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         };
     }
     render() {
-        return (h("div", { key: 'a65aa1b63553ff82c432a81fa9fd9821b88a39ab', class: {
+        return (h("div", { key: '2951c3cb75fbace29267998e7e17ed48fd7c934f', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '9cdea2a354a094a7dbe68bc7dd796143ed21acb6', class: "digi-calendar__header" }, h("div", { key: '3731070e6c432b2bed6985034db41b141a27214e', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '06e3d06b3ef6d7ad262f9eeb927a12167ca8a48b', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+            }, 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) => {
                 this.selectMonth(evt);
-            } }, this.months.map((month, index) => {
+            } }, _t.calendar.months.map((month, index) => {
             return h("option", { value: index }, month);
-        })), h("digi-form-select", { key: '60bde04287db50b5d887ddcb31839f1fe159b09a', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: '2ac58393e542efb8dab01da4aa3367107646f524', 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: '75b68570a03ee6f921a4b36f3fa08d6c7b52c277', class: "digi-calendar__header" }, h("div", { key: 'c4a4f28576b93368e1eca7a0fab5f88866b98cf7', class: "digi-calendar__header--month-step" }, h("button", { key: '69058f8bd1eff3d2e54a6436c36e5c4b8441422e', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
-                ', föregående månad', onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'af76697caee12f4f88920cd0fdb869b02f2b9ce5', slot: "icon", "aria-hidden": "true" }), h("span", { key: '6a0692868882f344f0a32f9d73c0c0a0ddd2b826', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '9224acc84fc325ff9d15dbfc8a9dd6592f11e9f8', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '15346caa9359c8eed3c14315b7fd862ed4786bf6', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
-                ', nästa månad', onClick: () => this.addMonth() }, h("span", { key: '69046c2421fc47d7e840ce79a30ea201846872b1', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '0c08338d76c0137d4a001cef22d2eff8d8b347ea', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'f49051c6fe7d5f9aa922988a681c6fc6ed981ff8', 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: 'e1b09f2fb0c93c46804dfce34ac2e9e367a9d79d', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'bc8915a5cbf3093cab17fb2778f892e1fd099d9a' }, h("tr", { key: '1b72c4136c864d3af56b1ab9db8b2963a7b0fbca', role: "row" }, this.afShowWeekNumber && (h("th", { key: 'ab422d5c5e5a23b9debdb9225a53430d4f8ec302', 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: 'af2273dae429b8d3d67f5df853d49f6508fe8f41', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            } }, 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) => {
             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));
@@ -512,16 +489,18 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: '081dffb3256ce8febd43fc0842bed7bee26cd228', name: "calendar-footer" })));
+        })))), h("slot", { key: 'a1d6061116378a7f60fbc8d779999db45cf04b86', name: "calendar-footer" })));
     }
     static get watchers() { return {
+        "focusedDate": ["focusedDateChanged"],
+        "afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
         "afSelectedDate": ["afSelectedDateChangeHandler"],
         "afSelectedDates": ["afSelectedDatesChangeHandler"]
     }; }
     static get style() { return DigiCalendarStyle0; }
 }, [6, "digi-calendar", {
         "afId": [1, "af-id"],
-        "afInitFocusDate": [16],
+        "afOpenCalendarTo": [16],
         "afShowWeekNumber": [4, "af-show-week-number"],
         "afSelectedDate": [16],
         "afSelectedDates": [16],
@@ -532,8 +511,11 @@ const Calendar = /*@__PURE__*/ proxyCustomElement(class Calendar extends H {
         "afYearSelect": [4, "af-year-select"],
         "selectedDates": [32],
         "focusedDate": [32],
-        "dirty": [32]
+        "dirty": [32],
+        "activeCalendar": [32]
     }, [[4, "focusin", "focusoutHandler"], [8, "click", "clickHandler"]], {
+        "focusedDate": ["focusedDateChanged"],
+        "afOpenCalendarTo": ["afOpenCalendarToChangeHandler"],
         "afSelectedDate": ["afSelectedDateChangeHandler"],
         "afSelectedDates": ["afSelectedDatesChangeHandler"]
     }]);

package/components/{p-08cf2c0e.js → p-903a27d9.js}

@@ -11,6 +11,7 @@ const common = {
     required: 'Obligatoriskt',
     optional: 'Frivilligt',
     of: 'av',
+    and: 'och',
     today: 'Idag',
     cancel: 'Avbryt',
     canceled: 'Avbruten',
@@ -26,6 +27,24 @@ const common = {
 };
 const calendar = {
     screenReaderInstructions: 'För navigering mellan månader med piltangenterna, använd inte den virtuella markören.',
+    year: 'År',
+    month: 'Månad',
+    months: [
+        'januari',
+        'februari',
+        'mars',
+        'april',
+        'maj',
+        'juni',
+        'juli',
+        'augusti',
+        'september',
+        'oktober',
+        'november',
+        'december'
+    ],
+    previousMonth: 'föregående månad',
+    nextMonth: 'nästa månad',
     week: 'Vecka',
     weekdays: {
         mon: 'Måndag',

package/components/{p-e3961597.js → p-9cbf7565.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-e5abfc2d.js';
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { b as FormInputType, a as FormInputMode, F as FormInputButtonVariation, d as FormInputVariation, c as FormInputValidation } from './p-c8429245.js';
-import { d as defineCustomElement$5 } from './p-98765f91.js';
+import { d as defineCustomElement$5 } from './p-504118d4.js';
 import { d as defineCustomElement$4 } from './p-49a67d97.js';
 import { d as defineCustomElement$3 } from './p-bd19f8cd.js';
 import { d as defineCustomElement$2 } from './p-e795bd84.js';
@@ -27,7 +27,6 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
         this.hasButton = undefined;
         this.dirty = false;
         this.touched = false;
-        this.isEditing = false;
         this.afLabel = undefined;
         this.afLabelDescription = undefined;
         this.afType = FormInputType.TEXT;
@@ -66,6 +65,9 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
     }
     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();
@@ -98,8 +100,8 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
             '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 &&
@@ -131,7 +133,6 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
             this.afOnTouched.emit(e);
             this.touched = true;
         }
-        this.isEditing = false;
         this.afOnBlur.emit(e);
     }
     changeHandler(e) {
@@ -163,10 +164,10 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
         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))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -212,7 +213,6 @@ const FormInput = /*@__PURE__*/ proxyCustomElement(class FormInput extends H {
         "hasButton": [32],
         "dirty": [32],
         "touched": [32],
-        "isEditing": [32],
         "afMGetFormControlElement": [64]
     }, undefined, {
         "value": ["onValueChanged"],

package/components/{p-5010c1e6.js → p-aa63b60e.js}

@@ -49,7 +49,7 @@ import './p-d1886fff.js';
 import './p-a6ca40fc.js';
 import './p-b0e88537.js';
 import './p-cdcaf0eb.js';
-import { _ as _t } from './p-08cf2c0e.js';
+import { _ as _t } from './p-903a27d9.js';
 import { d as defineCustomElement$2 } from './p-4a9363d9.js';
 import { d as defineCustomElement$1 } from './p-71172b7c.js';
 

package/components/{p-05a97800.js → p-cb20ea78.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './p-e5abfc2d.js
 import { r as randomIdGenerator } from './p-ffe5c0e8.js';
 import { l as logger } from './p-e3d2e899.js';
 import { a as FormSelectVariation, F as FormSelectValidation } from './p-f447b984.js';
-import { d as defineCustomElement$7 } from './p-98765f91.js';
+import { d as defineCustomElement$7 } from './p-504118d4.js';
 import { d as defineCustomElement$6 } from './p-49a67d97.js';
 import { d as defineCustomElement$5 } from './p-1e698eb3.js';
 import { d as defineCustomElement$4 } from './p-bd19f8cd.js';
@@ -134,17 +134,17 @@ const FormSelect = /*@__PURE__*/ proxyCustomElement(class FormSelect extends H {
             : false;
     }
     render() {
-        return (h("div", { key: '383eae4d2e740bd424d76a095abe09e98602c0a0', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '9cd23532e83bbd843f6c6480562cbffcbe1780a2', class: "digi-form-select__label-group" }, h("digi-form-label", { key: '58ea8cf5d755a8ba5b84e9010097ad3d2b6f8576', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '7c8a35e191cde25892e107415b453a6787a9ab23', class: "digi-form-select__select-wrapper" }, h("select", { key: 'ad62a59613e26f44eaaec5725174e0256028d886', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h("div", { key: '09b309b4f5b1397162fa1b398f58d1696ebd2479', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: 'e2d824232a6630111b87f325e3e5583d2dd08bd3', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'f60f04f30a9594d39b439239230441241d4fbe6c', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '621062b207232904aa2a6a6fbaa93ebedb146210', class: "digi-form-select__select-wrapper" }, h("select", { key: 'd199ce9bf648952a1309f8ac8914b9da59f15f98', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                 ? 'true'
-                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '83b51b96cc3f59fa33ca7233a887e19466aadd1a', class: {
+                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '1537f5bbf4d76e607663b241913912e034af2006', class: {
                 'digi-form-select__select-option': true,
                 'digi-form-select__select-option--initial-value': true
             }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
             return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
-        })), h("digi-icon-input-select-marker", { key: 'f2556cbc4c38b65ce652511b03acb59f5082c577', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '619dfa80c868526ed3ff28d120f3798743f9c011', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), h("digi-icon-input-select-marker", { key: '43cc5722be7b769a59661c6128c3bd3149172adc', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '74e420460572eeb8d9ca308190dc33191b608b4e', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: 'f29d471016704b271008e81fa06320ada1ecfb4f' })), h("div", { key: '4393c0e4fcf3a36bcd034f60ec6bbe49eedac057', class: "digi-form-select__footer" }, h("div", { key: '579755d6a2a9c3c5a9573beae36454cdb3d2bd3f', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '53f717a8fdce19710c9e1761476e522f7151e24a', "af-variation": this.afValidation }, this.afValidationText))))));
+            } }, h("slot", { key: 'd77e562c340452ec68c7dedda478c4d66933324a' })), h("div", { key: '81a982666ecded6b8b614bff3598b4dcaf91b2af', class: "digi-form-select__footer" }, h("div", { key: '5d6c5b802eba0c2238dec9930a6655f3ce57342c', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'f2c347f0404db61bace89dd4aa7e98c50b7ac30d', "af-variation": this.afValidation }, this.afValidationText))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/custom-elements.json

@@ -207,15 +207,15 @@
         },
         {
           "name": "af-multiple-dates",
-          "description": "Sätt denna till true för att kunna markera mer en ett datum i kalendern. Förvalt är false"
+          "description": "Sätt denna till true för att tillåta val av flera datum"
         },
         {
           "name": "af-show-week-number",
-          "description": "Visa veckonummer i kalender. Förvalt är false"
+          "description": "Visa veckonummer i kalender"
         },
         {
           "name": "af-year-select",
-          "description": "Sätt denna till true för att kunna välja år genom en väljare. Förvalt är false"
+          "description": "Sätt denna till true för att visa väljare för år"
         }
       ]
     },
@@ -232,31 +232,31 @@
         },
         {
           "name": "af-close-on-select",
-          "description": "Sätt denna till true om kalendern ska stängas när användaren väljer ett datum. Förvalt är false"
+          "description": "Sätt denna till true om kalendern ska stängas när användaren väljer ett datum"
         },
         {
           "name": "af-disable-validation",
-          "description": "Sätt denna till true för att stänga av komponentens egna validering."
+          "description": "Sätt denna till true för att stänga av komponentens egna validering"
         },
         {
           "name": "af-id",
-          "description": "Sätter ett id attribut."
+          "description": "Sätter attributet id för inputfältet, och utgör basen för andra id:n i komponenten"
         },
         {
           "name": "af-label",
-          "description": "Texten till labelelementet"
+          "description": "Texten till etiketten"
         },
         {
           "name": "af-label-description",
-          "description": "Valfri beskrivande text"
+          "description": "Beskrivande text som bör beskriva det förväntade formatet och/eller andra krav"
         },
         {
           "name": "af-multiple-dates",
-          "description": "Sätt denna till true för att kunna markera mer en ett datum i kalendern. Förvalt är false"
+          "description": "Sätt denna till true för att kunna markera mer en ett datum i kalendern"
         },
         {
           "name": "af-name",
-          "description": "Sätter attributet 'name' på det inre input-elementet."
+          "description": "Sätter attributet 'name' på det inre input-elementet"
         },
         {
           "name": "af-open-calendar-aria-label",
@@ -264,15 +264,15 @@
         },
         {
           "name": "af-required",
-          "description": "Sätter attributet 'required'."
+          "description": "Sätter attributet 'required'"
         },
         {
           "name": "af-required-text",
-          "description": "Sätter text för afRequired."
+          "description": "Sätter text för afRequired"
         },
         {
           "name": "af-show-week-number",
-          "description": "Visa veckonummer i kalender. Förvalt är false"
+          "description": "Visa veckonummer i kalender"
         },
         {
           "name": "af-validation",
@@ -280,15 +280,15 @@
         },
         {
           "name": "af-validation-disabled-date",
-          "description": "Sätter valideringsmeddelandet"
+          "description": "Sätter valideringsmeddelandet för den inbyggda valideringen av min/max-datum"
         },
         {
           "name": "af-validation-text",
-          "description": "Sätter valideringsmeddelandet"
+          "description": "Sätter valideringsmeddelandet för egen validering"
         },
         {
           "name": "af-validation-wrong-format",
-          "description": "Sätter valideringsmeddelandet"
+          "description": "Sätter valideringsmeddelandet för den inbyggda formatvalideringen"
         },
         {
           "name": "af-year-select",
@@ -683,19 +683,19 @@
       "attributes": [
         {
           "name": "af-all-categories",
-          "description": "Ifall listan ska börja med en 'Alla kategorier' kategori"
+          "description": "Ifall listan ska börja med en knapp för 'Alla kategorier'"
         },
         {
           "name": "af-all-categories-selected",
-          "description": "Ifall 'Alla kategorier' kategorin ska börja vald"
+          "description": "Ifall 'Alla kategorier' kategorin ska vara vald från start"
         },
         {
           "name": "af-all-categories-text",
-          "description": "Namnet på 'Alla kategorier' kategorin"
+          "description": "Namnet på 'Alla kategorier'-kategorin"
         },
         {
           "name": "af-hide-toggle",
-          "description": "Visa alla kategorier och dölj knappen för att \"visa fler/visa färre"
+          "description": "Visa alla kategorier och dölj knappen för att visa fler/färre"
         },
         {
           "name": "af-multiselect",
@@ -703,7 +703,7 @@
         },
         {
           "name": "af-start-collapsed",
-          "description": "Ifall listan ska var kollapsad från början"
+          "description": "Ifall listan ska vara kollapsad från början"
         },
         {
           "name": "af-visible-collapsed",
@@ -1427,7 +1427,7 @@
         },
         {
           "name": "af-disable-validation",
-          "description": "Inaktiverar valideringen"
+          "description": "Döljer valideringsmeddelandet."
         },
         {
           "name": "af-id",
@@ -1504,7 +1504,7 @@
         },
         {
           "name": "af-disable-validation",
-          "description": "Inaktiverar valideringen"
+          "description": "Döljer valideringsmeddelandet."
         },
         {
           "name": "af-empty-search-message",