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

package/dist/collection/components/_form/form-error-list/form-error-list.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormErrorListHeadingLevel } from "./form-error-list-heading-level.enum";
-import { logger } from "../../../global/utils/logger";
 import { TypographyVariation, } from "../../../enums";
 import { NotificationAlertVariation } from "../../_notification/notification-alert/notification-alert-variation.enum";
 /**
@@ -25,61 +24,33 @@ export class FormErrorList {
     async afMSetHeadingFocus() {
         this.setHeadingFocus();
     }
-    componentWillLoad() {
-        this.getLinks();
-    }
-    componentWillUpdate() {
-        this.getLinks(true);
-    }
     componentDidLoad() {
         this.setHeadingFocus();
         this.afOnReady.emit();
     }
-    getLinks(update) {
-        const elements = this.hostElement.children;
-        if (!elements || elements.length <= 0) {
-            logger.warn(`The slot contains no link elements`, this.hostElement);
-            return;
-        }
-        let items;
-        if (update) {
-            items = this._observer.children;
-        }
-        else {
-            items = elements;
-        }
-        this.linkItems = [...items]
-            .filter((element) => element.tagName.toLowerCase() === 'a')
-            .map((element) => {
-            return {
-                text: element.textContent,
-                href: element.getAttribute('href') || ''
-            };
-        });
-    }
     setHeadingFocus() {
         if (this.afEnableHeadingFocus) {
             setTimeout(async () => {
-                const el = await this._notificationAlert.afMGetHeadingElement();
+                var _a;
+                const el = await ((_a = this._notificationAlert) === null || _a === void 0 ? void 0 : _a.afMGetHeadingElement());
                 !!el && el.focus();
             }, 0);
         }
     }
     clickResponse(e) {
+        const sourceEvent = e.detail;
+        const anchor = sourceEvent === null || sourceEvent === void 0 ? void 0 : sourceEvent.target;
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href') || '';
+        const id = href.replace('#', '');
         if (this.afOverrideLink) {
             e.detail.preventDefault();
         }
-        this.afOnClickLink.emit(e);
+        this.afOnClickLink.emit({ id });
     }
     render() {
-        return (h("div", { key: 'c45799357d9c3b50ca44d7a797aea773a041875d', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: 'ac72c13d6b6a0635688a7e5e91a57db431d01670', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '25a325ab334c2304a01952d7e70786e53ebbd3cc', "af-variation": TypographyVariation.SMALL }, h("p", { key: 'aacca74ef683f0ce492c0b69283833f5c3a01069', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: '77f696f3aa0da40b05f89a3ebdcfeca6c0c5f44f', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
-            return (h("li", { class: "digi-form-error-list__item" }, h("digi-link-internal", { class: "digi-form-error-list__link", afHref: item.href }, item.text)));
-        }))), h("div", { key: '83ac00f6c2291855e8d3b116251068d6a7bd6bdf', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: '8e3dcd6e63289fa9b134b4f8e4b5632c25531847', afOptions: {
-                attributes: false,
-                childList: true,
-                subtree: true,
-                characterData: true
-            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: '74f36b5292a73674be3d0d866a0689c0791f6b6e' })))));
+        return (h("div", { key: '21fce283555655608307df2c622c110777ca78fc', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '377d7dda9657fd6316fab80ec8db491c37970ce1', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '8fe62a6f8446faf2218b374f7ad5a7ba05f54424', "af-variation": TypographyVariation.SMALL }, h("p", { key: '1caa60c105eb0021b65b904229486e35ae936f77', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: '9dbdd2998a7223163642c78fd3b0b15537f16f78' }))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }
@@ -256,12 +227,18 @@ export class FormErrorList {
                             "name": "en",
                             "text": "The link elements' 'onclick' event."
                         }],
-                    "text": "L\u00E4nkelementens 'onclick'-event."
+                    "text": "Anv\u00E4nds f\u00F6r att f\u00E5nga upp href till l\u00E4nken man har klickat p\u00E5"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "ClickLink",
+                    "resolved": "ClickLink",
+                    "references": {
+                        "ClickLink": {
+                            "location": "import",
+                            "path": "./form-error-list.types",
+                            "id": "src/components/_form/form-error-list/form-error-list.types.ts::ClickLink"
+                        }
+                    }
                 }
             }, {
                 "method": "afOnReady",

package/dist/collection/components/_form/form-error-list/form-error-list.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/_form/form-fieldset/form-fieldset-validation.enum.js

@@ -0,0 +1,7 @@
+export var FormFieldsetValidation;
+(function (FormFieldsetValidation) {
+    FormFieldsetValidation["SUCCESS"] = "success";
+    FormFieldsetValidation["ERROR"] = "error";
+    FormFieldsetValidation["WARNING"] = "warning";
+    FormFieldsetValidation["NEUTRAL"] = "neutral";
+})(FormFieldsetValidation || (FormFieldsetValidation = {}));

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

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
+import { FormFieldsetValidation } from "./form-fieldset-validation.enum";
 /**
- * @slot default - Ska vara formulärselement. Till exempel digi-form-input.
+ * @slot default - Formulärkomponenter, till exempel digi-form-input eller digi-form-checkbox.
  * @swedishName Fältgruppering
  */
 export class FormFieldset {
@@ -10,9 +11,16 @@ export class FormFieldset {
         this.afName = undefined;
         this.afForm = undefined;
         this.afId = randomIdGenerator('digi-form-fieldset');
+        this.afValidation = FormFieldsetValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afErrorMessageIsAlert = true;
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
     }
     render() {
-        return (h("fieldset", { key: '9c28717f7316cb72cca157a6042e3cc7c7c9a82d', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '151f99611f8bdeb2431bd834bd2f934ac370824d', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '10b0fe0ee00e839ad7b63375ad7fae5b632d16f8' })));
+        return (h("fieldset", { key: '2a3aeddb712d49ff99f788867ac270f563f34454', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: 'a2e44584d821be6b1fd71a04d9313fdb572b8390', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '072437bb8dd5064642f96c605388957016423360' }), h("div", { key: '57859d430e16c47b4fd70174f13b04b9dec61561', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormFieldsetValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'b74841c651c2a9c0822b2eaeb3d21be617b279a8', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-fieldset"; }
     static get encapsulation() { return "scoped"; }
@@ -43,7 +51,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The legend text."
                         }],
-                    "text": "Legend-elementets text."
+                    "text": "Text till legend-elementet som fungerar som f\u00E4ltgruppens rubrik."
                 },
                 "getter": false,
                 "setter": false,
@@ -65,7 +73,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The fieldset name attribute."
                         }],
