refactor(ui5-input): events changes

[nikoletavnv]

Remove suggestion-item-select event for ui5-input component. Remove previewItem property for ui5-input component. Rename event suggestion-item-preview to selection-change.

BREAKING CHANGE:
The suggestion-item-select event is no longer present for ui5-input component. Instead, the users can listen for the change event when a suggestion item is selected as input value.
The event suggestion-item-preview is replaced by selection-change event. It is fired when the user navigates among the suggestion items using the ARROWS keys. Also selection-change event is fired when the user opens the suggestions popover and directly clicks on a suggestion item, that is not marked as "selected" at the moment. The parameters dispatched with the selection-change event remain the same as the ones dispatched with the old suggestion-item-preview event.
The property previewItem, that returned the current suggestion item on preview, is no longer present. The user can listen for selection-change event in order to understand which suggestion item is on preview.

• Input event 'suggestion-item-preview' was renamed to 'selection-change'

If you have previously attached to 'suggestion-item-preview' event:

input.addEventListener("ui5-suggestion-item-preview", event => { const { item, targetRef } = event.detail;});

Now you should attach to 'selection-change' event:

input.addEventListener("ui5-selection-change", event => { const { item, targetRef } = event.detail;});

The event details remain the same. The only difference is that item and targetRef may be null, because 'selection-change' event is also fired when the input value no longer matches a selected suggestion.

• Deleted event 'suggestion-item-select'

If you have previously listened to 'suggestion-item-select' event to detect which suggestion item has been selected by the user:

input.addEventListener("ui5-suggestion-item-select", event => { 
	const suggestionItem = event.detail.item;
	// do something with the suggestion item
});

Now you can detect which suggestion item was selected if you attach to 'selection-change event', keep the selected item in a variable and during 'change' event check if the input value matches the last selected item:

let suggestionItem;

input.addEventListener("ui5-selection-change", (event) => {
   suggestionItem = event.detail.item; 		 
});

input.addEventListener("ui5-change", (event) => {
  if(event.target.value && suggestionItem && 
     (event.target.value === suggestionItem.text)){
    // do something with the suggestion item
    console.log(suggestionItem);
  }
});

• Removed property 'previewItem'

Accesing the suggestion item under preview was done like this:

const suggestionItemOnPreview = input.previewItem;

Now you can attach to 'selection-change' event and get the previewed suggestion item from the event detail:

input.addEventListener("ui5-selection-change", event => { 
	const suggestionItemOnPreview = event.detail.item;
});

Related to: #8461

[ndeshev]

This line is not clear. We fire 'selection-change' when moving (navigating) between suggestions, when an item is selected with click or ENTER we also fire a 'change' event to mark the end of the interaction

[ndeshev]

If one item is selected (with Enter or click) and then the same item is selected again, change event is being fired, which is not correct.

[nikoletavnv]

I created a new bug regarding improper firing of the change event - #8912