@designsystem-se/af 38.1.0 → 38.2.1-beta.0

package/hydrate/index.mjs

@@ -9442,6 +9442,8 @@ class CalendarDatepicker {
         this.afCloseOnSelect = false;
         this.afOpenCalendarTo = undefined;
         this.afErrorMessageIsAlert = true;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
     }
     afDisableValidationChangeHandler(newVal) {
         if (!newVal) {
@@ -9773,9 +9775,9 @@ class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (hAsync(Host, { key: '6b080d933e012fe050aee0181f927c3252b0bb7e', tabindex: -1 }, hAsync("div", { key: 'ec59a7f209f7a5e06c62d4443fbca980b1030d12', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '2bf3bd4f0a82c14c4fb04610dab19767fbba595d', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: 'ebde8123611c021b60104f75c2e4085e35fb4697', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
+        return (hAsync(Host, { key: 'a22b366eece8bdf2a6d66ba7b4561093391ad16d', tabindex: -1 }, hAsync("div", { key: '5ec3557df78bb012f2e10f1852252e78e2470ee3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '1215a13021718ac98ad2a4a7a5bae3c456385124', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: '8794d312452fe11f0f9052bbdd238e5570ec55f0', ref: (el) => (this._input = el), 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) => {
+                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, afAnnounceIfOptional: this.afAnnounceIfOptional, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseInput(evt);
             }, onAfOnBlur: (evt) => {
@@ -9790,11 +9792,11 @@ class CalendarDatepicker {
                 e.preventDefault();
                 const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
                 focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-            } }, hAsync("button", { key: '04df5ccb789271d7ba2f693b740f316301f9fae0', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            } }, hAsync("button", { key: 'c953ddf0c99cfd3b892941da7da4a887b342fd78', 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" }, hAsync("digi-icon-calendar-alt", { key: '65b9a472f629bbaa46a64c8a304f358da76b0830', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: 'd0df89ce680bb2a0ca7f311b2c0ead0f72dc30b6', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '9796876e15e88b1599d772863c29fc472da24c69', 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" }, hAsync("digi-icon-calendar-alt", { key: '46c7387d404b77911b97f31c10e7147bd436c7e3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: '91894a4219afa79d913f558f5d1cc6b410b535ce', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '989fc17ea7a95aa014a26e09f7db7f59fe53a36b', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), hAsync("digi-calendar", { key: 'bd5f34bcdbcb2276b5080c43479337c514861ba9', 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) => {
+            : ''), hAsync("digi-calendar", { key: '6e62fb845769eca0a9b8cb21e4a09a5620804d42', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onKeyDown: (e) => {
@@ -9805,7 +9807,7 @@ class CalendarDatepicker {
                     return;
                 e.preventDefault();
                 this.focusOnCalendarInput();
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'fc150d20f14731e8f67f38c6042e8af4e24eae38', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'd9f3eb470b29a0ab96134f1e4666743efacd7448', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -9846,6 +9848,8 @@ class CalendarDatepicker {
             "afCloseOnSelect": [4, "af-close-on-select"],
             "afOpenCalendarTo": [16],
             "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
+            "afAnnounceIfOptional": [4, "af-announce-if-optional"],
+            "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
             "showWrongFormatError": [32],
             "showDisabledDateError": [32],
             "showCalendar": [32],
@@ -20835,7 +20839,7 @@ class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (hAsync(Host, { key: '93a52532d5ee8e2b89982b3d06509c16b3656bce', tabindex: -1 }, hAsync("div", { key: '3f2fe30e35c36080d80fdec5c57abf8e310ae14b', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: 'a45c26da379bff48830f0b03ceebcf24b06c3b17', class: "digi-form-checkbox__input", ref: (el) => {
+        return (hAsync(Host, { key: 'e8ca1dfe96537dd438a4b6c206adfc7c9fd64d9c', tabindex: -1 }, hAsync("div", { key: '850911b7ffdcea222b12c2c883cf93b63f703b4f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: '923a49d0402e6b3034d3e8e6d43033692695c830', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -20843,7 +20847,7 @@ class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: '54cd68f1c10fd023e9dd81bd0fabb2920b911c12', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: 'c7184f48868d38d04485a48f214cc3c37d862ba4', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'afc00a7de3cef740bdbf23607cd9247887752759', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: 'dccbd4e83dbc757483a18ac22d1539ef83dfb534', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: '1cbc88be9d74dab3e04472bc9462712377447d4a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'bdab264d9d13520858c581d2664c0d53171a1415', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20886,6 +20890,20 @@ class FormCheckbox {
     }; }
 }
 
+/**
+ * Small utility for adding Stencil component scope to dynamically inserted elements
+ * (e.g. svg for title logotypes)
+ */
+function applyStencilScope(host, root) {
+    const scopeClasses = [...host.classList].filter(c => c.startsWith('sc-'));
+    if (!scopeClasses.length)
+        return;
+    root.classList.add(...scopeClasses);
+    root.querySelectorAll('*').forEach(el => {
+        el.classList.add(...scopeClasses);
+    });
+}
+
 const formErrorListCss = ".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list>li.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";
 var DigiFormErrorListStyle0 = formErrorListCss;
 
@@ -20912,6 +20930,24 @@ class FormErrorList {
     async afMSetHeadingFocus() {
         this.setHeadingFocus();
     }
+    connectedCallback() {
+        this.observer = new MutationObserver((mutations) => {
+            const hasChildChanges = mutations.some(mutation => mutation.type === 'childList');
+            if (hasChildChanges) {
+                const hostElement = this.hostElement.querySelector('.digi-form-error-list');
+                applyStencilScope(hostElement, hostElement);
+            }
+        });
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
     componentDidLoad() {
         this.setHeadingFocus();
         this.afOnReady.emit();
@@ -20938,7 +20974,7 @@ class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (hAsync("div", { key: '59bc43d4b3dd0149647b50203cc1ae585d829006', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: 'a2b034276ff7549c9c0711202020e3753da7808d', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '3a61c65373b92a73694770f851c6727e27f853e7', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: 'a088b4d084f5a6db85cedcb4f469f4dff803f8f6', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: '794c42cdece0d06945255b70a96a6992eb4dcd4c' }))));
+        return (hAsync("div", { key: '9471a904e95c6304644d884e15aac90d3b0fbad1', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: '13a8bf3037570f929f470cc2a531156d552ca53a', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '8e8ef106286f426b0cbcfd904407582e79e8ce24', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: '51175a8da94efe46a262ce365994aa3c23983f2e', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: 'b9f5287d0e2c0326100a094a48fa5e7ab314b92f' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return DigiFormErrorListStyle0; }
@@ -22946,6 +22982,10 @@ class FormSelectFilter {
         this.afOnSelect = createEvent(this, "afOnSelect", 7);
         this.afOnQueryChanged = createEvent(this, "afOnQueryChanged", 7);
         this._searchQuery = '';
+        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
+        this._valueIsMaster = false;
+        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
+        this._updatingValueInternally = false;
         this.isOpen = false;
         this.focusListItemIndex = 0;
         this.focusInList = false;
@@ -22979,17 +23019,19 @@ class FormSelectFilter {
         this.afFilterButtonAriaDescribedby = undefined;
         this.afErrorMessageIsAlert = true;
     }
-    onValueChanged(value) {
-        const joinedArray = [...value, ...this._selectedItems];
-        const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
-        if (noDuplicates && noDuplicates.length > 0) {
-            if (this.afMultipleItems) {
-                this._selectedItems = [...noDuplicates];
-            }
-            else {
-                this._selectedItems = [noDuplicates[0]];
-            }
+    onValueChanged(newValue) {
+        let parsedValue;
+        if (typeof newValue === 'string') {
+            parsedValue = newValue ? JSON.parse(newValue) : [];
+        }
+        else {
+            parsedValue = newValue || [];
+        }
+        if (!this._updatingValueInternally) {
+            this._valueIsMaster = true;
         }
+        this.value = parsedValue;
+        this.syncValueAndSelectedListItems('valueChange');
     }
     handleListItems() {
         if (this.afListItems) {
@@ -23005,15 +23047,7 @@ class FormSelectFilter {
                 }
                 this.giveItemsValueIfNoneExist();
                 this.sortListAlphabetically();
-                const selectedListItems = this._afListItems.filter((item) => item.selected);
-                if (selectedListItems && selectedListItems.length > 0) {
-                    this._selectedItems = [...selectedListItems];
-                    this.afOnSelect.emit(this._selectedItems);
-                    this.value = this._selectedItems;
-                }
-                else if (this.value && this.value.length > 0) {
-                    this._selectedItems = [...this.value];
-                }
+                this.syncValueAndSelectedListItems('afListItemsChange');
                 this.filterResults();
             }
             catch (e) {
@@ -23065,14 +23099,58 @@ class FormSelectFilter {
     focusOnElement() {
         this._toggleButton.focus();
     }
-    debounce(func, timeout = 300) {
-        let timer;
-        return (...args) => {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                func.apply(this, args);
-            }, timeout);
-        };
+    componentWillLoad() {
+        /* Stencil @Watch does not run for the initial prop value.
+         * Given that Angular Control Value Accessors writeValue often sets `value` before willLoad —
+         * we need to force a value check here with bootstrapInitialValue .*/
+        this.bootstrapInitialValue();
+        this.handleListItems();
+    }
+    bootstrapInitialValue() {
+        if (typeof this.value === 'string') {
+            const parsed = this.value ? JSON.parse(this.value) : [];
+            this._updatingValueInternally = true;
+            this.value = parsed;
+            this._updatingValueInternally = false;
+        }
+        if (Array.isArray(this.value) && this.value.length > 0) {
+            this._valueIsMaster = true;
+        }
+    }
+    /**
+     * Keep `value` and `afListItems[].selected` in sync.
+     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
+     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
+     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
+     * does not get feedback loops on prop sync.
+     */
+    syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
+        if (!this._afListItems) {
+            return;
+        }
+        if (whereDidTheChangeComeFrom === 'afListItemsChange') {
+            if (this._valueIsMaster) {
+                this.applyValueToListItems(this.value);
+            }
+            else {
+                this._selectedItems = this._afListItems.filter((item) => item.selected);
+                this.setValueInternally([...this._selectedItems]);
+            }
+            return;
+        }
+        this.applyValueToListItems(this.value);
+    }
+    applyValueToListItems(value) {
+        const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
+        this._afListItems.forEach((item) => {
+            item.selected = selectedValues.has(item.value);
+        });
+        this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
+    }
+    setValueInternally(nextValue) {
+        this._updatingValueInternally = true;
+        this.value = nextValue;
+        this._updatingValueInternally = false;
     }
     setClosed(focusToggleButton = false) {
         this.isOpen = false;
@@ -23131,9 +23209,6 @@ class FormSelectFilter {
         this.setClosed(true);
         this.afOnFilterClosed.emit();
     }
-    componentWillLoad() {
-        this.handleListItems();
-    }
     setFocusItem() {
         const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
         if (element) {
@@ -23238,16 +23313,14 @@ class FormSelectFilter {
     }
     filterResults() {
         if (this._searchQuery && this._searchQuery.length > 0) {
-            this._filteredResult = [
-                ...this._afListItems.filter((item) => {
-                    return item.label
-                        .toLowerCase()
-                        .includes(this._searchQuery.toLowerCase());
-                })
-            ];
+            this._filteredResult = this._afListItems.filter((item) => {
+                return item.label
+                    .toLowerCase()
+                    .includes(this._searchQuery.toLowerCase());
+            });
         }
         else {
-            this._filteredResult = [...this._afListItems];
+            this._filteredResult = this._afListItems;
         }
     }
     inputSearchKeyboardHandler(e) {
@@ -23267,7 +23340,7 @@ class FormSelectFilter {
     }
     resetSelectItems(close = false) {
         this._selectedItems = [];
-        this.value = [];
+        this.setValueInternally([]);
         this.afOnSelect.emit([]);
         this._searchQuery = '';
         this.filterResults();
@@ -23297,7 +23370,7 @@ class FormSelectFilter {
             this._selectedItems = [item];
             this.emitFilterClosedEvent();
         }
-        this.value = this._selectedItems;
+        this.setValueInternally([...this._selectedItems]);
         this.afOnSelect.emit(this._selectedItems);
         this.filterResults();
     }
@@ -23388,15 +23461,15 @@ class FormSelectFilter {
             } }, hAsync("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (hAsync(Host, { key: '62acc267c182d80703024115c50dddec8413ad3c', tabindex: -1 }, hAsync("div", { key: 'feea697aee9107e7b90792251c7661ff0ada1a98', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, hAsync("digi-form-label", { key: '90a45c8dc587e1d236f27b03c0e2f71dc8477b7f', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("digi-util-keydown-handler", { key: '703080c3a43d0d8ccd233560b2287d9127a87a8b', onAfOnEsc: () => this.escHandler() }, hAsync("button", { key: '54498ff1eb5b930a8173c4dfdb950b8a94ba590e', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, hAsync("div", { key: '4b913f6134090cb598f7dbc331c290ef655f687e', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, hAsync("digi-icon-check", { key: 'ccb42c85db8f9bf3d39fd3864b8c02aacb98c6d9', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), hAsync("span", { key: '704782f9bc33016df16c8492b29721723ed591fb', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), hAsync("digi-icon-chevron-down", { key: '83211db95b19280716ee81611a183816fa00b1d0', class: "digi-form-select-filter__toggle-icon" })), hAsync("div", { key: 'a88f7aa3f0923e34b0f8866a936261ecbb0701e6', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (hAsync(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, hAsync("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, hAsync("digi-form-label", { key: '99d0e29f7dad712882c0a3c5fd3f468af7dd5c55', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("digi-util-keydown-handler", { key: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, hAsync("button", { key: '260c22654935d7422d5fc30a47fbd0c37ec00f0c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, hAsync("div", { key: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, hAsync("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), hAsync("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), hAsync("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), hAsync("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, hAsync("fieldset", { key: 'b79878e2277511c2543663776189ba0a42047894' }, hAsync("div", { key: 'a0d832fe7834a55eb92bf48a9182057886d5e82e', class: "digi-form-select-filter__header" }, hAsync("legend", { key: '59acc3f35f85559e958656e00216ad9439448344', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), hAsync("digi-form-input", { key: 'ed1ba547b5c69791779d0127a58dff9c86a48976', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, hAsync("fieldset", { key: 'f98295e8e804f93428489daf5844df9854ed6053' }, hAsync("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, hAsync("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), hAsync("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);
-            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), hAsync("div", { key: '793751dc225d514f42af1a9ec017b7faa9d363c5', class: "digi-form-select-filter__scroll" }, hAsync("digi-util-keydown-handler", { key: '57007b01069dee8bfa0154cbe6d35d91f20894fd', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, hAsync("ul", { key: '45d0622dc2e50e8dcba11d21696faa0a6b230516', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), hAsync("div", { key: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, hAsync("digi-util-keydown-handler", { key: '656253e1dba64d2906ae9b195063300fe5cbd900', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, hAsync("ul", { key: '4a42a8ee02e3921710aa00826b31558ed1f9a485', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -23405,11 +23478,11 @@ class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (hAsync("li", { key: '1d1a778273c5ac8f3d30b65048162e47b19f00cd', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (hAsync("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                 ? 'false'
                 : this.afRequired
                     ? 'true'
-                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (hAsync("digi-icon-check", { key: 'aa7ea145f0ad6f125f9df0ba11aaf90d0113c20c', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (hAsync("digi-icon-check", { key: '43f446e70c707681dd1de50e11af511e8c4d060e', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (hAsync("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                         ? 'false'
@@ -23425,9 +23498,9 @@ class FormSelectFilter {
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (hAsync("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (hAsync("div", { key: '428fecfda65ca5dab87d15049010462f38bf49f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (hAsync("digi-button", { key: 'e8ed222dada0ef4e78d3d66062c7d432e5231671', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), hAsync("digi-util-keydown-handler", { key: 'd151b5df0a4002633e0966d44d0482183b7ecfe5', onAfOnUp: () => this.setFocusItem() }, hAsync("digi-button", { key: '207d29e920ec9db9aa2f2ba29bd650453210e8b3', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (hAsync("div", { key: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (hAsync("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), hAsync("digi-util-keydown-handler", { key: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, hAsync("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), hAsync("div", { key: '514a8e6c957b4293f095b0718139ac47e64648ab', class: "digi-form-select__footer" }, hAsync("div", { key: '3b5ceffdcbf3f1fd4671bc73fdea48a573cd0379', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (hAsync("digi-form-validation-message", { key: 'faab034ee053826ebd82fda81273d0f815b648ec', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), hAsync("div", { key: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, hAsync("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (hAsync("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "38.1.0",
+  "version": "38.2.1-beta.0",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",