diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md index e3c692cbdbb0..e2b188743fbd 100644 --- a/docs/Public Module Imports.md +++ b/docs/Public Module Imports.md @@ -340,3 +340,26 @@ You can pass the parameters directly, as an object, or as a URL: 3) Pass a URL to a JSON file, containing the CSS Vars in its "_" property. Will be fetched on demand, not upon registration. `registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.json");` + +### 7. OpenUI5 integration + +```js +import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; +``` + +If your app uses both OpenUI5 and UI5 Web Components, UI5 Web Components can benefit +from OpenUI5 configuration and resources. + +When you import the above module: + 1. OpenUI5 configuration takes precedence over UI5 Web Components configuration + for all common entities (theme, language, RTL, etc...). In addition, changing the theme + in OpenUI5 will also change the theme in UI5 Web Components. + 2. Fonts will not be loaded twice (just once by OpenUI5, and reused). + 3. Locale Data assets will not be fetched twice (just once by OpenUI5, and reused). + +Therefore, if you intend to run both frameworks in the same browser window, +it is highly recommended to enable OpenUI5 support and benefit from these optimizations. + +*Note:* In general the order in which OpenUI5 and UI5 Web Components are loaded does not matter. +However, if your app needs to support Internet Explorer 11, either load OpenUI5 first, or load +UI5 Web Components deferred. diff --git a/docs/dev/Developing Web Components.md b/docs/dev/Developing Web Components.md index f1e24811a6d6..1c0341da62d3 100644 --- a/docs/dev/Developing Web Components.md +++ b/docs/dev/Developing Web Components.md @@ -59,9 +59,8 @@ class Demo extends UI5Element { return DemoCss; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("my-ui5-web-components"); - super.define(...params); } } @@ -374,9 +373,8 @@ class Demo extends UI5Element { return DemoCss; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("my-ui5-web-components"); - super.define(...params); } } @@ -385,7 +383,7 @@ Demo.define(); export default Demo; ``` -Please note that here we override the `define` method of `UI5Element` in order to ensure that i18n resources have been fetched +Please note that here we use the `onDefine` method of `UI5Element` in order to ensure that i18n resources have been fetched before the web component has been defined. The used namespace for resource registration (in this example `my-ui5-web-components`) is the `name` property of your `package.json` file. diff --git a/packages/base/bundle.esm.js b/packages/base/bundle.esm.js index e93f9cedbacb..923936cc23b2 100644 --- a/packages/base/bundle.esm.js +++ b/packages/base/bundle.esm.js @@ -7,6 +7,7 @@ import "./dist/features/calendar/Persian.js"; // ESM bundle targets Edge + browsers with native support import "./dist/features/browsersupport/Edge.js"; +import "./dist/features/OpenUI5Support.js"; // Test components import "./dist/test-resources/elements/Generic.js"; diff --git a/packages/base/src/FontFace.js b/packages/base/src/FontFace.js index dcff68f699bf..0f45c3d67354 100644 --- a/packages/base/src/FontFace.js +++ b/packages/base/src/FontFace.js @@ -2,6 +2,7 @@ * CSS font face used for the texts provided by SAP. */ import createStyleInHead from "./util/createStyleInHead.js"; +import { getFeature } from "./FeaturesRegistry.js"; /* CDN Locations */ const font72RegularWoff = `https://ui5.sap.com/sdk/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff?ui5-webcomponents`; @@ -60,6 +61,12 @@ const insertFontFace = () => { return; } + // If OpenUI5 is found, let it set the font + const OpenUI5Support = getFeature("OpenUI5Support"); + if (OpenUI5Support && OpenUI5Support.isLoaded()) { + return; + } + createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" }); }; diff --git a/packages/base/src/InitialConfiguration.js b/packages/base/src/InitialConfiguration.js index 9a458ba79128..4306de7310c2 100644 --- a/packages/base/src/InitialConfiguration.js +++ b/packages/base/src/InitialConfiguration.js @@ -1,6 +1,9 @@ +import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js"; +import { getFeature } from "./FeaturesRegistry.js"; + let initialized = false; -const initialConfig = { +let initialConfig = { animationMode: "full", theme: "sap_fiori_3", rtl: null, @@ -50,8 +53,6 @@ const booleanMapping = new Map(); booleanMapping.set("true", true); booleanMapping.set("false", false); -let runtimeConfig = {}; - const parseConfigurationScript = () => { const configScript = document.querySelector("[data-ui5-config]") || document.querySelector("[data-id='sap-ui-config']"); // for backward compatibility @@ -65,7 +66,7 @@ const parseConfigurationScript = () => { } if (configJSON) { - runtimeConfig = Object.assign({}, configJSON); + initialConfig = merge(initialConfig, configJSON); } } }; @@ -86,24 +87,34 @@ const parseURLParameters = () => { value = booleanMapping.get(lowerCaseValue); } - runtimeConfig[param] = value; + initialConfig[param] = value; }); }; -const applyConfigurations = () => { - Object.keys(runtimeConfig).forEach(key => { - initialConfig[key] = runtimeConfig[key]; - }); +const applyOpenUI5Configuration = () => { + const OpenUI5Support = getFeature("OpenUI5Support"); + if (!OpenUI5Support || !OpenUI5Support.isLoaded()) { + return; + } + + const OpenUI5Config = OpenUI5Support.getConfigurationSettingsObject(); + initialConfig = merge(initialConfig, OpenUI5Config); }; + const initConfiguration = () => { if (initialized) { return; } + // 1. Lowest priority - configuration script parseConfigurationScript(); + + // 2. URL parameters overwrite configuration script parameters parseURLParameters(); - applyConfigurations(); + + // 3. If OpenUI5 is detected, it has the highest priority + applyOpenUI5Configuration(); initialized = true; }; diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js index ab65784b3a23..eab9a833ee2e 100644 --- a/packages/base/src/UI5Element.js +++ b/packages/base/src/UI5Element.js @@ -800,6 +800,11 @@ class UI5Element extends HTMLElement { */ static async define() { await boot(); + + if (this.onDefine) { + await this.onDefine(); + } + const tag = this.getMetadata().getTag(); const definedLocally = DefinitionsSet.has(tag); diff --git a/packages/base/src/boot.js b/packages/base/src/boot.js index 32b1b8423d33..b2f436e7b259 100644 --- a/packages/base/src/boot.js +++ b/packages/base/src/boot.js @@ -3,8 +3,10 @@ import insertFontFace from "./FontFace.js"; import { getTheme } from "./config/Theme.js"; import { _applyTheme } from "./Theming.js"; import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js"; +import { getFeature } from "./FeaturesRegistry.js"; let bootPromise; +const OpenUI5Support = getFeature("OpenUI5Support"); const boot = () => { if (bootPromise) { @@ -12,8 +14,13 @@ const boot = () => { } bootPromise = new Promise(async resolve => { + if (OpenUI5Support) { + await OpenUI5Support.init(); + } + await whenDOMReady(); await _applyTheme(getTheme()); + OpenUI5Support && OpenUI5Support.attachListeners(); insertFontFace(); await whenPolyfillLoaded(); resolve(); diff --git a/packages/base/src/config/AnimationMode.js b/packages/base/src/config/AnimationMode.js index 18837bf029ce..071f3aef5a03 100644 --- a/packages/base/src/config/AnimationMode.js +++ b/packages/base/src/config/AnimationMode.js @@ -1,8 +1,12 @@ import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js"; -const animationMode = getConfiguredAnimationMode(); +let animationMode; const getAnimationMode = () => { + if (animationMode === undefined) { + animationMode = getConfiguredAnimationMode(); + } + return animationMode; }; diff --git a/packages/base/src/config/CalendarType.js b/packages/base/src/config/CalendarType.js index 4a0ef93f9d50..8ff6a4be22a4 100644 --- a/packages/base/src/config/CalendarType.js +++ b/packages/base/src/config/CalendarType.js @@ -1,9 +1,13 @@ import CalendarType from "@ui5/webcomponents-utils/dist/sap/ui/core/CalendarType.js"; import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js"; -const calendarType = getConfiguredCalendarType(); +let calendarType; const getCalendarType = () => { + if (calendarType === undefined) { + calendarType = getConfiguredCalendarType(); + } + if (calendarType) { const type = Object.keys(CalendarType).find(calType => calType === calendarType); diff --git a/packages/base/src/config/FormatSettings.js b/packages/base/src/config/FormatSettings.js index 88edf36e1da8..39a591eec8b4 100644 --- a/packages/base/src/config/FormatSettings.js +++ b/packages/base/src/config/FormatSettings.js @@ -1,8 +1,12 @@ import { getFormatSettings } from "../InitialConfiguration.js"; -const formatSettings = getFormatSettings(); +let formatSettings; const getFirstDayOfWeek = () => { + if (formatSettings === undefined) { + formatSettings = getFormatSettings(); + } + return formatSettings.firstDayOfWeek; }; diff --git a/packages/base/src/config/Language.js b/packages/base/src/config/Language.js index e544cd0067a9..99629a2379ac 100644 --- a/packages/base/src/config/Language.js +++ b/packages/base/src/config/Language.js @@ -1,8 +1,11 @@ import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js"; -const language = getConfiguredLanguage(); +let language; const getLanguage = () => { + if (language === undefined) { + language = getConfiguredLanguage(); + } return language; }; diff --git a/packages/base/src/config/NoConflict.js b/packages/base/src/config/NoConflict.js index fe4177f58c82..de48ff057a1e 100644 --- a/packages/base/src/config/NoConflict.js +++ b/packages/base/src/config/NoConflict.js @@ -9,24 +9,31 @@ const shouldFireOriginalEvent = eventName => { return excludeList.includes(eventName); }; -let noConflict = getConfiguredNoConflict(); +let noConflict; const shouldNotFireOriginalEvent = eventName => { - return !(noConflict.events && noConflict.events.includes && noConflict.events.includes(eventName)); + const nc = getNoConflict(); + return !(nc.events && nc.events.includes && nc.events.includes(eventName)); }; const getNoConflict = () => { + if (noConflict === undefined) { + noConflict = getConfiguredNoConflict(); + } + return noConflict; }; const skipOriginalEvent = eventName => { + const nc = getNoConflict(); + // Always fire these events if (shouldFireOriginalEvent(eventName)) { return false; } // Read from the configuration - if (noConflict === true) { + if (nc === true) { return true; } diff --git a/packages/base/src/config/Theme.js b/packages/base/src/config/Theme.js index a38160d8e818..b44bdf736d14 100644 --- a/packages/base/src/config/Theme.js +++ b/packages/base/src/config/Theme.js @@ -1,9 +1,13 @@ import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js"; import { _applyTheme } from "../Theming.js"; -let theme = getConfiguredTheme(); +let theme; const getTheme = () => { + if (theme === undefined) { + theme = getConfiguredTheme(); + } + return theme; }; diff --git a/packages/base/src/features/OpenUI5Support.js b/packages/base/src/features/OpenUI5Support.js new file mode 100644 index 000000000000..7c9f26530efc --- /dev/null +++ b/packages/base/src/features/OpenUI5Support.js @@ -0,0 +1,76 @@ +import { registerFeature } from "../FeaturesRegistry.js"; +import { setTheme } from "../config/Theme.js"; + +const sap = window.sap; +const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore(); + +const isLoaded = () => { + return !!core; +}; + +const init = () => { + if (!core) { + return Promise.resolve(); + } + + return new Promise(resolve => { + core.attachInit(() => { + sap.ui.require(["sap/ui/core/LocaleData"], resolve); + }); + }); +}; + +const getConfigurationSettingsObject = () => { + if (!core) { + return; + } + + const config = core.getConfiguration(); + const LocaleData = sap.ui.require("sap/ui/core/LocaleData"); + + return { + animationMode: config.getAnimationMode(), + language: config.getLanguage(), + theme: config.getTheme(), + rtl: config.getRTL(), + calendarType: config.getCalendarType(), + formatSettings: { + firstDayOfWeek: LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek(), + }, + }; +}; + +const getLocaleDataObject = () => { + if (!core) { + return; + } + + const config = core.getConfiguration(); + const LocaleData = sap.ui.require("sap/ui/core/LocaleData"); + return LocaleData.getInstance(config.getLocale()).mData; +}; + +const listenForThemeChange = () => { + const config = core.getConfiguration(); + core.attachThemeChanged(async () => { + await setTheme(config.getTheme()); + }); +}; + +const attachListeners = () => { + if (!core) { + return; + } + + listenForThemeChange(); +}; + +const OpenUI5Support = { + isLoaded, + init, + getConfigurationSettingsObject, + getLocaleDataObject, + attachListeners, +}; + +registerFeature("OpenUI5Support", OpenUI5Support); diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js index 86940c2a785e..63cb49e21b71 100644 --- a/packages/fiori/src/ShellBar.js +++ b/packages/fiori/src/ShellBar.js @@ -867,15 +867,13 @@ class ShellBar extends UI5Element { return getRTL() ? "rtl" : undefined; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), List.define(), Popover.define(), StandardListItem.define(), ]); - - super.define(...params); } } diff --git a/packages/main/bundle.es5.js b/packages/main/bundle.es5.js index 0ce8e2d288e4..5c0d28c746be 100644 --- a/packages/main/bundle.es5.js +++ b/packages/main/bundle.es5.js @@ -7,6 +7,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.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" const configuration = { getAnimationMode, @@ -14,6 +15,7 @@ const configuration = { setTheme, setNoConflict, getRTL, + getFirstDayOfWeek, }; export { configuration, diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index be751e27327e..6c2464f75867 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -1,5 +1,9 @@ // import "@ui5/webcomponents-base/test/dev-helpers/ExternalThemePresent.js"; +// OpenUI5 integration +import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; + +// Calendars import "@ui5/webcomponents-base/dist/features/calendar/Buddhist.js"; import "@ui5/webcomponents-base/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-base/dist/features/calendar/Japanese.js"; @@ -75,6 +79,7 @@ import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationM import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.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" window["sap-ui-webcomponents-bundle"] = { configuration : { @@ -83,6 +88,7 @@ window["sap-ui-webcomponents-bundle"] = { setTheme, setNoConflict, getRTL, + getFirstDayOfWeek, }, getIconNames, }; diff --git a/packages/main/src/Avatar.js b/packages/main/src/Avatar.js index 35d8976c7a36..02d6babf6b25 100644 --- a/packages/main/src/Avatar.js +++ b/packages/main/src/Avatar.js @@ -139,7 +139,6 @@ const metadata = { type: String, defaultValue: AvatarBackgroundColor.Accent6, }, - }, slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ { }, @@ -187,9 +186,8 @@ class Avatar extends UI5Element { return AvatarTemplate; } - static async define(...params) { + static async onDefine() { await Icon.define(); - super.define(...params); } get validInitials() { diff --git a/packages/main/src/Badge.js b/packages/main/src/Badge.js index 2d0d7542e150..3855ee172e0d 100644 --- a/packages/main/src/Badge.js +++ b/packages/main/src/Badge.js @@ -56,7 +56,6 @@ const metadata = { icon: { type: HTMLElement, }, - }, }; @@ -109,10 +108,8 @@ class Badge extends UI5Element { return badgeCss; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } onBeforeRendering() { diff --git a/packages/main/src/BusyIndicator.js b/packages/main/src/BusyIndicator.js index 24c80f757d37..681e8814d02b 100644 --- a/packages/main/src/BusyIndicator.js +++ b/packages/main/src/BusyIndicator.js @@ -100,10 +100,8 @@ class BusyIndicator extends UI5Element { return BusyIndicatorTemplate; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } get ariaTitle() { diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js index 1ea5d88dfbbc..8c830102c78e 100644 --- a/packages/main/src/Button.js +++ b/packages/main/src/Button.js @@ -333,13 +333,11 @@ class Button extends UI5Element { return this.nonFocusable ? "-1" : this._tabIndex; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js index 6ced24c7d6a0..fb1fe33fd0b9 100644 --- a/packages/main/src/Calendar.js +++ b/packages/main/src/Calendar.js @@ -680,7 +680,7 @@ class Calendar extends UI5Element { }; } - static async define(...params) { + static async onDefine() { await Promise.all([ fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()), CalendarHeader.define(), @@ -688,8 +688,6 @@ class Calendar extends UI5Element { MonthPicker.define(), YearPicker.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js index 42279dd95cf1..b5f5dd8fc076 100644 --- a/packages/main/src/CalendarHeader.js +++ b/packages/main/src/CalendarHeader.js @@ -125,13 +125,11 @@ class CalendarHeader extends UI5Element { return getRTL() ? "rtl" : undefined; } - static async define(...params) { + static async onDefine() { await Promise.all([ await Button.define(), await Icon.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/Card.js b/packages/main/src/Card.js index d9d60754573e..67f8d2bad15e 100644 --- a/packages/main/src/Card.js +++ b/packages/main/src/Card.js @@ -219,13 +219,11 @@ class Card extends UI5Element { return !!this.avatar.length; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } _headerClick() { diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js index d27998c9373e..d4beaa0074d0 100644 --- a/packages/main/src/Carousel.js +++ b/packages/main/src/Carousel.js @@ -297,11 +297,10 @@ class Carousel extends UI5Element { return this.selectedIndex + 1; } - static async define(...params) { + static async onDefine() { await Promise.all([ fetchI18nBundle("@ui5/webcomponents"), ]); - super.define(...params); } } diff --git a/packages/main/src/CheckBox.js b/packages/main/src/CheckBox.js index b865098d5c6c..2138f77e78b8 100644 --- a/packages/main/src/CheckBox.js +++ b/packages/main/src/CheckBox.js @@ -308,14 +308,12 @@ class CheckBox extends UI5Element { return getRTL() ? "rtl" : undefined; } - static async define(...params) { + static async onDefine() { await Promise.all([ Label.define(), Icon.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js index b51bed8ec0bd..2eaa5fc018bd 100644 --- a/packages/main/src/ComboBox.js +++ b/packages/main/src/ComboBox.js @@ -465,7 +465,7 @@ class ComboBox extends UI5Element { return !this.readonly; } - static async define(...params) { + static async onDefine() { await Promise.all([ ComboBoxItem.define(), Icon.define(), @@ -474,8 +474,6 @@ class ComboBox extends UI5Element { BusyIndicator.define(), StandardListItem.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/ComboBoxItem.js b/packages/main/src/ComboBoxItem.js index 3b3a54e455fa..cb27705f0e45 100644 --- a/packages/main/src/ComboBoxItem.js +++ b/packages/main/src/ComboBoxItem.js @@ -35,10 +35,6 @@ class ComboBoxItem extends UI5Element { static get template() { return ComboBoxItemTemplate; } - - static async define(...params) { - super.define(...params); - } } ComboBoxItem.define(); diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 15e9be65f936..44d0efac2e3f 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -705,7 +705,7 @@ class DatePicker extends UI5Element { return InputType.Text; } - static async define(...params) { + static async onDefine() { await Promise.all([ fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()), Icon.define(), @@ -714,8 +714,6 @@ class DatePicker extends UI5Element { Input.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js index 498b2d330bb0..8d00b6aaa8f2 100644 --- a/packages/main/src/DayPicker.js +++ b/packages/main/src/DayPicker.js @@ -665,12 +665,10 @@ class DayPicker extends UI5Element { }; } - static async define(...params) { + static async onDefine() { await Promise.all([ fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()), ]); - - super.define(...params); } } diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js index 24328185daea..cc48af40ec8a 100644 --- a/packages/main/src/Icon.js +++ b/packages/main/src/Icon.js @@ -121,11 +121,9 @@ class Icon extends UI5Element { return iconCss; } - static async define(...params) { + static async onDefine() { this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css) await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } static createGlobalStyle() { diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index e15db1ecf998..3279ca68a2a1 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -700,10 +700,8 @@ class Input extends UI5Element { return this.i18nBundle.getText(INPUT_SUGGESTIONS); } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } } diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js index 27670a06b7ac..3c7cc75bd7a0 100644 --- a/packages/main/src/Link.js +++ b/packages/main/src/Link.js @@ -229,10 +229,8 @@ class Link extends UI5Element { return this.href.length > 0 ? this.href : undefined; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } } diff --git a/packages/main/src/MessageStrip.js b/packages/main/src/MessageStrip.js index f60ab269198c..ab83ddc78baf 100644 --- a/packages/main/src/MessageStrip.js +++ b/packages/main/src/MessageStrip.js @@ -175,12 +175,10 @@ class MessageStrip extends UI5Element { } } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); await Icon.define(); - - super.define(...params); } static typeClassesMappings() { diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 7dc04a3bea5c..1a0953c31c27 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -645,7 +645,7 @@ class MultiComboBox extends UI5Element { return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } - static async define(...params) { + static async onDefine() { await Promise.all([ Tokenizer.define(), Token.define(), @@ -656,8 +656,6 @@ class MultiComboBox extends UI5Element { ToggleButton, fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js index 30d50bfbca7d..5067a5d3d967 100644 --- a/packages/main/src/Panel.js +++ b/packages/main/src/Panel.js @@ -365,13 +365,11 @@ class Panel extends UI5Element { }; } - static async define(...params) { + static async onDefine() { await Promise.all([ fetchI18nBundle("@ui5/webcomponents"), Button.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js index 216127145e2a..d772aa58d3e4 100644 --- a/packages/main/src/RadioButton.js +++ b/packages/main/src/RadioButton.js @@ -221,13 +221,11 @@ class RadioButton extends UI5Element { return radioButtonCss; } - static async define(...params) { + static async onDefine() { await Promise.all([ Label.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } onBeforeRendering() { diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js index 12ba560caf6a..fabc7446ece5 100644 --- a/packages/main/src/ResponsivePopover.js +++ b/packages/main/src/ResponsivePopover.js @@ -80,10 +80,8 @@ class ResponsivePopover extends Popover { return ResponsivePopoverTemplate; } - static async define(...params) { + static async onDefine() { await Dialog.define(); - - super.define(...params); } /** diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index b79dfc67d98c..96db0625a155 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -426,7 +426,7 @@ class Select extends UI5Element { return getRTL() ? "rtl" : "ltr"; } - static async define(...params) { + static async onDefine() { await Promise.all([ Label.define(), ResponsivePopover.define(), @@ -434,8 +434,6 @@ class Select extends UI5Element { StandardListItem.define(), Icon.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js index 2e54ae300302..d1def9154e3e 100644 --- a/packages/main/src/StandardListItem.js +++ b/packages/main/src/StandardListItem.js @@ -157,10 +157,8 @@ class StandardListItem extends ListItem { return (this.icon && this.iconEnd); } - static async define(...params) { + static async onDefine() { await Icon.define(); - - super.define(...params); } } diff --git a/packages/main/src/Switch.js b/packages/main/src/Switch.js index 2b84e73a4f18..c2a1917927ac 100644 --- a/packages/main/src/Switch.js +++ b/packages/main/src/Switch.js @@ -233,13 +233,11 @@ class Switch extends UI5Element { return this.checked ? this.accessibilityOnText : this.accessibilityOffText; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 3bc4b61ac9df..be56246df98c 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -108,7 +108,6 @@ const metadata = { }, }, events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ { - }, }; @@ -142,10 +141,8 @@ class Tab extends UI5Element { return css; } - static async define(...params) { + static async onDefine() { await Icon.define(); - - super.define(...params); } get isSeparator() { diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index dfe0576b7aea..d484babb8817 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -109,7 +109,6 @@ const metadata = { type: Boolean, noAttribute: true, }, - }, events: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ { @@ -436,7 +435,7 @@ class TabContainer extends UI5Element { return getRTL() ? "rtl" : undefined; } - static async define(...params) { + static async onDefine() { await Promise.all([ Button.define(), CustomListItem.define(), @@ -445,8 +444,6 @@ class TabContainer extends UI5Element { ResponsivePopover.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js index 58568d1e1e63..86dc9ccb6196 100644 --- a/packages/main/src/TextArea.js +++ b/packages/main/src/TextArea.js @@ -403,10 +403,8 @@ class TextArea extends UI5Element { return this.valueState === "Error" ? "true" : undefined; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } } diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js index fe853d727791..da0450ac9be7 100644 --- a/packages/main/src/TimelineItem.js +++ b/packages/main/src/TimelineItem.js @@ -148,13 +148,11 @@ class TimelineItem extends UI5Element { return getRTL() ? "rtl" : undefined; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), Link.define(), ]); - - super.define(...params); } } diff --git a/packages/main/src/Token.js b/packages/main/src/Token.js index 0e31edad34e0..12d22cc464a7 100644 --- a/packages/main/src/Token.js +++ b/packages/main/src/Token.js @@ -166,13 +166,11 @@ class Token extends UI5Element { return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel"; } - static async define(...params) { + static async onDefine() { await Promise.all([ Icon.define(), fetchI18nBundle("@ui5/webcomponents"), ]); - - super.define(...params); } } diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index 77ba63660302..164d23bf7e0f 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -217,10 +217,8 @@ class Tokenizer extends UI5Element { }; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("@ui5/webcomponents"); - - super.define(...params); } } diff --git a/packages/main/test/pages/OpenUI5.html b/packages/main/test/pages/OpenUI5.html new file mode 100644 index 000000000000..080db7b23e42 --- /dev/null +++ b/packages/main/test/pages/OpenUI5.html @@ -0,0 +1,51 @@ + + + + + + + Button + + + + + + + + + + + + + +Web Component + + +
+ + + diff --git a/packages/tools/lib/init-package/resources/src/Demo.js b/packages/tools/lib/init-package/resources/src/Demo.js index 33ddadcbafec..b763bb1d90e2 100644 --- a/packages/tools/lib/init-package/resources/src/Demo.js +++ b/packages/tools/lib/init-package/resources/src/Demo.js @@ -46,9 +46,8 @@ class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element { return INIT_PACKAGE_VAR_CLASS_NAMECss; } - static async define(...params) { + static async onDefine() { await fetchI18nBundle("INIT_PACKAGE_VAR_NAME"); - super.define(...params); } }