feat: ui5-combobox initial implementation (#1123)

* feat: ui5-combobox initial implementation

* add test for item selection

* improve test page

* add 3 types of filters

* improve lazy loading sample

* correct test after starts with per term implementation

* add more tests

Author: MapTo0

packages/main/bundle.esm.js

@@ -47,6 +47,8 @@ import TimelineItem from "./dist/TimelineItem.js";
 import Title from "./dist/Title.js";
 import Toast from "./dist/Toast.js";
 import ToggleButton from "./dist/ToggleButton.js";
+import ComboBox from "./dist/ComboBox.js";
+import ComboBoxItem from "./dist/ComboBoxItem.js";
 
 import List from "./dist/List.js";
 import StandardListItem from "./dist/StandardListItem.js";

packages/main/src/ComboBox.hbs

@@ -0,0 +1,71 @@
+<div class="ui5-combobox-root"
+	role="combobox"
+	aria-haspopup="listbox"
+	aria-expanded="{{open}}"
+>
+
+	<input id="ui5-combobox-input"
+		.value="{{_tempValue}}"
+		inner-input
+		placeholder="{{placeholder}}"
+		?disabled={{disabled}}
+		?readonly={{readonly}}
+		?required={{required}}
+		value-state="{{valueState}}"
+		@input="{{_input}}"
+		@change="{{_inputChange}}"
+		@keydown="{{_keydown}}"
+		@focusin="{{_focusin}}"
+		@focusout="{{_focusout}}"
+		aria-autocomplete="both"
+	/>
+
+	{{#unless readonly}}
+		<ui5-icon
+			name="slim-arrow-down"
+			slot="icon"
+			tabindex="-1"
+			input-icon
+			?pressed="{{_iconPressed}}"
+			@click="{{_arrowClick}}"
+			dir="{{dir}}"
+		></ui5-icon>
+	{{/unless}}
+
+	<ui5-popover
+		class="ui5-combobox-popover"
+		style={{styles.popover}}
+		horizontal-align="Left"
+		?no-arrow={{editable}}
+		no-padding="true"
+		placement-type="Bottom"
+		initial-focus="ui5-combobox-input"
+		@ui5-afterOpen={{_afterOpenPopover}}
+		@ui5-afterClose={{_afterClosePopover}}
+	>
+
+		<ui5-busyindicator 
+			?active={{loading}}
+			size="Medium"
+			class="ui5-combobox-busy"
+		>
+		</ui5-busyindicator>
+
+		<ui5-list 
+			separators="None"
+			@ui5-itemClick={{_selectItem}}
+			mode="SingleSelect"
+		>
+			{{#each _filteredItems}}
+				<ui5-li
+					type="Active"
+					.mappedItem={{this}}
+					?selected={{this.selected}}
+				>
+					{{this.text}}
+				</ui5-li>
+			{{/each}}
+		</ui5-list>
+	</ui5-popover>
+
+</div>