@designsystem-se/af 36.0.2-beta.1 → 36.0.3-beta.0

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

@@ -10,6 +10,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
+ * @valueAccessor TextValueAccessor
  */
 export class FormInputSearch {
     constructor() {
@@ -118,10 +119,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        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: {
+        return (h(Host, { key: '5502afd53a378b67ffaed787a84ffd0e154c6a75', tabindex: -1 }, h("div", { key: '9d76ceba2e057efe2029cb600ce43e3e2d39ebfb', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'fbee883f2df35b697093aa7fcdd134704583b350', 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: '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))))));
+            }, 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: '45ca4cd2086bf49f53781bd11919ea8cbee9d9fa', 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: '1860c4ec6f386c16552d959c0b8091e4e88060cb', slot: "icon" }), this.afButtonText))))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,6 +6,7 @@ import { FormRadiobuttonLayout } from "./form-radiobutton-layout.enum";
 /**
  * @enums FormRadiobuttonValidation - form-radiobutton-validation.enum.ts
  * @enums FormRadiobuttonVariation - form-radiobutton-variation.enum.ts
+ * @valueAccessor RadioValueAccessor
  * @swedishName Radioknapp
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
  */
@@ -86,9 +87,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        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
+        return (h(Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', 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: 'fa72694ab9d81781251da78b9356ad2fceb916ac', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: 'dc9a093395165968b384fee6a8fcaf1fd5c8c142', 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: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,6 +5,7 @@ import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
  * @slot radiobuttons
  *
  * @swedishName Radiogrupp
+ * @valueAccessor TextValueAccessor
  *
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
  */
@@ -62,9 +63,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: '702853b1b724d80082952fa4ae896663207d169f', tabindex: -1 }, h("div", { key: '7242ba41b2ca1eb451ca26718b490e1548410c81', id: this.afId, class: {
+        return (h(Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '29a1e29b857220be7339c3e9fa57e79502e2dd0d', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '2009fdee569e8744fb4f7cce68a824154abef6bf' }))), h("div", { key: '28f14b57f29baee0c2f3b8ce99e68a18868b5c1f', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'e39cf265b5dbdf2ecb32eeb80ec7e5de9f916f32', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, h("digi-util-mutation-observer", { key: 'ed9e1a034e5d5221c4c004e12db780077277876e', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '5572449dc6ad235472c92e8524d26688d56e1b10' }))), h("div", { key: 'b0696ddf7c218434fded2380f41bca17e407a797', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '63cde6f36e3064bd421c7d162e72ab414f5584cf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,8 +3,8 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--secondary);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
+  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-select--background--success: var(--digi--color--background--interactive--validation--success);
   --digi--form-select--background--warning: var(--digi--color--background--interactive--validation--warning);
   --digi--form-select--background--error: var(--digi--color--background--interactive--validation--error);

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

@@ -10,6 +10,7 @@ import { FormSelectVariation } from "./form-select-variation.enum";
  * @enums FormSelectVariation - form-select-variation.enum
  * @swedishName Väljare
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet
+ * @valueAccessor SelectValueAccessor
  */
 export class FormSelect {
     constructor() {
@@ -133,17 +134,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h(Host, { key: '564278041d6661785372ce699def75ecae69c1e7', tabindex: -1 }, h("div", { key: 'd406ba753d7a692dd4fef12028c6e582c0729237', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '57a815c752617b0189a0a451dfd9ac0b3140c4fc', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'ab54ac3e2dadbc98decb669df1b95d1a8bce6881', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '390f1562456c469c970e39223aaccd5d6f2e7bb8', class: "digi-form-select__select-wrapper" }, h("select", { key: '3583ca126d1aac3b4ea0b84aaf19eb2352b9dbfc', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h(Host, { key: 'd0422f1a779704cd2e9192f81199c58738c6f4db', tabindex: -1 }, h("div", { key: 'f6a49628a7d5d3d2d633e816aaf260242478fc4c', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '755b1b576bb8847570426d982d1a3445fb44edff', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'eda13cccb65792193b318bf9c21bd0b52384dbc5', 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: '0ae5338fd5aa2b7fffe60935ddae9fec0cbaf379', class: "digi-form-select__select-wrapper" }, h("select", { key: 'bd758e92e3fb977be5bad8530062d9b5c71f7e11', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                 ? 'true'
-                : 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: 'b8018bae71f5a61781a3d29e76a551f5761d338c', class: {
+                : 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '85d60c1b04d3a48773d7a25e79d6e6896abc4334', 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: '9858368762d4c40784a2d0d41f708224d739784f', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '5f2a46ed7cab5279361bf7c6f5b010c23d60c79a', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), h("digi-icon-input-select-marker", { key: 'e9ab4ef12562679223aaa7f60e20936d2a1e078e', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '188b27eb0a27f9bb81eb8211e67df8d8c54b7485', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: 'ed720f6760ffc1875712705218b6049018ef0f62' })), h("div", { key: 'fef47d914b0133b26b6a945aa7297a78a06f1ce5', class: "digi-form-select__footer" }, h("div", { key: 'b20834a4be9b1e3711f8ff9c3766ffb2eeb42a4a', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '7f13b2333b5cf62006c727648c3a22776dd44b7e', "af-variation": this.afValidation }, this.afValidationText)))))));
+            } }, h("slot", { key: '70b2eeb015a08bfc2379f30eb4cf7e6281066d56' })), h("div", { key: 'd8aa1c5d5de3e847136d29b14a236d6cf73ecad4', class: "digi-form-select__footer" }, h("div", { key: '27f8450662d599b55aa22a3a82f268de8ecd7cbc', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'e7f512be5ea01c8bb2c6a1e20bacafd43acf2770', "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.css

@@ -13,7 +13,7 @@ License: none (public domain)
   --digi--form-select-filter--item--margin: var(--digi--gutter--small) 0;
   --digi--form-select-filter--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--form-select-filter--dropdown--border-radius: var(--digi--border-radius--input);
-  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--primary-elevated);
   --digi--form-select-filter--dropdown--min-width: 18.75rem;
   --digi--form-select-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-select-filter--dropdown--z-index: 999;

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

@@ -11,6 +11,7 @@ import { FormSelectFilterValidation } from "./form-select-validation.enum";
  * @slot empty-search-result - Innehåll som visas om sökningen inte ger några resultat.
  * @swedishName Väljare med sök
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen
+ * @valueAccessor SelectValueAccessor
  */
 export class FormSelectFilter {
     constructor() {
@@ -457,16 +458,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '363c7880f1e2ff36d2d0d850b814a2a0d69f5c6b', tabindex: -1 }, h("div", { key: '4814a99bb25b5b9c0e8af87ba5e7bb88240c7075', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'd725f0f0d72400f61d83c20f4308d1cd8161c0d4', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: 'a32cf9a3f3c090d6160ceb3baab94cd1fd395dec', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'd8c6db1a0d0a92fd6018026b9f7f3a767ac8a838', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: 'a00d3118356da4701c621c9b5d724466ff7e54a8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'e9fb9100d4addd46561858bdec5146608f4cb4b1', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'db16c355c8fa96577afad5f1f2f93cf9e7b85728', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '3b48132e4aaa46943ab7de9ed2d7c5924e7fce7e', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '611df06915faf061c330e82900a878cb33df3ade', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h(Host, { key: '232ad0fdb8164fb6ed04d1d2fdcdc778a197ae43', tabindex: -1 }, h("div", { key: 'bd384c56a99f54deef5cb2e325bae1e65c53696c', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'af3ad60e123ffe072af3590230975d6cb4b08db9', 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: '06cb88227494648eb5e9861022830562b20fbbb2', onAfOnEsc: () => this.escHandler() }, h("button", { key: '8f829b158f487b9b671066f18b6948d24bd7724c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '6b28930875126efeea6e011d17567b2de4bf7635', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'afde185a6027a96c0fd75a80bfbf9a462839cd32', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '8b846d513be35ffec07b6f1073b24c4fad8b09d0', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '795ac4c5d2cf7e7ddff801cc8224215b8c0f4492', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '1952bcb6c880cc79263c348067c8e76ee4b2c54d', 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: '24d6136fd0804266382896b2a7cf88f55b9e621d' }, h("div", { key: '673b2522e7fdccd7c33cca97f83ce0f74426beb7', class: "digi-form-select-filter__header" }, h("legend", { key: 'b5ce6937175dbdf6ad7317dac7c74bb6daa103a3', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '89e97f9ab37a581c415ea3046c819d7e8a394925', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: '67c787d57885455dc6018b14ee77c5cf8f889269' }, h("div", { key: 'f04990f47e0c842447503c0c669fad9f075e1800', class: "digi-form-select-filter__header" }, h("legend", { key: 'a555f7e77fd3fc35badec8261676746ad0d07a96', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'dbbe1895e3f36e9103429510bdaa669839c1509b', 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: '6a93bfc0f2e0da233706f4ddaef8b1954bf10b08', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '94216744dee9ab58d9600b27a09c4a735ffeb11d', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '0665d13ce2587a9db802b1f6d67ba5b8b16365fc', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, 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: '7a1b963b624783f76d6b938aef4b54b5539a8b19', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '210bdb0e2937132b68378a770edfb6c93e7b831e', 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: 'bdf8431ce2a39cdb9c23c8419eb12518ca20e3dd', 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
@@ -475,11 +476,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '6d0d547803d71e989f778abf84c2e0d4c18e7341', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '4d97c4be7a31dbe830181eefc37929b3bb2f9234', 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: 'ae8a6f5473128dd8a32f78d0553e4042219b0ae0', 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: 'c1af26327f9bab4456a3770698cb08e8f0b0be95', 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'
@@ -495,9 +496,9 @@ export class FormSelectFilter {
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: '28b8822e8cf3e8081b15b2a0fc4835181209774a', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '4f182ff5de1010f03f2fd405bff3f8c0b8c88bc4', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '82d56e0e937b4da1c7deb073c7a2a904f97b1c32', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '3211daf5462987f42eceaefc211eaf24fa421556', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: 'e9617bc3097f670582c1ad9fe9dcc3cdd5a56f5b', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'b4899966b541b5d67a32f07a01631509075a7106', "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: '5662e817b03fb9d04b5a01d726863dca84e23f88', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'bc7cb5ef64aa7a5f0e3ce29f416fa9995ef2f7c8', 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: 'dc5b3df62deeef8cfc9a890997effce86fa3379e', class: "digi-form-select__footer" }, h("div", { key: '490f54fb8b2a5efa32378b5715f1fc950283bd4f', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '859be3c7d2fe6c840b8a08b5b0869c85f8102b9a', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '724a4171df75af688ddc34312db71d8c0ddc882e', class: "digi-form-select__footer" }, h("div", { key: 'e6e83f72fa04ff87cc30868dc7b125ad1289e6f2', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'ed8426f025854a09aa445734e239dae8574daec4', "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

@@ -7,6 +7,7 @@ import { FormTextareaValidation } from "./form-textarea-validation.enum";
  * @enums FormTextareaVariation - form-textarea-variation.enum.ts
  * @swedishName Textarea
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva textarea-elementet
+ * @valueAccessor TextValueAccessor
  */
 export class FormTextarea {
     constructor() {
@@ -118,10 +119,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'b031f0fc07ee06dd9eba39c1d1e86f532425c287', tabindex: -1 }, h("div", { key: 'e7936c1327b844ab758e7d0a1f7d82772ed2fb49', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'de9052c03a2dc4afb7ba8bc613d42e0c7d9a149a', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '14fbda0f999ffade503c5b175c3c4001612a39d0', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'eebaae6ee90e11fc8e9a00b5380ff7d5ad58fa84', class: "digi-form-textarea__content" }, h("textarea", { key: '7e04633f987ae49fc0fe5f0de1f4ad14a632449f', 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} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h(Host, { key: '8fc80d345a10b05e22b3dcd5adb63449d50b07e1', tabindex: -1 }, h("div", { key: '049576151b60c94d55711e696af1262ac6701f34', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'a18d782506a20eb687bd8792a3fb0da3db159d4f', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '1574be92b63e16034a5690a9d217da8e63ca7470', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'c3258fb29058a14abae464e8e7f22074675e0115', class: "digi-form-textarea__content" }, h("textarea", { key: '5273fb0ea8d7c1345bfc37df0214f1ceb497f2ae', 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} ${this.afId}--validation-message`, "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: '782847ff2e8b5d53fd1a0e48157c98320d953332', class: "digi-form-textarea__footer" }, h("div", { key: 'd6db43705ad5646f7f3e7119e45c0023323ec991', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'd9b119ec1349df2f83e9b088dc846b3f29198f97', 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: '38ade9720142b05d65248291749635e061681bad', class: "digi-form-textarea__footer" }, h("div", { key: 'fbe8041652cc9c1bc72bffc98582c5312b9c020b', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'baea13a3e9d6c7a762cce0f0296ee0dcb267ff9f', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }