@designsystem-se/af 35.4.1-beta.0 → 36.0.0

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

@@ -1,16 +1,23 @@
 import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator/randomIdGenerator.util";
+import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
 /**
  * @slot radiobuttons
  *
  * @swedishName Radiogrupp
+ *
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
  */
 export class FormRadiogroup {
     constructor() {
         this.radiobuttons = undefined;
+        this.afId = randomIdGenerator('digi-form-radiogroup');
         this.afValue = undefined;
         this.value = undefined;
         this.afName = randomIdGenerator('digi-form-radiogroup');
+        this.afValidation = FormRadiogroupValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afErrorMessageIsAlert = true;
     }
     OnAfValueChange(value) {
         this.value = value;
@@ -19,11 +26,25 @@ export class FormRadiogroup {
         this.afValue = value;
         this.setRadiobuttons(value);
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
+     * @en Listens for when focus is set on the custom element and propagates it down to the first radionutton in the group.
+     */
+    focusOnGroup() {
+        const radioButtons = this.radiobuttons;
+        if (radioButtons.length > 0) {
+            radioButtons[0].focus();
+        }
+    }
     radiobuttonChangeListener(e) {
         if (Array.from(this.radiobuttons).includes(e.target)) {
             e.preventDefault();
             this.afValue = e.detail.target.value;
-            this.afOnGroupChange.emit(e);
+            this.afOnGroupChange.emit(e.detail.target.value);
         }
     }
     componentDidLoad() {
@@ -41,9 +62,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: '87664130d894a0a76cafb15b184ba1bc970f2c09' }, h("div", { key: '5ad880fd119a958646af1395de884533c19cb677', class: {
+        return (h(Host, { key: '702853b1b724d80082952fa4ae896663207d169f', tabindex: -1 }, h("div", { key: '7242ba41b2ca1eb451ca26718b490e1548410c81', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '87ca289dca9a3ef8a95ee32c149594ab08d58399', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: 'e4da7e705be3248e7edc088969031d1dc671cf35' })))));
+            } }, h("digi-util-mutation-observer", { key: '29a1e29b857220be7339c3e9fa57e79502e2dd0d', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '2009fdee569e8744fb4f7cce68a824154abef6bf' }))), h("div", { key: '28f14b57f29baee0c2f3b8ce99e68a18868b5c1f', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'e39cf265b5dbdf2ecb32eeb80ec7e5de9f916f32', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }
@@ -59,6 +80,29 @@ export class FormRadiogroup {
     }
     static get properties() {
         return {
+            "afId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Input id attribute. Defaults to random string."
+                        }],
+                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-id",
+                "reflect": false,
+                "defaultValue": "randomIdGenerator('digi-form-radiogroup')"
+            },
             "afValue": {
                 "type": "string",
                 "mutable": true,
@@ -128,6 +172,80 @@ export class FormRadiogroup {
                 "attribute": "af-name",
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-form-radiogroup')"
+            },
+            "afValidation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormRadiogroupValidation",
+                    "resolved": "FormRadiogroupValidation.ERROR | FormRadiogroupValidation.NEUTRAL | FormRadiogroupValidation.SUCCESS | FormRadiogroupValidation.WARNING",
+                    "references": {
+                        "FormRadiogroupValidation": {
+                            "location": "import",
+                            "path": "./form-radiogroup-validation.enum",
+                            "id": "src/components/_form/form-radiogroup/form-radiogroup-validation.enum.ts::FormRadiogroupValidation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set input validation status"
+                        }],
+                    "text": "S\u00E4tter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-validation",
+                "reflect": false,
+                "defaultValue": "FormRadiogroupValidation.NEUTRAL"
+            },
+            "afValidationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Set input validation message"
+                        }],
+                    "text": "S\u00E4tter valideringsmeddelandet"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-validation-text",
+                "reflect": false
+            },
+            "afErrorMessageIsAlert": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "If the value is true, the error message gets the attribute role=\"alert\".\nIf the error is shown together with multiple errors (for example after server-side validation), the value should be set to false."
+                        }],
+                    "text": "Om v\u00E4rdet \u00E4r true f\u00E5r felmeddelandet attributet role=\"alert\".\nOm felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska v\u00E4rdet s\u00E4ttas till false."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-error-message-is-alert",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -167,4 +285,13 @@ export class FormRadiogroup {
                 "methodName": "OnValueChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnGroup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -58,7 +58,7 @@ export class FormReceipt {
         return (h("div", { class: "digi-form-receipt__content" }, h("svg", { class: "digi-form-receipt__icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29" }, h("title", null, "Check mark"), h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-170 -32)" }, h("g", { transform: "translate(170 32.325)" }, h("g", { transform: "translate(0 .77495)" }, h("mask", { id: "b", fill: "white" }, h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), h("g", { transform: "translate(4.2177)" }, h("mask", { id: "a", fill: "white" }, h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), h("path", { class: "digi-form-receipt__infographic-primary", d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", fill: "#95C13E", mask: "url(#a)" })))))), h(this.afHeadingLevel, { class: "digi-form-receipt__heading", tabIndex: -1 }, this.afText), this.slotContent));
     }
     render() {
-        return (h("div", { key: 'b2eb6b974cce153f6cd93f20912f7256e67eed6f', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
+        return (h("div", { key: '5ab71f38768ce25bee9fbd1f9b0ad0e7a08d1f84', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     static get is() { return "digi-form-receipt"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { logger } from "../../../global/utils/logger";
 import { FormSelectValidation } from "./form-select-validation.enum";
@@ -9,6 +9,7 @@ import { FormSelectVariation } from "./form-select-variation.enum";
  * @enums FormSelectValidation - form-select-validation.enum
  * @enums FormSelectVariation - form-select-variation.enum
  * @swedishName Väljare
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet
  */
 export class FormSelect {
     constructor() {
@@ -32,8 +33,8 @@ export class FormSelect {
         this.afVariation = FormSelectVariation.MEDIUM;
         this.afValidation = FormSelectValidation.NEUTRAL;
         this.afValidationText = undefined;
-        this.afStartSelected = undefined;
         this.afAutofocus = undefined;
+        this.afErrorMessageIsAlert = true;
     }
     onValueChanged(value) {
         this.afValue = value;
@@ -41,6 +42,10 @@ export class FormSelect {
     onAfValueChanged(value) {
         this.value = value;
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
     getOptions() {
         this.checkIfPlaceholder();
         const options = this._observer.children;
@@ -65,8 +70,6 @@ export class FormSelect {
     }
     componentDidLoad() {
         this.getOptions();
-        this.afStartSelected &&
-            (this.afValue = this.optionItems[this.afStartSelected].value);
         this.afOnReady.emit();
     }
     /**
@@ -76,6 +79,14 @@ export class FormSelect {
     async afMGetFormControlElement() {
         return this._select;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual select element.
+     */
+    focusOnInput() {
+        var _a;
+        (_a = this._select) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     get cssModifiers() {
         return {
             'digi-form-select--small': this.afVariation === FormSelectVariation.SMALL,
@@ -122,17 +133,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h("div", { key: '3229809015adc00cc9d72e2ceccd783fa2215162', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '23ba9a3ec8e1cd49e7ae8ed424558203dcd5aeef', class: "digi-form-select__label-group" }, h("digi-form-label", { key: '4a06f529eb642bf5bb42c6a4e0ca3f2375d41bc1', 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: '516719a51585dbb0820f71bf157f1af7a4a6dbe6', class: "digi-form-select__select-wrapper" }, h("select", { key: '08f898cbf0872e3254b30027a441b3ed65b33ea9', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h(Host, { key: '564278041d6661785372ce699def75ecae69c1e7', tabindex: -1 }, h("div", { key: 'd406ba753d7a692dd4fef12028c6e582c0729237', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '57a815c752617b0189a0a451dfd9ac0b3140c4fc', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'ab54ac3e2dadbc98decb669df1b95d1a8bce6881', 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: '390f1562456c469c970e39223aaccd5d6f2e7bb8', class: "digi-form-select__select-wrapper" }, h("select", { key: '3583ca126d1aac3b4ea0b84aaf19eb2352b9dbfc', 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: 'ca2e44c7c31d3391740238628b30dc1c451c7c4f', class: {
+                : 'false', "aria-describedby": `${this.afId}--validation-message`, 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: 'b8018bae71f5a61781a3d29e76a551f5761d338c', 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: '697386c7124edb812449f837abf4a563e291fd36', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '56b978d5a2d0b85686f30406842dfe7ada5965de', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), h("digi-icon-input-select-marker", { key: '9858368762d4c40784a2d0d41f708224d739784f', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '5f2a46ed7cab5279361bf7c6f5b010c23d60c79a', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: 'a452fcb662fd8e3b6496578aa48197c4046d1c85' })), h("div", { key: '6601c703076e46e57062dfef35b261517195ae0e', class: "digi-form-select__footer" }, h("div", { key: 'd02f9cab5bd9d28ff46244c85b7f59cbe6fa8056', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'deaddef64859a3a71b7a1a4b4efed3dd6c483e20', "af-variation": this.afValidation }, this.afValidationText))))));
+            } }, h("slot", { key: 'ed720f6760ffc1875712705218b6049018ef0f62' })), h("div", { key: 'fef47d914b0133b26b6a945aa7297a78a06f1ce5', class: "digi-form-select__footer" }, h("div", { key: 'b20834a4be9b1e3711f8ff9c3766ffb2eeb42a4a', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '7f13b2333b5cf62006c727648c3a22776dd44b7e', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select"; }
     static get encapsulation() { return "scoped"; }
@@ -430,9 +441,9 @@ export class FormSelect {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Disables the validation."
+                            "text": "Hides the validation message."
                         }],
-                    "text": "Inaktiverar valideringen"
+                    "text": "D\u00F6ljer valideringsmeddelandet."
                 },
                 "getter": false,
                 "setter": false,
@@ -519,37 +530,34 @@ export class FormSelect {
                 "attribute": "af-validation-text",
                 "reflect": false
             },
-            "afStartSelected": {
-                "type": "number",
+            "afAutofocus": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [{
-                            "name": "deprecated",
-                            "text": "Anv\u00E4nd afValue ist\u00E4llet"
-                        }, {
                             "name": "en",
-                            "text": "Sets initial selected value."
+                            "text": "Input autofocus attribute"
                         }],
-                    "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde."
+                    "text": "S\u00E4tter attributet 'autofocus'."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-start-selected",
+                "attribute": "af-autofocus",
                 "reflect": false
             },
-            "afAutofocus": {
-                "type": "boolean",
+            "afErrorMessageIsAlert": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
                     "references": {}
                 },
                 "required": false,
@@ -557,14 +565,15 @@ export class FormSelect {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Input autofocus attribute"
+                            "text": "If the value is true, the error message gets the attribute role=\"alert\".\nIf the error is shown together with multiple errors (for example after server-side validation), the value should be set to false."
                         }],
-                    "text": "S\u00E4tter attributet 'autofocus'."
+                    "text": "Om v\u00E4rdet \u00E4r true f\u00E5r felmeddelandet attributet role=\"alert\".\nOm felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska v\u00E4rdet s\u00E4ttas till false."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-autofocus",
-                "reflect": false
+                "attribute": "af-error-message-is-alert",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -728,4 +737,13 @@ export class FormSelect {
                 "methodName": "onAfValueChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { h, Fragment } from "@stencil/core";
+import { h, Fragment, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { logger } from "../../../global/utils/logger";
 import { detectClickOutside } from "../../../global/utils/detectClickOutside";
@@ -10,6 +10,7 @@ import { FormSelectFilterValidation } from "./form-select-validation.enum";
 /**
  * @slot empty-search-result - Innehåll som visas om sökningen inte ger några resultat.
  * @swedishName Väljare med sök
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen
  */
 export class FormSelectFilter {
     constructor() {
@@ -45,6 +46,7 @@ export class FormSelectFilter {
         this.afName = undefined;
         this.afEmptySearchMessage = 'Inga sökträffar för';
         this.afFilterButtonAriaDescribedby = undefined;
+        this.afErrorMessageIsAlert = true;
     }
     onValueChanged(value) {
         const joinedArray = [...value, ...this._selectedItems];
@@ -89,6 +91,10 @@ export class FormSelectFilter {
             }
         }
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
     /**
      * Funktion för att rensa valda värden från komponenten
      * @en Function for clearing selected values from component
@@ -121,6 +127,13 @@ export class FormSelectFilter {
             this.focusInList = !detectFocusOutside(target, `#${this.afId}-select-filter-list`);
         }
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen.
+     * @en Listens for when focus is set on the custom element and propagates it down to the toggle butto.
+     */
+    focusOnElement() {
+        this._toggleButton.focus();
+    }
     debounce(func, timeout = 300) {
         let timer;
         return (...args) => {
@@ -444,28 +457,29 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h("div", { key: 'a973426bdba50ce86911d281a5e9c9fb7e285807', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'e4f5954c7c2d53232f9d11895b6fa5688302d163', 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 }), h("digi-util-keydown-handler", { key: '4dcef492e96fb96d6baea74e0b36b6fec14ad3d6', onAfOnEsc: () => this.escHandler() }, h("button", { key: '9e1bb4096c077df73139e8b4767e5cadc5f4d2ee', 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-labelledby": this.afFilterButtonAriaDescribedby, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '237419ff66314b63efca1fb02d73cb2d60fdaf3d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '5a56d5b6d3d2c6d0f3d0df3ee63c451298b18851', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '9f3f6993ca24bb20fbebdb1739592fda24bd965b', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: 'fc3e71d79a44e8953609da9bbc4024a16cc92794', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '565c9af0e540f891f5f58b5f68fd1bdef789d439', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h(Host, { key: '363c7880f1e2ff36d2d0d850b814a2a0d69f5c6b', tabindex: -1 }, h("div", { key: '4814a99bb25b5b9c0e8af87ba5e7bb88240c7075', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'd725f0f0d72400f61d83c20f4308d1cd8161c0d4', 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 }), h("digi-util-keydown-handler", { key: 'a32cf9a3f3c090d6160ceb3baab94cd1fd395dec', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'd8c6db1a0d0a92fd6018026b9f7f3a767ac8a838', 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 }, h("div", { key: 'a00d3118356da4701c621c9b5d724466ff7e54a8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'e9fb9100d4addd46561858bdec5146608f4cb4b1', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'db16c355c8fa96577afad5f1f2f93cf9e7b85728', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '3b48132e4aaa46943ab7de9ed2d7c5924e7fce7e', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '611df06915faf061c330e82900a878cb33df3ade', 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
-            } }, h("fieldset", { key: 'dc8b60b9b9f0568967ef4e5ffddf464149e41b7b' }, h("div", { key: 'c14f0eaad909cebd41564028f2436269e96ab13a', class: "digi-form-select-filter__header" }, h("legend", { key: '92baa299ac9d085a650860bcfed4474f5265d526', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '776c9d498f33990b521ee04898d1ea739432c077', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: '24d6136fd0804266382896b2a7cf88f55b9e621d' }, h("div", { key: '673b2522e7fdccd7c33cca97f83ce0f74426beb7', class: "digi-form-select-filter__header" }, h("legend", { key: 'b5ce6937175dbdf6ad7317dac7c74bb6daa103a3', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '89e97f9ab37a581c415ea3046c819d7e8a394925', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
                 99;
             }, 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()), h("div", { key: 'ac8da673afc1e2a6c0543a835b2627b957021f33', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '08f0943b88567354588ae2b45111468698dd38ff', 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() }, h("ul", { key: 'd7b7f52a85bfebd96b14ef18b4ac1d6aaac9273e', 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()), h("div", { key: '6a93bfc0f2e0da233706f4ddaef8b1954bf10b08', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '94216744dee9ab58d9600b27a09c4a735ffeb11d', 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() }, h("ul", { key: '0665d13ce2587a9db802b1f6d67ba5b8b16365fc', 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
+                : this.afValidation ===
+                    FormSelectFilterValidation.ERROR
                     ? 'true'
                     : 'false', "aria-errormessage": `${this.afId}--validation-message`, "aria-required": this.afMultipleItems
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '3f3c8ee516a00099adb40779cf648046e3d79133', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '6d0d547803d71e989f778abf84c2e0d4c18e7341', 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 && (h("digi-icon-check", { key: '20bdf4fd24c13a9dc6ad12718847f6f4f78af2af', 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 && (h("digi-icon-check", { key: 'ae8a6f5473128dd8a32f78d0553e4042219b0ae0', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (h("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'
@@ -476,10 +490,14 @@ export class FormSelectFilter {
                             FormSelectFilterValidation.ERROR
                             ? 'true'
                             : 'false'
-                        : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue ? -1 : index === 0 ? 0 : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: 'f3f670c396cc7dc01dcb3834042b2ca9af3faeb7', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '508ea54b56002d2f4dfa6307d07242436edc8277', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '9dcba889f74484cc90e00c8873b314eab6508c06', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'df2fe414579e01db151b20131068ce9c7e8f0a7b', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+                        : 'false', "aria-errormessage": `${this.afId}--validation-message`, onClick: () => this.selectItemHandler(item), tabIndex: this.showNeutralValue
+                        ? -1
+                        : index === 0
+                            ? 0
+                            : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
+            }))))), this.afMultipleItems && (h("div", { key: '28b8822e8cf3e8081b15b2a0fc4835181209774a', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '4f182ff5de1010f03f2fd405bff3f8c0b8c88bc4', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '82d56e0e937b4da1c7deb073c7a2a904f97b1c32', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '3211daf5462987f42eceaefc211eaf24fa421556', 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)))))), h("div", { key: 'e4856539556e2d5912e3a326bb697dc61b98efca', class: "digi-form-select__footer" }, h("div", { key: 'e9da92046fd4f2b0a93f3e7681243de5cae57b83', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '8b2bd29203a6f722ae4507ea65c0600dbfe960c2', "af-variation": this.afValidation }, this.afValidationText))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'dc5b3df62deeef8cfc9a890997effce86fa3379e', class: "digi-form-select__footer" }, h("div", { key: '490f54fb8b2a5efa32378b5715f1fc950283bd4f', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '859be3c7d2fe6c840b8a08b5b0869c85f8102b9a', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }
@@ -530,9 +548,9 @@ export class FormSelectFilter {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Disables the validation."
+                            "text": "Hides the validation message."
                         }],
-                    "text": "Inaktiverar valideringen"
+                    "text": "D\u00F6ljer valideringsmeddelandet."
                 },
                 "getter": false,
                 "setter": false,
@@ -1069,6 +1087,29 @@ export class FormSelectFilter {
                 "setter": false,
                 "attribute": "af-filter-button-aria-describedby",
                 "reflect": false
+            },
+            "afErrorMessageIsAlert": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "If the value is true, the error message gets the attribute role=\"alert\".\nIf the error is shown together with multiple errors (for example after server-side validation), the value should be set to false."
+                        }],
+                    "text": "Om v\u00E4rdet \u00E4r true f\u00E5r felmeddelandet attributet role=\"alert\".\nOm felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska v\u00E4rdet s\u00E4ttas till false."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-error-message-is-alert",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -1112,9 +1153,15 @@ export class FormSelectFilter {
                     "text": "Vid uppdatering av filtret"
                 },
                 "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
-                    "references": {}
+                    "original": "IListItem[]",
+                    "resolved": "IListItem[]",
+                    "references": {
+                        "IListItem": {
+                            "location": "import",
+                            "path": "./form-select-filter.interface",
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                        }
+                    }
                 }
             }, {
                 "method": "afOnFilterClosed",
@@ -1166,9 +1213,15 @@ export class FormSelectFilter {
                     "text": "N\u00E4r ett eller flera filter v\u00E4ljs"
                 },
                 "complexType": {
-                    "original": "any[]",
-                    "resolved": "any[]",
-                    "references": {}
+                    "original": "IListItem[]",
+                    "resolved": "IListItem[]",
+                    "references": {
+                        "IListItem": {
+                            "location": "import",
+                            "path": "./form-select-filter.interface",
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                        }
+                    }
                 }
             }, {
                 "method": "afOnQueryChanged",
@@ -1257,6 +1310,12 @@ export class FormSelectFilter {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focus",
+                "method": "focusOnElement",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }