@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/dist/TableRow.js

@@ -10,11 +10,16 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import CheckBox from "./CheckBox.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-import { ARIA_LABEL_ROW_SELECTION } from "./generated/i18n/i18n-defaults.js";
+import {
+	ARIA_LABEL_ROW_SELECTION,
+	LIST_ITEM_NOT_SELECTED,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/TableRow.css.js";
@@ -25,13 +30,13 @@ import styles from "./generated/themes/TableRow.css.js";
 const metadata = {
 	tag: "ui5-table-row",
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TableRow.prototype */ {
 		/**
 		 * Defines the cells of the component.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITableCell[]}
+		 * @type {sap.ui.webc.main.ITableCell[]}
 		 * @slot cells
 		 * @public
 		 */
@@ -41,10 +46,10 @@ const metadata = {
 			individualSlots: true,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TableRow.prototype */ {
 		/**
 		 * Defines the mode of the row (None, SingleSelect, MultiSelect).
-		 * @type {TableMode}
+		 * @type {sap.ui.webc.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @private
@@ -65,7 +70,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press,
 		 * while with type <code>Inactive</code> - will not.
 		 *
-		 * @type {TableRowType}
+		 * @type {sap.ui.webc.main.types.TableRowType}
 		 * @defaultvalue "Inactive"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -98,7 +103,17 @@ const metadata = {
 		active: {
 			type: Boolean,
 		},
-
+		/**
+		 * Indicates if the table row is navigated.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.9.0
+		 * @public
+		*/
+		navigated: {
+			type: Boolean,
+		},
 		_columnsInfo: {
 			type: Object,
 			multiple: true,
@@ -116,11 +131,11 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
+	events: /** @lends sap.ui.webc.main.TableRow.prototype */ {
 		/**
 		 * Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
 		 *
-		 * @event sap.ui.webcomponents.main.TableRow#row-click
+		 * @event sap.ui.webc.main.TableRow#row-click
 		 * @since 1.0.0-rc.15
 		 * @private
 		 */
@@ -129,7 +144,7 @@ const metadata = {
 		/**
 		 * Fired on selection change of an active row.
 		 *
-		 * @event sap.ui.webcomponents.main.TableRow#selection-requested
+		 * @event sap.ui.webc.main.TableRow#selection-requested
 		 * @since 1.0.0-rc.15
 		 * @private
 		 */
@@ -137,7 +152,7 @@ const metadata = {
 		/**
 		 * Fired when F7 is pressed.
 		 *
-		 * @event sap.ui.webcomponents.main.TableRow#f7-pressed
+		 * @event sap.ui.webc.main.TableRow#f7-pressed
 		 * @since 1.2.0
 		 * @private
 		 */
@@ -164,10 +179,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TableRow
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TableRow
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-table-row
- * @implements sap.ui.webcomponents.main.ITableRow
+ * @implements sap.ui.webc.main.ITableRow
  * @public
  */
 class TableRow extends UI5Element {
@@ -215,8 +230,11 @@ class TableRow extends UI5Element {
 		const itemSelectable = isSingleSelect || this.isMultiSelect;
 		const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
 		const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
+		const rowElements = Array.from(this.shadowRoot.querySelectorAll("tr") || []);
+		const elements = rowElements.map(getLastTabbableElement);
+		const lastFocusableElement = elements.pop();
 
-		if (isTabNext(event) && activeElement === (getLastTabbableElement(this) || this.root)) {
+		if (isTabNext(event) && activeElement === (lastFocusableElement || this.root)) {
 			this.fireEvent("_forward-after", { target: activeElement });
 		}
 
@@ -275,7 +293,7 @@ class TableRow extends UI5Element {
 		// If the user tab over a button on IOS device, the document.activeElement
 		// is the ui5-table-row. The check below ensure that, if a button within the row is pressed,
 		// the row will not be selected.
-		if (event.isMarked === "button") {
+		if (getEventMark(event) === "button") {
 			return;
 		}
 
@@ -307,6 +325,10 @@ class TableRow extends UI5Element {
 		return this.getRootNode().activeElement.hasAttribute(attr);
 	}
 
+	get _ariaCurrent() {
+		return this.navigated ? true : undefined;
+	}
+
 	activate() {
 		if (this.type === TableRowType.Active) {
 			this.active = true;
@@ -344,7 +366,7 @@ class TableRow extends UI5Element {
 		const allColumnsPoppedInClass = this.allColumnsPoppedIn ? "all-columns-popped-in" : "";
 		this._columnsInfo.forEach((info, index) => {
 			const cell = this.cells[index];
-
+			const popinDisplay = info.popinDisplay === "Inline";
 			if (!cell) {
 				return;
 			}
@@ -352,17 +374,22 @@ class TableRow extends UI5Element {
 			if (info.visible) {
 				this.visibleCells.push(cell);
 				cell.popined = false;
+				cell._popinedInline = false;
 			} else if (info.demandPopin) {
 				const popinHeaderClass = this.popinCells.length === 0 ? "popin-header" : "";
 				this.popinCells.push({
 					cell,
 					popinText: info.popinText,
 					classes: `ui5-table-popin-row ${allColumnsPoppedInClass} ${popinHeaderClass}`,
+					popinDisplayInline: popinDisplay,
 				});
-
 				cell.popined = true;
+				if (info.popinDisplay === "Inline") {
+					cell._popinedInline = true;
+				}
 			} else {
 				cell.popined = false;
+				cell._popinedInline = false;
 			}
 		}, this);
 
@@ -384,11 +411,18 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelText() {
+		const isSelected = this.selected ? TableRow.i18nBundle.getText(LIST_ITEM_SELECTED) : TableRow.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		const isRowSelectable = this.isSingleSelect || this.isMultiSelect;
 		const ariaLabel = this.cells.map((cell, index) => {
 			const columText = this.getColumnTextByIdx(index);
 			const cellText = this.getCellText(cell);
 			return `${columText} ${cellText}`;
 		}).join(" ");
+
+		if (isRowSelectable) {
+			return `${ariaLabel}. ${this._ariaPosition}. ${isSelected}`;
+		}
+
 		return `${ariaLabel}. ${this._ariaPosition}`;
 	}
 

package/dist/TextArea.js

@@ -2,10 +2,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.js";
@@ -19,9 +19,14 @@ import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
 
 import {
+	VALUE_STATE_SUCCESS,
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	TEXTAREA_CHARACTERS_LEFT,
 	TEXTAREA_CHARACTERS_EXCEEDED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -38,7 +43,7 @@ const metadata = {
 	tag: "ui5-textarea",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TextArea.prototype */ {
 		/**
 		 * Defines the value of the component.
 		 *
@@ -115,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> If <code>maxlength</code> property is set,
 		 * the component turns into "Warning" state once the characters exceeds the limit.
 		 * In this case, only the "Error" state is considered and can be applied.
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.7
 		 * @public
@@ -135,7 +140,7 @@ const metadata = {
 		 * <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>
 		 * </ul>
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -147,7 +152,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of characters that the <code>value</code> can have.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue null
 		 * @public
 		 */
@@ -176,7 +181,6 @@ const metadata = {
 		/**
 		 * Enables the component to automatically grow and shrink dynamically with its content.
 		 * <br><br>
-		 * <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -188,7 +192,7 @@ const metadata = {
 		/**
 		 * Defines the maximum number of lines that the component can grow.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -218,7 +222,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -278,7 +282,7 @@ const metadata = {
 			type: Integer,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TextArea.prototype */ {
 
 		/**
 		 * Defines the value state message that will be displayed as pop up under the component.
@@ -309,7 +313,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TextArea.prototype */ {
+	events: /** @lends sap.ui.webc.main.TextArea.prototype */ {
 		/**
 		 * Fired when the text has changed and the focus leaves the component.
 		 *
@@ -355,8 +359,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TextArea
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TextArea
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-textarea
  * @public
  */
@@ -406,12 +410,7 @@ class TextArea extends UI5Element {
 		this._mirrorText = this._tokenizeText(this.value);
 
 		this.exceeding = this._exceededTextProps.leftCharactersCount < 0;
-
-		if (this.growingMaxLines) {
-			// this should be complex calc between line height and paddings - TODO: make it stable
-			this._maxHeight = `${this.growingMaxLines * 1.4 * 14 + 9}px`;
-		}
-
+		this._setCSSParams();
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -421,6 +420,14 @@ class TextArea extends UI5Element {
 	}
 
 	onAfterRendering() {
+		const nativeTextArea = this.getInputDomRef();
+
+		if (this.rows === 1) {
+			nativeTextArea.setAttribute("rows", 1);
+		} else {
+			nativeTextArea.removeAttribute("rows");
+		}
+
 		this.toggleValueStateMessage(this.openValueStateMsgPopover);
 		this._firstRendering = false;
 	}
@@ -467,20 +474,11 @@ class TextArea extends UI5Element {
 	_oninput(event) {
 		const nativeTextArea = this.getInputDomRef();
 
-		/* skip calling change event when an textarea with a placeholder is focused on IE
-			- value of the host and the internal textarea should be different in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (nativeTextArea.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
 		if (event.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
 			event.stopImmediatePropagation();
 		}
 
-		if (skipFiring) {
-			return;
-		}
-
 		this.value = nativeTextArea.value;
 		this.fireEvent("input", {});
 
@@ -494,6 +492,11 @@ class TextArea extends UI5Element {
 		}
 	}
 
+	_setCSSParams() {
+		this.style.setProperty("--_textarea_rows", this.rows || "2");
+		this.style.setProperty("--_textarea_growing_max_lines", this.growingMaxLines);
+	}
+
 	toggleValueStateMessage(toggle) {
 		if (toggle) {
 			this.openPopover();
@@ -504,7 +507,7 @@ class TextArea extends UI5Element {
 
 	async openPopover() {
 		this.popover = await this._getPopover();
-		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-inner"));
+		this.popover && this.popover.showAt(this.shadowRoot.querySelector(".ui5-textarea-root .ui5-textarea-wrapper"));
 	}
 
 	async closePopover() {
@@ -544,9 +547,9 @@ class TextArea extends UI5Element {
 			leftCharactersCount;
 
 		if (this.showExceededText) {
-			const maxLength = this.maxlength || 0;
+			const maxLength = this.maxlength;
 
-			if (maxLength) {
+			if (maxLength !== null) {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
@@ -566,6 +569,10 @@ class TextArea extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-textarea-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
 			valueStateMsg: {
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -575,21 +582,7 @@ class TextArea extends UI5Element {
 	}
 
 	get styles() {
-		const lineHeight = 1.4 * 16;
-		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
-
 		return {
-			mirror: {
-				"max-height": this._maxHeight,
-			},
-			main: {
-				width: "100%",
-				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
-			},
-			focusDiv: {
-				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
-				"max-height": (this._maxHeight),
-			},
 			valueStateMsgPopover: {
 				"max-width": `${this._width}px`,
 			},
@@ -601,7 +594,7 @@ class TextArea extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const effectiveAriaLabelText = getEffectiveAriaLabelText(this);
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this);
 
 		if (this.showExceededText) {
 			if (effectiveAriaLabelText) {
@@ -624,10 +617,14 @@ class TextArea extends UI5Element {
 		}
 
 		if (this.hasCustomValueState) {
-			return this.valueStateMessageText.map(el => el.textContent).join(" ");
+			return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 		}
 
-		return this.valueStateText;
+		return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+	}
+
+	get valueStateDefaultText() {
+		return this.valueStateTextMappings[this.valueState];
 	}
 
 	get ariaInvalid() {
@@ -654,14 +651,6 @@ class TextArea extends UI5Element {
 		return this.valueStateMessage.map(x => x.cloneNode(true));
 	}
 
-	get valueStateText() {
-		if (this.valueState !== ValueState.Error) {
-			return this.valueStateTextMappings()[ValueState.Warning];
-		}
-
-		return this.valueStateTextMappings()[this.valueState];
-	}
-
 	get _valueStatePopoverHorizontalAlign() {
 		return this.effectiveDir !== "rtl" ? "Left" : "Right";
 	}
@@ -680,14 +669,24 @@ class TextArea extends UI5Element {
 		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
 	}
 
-	valueStateTextMappings() {
+	get valueStateTextMappings() {
 		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_SUCCESS),
 			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
 			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	static get dependencies() {
 		return [Popover, Icon];
 	}

package/dist/TimePicker.js

@@ -11,8 +11,7 @@ import {
  */
 const metadata = {
 	tag: "ui5-time-picker",
-	altTag: "ui5-timepicker",
-	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
 		 * component has no value.
@@ -107,8 +106,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TimePicker
- * @extends TimePickerBase
+ * @alias sap.ui.webc.main.TimePicker
+ * @extends sap.ui.webc.main.TimePickerBase
  * @tagname ui5-time-picker
  * @public
  * @since 1.0.0-rc.6
@@ -138,7 +137,7 @@ class TimePicker extends TimePickerBase {
 	 * Currently selected time represented as JavaScript Date instance
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {

package/dist/TimePickerBase.js

@@ -14,6 +14,10 @@ import {
 	isPageDownShift,
 	isPageUpShiftCtrl,
 	isPageDownShiftCtrl,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/time-entry-request.js";
 import Icon from "./Icon.js";
@@ -40,12 +44,14 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 const metadata = {
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines a formatted time value.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -65,7 +71,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -104,7 +110,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TimePickerBase.prototype */ {
 		/**
 		 * Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>.
 		 * <br><br>
@@ -122,7 +128,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TimePickerBase.prototype */ {
+	events: /** @lends sap.ui.webc.main.TimePickerBase.prototype */ {
 		/**
 		 * Fired when the input operation has finished by clicking the "OK" button or
 		 * when the text in the input field has changed and the focus leaves the input field.
@@ -146,8 +152,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TimePickerBase
- * @extends UI5Element
+ * @alias sap.ui.webc.main.TimePickerBase
+ * @extends sap.ui.webc.base.UI5Element
  * @public
  * @since 1.0.0-rc.6
  */
@@ -348,6 +354,10 @@ class TimePickerBase extends UI5Element {
 			this.togglePicker();
 		}
 
+		if ((this._getInput().isEqualNode(e.target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}

package/dist/TimeSelection.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
@@ -28,7 +28,6 @@ import {
 	TIMEPICKER_HOURS_LABEL,
 	TIMEPICKER_MINUTES_LABEL,
 	TIMEPICKER_SECONDS_LABEL,
-	TIMEPICKER_PERIODS_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -43,7 +42,7 @@ const metadata = {
 	tag: "ui5-time-selection",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TimeSelection.prototype */ {
 		/**
 		 * Defines a formatted time value.
 		 *
@@ -142,7 +141,7 @@ const metadata = {
 			type: CalendarType,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
+	events: /** @lends sap.ui.webc.main.TimeSelection.prototype */ {
 		/**
 		 * Fired when the value changes due to user interaction with the sliders
 		 */
@@ -160,8 +159,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TimeSelection
- * @extends UI5Element
+ * @alias sap.ui.webc.main.TimeSelection
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-time-selection
  * @private
  * @since 1.0.0-rc.12
@@ -237,7 +236,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodsArray() {
-		return this.getFormat().aDayPeriods.map(x => x.toUpperCase());
+		return this.getFormat().aDayPeriodsAbbrev.map(x => x.toUpperCase());
 	}
 
 	get _hoursSliderFocused() {
@@ -478,11 +477,7 @@ class TimeSelection extends UI5Element {
 	}
 
 	get periodSliderTitle() {
-		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
-	}
-
-	get _isCyclic() {
-		return !isIE();
+		return "AM/PM";
 	}
 
 	get classes() {