@ui5/webcomponents-base 1.3.1 → 1.6.0

package/dist/updateShadowRoot.js

@@ -2,7 +2,6 @@ import executeTemplate from "./renderer/executeTemplate.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
 import getEffectiveStyle from "./theming/getEffectiveStyle.js";
 import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
-import isLegacyBrowser from "./isLegacyBrowser.js";
 import { shouldUseLinks } from "./CSP.js";
 
 /**
@@ -20,7 +19,7 @@ const updateShadowRoot = (element, forStaticArea = false) => {
 		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
 	} else if (document.adoptedStyleSheets) { // Chrome
 		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
-	} else if (!isLegacyBrowser()) { // FF, Safari
+	} else { // FF, Safari
 		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 

package/dist/util/Caret.js

@@ -6,20 +6,7 @@ const getCaretPosition = field => {
 	// Initialize
 	let caretPos = 0;
 
-	// IE Support
-	if (document.selection) {
-		// Set focus on the element
-		field.focus();
-
-		// To get cursor position, get empty selection range
-		const selection = document.selection.createRange();
-
-		// Move selection start to 0 position
-		selection.moveStart("character", -field.value.length);
-
-		// The caret position is selection length
-		caretPos = selection.text.length;
-	} else if (field.selectionStart || field.selectionStart === "0") { // Firefox support
+	if (field.selectionStart || field.selectionStart === "0") { // Firefox support
 		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
 	}
 

package/dist/util/ColorConversion.js

@@ -163,7 +163,7 @@ const getRGBColor = color => {
 	}
 
 	if (color.startsWith("rgb")) {
-		return RGBToRGB(color);
+		return RGBStringToRGBObject(color);
 	}
 
 	// HEX
@@ -209,7 +209,7 @@ const RGBAToRGB = color => {
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgb(0, 0, 0)
  */
