@designsystem-se/af 38.2.0 → 38.2.1-beta.0

package/dist/esm/{typography-variation.enum-c85d7857.js → typography-variation.enum-fdda731c.js}

@@ -49,13 +49,6 @@ var DialogVariation;
     DialogVariation["SECONDARY"] = "secondary";
 })(DialogVariation || (DialogVariation = {}));
 
-var FooterCardVariation;
-(function (FooterCardVariation) {
-    FooterCardVariation["NONE"] = "none";
-    FooterCardVariation["ICON"] = "icon";
-    FooterCardVariation["BORDER"] = "border";
-})(FooterCardVariation || (FooterCardVariation = {}));
-
 var FooterVariation;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -72,6 +65,34 @@ var FormErrorListHeadingLevel;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(FormErrorListHeadingLevel || (FormErrorListHeadingLevel = {}));
 
+var FormInputMode;
+(function (FormInputMode) {
+    FormInputMode["DEFAULT"] = "";
+    FormInputMode["NONE"] = "none";
+    FormInputMode["TEXT"] = "text";
+    FormInputMode["DECIMAL"] = "decimal";
+    FormInputMode["NUMERIC"] = "numeric";
+    FormInputMode["TEL"] = "tel";
+    FormInputMode["SEARCH"] = "search";
+    FormInputMode["EMAIL"] = "email";
+    FormInputMode["URL"] = "url";
+})(FormInputMode || (FormInputMode = {}));
+
+var FormInputValidation;
+(function (FormInputValidation) {
+    FormInputValidation["SUCCESS"] = "success";
+    FormInputValidation["ERROR"] = "error";
+    FormInputValidation["WARNING"] = "warning";
+    FormInputValidation["NEUTRAL"] = "neutral";
+})(FormInputValidation || (FormInputValidation = {}));
+
+var FormInputVariation;
+(function (FormInputVariation) {
+    FormInputVariation["SMALL"] = "small";
+    FormInputVariation["MEDIUM"] = "medium";
+    FormInputVariation["LARGE"] = "large";
+})(FormInputVariation || (FormInputVariation = {}));
+
 var FormFieldsetValidation;
 (function (FormFieldsetValidation) {
     FormFieldsetValidation["SUCCESS"] = "success";
@@ -177,32 +198,6 @@ var InfoCardHeadingLevel;
     InfoCardHeadingLevel["H6"] = "h6";
 })(InfoCardHeadingLevel || (InfoCardHeadingLevel = {}));
 
-var LayoutBlockContainer;
-(function (LayoutBlockContainer) {
-    LayoutBlockContainer["STATIC"] = "static";
-    LayoutBlockContainer["FLUID"] = "fluid";
-    LayoutBlockContainer["NONE"] = "none";
-})(LayoutBlockContainer || (LayoutBlockContainer = {}));
-
-var LayoutContainerVariation;
-(function (LayoutContainerVariation) {
-    LayoutContainerVariation["STATIC"] = "static";
-    LayoutContainerVariation["FLUID"] = "fluid";
-    LayoutContainerVariation["NONE"] = "none";
-})(LayoutContainerVariation || (LayoutContainerVariation = {}));
-
-var LayoutContainerMaxWidth;
-(function (LayoutContainerMaxWidth) {
-    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
-    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
-})(LayoutContainerMaxWidth || (LayoutContainerMaxWidth = {}));
-
-var LogoColor;
-(function (LogoColor) {
-    LogoColor["PRIMARY"] = "primary";
-    LogoColor["SECONDARY"] = "secondary";
-})(LogoColor || (LogoColor = {}));
-
 var NotificationAlertHeadingLevel;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";
@@ -268,4 +263,4 @@ var TypographyVariation;
     TypographyVariation["LARGE"] = "large";
 })(TypographyVariation || (TypographyVariation = {}));
 
