@designsystem-se/af 35.0.2 → 35.2.0

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

@@ -38,12 +38,6 @@ export class FormCheckbox {
     onAfCheckedChanged(checked) {
         this.checked = checked;
     }
-    onValueChanged(value) {
-        this.afValue = value;
-    }
-    onAfValueChanged(value) {
-        this.value = value;
-    }
     /**
      * Hämta en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
      * @en Returns a reference to the input element. Handy for setting focus programmatically.
@@ -52,7 +46,7 @@ export class FormCheckbox {
         return this._input;
     }
     componentWillLoad() {
-        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.value = this.afValue;
         this.afChecked
             ? (this.checked = this.afChecked)
             : (this.afChecked = this.checked);
@@ -79,7 +73,6 @@ export class FormCheckbox {
     }
     changeHandler(e) {
         this.checked = this.afChecked = e.target.checked;
-        this.afValue = this.value = e.target.value;
         this.afOnChange.emit(e);
     }
     focusHandler(e) {
@@ -96,7 +89,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: '266fa6ef76fcd877f880b84e707c0873efdd2230', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: 'e12a90f12809022be19293c5823e367574e5ec62', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h("div", { key: '3a4c3d66ae5b6fb5edcf3db68c0454458d0e7317', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '960e66ccc1aa15956b147369a829fdcd87ffacb0', 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);
@@ -104,7 +97,7 @@ export 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 }), h("label", { key: 'b87e2622e53d0e34e7ace64757cefdd750e53a8b', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'da7b4aaff400e0e262a0e4a9dbd8e37ed731def9', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'a19ce65d5bc40a6257d7bea5770a429bd788d75b', 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 }), h("label", { key: '49f8b41478bf43aff3a069dcced39dadd77d56a0', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '3d15477d96fe56f8a3e75e15f24f71c4fb279da9', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '68ea2e81febd0d60c3209d8227eed4d0ee165db2', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -283,12 +276,12 @@ export class FormCheckbox {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Input checked attribute"
+                            "text": "Internal mirror of afChecked. Used by Angular Reactive Forms (ControlValueAccessor).\nDo not use directly \u2014 use afChecked instead."
                         }, {
                             "name": "ignore",
                             "text": undefined
                         }],
-                    "text": "S\u00E4tter attributet 'checked'."
+                    "text": "Intern spegling av afChecked. Anv\u00E4nds av Angular Reactive Forms (ControlValueAccessor)\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afChecked ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -375,12 +368,12 @@ export class FormCheckbox {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Input value attribute"
+                            "text": "Internal mirror of afValue. \nDo not use directly \u2014 use afValue instead."
                         }, {
                             "name": "ignore",
                             "text": undefined
                         }],
-                    "text": "S\u00E4tter attributet 'value'"
+                    "text": "Intern spegling av afValue. \nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -755,14 +748,8 @@ export class FormCheckbox {
                 "propName": "checked",
                 "methodName": "onCheckedChanged"
             }, {
-                "propName": "checked",
+                "propName": "afChecked",
                 "methodName": "onAfCheckedChanged"
-            }, {
-                "propName": "value",
-                "methodName": "onValueChanged"
-            }, {
-                "propName": "afValue",
-                "methodName": "onAfValueChanged"
             }];
     }
 }

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

@@ -72,14 +72,14 @@ export class FormErrorList {
         this.afOnClickLink.emit(e);
     }
     render() {
-        return (h("div", { key: 'c37825cfdf1cac8b3351f42cd4491eb97a9271ea', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '04cd09f31b07329bfa7856479e8d6ab58bc142fa', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: 'aba216256a964636c90b10154812107dd15b9b10', "af-variation": TypographyVariation.SMALL }, h("p", { key: 'dedf9164e2d7f8056af3c9f2afd1208cc1341370', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: 'ca485ffc1acdda647a4fc5b202aa0890440ec75d', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
+        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: '5dc42c2b18a967dcf2e112d5468288fb49a55cfb', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: '11affa9e839fc1adc0c5de7a40839b5c7dd27dfa', afOptions: {
+        }))), 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: 'd321e993fb6ee496569a519908d478a47a4b5af0' })))));
+            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: '74f36b5292a73674be3d0d866a0689c0791f6b6e' })))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,7 +12,7 @@ export class FormFieldset {
         this.afId = randomIdGenerator('digi-form-fieldset');
     }
     render() {
-        return (h("fieldset", { key: 'e3647043394aa3e2c1de3a276551f23cd4ed550b', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '4f1ad8dc5866baa8264daa5260356c2463c9df3d', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '09a3a7f36f6c10f36e5fa6de0c633a4101517b9d' })));
+        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' })));
     }
     static get is() { return "digi-form-fieldset"; }
     static get encapsulation() { return "scoped"; }

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

@@ -322,6 +322,7 @@ License: none (public domain)
   position: relative;
   top: 4px;
   left: 0px;
+  margin-right: 4px;
 }
 :host .digi-form-file-upload__item-green-check svg {
   --digi--icon--height: 16px;
@@ -354,7 +355,7 @@ License: none (public domain)
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;
 }
-@container (max-width: 500px) {
+@container (max-width: 620px) {
   :host .digi-form-file-upload__item .digi-form-file-upload__item-name {
     max-width: 17.5rem;
   }
@@ -366,6 +367,8 @@ License: none (public domain)
   margin: 0;
   justify-content: space-between;
   align-items: center;
+  overflow-wrap: break-word;
+  gap: 32px;
 }
 :host .digi-form-file-upload__item-text-container-inner {
   display: flex;
@@ -398,7 +401,7 @@ License: none (public domain)
   position: relative;
   top: 6px;
   left: 5px;
-  margin-right: 0.75rem;
+  margin-right: 1.25rem;
 }
 :host .digi-form-file-upload__item-pdf-preview-bis::after {
   position: absolute;

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

@@ -543,22 +543,22 @@ export class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: 'c69e5c8eb43f8d12ebd7b18fc4b72d53f194fdc4' }, h("digi-util-breakpoint-observer", { key: '55a2602c5ae86068eb6ef11c38c26199620626cb', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'dd0c122215e18a7e055af9cdbf3b1251f93748ca', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '075be0dfb3fb5f5207ba211518ff035ee155719c', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '137e55668de03b4c700e6cd668164aa7ab480232', class: {
+        return (h(Fragment, { key: '920825d10b8100ea277f4dbc79a16dc88c714717' }, h("digi-util-breakpoint-observer", { key: 'e5b1cd0c5141dd7bb39c42a2fa23496061974f21', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '373bfd75114e5c84b17d25b1083d21f38ff68a21', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'f1ecec09a71cfdee9d99885494a80ee6bffcb963', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '330fad34547f1ffd9977bff5a7efcf9b0820b25c', 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: '399686fe6632683bd001d76a49c2b80acc50efec', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'b7a8c341f7a1aba732b838647eaf3cd77f63d305', class: "digi-form-file-upload__text-area" }, h("button", { key: '856a304b06c0985506e09d58db7679d997957936', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '387c23d5443c713a843b71a7282643c51909a61f', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '380ad4206d9dd1c94141de7f2c7dceea6343dcb6', class: "digi-form-file-upload__text-area" }, h("button", { key: 'd419f031bae6048814efab8b03c79ae145d2d885', type: "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: '79e576575a87f3740b9bc8ed136450f58d256adb', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: '071ba86c8db40e830bef7970b02a3f90e39c2ba8', "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: '6b1328107138c170dc25f3ee1af811520e2ab2ca', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '27b43406be72ea5f9d2f6e66f370281891cb4ff0', 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: 'ae398d7a43bbec39ec7c9171bbcdd5dc93d23f32' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: 'a90e1d67f2b97736a67b4efff8a16c1d5c229e16', 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: 'b5dd05435ffc8e1a19696d8179e7506a8796be1f' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '92064a7d2719648ad9c7cc9a5c8708461dd54e9d', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'f8e442023f38b9e5c4cc8320ccd96896bbcfd606', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '129bfa4e491e809b8f4c07bbde126dd6f4661904', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }

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

@@ -206,24 +206,24 @@ export class FormFilter {
         });
     }
     render() {
-        return (h(Host, { key: '06055afc9bf852603e743cce20d2756d744fbdb4' }, h("div", { key: '3407d91796228d6b3d5e44bee54019816e1ce5c0', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
+        return (h(Host, { key: '646d9b749fe3c2570287a3dbd5e64c77d87eecd8' }, h("div", { key: '9a673a0a8adbeb379c406959e384601b48b21f7f', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                 'digi-form-filter': true,
                 'digi-form-filter--open': this.isActive
-            } }, h("digi-button", { key: '4cc0e542e9478cdc000e705a44fb451942b764f4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: '259d330a1db17e422e8d19a048f3ebe9ab4d0d07', class: {
+            } }, h("digi-button", { key: '6085eeff90de431282ed24927f511ec0b8a6c6f4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: 'eaf984f868ae861076315cfa146ba72d718cab00', class: {
                 'digi-form-filter__toggle-button-indicator': true,
                 'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
-            } }), h("span", { key: '8ef7488ef698070ea06100c487dcb1d4b1f8d18b', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'f79c3de8b3f7185c1454cf48123412fff7692eb6', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'de006979d38ac488c7f95bd8cb7b21d9199669df', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
+            } }), h("span", { key: 'acec48c3455aec603fe519ee065a221dceeab68c', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'a38d54d4904e705d4478cdef2be278deff90412e', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '2730936fa2ec6a547695f0244724bfbf27b657e4', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
                 'digi-form-filter__dropdown': true,
                 'digi-form-filter__dropdown--right': this.afAlignRight,
                 'digi-form-filter__dropdown--hidden': !this.isActive
-            } }, h("div", { key: '32c3d72df4666aa47d6f6a3db8b53b9c39dcfcfe', class: "digi-form-filter__scroll" }, h("fieldset", { key: '5e13cb4e5841e3fac23f421e74b178dede4a2ea9' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'd418cc75754df2e9a03b3360cd7627a1e81f1116', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
+            } }, h("div", { key: '7c09f7b7910b32c6c8d2e7695ea1715db6cdfa1a', class: "digi-form-filter__scroll" }, h("fieldset", { key: '58ab965e30a6f1eb2f3c3aff80108722c5eeb430' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'a201b73af93dc5ccd71140b7b936417092019197', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
             const isChecked = this.checkedItems.includes(item.id);
             const isTabbable = this.tabItems.includes(item.id);
             return (h("li", { class: "digi-form-filter__item", key: item.id }, h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
                     e.preventDefault();
                     this.handleCheckItem(item);
                 } })));
-        })))), h("div", { key: 'db545803b4c8099bff8f76f2e3a7d7fb373c0ab8', class: "digi-form-filter__footer" }, h("digi-button", { key: '6c048f27411ccf4a973dbaebb8b682984dde6b42', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: '801d3b2fef01b7984ccfa39c3121499cdaae0ff0', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: 'bd87343e8d79a176878bc76af61f1a8fb56f8979', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: '9c854f22aef8185b9ecb909d82f14d1ecd637cb7' }))));
+        })))), h("div", { key: 'ef8cfb3de86adc3efdc319e494a27916bdfb4302', class: "digi-form-filter__footer" }, h("digi-button", { key: '0adac0061143ad1057f5927b853b619e40656de0', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: 'e9afa7196ac9bdf58da4545fc8c8f5559af9c690', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '4f19a18f80d1088a618b96e8419801e62d38f98c', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'b5332c6c15fc4033f4672500807bbce900eaef55' }))));
     }
     static get is() { return "digi-form-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -152,10 +152,10 @@ export class FormInput {
         this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
     }
     render() {
-        return (h("div", { key: 'fd3bce3a3e0049c260192ef655c5521571236ae6', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '2c0d7d223e24cdf4291c1d89e863bac38beff558', 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: '1125bd730a737476d11cbc18152b53dc935399f4', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: '2f98355411050b0df8bbf70c3687e1be35a67a00', 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("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
             ? {}
-            : { inputmode: this.afInputmode }))), h("slot", { key: '927b71f7804ebe28f51062ddd1ef7a4cebcb36de', name: "button" })), h("div", { key: '0427a8d8d8216f56f8ce39a6aee9ccd50d76b199', class: "digi-form-input__footer" }, h("div", { key: 'e40d6e9c628d9f8000c120ceeaecb86bfc6b86a0', 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: 'ff4e34130e69f881353e21d224ddaa907c3f10bf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+            : { 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))))));
     }
     static get is() { return "digi-form-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -110,10 +110,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        return (h("div", { key: '2f5f36653b7563f25639090be3b235bc6ef25a33', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '9b34f69981f378ad57c15e662df6a42b60b5a67a', class: {
+        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: {
                 '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: 'cb30c0e93140a5c1b045c79568d4d316fbd11677', 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: '0f9f91c1e7f09ddd436618dd1afb04f8f90a6f27', 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: '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)))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }

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

@@ -52,7 +52,7 @@ export class FormLabel {
         }
     }
     render() {
-        return (h("div", { key: '49750e16792d0b5078896035bcb99792e6d9f589', class: "digi-form-label" }, h("div", { key: '81fddd3e4fcc34ba9c8324f5cae0fd1cde00c3fb', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '01feb27d7f79c818ad7124f85fb6db671a7af847', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '0d484a84b46230a10df0e88a48ebf03880892bad', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '2fc41f3cfe8d3057260f65b6e0700b92f47a82b9', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: '466cd22c12eca1390b0051766efe7acd34cf732b', class: "digi-form-label__actions" }, h("slot", { key: 'acc3c7a1ab59f4031c80f90a32c66a15de025180', name: "actions" }))))));
+        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" }))))));
     }
     static get is() { return "digi-form-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,11 +27,8 @@ export class FormRadiobutton {
         this.afAriaDescribedby = undefined;
         this.afAutofocus = undefined;
     }
-    onValueChanged(value) {
-        this.afValue = value;
-    }
-    onAfValueChanged(value) {
-        this.value = value;
+    onValueChanged(newValue) {
+        this.afChecked = newValue === this.afValue;
     }
     onCheckedChanged(checked) {
         this.afChecked = checked;
@@ -47,9 +44,6 @@ export class FormRadiobutton {
         return this._input;
     }
     componentDidLoad() {
-        if (this.value) {
-            this.afValue = this.value;
-        }
         this.afOnReady.emit();
     }
     get cssModifiers() {
@@ -84,9 +78,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: 'ad3ab77013c500a21c82d171077293be4b8a1d7e', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '4491cca214d38754bb6215e14e00a5eb5c8b5336', 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("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
                 ? '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: '8e6a2bcfffa5da53edf122118c68f395ca6851fa', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '81403daa92652914cf76259a1f4a0d22023818fe', 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: '2d396707508d44fe0996dbe1137e6df0299553c4', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '74bb9dd19541639ec225b764a157d0ffbfe4a63c', class: "digi-form-radiobutton__circle" }), this.afLabel)));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }
@@ -262,12 +256,12 @@ export class FormRadiobutton {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Input value attribute"
+                            "text": "Internal mirror of afValue. Used by Angular Reactive Forms (ControlValueAccessor).\nDo not use directly \u2014 use afValue instead."
                         }, {
                             "name": "ignore",
                             "text": undefined
                         }],
-                    "text": "S\u00E4tter attributet 'value'"
+                    "text": "Intern spegling av afValue. L\u00E4ses av Angular Reactive Forms (ControlValueAccessor).\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afValue ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -287,9 +281,9 @@ export class FormRadiobutton {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Input initial value attribute"
+                            "text": "Sets the 'value' attribute."
                         }],
-                    "text": "S\u00E4tter initiala attributet 'value'"
+                    "text": "S\u00E4tter attributet 'value'."
                 },
                 "getter": false,
                 "setter": false,
@@ -309,9 +303,12 @@ export class FormRadiobutton {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sets if radiobutton should be checked."
+                            "text": "Internal mirror of afChecked. Used by Angular Reactive Forms (ControlValueAccessor).\nDo not use directly \u2014 use afChecked instead."
+                        }, {
+                            "name": "ignore",
+                            "text": undefined
                         }],
-                    "text": "S\u00E4tter om radioknappen ska vara ikryssad."
+                    "text": "Intern spegling av afChecked. Anv\u00E4nds av Angular Reactive Forms (ControlValueAccessor)\nSka inte anv\u00E4ndas direkt \u2014 anv\u00E4nd afChecked ist\u00E4llet."
                 },
                 "getter": false,
                 "setter": false,
@@ -622,9 +619,6 @@ export class FormRadiobutton {
         return [{
                 "propName": "value",
                 "methodName": "onValueChanged"
-            }, {
-                "propName": "afValue",
-                "methodName": "onAfValueChanged"
             }, {
                 "propName": "checked",
                 "methodName": "onCheckedChanged"

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

@@ -41,9 +41,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: 'a1dc24e8c0ced8a598dca254923310a4ac354b33' }, h("div", { key: '09d87e1b67dd7c3f7907164744e702d75d47bc36', class: {
+        return (h(Host, { key: '87664130d894a0a76cafb15b184ba1bc970f2c09' }, h("div", { key: '5ad880fd119a958646af1395de884533c19cb677', class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: 'a9f7f2098a0b6dee51508d3f2627b7480eda0d4a', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '6610bea1f78df360f8e4f69fd00f2c29e82ccd9f' })))));
+            } }, h("digi-util-mutation-observer", { key: '87ca289dca9a3ef8a95ee32c149594ab08d58399', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: 'e4da7e705be3248e7edc088969031d1dc671cf35' })))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }

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: '8516ceff87fc1e4e807fe78352e0c13a2a753010', 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: '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)));
     }
     static get is() { return "digi-form-receipt"; }
     static get encapsulation() { return "scoped"; }

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

@@ -122,17 +122,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h("div", { key: '49f40c92117bbce3728e70e863b1a4216413ab29', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: 'aa0ab7690d810299489ffaf00cccf038ff5672d3', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'b6b7e0638e5a2b01701b8e23d3ae2bc4abe15cf5', 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: 'be4fe8473e1014c2a5b3dc7074234df79f281ff4', class: "digi-form-select__select-wrapper" }, h("select", { key: '71a7828e7675d0062f8b2fc2db48809cc7ef41fc', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h("div", { key: '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
                 ? '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: 'f24aa09189501c39a31289d62a7fd18d8722b9b3', class: {
+                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: 'ca2e44c7c31d3391740238628b30dc1c451c7c4f', 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: '8b9fd9d1affea7fe6febb7a144fffa205c8ab2b5', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '3f5b110b0a296597cb25963d885e881c0fc4657a', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), 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) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: '4d39e4eb08050272d097e1f302fd09c71e1210d7' })), h("div", { key: '63717b4931c6ef6d79c3f7e9807b3f9621a4da43', class: "digi-form-select__footer" }, h("div", { key: '612a4029c893ae0355620ce8ff8530127c1bd65e', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'da30bfd2f237363b4d061d3e83d9f0c3509978bb', "af-variation": this.afValidation }, this.afValidationText))))));
+            } }, 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))))));
     }
     static get is() { return "digi-form-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -444,16 +444,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h("div", { key: '44cc16ed72ac985c551d2ea469226f12062e998f', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '99a1f568920d657792956f1682a7a87fd654063b', 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: '1b96c168519cadf139092232d0addad71793b39a', onAfOnEsc: () => this.escHandler() }, h("button", { key: '885c1b4185648fffd8b786163d099bef617003ab', 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: '010faa6f5c6cb5d3031e21dcc1ec32170c274503', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '3f812a67caf29f2e4ed6ccedb5cde6f4ec032d8a', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '29a54235cc20bb2098ce9b0b5c65b9be96e2256b', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '0afb7d3238712a83173f841133b2d1e75b520158', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '94639b310bf2aea572f18a5cd3ea93f4c4b5d40b', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        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: {
                 '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: 'f85b2c145d88e1ddc341756688b26b01278655c8' }, h("div", { key: 'b7ac99419b2b6b23a97a9c4894d22af21a34cf68', class: "digi-form-select-filter__header" }, h("legend", { key: 'decbffa5b7181147d8194145c335135035c0fc0f', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '86f5e662b1aedbfb18d12b80a7ff10608f04ffe0', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, 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: () => {
                 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: 'ae6b1a11c35952c11d541ada4b295c21020592e7', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '21da78f60e2be7662839b7f8033449b59488ff4d', 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: '60a589978e2b6eee588d9f93fb82ab890266071c', 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: '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
                 ? 'false'
                 : this.afValidation === FormSelectFilterValidation.ERROR
                     ? 'true'
@@ -461,11 +461,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: 'b4f11c04f2dc4842b3c277801afacd3734088fc7', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '3f3c8ee516a00099adb40779cf648046e3d79133', 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: '2a0448ffb7c06d877f91210a5d913047f09cd020', 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: '20bdf4fd24c13a9dc6ad12718847f6f4f78af2af', 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'
@@ -477,9 +477,9 @@ export class FormSelectFilter {
                             ? '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: '5d4651b71154ee9b443db6efa748887755f76561', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'd5bceb942bc9838507916b491609fdb6c6e15a2f', "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: 'f4f5b77a54d59f28584265759015c59c03ee87ff', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '783f159900e9e77cbe58758b01eacf95523aad9c', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), 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: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '2160a5556a346884d540bcaa6eb976b7942fe4f8', class: "digi-form-select__footer" }, h("div", { key: '89cfadac50c5520e9ea14a70e922dbb249ddb8e7', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '95d189c3b944ff0c37b79d21470a9046dd80f46d', "af-variation": this.afValidation }, this.afValidationText))))));
+            }, 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))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -104,10 +104,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h("div", { key: '91cc15996083fac55f965a5b710a13ee53758de6', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'c231c265843c8345ca0d1160e8bac83dc8cf0627', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '2a41fc8ddd351b1ce520890c247d58a0cc6b5e17', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '95988ab9dafbbb488b8be50801f7a2bdf9c8c69a', class: "digi-form-textarea__content" }, h("textarea", { key: '7e130463b6e52c33656bc91df6ec95cd998b8375', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = 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-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h("div", { key: 'c61b17dfadad1f4483aae5d1b84fae6a92ae8b1e', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: '901725f331c7ee08e7e0ae8834907bed94f2eefc', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '60fda4488f86ba586af8637b016b3f9d56de635f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '3624ace952fc8ddba0400344b5ecd162db97ad0f', class: "digi-form-textarea__content" }, h("textarea", { key: 'cc0f9212adfa7d39240a0cc02d7859761e16f019', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = 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-invalid": this.afValidation === FormTextareaValidation.ERROR
                 ? 'true'
-                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '55ab944bb3f18533e2a8e6eb60f6a5342995b416', class: "digi-form-textarea__footer" }, h("div", { key: 'f88ead6eacffa2661e0a8311cdfe5af814743a1e', class: "digi-form-textarea__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '533fdbaa51fde2f0e757eea7f946546e634caa6e', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '0bfcc28ea5818c2ae68894d165bef6ff61155841', class: "digi-form-textarea__footer" }, h("div", { key: '77fb29eee9f8623c044472a41449dcb45b2d54ff', class: "digi-form-textarea__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'd5013d2e0f448038a8f13e9e824a091f5699c5dd', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-validation-message/form-validation-message.js

@@ -28,7 +28,7 @@ export class FormValidationMessage {
         }
     }
     render() {
-        return (h("div", { key: 'b4d77f58e8c289295892fe8c6bbd128f0ac0bfe8', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: 'ccf07b383eed2f696e2108bc2b11d50a0a37aee2', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: 'fe5c2456fcc88c666463205c7c735048697f37d2', class: "digi-form-validation-message__text" }, h("slot", { key: '8d47bef18ec9c7b255f8ee3ec94af6620a0c0dd4' }))));
+        return (h("div", { key: '1660f54f79665b4ff25d961a2cce8afa445347c9', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: '077ab407a8b939ba9799f9378ae1bf5256623b0a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '2d5b27ca89af093f5ef02ac4c5d889630891556f', class: "digi-form-validation-message__text" }, h("slot", { key: 'd30cc6c30ef04cf3362c37ca94ea83eb88dd436e' }))));
     }
     static get is() { return "digi-form-validation-message"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header/header.js

@@ -35,8 +35,8 @@ export class Header {
         return (h(Fragment, null, h("div", { class: "digi-header__logo", "aria-label": this.afAriaLabel }, h("div", { class: "digi-header__wrapper" }, ((this.isMobile && !this.afHideSystemName) || !this.isMobile) && (h("digi-logo", { "af-system-name": this.afSystemName, afSvgAriaHidden: true })), this.afHideSystemName && this.isMobile && (h("digi-logo", { "af-system-name": " ", afSvgAriaHidden: true })), h("slot", { name: "header-logo" })), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" }), this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))))));
     }
     render() {
-        return (h("header", { key: 'ea9eb6c5bb6e37082b4b0f674d663b728147f025', class: "digi-header" }, h("digi-util-breakpoint-observer", { key: 'a12bc91705505a970bbc4f1ab7c8954ca12314cf', onAfOnChange: (e) => (this.isMobile =
-                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }), h("digi-layout-block", { key: '8a7719561230ff04cd023046f6dd21dfe01cb96e', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '46f513081b8c03d98b0c41de087c40ab8086ce62', class: "digi-header__border", "aria-label": this.afAriaLabel }), h("div", { key: '75ee0f61ee70d099e4940d99f989b4403b1570df', class: "digi-header__navigation" }, h("slot", { key: '2ef66a2070710fea45087cf96d4c56fbe02e03f1', name: "header-navigation" })))));
+        return (h("header", { key: 'd60b4cece74fc6fd9b821ede276ba6eb840e9b9f', class: "digi-header" }, h("digi-util-breakpoint-observer", { key: '81aab67807671c101ab7e4d9ff53d317c08742c1', onAfOnChange: (e) => (this.isMobile =
+                e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) }), h("digi-layout-block", { key: '3eb88f002e5ac7465bb97a83225dc45560255e57', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '1de790bda0b7f12302b29dd05627ae2254c06163', class: "digi-header__border", "aria-label": this.afAriaLabel }), h("div", { key: 'e0b59d6f7cf32dfdea48b179d34a0ec1f62cc564', class: "digi-header__navigation" }, h("slot", { key: '0f627246aa632e42413eba9a1fb55fbfbe8a3559', name: "header-navigation" })))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header-avatar/header-avatar.js

@@ -54,7 +54,7 @@ export class NavigationAvatar {
         if (this.afShowPlaceholderImage) {
             this.afHideImage = true;
         }
-        return (h("div", { key: '64fe3bc01a24616c897731922c27e80d1b5b0f36', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: 'e3eaae1d160a92b2dcb665bfab6a525139946570', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: '79721c8dafb2c882636d59afb6105ae830349d19', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: 'fd721ba027a41c5f8f1f0222eb8cbfcf35db423b' }, h("title", { key: '1abe7f2022bf622309d8f575e260f1bce4d9802c' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: '4df36de8d4cbbeb97178a7136aa499f82e024168', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: '4b20ae2fe652a7ac62603c698bbc993ac8b1556e', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: '2089f8c7549d092d54077c6e7304aa9cf5abf5b7' }, h("title", { key: '5c1f76f3e0fd461d626eafafb6a1bc4c5619057b' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'b5de2480dcd323bfce343d9576b63b6347f50958' })));
+        return (h("div", { key: '7abfbd7b1e1933cef757ab4a4ba169618a6189d9', class: "digi-header-avatar" }, !this.afHideImage && this.afIsLoggedIn && (h("digi-media-image", { key: '7d9e2d755739a39c0fed8acd21ca17e0384d0b64', class: 'digi-header-avatar__image', "af-height": "32", "af-width": "32", afUnlazy: true, "af-src": this.afSrc, afAlt: this.afAlt })), this.afShowPlaceholderImage && this.afIsLoggedIn && (h("span", { key: 'e0b721cc0ec670ec743bd6d0ec497fb58baf0f5a', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-in" }, h(this.currentAvatar, { key: '38d57fc3adb6ebb3b7c9f2683327960c0e1bbbc7' }, h("title", { key: '967f77cdc4194a063fafb6a7c684e29d7e1cbdf3' }, this.afPlacerholderTitle)))), this.afIsLoggedIn && (h("span", { key: 'c59653a35e8a1b441e518c482f047c483c8b68d7', class: "digi-header-avatar__name" }, this.setCurrentLoginName())), !this.afIsLoggedIn && (h("span", { key: 'e32d280aa3408a1e357afbe626304b56139238c1', class: "digi-header-avatar__icon digi-header-avatar__icon-logged-out" }, h(this.currentAvatar, { key: 'e472df32ef3fc8354447df8b2b23815198d3b5cf' }, h("title", { key: 'e8191617054592c9a1216fb97ab3689c402e922a' }, this.afPlacerholderTitle)))), !this.afIsLoggedIn && h("slot", { key: 'c35f521b2882d8033241c9dc1e2a2b5972a00a74' })));
     }
     static get is() { return "digi-header-avatar"; }
     static get encapsulation() { return "scoped"; }