-const RGBToRGB = color => {
+const RGBStringToRGBObject = color => {
 	const openingBracketIndex = color.indexOf("("),
 		closingBraketIndex = color.indexOf(")"),
 		commasIndexes = [];
@@ -319,6 +319,32 @@ const HEXToRGB = hex => {
 	return rgbValues;
 };
 
+/**
+ * Returns the hex value of the color as string
+ * @param {Object} color Receives an object with the properties for each of the main colors(r, g, b)
+ */
+const RGBtoHEX = color => {
+	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E"];
+	let hexValue = "#";
+
+	let divisionNumber = color.r / 16;
+	let remainder = color.r % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.g / 16;
+	remainder = color.g % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.b / 16;
+	remainder = color.b % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	return hexValue;
+};
+
 const RGBToHSL = (color = {
 	r: undefined,
 	g: undefined,
@@ -367,4 +393,6 @@ export {
 	HSLToRGB,
 	HEXToRGB,
 	RGBToHSL,
+	RGBStringToRGBObject,
+	RGBtoHEX,
 };

package/dist/util/InvisibleMessage.js

@@ -43,6 +43,7 @@ attachBoot(() => {
  *
  * @param {string} message String to be announced by the screen reader.
  * @param {sap.ui.core.InvisibleMessageMode} mode The mode to be inserted in the aria-live attribute.
+ * @public
  */
 const announce = (message, mode) => {
 	// If no type is presented, fallback to polite announcement.
@@ -55,6 +56,14 @@ const announce = (message, mode) => {
 	if (mode !== InvisibleMessageMode.Assertive && mode !== InvisibleMessageMode.Polite) {
 		console.warn(`You have entered an invalid mode. Valid values are: "Polite" and "Assertive". The framework will automatically set the mode to "Polite".`); // eslint-disable-line
 	}
+
+	// clear the span in order to avoid reading it out while in JAWS reading node
+	setTimeout(() => {
+		// ensure that we clear the text node only if no announce is made in the meantime
+		if (span.textContent === message) {
+			span.textContent = "";
+		}
+	}, 3000);
 };
 
 export default announce;

package/dist/util/isDefaultSlotProvided.js

@@ -0,0 +1,11 @@
+import { getSlotName } from "./SlotsHelper.js";
+
+const isDefaultSlotProvided = element => {
+	return Array.from(element.childNodes).filter(node => {
+		return node.nodeType !== Node.COMMENT_NODE
+		&& getSlotName(node) === "default"
+		&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
+	}).length > 0;
+};
+
+export default isDefaultSlotProvided;

package/hash.txt

@@ -1 +1 @@
-7cADSux+n5gxUE55a8MRQVhXdKo=
+XeoUDYYqmjUwnJg4dGNgbPltSMo=

package/lib/generate-asset-parameters/index.js

@@ -1,5 +1,4 @@
-const fs = require('fs');
-const mkdirp = require('mkdirp');
+const fs = require('fs').promises;
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
 
 const fileContent = `const assetParameters = ${JSON.stringify(assets)};
@@ -16,6 +15,11 @@ export {
 	SUPPORTED_LOCALES,
 };`;
 
-mkdirp.sync("dist/generated/");
-fs.writeFileSync("dist/generated/AssetParameters.js", fileContent);
+const generate = async () => {
+	await fs.mkdir("dist/generated/", { recursive: true });
+	return fs.writeFile("dist/generated/AssetParameters.js", fileContent);
+}
 
+generate().then(() => {
+	console.log("Assets parameters generated.");
+});

package/lib/generate-styles/index.js

@@ -1,18 +1,26 @@
-const fs = require('fs');
+const fs = require('fs').promises;
 const path = require('path');
-const mkdirp = require('mkdirp');
 const CleanCSS = require('clean-css');
 
-mkdirp.sync("dist/generated/css/");
-fs.readdirSync("src/css/").filter(file => file.endsWith(".css")).forEach(file => {
-	let content = fs.readFileSync(path.join("src/css/", file));
-	const res = new CleanCSS().minify(`${content}`);
-	content = `export default {
+const generate = async () => {
+	await fs.mkdir("dist/generated/css/");
+
+	const files = (await fs.readdir("src/css/")).filter(file => file.endsWith(".css"));
+	const filesPromises = files.map(async file => {
+		let content = await fs.readFile(path.join("src/css/", file));
+		const res = new CleanCSS().minify(`${content}`);
+		content = `export default {
 	packageName: "@ui5/webcomponents-base",
 	fileName: "${file}",
 	content: \`${res.styles}\`
 };`;
 
-	fs.writeFileSync(path.join("dist/generated/css/", `${file}.js`), content);
-});
+		return fs.writeFile(path.join("dist/generated/css/", `${file}.js`), content);
+	});
 
+	return Promise.all(filesPromises);
+};
+
+generate().then(() => {
+	console.log("Styles files generated.");
+});

package/lib/generate-version-info/index.js

@@ -1,18 +1,18 @@
-const fs = require('fs');
-const mkdirp = require('mkdirp');
+const fs = require('fs').promises;
 
-const version = JSON.parse(fs.readFileSync("package.json")).version;
+const generate = async () => {
+	const version = JSON.parse(await fs.readFile("package.json")).version;
 
-// Parse version
-const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
-if (!matches) {
-	throw new Error("Unsupported version format");
-}
+	// Parse version
+	const matches = version.match(/^([0-9]+)\.([0-9]+)\.([0-9]+)(.*)$/);
+	if (!matches) {
+		throw new Error("Unsupported version format");
+	}
 
-const isNext = version.match(/[a-f0-9]{9}$/);
-const buildTime = Math.floor(new Date().getTime() / 1000);
+	const isNext = version.match(/[a-f0-9]{9}$/);
+	const buildTime = Math.floor(new Date().getTime() / 1000);
 
-const fileContent = `const VersionInfo = {
+	const fileContent = `const VersionInfo = {
 	version: "${version}",
 	major: ${matches[1]},
 	minor: ${matches[2]},
@@ -23,5 +23,10 @@ const fileContent = `const VersionInfo = {
 };
 export default VersionInfo;`;
 
-mkdirp.sync("dist/generated/");
-fs.writeFileSync("dist/generated/VersionInfo.js", fileContent);
+	await fs.mkdir("dist/generated/", { recursive: true });
+	await fs.writeFile("dist/generated/VersionInfo.js", fileContent);
+}
+
+generate().then(() => {
+	console.log("Version info file generated.");
+});

package/package-scripts.js

@@ -1,18 +1,20 @@
 const resolve = require("resolve");
+const path = require("path");
 
 const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
 const stylesScript = resolve.sync("@ui5/webcomponents-base/lib/generate-styles/index.js");
 const versionScript = resolve.sync("@ui5/webcomponents-base/lib/generate-version-info/index.js");
-const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
-const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
-const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
 const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
 const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
-const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
+
+const LIB = path.join(__dirname, `../tools/lib/`);
+
+const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+const eslintConfig = `--config ${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}`;
 
 const scripts = {
 	clean: "rimraf dist && rimraf .port",
-	lint: "eslint . --config config/.eslintrc.js",
+	lint: `eslint . ${eslintConfig}`,
 	prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles",
 	integrate: {
 		default: "nps integrate.copy-used-modules integrate.replace-amd integrate.amd-to-es6 integrate.esm-abs-to-rel integrate.third-party",
@@ -27,33 +29,25 @@ const scripts = {
 		},
 	},
 	build: {
-		default: `${UP_TO_DATE} || nps lint prepare build.bundle hash`,
-		bundle: "rollup --config config/rollup.config.js",
+		default: `nps lint prepare build.bundle`,
+		bundle: `vite build ${viteConfig}`,
 	},
 	copy: {
-		default: "nps copy.src copy.test",
+		default: "nps copy.src",
 		src: `copy-and-watch "src/**/*.{js,css}" dist/`,
-		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
 	watch: {
-		default: 'concurrently "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
+		default: 'concurrently "nps watch.src" "nps watch.styles"',
+		withBundle: 'concurrently "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 		src: 'nps "copy.src --watch --skip-initial-copy"',
-		test: 'nps "copy.test --watch --skip-initial-copy"',
-		bundle: "rollup --config config/rollup.config.js -w --environment DEV",
+		bundle: `node ${LIB}/dev-server/dev-server.js ${viteConfig}`,
 		styles: 'chokidar "src/css/*.css" -c "nps generateStyles"'
 	},
-	dev: 'concurrently "nps serve" "nps watch"',
-	start: "nps prepare dev",
-	serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
-	test: {
-		// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-		default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-		run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
-	},
-	hash: `node "${generateHash}" dist/ hash.txt`,
+	start: "nps prepare watch.withBundle",
+	test: `node "${LIB}/test-runner/test-runner.js"`,
 };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "1.3.1",
+  "version": "1.6.0",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,7 +28,6 @@
     "start": "nps start",
     "build": "nps build",
     "test": "nps test",
-    "hash": "nps hash",
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
@@ -36,13 +35,15 @@
   },
   "devDependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
-    "@openui5/sap.ui.core": "1.94.0",
-    "@ui5/webcomponents-tools": "1.3.1",
-    "chromedriver": "100.0.0",
+    "@openui5/sap.ui.core": "1.101.0",
+    "@ui5/webcomponents-tools": "1.6.0",
+    "chromedriver": "102.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
+    "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
     "mkdirp": "^1.0.4",
+    "replace-in-file": "^6.3.5",
     "resolve": "^1.20.0"
   }
 }

package/src/CustomElementsRegistry.js

@@ -82,7 +82,7 @@ const displayFailedRegistrations = () => {
 		}
 	});
 
-	message = `${message}\n\nTo prevent other runtimes from defining tags that you use, consider using scoping or have third-party libraries use scoping: https://github.com/SAP/ui5-webcomponents/blob/master/docs/2-advanced/03-scoping.md.`;
+	message = `${message}\n\nTo prevent other runtimes from defining tags that you use, consider using scoping or have third-party libraries use scoping: https://github.com/SAP/ui5-webcomponents/blob/main/docs/2-advanced/03-scoping.md.`;
 
 	console.warn(message); // eslint-disable-line
 };

package/src/asset-registries/LocaleData.js

@@ -147,7 +147,7 @@ const registerLocaleDataLoader = (localeId, loader) => {
 
 // register default loader for "en" from ui5 CDN (dev workflow without assets)
 registerLocaleDataLoader("en", async runtimeLocaleId => {
-	return (await fetch(`https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/en.json`)).json();
+	return (await fetch(`https://ui5.sap.com/1.103.0/resources/sap/ui/core/cldr/en.json`)).json();
 });
 
 // When the language changes dynamically (the user calls setLanguage),

package/src/asset-registries/Themes.js

@@ -38,10 +38,14 @@ const getThemeProperties = async (packageName, themeName) => {
 
 	if (!registeredThemes.has(themeName)) {
 		const regThemesStr = [...registeredThemes.values()].join(", ");
-		console.warn(`You have requested a non-registered theme - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
-		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
+		console.warn(`You have requested a non-registered theme ${themeName} - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */
+		return _getThemeProperties(packageName, DEFAULT_THEME);
 	}
 
+	return _getThemeProperties(packageName, themeName);
+};
+
+const _getThemeProperties = async (packageName, themeName) => {
 	const loader = loaders.get(`${packageName}/${themeName}`);
 	if (!loader) {
 		// no themes for package

package/src/asset-registries/i18n.js

@@ -14,10 +14,12 @@ const bundlePromises = new Map();
 const loaders = new Map();
 
 /**
+ * Registers i18n loader function for given package and locale.
  *
+ * @public
  * @param {string} packageName for which package this loader can fetch data
+ * @param {string} localeId locale that this loader can handle
  * @param {function} loader async function that will be passed a localeId and should return a JSON object
- * @param {Array} localeIds Array of locale IDs that this loader can handle
  */
 const registerI18nLoader = (packageName, localeId, loader) => {
 	// register loader by key

package/src/css/BusyIndicator.css

@@ -59,6 +59,10 @@
 	--ui5_web_components_busy_indicator_display: none;
 }
 
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
 @keyframes grow {
     0%, 50%, 100% {
         -webkit-transform: scale(0.5);

package/src/css/FontFace.css

@@ -3,8 +3,8 @@
     font-style: normal;
     font-weight: 400;
     src: local("72"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
@@ -12,8 +12,8 @@
     font-style: normal;
     font-weight: 400;
     src: local('72-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff?ui5-webcomponents) format("woff");
 
 }
 
@@ -22,8 +22,8 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
@@ -31,38 +31,38 @@
     font-style: normal;
     font-weight: 700;
     src: local('72-Bold-full'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
     font-family: '72-Bold';
     font-style: normal;
     src: local('72-Bold'),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
     font-family: '72-Boldfull';
     font-style: normal;
-    src: url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
-         url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
+    src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2"),
+         url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
     font-family: '72-Light';
     font-style: normal;
     src: local('72-Light'),
-        url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
-        url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
+        url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),
+        url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {
     font-family: '72-Lightfull';
     font-style: normal;
-    src: url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
-    url(https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
+    src: url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2"),
+    url(https://ui5.sap.com/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff?ui5-webcomponents) format("woff");
 }
 
 @font-face {

package/src/delegate/ItemNavigation.js

@@ -133,15 +133,20 @@ class ItemNavigation {
 
 		const horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;
 		const verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;
+		const isRTL = this.rootWebComponent.effectiveDir === "rtl";
 
-		if (isUp(event) && verticalNavigationOn) {
-			this._handleUp();
-		} else if (isDown(event) && verticalNavigationOn) {
-			this._handleDown();
+		if (isRTL && isLeft(event) && horizontalNavigationOn) {
+			this._handleRight();
+		} else if (isRTL && isRight(event) && horizontalNavigationOn) {
+			this._handleLeft();
 		} else if (isLeft(event) && horizontalNavigationOn) {
 			this._handleLeft();
 		} else if (isRight(event) && horizontalNavigationOn) {
 			this._handleRight();
+		} else if (isUp(event) && verticalNavigationOn) {
+			this._handleUp();
+		} else if (isDown(event) && verticalNavigationOn) {
+			this._handleDown();
 		} else if (isHome(event)) {
 			this._handleHome();
 		} else if (isEnd(event)) {

package/src/features/F6Navigation.js

@@ -15,14 +15,14 @@ class F6Navigation {
 	}
 
 	async _keydownHandler(event) {
-		event.preventDefault();
-
 		if (isF6Next(event)) {
 			this.updateGroups();
 			if (this.groups.length < 1) {
 				return;
 			}
 
+			event.preventDefault();
+
 			const nextIndex = this.groups.indexOf(this.selectedGroup);
 			let nextElement = null;
 
@@ -46,6 +46,8 @@ class F6Navigation {
 				return;
 			}
 
+			event.preventDefault();
+
 			const nextIndex = this.groups.indexOf(this.selectedGroup);
 			let nextElement = null;
 

package/src/updateShadowRoot.js

@@ -2,7 +2,6 @@ import executeTemplate from "./renderer/executeTemplate.js";
 import getConstructableStyle from "./theming/getConstructableStyle.js";
 import getEffectiveStyle from "./theming/getEffectiveStyle.js";
 import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
-import isLegacyBrowser from "./isLegacyBrowser.js";
 import { shouldUseLinks } from "./CSP.js";
 
 /**
@@ -20,7 +19,7 @@ const updateShadowRoot = (element, forStaticArea = false) => {
 		styleStrOrHrefsArr = getEffectiveLinksHrefs(element.constructor, forStaticArea);
 	} else if (document.adoptedStyleSheets) { // Chrome
 		shadowRoot.adoptedStyleSheets = getConstructableStyle(element.constructor, forStaticArea);
-	} else if (!isLegacyBrowser()) { // FF, Safari
+	} else { // FF, Safari
 		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 

package/src/util/Caret.js

@@ -6,20 +6,7 @@ const getCaretPosition = field => {
 	// Initialize
 	let caretPos = 0;
 
-	// IE Support
-	if (document.selection) {
-		// Set focus on the element
-		field.focus();
-
-		// To get cursor position, get empty selection range
-		const selection = document.selection.createRange();
-
-		// Move selection start to 0 position
-		selection.moveStart("character", -field.value.length);
-
-		// The caret position is selection length
-		caretPos = selection.text.length;
-	} else if (field.selectionStart || field.selectionStart === "0") { // Firefox support
+	if (field.selectionStart || field.selectionStart === "0") { // Firefox support
 		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
 	}
 

package/src/util/ColorConversion.js

@@ -163,7 +163,7 @@ const getRGBColor = color => {
 	}
 
 	if (color.startsWith("rgb")) {
-		return RGBToRGB(color);
+		return RGBStringToRGBObject(color);
 	}
 
 	// HEX
@@ -209,7 +209,7 @@ const RGBAToRGB = color => {
  * Return an object with the properties for each of the main colors(red, green, blue)
  * @param {String} color Receives a color in the following format: "rgb(0, 0, 0)
  */
-const RGBToRGB = color => {
+const RGBStringToRGBObject = color => {
 	const openingBracketIndex = color.indexOf("("),
 		closingBraketIndex = color.indexOf(")"),
 		commasIndexes = [];
@@ -319,6 +319,32 @@ const HEXToRGB = hex => {
 	return rgbValues;
 };
 
+/**
+ * Returns the hex value of the color as string
+ * @param {Object} color Receives an object with the properties for each of the main colors(r, g, b)
+ */
+const RGBtoHEX = color => {
+	const hexMap = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E"];
+	let hexValue = "#";
+
+	let divisionNumber = color.r / 16;
+	let remainder = color.r % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.g / 16;
+	remainder = color.g % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	divisionNumber = color.b / 16;
+	remainder = color.b % 16;
+	hexValue += String(hexMap[Math.floor(divisionNumber)]);
+	hexValue += String(hexMap[remainder]);
+
+	return hexValue;
+};
+
 const RGBToHSL = (color = {
 	r: undefined,
 	g: undefined,
@@ -367,4 +393,6 @@ export {
 	HSLToRGB,
 	HEXToRGB,
 	RGBToHSL,
+	RGBStringToRGBObject,
+	RGBtoHEX,
 };