-export { BadgeNotificationType as B, CalendarDatepickerValidation as C, DialogHeadingLevel as D, ErrorPageStatusCodes as E, FooterCardVariation as F, HeaderCenterContentWidth as H, InfoCardMultiContainerHeadingLevel as I, LayoutBlockContainer as L, NotificationAlertHeadingLevel as N, TitleLogoVariation as T, CodeBlockLanguage as a, DialogSize as b, DialogVariation as c, FooterVariation as d, FormErrorListHeadingLevel as e, FormFieldsetValidation as f, FormRadiobuttonLayout as g, FormRadiobuttonValidation as h, FormRadiobuttonVariation as i, FormReceiptHeadingLevel as j, FormReceiptType as k, FormReceiptVariation as l, FormSelectFilterValidation as m, InfoCardMultiHeadingLevel as n, InfoCardMultiVariation as o, InfoCardHeadingLevel as p, LayoutContainerVariation as q, LayoutContainerMaxWidth as r, LogoColor as s, NotificationAlertSize as t, NotificationAlertVariation as u, ToolsFeedbackHeadingLevel as v, ToolsFeedbackType as w, FeedbackVariation as x, TypographyVariation as y };
+export { BadgeNotificationType as B, CalendarDatepickerValidation as C, DialogHeadingLevel as D, ErrorPageStatusCodes as E, FooterVariation as F, HeaderCenterContentWidth as H, InfoCardMultiContainerHeadingLevel as I, NotificationAlertHeadingLevel as N, TitleLogoVariation as T, CodeBlockLanguage as a, DialogSize as b, DialogVariation as c, FormErrorListHeadingLevel as d, FormInputMode as e, FormInputValidation as f, FormInputVariation as g, FormFieldsetValidation as h, FormRadiobuttonLayout as i, FormRadiobuttonValidation as j, FormRadiobuttonVariation as k, FormReceiptHeadingLevel as l, FormReceiptType as m, FormReceiptVariation as n, FormSelectFilterValidation as o, InfoCardMultiHeadingLevel as p, InfoCardMultiVariation as q, InfoCardHeadingLevel as r, NotificationAlertSize as s, NotificationAlertVariation as t, ToolsFeedbackHeadingLevel as u, ToolsFeedbackType as v, FeedbackVariation as w, TypographyVariation as x };

package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts

