@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.0.0-389bdbabc to 0.0.0-5f8ce9393

bundle.esm.js

@@ -10,2 +10,3 @@ import { registerThemeProperties } from "./dist/AssetRegistry.js";
 import "./dist/features/browsersupport/Edge.js";
+import "./dist/features/OpenUI5Support.js";
 
@@ -12,0 +13,0 @@ // Test components

dist/asset-registries/LocaleData.js

 import { registerModuleContent } from "../ResourceLoaderOverrides.js";
 import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
+const OpenUI5Support = getFeature("OpenUI5Support");
+
 const supportedLocales = ["ar", "ar_EG", "ar_SA", "bg", "ca", "cs", "da", "de", "de_AT", "de_CH", "el", "el_CY", "en", "en_AU", "en_GB", "en_HK", "en_IE", "en_IN", "en_NZ", "en_PG", "en_SG", "en_ZA", "es", "es_AR", "es_BO", "es_CL", "es_CO", "es_MX", "es_PE", "es_UY", "es_VE", "et", "fa", "fi", "fr", "fr_BE", "fr_CA", "fr_CH", "fr_LU", "he", "hi", "hr", "hu", "id", "it", "it_CH", "ja", "kk", "ko", "lt", "lv", "ms", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"];
@@ -66,5 +69,9 @@
 
-	const cldrObj = cldrData[localeId];
+	let cldrObj = cldrData[localeId];
 	const url = cldrUrls[localeId];
 
+	if (!cldrObj && OpenUI5Support) {
+		cldrObj = OpenUI5Support.getLocaleDataObject();
+	}
+
 	if (cldrObj) {
@@ -71,0 +78,0 @@ // inlined from build or fetched independently

dist/boot.js

@@ -6,4 +6,6 @@ import whenDOMReady from "./util/whenDOMReady.js";
 import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
+import { getFeature } from "./FeaturesRegistry.js";
 
 let bootPromise;
+const OpenUI5Support = getFeature("OpenUI5Support");
 
@@ -16,4 +18,9 @@ const boot = () => {
 	bootPromise = new Promise(async resolve => {
+		if (OpenUI5Support) {
+			await OpenUI5Support.init();
+		}
+
 		await whenDOMReady();
 		await _applyTheme(getTheme());
+		OpenUI5Support && OpenUI5Support.attachListeners();
 		insertFontFace();
@@ -20,0 +27,0 @@ await whenPolyfillLoaded();

dist/config/AnimationMode.js

 import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
 
-const animationMode = getConfiguredAnimationMode();
+let animationMode;
 
 const getAnimationMode = () => {
+	if (animationMode === undefined) {
+		animationMode = getConfiguredAnimationMode();
+	}
+
 	return animationMode;
@@ -7,0 +11,0 @@ };

dist/config/CalendarType.js

 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) {
@@ -8,0 +12,0 @@ const type = Object.keys(CalendarType).find(calType => calType === calendarType);

dist/config/FormatSettings.js

 import { getFormatSettings } from "../InitialConfiguration.js";
 
-const formatSettings = getFormatSettings();
+let formatSettings;
 
 const getFirstDayOfWeek = () => {
+	if (formatSettings === undefined) {
+		formatSettings = getFormatSettings();
+	}
+
 	return formatSettings.firstDayOfWeek;
@@ -7,0 +11,0 @@ };

dist/config/Language.js

 import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
 
-const language = getConfiguredLanguage();
+let language;
 
 const getLanguage = () => {
+	if (language === undefined) {
+		language = getConfiguredLanguage();
+	}
 	return language;
@@ -7,0 +10,0 @@ };

dist/config/NoConflict.js

@@ -12,9 +12,14 @@ import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
 
-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;
@@ -24,2 +29,4 @@ };
 const skipOriginalEvent = eventName => {
+	const nc = getNoConflict();
+
 	// Always fire these events
@@ -31,3 +38,3 @@ if (shouldFireOriginalEvent(eventName)) {
 	// Read from the configuration
-	if (noConflict === true) {
+	if (nc === true) {
 		return true;
@@ -34,0 +41,0 @@ }

dist/config/Theme.js

 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;
@@ -8,0 +12,0 @@ };

dist/delegate/ItemNavigation.js

@@ -24,3 +24,4 @@ import RenderScheduler from "../RenderScheduler.js";
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-
+		this.hasNextPage = true; // used in Paging mode and controlled from the rootWebComponent
+		this.hasPrevPage = true; // used in Paging mode and controlled from the rootWebComponent
 		const navigationMode = options.navigationMode;
@@ -217,4 +218,6 @@ const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
 		const items = this._getItems();
-		const rowIndex = this.currentIndex - items.length;
+		const offset = this.currentIndex - items.length;
+
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = 0;
 			return;
@@ -225,7 +228,7 @@ }
 			this._handleNextPage();
+		} else {
+			this.currentIndex = items.length - 1;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, {
-			start: false, end: true, offset: this.currentIndex, rowIndex,
-		});
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset });
 	}
@@ -235,6 +238,6 @@
 		const items = this._getItems();
-		const rowIndex = this.currentIndex + this.rowSize;
+		const offset = this.currentIndex + this.rowSize;
 
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
-			this.currentIndex = items.length + this.currentIndex;
+			this.currentIndex = items.length - 1;
 			return;
@@ -245,7 +248,7 @@ }
 			this._handlePrevPage();