-                    "text": "Fieldset-elementets namn attribut."
+                    "text": "Text till name-attributet som ger f\u00E4ltgruppen ett programmatiskt namn."
                 },
                 "getter": false,
                 "setter": false,
@@ -87,7 +95,7 @@ export class FormFieldset {
                             "name": "en",
                             "text": "The fieldset form attribute."
                         }],
-                    "text": "Fieldset-elementets form attribut."
+                    "text": "Id f\u00F6r form-elementet som f\u00E4ltgruppen tillh\u00F6r."
                 },
                 "getter": false,
                 "setter": false,
@@ -116,6 +124,80 @@ export class FormFieldset {
                 "attribute": "af-id",
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-form-fieldset')"
+            },
+            "afValidation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormFieldsetValidation",
+                    "resolved": "FormFieldsetValidation.ERROR | FormFieldsetValidation.NEUTRAL | FormFieldsetValidation.SUCCESS | FormFieldsetValidation.WARNING",
+                    "references": {
+                        "FormFieldsetValidation": {
+                            "location": "import",
+                            "path": "./form-fieldset-validation.enum",
+                            "id": "src/components/_form/form-fieldset/form-fieldset-validation.enum.ts::FormFieldsetValidation"
+                        }
+                    }
+                },
+                "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": "FormFieldsetValidation.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"
             }
         };
     }

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

@@ -11,6 +11,7 @@ import { FormValidationMessageVariation } from "../form-validation-message/form-
  *	@enums FormInputFileType - form-input-file-type.enum.ts
  *  @enums FormInputFileVariation - form-input-file-variation.enum.ts
  * 	@swedishName Filuppladdare