@@ -20,6 +20,10 @@ export declare class FormSelectFilter {
     private _toggleButton;
     private _submitButton;
     private _searchQuery;
+    /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
+    private _valueIsMaster;
+    /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
+    private _updatingValueInternally;
     /**
      * En valfri beskrivningstext.
      * @en An optional description text.
@@ -71,9 +75,14 @@ export declare class FormSelectFilter {
     sortAlphabetically: boolean;
     /**
      * @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.
      */
     value: IListItem[];
-    onValueChanged(value: IListItem[]): void;
+    onValueChanged(newValue: IListItem[] | string): void;
     /**
      * 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.
@@ -201,7 +210,18 @@ export declare class FormSelectFilter {
      * @en Listens for when focus is set on the custom element and propagates it down to the toggle butto.
      */
     focusOnElement(): void;
-    debounce(func: any, timeout?: number): (...args: any[]) => void;
+    componentWillLoad(): void;
+    private bootstrapInitialValue;
+    /**
+     * Keep `value` and `afListItems[].selected` in sync.
+     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
+     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
+     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
+     * does not get feedback loops on prop sync.
+     */
+    syncValueAndSelectedListItems(whereDidTheChangeComeFrom: 'valueChange' | 'afListItemsChange'): void;
+    private applyValueToListItems;
+    private setValueInternally;
     setClosed(focusToggleButton?: boolean): void;
     setScroll(scrollY: number): void;
     setOpen(): void;
@@ -210,7 +230,6 @@ export declare class FormSelectFilter {
     toggleDropdown(): void;
     inputItem(identifier: any, index: any): HTMLInputElement;
     emitFilterClosedEvent(): void;
-    componentWillLoad(): void;
     setFocusItem(): void;
     setFocusSearch(): void;
     incrementFocusItem(): void;

package/dist/types/components.d.ts

@@ -2203,7 +2203,7 @@ export namespace Components {
          */
         "sortAlphabetically": boolean;
         /**
-          * @ignore
+          * @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.
          */
         "value": IListItem[];
     }
@@ -13949,7 +13949,7 @@ declare namespace LocalJSX {
          */
         "sortAlphabetically"?: boolean;
         /**
-          * @ignore
+          * @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.
          */
         "value"?: IListItem[];
     }

package/hydrate/index.js

@@ -22986,6 +22986,10 @@ class FormSelectFilter {
         this.afOnSelect = createEvent(this, "afOnSelect", 7);
         this.afOnQueryChanged = createEvent(this, "afOnQueryChanged", 7);
         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;
@@ -23019,17 +23023,19 @@ class FormSelectFilter {
         this.afFilterButtonAriaDescribedby = undefined;
         this.afErrorMessageIsAlert = true;
     }
-    onValueChanged(value) {
-        const joinedArray = [...value, ...this._selectedItems];
-        const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
-        if (noDuplicates && noDuplicates.length > 0) {
-            if (this.afMultipleItems) {
-                this._selectedItems = [...noDuplicates];
-            }
-            else {
-                this._selectedItems = [noDuplicates[0]];
-            }
+    onValueChanged(newValue) {
+        let parsedValue;
+        if (typeof newValue === 'string') {
+            parsedValue = newValue ? JSON.parse(newValue) : [];
         }
+        else {
+            parsedValue = newValue || [];
+        }
+        if (!this._updatingValueInternally) {
+            this._valueIsMaster = true;
+        }
+        this.value = parsedValue;
+        this.syncValueAndSelectedListItems('valueChange');
     }
     handleListItems() {
         if (this.afListItems) {
@@ -23045,15 +23051,7 @@ class FormSelectFilter {
                 }
                 this.giveItemsValueIfNoneExist();
                 this.sortListAlphabetically();
-                const selectedListItems = this._afListItems.filter((item) => item.selected);
-                if (selectedListItems && selectedListItems.length > 0) {
-                    this._selectedItems = [...selectedListItems];
-                    this.afOnSelect.emit(this._selectedItems);
-                    this.value = this._selectedItems;
-                }
-                else if (this.value && this.value.length > 0) {
-                    this._selectedItems = [...this.value];
-                }
+                this.syncValueAndSelectedListItems('afListItemsChange');
                 this.filterResults();
             }
             catch (e) {
@@ -23105,14 +23103,58 @@ class FormSelectFilter {
     focusOnElement() {
         this._toggleButton.focus();
     }
-    debounce(func, timeout = 300) {
-        let timer;
-        return (...args) => {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                func.apply(this, args);
-            }, timeout);
-        };
+    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();
+    }
+    bootstrapInitialValue() {
+        if (typeof this.value === 'string') {
+            const parsed = this.value ? JSON.parse(this.value) : [];
+            this._updatingValueInternally = true;
+            this.value = parsed;
+            this._updatingValueInternally = false;
+        }
+        if (Array.isArray(this.value) && this.value.length > 0) {
+            this._valueIsMaster = true;
+        }
+    }
+    /**
+     * Keep `value` and `afListItems[].selected` in sync.
+     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
+     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
+     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
+     * does not get feedback loops on prop sync.
+     */
+    syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
+        if (!this._afListItems) {
+            return;
+        }
+        if (whereDidTheChangeComeFrom === 'afListItemsChange') {
+            if (this._valueIsMaster) {
+                this.applyValueToListItems(this.value);
+            }
+            else {
+                this._selectedItems = this._afListItems.filter((item) => item.selected);
+                this.setValueInternally([...this._selectedItems]);
+            }
+            return;
+        }
+        this.applyValueToListItems(this.value);
+    }
+    applyValueToListItems(value) {
+        const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
+        this._afListItems.forEach((item) => {
+            item.selected = selectedValues.has(item.value);
+        });
+        this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
+    }
+    setValueInternally(nextValue) {
+        this._updatingValueInternally = true;
+        this.value = nextValue;
+        this._updatingValueInternally = false;
     }
     setClosed(focusToggleButton = false) {
         this.isOpen = false;
@@ -23171,9 +23213,6 @@ class FormSelectFilter {
         this.setClosed(true);
         this.afOnFilterClosed.emit();
     }
-    componentWillLoad() {
-        this.handleListItems();
-    }
     setFocusItem() {
         const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
         if (element) {
@@ -23278,16 +23317,14 @@ class FormSelectFilter {
     }
     filterResults() {
         if (this._searchQuery && this._searchQuery.length > 0) {
-            this._filteredResult = [
-                ...this._afListItems.filter((item) => {
-                    return item.label
-                        .toLowerCase()
-                        .includes(this._searchQuery.toLowerCase());
-                })
-            ];
+            this._filteredResult = this._afListItems.filter((item) => {
+                return item.label
+                    .toLowerCase()
+                    .includes(this._searchQuery.toLowerCase());
+            });
         }
         else {
-            this._filteredResult = [...this._afListItems];
+            this._filteredResult = this._afListItems;
         }
     }
     inputSearchKeyboardHandler(e) {
@@ -23307,7 +23344,7 @@ class FormSelectFilter {
     }
     resetSelectItems(close = false) {
         this._selectedItems = [];
-        this.value = [];
+        this.setValueInternally([]);
         this.afOnSelect.emit([]);
         this._searchQuery = '';
         this.filterResults();
@@ -23337,7 +23374,7 @@ class FormSelectFilter {
             this._selectedItems = [item];
             this.emitFilterClosedEvent();
         }
-        this.value = this._selectedItems;
+        this.setValueInternally([...this._selectedItems]);
         this.afOnSelect.emit(this._selectedItems);
         this.filterResults();
     }
@@ -23428,15 +23465,15 @@ class FormSelectFilter {
             } }, hAsync("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (hAsync(Host, { key: '62acc267c182d80703024115c50dddec8413ad3c', tabindex: -1 }, hAsync("div", { key: 'feea697aee9107e7b90792251c7661ff0ada1a98', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, hAsync("digi-form-label", { key: '90a45c8dc587e1d236f27b03c0e2f71dc8477b7f', 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 }), hAsync("digi-util-keydown-handler", { key: '703080c3a43d0d8ccd233560b2287d9127a87a8b', onAfOnEsc: () => this.escHandler() }, hAsync("button", { key: '54498ff1eb5b930a8173c4dfdb950b8a94ba590e', 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 }, hAsync("div", { key: '4b913f6134090cb598f7dbc331c290ef655f687e', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, hAsync("digi-icon-check", { key: 'ccb42c85db8f9bf3d39fd3864b8c02aacb98c6d9', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), hAsync("span", { key: '704782f9bc33016df16c8492b29721723ed591fb', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), hAsync("digi-icon-chevron-down", { key: '83211db95b19280716ee81611a183816fa00b1d0', class: "digi-form-select-filter__toggle-icon" })), hAsync("div", { key: 'a88f7aa3f0923e34b0f8866a936261ecbb0701e6', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (hAsync(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, hAsync("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, hAsync("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 }), hAsync("digi-util-keydown-handler", { key: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, hAsync("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 }, hAsync("div", { key: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, hAsync("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), hAsync("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), hAsync("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), hAsync("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', 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
-            } }, hAsync("fieldset", { key: 'b79878e2277511c2543663776189ba0a42047894' }, hAsync("div", { key: 'a0d832fe7834a55eb92bf48a9182057886d5e82e', class: "digi-form-select-filter__header" }, hAsync("legend", { key: '59acc3f35f85559e958656e00216ad9439448344', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), hAsync("digi-form-input", { key: 'ed1ba547b5c69791779d0127a58dff9c86a48976', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, hAsync("fieldset", { key: 'f98295e8e804f93428489daf5844df9854ed6053' }, hAsync("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, hAsync("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), hAsync("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
             }, 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()), hAsync("div", { key: '793751dc225d514f42af1a9ec017b7faa9d363c5', class: "digi-form-select-filter__scroll" }, hAsync("digi-util-keydown-handler", { key: '57007b01069dee8bfa0154cbe6d35d91f20894fd', 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() }, hAsync("ul", { key: '45d0622dc2e50e8dcba11d21696faa0a6b230516', 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()), hAsync("div", { key: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, hAsync("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() }, hAsync("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
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -23445,11 +23482,11 @@ class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (hAsync("li", { key: '1d1a778273c5ac8f3d30b65048162e47b19f00cd', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (hAsync("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', 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 && (hAsync("digi-icon-check", { key: 'aa7ea145f0ad6f125f9df0ba11aaf90d0113c20c', 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 && (hAsync("digi-icon-check", { key: '43f446e70c707681dd1de50e11af511e8c4d060e', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (hAsync("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'
@@ -23465,9 +23502,9 @@ class FormSelectFilter {
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (hAsync("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (hAsync("div", { key: '428fecfda65ca5dab87d15049010462f38bf49f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (hAsync("digi-button", { key: 'e8ed222dada0ef4e78d3d66062c7d432e5231671', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), hAsync("digi-util-keydown-handler", { key: 'd151b5df0a4002633e0966d44d0482183b7ecfe5', onAfOnUp: () => this.setFocusItem() }, hAsync("digi-button", { key: '207d29e920ec9db9aa2f2ba29bd650453210e8b3', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (hAsync("div", { key: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (hAsync("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), hAsync("digi-util-keydown-handler", { key: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, hAsync("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', 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)))))), hAsync("div", { key: '514a8e6c957b4293f095b0718139ac47e64648ab', class: "digi-form-select__footer" }, hAsync("div", { key: '3b5ceffdcbf3f1fd4671bc73fdea48a573cd0379', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (hAsync("digi-form-validation-message", { key: 'faab034ee053826ebd82fda81273d0f815b648ec', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), hAsync("div", { key: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, hAsync("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (hAsync("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {