@ui5/webcomponents 0.31.24 → 0.31.25

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.25](https://github.com/SAP/ui5-webcomponents/compare/v0.31.24...v0.31.25) (2021-11-29)
+
+
+### Bug Fixes
+
+* **ui5-input, ui5-multi-combobox:** value state popup now aligned properly in RTL mode ([#4310](https://github.com/SAP/ui5-webcomponents/issues/4310)) ([#4382](https://github.com/SAP/ui5-webcomponents/issues/4382)) ([a855dcc](https://github.com/SAP/ui5-webcomponents/commit/a855dcc))
+* **ui5-table-row:** Prevent space when target is tr ([f891e9d](https://github.com/SAP/ui5-webcomponents/commit/f891e9d))
+
+
+
+
+
 ## [0.31.24](https://github.com/SAP/ui5-webcomponents/compare/v0.31.23...v0.31.24) (2021-11-23)
 
 

package/dist/Input.js

@@ -1275,6 +1275,10 @@ class Input extends UI5Element {
 		return this.placeholder;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected

package/dist/MultiComboBox.js

@@ -852,6 +852,10 @@ class MultiComboBox extends UI5Element {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

package/dist/TableRow.js

@@ -105,7 +105,7 @@ class TableRow extends UI5Element {
 			this.fireEvent("row-click", { row: this });
 		}
 
-		if (isSpace(event)) {
+		if (isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
 			event.preventDefault();
 		}
 	}

package/dist/generated/templates/InputPopoverTemplate.lit.js

@@ -19,7 +19,7 @@ const block13 = (item, index, context) => { return html`<ui5-li-groupheader data
 const block14 = (item, index, context) => { return html`<ui5-li-suggestion-item image="${ifDefined(item.image)}" icon="${ifDefined(item.icon)}" info="${ifDefined(item.info)}" type="${ifDefined(item.type)}" info-state="${ifDefined(item.infoState)}" @ui5-_item-press="${ifDefined(item.fnOnSuggestionItemPress)}" data-ui5-key="${ifDefined(item.key)}">${unsafeHTML(item.text)}${ item.description ? block15(item, index, context) : undefined }</ui5-li-suggestion-item>`; };
 const block15 = (item, index, context) => { return html`<span slot="richDescription">${unsafeHTML(item.description)}</span>`; };
 const block16 = (context) => { return html`<div slot="footer" class="ui5-responsive-popover-footer"><ui5-button design="Transparent" @click="${context._closeRespPopover}">OK</ui5-button></div>`; };
-const block17 = (context) => { return html`<ui5-popover skip-registry-update _disable-initial-focus prevent-focus-restore no-padding no-arrow class="ui5-valuestatemessage-popover" placement-type="Bottom" horizontal-align="Left"><div slot="header" class="${classMap(context.classes.popoverValueState)}" style="${styleMap(context.styles.popoverHeader)}">${ context.shouldDisplayDefaultValueStateMessage ? block18(context) : block19(context) }</div></ui5-popover>`; };
+const block17 = (context) => { return html`<ui5-popover skip-registry-update _disable-initial-focus prevent-focus-restore no-padding no-arrow class="ui5-valuestatemessage-popover" placement-type="Bottom" horizontal-align="${ifDefined(context._valueStatePopoverHorizontalAlign)}"><div slot="header" class="${classMap(context.classes.popoverValueState)}" style="${styleMap(context.styles.popoverHeader)}">${ context.shouldDisplayDefaultValueStateMessage ? block18(context) : block19(context) }</div></ui5-popover>`; };
 const block18 = (context) => { return html`${ifDefined(context.valueStateText)}`; };
 const block19 = (context) => { return html`${ repeat(context.valueStateMessageText, (item, index) => item._id || index, (item, index) => block20(item, index, context)) }`; };
 const block20 = (item, index, context) => { return html`${ifDefined(item)}`; };

package/dist/generated/templates/MultiComboBoxPopoverTemplate.lit.js

@@ -15,7 +15,7 @@ const block9 = (context) => { return html`${ repeat(context.valueStateMessageTex
 const block10 = (item, index, context) => { return html`${ifDefined(item)}`; };
 const block11 = (item, index, context) => { return html`<ui5-li type="${ifDefined(context._listItemsType)}" info=${ifDefined(item.additionalText)} ?selected=${item.selected} data-ui5-token-id="${ifDefined(item._id)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.text)}</ui5-li>`; };
 const block12 = (context) => { return html`<div slot="footer" class="ui5-responsive-popover-footer"><ui5-button design="Transparent" @click="${context.togglePopover}">${ifDefined(context._dialogOkButton)}</ui5-button></div>`; };
-const block13 = (context) => { return html`<ui5-popover skip-registry-update _disable-initial-focus prevent-focus-restore no-padding no-arrow class="ui5-valuestatemessage-popover" placement-type="Bottom" horizontal-align="Left"><div slot="header" class="${classMap(context.classes.popoverValueState)}" style="${styleMap(context.styles.popoverHeader)}">${ context.shouldDisplayDefaultValueStateMessage ? block14(context) : block15(context) }</div></ui5-popover>`; };
+const block13 = (context) => { return html`<ui5-popover skip-registry-update _disable-initial-focus prevent-focus-restore no-padding no-arrow class="ui5-valuestatemessage-popover" placement-type="Bottom" horizontal-align="${ifDefined(context._valueStatePopoverHorizontalAlign)}"><div slot="header" class="${classMap(context.classes.popoverValueState)}" style="${styleMap(context.styles.popoverHeader)}">${ context.shouldDisplayDefaultValueStateMessage ? block14(context) : block15(context) }</div></ui5-popover>`; };
 const block14 = (context) => { return html`${ifDefined(context.valueStateText)}`; };
 const block15 = (context) => { return html`${ repeat(context.valueStateMessageText, (item, index) => item._id || index, (item, index) => block16(item, index, context)) }`; };
 const block16 = (item, index, context) => { return html`${ifDefined(item)}`; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.31.24",
+  "version": "0.31.25",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -30,14 +30,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.31.24",
-    "@ui5/webcomponents-icons": "0.31.24",
-    "@ui5/webcomponents-ie11": "0.31.24",
-    "@ui5/webcomponents-localization": "0.31.24",
-    "@ui5/webcomponents-theme-base": "0.31.24"
+    "@ui5/webcomponents-base": "0.31.25",
+    "@ui5/webcomponents-icons": "0.31.25",
+    "@ui5/webcomponents-ie11": "0.31.25",
+    "@ui5/webcomponents-localization": "0.31.25",
+    "@ui5/webcomponents-theme-base": "0.31.25"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.24",
-    "chromedriver": "95.0.0"
+    "@ui5/webcomponents-tools": "0.31.25",
+    "chromedriver": "96.0.0"
   }
 }

package/src/Input.js

@@ -1275,6 +1275,10 @@ class Input extends UI5Element {
 		return this.placeholder;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected

package/src/InputPopover.hbs

@@ -71,7 +71,7 @@
 			no-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
-			horizontal-align="Left"
+			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}

package/src/MultiComboBox.js

@@ -852,6 +852,10 @@ class MultiComboBox extends UI5Element {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {

package/src/MultiComboBoxPopover.hbs

@@ -98,7 +98,7 @@
 		no-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			{{> valueStateMessage}}

package/src/TableRow.js

@@ -105,7 +105,7 @@ class TableRow extends UI5Element {
 			this.fireEvent("row-click", { row: this });
 		}
 
-		if (isSpace(event)) {
+		if (isSpace(event) && event.target.tagName.toLowerCase() === "tr") {
 			event.preventDefault();
 		}
 	}