+ *  @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class FormFileUpload {
     constructor() {
@@ -51,10 +52,15 @@ export class FormFileUpload {
         this.afValidationText = undefined;
         this.afValidation = FormFileUploadValidation.DISABLED;
         this.afHeadingLevel = FormFileUploadHeadingLevel.H2;
+        this.afErrorMessageIsAlert = true;
     }
     afValidationTextChange() {
         this.setValidationText();
     }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
     breakpointHandler(e) {
         if (e.detail.value) {
             if (e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) {
@@ -120,10 +126,18 @@ export class FormFileUpload {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     componentWillLoad() {
         this.aforiginalVariation = this.afVariation;
     }
     componentDidLoad() {
+        this.hostElement.setAttribute('tabindex', '-1');
         this.afOnReady.emit();
         /* Vid första renderingen så fungerar inte propertyn korrekt om vi inte kallar på setValidationText härifrån.
          * Gissar att det är en tajmin-issue mellan prop och state, men hinner inte gräva i det mer nu.  */
@@ -543,22 +557,22 @@ export class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: '9d6a24f2f19c019f7407af204ab5dc3e66079724' }, h("digi-util-breakpoint-observer", { key: 'a748998bb71bd4707ac78d1a95e25b890f946dd8', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '41f8cbc00e194d1ddb05ceca5efa448333f2ad43', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '890b3bc2dd89d70d1313bacd2d02fe75e3be445d', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'bda9a9122d9eac9572d278bfd40930b96a55e66a', class: {
+        return (h(Fragment, { key: 'fa66e9f8a9cc1ab9c0e850aaa7091612a40e3179' }, h("digi-util-breakpoint-observer", { key: 'e31966e4a3ac5ee7d17236d55b2fcba3a5e5b217', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '7def9fd833ee627f46af20ce59982e372c758289', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'b7d36f50ec9a5fa413784ac31a7ef77771be2626', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '15afcf3f1321dc6454094b6f7a5f1e6cf66758bd', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'dcdf9b2933e80cdc28da4f687149e3342654336b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'a3dcac52d26c381417b578555e5355e7654ea709', class: "digi-form-file-upload__text-area" }, h("button", { key: '77752f082b7581eafcfeef04cc2cc6faed3ff7ef', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '563d428c64e909dd45331c6dd3c20fd4196dd41b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '1ebec5c26501773a1104f878380fcc0377a33010', class: "digi-form-file-upload__text-area" }, h("button", { key: '8a1c7c8bf8ccacb620a95ba0221742a6c436cf3c', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: '62a4abf7e10740a3a6ff049a4a8e91c48bdb94ac', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: '1ae48109c0df78f412fd6c07742baaf6ef2d616c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: '39a5e7b5a1998c3e1e82d74ccf8a02edeea0fd8b', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '3370708299eb4f53f38cb15ae4fb9cb97b993bb9', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '42447d4024cbd6b4abfbff0d9a51b7dd7538c167' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '8240114263559f6a7da5c42e94d5d6cb8f07921f', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c4deee14a4318dc38368eeec5f5a3b51e0e79e27' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '6553b8226f080d825eb276ce3f684a95ebeeb649', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '60c80571d84300d4a9151f142beb06194af9ead7', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'c514dfcf95137b192fa490d6cb61e1b68ae82768', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -1041,6 +1055,29 @@ export class FormFileUpload {
                 "attribute": "af-heading-level",
                 "reflect": false,
                 "defaultValue": "FormFileUploadHeadingLevel.H2"
+            },
+            "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"
             }
         };
     }
@@ -1290,4 +1327,13 @@ export class FormFileUpload {
                 "methodName": "afValidationTextChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormInputButtonVariation } from "./form-input-button-variation.enum";
 import { FormInputType } from "./form-input-type.enum";
@@ -11,6 +11,7 @@ import { FormInputVariation } from "./form-input-variation.enum";
  * @enums FormInputValidation - form-input-validation.enum.ts
  * @enums FormInputVariation - form-input-variation.enum.ts
  * @swedishName Inmatningsfält
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class FormInput {
     constructor() {
@@ -50,12 +51,20 @@ export class FormInput {
         this.afAriaDescribedby = undefined;
         this.afAriaControls = undefined;
         this.afTrimValue = undefined;
+        this.afErrorMessageIsAlert = true;
     }
     onValueChanged(value) {
         this.afValue = value;
     }
     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 : '');
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
     }
     afValidationTextWatch() {
         this.setActiveValidationMessage();
@@ -67,6 +76,13 @@ export class FormInput {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     componentWillLoad() {
         this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
         this.setActiveValidationMessage();
@@ -152,10 +168,12 @@ export class FormInput {
         this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
     }
     render() {
-        return (h("div", { key: 'd0e85adc1807f2f6f2394e1a12b782777e6aa89c', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '88b48495e153480f9bda8c01c7cf155fe3e9fbef', 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: '39059177675274d24d2b65a0860738391d4c3f03', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: '36d316651f066e47755d2e95473b411d2afee06a', 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
+        return (h(Host, { key: 'edfa7d318ef191105c367521ba881a2e289643d5', tabindex: -1 }, h("div", { key: 'eb370a2b2143889c40213d9ae80af72c5921003f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '9a638bca403fc427ec22b2df46a77fbbe273574c', 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: '514ab5626cb7b727d731da43f21791e103f05426', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'ea37a8d6805e97a0ce7e2c28a3188412c8d173af', 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} ${this.afId}--validation-message`, "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: '2617f968ed106137599810138ca7f1ee2eef3b12', name: "button" })), h("div", { key: '646bea838a14ff6e661baf43b2c245a216f2d0b8', class: "digi-form-input__footer" }, h("div", { key: '4af424df92bd97281609977dd98d957337258c2a', 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: '6ea6c6e76718f096371f43e9e3b2b7cc940a7093', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+            : { inputmode: this.afInputmode }))), h("slot", { key: 'fc3d74a5d12951182755844d8c96bc24a6168c4b', name: "button" })), h("div", { key: '7bf5e98956f79b65cca266ae14c631cd064f9459', class: "digi-form-input__footer" }, h("div", { key: '8054bea430637a7013ecf554550b37f2b29877d2', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '751b58df8dcdb4e1132d26125047ff72d8e74574', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-input"; }
     static get encapsulation() { return "scoped"; }
@@ -914,6 +932,29 @@ export class FormInput {
                 "setter": false,
                 "attribute": "af-trim-value",
                 "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"
             }
         };
     }
@@ -1131,4 +1172,13 @@ export class FormInput {
                 "methodName": "afValidationTextWatch"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormInputSearchVariation } from "./form-input-search-variation.enum";
 import { FormInputType } from "../form-input/form-input-type.enum";
@@ -9,6 +9,7 @@ import { FormInputButtonVariation } from "../form-input/form-input-button-variat
 /**
  * @enums FormInputSearchVariation - form-input-search-variation.enum.ts
  * @swedishName Sökfält
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export class FormInputSearch {
     constructor() {
@@ -76,6 +77,13 @@ export class FormInputSearch {
         this.afOnClick.emit(e);
         this.afOnSubmitSearch.emit(this.afValue);
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     clickOutsideListener(e) {
         const target = e.target;
         const selector = `[data-af-identifier="${this.afId}"]`;
@@ -110,10 +118,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        return (h("div", { key: 'e4c602d4ad9ae6a543dd5168abc02d29bedfc8a8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '0d2de6133e17ada9cc621ac3cb7f6e75f4842b73', class: {
+        return (h(Host, { key: '07a9de060cd2c1c58382e7f63646a2d91a33b326', tabindex: -1 }, h("div", { key: '281ce12ec8b8eccea33ca83996fd602eca83473a', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '0d45c83f39c22aadc9328f87bb4563d23ec3250f', class: {
                 'digi-form-input-search__input': true,
                 'digi-form-input-search__input--no-button': this.afHideButton
-            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '5a744b0ab75651a61731ce504ebf5426d546b18a', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'b68f9b8f7d4a648f609d70620406f484894f8592', slot: "icon" }), this.afButtonText)))));
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '534207d20f5c4e0b2e0d219f287f74a7cbec332e', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'dcba3877b354dd4902d4663e7742e994d973c40a', slot: "icon" }), this.afButtonText))))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }
@@ -873,6 +881,12 @@ export class FormInputSearch {
     }
     static get listeners() {
         return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "click",
                 "method": "clickOutsideListener",
                 "target": "window",

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

@@ -52,7 +52,7 @@ export class FormLabel {
         }
     }
     render() {
-        return (h("div", { key: '8f855dd566d5e00e8d6a89e294182efb21b7ed51', class: "digi-form-label" }, h("div", { key: 'eb1a357c89c6ffdd262913a57daeb4b4ceb068f9', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '3a52faadc25dbea8cf5030ec74e78bfc4fc0b9b5', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '7ff3fbf1d49cfe5951232ffb55b2a8ab91662d2d', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: 'be5e46615b0828367970d5d5ee0ac1b8b2abec12', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'aa5d21eaeba3127cea1b0c29dfa7283f20f2b041', class: "digi-form-label__actions" }, h("slot", { key: '5f8aeffc53b0ee98aa6c14134ebedc4c9ea242b9', name: "actions" }))))));
+        return (h("div", { key: '24ae333ab5edc928ce4d26e6e4da0f642617792a', class: "digi-form-label" }, h("div", { key: 'b1a5073a7c9883b13a86f741b865c3b368c1d02b', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '4dd98d11699d82e0e6b5f1127ca0e97382dc45d1', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: 'a8c1b2cf89d24625e3c13a93bac5fd144d95a3cb', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '4a82c714e6b4f3189772d44bd5748c830252a8d5', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'd07f90e8e0a8ba9061686bf7cc331480091fbb33', class: "digi-form-label__actions" }, h("slot", { key: '7c5f1750217d9666a6543044e6dbb29ee4839940', name: "actions" }))))));
     }
     static get is() { return "digi-form-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-radiobutton/form-radiobutton.css

@@ -88,6 +88,12 @@ License: none (public domain)
   box-shadow: 0px 0px 0px 5px white;
 }
 
+.digi-form-radiobutton__input:focus:not(:checked) ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
+  outline: 2px solid black;
+  outline-offset: 2px;
+  box-shadow: 0px 0px 0px 5px white;
+}
+
 .digi-form-radiobutton__input:checked ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
   background-color: var(--BACKGROUND--CHECKED);
   border-color: var(--BORDER-COLOR--CHECKED);

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 import { FormRadiobuttonVariation } from "./form-radiobutton-variation.enum";
 import { FormRadiobuttonValidation } from "./form-radiobutton-validation.enum";
@@ -7,6 +7,7 @@ import { FormRadiobuttonLayout } from "./form-radiobutton-layout.enum";
  * @enums FormRadiobuttonValidation - form-radiobutton-validation.enum.ts
  * @enums FormRadiobuttonVariation - form-radiobutton-variation.enum.ts
  * @swedishName Radioknapp
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
  */
 export class FormRadiobutton {
     constructor() {
@@ -43,6 +44,13 @@ export class FormRadiobutton {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
     componentDidLoad() {
         this.afOnReady.emit();
     }
@@ -78,9 +86,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: 'e5b58328f81f539bcd0f2410480c90d4fe2547d1', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '9f6dd197ee8f16b6dfe4e08f69f412b99e584cef', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
+        return (h(Host, { key: 'eb737e11842838386c3c150b7159470340902bfd', tabindex: -1 }, h("div", { key: '6de2e2956df73b07e27a3ff47513eeb47091e46e', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '203d3c4bee7f360d47a8a81bb5b970176839ade2', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '2d396707508d44fe0996dbe1137e6df0299553c4', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '74bb9dd19541639ec225b764a157d0ffbfe4a63c', class: "digi-form-radiobutton__circle" }), this.afLabel)));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'fa72694ab9d81781251da78b9356ad2fceb916ac', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: 'dc9a093395165968b384fee6a8fcaf1fd5c8c142', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }
@@ -627,4 +635,13 @@ export class FormRadiobutton {
                 "methodName": "onAfCheckedChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "focusOnInput",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -0,0 +1,7 @@
+export var FormRadiogroupValidation;
+(function (FormRadiogroupValidation) {
+    FormRadiogroupValidation["SUCCESS"] = "success";
+    FormRadiogroupValidation["ERROR"] = "error";
+    FormRadiogroupValidation["WARNING"] = "warning";
+    FormRadiogroupValidation["NEUTRAL"] = "neutral";
+})(FormRadiogroupValidation || (FormRadiogroupValidation = {}));