@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-453158269

package/src/MultiComboBoxGroupItem.js

@@ -0,0 +1,67 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-mcb-group-item",
+	properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.MultiComboBoxGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-multi-combobox-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-multi-combobox</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MultiComboBoxGroupItem
+ * @extends UI5Element
+ * @tagname ui5-mcb-group-item
+ * @public
+ * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @since 1.4.0
+ */
+class MultiComboBoxGroupItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Used to avoid tag name checks
+	 * @protected
+	 */
+	get isGroupItem() {
+		return true;
+	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+}
+
+MultiComboBoxGroupItem.define();
+
+export default MultiComboBoxGroupItem;

package/src/MultiComboBoxItem.js

@@ -34,7 +34,7 @@ class MultiComboBoxItem extends ComboBoxItem {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

package/src/MultiComboBoxPopover.hbs

@@ -70,13 +70,21 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 			{{#each selectedItems}}
-				{{> listItem}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
 		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 			{{#each _filteredItems}}
-				{{> listItem}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -96,11 +104,10 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>

package/src/MultiInput.hbs

@@ -11,7 +11,7 @@
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
 		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>

package/src/MultiInput.js

@@ -4,6 +4,9 @@ import {
 	isBackSpace,
 	isLeft,
 	isRight,
+	isRightCtrl,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
@@ -136,8 +139,15 @@ class MultiInput extends Input {
 	}
 
 	tokenDelete(event) {
-		this.fireEvent("token-delete", {
-			token: event.detail.ref,
+		const focusedToken = event.detail.ref;
+		const selectedTokens = this.tokens.filter(token => token.selected);
+
+		if (selectedTokens.indexOf(focusedToken) === -1) {
+			selectedTokens.push(focusedToken);
+		}
+
+		selectedTokens.forEach(token => {
+			this.fireEvent("token-delete", { token });
 		});
 
 		this.focus();
@@ -170,18 +180,19 @@ class MultiInput extends Input {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (isLeft(event)) {
-			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
+		const isHomeInBeginning = isHome(event) && event.target.selectionStart === 0;
 
+		if (isHomeInBeginning) {
+			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
+			return this._focusFirstToken(event);
+		}
+
+		if (isLeft(event) || isBackSpace(event)) {
+			this._skipOpenSuggestions = true;
 			return this._handleLeft(event);
 		}
 
 		this._skipOpenSuggestions = false;
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
-
-			this.tokenizer._focusLastToken();
-		}
 
 		if (isShow(event)) {
 			this.valueHelpPress();
@@ -189,22 +200,69 @@ class MultiInput extends Input {
 	}
 
 	_onTokenizerKeydown(event) {
-		if (isRight(event)) {
-			const lastTokenIndex = this.tokenizer._tokens.length - 1;
+		const rightCtrl = isRightCtrl(event);
+		const isCtrl = !!(event.metaKey || event.ctrlKey);
+		const tokens = this.tokens;
+
+		if (isRight(event) || isEnd(event) || rightCtrl) {
+			event.preventDefault();
+			const lastTokenIndex = this.tokens.length - 1;
 
-			if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+			if (event.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
 				setTimeout(() => {
 					this.focus();
 				}, 0);
+			} else if (rightCtrl) {
+				event.preventDefault();
+				return this.tokenizer._handleArrowCtrl(event.target, this.tokens, true);
+			}
+		}
+
+		this.tokenizer._handleItemNavigation(event, tokens);
+
+		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
+			event.preventDefault();
+
+			const isCut = event.key.toLowerCase() === "x";
+			const selectedTokens = tokens.filter(token => token.selected);
+
+			if (isCut) {
+				const cutResult = this.tokenizer._fillClipboard("cut", selectedTokens);
+
+				selectedTokens.forEach(token => {
+					this.fireEvent("token-delete", { token });
+				});
+
+				this.focus();
+
+				return cutResult;
 			}
+
+			return this.tokenizer._fillClipboard("copy", selectedTokens);
 		}
 	}
 
-	_handleLeft() {
+	_handleLeft(event) {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+		const tokens = this.tokens;
+		const lastToken = tokens.length && tokens[tokens.length - 1];
+
+		if (cursorPosition === 0 && lastToken) {
+			event.preventDefault();
+			lastToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(lastToken);
+		}
+	}
+
+	_focusFirstToken(event) {
+		const tokens = this.tokens;
+		const firstToken = tokens.length && tokens[0];
+
+		if (firstToken) {
+			event.preventDefault();
 
-		if (cursorPosition === 0) {
-			this.tokenizer._focusLastToken();
+			firstToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(firstToken);
 		}
 	}
 

package/src/Option.js

@@ -31,6 +31,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.1.0
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
@@ -57,6 +68,16 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
+		 * @public
+		 * @since 1.3.0
+		 */
+		 additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the focused state of the component.
 		 * @type {boolean}
@@ -106,7 +127,7 @@ class Option extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

package/src/Panel.hbs

@@ -1,10 +1,9 @@
 <div
-	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
 	aria-label="{{effectiveAccessibleName}}"
 >
-	<!-- header: either header or h1 with header text -->
+	{{! header: either header or h1 with header text}}
 	<div
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeyDown}}"
@@ -15,18 +14,23 @@
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
 		aria-labelledby="{{accInfo.ariaLabelledby}}"
+                part="header"
 	>
 		{{#unless fixed}}
 			<div class="ui5-panel-header-button-root">
 				{{#if _hasHeader}}
 					<ui5-button
 						design="Transparent"
-						class="ui5-panel-header-button {{classes.headerBtn}}"
-						icon="slim-arrow-right"
+						class="ui5-panel-header-button ui5-panel-header-button-with-icon"
 						@click="{{_toggleButtonClick}}"
-						._buttonAccInfo="{{accInfo.button}}"
+						.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+						tooltip="{{accInfo.button.title}}"
 						accessible-name="{{accInfo.button.ariaLabelButton}}"
-					></ui5-button>
+					>
+						<div class="ui5-panel-header-icon-wrapper">
+							<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
+						</div>
+					</ui5-button>
 				{{else}}
 					<ui5-icon
 						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
@@ -50,7 +54,7 @@
 		{{/if}}
 	</div>
 
-	<!-- content area -->
+	{{! content area}}
 	<div
 		class="ui5-panel-content"
 		id="{{_id}}-content"

package/src/Panel.js

@@ -8,6 +8,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Button from "./Button.js";
+import Icon from "./Icon.js";
 import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
@@ -24,6 +25,7 @@ const metadata = {
 	tag: "ui5-panel",
 	languageAware: true,
 	managedSlots: true,
+	fastNavigation: true,
 	slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
 		/**
@@ -131,7 +133,7 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -174,10 +176,6 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
-
-		_buttonAccInfo: {
-			type: Object,
-		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
 
@@ -237,9 +235,18 @@ const metadata = {
  * <br>
  * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
  * <li>content - Used to style the wrapper of the content</li>
  * </ul>
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Panel";</code>
@@ -400,8 +407,10 @@ class Panel extends UI5Element {
 	get accInfo() {
 		return {
 			"button": {
-				"ariaExpanded": this.expanded,
-				"ariaControls": `${this._id}-content`,
+				"accessibilityAttributes": {
+					"expanded": this.expanded,
+					"controls": `${this._id}-content`,
+				},
 				"title": this.toggleButtonTitle,
 				"ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
 			},
@@ -449,7 +458,7 @@ class Panel extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Button];
+		return [Button, Icon];
 	}
 
 	static async onDefine() {

package/src/Popover.hbs

@@ -4,7 +4,7 @@
 	<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
 
 	{{#if _displayHeader}}
-		<header class="ui5-popup-header-root" id="ui5-popup-header">
+		<header class="ui5-popup-header-root" id="ui5-popup-header" part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root">
+			<footer class="ui5-popup-footer-root" part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}