+		} else {
+			this.currentIndex = 0;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, {
-			start: true, end: false, offset: this.currentIndex, rowIndex,
-		});
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset });
 	}
@@ -266,2 +269,3 @@
 		this.fireEvent(ItemNavigation.PAGE_TOP);
+		const items = this._getItems();
 
@@ -271,3 +275,3 @@ if (!this.hasPrevPage) {
 		} else {
-			this.currentIndex = 41;
+			this.currentIndex = (this.pageSize || items.length) - 1;
 		}
@@ -274,0 +278,0 @@ }

dist/delegate/ScrollEnablement.js

@@ -5,2 +5,3 @@ import EventProvider from "../EventProvider.js";
 const scrollEventName = "scroll";
+const touchEndEventName = "touchend";
 
@@ -12,2 +13,3 @@ class ScrollEnablement extends EventProvider {
 		containerComponent.addEventListener("touchmove", this.ontouchmove.bind(this), { passive: true });
+		containerComponent.addEventListener("touchend", this.ontouchend.bind(this), { passive: true });
 	}
@@ -75,3 +77,6 @@
 
-		this.fireEvent(scrollEventName, {});
+		this.fireEvent(scrollEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
 
@@ -81,4 +86,25 @@ this._prevDragX = dragX;
 	}
+
+	ontouchend(event) {
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const dragX = event.pageX;
+		const dragY = event.pageY;
+
+		container.scrollLeft += this._prevDragX - dragX;
+		container.scrollTop += this._prevDragY - dragY;
+
+		this.fireEvent(touchEndEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+	}
 }
 
 export default ScrollEnablement;

dist/FontFace.js

@@ -5,2 +5,3 @@ /**
 import createStyleInHead from "./util/createStyleInHead.js";
+import { getFeature } from "./FeaturesRegistry.js";
 
@@ -64,2 +65,8 @@ /* CDN Locations */
 
+	// If OpenUI5 is found, let it set the font
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support && OpenUI5Support.isLoaded()) {
+		return;
+	}
+
 	createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
@@ -66,0 +73,0 @@ };

dist/InitialConfiguration.js

@@ -0,4 +1,7 @@
+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",
@@ -53,4 +56,2 @@ theme: "sap_fiori_3",
 
