feat(ui5-multi-combobox): initial implementation (#379)

FIXES: #314

Author: MapTo0

packages/base/.eslintrc.js

@@ -72,7 +72,7 @@ module.exports = {
 		"no-script-url": 2,
 		"no-self-compare": 2,
 		"no-sequences": 2,
-		"no-unused-expressions": 1,
+		"no-unused-expressions": [1, { allowShortCircuit: true }],
 		"no-void": 2,
 		"no-warning-comments": 0,
 		"no-with": 2,

packages/base/src/delegate/ItemNavigation.js

@@ -169,6 +169,10 @@ class ItemNavigation extends EventProvider {
 	_getCurrentItem() {
 		const items = this._getItems();
 
+		if (!items.length) {
+			return null;
+		}
+
 		// normalize the index
 		while (this.currentIndex >= items.length) {
 			this.currentIndex -= this.rowSize;

packages/base/src/events/PseudoEvents.js

@@ -22,6 +22,18 @@ const isTabNext = event => (event.key ? event.key === "Tab" : event.keyCode ===
 
 const isTabPrevious = event => (event.key ? event.key === "Tab" : event.keyCode === KeyCodes.TAB) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ false, /* Shift */ true);
 
+const isBackSpace = event => (event.key ? (event.key === "Backspace" || event.key === "Backspace") : event.keyCode === KeyCodes.BACKSPACE) && !hasModifierKeys(event);
+
+const isDelete = event => (event.key ? (event.key === "Delete" || event.key === "Delete") : event.keyCode === KeyCodes.DELETE) && !hasModifierKeys(event);
+
+const isShow = event => {
+	if (event.key) {
+		return (event.key === "F4" && !hasModifierKeys(event)) || ((event.key === "ArrowDown" || event.key === "Down") && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
+	}
+
+	return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
+};
+
 const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event);
 
 const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
@@ -40,4 +52,7 @@ export {
 	isEscape,
 	isTabNext,
 	isTabPrevious,
+	isBackSpace,
+	isDelete,
+	isShow,
 };

packages/main/.eslintrc.js

@@ -72,7 +72,7 @@ module.exports = {
 		"no-script-url": 2,
 		"no-self-compare": 2,
 		"no-sequences": 2,
-		"no-unused-expressions": 1,
+		"no-unused-expressions": [1, { allowShortCircuit: true }],
 		"no-void": 2,
 		"no-warning-comments": 1,
 		"no-with": 2,

packages/main/bundle.esm.js

@@ -31,6 +31,7 @@ import ShellBar from "./dist/ShellBar.js";
 import ShellBarItem from "./dist/ShellBarItem.js";
 import Switch from "./dist/Switch.js";
 import MessageStrip from "./dist/MessageStrip.js";
+import MultiComboBox from "./dist/MultiComboBox.js";
 import TabContainer from "./dist/TabContainer.js";
 import Tab from "./dist/Tab.js";
 import TabSeparator from "./dist/TabSeparator.js";
@@ -42,6 +43,8 @@ import TextArea from "./dist/TextArea.js";
 import Timeline from "./dist/Timeline.js";
 import TimelineItem from "./dist/TimelineItem.js";
 import Title from "./dist/Title.js";
+import Token from "./dist/Token.js";
+import Tokenizer from "./dist/Tokenizer.js";
 import ToggleButton from "./dist/ToggleButton.js";
 
 import List from "./dist/List.js";

packages/main/lib/i18n-transform/USED_KEYS.txt

@@ -1,3 +1,4 @@
 TEXTAREA_CHARACTERS_LEFT
 TEXTAREA_CHARACTERS_EXCEEDED
-PANEL_ICON
+PANEL_ICON
+MULTIINPUT_SHOW_MORE_TOKENS

packages/main/src/Input.hbs

@@ -7,6 +7,10 @@
 <div id="{{ctr._id}}-wrapper"
 	class="{{classes.wrapper}}"
 >
+	{{#if ctr._beginContent}}
+		<slot name="_beginContent"></slot>
+	{{/if}}
+
 	<input id="{{ctr._id}}-inner"
 			class="sapWCInputBaseInner"
 			type="{{type}}"

packages/main/src/Input.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
+
 import {
 	isUp,
 	isDown,
@@ -61,6 +62,10 @@ const metadata = {
 			type: HTMLElement,
 			multiple: true,
 		},
+
+		_beginContent: {
+			type: HTMLElement,
+		},
 	},
 	properties: /** @lends  sap.ui.webcomponents.main.Input.prototype */  {
 

packages/main/src/MultiComboBox.hbs

@@ -0,0 +1,70 @@
+<div class="ui5-multi-combobox--wrapper">
+	<ui5-input id="ui5-multi-combobox--input"
+		value="{{ctr.value}}"
+		placeholder="{{ctr.placeholder}}"
+		?disabled={{ctr.disabled}}
+		?readonly={{ctr.readonly}}
+		value-state="{{ctr.valueState}}"
+		show-suggestions
+		@ui5-input="{{ctr._inputLiveChange}}"
+		@ui5-change={{ctr._inputChange}}
+		@keydown="{{ctr._keydown}}">
+
+		<ui5-tokenizer slot="_beginContent"
+			show-more
+			class="ui5-multi-combobox-tokenizer"
+			?disabled="{{ctr.disabled}}"
+			@ui5-showMoreItemsPress="{{ctr._showMorePopover}}"
+			@ui5-tokenDelete="{{ctr._tokenDelete}}"
+			@focusout="{{ctr._tokenizerFocusOut}}"
+		>
+			{{#each ctr.items}}
+				{{#if this.selected}}
+					<ui5-token ?readonly="{{../../ctr.readonly}}" class="ui5-multi-combobox--token" data-ui5-id="{{this._id}}" >{{this.textContent}}</ui5-token>
+				{{/if}}
+			{{/each}}
+		</ui5-tokenizer>
+
+		{{#unless ctr.readonly}}
+			<ui5-icon src="sap-icon://slim-arrow-down" 
+				slot="icon"
+				@ui5-press={{ctr._showAllItemsPopover}}
+				class="{{classes.icon}}"
+			></ui5-icon>
+		{{/unless}}
+	</ui5-input>
+
+	<ui5-popover 
+		class="ui5-multi-combobox-selected-items--popover"
+		horizontal-align="Stretch"
+		hide-header
+		?hide-arrow={{editable}}
+		placement-type="Bottom">
+		<ui5-list separators="None" mode="{{selectedItemsListMode}}"
+			@ui5-selectionChange={{ctr._selectedItemsSelectionChange}}>
+			{{#each ctr.items}}
+				{{#if this.selected}}
+					<ui5-li type="Active" data-ui5-token-id="{{this._id}}" .selected="{{../../editable}}">{{this.textContent}}</ui5-li>
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	</ui5-popover>
+
+	<ui5-popover class="ui5-multi-combobox-all-items--popover"
+		hide-header
+		hide-arrow
+		horizontal-align="Stretch"
+		initial-focus="ui5-multi-combobox--input"
+		horizontal-align="Left"
+		placement-type="Bottom"
+		@ui5-selectionChange={{ctr._allItemsSelectionChange}}
+		@ui5-afterClose={{ctr._afterAllPopoverClose}}
+		@ui5-afterOpen={{ctr._afterAllPopoverOpen}}>
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each ctr._filteredItems}}
+					<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.textContent}}</ui5-li>
+			{{/each}}
+		</ui5-list>
+	</ui5-popover>
+
+</div>