@ui5/webcomponents-base 0.0.0-2c7615fe9 → 0.0.0-3236d56be

package/src/asset-registries/Icons.js

@@ -1,11 +1,12 @@
 import getSharedResource from "../getSharedResource.js";
+import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
+import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
 const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
 
 /**
  * @deprecated
@@ -47,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = DEFAULT_COLLECTION;
+		collection = getEffectiveDefaultIconCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -67,18 +68,16 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	// hardcoded alias in case icon explorer is used, resolve `BusinessSuiteInAppSymbols` to `business-suite`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "BusinessSuiteInAppSymbols") {
-		collection = "business-suite";
-		name = name.replace("icon-", "");
-	}
+	collection = collection || getEffectiveDefaultIconCollection();
+
+	// Normalize collection name.
+	// - resolve `SAP-icons-TNT` to `tnt`.
+	// - resolve `BusinessSuiteInAppSymbols` to `business-suite`.
+	// - resolve `horizon` to `SAP-icons-v5`,
+	// Note: aliases can be made as a feature, if more collections need it or more aliases are needed.
+	collection = _normalizeCollection(collection);
+	name = name.replace("icon-", "");
+
 	const registryKey = `${collection}/${name}`;
 	return { name, collection, registryKey };
 };
@@ -118,6 +117,14 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
+const _normalizeCollection = collectionName => {
+	if (IconCollectionsAlias[collectionName]) {
+		return IconCollectionsAlias[collectionName];
+	}
+
+	return collectionName;
+};
+
 export {
 	registerIconBundle,
 	registerIconLoader,

package/src/asset-registries/Illustrations.js

@@ -3,8 +3,8 @@ import getSharedResource from "../getSharedResource.js";
 const registry = getSharedResource("SVGIllustration.registry", new Map());
 const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
 
-const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, title, subtitle } = {}) => { // eslint-disable-line
-	registry.set(name, {
+const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
+	registry.set(`${set}/${name}`, {
 		dialogSvg,
 		sceneSvg,
 		spotSvg,
@@ -14,7 +14,14 @@ const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, title, subti
 };
 
 const getIllustrationDataSync = nameProp => {
-	return registry.get(nameProp) || ILLUSTRATION_NOT_FOUND;
+	let set = "fiori";
+
+	if (nameProp.startsWith("Tnt")) {
+		set = "tnt";
+		nameProp = nameProp.replace(/^Tnt/, "");
+	}
+
+	return registry.get(`${set}/${nameProp}`) || ILLUSTRATION_NOT_FOUND;
 };
 
 export {

package/src/asset-registries/LocaleData.js

@@ -13,14 +13,22 @@ const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
 	"ji": "yi",
 	"in": "id",
-	"sh": "sr",
 };
 
+const DEV_MODE = false;
+
 const _showAssetsWarningOnce = localeId => {
-	if (!warningShown) {
+	if (warningShown) {
+		return;
+	}
+
+	if (!DEV_MODE) {
 		console.warn(`[LocaleData] Supported locale "${localeId}" not configured, import the "Assets.js" module from the webcomponents package you are using.`); /* eslint-disable-line */
-		warningShown = true;
+	} else {
+		console.warn(`[LocaleData] Note: in dev mode, CLDR assets might be disabled for performance reasons. Try running "ENABLE_CLDR=1 yarn start" to test CLDR assets.`); /* eslint-disable-line */
 	}
+
+	warningShown = true;
 };
 
 const calcLocale = (language, region, script) => {
@@ -39,6 +47,12 @@ const calcLocale = (language, region, script) => {
 		}
 	}
 