-let runtimeConfig = {};
-
 const parseConfigurationScript = () => {
@@ -69,3 +70,3 @@ const configScript = document.querySelector("[data-ui5-config]") || document.querySelector("[data-id='sap-ui-config']"); // for backward compatibility
 		if (configJSON) {
-			runtimeConfig = Object.assign({}, configJSON);
+			initialConfig = merge(initialConfig, configJSON);
 		}
@@ -91,12 +92,17 @@ }
 
-		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 = () => {
@@ -107,6 +113,11 @@ if (initialized) {
 
+	// 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;
@@ -113,0 +124,0 @@ };

dist/StaticArea.js

@@ -24,2 +24,6 @@ const getStaticAreaInstance = () => {
 
+	get isUI5Element() {
+		return true;
+	}
+
 	destroy() {
@@ -31,3 +35,5 @@ const staticAreaDomRef = document.querySelector(this.tagName.toLowerCase());
 
-customElements.define("ui5-static-area", StaticAreaElement);
+if (!customElements.get("ui5-static-area")) {
+	customElements.define("ui5-static-area", StaticAreaElement);
+}
 
@@ -34,0 +40,0 @@ export {

dist/StaticAreaItem.js

@@ -52,2 +52,19 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 	 * @protected
+	 */
+	_updateContentDensity(isCompact) {
+		if (!this.staticAreaItemDomRef) {
+			return;
+		}
+
+		if (isCompact) {
+			this.staticAreaItemDomRef.classList.add("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.add("ui5-content-density-compact");
+		} else {
+			this.staticAreaItemDomRef.classList.remove("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.remove("ui5-content-density-compact");
+		}
+	}
+
+	/**
+	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.
@@ -64,6 +81,12 @@ */
 	}
+
+	get isUI5Element() {
+		return true;
+	}
 }
 
-customElements.define("ui5-static-area-item", StaticAreaItemElement);
+if (!customElements.get("ui5-static-area-item")) {
+	customElements.define("ui5-static-area-item", StaticAreaItemElement);
+}
 
 export default StaticAreaItem;

dist/Theming.js

@@ -6,2 +6,3 @@ import { addCustomCSS, getCustomCSS } from "./theming/CustomStyle.js";
 const themeChangeCallbacks = [];
+let externalThemePresent = false;
 
@@ -18,2 +19,6 @@ const attachThemeChange = function attachThemeChange(callback) {
 	const registeredPackages = getRegisteredPackages();
+	if (externalThemePresent) {
+		registeredPackages.delete("@ui5/webcomponents-theme-base");
+	}
+
 	registeredPackages.forEach(async packageName => {
@@ -42,2 +47,6 @@ cssText = await getThemeProperties(packageName, theme);
 
+const setExternalThemePresent = value => {
+	externalThemePresent = value;
+};
+
 export {
@@ -48,2 +57,3 @@ attachThemeChange,
 	addCustomCSS,
+	setExternalThemePresent,
 };

dist/UI5Element.js

@@ -25,2 +25,3 @@ import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
 
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
 /**
@@ -594,2 +595,12 @@ * Base class for all UI5 Web Components
 
+	get isCompact() {
+		return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
+	}
+
+	updateStaticAreaItemContentDensity() {
+		if (this.staticAreaItem) {
+			this.staticAreaItem._updateContentDensity(this.isCompact);
+		}
+	}
+
 	/**
@@ -805,2 +816,7 @@ * Used to duck-type UI5 elements without using instanceof
 		await boot();
+
+		if (this.onDefine) {
+			await this.onDefine();
+		}
+
 		const tag = this.getMetadata().getTag();
@@ -807,0 +823,0 @@

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-389bdbabc",
+  "version": "0.0.0-5f8ce9393",
   "description": "UI5 Web Components: webcomponents.base",
@@ -23,6 +23,7 @@ "author": "SAP SE (https://www.sap.com)",
     "build": "nps build",
-    "test": "nps test"
+    "test": "nps test",
+    "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@ui5/webcomponents-utils": "0.0.0-389bdbabc",
+    "@ui5/webcomponents-utils": "0.0.0-5f8ce9393",
     "css-vars-ponyfill": "^2.1.2",
@@ -34,3 +35,3 @@ "lit-html": "^1.0.0",
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-389bdbabc",
+    "@ui5/webcomponents-tools": "0.0.0-5f8ce9393",
     "array-uniq": "^2.0.0",
@@ -37,0 +38,0 @@ "copy-and-watch": "^0.1.4",

src/asset-registries/LocaleData.js

 import { registerModuleContent } from "../ResourceLoaderOverrides.js";
 import { fetchJsonOnce } from "../util/FetchHelper.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
+const OpenUI5Support = getFeature("OpenUI5Support");
+
 const supportedLocales = ["ar", "ar_EG", "ar_SA", "bg", "ca", "cs", "da", "de", "de_AT", "de_CH", "el", "el_CY", "en", "en_AU", "en_GB", "en_HK", "en_IE", "en_IN", "en_NZ", "en_PG", "en_SG", "en_ZA", "es", "es_AR", "es_BO", "es_CL", "es_CO", "es_MX", "es_PE", "es_UY", "es_VE", "et", "fa", "fi", "fr", "fr_BE", "fr_CA", "fr_CH", "fr_LU", "he", "hi", "hr", "hu", "id", "it", "it_CH", "ja", "kk", "ko", "lt", "lv", "ms", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"];
@@ -66,5 +69,9 @@
 
-	const cldrObj = cldrData[localeId];
+	let cldrObj = cldrData[localeId];
 	const url = cldrUrls[localeId];
 
+	if (!cldrObj && OpenUI5Support) {
+		cldrObj = OpenUI5Support.getLocaleDataObject();
+	}
+
 	if (cldrObj) {
@@ -71,0 +78,0 @@ // inlined from build or fetched independently

src/boot.js

@@ -6,4 +6,6 @@ import whenDOMReady from "./util/whenDOMReady.js";
 import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
+import { getFeature } from "./FeaturesRegistry.js";
 
 let bootPromise;
+const OpenUI5Support = getFeature("OpenUI5Support");
 
@@ -16,4 +18,9 @@ const boot = () => {
 	bootPromise = new Promise(async resolve => {
+		if (OpenUI5Support) {
+			await OpenUI5Support.init();
+		}
+
 		await whenDOMReady();
 		await _applyTheme(getTheme());
+		OpenUI5Support && OpenUI5Support.attachListeners();
 		insertFontFace();
@@ -20,0 +27,0 @@ await whenPolyfillLoaded();

src/config/AnimationMode.js

 import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
 
-const animationMode = getConfiguredAnimationMode();
+let animationMode;
 
 const getAnimationMode = () => {
+	if (animationMode === undefined) {
+		animationMode = getConfiguredAnimationMode();
+	}
+
 	return animationMode;
@@ -7,0 +11,0 @@ };

src/config/CalendarType.js

 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) {
@@ -8,0 +12,0 @@ const type = Object.keys(CalendarType).find(calType => calType === calendarType);

src/config/FormatSettings.js

 import { getFormatSettings } from "../InitialConfiguration.js";
 
-const formatSettings = getFormatSettings();
+let formatSettings;
 
 const getFirstDayOfWeek = () => {
+	if (formatSettings === undefined) {
+		formatSettings = getFormatSettings();
+	}
+
 	return formatSettings.firstDayOfWeek;
@@ -7,0 +11,0 @@ };

src/config/Language.js

 import { getLanguage as getConfiguredLanguage } from "../InitialConfiguration.js";
 
-const language = getConfiguredLanguage();
+let language;
 
 const getLanguage = () => {
+	if (language === undefined) {
+		language = getConfiguredLanguage();
+	}
 	return language;
@@ -7,0 +10,0 @@ };

src/config/NoConflict.js

@@ -12,9 +12,14 @@ import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
 
-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;
@@ -24,2 +29,4 @@ };
 const skipOriginalEvent = eventName => {
+	const nc = getNoConflict();
+
 	// Always fire these events
@@ -31,3 +38,3 @@ if (shouldFireOriginalEvent(eventName)) {
 	// Read from the configuration
-	if (noConflict === true) {
+	if (nc === true) {
 		return true;
@@ -34,0 +41,0 @@ }

src/config/Theme.js

 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;
@@ -8,0 +12,0 @@ };

src/delegate/ItemNavigation.js

@@ -24,3 +24,4 @@ import RenderScheduler from "../RenderScheduler.js";
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-
+		this.hasNextPage = true; // used in Paging mode and controlled from the rootWebComponent
+		this.hasPrevPage = true; // used in Paging mode and controlled from the rootWebComponent
 		const navigationMode = options.navigationMode;
@@ -217,4 +218,6 @@ const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
 		const items = this._getItems();
-		const rowIndex = this.currentIndex - items.length;
+		const offset = this.currentIndex - items.length;
+
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = 0;
 			return;
@@ -225,7 +228,7 @@ }
 			this._handleNextPage();
+		} else {
+			this.currentIndex = items.length - 1;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, {
-			start: false, end: true, offset: this.currentIndex, rowIndex,
-		});
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset });
 	}
@@ -235,6 +238,6 @@
 		const items = this._getItems();
-		const rowIndex = this.currentIndex + this.rowSize;
+		const offset = this.currentIndex + this.rowSize;
 
 		if (this.behavior === ItemNavigationBehavior.Cyclic) {
-			this.currentIndex = items.length + this.currentIndex;
+			this.currentIndex = items.length - 1;
 			return;
@@ -245,7 +248,7 @@ }
 			this._handlePrevPage();
+		} else {
+			this.currentIndex = 0;
 		}
 
-		this.fireEvent(ItemNavigation.BORDER_REACH, {
-			start: true, end: false, offset: this.currentIndex, rowIndex,
-		});
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset });
 	}
@@ -266,2 +269,3 @@
 		this.fireEvent(ItemNavigation.PAGE_TOP);
+		const items = this._getItems();
 
@@ -271,3 +275,3 @@ if (!this.hasPrevPage) {
 		} else {
-			this.currentIndex = 41;
+			this.currentIndex = (this.pageSize || items.length) - 1;
 		}
@@ -274,0 +278,0 @@ }

src/delegate/ScrollEnablement.js

@@ -5,2 +5,3 @@ import EventProvider from "../EventProvider.js";
 const scrollEventName = "scroll";
+const touchEndEventName = "touchend";
 
@@ -12,2 +13,3 @@ class ScrollEnablement extends EventProvider {
 		containerComponent.addEventListener("touchmove", this.ontouchmove.bind(this), { passive: true });
+		containerComponent.addEventListener("touchend", this.ontouchend.bind(this), { passive: true });
 	}
@@ -75,3 +77,6 @@
 
-		this.fireEvent(scrollEventName, {});
+		this.fireEvent(scrollEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
 
@@ -81,4 +86,25 @@ this._prevDragX = dragX;
 	}
+
+	ontouchend(event) {
+		if (!this._canScroll) {
+			return;
+		}
+
+		const container = this._container;
+		const dragX = event.pageX;
+		const dragY = event.pageY;
+
+		container.scrollLeft += this._prevDragX - dragX;
+		container.scrollTop += this._prevDragY - dragY;
+
+		this.fireEvent(touchEndEventName, {
+			isLeft: dragX > this._prevDragX,
+			isRight: dragX < this._prevDragX,
+		});
+
+		this._prevDragX = dragX;
+		this._prevDragY = dragY;
+	}
 }
 
 export default ScrollEnablement;

src/FontFace.js

@@ -5,2 +5,3 @@ /**
 import createStyleInHead from "./util/createStyleInHead.js";
+import { getFeature } from "./FeaturesRegistry.js";
 
@@ -64,2 +65,8 @@ /* CDN Locations */
 
+	// If OpenUI5 is found, let it set the font
+	const OpenUI5Support = getFeature("OpenUI5Support");
+	if (OpenUI5Support && OpenUI5Support.isLoaded()) {
+		return;
+	}
+
 	createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
@@ -66,0 +73,0 @@ };

src/InitialConfiguration.js

@@ -0,4 +1,7 @@
+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",
@@ -53,4 +56,2 @@ theme: "sap_fiori_3",
 
-let runtimeConfig = {};
-
 const parseConfigurationScript = () => {
@@ -69,3 +70,3 @@ const configScript = document.querySelector("[data-ui5-config]") || document.querySelector("[data-id='sap-ui-config']"); // for backward compatibility
 		if (configJSON) {
-			runtimeConfig = Object.assign({}, configJSON);
+			initialConfig = merge(initialConfig, configJSON);
 		}
@@ -91,12 +92,17 @@ }
 
-		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 = () => {
@@ -107,6 +113,11 @@ if (initialized) {
 
+	// 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;
@@ -113,0 +124,0 @@ };

src/StaticAreaItem.js

@@ -52,2 +52,19 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 	 * @protected
+	 */
+	_updateContentDensity(isCompact) {
+		if (!this.staticAreaItemDomRef) {
+			return;
+		}
+
+		if (isCompact) {
+			this.staticAreaItemDomRef.classList.add("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.add("ui5-content-density-compact");
+		} else {
+			this.staticAreaItemDomRef.classList.remove("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.remove("ui5-content-density-compact");
+		}
+	}
+
+	/**
+	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.
@@ -54,0 +71,0 @@ */

src/Theming.js

@@ -6,2 +6,3 @@ import { addCustomCSS, getCustomCSS } from "./theming/CustomStyle.js";
 const themeChangeCallbacks = [];
+let externalThemePresent = false;
 
@@ -18,2 +19,6 @@ const attachThemeChange = function attachThemeChange(callback) {
 	const registeredPackages = getRegisteredPackages();
+	if (externalThemePresent) {
+		registeredPackages.delete("@ui5/webcomponents-theme-base");
+	}
+
 	registeredPackages.forEach(async packageName => {
@@ -42,2 +47,6 @@ cssText = await getThemeProperties(packageName, theme);
 
+const setExternalThemePresent = value => {
+	externalThemePresent = value;
+};
+
 export {
@@ -48,2 +57,3 @@ attachThemeChange,
 	addCustomCSS,
+	setExternalThemePresent,
 };

src/UI5Element.js

@@ -25,2 +25,3 @@ import merge from "@ui5/webcomponents-utils/dist/sap/base/util/merge.js";
 
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
 /**
@@ -594,2 +595,12 @@ * Base class for all UI5 Web Components
 
+	get isCompact() {
+		return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
+	}
+
+	updateStaticAreaItemContentDensity() {
+		if (this.staticAreaItem) {
+			this.staticAreaItem._updateContentDensity(this.isCompact);
+		}
+	}
+
 	/**
@@ -805,2 +816,7 @@ * Used to duck-type UI5 elements without using instanceof
 		await boot();
+
+		if (this.onDefine) {
+			await this.onDefine();
+		}
+
 		const tag = this.getMetadata().getTag();
@@ -807,0 +823,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

344

increased by0.88%

Worsened metrics

Total package byte prevSize

12512647

decreased by-4.66%

Lines of code

367348

decreased by-4.14%

Dependency changes

• + Added@ui5/webcomponents-utils@0.0.0-5f8ce9393(transitive)

• - Removed@ui5/webcomponents-utils@0.0.0-389bdbabc(transitive)

• Updated@ui5/webcomponents-utils@0.0.0-5f8ce9393