@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

CHANGELOG.md

@@ -6,2 +6,30 @@ # Change Log
 
+# [0.16.0](https://github.com/SAP/ui5-webcomponents/compare/v0.15.0...v0.16.0) (2019-10-03)
+
+
+### Bug Fixes
+
+* **DOMEventHandler:** does not crash in edge cases ([#774](https://github.com/SAP/ui5-webcomponents/issues/774)) ([2576883](https://github.com/SAP/ui5-webcomponents/commit/2576883))
+* **FocusHelper:** handles SVG's focus method on IE ([#721](https://github.com/SAP/ui5-webcomponents/issues/721)) ([52517c4](https://github.com/SAP/ui5-webcomponents/commit/52517c4))
+* **CSS Transform:** host selector not removed when there is trailing whitespace ([#780](https://github.com/SAP/ui5-webcomponents/issues/780)) ([b5d8fde](https://github.com/SAP/ui5-webcomponents/commit/b5d8fde))
+* **UI5Element:** parent elements properly await for children upgrade ([#645](https://github.com/SAP/ui5-webcomponents/issues/645)) ([0e976f8](https://github.com/SAP/ui5-webcomponents/commit/0e976f8))
+
+
+### Code Refactoring
+
+* **Configuration:** make configuration initial only ([#638](https://github.com/SAP/ui5-webcomponents/issues/638)) ([86ad25b](https://github.com/SAP/ui5-webcomponents/commit/86ad25b)))
+
+
+### Features
+
+* **Configuration:** add configuration for calendar first day of the week ([#627](https://github.com/SAP/ui5-webcomponents/issues/627)) ([9c6df48](https://github.com/SAP/ui5-webcomponents/commit/9c6df48))
+* add support for angular two way data binding ([#706](https://github.com/SAP/ui5-webcomponents/issues/706)) ([16820e4](https://github.com/SAP/ui5-webcomponents/commit/16820e4))
+* **Tooling:** add new component script ([#747](https://github.com/SAP/ui5-webcomponents/issues/747)) ([171a36f](https://github.com/SAP/ui5-webcomponents/commit/171a36f))
+
+
+### BREAKING CHANGES
+
+* **Theming:** Theming.js no longer has getTheme and setTheme methods, use the Configuration.js instead.
+
+
 # [0.15.0](https://github.com/SAP/ui5-webcomponents/compare/v0.14.0...v0.15.0) (2019-07-04)
@@ -8,0 +36,0 @@

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "UI5 Web Components: webcomponents.base",
@@ -19,8 +19,12 @@ "author": "SAP SE (https://www.sap.com)",
   "scripts": {
-    "build": "npm run lint --scripts-prepend-node-path ",
+    "build": "npm-run-all --sequential clean lint copy:cldr copy:src",
+    "start": "yarn watch:src",
     "clean": "rimraf dist",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "copy:src": "copy-and-watch \"src/**/*.js\" dist/",
+    "copy:cldr": "copy-and-watch \"../../node_modules/@ui5/webcomponents-core/dist/**/cldr/*.json\" dist/assets/cldr/",
+    "watch:src": "copy-and-watch --watch \"src/**/*.js\" dist/"
   },
   "dependencies": {
-    "@ui5/webcomponents-core": "0.15.0",
+    "@ui5/webcomponents-core": "0.16.0",
     "lit-html": "^1.0.0",
@@ -32,4 +36,6 @@ "regenerator-runtime": "0.12.1",
     "array-uniq": "^2.0.0",
+    "copy-and-watch": "^0.1.2",
     "eslint": "^5.13.0",
-    "eslint-config-airbnb-base": "^13.1.0"
+    "eslint-config-airbnb-base": "^13.1.0",
+    "npm-run-all": "^4.1.5"
   },
@@ -36,0 +42,0 @@ "resolutions": {

src/boot.js

@@ -5,3 +5,4 @@ import whenDOMReady from "./util/whenDOMReady.js";
 import DOMEventHandler from "./DOMEventHandler.js";
-import { applyTheme } from "./Theming.js";
+import { getTheme } from "./config/Theme.js";
+import { _applyTheme } from "./Theming.js";
 import whenPolyfillLoaded from "./compatibility/whenPolyfillLoaded.js";
@@ -20,3 +21,3 @@
 		await whenDOMReady();
-		applyTheme();
+		await _applyTheme(getTheme());
 		insertIconFontFace();
@@ -23,0 +24,0 @@ DOMEventHandler.start();

src/CSS.js

@@ -1,6 +0,8 @@
-import { getTheme } from "./Configuration.js";
 import { getEffectiveStyle } from "./Theming.js";
+import { getTheme } from "./config/Theme.js";
 import { injectWebComponentStyle } from "./theming/StyleInjection.js";
+import adaptCSSForIE from "./util/CSSTransformUtils.js";
 
-const styleMap = new Map();
+const constructableStyleMap = new Map();
+const IEStyleSet = new Set();
 
@@ -14,4 +16,10 @@ /**
 	const tag = ElementClass.getMetadata().getTag();
-	const cssContent = getEffectiveStyle(ElementClass);
+	if (IEStyleSet.has(tag)) {
+		return;
+	}
+
+	let cssContent = getEffectiveStyle(ElementClass);
+	cssContent = adaptCSSForIE(cssContent, tag);
 	injectWebComponentStyle(tag, cssContent);
+	IEStyleSet.add(tag);
 };
@@ -30,4 +38,4 @@
 	const key = theme + tagName;
-	if (styleMap.has(key)) {
-		return styleMap.get(key);
+	if (constructableStyleMap.has(key)) {
+		return constructableStyleMap.get(key);
 	}
@@ -38,3 +46,3 @@
 
-	styleMap.set(key, style);
+	constructableStyleMap.set(key, style);
 	return style;
@@ -41,0 +49,0 @@ };

src/dates/CalendarUtils.js

 import UniversalDate from "@ui5/webcomponents-core/dist/sap/ui/core/date/UniversalDate.js";
 import Locale from "@ui5/webcomponents-core/dist/sap/ui/core/Locale.js";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
+import { getFirstDayOfWeek } from "../config/FormatSettings.js";
 
@@ -8,3 +9,4 @@ const calculateWeekNumber = (oDate, iYear, oLocale, oLocaleData) => {
 	let iWeekDay = 0;
-	const iFirstDayOfWeek = oLocaleData.getFirstDayOfWeek();
+	const confFirstDayOfWeek = getFirstDayOfWeek();
+	const iFirstDayOfWeek = Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : oLocaleData.getFirstDayOfWeek();
 
@@ -57,3 +59,4 @@ // search Locale for containing "en-US", since sometimes
 		oLocaleData = LocaleData.getInstance(new Locale("en")),
-		iCLDRFirstWeekDay = oLocaleData.getFirstDayOfWeek();
+		confFirstDayOfWeek = getFirstDayOfWeek(),
+		iCLDRFirstWeekDay = Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : oLocaleData.getFirstDayOfWeek();
 
@@ -60,0 +63,0 @@

src/delegate/CustomResize.js

@@ -33,5 +33,6 @@ const INTERVAL = 300;
 
-			if (changed) {
+			if (changed || (entry && !entry._hasBeenRendered)) {
 				CustomResize.updateSizes(entry, ref.offsetWidth, ref.offsetHeight);
 				entry.callbacks.forEach(el => el());
+				entry._hasBeenRendered = true;
 			}
@@ -38,0 +39,0 @@ });

src/DOMEventHandler.js

@@ -20,3 +20,3 @@ import ManagedEvents from "./events/ManagedEvents.js";
 const processDOMNode = function processDOMNode(node, event) {
-	if (node && node._isUI5Element) {
+	if (node && node.isUI5Element) {
 		return dispatchEvent(node, event);
@@ -46,3 +46,3 @@ }
 
-	if (parentNode && parentNode.host) {
+	if (parentNode && (parentNode instanceof window.ShadowRoot) && parentNode.host) {
 		return parentNode.host;
@@ -49,0 +49,0 @@ }

src/FocusHelper.js

@@ -68,3 +68,3 @@ import UI5Element from "./UI5Element.js";
 				if (FocusHelper.hasTabIndex(child)) {
-					return child;
+					return (child && typeof child.focus === "function") ? child : null;
 				}
@@ -74,3 +74,3 @@
 				if (focusableDescendant) {
-					return focusableDescendant;
+					return (focusableDescendant && typeof focusableDescendant.focus === "function") ? focusableDescendant : null;
 				}
@@ -77,0 +77,0 @@ }

src/LocaleProvider.js

 import Locale from "./Locale.js";
 import detectNavigatorLanguage from "./util/detectNavigatorLanguage.js";
-import { getLanguage as getConfigLanguage } from "./Configuration.js";
+import { getLanguage as getConfigLanguage } from "./config/Language.js";
 
@@ -5,0 +5,0 @@ const convertToLocaleOrNull = lang => {

src/RenderScheduler.js

@@ -117,3 +117,3 @@ import RenderQueue from "./RenderQueue.js";
 	static getNotDefinedComponents() {
-		return Array.from(document.querySelectorAll(":not(:defined)")).filter(el => el.localName.startsWith("ui5-"));
+		return Array.from(document.querySelectorAll("*")).filter(el => el.localName.startsWith("ui5-") && !el.isUI5Element);
 	}
@@ -136,9 +136,6 @@
 			// eslint-disable-next-line
-			console.warn("undefined elements after 5 seconds: ", [...stillUndefined].map(el => el.localName));
+			console.warn("undefined elements after 5 seconds are: " + [...stillUndefined].map(el => el.localName).join(" ; "));
 		}
 
-		// TODO: track promises internally, the dom traversal is a POC only
-		const ui5Components = Array.from(document.querySelectorAll("*")).filter(_ => _._shadowRootReadyPromise);
-		return Promise.all(ui5Components.map(comp => comp._whenShadowRootReady()))
-			.then(() => Promise.resolve());	// qunit has a boolean cheack for the promise value and the array from the Promise all is considered truthy
+		return Promise.resolve();
 	}
@@ -145,0 +142,0 @@

src/shims/Core-shim.js

 import { inject as injectCore } from "@ui5/webcomponents-core/dist/sap/ui/core/Core.js";
-import * as Configuration from "../Configuration.js";
 import * as FormatSettings from "../FormatSettings.js";
+import { getLanguage } from "../config/Language.js";
+import { getCalendarType } from "../config/CalendarType.js";
+import { getFirstDayOfWeek } from "../config/FormatSettings.js";
+import getDesigntimePropertyAsArray from "../util/getDesigntimePropertyAsArray.js";
 
@@ -10,2 +13,12 @@ /**
 
+const Configuration = {
+	getLanguage,
+	getCalendarType,
+	getFirstDayOfWeek,
+	getSupportedLanguages: () => {
+		return getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
+	},
+	getOriginInfo: () => {},
+};
+
 const Core = {
@@ -12,0 +25,0 @@ /**

src/Theming.js

@@ -1,12 +0,8 @@
-import { getTheme, _setTheme } from "./Configuration.js";
 import { addCustomCSS, getCustomCSS } from "./theming/CustomStyle.js";
-import { getThemeProperties } from "./theming/ThemeProperties.js";
+import { getThemeProperties } from "./asset-registries/Themes.js";
 import { injectThemeProperties } from "./theming/StyleInjection.js";
 
+const defaultTheme = "sap_fiori_3";
 const themeChangeCallbacks = [];
 
-const getDefaultTheme = () => {
-	return "sap_fiori_3";
-};
-
 const attachThemeChange = function attachThemeChange(callback) {
@@ -18,7 +14,5 @@ if (themeChangeCallbacks.indexOf(callback) === -1) {
 
-const applyTheme = async () => {
+const _applyTheme = async theme => {
 	let cssText = "";
-	const theme = getTheme();
 
-	const defaultTheme = getDefaultTheme();
 	if (theme !== defaultTheme) {
@@ -28,15 +22,6 @@ cssText = await getThemeProperties("@ui5/webcomponents", theme);
 	injectThemeProperties(cssText);
+	_executeThemeChangeCallbacks(theme);
 };
 
-const setTheme = async theme => {
-	if (theme === getTheme()) {
-		return;
-	}
-
-	// Update configuration
-	_setTheme(theme);
-
-	// Update CSS Custom Properties
-	await applyTheme();
-
+const _executeThemeChangeCallbacks = theme => {
 	themeChangeCallbacks.forEach(callback => callback(theme));
@@ -57,8 +42,6 @@ };
 export {
-	getDefaultTheme,
 	attachThemeChange,
-	applyTheme,
-	setTheme,
+	_applyTheme,
 	getEffectiveStyle,
 	addCustomCSS,
 };

src/theming/StyleInjection.js

 import createStyleInHead from "../util/createStyleInHead.js";
 
-const injectedForTags = [];
 let ponyfillTimer;
@@ -14,3 +13,3 @@
 		rootElement: document.head,
-		include: "style[data-ui5-webcomponents-theme-properties],style[data-ui5-webcomponent-styles]",
+		include: "style[data-ui5-theme-properties],style[data-ui5-element-styles]",
 		silent: true,
@@ -32,7 +31,7 @@ });
 	// Needed for all browsers
-	const styleElement = document.head.querySelector(`style[data-ui5-webcomponents-theme-properties]`);
+	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties]`);
 	if (styleElement) {
 		styleElement.textContent = cssText || "";	// in case of undefined
 	} else {
-		createStyleInHead(cssText, { "data-ui5-webcomponents-theme-properties": "" });
+		createStyleInHead(cssText, { "data-ui5-theme-properties": "" });
 	}
@@ -53,10 +52,6 @@
 	// Edge and IE
-	if (injectedForTags.indexOf(tagName) !== -1) {
-		return;
-	}
 	createStyleInHead(cssText, {
-		"data-ui5-webcomponent-styles": tagName,
+		"data-ui5-element-styles": tagName,
 		"disabled": "disabled",
 	});
-	injectedForTags.push(tagName);
 
@@ -63,0 +58,0 @@ // When injecting component styles, more might come in the same tick, so run the ponyfill async (to avoid double work)

src/UI5Element.js

 import boot from "./boot.js";
-import { getWCNoConflict, getCompactSize } from "./Configuration.js";
+import { skipOriginalEvent } from "./config/NoConflict.js";
+import { getCompactSize } from "./config/CompactSize.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
@@ -27,3 +28,3 @@ import UI5ElementMetadata from "./UI5ElementMetadata.js";
 		this._upgradeAllProperties();
-		this._shadowRootReadyPromise = this._initializeShadowRoot();
+		this._initializeShadowRoot();
 
@@ -41,6 +42,2 @@ attachThemeChange(this.onThemeChanged.bind(this));
 
-	_whenShadowRootReady() {
-		return this._shadowRootReadyPromise;
-	}
-
 	onThemeChanged() {
@@ -64,5 +61,5 @@ if (window.ShadyDOM || !this.constructor.needsShadowDOM()) {
 
-	async _initializeShadowRoot() {
+	_initializeShadowRoot() {
 		if (!this.constructor.needsShadowDOM()) {
-			return Promise.resolve();
+			return;
 		}
@@ -94,4 +91,3 @@
 
-		await this._whenShadowRootReady();
-		this._processChildren();
+		await this._processChildren();
 		await RenderScheduler.renderImmediately(this);
@@ -136,6 +132,6 @@ this._domRefReadyPromise._deferredResolve();
 
-	_processChildren(mutations) {
+	async _processChildren(mutations) {
 		const hasSlots = this.constructor.getMetadata().hasSlots();
 		if (hasSlots) {
-			this._updateSlots();
+			await this._updateSlots();
 		}
@@ -145,3 +141,3 @@ this.onChildrenChanged(mutations);
 
-	_updateSlots() {
+	async _updateSlots() {
 		const slotsMap = this.constructor.getMetadata().getSlots();
@@ -163,3 +159,3 @@ const canSlotText = slotsMap.default && slotsMap.default.type === Node;
 		const autoIncrementMap = new Map();
-		domChildren.forEach(child => {
+		const allChildrenUpgraded = domChildren.map(async child => {
 			// Determine the type of the child (mainly by the slot attribute)
@@ -183,5 +179,20 @@ const slotName = this.constructor._getSlotName(child);
 
+			// Await for not-yet-defined custom elements
+			if (child instanceof HTMLElement) {
+				const localName = child.localName;
+				const isCustomElement = localName.includes("-");
+				if (isCustomElement) {
+					const isDefined = window.customElements.get(localName);
+					if (!isDefined) {
+						const whenDefinedPromise = window.customElements.whenDefined(localName); // Class registered, but instances not upgraded yet
+						const timeoutPromise = new Promise(resolve => setTimeout(resolve, 1000));
+						await Promise.race([whenDefinedPromise, timeoutPromise]);
+					}
+					window.customElements.upgrade(child);
+				}
+			}
+
 			child = this.constructor.getMetadata().constructor.validateSlotValue(child, slotData);
 
-			if (child._isUI5Element) {
+			if (child.isUI5Element) {
 				this._attachChildPropertyUpdated(child, slotData);
@@ -195,2 +206,3 @@ }
 
+		await Promise.all(allChildrenUpgraded);
 		this._invalidate();
@@ -210,3 +222,3 @@ }
 		children.forEach(child => {
-			if (child && child._isUI5Element) {
+			if (child && child.isUI5Element) {
 				this._detachChildPropertyUpdated(child);
@@ -217,7 +229,8 @@ }
 		this._state[propertyName] = [];
+		this._invalidate(propertyName, []);
 	}
 
 	static get observedAttributes() {
-		const observedProps = this.getMetadata().getPublicPropsList();
-		return observedProps.map(camelToKebabCase);
+		const observedAttributes = this.getMetadata().getAttributesList();
+		return observedAttributes.map(camelToKebabCase);
 	}
@@ -242,3 +255,3 @@
 	_updateAttribute(name, newValue) {
-		if (!UI5ElementMetadata.isPublicProperty(name)) {
+		if (!this.constructor.getMetadata().hasAttribute(name)) {
 			return;
@@ -324,19 +337,13 @@ }
 		// merge properties
-		result.properties = metadatas.reverse().reduce((result, current) => { // eslint-disable-line
-			Object.assign(result, current.properties);
-			return result;
+		result.properties = metadatas.reverse().reduce((allProperties, current) => { // eslint-disable-line
+			Object.assign(allProperties, current.properties || {});
+			return allProperties;
 		}, {});
 
 		// merge slots
-		result.slots = metadatas.reverse().reduce((result, current) => { // eslint-disable-line
-			Object.assign(result, current.slots);
-			return result;
+		result.slots = metadatas.reverse().reduce((allSlots, current) => { // eslint-disable-line
+			Object.assign(allSlots, current.slots || {});
+			return allSlots;
 		}, {});
 
-		// merge events
-		result.events = metadatas.reverse().reduce((result, current) => { // eslint-disable-line
-			Object.assign(result, current.events);
-			return result;
-		}, {});
-
 		this._metadata = new UI5ElementMetadata(result);
@@ -403,2 +410,3 @@ return this._metadata;
 		if (this._invalidated) {
+			// console.log("already invalidated", this, ...arguments);
 			return;
@@ -479,3 +487,3 @@ }
 
-		if (focusDomRef) {
+		if (focusDomRef && typeof focusDomRef.focus === "function") {
 			focusDomRef.focus();
@@ -526,3 +534,2 @@ }
 		let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
-		const noConflict = getWCNoConflict();
 
@@ -539,3 +546,3 @@ const noConflictEvent = new CustomEvent(`ui5-${name}`, {
 
-		if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
+		if (skipOriginalEvent(name)) {
 			return compatEventResult;
@@ -560,3 +567,3 @@ }
 		const reducer = (acc, curr) => {
-			if (curr.tagName.toUpperCase() !== "SLOT") {
+			if (curr.localName !== "slot") {
 				return acc.concat([curr]);
@@ -573,5 +580,5 @@ }
 	 * @returns {boolean}
-	 * @private
+	 * @public
 	 */
-	get _isUI5Element() {
+	get isUI5Element() {
 		return true;
@@ -702,5 +709,2 @@ }
 						this._state[prop] = value;
-						if (propData.nonVisual) {
-							return;
-						}
 						this._invalidate(prop, value);
@@ -707,0 +711,0 @@ this._propertyChange(prop, value);

src/UI5ElementMetadata.js

@@ -13,2 +13,7 @@ import DataType from "./types/DataType.js";
 
+	hasAttribute(propName) {
+		const propData = this.getProperties()[propName];
+		return propData.type !== Object && !propData.noAttribute;
+	}
+
 	getPropsList() {
@@ -18,4 +23,4 @@ return Object.keys(this.getProperties());
 
-	getPublicPropsList() {
-		return this.getPropsList().filter(UI5ElementMetadata.isPublicProperty);
+	getAttributesList() {
+		return this.getPropsList().filter(this.hasAttribute, this);
 	}
@@ -35,10 +40,2 @@
 
-	getEvents() {
-		return this.metadata.events || {};
-	}
-
-	static isPublicProperty(prop) {
-		return prop.charAt(0) !== "_";
-	}
-
 	static validatePropertyValue(value, propData) {
@@ -60,7 +57,2 @@ const isMultiple = propData.multiple;
 
-	// Association handling
-	if (propData.association) {
-		return value;
-	}
-
 	if (propertyType === Boolean) {
@@ -87,3 +79,3 @@ return typeof value === "boolean" ? value : false;
 		const isTag = el instanceof HTMLElement;
-		const isSlot = isTag && el.tagName.toUpperCase() === "SLOT";
+		const isSlot = isTag && el.localName === "slot";
 
@@ -96,17 +88,7 @@ if (isSlot) {
 	};
-	const propertyType = slotData.type;
 
 	const slottedNodes = getSlottedNodes(value);
 	slottedNodes.forEach(el => {
-		if (!(el instanceof propertyType)) {
-			const isHTMLElement = el instanceof HTMLElement;
-			const tagName = isHTMLElement && el.tagName.toLowerCase();
-			const isCustomElement = isHTMLElement && tagName.includes("-");
-			if (isCustomElement) {
-				window.customElements.whenDefined(tagName).then(() => {
-					if (!(el instanceof propertyType)) {
-						throw new Error(`${el} is not of type ${propertyType}`);
-					}
-				});
-			}
+		if (!(el instanceof slotData.type)) {
+			throw new Error(`${el} is not of type ${slotData.type}`);
 		}
@@ -113,0 +95,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Total package byte prevSize

9268721

increased by1259.53%

Number of package files

285

increased by190.82%

Lines of code

376407

increased by2972.71%

Worsened metrics

Dev dependency count

5

increased by66.67%

Number of medium supply chain risk alerts

5

increased by150%

Dependency changes

• + Added@ui5/webcomponents-core@0.16.0(transitive)

• - Removed@ui5/webcomponents-core@0.15.0(transitive)

• Updated@ui5/webcomponents-core@0.16.0