@ui5/webcomponents 0.0.0-fb61e9889 → 0.0.0-fd6264051

package/dist/TableRow.js

@@ -1,7 +1,14 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import {
+	isSpace,
+	isEnter,
+	isF7,
+	isTabNext,
+	isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.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";
@@ -106,6 +113,13 @@ const metadata = {
 			defaultValue: "",
 			noAttribute: true,
 		},
+		_tabbableElements: {
+			type: Object,
+			multiple: true,
+		},
+		_tabMarked: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
 		/**
@@ -170,10 +184,8 @@ class TableRow extends UI5Element {
 		return TableRowTemplate;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	static get dependencies() {
+		return [CheckBox];
 	}
 
 	_onmouseup() {
@@ -184,9 +196,17 @@ class TableRow extends UI5Element {
 		const itemActive = this.type === TableRowType.Active;
 		const isSingleSelect = this.isSingleSelect;
 		const itemSelectable = isSingleSelect || this.isMultiSelect;
-		const isRowFocused = this._getActiveElementTagName() === "ui5-table-row";
+		const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
 		const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
 
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._tabMarked = true;
+		}
+
+		if (isTabNext(event) || isTabPrevious(event)) {
+			this._tabMarked = true;
+		}
+
 		if (isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
 			event.preventDefault();
 		}
@@ -203,6 +223,11 @@ class TableRow extends UI5Element {
 				}
 			}
 		}
+
+		if (isF7(event)) {
+			event.preventDefault();
+			this._handleF7(event.target);
+		}
 	}
 
 	_onkeyup(event) {
@@ -219,16 +244,26 @@ class TableRow extends UI5Element {
 		this.deactivate();
 	}
 
-	_onfocusout() {
+	_onfocusout(event) {
 		this.deactivate();
+
+		if (!this._tabMarked) {
+			this._tabbableElements.forEach(el => el.setAttribute("tabindex", -1));
+		} else {
+			this._tabMarked = false;
+		}
 	}
 
 	_onfocusin(event, forceSelfFocus = false) {
-		if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
-			this.shadowRoot.querySelector(".ui5-table-row-root").focus();
+		const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
+
+		if (forceSelfFocus || this._activeElementHasAttribute("ui5-table-cell")) {
+			tableRowRoot.focus();
 			this.activate();
 		}
 
+		this._tabbableElements.forEach(el => el.setAttribute("tabindex", 0));
+
 		this.fireEvent("_focused", event);
 	}
 
@@ -250,7 +285,7 @@ class TableRow extends UI5Element {
 			this.deactivate();
 		}
 
-		if (this._getActiveElementTagName() === "ui5-table-row") {
+		if (this._activeElementHasAttribute("ui5-table-row")) {
 			if (this.isSingleSelect) {
 				this._handleSelection();
 			}
@@ -265,8 +300,46 @@ class TableRow extends UI5Element {
 		this.fireEvent("selection-requested", { row: this });
 	}
 
-	_getActiveElementTagName() {
-		return this.getRootNode().activeElement.localName.toLocaleLowerCase();
+	/**
+	 * Toggles focus between the table row's root and the last focused nested element.
+	 * @private
+	 * @param {Object} activeElement The currently focused element
+	 */
+	_handleF7(activeElement) {
+		const elements = this._tabbableElements;
+
+		if (!elements.length) {
+			return;
+		}
+
+		const table = this.parentElement;
+		const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
+		const prevFocusedIdx = table._prevNestedElementIndex;
+
+		if (activeElement === tableRowRoot) {
+			const lastFocusedElement = elements[prevFocusedIdx];
+
+			if (lastFocusedElement) {
+				lastFocusedElement.focus();
+			} else {
+				elements[0].focus();
+			}
+
+			return;
+		}
+
+		const shadowRoot = activeElement.shadowRoot;
+		const target = shadowRoot ? shadowRoot.activeElement : activeElement;
+		const targetIndex = elements.indexOf(target);
+
+		if (targetIndex > -1) {
+			table._prevNestedElementIndex = targetIndex;
+			tableRowRoot.focus();
+		}
+	}
+
+	_activeElementHasAttribute(attr) {
+		return this.getRootNode().activeElement.hasAttribute(attr);
 	}
 
 	activate() {
@@ -283,7 +356,7 @@ class TableRow extends UI5Element {
 
 	get shouldPopin() {
 		return this._columnsInfo.filter(el => {
-			return el.demandPopin;
+			return el.demandPopin || !el.visible;
 		}).length;
 	}
 
@@ -355,7 +428,7 @@ class TableRow extends UI5Element {
 	}
 
 	get ariaLabelRowSelection() {
-		return this.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION);
+		return TableRow.i18nBundle.getText(ARIA_LABEL_ROW_SELECTION);
 	}
 
 	get isSingleSelect() {
@@ -385,7 +458,7 @@ class TableRow extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TableRow.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/TextArea.js

@@ -3,12 +3,17 @@ 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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 
 import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
@@ -24,6 +29,7 @@ import {
 // Styles
 import styles from "./generated/themes/TextArea.css.js";
 import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 /**
  * @public
@@ -212,9 +218,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -225,7 +231,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the textarea.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -360,7 +366,7 @@ class TextArea extends UI5Element {
 	}
 
 	static get styles() {
-		return styles;
+		return [browserScrollbarCSS, styles];
 	}
 
 	static get render() {
@@ -385,7 +391,6 @@ class TextArea extends UI5Element {
 		this._firstRendering = true;
 		this._openValueStateMsgPopover = false;
 		this._fnOnResize = this._onResize.bind(this);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
@@ -545,9 +550,9 @@ class TextArea extends UI5Element {
 				leftCharactersCount = maxLength - this.value.length;
 
 				if (leftCharactersCount >= 0) {
-					exceededText = this.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, [leftCharactersCount]);
+					exceededText = TextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
 				} else {
-					exceededText = this.i18nBundle.getText(TEXTAREA_CHARACTERS_EXCEEDED, [Math.abs(leftCharactersCount)]);
+					exceededText = TextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_EXCEEDED, Math.abs(leftCharactersCount));
 				}
 			}
 		} else {
@@ -571,6 +576,7 @@ class TextArea extends UI5Element {
 
 	get styles() {
 		const lineHeight = 1.4 * 16;
+		const mainHeight = (this.rows * lineHeight) + (this.showExceededText ? 32 : 0);
 
 		return {
 			mirror: {
@@ -578,7 +584,7 @@ class TextArea extends UI5Element {
 			},
 			main: {
 				width: "100%",
-				height: (this.rows && !this.growing) ? `${this.rows * lineHeight}px` : "100%",
+				height: (this.rows && !this.growing) ? `${mainHeight}px` : "100%",
 			},
 			focusDiv: {
 				"height": (this.showExceededText ? "calc(100% - 26px)" : "100%"),
@@ -633,7 +639,7 @@ class TextArea extends UI5Element {
 	}
 
 	get displayValueStateMessagePopover() {
-		return this.hasCustomValueState || this.hasValueState || this.exceeding;
+		return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
 	}
 
 	get hasCustomValueState() {
@@ -656,22 +662,38 @@ class TextArea extends UI5Element {
 		return this.valueStateTextMappings()[this.valueState];
 	}
 
-	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
+	valueStateTextMappings() {
 		return {
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": TextArea.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": TextArea.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
 	static get dependencies() {
-		return [Popover];
+		return [Popover, Icon];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TextArea.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/TimePicker.js

@@ -157,7 +157,7 @@ class TimePicker extends TimePickerBase {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
 	}
 }
 

package/dist/TimePickerBase.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
@@ -183,9 +183,9 @@ class TimePickerBase extends UI5Element {
 	}
 
 	static async onDefine() {
-		await Promise.all([
+		[TimePickerBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 
@@ -195,7 +195,6 @@ class TimePickerBase extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	/**
@@ -446,11 +445,11 @@ class TimePickerBase extends UI5Element {
 	}
 
 	get submitButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
 	}
 
 	get cancelButtonLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
 	}
 
 	/**

package/dist/TimeSelection.js

@@ -2,7 +2,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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
@@ -183,15 +183,14 @@ class TimeSelection extends UI5Element {
 	}
 
 	static async onDefine() {
-		await Promise.all([
+		[TimeSelection.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get _hoursConfiguration() {
@@ -460,19 +459,19 @@ class TimeSelection extends UI5Element {
 	}
 
 	get hoursSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_HOURS_LABEL);
 	}
 
 	get minutesSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_MINUTES_LABEL);
 	}
 
 	get secondsSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_SECONDS_LABEL);
 	}
 
 	get periodSliderTitle() {
-		return this.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
+		return TimeSelection.i18nBundle.getText(TIMEPICKER_PERIODS_LABEL);
 	}
 
 	get _isCyclic() {

package/dist/ToggleButton.js

@@ -1,5 +1,6 @@
 import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
 import ToggleButtonTemplate from "./generated/templates/ToggleButtonTemplate.lit.js";
 
@@ -67,6 +68,10 @@ class ToggleButton extends Button {
 
 	_onclick() {
 		this.pressed = !this.pressed;
+
+		if (isSafari()) {
+			this.getDomRef().focus();
+		}
 	}
 
 	_onkeyup(event) {

package/dist/Token.js

@@ -8,7 +8,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/sys-cancel.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { TOKEN_ARIA_DELETABLE } from "./generated/i18n/i18n-defaults.js";
 
 import Icon from "./Icon.js";
@@ -61,6 +61,14 @@ const metadata = {
 		 */
 		selected: { type: Boolean },
 
+		/**
+		 * Defines whether the component is focused or not.
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		focused: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -148,17 +156,19 @@ class Token extends UI5Element {
 		return styles;
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	_handleSelect() {
 		this.selected = !this.selected;
 		this.fireEvent("select");
 	}
 
+	_focusin() {
+		this.focused = true;
+	}
+
+	_focusout() {
+		this.focused = !this.focused;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -184,11 +194,15 @@ class Token extends UI5Element {
 	}
 
 	get tokenDeletableText() {
-		return this.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
+		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}
 
 	get iconURI() {
-		return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+		if (getTheme().includes("sap_belize")) {
+			return "sys-cancel";
+		}
+
+		return "decline";
 	}
 
 	static get dependencies() {
@@ -196,7 +210,7 @@ class Token extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Token.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }