diff --git a/docs/Configuration.md b/docs/Configuration.md
index bb97e7e2c4ee..eb57a1c0e41d 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -34,7 +34,18 @@ The `theme` setting values above are the technical names of our themes.
In order to have RTL mode, just set the HTML attribute `dir` to `rtl` on the `body`, `html` or any other relevant region of your application.
-This configuration setting should not be used by applications. It is only internally used for specific integration scenarios.
+The `RTL` configuration setting should not be used by applications. It is only internally used for specific integration scenarios.
+
+*Note:* Whenever you change `dir` dynamically, make sure you call the `applyDirection` method to re-render the RTL-aware components.
+
+Example:
+```js
+import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
+
+document.body.dir = "rtl";
+applyDirection();
+```
+
### Animation Mode
@@ -122,7 +133,7 @@ To do so, please import the desired functionality from the respective `"@ui5/web
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
```
diff --git a/packages/base/src/CustomElementsRegistry.js b/packages/base/src/CustomElementsRegistry.js
index 25f45f450f4c..40d667961825 100644
--- a/packages/base/src/CustomElementsRegistry.js
+++ b/packages/base/src/CustomElementsRegistry.js
@@ -1,3 +1,5 @@
+import setToArray from "./util/setToArray.js";
+
const Definitions = new Set();
const Failures = new Set();
let failureTimeout;
@@ -11,11 +13,7 @@ const isTagRegistered = tag => {
};
const getAllRegisteredTags = () => {
- const arr = [];
- Definitions.forEach(tag => {
- arr.push(tag);
- });
- return arr;
+ return setToArray(Definitions);
};
const recordTagRegistrationFailure = tag => {
@@ -29,11 +27,7 @@ const recordTagRegistrationFailure = tag => {
};
const displayFailedRegistrations = () => {
- const tags = []; // IE only supports Set.prototype.forEach
- Failures.forEach(tag => {
- tags.push(tag);
- });
- console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${tags.join(", ")}`); // eslint-disable-line
+ console.warn(`The following tags have already been defined by a different UI5 Web Components version: ${setToArray(Failures).join(", ")}`); // eslint-disable-line
Failures.clear();
};
diff --git a/packages/base/src/EventProvider.js b/packages/base/src/EventProvider.js
index c3fbbeecf8de..e9c16eb818cf 100644
--- a/packages/base/src/EventProvider.js
+++ b/packages/base/src/EventProvider.js
@@ -34,16 +34,24 @@ class EventProvider {
}
}
+ /**
+ * Fires an event and returns the results of all event listeners as an array.
+ * Example: If listeners return promises, you can: await fireEvent("myEvent") to know when all listeners have finished.
+ *
+ * @param eventName the event to fire
+ * @param data optional data to pass to each event listener
+ * @returns {Array} an array with the results of all event listeners
+ */
fireEvent(eventName, data) {
const eventRegistry = this._eventRegistry;
const eventListeners = eventRegistry[eventName];
if (!eventListeners) {
- return;
+ return [];
}
- eventListeners.forEach(event => {
- event["function"].call(this, data); // eslint-disable-line
+ return eventListeners.map(event => {
+ return event["function"].call(this, data); // eslint-disable-line
});
}
diff --git a/packages/base/src/RenderScheduler.js b/packages/base/src/RenderScheduler.js
index 7e37e4cc548e..3f1a5909508a 100644
--- a/packages/base/src/RenderScheduler.js
+++ b/packages/base/src/RenderScheduler.js
@@ -1,7 +1,9 @@
import RenderQueue from "./RenderQueue.js";
import { getAllRegisteredTags } from "./CustomElementsRegistry.js";
+import { isRtlAware } from "./locale/RTLAwareRegistry.js";
const MAX_RERENDER_COUNT = 10;
+const registeredElements = new Set();
// Tells whether a render task is currently scheduled
let renderTaskId;
@@ -141,6 +143,36 @@ class RenderScheduler {
renderTaskPromise = undefined;
}
}
+
+ static register(element) {
+ registeredElements.add(element);
+ }
+
+ static deregister(element) {
+ registeredElements.delete(element);
+ }
+
+ /**
+ * Re-renders all UI5 Elements on the page, with the option to specify filters to rerender only some components.
+ *
+ * Usage:
+ * reRenderAllUI5Elements() -> rerenders all components
+ * reRenderAllUI5Elements({rtlAware: true}) -> re-renders only rtlAware components
+ * reRenderAllUI5Elements({languageAware: true}) -> re-renders only languageAware components
+ * reRenderAllUI5Elements({rtlAware: true, languageAware: true}) -> re-renders components that are rtlAware or languageAware
+ *
+ * @public
+ * @param {Object|undefined} filters - Object with keys that can be "rtlAware" or "languageAware"
+ */
+ static reRenderAllUI5Elements(filters) {
+ registeredElements.forEach(element => {
+ const rtlAware = isRtlAware(element.constructor);
+ const languageAware = element.constructor.getMetadata().isLanguageAware();
+ if (!filters || (filters.rtlAware && rtlAware) || (filters.languageAware && languageAware)) {
+ RenderScheduler.renderDeferred(element);
+ }
+ });
+ }
}
export default RenderScheduler;
diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 9060f853f26f..d7fac18d7ae4 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -15,6 +15,7 @@ import Float from "./types/Float.js";
import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
import isValidPropertyName from "./util/isValidPropertyName.js";
import isSlot from "./util/isSlot.js";
+import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
const metadata = {
events: {
@@ -114,6 +115,7 @@ class UI5Element extends HTMLElement {
await Promise.resolve();
}
+ RenderScheduler.register(this);
await RenderScheduler.renderImmediately(this);
this._domRefReadyPromise._deferredResolve();
if (typeof this.onEnterDOM === "function") {
@@ -136,6 +138,7 @@ class UI5Element extends HTMLElement {
this._stopObservingDOMChildren();
}
+ RenderScheduler.deregister(this);
if (typeof this.onExitDOM === "function") {
this.onExitDOM();
}
@@ -672,6 +675,8 @@ class UI5Element extends HTMLElement {
* @returns {String|undefined}
*/
get effectiveDir() {
+ markAsRtlAware(this.constructor); // if a UI5 Element calls this method, it's considered to be rtl-aware
+
const doc = window.document;
const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
const locallyAppliedDir = getComputedStyle(this).getPropertyValue(GLOBAL_DIR_CSS_VAR);
diff --git a/packages/base/src/UI5ElementMetadata.js b/packages/base/src/UI5ElementMetadata.js
index ceb9e68a71d8..29cf94d88d73 100644
--- a/packages/base/src/UI5ElementMetadata.js
+++ b/packages/base/src/UI5ElementMetadata.js
@@ -126,6 +126,14 @@ class UI5ElementMetadata {
getEvents() {
return this.metadata.events || {};
}
+
+ /**
+ * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
+ * @returns {boolean}
+ */
+ isLanguageAware() {
+ return !!this.metadata.languageAware;
+ }
}
const validateSingleProperty = (value, propData) => {
diff --git a/packages/base/src/asset-registries/i18n.js b/packages/base/src/asset-registries/i18n.js
index 8a88501724ee..5e8b8007b055 100644
--- a/packages/base/src/asset-registries/i18n.js
+++ b/packages/base/src/asset-registries/i18n.js
@@ -1,5 +1,6 @@
import { getFeature } from "../FeaturesRegistry.js";
import getLocale from "../locale/getLocale.js";
+import { attachLanguageChange } from "../locale/languageChange.js";
import { fetchTextOnce } from "../util/FetchHelper.js";
import normalizeLocale from "../locale/normalizeLocale.js";
import nextFallbackLocale from "../locale/nextFallbackLocale.js";
@@ -63,6 +64,7 @@ const fetchI18nBundle = async packageName => {
}
if (!bundlesForPackage[localeId]) {
+ setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
return;
}
@@ -90,6 +92,12 @@ const fetchI18nBundle = async packageName => {
setI18nBundleData(packageName, data);
};
+// When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
+attachLanguageChange(() => {
+ const allPackages = [...bundleData.keys()];
+ return Promise.all(allPackages.map(fetchI18nBundle));
+});
+
export {
fetchI18nBundle,
registerI18nBundle,
diff --git a/packages/base/src/config/Language.js b/packages/base/src/config/Language.js
index 99629a2379ac..909a670d76fd 100644
--- a/packages/base/src/config/Language.js
+++ b/packages/base/src/config/Language.js
@@ -1,7 +1,13 @@
import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
+import { fireLanguageChange } from "../locale/languageChange.js";
+import RenderScheduler from "../RenderScheduler.js";
let language;
+/**
+ * Returns the currently configured language, or the browser language as a fallback
+ * @returns {String}
+ */
const getLanguage = () => {
if (language === undefined) {
language = getConfiguredLanguage();
@@ -9,4 +15,27 @@ const getLanguage = () => {
return language;
};
-export { getLanguage }; // eslint-disable-line
+/**
+ * Changes the current language, re-fetches all message bundles, updates all language-aware components
+ * and returns a promise that resolves when all rendering is done
+ *
+ * @param newLanguage
+ * @returns {Promise}
+ */
+const setLanguage = async newLanguage => {
+ if (language === newLanguage) {
+ return;
+ }
+
+ language = newLanguage;
+
+ const listenersResults = fireLanguageChange(newLanguage);
+ await Promise.all(listenersResults);
+ RenderScheduler.reRenderAllUI5Elements({ languageAware: true });
+ return RenderScheduler.whenFinished();
+};
+
+export {
+ getLanguage,
+ setLanguage,
+};
diff --git a/packages/base/src/locale/RTLAwareRegistry.js b/packages/base/src/locale/RTLAwareRegistry.js
new file mode 100644
index 000000000000..fd14d9010d0a
--- /dev/null
+++ b/packages/base/src/locale/RTLAwareRegistry.js
@@ -0,0 +1,14 @@
+const rtlAwareSet = new Set();
+
+const markAsRtlAware = klass => {
+ rtlAwareSet.add(klass);
+};
+
+const isRtlAware = klass => {
+ return rtlAwareSet.has(klass);
+};
+
+export {
+ markAsRtlAware,
+ isRtlAware,
+};
diff --git a/packages/base/src/locale/applyDirection.js b/packages/base/src/locale/applyDirection.js
new file mode 100644
index 000000000000..7d5859594063
--- /dev/null
+++ b/packages/base/src/locale/applyDirection.js
@@ -0,0 +1,15 @@
+import RenderScheduler from "../RenderScheduler.js";
+
+/**
+ * Re-renders all RTL-aware UI5 Elements.
+ * Call this method whenever you change the "dir" property anywhere in your HTML page
+ * Example: document.body.dir = "rtl"; applyDirection();
+ *
+ * @returns {Promise}
+ */
+const applyDirection = () => {
+ RenderScheduler.reRenderAllUI5Elements({ rtlAware: true });
+ return RenderScheduler.whenFinished();
+};
+
+export default applyDirection;
diff --git a/packages/base/src/locale/languageChange.js b/packages/base/src/locale/languageChange.js
new file mode 100644
index 000000000000..02863b12a92e
--- /dev/null
+++ b/packages/base/src/locale/languageChange.js
@@ -0,0 +1,22 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const LANG_CHANGE = "languageChange";
+
+const attachLanguageChange = listener => {
+ eventProvider.attachEvent(LANG_CHANGE, listener);
+};
+
+const detachLanguageChange = listener => {
+ eventProvider.detachEvent(LANG_CHANGE, listener);
+};
+
+const fireLanguageChange = lang => {
+ return eventProvider.fireEvent(LANG_CHANGE, lang);
+};
+
+export {
+ attachLanguageChange,
+ detachLanguageChange,
+ fireLanguageChange,
+};
diff --git a/packages/base/src/util/setToArray.js b/packages/base/src/util/setToArray.js
new file mode 100644
index 000000000000..3ddce745b1ba
--- /dev/null
+++ b/packages/base/src/util/setToArray.js
@@ -0,0 +1,10 @@
+// This is needed as IE11 doesn't have Set.prototype.keys/values/entries, so [...mySet.values()] is not an option
+const setToArray = s => {
+ const arr = [];
+ s.forEach(item => {
+ arr.push(item);
+ });
+ return arr;
+};
+
+export default setToArray;
diff --git a/packages/fiori/src/NotificationListGroupItem.js b/packages/fiori/src/NotificationListGroupItem.js
index 62f76dee83e2..55b57882a75f 100644
--- a/packages/fiori/src/NotificationListGroupItem.js
+++ b/packages/fiori/src/NotificationListGroupItem.js
@@ -29,7 +29,6 @@ import NotificationListGroupItemCss from "./generated/themes/NotificationListGro
*/
const metadata = {
tag: "ui5-li-notification-group",
- rtlAware: true,
languageAware: true,
managedSlots: true,
properties: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
diff --git a/packages/fiori/src/NotificationListItem.js b/packages/fiori/src/NotificationListItem.js
index 9743a21d5a3d..79ff0d13906c 100644
--- a/packages/fiori/src/NotificationListItem.js
+++ b/packages/fiori/src/NotificationListItem.js
@@ -38,7 +38,6 @@ const MAX_WRAP_HEIGHT = 32; // px.
*/
const metadata = {
tag: "ui5-li-notification",
- rtlAware: true,
languageAware: true,
managedSlots: true,
properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
index 6a34ca3a2eae..37aa5b81849e 100644
--- a/packages/fiori/src/ShellBar.js
+++ b/packages/fiori/src/ShellBar.js
@@ -38,7 +38,6 @@ import styles from "./generated/themes/ShellBar.css.js";
*/
const metadata = {
tag: "ui5-shellbar",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
diff --git a/packages/main/bundle.es5.js b/packages/main/bundle.es5.js
index 5c0d28c746be..0ad2120f902d 100644
--- a/packages/main/bundle.es5.js
+++ b/packages/main/bundle.es5.js
@@ -5,14 +5,18 @@ import "./bundle.esm.js";
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js"
+import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
const configuration = {
getAnimationMode,
getTheme,
setTheme,
+ getLanguage,
+ setLanguage,
setNoConflict,
getRTL,
getFirstDayOfWeek,
@@ -20,4 +24,5 @@ const configuration = {
export {
configuration,
getIconNames,
+ applyDirection,
};
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index df743600da70..dc9c1163f26f 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -90,19 +90,24 @@ window.isIE = isIE; // attached to the window object for testing purposes
// Note: keep in sync with rollup.config value for IIFE
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js"
+import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
window["sap-ui-webcomponents-bundle"] = {
configuration : {
getAnimationMode,
getTheme,
setTheme,
+ getLanguage,
+ setLanguage,
setNoConflict,
getRTL,
getFirstDayOfWeek,
},
getIconNames,
getLocaleData,
+ applyDirection,
};
diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js
index ab4180b65ef3..e9a72838de78 100644
--- a/packages/main/src/Badge.js
+++ b/packages/main/src/Badge.js
@@ -15,7 +15,6 @@ import badgeCss from "./generated/themes/Badge.css.js";
*/
const metadata = {
tag: "ui5-badge",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index 27b1d25b024e..b01522d1cd2d 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -21,7 +21,6 @@ let activeButton = null;
*/
const metadata = {
tag: "ui5-button",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js
index 3b9311297cf2..fca9fc69cf7d 100644
--- a/packages/main/src/CalendarHeader.js
+++ b/packages/main/src/CalendarHeader.js
@@ -13,7 +13,6 @@ import styles from "./generated/themes/CalendarHeader.css.js";
const metadata = {
tag: "ui5-calendar-header",
- rtlAware: true,
properties: {
monthText: {
type: String,
diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js
index 6bcbebab5c82..31f057cd2795 100644
--- a/packages/main/src/Card.js
+++ b/packages/main/src/Card.js
@@ -21,7 +21,6 @@ import cardCss from "./generated/themes/Card.css.js";
*/
const metadata = {
tag: "ui5-card",
- rtlAware: true,
languageAware: true,
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js
index 3ff238956443..bbf526703ec8 100644
--- a/packages/main/src/CheckBox.js
+++ b/packages/main/src/CheckBox.js
@@ -21,7 +21,6 @@ import checkboxCss from "./generated/themes/CheckBox.css.js";
*/
const metadata = {
tag: "ui5-checkbox",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 32fab123b6db..5724eb446d38 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -38,7 +38,6 @@ import StandardListItem from "./StandardListItem.js";
*/
const metadata = {
tag: "ui5-combobox",
- rtlAware: true,
languageAware: true,
defaultSlot: "items",
properties: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */ {
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index b0f680bc3c6f..730960b26f4f 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -36,7 +36,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
*/
const metadata = {
tag: "ui5-datepicker",
- rtlAware: true,
languageAware: true,
managedSlots: true,
properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js
index 59cdc34697e3..3bc66f6e4de3 100644
--- a/packages/main/src/Icon.js
+++ b/packages/main/src/Icon.js
@@ -16,7 +16,6 @@ const ICON_NOT_FOUND = "ICON_NOT_FOUND";
*/
const metadata = {
tag: "ui5-icon",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.Icon.prototype */ {
/**
diff --git a/packages/main/src/Label.js b/packages/main/src/Label.js
index f7a1fc95a864..4a27ce3d8734 100644
--- a/packages/main/src/Label.js
+++ b/packages/main/src/Label.js
@@ -12,7 +12,6 @@ import labelCss from "./generated/themes/Label.css.js";
*/
const metadata = {
tag: "ui5-label",
- rtlAware: true,
properties: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
/**
diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
index f8cbc350fef4..6022520d3b45 100644
--- a/packages/main/src/ListItem.js
+++ b/packages/main/src/ListItem.js
@@ -17,7 +17,6 @@ import styles from "./generated/themes/ListItem.css.js";
* @public
*/
const metadata = {
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js
index c91aff8536f9..6f6add247e53 100644
--- a/packages/main/src/MessageStrip.js
+++ b/packages/main/src/MessageStrip.js
@@ -20,7 +20,6 @@ import messageStripCss from "./generated/themes/MessageStrip.css.js";
*/
const metadata = {
tag: "ui5-messagestrip",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index d3dc67840570..f0dd8dee085b 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -41,7 +41,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
*/
const metadata = {
tag: "ui5-multi-combobox",
- rtlAware: true,
languageAware: true,
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
index 616076a9094c..751436d96d41 100644
--- a/packages/main/src/RadioButton.js
+++ b/packages/main/src/RadioButton.js
@@ -29,7 +29,6 @@ import radioButtonCss from "./generated/themes/RadioButton.css.js";
*/
const metadata = {
tag: "ui5-radiobutton",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js
index 67e565539813..7c6b1e5bdd34 100644
--- a/packages/main/src/SegmentedButton.js
+++ b/packages/main/src/SegmentedButton.js
@@ -19,7 +19,6 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
*/
const metadata = {
tag: "ui5-segmentedbutton",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {},
managedSlots: true,
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
index b6a03a3d7179..04297ea332fb 100644
--- a/packages/main/src/Select.js
+++ b/packages/main/src/Select.js
@@ -40,7 +40,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
*/
const metadata = {
tag: "ui5-select",
- rtlAware: true,
languageAware: true,
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js
index ca101a5c1dc2..1bd93c9655c9 100644
--- a/packages/main/src/Switch.js
+++ b/packages/main/src/Switch.js
@@ -24,7 +24,6 @@ import switchCss from "./generated/themes/Switch.css.js";
*/
const metadata = {
tag: "ui5-switch",
- rtlAware: true,
languageAware: true,
properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
index 866ee1416d54..a6aef289006b 100644
--- a/packages/main/src/TabContainer.js
+++ b/packages/main/src/TabContainer.js
@@ -39,7 +39,6 @@ const staticAreaTabStyles = [];
*/
const metadata = {
tag: "ui5-tabcontainer",
- rtlAware: true,
languageAware: true,
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js
index dc33e6afd658..e178d364f8e0 100644
--- a/packages/main/src/TimelineItem.js
+++ b/packages/main/src/TimelineItem.js
@@ -12,7 +12,6 @@ import styles from "./generated/themes/TimelineItem.css.js";
*/
const metadata = {
tag: "ui5-timeline-item",
- rtlAware: true,
slots: /** @lends sap.ui.webcomponents.main.TimelineItem.prototype */ {
/**
* Determines the description of the ui5-timeline-item.
diff --git a/packages/main/src/Toast.js b/packages/main/src/Toast.js
index 93613ec83f75..1ebc20ab2859 100644
--- a/packages/main/src/Toast.js
+++ b/packages/main/src/Toast.js
@@ -16,7 +16,6 @@ const MAX_DURATION = 1000;
*/
const metadata = {
tag: "ui5-toast",
- rtlAware: true,
properties: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
/**
diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js
index deaf9d81cf6c..05970a6832d2 100644
--- a/packages/main/src/Token.js
+++ b/packages/main/src/Token.js
@@ -23,7 +23,6 @@ import styles from "./generated/themes/Token.css.js";
*/
const metadata = {
tag: "ui5-token",
- rtlAware: true,
languageAware: true,
slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
/**
diff --git a/packages/main/test/pages/RTL.html b/packages/main/test/pages/RTL.html
index 181b1e1e6b53..1bc54e96ff57 100644
--- a/packages/main/test/pages/RTL.html
+++ b/packages/main/test/pages/RTL.html
@@ -2,10 +2,10 @@
-
+
- Button
+ RTL and Language
@@ -14,39 +14,94 @@
-
+
-
- BODY is rtl
-
-
- This section does not define dir
-
-
-
-
-
-
-
-
-
- This section defines dir=ltr
-
-
-
-
-
-
-
+
+
+
+ EN
+ DE
+ BG
+ ES
+ HE
+ AR
+
+
+
Manually switch RTL:
+
+
+
+
+
+
+
+
+
+
+ This section defines dir=LTR
+
+
+
+
+
+
+
+
+
+ This section defines dir=RTL
+
+
+
+
+
+
+
+
+
+