@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-da0d3eb88

package/dist/features/InputSuggestions.js

@@ -1,307 +1,452 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+// @ts-ignore
+import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
-import ResponsivePopover from "../ResponsivePopover.js";
-import "../SuggestionItem.js";
-
+import "../ResponsivePopover.js";
+import SuggestionItem from "../SuggestionItem.js";
+import SuggestionGroupItem from "../SuggestionGroupItem.js";
+import Button from "../Button.js";
+import Icon from "../Icon.js";
+import ListItemGroupHeader from "../ListItemGroupHeader.js";
+import SuggestionListItem from "../SuggestionListItem.js";
+import { LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i18n-defaults.js";
 /**
- * A class to manage the <code>Input</code suggestion items.
- *
+ * A class to manage the `Input` suggestion items.
  * @class
  * @private
- * @author SAP SE
  */
 class Suggestions {
-	constructor(component, slotName, handleFocus) {
-		// The component, that the suggestion would plug into.
-		this.component = component;
-
-		// Defines the items` slot name.
-		this.slotName = slotName;
-
-		// Defines, if the focus will be moved via the arrow keys.
-		this.handleFocus = handleFocus;
-
-		// Press and Focus handlers
-		this.fnOnSuggestionItemPress = this.onItemPress.bind(this);
-		this.fnOnSuggestionItemFocus = this.onItemFocused.bind(this);
-
-		// An integer value to store the currently selected item position,
-		// that changes due to user interaction.
-		this.selectedItemIndex = null;
-	}
-
-	/* Public methods */
-	defaultSlotProperties() {
-		const inputSuggestionItems = this._getComponent().suggestionItems;
-
-		const suggestions = [];
-		inputSuggestionItems.map(suggestion => {
-			return suggestions.push({
-				text: suggestion.text || suggestion.textContent, // keep textContent for compatibility
-				description: suggestion.description || undefined,
-				image: suggestion.image || undefined,
-				icon: suggestion.icon || undefined,
-				info: suggestion.info || undefined,
-				infoState: suggestion.infoState,
-				group: suggestion.group,
-			});
-		});
-
-		return suggestions;
-	}
-
-	onUp(event) {
-		event.preventDefault();
-		this._handleItemNavigation(false /* forward */);
-		return true;
-	}
-
-	onDown(event) {
-		event.preventDefault();
-		this._handleItemNavigation(true /* forward */);
-		return true;
-	}
-
-	onSpace(event) {
-		if (this._isItemOnTarget()) {
-			event.preventDefault();
-			this.onItemSelected(null, true /* keyboardUsed */);
-			return true;
-		}
-		return false;
-	}
-
-	onEnter(event) {
-		if (this._isItemOnTarget()) {
-			this.onItemSelected(null, true /* keyboardUsed */);
-			return true;
-		}
-		return false;
-	}
-
-	toggle(bToggle) {
-		const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
-
-		if (toggle) {
-			this.open();
-		} else {
-			this.close();
-		}
-	}
-
-	async open() {
-		this.responsivePopover = await this._respPopover();
-		this._beforeOpen();
-		this.responsivePopover.open(this._getComponent());
-	}
-
-	async close() {
-		this.responsivePopover = await this._respPopover();
-		this.responsivePopover.close();
-	}
-
-	updateSelectedItemPosition(pos) {
-		this.selectedItemIndex = pos;
-	}
-
-	/* Interface methods */
-	onItemFocused() {
-		this._getComponent().onItemFocused();
-	}
-
-	onItemSelected(selectedItem, keyboardUsed) {
-		const item = selectedItem || this._getItems()[this.selectedItemIndex];
-
-		this.selectedItemIndex = this._getItems().indexOf(item);
-
-		this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
-		item.selected = false;
-		this.close();
-	}
-
-	onItemPreviewed(item) {
-		this._getComponent().onItemPreviewed(item);
-	}
-
-	/* Private methods */
-	onItemPress(oEvent) {
-		this.onItemSelected(oEvent.detail.item, false /* keyboardUsed */);
-	}
-
-	_beforeOpen() {
-		this._attachItemsListeners();
-		this._attachPopupListeners();
-	}
-
-	async _attachItemsListeners() {
-		const list = await this._getList();
-		list.removeEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
-		list.addEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
-		list.removeEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
-		list.addEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
-	}
-
-	_attachPopupListeners() {
-		if (!this.handleFocus) {
-			return;
-		}
-
-		if (!this.attachedAfterOpened) {
-			this._respPopover.addEventListener("ui5-afterOpen", this._onOpen.bind(this));
-			this.attachedAfterOpened = true;
-		}
-
-		if (!this.attachedAfterClose) {
-			this._respPopover.addEventListener("ui5-afterClose", this._onClose.bind(this));
-			this.attachedAfterClose = true;
-		}
-	}
-
-	_onOpen() {
-		this._applyFocus();
-		this._getComponent().onOpen();
-	}
-
-	_onClose() {
-		this._getComponent().onClose();
-	}
-
-	_applyFocus() {
-		if (this.selectedItemIndex) {
-			this._getItems()[this.selectedItemIndex].focus();
-		}
-	}
-
-	_isItemOnTarget() {
-		return this.isOpened() && this.selectedItemIndex !== null;
-	}
-
-	isOpened() {
-		return !!(this.responsivePopover && this.responsivePopover.opened);
-	}
-
-	_handleItemNavigation(forward) {
-		if (!this._getItems().length) {
-			return;
-		}
-
-		if (forward) {
-			this._selectNextItem();
-		} else {
-			this._selectPreviousItem();
-		}
-	}
-
-	_selectNextItem() {
-		const itemsCount = this._getItems().length;
-		const previousSelectedIdx = this.selectedItemIndex;
-
-		if ((this.selectedItemIndex === null) || (++this.selectedItemIndex > itemsCount - 1)) {
-			this.selectedItemIndex = 0;
-		}
-
-		this._moveItemSelection(previousSelectedIdx, this.selectedItemIndex);
-	}
-
-	_selectPreviousItem() {
-		const itemsCount = this._getItems().length;
-		const previousSelectedIdx = this.selectedItemIndex;
-
-		if ((this.selectedItemIndex === null) || (--this.selectedItemIndex < 0)) {
-			this.selectedItemIndex = itemsCount - 1;
-		}
-
-		this._moveItemSelection(previousSelectedIdx, this.selectedItemIndex);
-	}
-
-	_moveItemSelection(previousIdx, nextIdx) {
-		const items = this._getItems();
-		const currentItem = items[nextIdx];
-		const previousItem = items[previousIdx];
-
-		if (previousItem) {
-			previousItem.selected = false;
-		}
-
-		if (currentItem) {
-			currentItem.selected = true;
-
-			if (this.handleFocus) {
-				currentItem.focus();
-			}
-		}
-
-		this.onItemPreviewed(currentItem);
-
-		if (!this._isItemIntoView(currentItem)) {
-			this._scrollItemIntoView(currentItem);
-		}
-	}
-
-	_isItemIntoView(item) {
-		const rectItem = item.getDomRef().getBoundingClientRect();
-		const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
-		const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
-
-		return (rectItem.top <= windowHeight) && (rectItem.top >= rectInput.top);
-	}
-
-	_scrollItemIntoView(item) {
-		const pos = item.getDomRef().offsetTop - Suggestions.SCROLL_STEP;
-		this._getScrollContainer().scrollTop = pos;
-	}
-
-	async _getScrollContainer() {
-		if (!this._scrollContainer) {
-			await this._respPopover();
-			this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popup-content");
-		}
-
-		return this._scrollContainer;
-	}
-
-	_getItems() {
-		return [].slice.call(this.responsivePopover.querySelectorAll("ui5-li, ui5-li-groupheader"));
-	}
-
-	_getComponent() {
-		return this.component;
-	}
-
-	async _getList() {
-		this.responsivePopover = await this._respPopover();
-		return this.responsivePopover.querySelector("ui5-list");
-	}
-
-	async _getListWidth() {
-		const list = await this._getList();
-		return list.offsetWidth;
-	}
-
-	_getRealItems() {
-		return this._getComponent().getSlottedNodes(this.slotName);
-	}
-
-	async _respPopover() {
-		if (this.responsivePopover) {
-			return this.responsivePopover;
-		}
-
-		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
-		return this.responsivePopover;
-	}
+    constructor(component, slotName, highlight, handleFocus) {
+        // The component, that the suggestion would plug into.
+        this.component = component;
+        // Defines the items` slot name.
+        this.slotName = slotName;
+        // Defines, if the focus will be moved via the arrow keys.
+        this.handleFocus = handleFocus;
+        // Defines, if the suggestions should highlight.
+        this.highlight = highlight;
+        // Press and Focus handlers
+        this.fnOnSuggestionItemPress = this.onItemPress.bind(this);
+        this.fnOnSuggestionItemMouseOver = this.onItemMouseOver.bind(this);
+        this.fnOnSuggestionItemMouseOut = this.onItemMouseOut.bind(this);
+        // An integer value to store the currently selected item position,
+        // that changes due to user interaction.
+        this.selectedItemIndex = -1;
+    }
+    /* Public methods */
+    defaultSlotProperties(hightlightValue) {
+        const inputSuggestionItems = this._getComponent().suggestionItems;
+        const highlight = this.highlight && !!hightlightValue;
+        const suggestions = [];
+        inputSuggestionItems.map((suggestion, idx) => {
+            const text = highlight ? this.getHighlightedText(suggestion, hightlightValue) : this.getRowText(suggestion);
+            const description = highlight ? this.getHighlightedDesc(suggestion, hightlightValue) : this.getRowDesc(suggestion);
+            return suggestions.push({
+                text,
+                description,
+                image: suggestion.image || undefined,
+                icon: suggestion.icon || undefined,
+                type: suggestion.type || undefined,
+                additionalText: suggestion.additionalText || undefined,
+                additionalTextState: suggestion.additionalTextState,
+                groupItem: suggestion.groupItem,
+                key: idx,
+            });
+        });
+        return suggestions;
+    }
+    onUp(e) {
+        e.preventDefault();
+        this._handleItemNavigation(false /* forward */);
+        return true;
+    }
+    onDown(e) {
+        e.preventDefault();
+        this._handleItemNavigation(true /* forward */);
+        return true;
+    }
+    onSpace(e) {
+        if (this._isItemOnTarget()) {
+            e.preventDefault();
+            this.onItemSelected(null, true /* keyboardUsed */);
+            return true;
+        }
+        return false;
+    }
+    onEnter(e) {
+        if (this._isGroupOrInactiveItem) {
+            e.preventDefault();
+            return false;
+        }
+        if (this._isItemOnTarget()) {
+            this.onItemSelected(null, true /* keyboardUsed */);
+            return true;
+        }
+        return false;
+    }
+    onPageUp(e) {
+        e.preventDefault();
+        const isItemIndexValid = this.selectedItemIndex - 10 > -1;
+        if (this._hasValueState && !isItemIndexValid) {
+            this._focusValueState();
+            return true;
+        }
+        this._moveItemSelection(this.selectedItemIndex, isItemIndexValid ? this.selectedItemIndex -= 10 : this.selectedItemIndex = 0);
+        return true;
+    }
+    onPageDown(e) {
+        e.preventDefault();
+        const items = this._getItems();
+        const lastItemIndex = items.length - 1;
+        const isItemIndexValid = this.selectedItemIndex + 10 <= lastItemIndex;
+        if (this._hasValueState && !items) {
+            this._focusValueState();
+            return true;
+        }
+        this._moveItemSelection(this.selectedItemIndex, isItemIndexValid ? this.selectedItemIndex += 10 : this.selectedItemIndex = lastItemIndex);
+        return true;
+    }
+    onHome(e) {
+        e.preventDefault();
+        if (this._hasValueState) {
+            this._focusValueState();
+            return true;
+        }
+        this._moveItemSelection(this.selectedItemIndex, this.selectedItemIndex = 0);
+        return true;
+    }
+    onEnd(e) {
+        e.preventDefault();
+        const lastItemIndex = this._getItems().length - 1;
+        if (this._hasValueState && !lastItemIndex) {
+            this._focusValueState();
+            return true;
+        }
+        this._moveItemSelection(this.selectedItemIndex, this.selectedItemIndex = lastItemIndex);
+        return true;
+    }
+    onTab() {
+        if (this._isItemOnTarget()) {
+            this.onItemSelected(null, true);
+            return true;
+        }
+        return false;
+    }
+    toggle(bToggle, options) {
+        const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
+        if (toggle) {
+            this.open();
+        }
+        else {
+            this.close(options.preventFocusRestore);
+        }
+    }
+    _isScrollable() {
+        const sc = this._getScrollContainer();
+        return sc.offsetHeight < sc.scrollHeight;
+    }
+    open() {
+        this._getComponent().open = true;
+    }
+    close(preventFocusRestore = false) {
+        const selectedItem = this._getItems() && this._getItems()[this.selectedItemIndex];
+        this._getComponent().open = false;
+        const picker = this._getPicker();
+        picker.preventFocusRestore = preventFocusRestore;
+        picker.open = false;
+        if (selectedItem && selectedItem.focused) {
+            selectedItem.focused = false;
+        }
+    }
+    updateSelectedItemPosition(pos) {
+        this.selectedItemIndex = pos;
+    }
+    /* Interface methods */
+    onItemMouseOver(e) {
+        this._getComponent().onItemMouseOver(e);
+    }
+    onItemMouseOut(e) {
+        this._getComponent().onItemMouseOut(e);
+    }
+    onItemSelected(selectedItem, keyboardUsed) {
+        const allItems = this._getItems();
+        const item = selectedItem || allItems[this.selectedItemIndex];
+        const nonGroupItems = this._getNonGroupItems();
+        this.selectedItemIndex = allItems.indexOf(item);
+        this.accInfo = {
+            isGroup: item.groupItem,
+            currentPos: nonGroupItems.indexOf(item) + 1,
+            listSize: nonGroupItems.length,
+            itemText: this._getRealItems()[this.selectedItemIndex].text,
+            description: this._getRealItems()[this.selectedItemIndex].description,
+            additionalText: this._getRealItems()[this.selectedItemIndex].additionalText,
+        };
+        // If the item is "Inactive", prevent selection with SPACE or ENTER
+        // to have consistency with the way "Inactive" items behave in the ui5-list
+        if (item.type === "Inactive" || item.groupItem) {
+            return;
+        }
+        this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], item, keyboardUsed);
+        item.selected = false;
+        item.focused = false;
+        this._getComponent().open = false;
+    }
+    onItemSelect(item) {
+        this._getComponent().onItemSelect(item);
+    }
+    /* Private methods */
+    // Note: Split into two separate handlers
+    onItemPress(e) {
+        let pressedItem; // SuggestionListItem
+        const isPressEvent = e.type === "ui5-item-click";
+        // Only use the press e if the item is already selected, in all other cases we are listening for 'ui5-selection-change' from the list
+        // Also we have to check if the selection-change is fired by the list's 'item-click' event handling, to avoid double handling on our side
+        if ((isPressEvent && !e.detail.item.selected) || (this._handledPress && !isPressEvent)) {
+            return;
+        }
+        if (isPressEvent && e.detail.item.selected) {
+            pressedItem = e.detail.item;
+            this._handledPress = true;
+        }
+        else {
+            pressedItem = e.detail.selectedItems[0];
+        }
+        this.onItemSelected(pressedItem, false /* keyboardUsed */);
+    }
+    _onOpen() {
+        this._applyFocus();
+    }
+    _onClose() {
+        this._handledPress = false;
+    }
+    _applyFocus() {
+        if (this.selectedItemIndex) {
+            this._getItems()[this.selectedItemIndex]?.focus();
+        }
+    }
+    _isItemOnTarget() {
+        return this.isOpened() && this.selectedItemIndex !== null && this.selectedItemIndex !== -1 && !this._isGroupOrInactiveItem;
+    }
+    get _isGroupOrInactiveItem() {
+        const items = this._getItems();
+        if (!items || !items[this.selectedItemIndex]) {
+            return false;
+        }
+        return (items[this.selectedItemIndex].groupItem || items[this.selectedItemIndex].type === "Inactive");
+    }
+    isOpened() {
+        return !!(this._getPicker()?.open);
+    }
+    _handleItemNavigation(forward) {
+        if (!this._getItems().length) {
+            return;
+        }
+        if (forward) {
+            this._selectNextItem();
+        }
+        else {
+            this._selectPreviousItem();
+        }
+    }
+    _selectNextItem() {
+        const itemsCount = this._getItems().length;
+        const previousSelectedIdx = this.selectedItemIndex;
+        if (this._hasValueState && previousSelectedIdx === -1 && !this.component._isValueStateFocused) {
+            this._focusValueState();
+            return;
+        }
+        if ((previousSelectedIdx === -1 && !this._hasValueState) || this.component._isValueStateFocused) {
+            this._clearValueStateFocus();
+            this.selectedItemIndex = -1;
+        }
+        if (previousSelectedIdx !== -1 && previousSelectedIdx + 1 > itemsCount - 1) {
+            return;
+        }
+        this._moveItemSelection(previousSelectedIdx, ++this.selectedItemIndex);
+    }
+    _selectPreviousItem() {
+        const items = this._getItems();
+        const previousSelectedIdx = this.selectedItemIndex;
+        if (this._hasValueState && previousSelectedIdx === 0 && !this.component._isValueStateFocused) {
+            this.component.hasSuggestionItemSelected = false;
+            this.component._isValueStateFocused = true;
+            this.selectedItemIndex = 0;
+            items[0].focused = false;
+            items[0].selected = false;
+            return;
+        }
+        if (this.component._isValueStateFocused) {
+            this.component.focused = true;
+            this.component._isValueStateFocused = false;
+            this.selectedItemIndex = 0;
+            return;
+        }
+        if (previousSelectedIdx === -1 || previousSelectedIdx === null) {
+            return;
+        }
+        if (previousSelectedIdx - 1 < 0) {
+            items[previousSelectedIdx].selected = false;
+            items[previousSelectedIdx].focused = false;
+            this.component.focused = true;
+            this.component.hasSuggestionItemSelected = false;
+            this.selectedItemIndex -= 1;
+            return;
+        }
+        this._moveItemSelection(previousSelectedIdx, --this.selectedItemIndex);
+    }
+    _moveItemSelection(previousIdx, nextIdx) {
+        const items = this._getItems();
+        const currentItem = items[nextIdx];
+        const previousItem = items[previousIdx];
+        const nonGroupItems = this._getNonGroupItems();
+        if (!currentItem) {
+            return;
+        }
+        this.component.focused = false;
+        this._clearValueStateFocus();
+        this.accInfo = {
+            isGroup: currentItem.groupItem,
+            currentPos: nonGroupItems.indexOf(currentItem) + 1,
+            listSize: nonGroupItems.length,
+            itemText: this._getRealItems()[this.selectedItemIndex].text,
+            description: this._getRealItems()[items.indexOf(currentItem)].description,
+            additionalText: this._getRealItems()[items.indexOf(currentItem)].additionalText,
+        };
+        if (previousItem) {
+            previousItem.selected = false;
+            previousItem.focused = false;
+        }
+        if (currentItem) {
+            currentItem.focused = true;
+            if (currentItem.type === "Active") {
+                currentItem.selected = true;
+            }
+            if (this.handleFocus) {
+                currentItem.focus();
+            }
+        }
+        this.component.hasSuggestionItemSelected = true;
+        this.onItemSelect(currentItem);
+        if (!this._isItemIntoView(currentItem)) {
+            this._scrollItemIntoView(currentItem);
+        }
+    }
+    _deselectItems() {
+        const items = this._getItems();
+        items.forEach(item => {
+            item.selected = false;
+            item.focused = false;
+        });
+    }
+    _clearItemFocus() {
+        const focusedItem = this._getItems().find(item => item.focused);
+        if (focusedItem) {
+            focusedItem.focused = false;
+        }
+    }
+    _isItemIntoView(item) {
+        const rectItem = item.getDomRef().getBoundingClientRect();
+        const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
+        const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+        return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top);
+    }
+    _scrollItemIntoView(item) {
+        const pos = item.getDomRef().offsetTop;
+        const scrollContainer = this._getScrollContainer();
+        scrollContainer.scrollTop = pos;
+    }
+    _getScrollContainer() {
+        if (!this._scrollContainer) {
+            this._scrollContainer = this._getPicker().shadowRoot.querySelector(".ui5-popup-content");
+        }
+        return this._scrollContainer;
+    }
+    _getItems() {
+        return [...this._getList().items] || [];
+    }
+    _getNonGroupItems() {
+        return this._getItems().filter(item => !item.groupItem);
+    }
+    _getComponent() {
+        return this.component;
+    }
+    _getList() {
+        return this._getPicker().querySelector("[ui5-list]");
+    }
+    _getListWidth() {
+        return this._getList()?.offsetWidth;
+    }
+    _getRealItems() {
+        return this._getComponent().getSlottedNodes(this.slotName);
+    }
+    _getPicker() {
+        return this._getComponent().shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    get itemSelectionAnnounce() {
+        if (!this.accInfo) {
+            return "";
+        }
+        const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize);
+        const groupItemText = Suggestions.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
+        return this.accInfo.isGroup ? `${groupItemText} ${this.accInfo.itemText}` : `${this.accInfo.description} ${this.accInfo.additionalText} ${itemPositionText}`;
+    }
+    getRowText(suggestion) {
+        return this.sanitizeText(suggestion.text || suggestion.textContent || "");
+    }
+    getRowDesc(suggestion) {
+        return this.sanitizeText(suggestion.description || "");
+    }
+    getHighlightedText(suggestion, input) {
+        const text = suggestion.text || suggestion.textContent || "";
+        return this.hightlightInput(text, input);
+    }
+    getHighlightedDesc(suggestion, input) {
+        const text = suggestion.description || "";
+        return this.hightlightInput(text, input);
+    }
+    hightlightInput(text, input) {
+        return generateHighlightedMarkup(text, input);
+    }
+    sanitizeText(text) {
+        return encodeXML(text);
+    }
+    get _hasValueState() {
+        return this.component.hasValueStateMessage;
+    }
+    _focusValueState() {
+        this.component._isValueStateFocused = true;
+        this.component.focused = false;
+        this.component.hasSuggestionItemSelected = false;
+        this.selectedItemIndex = 0;
+        this.component.value = this.component.typedInValue;
+        this._deselectItems();
+    }
+    _clearValueStateFocus() {
+        this.component._isValueStateFocused = false;
+    }
+    _clearSelectedSuggestionAndAccInfo() {
+        this.accInfo = undefined;
+        this.selectedItemIndex = 0;
+    }
+    static get dependencies() {
+        return [
+            SuggestionItem,
+            SuggestionGroupItem,
+            List,
+            SuggestionListItem,
+            ListItemGroupHeader,
+            Button,
+            Icon,
+        ];
+    }
+    static async init() {
+        Suggestions.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
 }
-
-Suggestions.SCROLL_STEP = 48;
-
-// The List and Popover components would be rendered
-// by the issuer component`s template.
-List.define();
-ResponsivePopover.define();
-
+Suggestions.SCROLL_STEP = 60;
 // Add suggestions support to the global features registry so that Input.js can use it
 registerFeature("InputSuggestions", Suggestions);
-
 export default Suggestions;
+//# sourceMappingURL=InputSuggestions.js.map