@designsystem-se/af 39.2.1-beta.0 → 39.2.1-beta.2

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

@@ -3,7 +3,7 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
   --digi--form-select-filter--scroll--max-height: 10.625rem;
   --digi--form-select-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-select-filter--reset-button--margin-right: var(--digi--padding--small);
@@ -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--dropdown);
   --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;
@@ -32,7 +32,7 @@ License: none (public domain)
   --digi--form-select-filter--dropdown--item--margin-bottom: 0px;
   --digi--form-select-filter--dropdown--item--border-width: var(--digi--border-width--primary);
   --digi--form-select-filter--dropdown--item--border-type: var(--digi--border-style--primary);
-  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--primary);
+  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--tertiary-hypotes);
   --digi--form-select-filter--dropdown--item--padding-y: var(--digi--margin--small);
   --digi--form-select-filter--dropdown--item--padding-x: var(--digi--margin--largest);
   --digi--form-select-filter--dropdown--item--multiple--padding-y: var(--digi--margin--small);

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

@@ -15,42 +15,75 @@ import { FormSelectFilterValidation } from "./form-select-validation.enum";
  */
 export class FormSelectFilter {
     constructor() {
-        this._searchQuery = '';
-        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
-        this._valueIsMaster = false;
-        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
-        this._updatingValueInternally = false;
         this.isOpen = false;
         this.focusListItemIndex = 0;
         this.focusInList = false;
-        this._afListItems = undefined;
         this._filteredResult = [];
         this._selectedItems = [];
-        this.afDescription = undefined;
-        this.afDisableValidation = undefined;
+        this._searchQuery = '';
+        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
+        this._valueIsMaster = false;
+        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
+        this._updatingValueInternally = false;
+        /**
+         * Sätter väljarens validering
+         * @en Set select validation
+         */
         this.afValidation = FormSelectFilterValidation.NEUTRAL;
-        this.afValidationText = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
+        /**
+         * Normalt betonas ett obligatoriskt fält visuellt och semantiskt.
+         * Detta vänder på det och betonar fältet om det inte krävs.
+         * Ställ in detta till sant om ditt formulär innehåller fler obligatoriska fält än inte.
+         * @en Normally a required field is visually and semantically emphasized.
+         * This flips that and emphasizes the field if it is not required.
+         * Set this to true if your form contains more required fields than not.
+         */
         this.afAnnounceIfOptional = false;
-        this.afAnnounceIfOptionalText = undefined;
+        /**
+         * Sorterar listan i alfabetisk ordning.
+         * @en Sort the list in alphabetical order.
+         */
         this.sortAlphabetically = true;
+        /**
+         * @ignore
+         * Propertyn `value` finns inte dokumenterad på komponentens sida på dokumentationswebben, utan
+         * är endast till för att användas tillsammans med Angulars Control Value Accessors (CVA).
+         * Används CVA för att hantera komponentens värden så ska inte afListItems användas för att
+         * påverka vilka val som är gjorda eller ej.
+         * Exempel på båda sätten att hantera datat finns i Angular Playground.
+         */
         this.value = [];
+        /**
+         * Sätts till true om det ska gå att välja flera val från listan.
+         * @en Set to true if you should be able to choose multiple items from the list.
+         */
         this.afMultipleItems = false;
-        this.afListItems = undefined;
+        /**
+         * Prefixet för alla komponentens olika interna 'id'-attribut på dropdowns, filterlistor etc. Ex. 'my-cool-id' genererar 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' och så vidare. Ges inget värde så genereras ett slumpmässigt.
+         * @en Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' and so on. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-select-filter');
-        this.afFilterButtonTextLabel = undefined;
-        this.afFilterButtonText = undefined;
-        this.afFilterButtonTextMultipleValues = undefined;
-        this.afSubmitButtonText = undefined;
-        this.afSubmitButtonTextAriaLabel = undefined;
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
         this.afResetButtonText = _t.clear;
-        this.afResetButtonTextAriaLabel = undefined;
+        /**
+         * Döljer rensaknappen när värdet sätts till true
+         * @en Hides the reset button when set to true
+         */
         this.afHideResetButton = false;
-        this.afAlignRight = undefined;
-        this.afName = undefined;
+        /**
+         * Text som visas när sökningen inte ger några resultat.
+         * @en Text that is shown the the search gives no result.
+         */
         this.afEmptySearchMessage = 'Inga sökträffar för';
-        this.afFilterButtonAriaDescribedby = undefined;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
         this.afErrorMessageIsAlert = true;
     }
     onValueChanged(newValue) {
@@ -134,11 +167,21 @@ export class FormSelectFilter {
         this._toggleButton.focus();
     }
     componentWillLoad() {
-        /* Stencil @Watch does not run for the initial prop value.
-         * Given that Angular Control Value Accessors writeValue often sets `value` before willLoad —
-         * we need to force a value check here with bootstrapInitialValue .*/
         this.bootstrapInitialValue();
         this.handleListItems();
+        // Angular attaches the host first and binds `[afListItems]` / CVA `value` on
+        // the next frame (Stencil 4.36+). @Watch skips that first assignment, so if
+        // the list is not here yet, wait one frame. React/vanilla that already set
+        // the prop skip the delay.
+        if (!this.afListItems) {
+            return new Promise((resolve) => {
+                requestAnimationFrame(() => {
+                    this.bootstrapInitialValue();
+                    this.handleListItems();
+                    resolve();
+                });
+            });
+        }
     }
     bootstrapInitialValue() {
         if (typeof this.value === 'string') {
@@ -495,16 +538,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, h("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '99d0e29f7dad712882c0a3c5fd3f468af7dd5c55', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, h("button", { key: '260c22654935d7422d5fc30a47fbd0c37ec00f0c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h(Host, { key: '2e7276930637366cbcb14168102afb82393708f5', tabindex: -1 }, h("div", { key: 'a5620907d2399c0561b6b3b604220c3bf82ded6b', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '151c3656f03d8b8b7639daf0e26631722a1f6878', 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: '035ffc46a22218d42d892c89592993a7694b2be2', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'b8fedc87ecf0b1cf26e2b123c97fcd7ff6287e0b', 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: '8bb88747afac881b3667ecb60c4adbe36c1325f8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'a809c5fa00dd4d2a50662aeed3d673cda0289d80', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'a5e7f4b998d38a7d912a25b2d7fb0b852b920dc3', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: 'ef852d8060bacbdef9707dcb23ed3ae1f98cc33f', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '5c5e41376cf7264e837bed3905c971dd0adee156', 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: 'f98295e8e804f93428489daf5844df9854ed6053' }, h("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, h("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: 'daa4e02e97f5907fc89aeb7a337bd97ceba1c148' }, h("div", { key: '99cd8af83d9b1410610f4e49a6759fac20c6955f', class: "digi-form-select-filter__header" }, h("legend", { key: '0ed1e17842e0795194c4b74d9600f17c3d2e63b0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'c35f93cb680c6f6e902f281ff597108a9106b016', 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: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '656253e1dba64d2906ae9b195063300fe5cbd900', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '4a42a8ee02e3921710aa00826b31558ed1f9a485', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, 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: '4e2c4a6e6039f8f3efe8cfc75bb302214704073e', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '751ad128164783be9f7d32d5418d8b99a2be24e3', 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: '2879b7c081ea2097bd17a9c0f0967b78b9a5d665', 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
@@ -513,11 +556,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '0d51a466af769e3b687805b4cb8027bcac8b5112', 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: '43f446e70c707681dd1de50e11af511e8c4d060e', 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: '84264b690e6a8b4cd792f6543f00a7f5e559fe06', 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'
@@ -533,9 +576,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: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "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: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: '79def162604c33d3c6acffd7464f2d44f4cf6229', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '3ee850fa06c38590c50dcfba11251bd6a4ed5626', "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: '0fe5d9f9d899d3ddeaf6447485bf5f655e6270ff', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '0c14fea74bd16712355a8fafdc17408674ae0489', 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: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, h("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'eb9dd0d0150b043458211e89c1311d9c7103d46f', class: "digi-form-select__footer" }, h("div", { key: 'f7aca001f6b2580600c1e823e307a4352811bb66', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '5802021f469405694a75378fc8830720a9275d41', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }
@@ -570,8 +613,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-description",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-description"
             },
             "afDisableValidation": {
                 "type": "boolean",
@@ -592,8 +635,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-disable-validation",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-disable-validation"
             },
             "afValidation": {
                 "type": "string",
@@ -605,7 +648,8 @@ export class FormSelectFilter {
                         "FormSelectFilterValidation": {
                             "location": "import",
                             "path": "./form-select-validation.enum",
-                            "id": "src/components/_form/form-select-filter/form-select-validation.enum.ts::FormSelectFilterValidation"
+                            "id": "src/components/_form/form-select-filter/form-select-validation.enum.ts::FormSelectFilterValidation",
+                            "referenceLocation": "FormSelectFilterValidation"
                         }
                     }
                 },
@@ -620,8 +664,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-validation",
                 "reflect": false,
+                "attribute": "af-validation",
                 "defaultValue": "FormSelectFilterValidation.NEUTRAL"
             },
             "afValidationText": {
@@ -643,8 +687,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-validation-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-validation-text"
             },
             "afRequired": {
                 "type": "boolean",
@@ -665,8 +709,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-required",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-required"
             },
             "afRequiredText": {
                 "type": "string",
@@ -687,8 +731,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-required-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-required-text"
             },
             "afAnnounceIfOptional": {
                 "type": "boolean",
@@ -709,8 +753,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-announce-if-optional",
                 "reflect": false,
+                "attribute": "af-announce-if-optional",
                 "defaultValue": "false"
             },
             "afAnnounceIfOptionalText": {
@@ -732,8 +776,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-announce-if-optional-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-announce-if-optional-text"
             },
             "sortAlphabetically": {
                 "type": "boolean",
@@ -754,8 +798,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sort-alphabetically",
                 "reflect": false,
+                "attribute": "sort-alphabetically",
                 "defaultValue": "true"
             },
             "value": {
@@ -768,7 +812,8 @@ export class FormSelectFilter {
                         "IListItem": {
                             "location": "import",
                             "path": "./form-select-filter.interface",
-                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem",
+                            "referenceLocation": "IListItem"
                         }
                     }
                 },
@@ -804,8 +849,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-multiple-items",
                 "reflect": false,
+                "attribute": "af-multiple-items",
                 "defaultValue": "false"
             },
             "afListItems": {
@@ -818,7 +863,8 @@ export class FormSelectFilter {
                         "IListItem": {
                             "location": "import",
                             "path": "./form-select-filter.interface",
-                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem",
+                            "referenceLocation": "IListItem"
                         }
                     }
                 },
@@ -833,8 +879,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-list-items",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-list-items"
             },
             "afId": {
                 "type": "string",
@@ -855,8 +901,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-id",
                 "reflect": false,
+                "attribute": "af-id",
                 "defaultValue": "randomIdGenerator('digi-form-select-filter')"
             },
             "afFilterButtonTextLabel": {
@@ -878,8 +924,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-filter-button-text-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-filter-button-text-label"
             },
             "afFilterButtonText": {
                 "type": "string",
@@ -900,8 +946,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-filter-button-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-filter-button-text"
             },
             "afFilterButtonTextMultipleValues": {
                 "type": "string",
@@ -922,8 +968,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-filter-button-text-multiple-values",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-filter-button-text-multiple-values"
             },
             "afSubmitButtonText": {
                 "type": "string",
@@ -944,8 +990,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-submit-button-text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-submit-button-text"
             },
             "afSubmitButtonTextAriaLabel": {
                 "type": "string",
@@ -966,8 +1012,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-submit-button-text-aria-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-submit-button-text-aria-label"
             },
             "afResetButtonText": {
                 "type": "string",
@@ -988,8 +1034,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-reset-button-text",
                 "reflect": false,
+                "attribute": "af-reset-button-text",
                 "defaultValue": "_t.clear"
             },
             "afResetButtonTextAriaLabel": {
@@ -1011,8 +1057,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-reset-button-text-aria-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-reset-button-text-aria-label"
             },
             "afHideResetButton": {
                 "type": "boolean",
@@ -1033,8 +1079,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-hide-reset-button",
                 "reflect": false,
+                "attribute": "af-hide-reset-button",
                 "defaultValue": "false"
             },
             "afAlignRight": {
@@ -1056,8 +1102,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-align-right",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-align-right"
             },
             "afName": {
                 "type": "string",
@@ -1078,8 +1124,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-name"
             },
             "afEmptySearchMessage": {
                 "type": "string",
@@ -1100,8 +1146,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-empty-search-message",
                 "reflect": false,
+                "attribute": "af-empty-search-message",
                 "defaultValue": "'Inga s\u00F6ktr\u00E4ffar f\u00F6r'"
             },
             "afFilterButtonAriaDescribedby": {
@@ -1123,8 +1169,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-filter-button-aria-describedby",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-filter-button-aria-describedby"
             },
             "afErrorMessageIsAlert": {
                 "type": "any",
@@ -1145,8 +1191,8 @@ export class FormSelectFilter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-error-message-is-alert",
                 "reflect": false,
+                "attribute": "af-error-message-is-alert",
                 "defaultValue": "true"
             }
         };
@@ -1197,7 +1243,8 @@ export class FormSelectFilter {
                         "IListItem": {
                             "location": "import",
                             "path": "./form-select-filter.interface",
-                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem",
+                            "referenceLocation": "IListItem"
                         }
                     }
                 }
@@ -1257,7 +1304,8 @@ export class FormSelectFilter {
                         "IListItem": {
                             "location": "import",
                             "path": "./form-select-filter.interface",
-                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem"
+                            "id": "src/components/_form/form-select-filter/form-select-filter.interface.ts::IListItem",
+                            "referenceLocation": "IListItem"
                         }
                     }
                 }