feat(framework): Add API to subscribe/unsubscribe for theme loaded (#2303)

Author: vladitasev

packages/base/src/Theming.js

@@ -1,3 +1,4 @@
 import { addCustomCSS } from "./theming/CustomStyle.js";
+import { attachThemeLoaded, detachThemeLoaded } from "./theming/ThemeLoaded.js";
 
-export { addCustomCSS }; // eslint-disable-line
+export { addCustomCSS, attachThemeLoaded, detachThemeLoaded };

packages/base/src/theming/ThemeLoaded.js

@@ -0,0 +1,22 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const THEME_LOADED = "themeLoaded";
+
+const attachThemeLoaded = listener => {
+	eventProvider.attachEvent(THEME_LOADED, listener);
+};
+
+const detachThemeLoaded = listener => {
+	eventProvider.detachEvent(THEME_LOADED, listener);
+};
+
+const fireThemeLoaded = theme => {
+	return eventProvider.fireEvent(THEME_LOADED, theme);
+};
+
+export {
+	attachThemeLoaded,
+	detachThemeLoaded,
+	fireThemeLoaded,
+};

packages/base/src/theming/applyTheme.js

@@ -2,6 +2,7 @@ import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "..
 import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { ponyfillNeeded, runPonyfill } from "./CSSVarsPonyfill.js";
+import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 
 const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
@@ -76,6 +77,8 @@ const applyTheme = async theme => {
 	if (ponyfillNeeded()) {
 		runPonyfill();
 	}
+
+	fireThemeLoaded(theme);
 };
 
 export default applyTheme;

packages/main/bundle.esm.js

@@ -1,6 +1,11 @@
 import { getAssetsPath, setAssetsPath } from "@ui5/webcomponents-base/dist/config/AssetsPath.js";
 // setAssetsPath("/my-resources/");
 
+import { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "@ui5/webcomponents-base/dist/Theming";
+attachThemeLoaded(theme => {
+	console.log("Theme load complete: ", theme);
+});
+
 // OpenUI5 integration
 import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";
 
@@ -99,7 +104,6 @@ import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSet
 import { getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/dist/Theming";
 
 const testAssets = {
 	configuration : {
@@ -119,6 +123,8 @@ const testAssets = {
 	applyDirection,
 	ResizeHandler,
 	addCustomCSS,
+	attachThemeLoaded,
+	detachThemeLoaded,
 	getIconNames,
 };