refactor: align all inputs to use same CSS for styling

- all input like elements such as Input, MultiComboBox, Select use the same CSS for styling host
- all icons than needs to be styled as input icons have a common CSS - InputIcon.css
- users can now overstyle all input elements by setting styles to host
- fixes tiny bug in Select when Picker is open - icon background color should be pressed
- adds a better keyboard handling for MultiComboBox

FIXES: #766

Author: MapTo0

packages/main/src/DatePicker.hbs

@@ -20,11 +20,12 @@
 			<ui5-icon
 				slot="icon"
 				src="sap-icon://appointment-2"
-				class="{{classes.icon}} ui5-datepicker-icon"
 				tabindex="-1"
 				accessible-name="{{openIconTitle}}"
 				show-tooltip
 				@click="{{togglePicker}}"
+				input-icon
+				?pressed="{{_isPickerOpen}}"
 			></ui5-icon>
 		{{/unless}}
 	</ui5-input>

packages/main/src/DatePicker.js

@@ -541,14 +541,6 @@ class DatePicker extends UI5Element {
 		return this.getFormat().parse(this.value);
 	}
 
-	get classes() {
-		return {
-			icon: {
-				"ui5-datepicker-icon--pressed": this._isPickerOpen,
-			},
-		};
-	}
-
 	get styles() {
 		return {
 			main: {

packages/main/src/MultiComboBox.hbs

@@ -1,37 +1,45 @@
-<div class="ui5-multi-combobox-root">
-	<ui5-input id="ui5-multi-combobox-input"
+<div class="ui5-multi-combobox-root"
+	@focusin={{rootFocusIn}}
+	@focusout={{rootFocusOut}}
+	>
+	<ui5-tokenizer slot="_beginContent"
+		show-more
+		class="ui5-multi-combobox-tokenizer"
+		?disabled="{{disabled}}"
+		@ui5-showMoreItemsPress="{{_showMorePopover}}"
+		@ui5-tokenDelete="{{_tokenDelete}}"
+		@focusout="{{_tokenizerFocusOut}}"
+		?expanded="{{expandedTokenizer}}"
+	>
+		{{#each items}}
+			{{#if this.selected}}
+				<ui5-token ?readonly="{{../readonly}}" class="ui5-multi-combobox-token" data-ui5-id="{{this._id}}" >{{this.textContent}}</ui5-token>
+			{{/if}}
+		{{/each}}
+	</ui5-tokenizer>
+
+	<input id="ui5-multi-combobox-input"
 		value="{{value}}"
 		placeholder="{{placeholder}}"
 		?disabled={{disabled}}
 		?readonly={{readonly}}
 		value-state="{{valueState}}"
-		@ui5-input="{{_inputLiveChange}}"
-		@ui5-change={{_inputChange}}
-		@keydown="{{_keydown}}">
-
-		<ui5-tokenizer slot="_beginContent"
-			show-more
-			class="ui5-multi-combobox-tokenizer"
-			?disabled="{{disabled}}"
-			@ui5-showMoreItemsPress="{{_showMorePopover}}"
-			@ui5-tokenDelete="{{_tokenDelete}}"
-			@focusout="{{_tokenizerFocusOut}}"
-		>
-			{{#each items}}
-				{{#if this.selected}}
-					<ui5-token ?readonly="{{../readonly}}" class="ui5-multi-combobox-token" data-ui5-id="{{this._id}}" >{{this.textContent}}</ui5-token>
-				{{/if}}
-			{{/each}}
-		</ui5-tokenizer>
+		@input="{{_inputLiveChange}}"
+		@change={{_inputChange}}
+		@keydown="{{_keydown}}"
+		@focusin="{{_focusin}}"
+		@focusout="{{_focusout}}">
+	</input>
 
-		{{#unless readonly}}
-			<ui5-icon src="sap-icon://slim-arrow-down"
-				slot="icon"
-				@click={{_showAllItemsPopover}}
-				class="{{classes.icon}}"
-			></ui5-icon>
-		{{/unless}}
-	</ui5-input>
+	{{#unless readonly}}
+		<ui5-icon src="sap-icon://slim-arrow-down"
+			input-icon
+			slot="icon"
+			tabindex="-1"
+			@click={{_showAllItemsPopover}}
+			?pressed="{{_iconPressed}}"
+		></ui5-icon>
+	{{/unless}}
 
 	<ui5-popover
 		class="ui5-multi-combobox-selected-items-popover"

packages/main/src/MultiComboBox.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow, isDown } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+import { isShow, isDown, isBackSpace } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import "./icons/slim-arrow-down.js";
 import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
 import Input from "./Input.js";
@@ -121,6 +121,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Indicates whether the input is focssed
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+
 		_filteredItems: {
 			type: Object,
 		},
@@ -129,6 +137,14 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+
+		/**
+		 * Indicates whether the tokenizer is expanded or collapsed(shows the n more label)
+		 * @private
+		 */
+		expandedTokenizer: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
 		/**
@@ -236,6 +252,7 @@ class MultiComboBox extends UI5Element {
 		this._filteredItems = [];
 		this._inputLastValue = "";
 		this._deleting = false;
+		this._validationTimeout = null;
 	}
 
 	_inputChange() {
@@ -248,6 +265,12 @@ class MultiComboBox extends UI5Element {
 
 	_showAllItemsPopover() {
 		this._togglePopover(false);
+
+		this._inputDom.focus();
+	}
+
+	get _inputDom() {
+		return this.shadowRoot.querySelector("#ui5-multi-combobox-input");
 	}
 
 	_inputLiveChange(event) {
@@ -256,12 +279,17 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
+		if (this._validationTimeout) {
+			return;
+		}
+
 		if (!filteredItems.length && value && !this.allowCustomValues) {
 			input.value = this._inputLastValue;
-			input.valueState = "Error";
+			this.valueState = "Error";
 
-			setTimeout(() => {
-				input.valueState = oldValueState;
+			this._validationTimeout = setTimeout(() => {
+				this.valueState = oldValueState;
+				this._validationTimeout = null;
 			}, 2000);
 			return;
 		}
@@ -298,11 +326,10 @@ class MultiComboBox extends UI5Element {
 
 		if (tokensCount === 0 && this._deleting) {
 			setTimeout(() => {
-				this.shadowRoot.querySelector("ui5-input").focus();
+				this.shadowRoot.querySelector("input").focus();
+				this._deleting = false;
 			}, 0);
 		}
-
-		this._deleting = false;
 	}
 
 	_keydown(event) {
@@ -317,6 +344,17 @@ class MultiComboBox extends UI5Element {
 			list._itemNavigation.current = 0;
 			list.items[0].focus();
 		}
+
+		if (isBackSpace(event) && event.target.value === "") {
+			const lastTokenIndex = this._tokenizer.tokens.length - 1;
+
+			if (lastTokenIndex < 0) {
+				return;
+			}
+
+			this._tokenizer.tokens[lastTokenIndex].focus();
+			this._tokenizer._itemNav.currentIndex = lastTokenIndex;
+		}
 	}
 
 	_filterItems(value) {
@@ -362,6 +400,14 @@ class MultiComboBox extends UI5Element {
 		popover && popover.openBy(this);
 	}
 
+	_focusin() {
+		this.focused = true;
+	}
+
+	_focusout() {
+		this.focused = false;
+	}
+
 	onBeforeRendering() {
 		this._inputLastValue = this.value;
 
@@ -373,7 +419,7 @@ class MultiComboBox extends UI5Element {
 			morePopover && morePopover.close();
 		}
 
-		const input = this.shadowRoot.querySelector("ui5-input");
+		const input = this.shadowRoot.querySelector("input");
 
 		if (input && !input.value) {
 			this._filteredItems = this.items;
@@ -383,6 +429,19 @@ class MultiComboBox extends UI5Element {
 		this._filteredItems = filteredItems;
 	}
 
+	get _tokenizer() {
+		return this.shadowRoot.querySelector("ui5-tokenizer");
+	}
+
+	rootFocusIn() {
+		this.expandedTokenizer = true;
+	}
+
+	rootFocusOut(event) {
+		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
+			this.expandedTokenizer = false;
+		}
+	}
 
 	get editable() {
 		return !this.readonly;
@@ -392,15 +451,6 @@ class MultiComboBox extends UI5Element {
 		return this.readonly ? "None" : "MultiSelect";
 	}
 
-	get classes() {
-		return {
-			icon: {
-				[`ui5-multi-combobox-icon-root-pressed`]: this._iconPressed,
-				[`ui5-multi-combobox-icon`]: true,
-			},
-		};
-	}
-
 	static async define(...params) {
 		await Promise.all([
 			Input.define(),

packages/main/src/Select.hbs

@@ -33,10 +33,12 @@
 		</ui5-popover>
 	{{/if}}
 
-	<div class="ui5-select-icon-root" @click="{{_togglePopover}}">
-		<ui5-icon src="sap-icon://slim-arrow-down" class="ui5-select-icon"
+		<ui5-icon 
+			@click="{{_togglePopover}}"
+			src="sap-icon://slim-arrow-down"
+			input-icon
+			?pressed="{{_iconPressed}}"
 		></ui5-icon>
-	</div>
 
 	<slot name="formSupport"></slot>
 </div>

packages/main/src/Select.js

@@ -100,6 +100,11 @@ const metadata = {
 			noAttribute: true,
 		},
 
+		_iconPressed: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
 		/**
 		 * @private
 		 */
@@ -312,6 +317,8 @@ class Select extends UI5Element {
 	}
 
 	_applyFocusAfterOpen() {
+		this._toggleIcon();
+
 		if (!this._currentlySelectedOption) {
 			return;
 		}
@@ -371,6 +378,8 @@ class Select extends UI5Element {
 	}
 
 	_afterClose() {
+		this._toggleIcon();
+
 		if (this._escapePressed) {
 			this._select(this._selectedIndexBeforeOpen);
 			this._escapePressed = false;
@@ -380,6 +389,10 @@ class Select extends UI5Element {
 		}
 	}
 
+	_toggleIcon() {
+		this._iconPressed = !this._iconPressed;
+	}
+
 	get _currentSelectedItem() {
 		return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`);
 	}

packages/main/src/Token.js

@@ -58,6 +58,8 @@ const metadata = {
 		readonly: { type: Boolean },
 
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
+
+		overflows: { type: Boolean },
 	},
 
 	events: /** @lends sap.ui.webcomponents.main.Token.prototype */ {

packages/main/src/Tokenizer.hbs

@@ -1,8 +1,5 @@
 <div class="{{classes.wrapper}}">
 	<div class="{{classes.content}}" @ui5-delete={{_tokenDelete}}>
-		<div class="ui5-tokenizer-token-placeholder">
-			<div style="display: inline-block"></div>
-		</div>
 		{{#each tokens}}
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}