+	// Special case 3: for Serbian, there are cyrillic and latin scripts, "sh" and "sr-latn" map to "latin", "sr" maps to cyrillic.
+	if (language === "sh" || (language === "sr" && script === "Latn")) {
+		language = "sr";
+		region = "Latn";
+	}
+
 	// try language + region
 	let localeId = `${language}_${region}`;
 	if (SUPPORTED_LOCALES.includes(localeId)) {

package/src/assets-meta/IconCollectionsAlias.js

@@ -0,0 +1,18 @@
+/**
+ * Supported icon collection names and aliases.
+ *
+ * Users might specify a collection, using both the key and the value in the following key-value pairs,
+ * e.g the following pairs are completely exchangeable:
+ * "SAP-icons-TNT/actor" and "tnt/actor", "BusinessSuiteInAppSymbols/3d" and "business-suite/3d",
+ * "SAP-icons-v5/accept" and "horizon/accept".
+ *
+ * Note: technically, in the code we maintain the collections under the "value" name - "tnt", "business-suite",
+ * SAP-icons-v5" and "SAP-icons"(which does not have an alias).
+ */
+const IconCollectionsAlias = {
+	"SAP-icons-TNT": "tnt",
+	"BusinessSuiteInAppSymbols": "business-suite",
+	"horizon": "SAP-icons-v5",
+};
+
+export default IconCollectionsAlias;

package/src/config/Icons.js

@@ -0,0 +1,52 @@
+import { getTheme, isThemeFamily } from "./Theme.js";
+
+const IconCollectionConfiguration = new Map();
+
+/**
+ * Sets the default icon collection (v4 or v5) per theme,
+ * which will be applied in case icon collection is not specified.
+ *
+ * Note: by default SAP-icons-v5 is used in SAP Horizon and  SAP-icons-v4 for all the rest.
+ * @param {String} theme
+ * @param {String} collectionName
+ */
+const setDefaultIconCollection = (theme, collectionName) => {
+	if (collectionName === "horizon") {
+		collectionName = "SAP-icons-v5";
+	}
+
+	IconCollectionConfiguration.set(theme, collectionName);
+};
+
+/**
+ * Returns the default icon collection (v4 or v5) for given theme,
+ * that is configured.
+ *
+ * @param {String} theme
+ * @returns {String}
+ */
+const getDefaultIconCollection = theme => {
+	return IconCollectionConfiguration.get(theme);
+};
+
+/**
+ * Returns the effective icon collection that will be applied for icon web components
+ * whenever namespace is not specified.
+ * @returns {String}
+ */
+const getEffectiveDefaultIconCollection = () => {
+	const currentTheme = getTheme();
+	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
+
+	if (currentThemeConfiguration) {
+		return currentThemeConfiguration;
+	}
+
+	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+export {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveDefaultIconCollection,
+};

package/src/config/Theme.js

@@ -1,4 +1,5 @@
 import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
 import applyTheme from "../theming/applyTheme.js";
 
 let theme;
@@ -20,9 +21,33 @@ const setTheme = async newTheme => {
 
 	// Update CSS Custom Properties
 	await applyTheme(theme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {String}
+ * @returns {boolean}
+ */
+const isTheme = _theme => {
+	const currentTheme = getTheme();
+	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
+};
+
+/**
+ * Returns if the current theme is part of given theme family
+ * @private
+ * @param {String} the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = _theme => {
+	return getTheme().startsWith(_theme);
 };
 
 export {
 	getTheme,
 	setTheme,
+	isTheme,
+	isThemeFamily,
 };

package/src/css/BusyIndicator.css

@@ -0,0 +1,76 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

package/src/css/FontFace.css

@@ -0,0 +1,75 @@
+@font-face {
+    font-family: "72";
+    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");
+}
+
+@font-face {
+    font-family: "72full";
+    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");
+
+}
+
+@font-face {
+    font-family: "72";
+    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");
+}
+
+@font-face {
+    font-family: "72full";
+    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");
+}
+
+@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");
+}
+
+@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");
+}
+
+@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");
+}
+
+@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");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),
+    url(https://openui5nightly.hana.ondemand.com/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff?ui5-webcomponents) format("woff");
+}

package/src/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}

package/src/features/F6Navigation.js

@@ -0,0 +1,108 @@
+import { registerFeature } from "../FeaturesRegistry.js";
+import { isF6Next, isF6Previous } from "../Keys.js";
+import { getFirstFocusableElement } from "../util/FocusableElements.js";
+
+class F6Navigation {
+	init() {
+		this.keydownHandler = this._keydownHandler.bind(this);
+		this.attachEventListeners();
+		this.selectedGroup = null;
+		this.groups = [];
+	}
+
+	attachEventListeners() {
+		document.addEventListener("keydown", this.keydownHandler);
+	}
+
+	async _keydownHandler(event) {
+		event.preventDefault();
+
+		if (isF6Next(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex + 1 >= this.groups.length) {
+					nextElement = this.groups[0];
+				} else {
+					nextElement = this.groups[nextIndex + 1];
+				}
+			} else {
+				nextElement = this.groups[0];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+
+		if (isF6Previous(event)) {
+			this.updateGroups();
+			if (this.groups.length < 1) {
+				return;
+			}
+
+			const nextIndex = this.groups.indexOf(this.selectedGroup);
+			let nextElement = null;
+
+			if (nextIndex > -1) {
+				if (nextIndex - 1 < 0) {
+					nextElement = this.groups[this.groups.length - 1];
+				} else {
+					// Handle the situation where the first focusable element of two neighbor groups is the same
+					// For example:
+					// <ui5-flexible-column-layout>
+					//     <ui5-list>
+					//         <ui5-li>List Item</ui5-li>
+					//     </ui5-list>
+					// </ui5-flexible-column-layout>
+					// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+
+					const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
+					const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+
+					nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
+				}
+			} else {
+				nextElement = this.groups[this.groups.length - 1];
+			}
+
+			const elementToFocus = await getFirstFocusableElement(nextElement.isUI5Element ? nextElement.getDomRef() : nextElement, true);
+			elementToFocus.focus();
+		}
+	}
+
+	removeEventListeners() {
+		document.removeEventListener("keydown", this.keydownHandler);
+	}
+
+	updateGroups() {
+		this.setSelectedGroup(document.activeElement);
+		this.setGroups();
+	}
+
+	setGroups() {
+		this.groups = Array.from(document.querySelectorAll("[data-sap-ui-fastnavgroup='true']")).filter(group => group.clientWidth && window.getComputedStyle(group).visibility !== "hidden");
+	}
+
+	setSelectedGroup(element) {
+		while (element && element.getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== document.querySelector("html")) {
+			element = element.parentElement ? element.parentNode : element.parentNode.host;
+		}
+
+		this.selectedGroup = element;
+	}
+
+	destroy() {
+		this.removeEventListeners();
+	}
+}
+
+const F6HelperInstance = new F6Navigation();
+registerFeature("F6Navigation", F6HelperInstance);
+
+export default F6Navigation;

package/src/features/OpenUI5Enablement.js

@@ -0,0 +1,119 @@
+import { registerFeature } from "../FeaturesRegistry.js";
+import BusyIndicatorStyles from "../generated/css/BusyIndicator.css.js";
+import merge from "../thirdparty/merge.js";
+import {
+	isTabPrevious,
+} from "../Keys.js";
+
+const busyIndicatorMetadata = {
+	properties: {
+		__isBusy: {
+			type: Boolean,
+		},
+	},
+};
+
+const getBusyIndicatorStyles = () => {
+	return BusyIndicatorStyles;
+};
+
+const wrapTemplateResultInBusyMarkup = (html, host, templateResult) => {
+	if (host.isOpenUI5Component && host.__isBusy) {
+		templateResult = html`
+		<div class="busy-indicator-wrapper">
+			<span tabindex="0" busy-indicator-before-span @focusin=${host.__suppressFocusIn}></span>
+			${templateResult}
+			<div class="busy-indicator-overlay"></div>
+			<div busy-indicator
+				class="busy-indicator-busy-area"
+				tabindex="0"
+				role="progressbar"
+				@keydown=${host.__suppressFocusBack}
+				aria-valuemin="0"
+				aria-valuemax="100"
+				aria-valuetext="Busy">
+				<div>
+					<div class="busy-indicator-circle circle-animation-0"></div>
+					<div class="busy-indicator-circle circle-animation-1"></div>
+					<div class="busy-indicator-circle circle-animation-2"></div>
+				</div>
+			</div>
+		</div>`;
+	}
+
+	return templateResult;
+};
+
+const enrichBusyIndicatorMetadata = UI5Element => {
+	UI5Element.metadata = merge(UI5Element.metadata, busyIndicatorMetadata);
+};
+
+const enrichBusyIndicatorMethods = UI5ElementPrototype => {
+	Object.defineProperties(UI5ElementPrototype, {
+		"__redirectFocus": { value: true, writable: true },
+		"__suppressFocusBack": {
+			get() {
+				const that = this;
+
+				return {
+					handleEvent: e => {
+						if (isTabPrevious(e)) {
+							const beforeElem = that.shadowRoot.querySelector("[busy-indicator-before-span]");
+							that.__redirectFocus = false;
+							beforeElem.focus();
+							that.__redirectFocus = true;
+						}
+					},
+					capture: true,
+					passive: false,
+				};
+			},
+		},
+		"isOpenUI5Component": { get: () => { return true; } },
+	});
+
+	UI5ElementPrototype.__suppressFocusIn = function handleFocusIn() {
+		const busyIndicator = this.shadowRoot.querySelector("[busy-indicator]");
+		if (busyIndicator && this.__redirectFocus) {
+			busyIndicator.focus();
+		}
+	};
+
+	UI5ElementPrototype.getDomRef = function getDomRef() {
+		// If a component set _getRealDomRef to its children, use the return value of this function
+		if (typeof this._getRealDomRef === "function") {
+			return this._getRealDomRef();
+		}
+
+		if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
+			return;
+		}
+
+		const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+
+		if (children.length !== 1) {
+			console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
+		}
+
+		if (this.__isBusy) {
+			return children[0].querySelector(".busy-indicator-wrapper > :not([busy-indicator-before-span]):not(.busy-indicator-overlay):not(.busy-indicator-busy-area)");
+		}
+
+		return children[0];
+	};
+};
+
+const enrichBusyIndicatorSettings = UI5Element => {
+	enrichBusyIndicatorMetadata(UI5Element);
+	enrichBusyIndicatorMethods(UI5Element.prototype);
+};
+
+const OpenUI5Enablement = {
+	enrichBusyIndicatorSettings,
+	wrapTemplateResultInBusyMarkup,
+	getBusyIndicatorStyles,
+};
+
+export default OpenUI5Enablement;
+
+registerFeature("OpenUI5Enablement", OpenUI5Enablement);