@ui5/webcomponents-base 0.0.0-4180fe799 → 0.0.0-4237771ff

package/src/UI5ElementMetadata.js

@@ -1,319 +0,0 @@
-import DataType from "./types/DataType.js";
-import isDescendantOf from "./util/isDescendantOf.js";
-import { camelToKebabCase } from "./util/StringHelper.js";
-import { getSlottedElements } from "./util/SlotsHelper.js";
-import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
-
-/**
- *
- * @class
- * @public
- */
-class UI5ElementMetadata {
-	constructor(metadata) {
-		this.metadata = metadata;
-	}
-
-	getInitialState() {
-		if (Object.prototype.hasOwnProperty.call(this, "_initialState")) {
-			return this._initialState;
-		}
-
-		const initialState = {};
-		const slotsAreManaged = this.slotsAreManaged();
-
-		// Initialize properties
-		const props = this.getProperties();
-		for (const propName in props) { // eslint-disable-line
-			const propType = props[propName].type;
-			const propDefaultValue = props[propName].defaultValue;
-
-			if (propType === Boolean) {
-				initialState[propName] = false;
-
-				if (propDefaultValue !== undefined) {
-					console.warn("The 'defaultValue' metadata key is ignored for all booleans properties, they would be initialized with 'false' by default"); // eslint-disable-line
-				}
-			} else if (props[propName].multiple) {
-				initialState[propName] = [];
-			} else if (propType === Object) {
-				initialState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : {};
-			} else if (propType === String) {
-				initialState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : "";
-			} else {
-				initialState[propName] = propDefaultValue;
-			}
-		}
-
-		// Initialize slots
-		if (slotsAreManaged) {
-			const slots = this.getSlots();
-			for (const [slotName, slotData] of Object.entries(slots)) { // eslint-disable-line
-				const propertyName = slotData.propertyName || slotName;
-				initialState[propertyName] = [];
-			}
-		}
-
-		this._initialState = initialState;
-		return initialState;
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validatePropertyValue(value, propData) {
-		const isMultiple = propData.multiple;
-		if (isMultiple) {
-			return value.map(propValue => validateSingleProperty(propValue, propData));
-		}
-		return validateSingleProperty(value, propData);
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validateSlotValue(value, slotData) {
-		return validateSingleSlot(value, slotData);
-	}
-
-	/**
-	 * Returns the tag of the UI5 Element without the scope
-	 * @public
-	 */
-	getPureTag() {
-		return this.metadata.tag;
-	}
-
-	/**
-	 * Returns the tag of the UI5 Element
-	 * @public
-	 */
-	getTag() {
-		const pureTag = this.metadata.tag;
-		const suffix = getEffectiveScopingSuffixForTag(pureTag);
-		if (!suffix) {
-			return pureTag;
-		}
-
-		return `${pureTag}-${suffix}`;
-	}
-
-	/**
-	 * Used to get the tag we need to register for backwards compatibility
-	 * @public
-	 */
-	getAltTag() {
-		const pureAltTag = this.metadata.altTag;
-		if (!pureAltTag) {
-			return;
-		}
-
-		const suffix = getEffectiveScopingSuffixForTag(pureAltTag);
-		if (!suffix) {
-			return pureAltTag;
-		}
-
-		return `${pureAltTag}-${suffix}`;
-	}
-
-	/**
-	 * Determines whether a property should have an attribute counterpart
-	 * @public
-	 * @param propName
-	 * @returns {boolean}
-	 */
-	hasAttribute(propName) {
-		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute && !propData.multiple;
-	}
-
-	/**
-	 * Returns an array with the properties of the UI5 Element (in camelCase)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getPropertiesList() {
-		return Object.keys(this.getProperties());
-	}
-
-	/**
-	 * Returns an array with the attributes of the UI5 Element (in kebab-case)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getAttributesList() {
-		return this.getPropertiesList().filter(this.hasAttribute, this).map(camelToKebabCase);
-	}
-
-	/**
-	 * Returns an object with key-value pairs of slots and their metadata definitions
-	 * @public
-	 */
-	getSlots() {
-		return this.metadata.slots || {};
-	}
-
-	/**
-	 * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
-	 * @returns {boolean}
-	 */
-	canSlotText() {
-		const defaultSlot = this.getSlots().default;
-		return defaultSlot && defaultSlot.type === Node;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots
-	 * @public
-	 */
-	hasSlots() {
-		return !!Object.entries(this.getSlots()).length;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots with "individualSlots: true"
-	 * @public
-	 */
-	hasIndividualSlots() {
-		return this.slotsAreManaged() && Object.entries(this.getSlots()).some(([_slotName, slotData]) => slotData.individualSlots);
-	}
-
-	/**
-	 * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed
-	 * @public
-	 */
-	slotsAreManaged() {
-		return !!this.metadata.managedSlots;
-	}
-
-	/**
-	 * Returns an object with key-value pairs of properties and their metadata definitions
-	 * @public
-	 */
-	getProperties() {
-		return this.metadata.properties || {};
-	}
-
-	/**
-	 * Returns an object with key-value pairs of events and their metadata definitions
-	 * @public
-	 */
-	getEvents() {
-		return this.metadata.events || {};
-	}
-
-	/**
-	 * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
-	 * @returns {boolean}
-	 */
-	isLanguageAware() {
-		return !!this.metadata.languageAware;
-	}
-
-	/**
-	 * Determines whether this UI5 Element has any theme dependant carachteristics.
-	 * @returns {boolean}
-	 */
-	 isThemeAware() {
-		return !!this.metadata.themeAware;
-	}
-
-	/**
-	 * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
-	 * and determines whether this should cause and invalidation
-	 *
-	 * @param slotName the name of the slot in which a child was changed
-	 * @param type the type of change in the child: "property" or "slot"
-	 * @param name the name of the property/slot that changed
-	 * @returns {boolean}
-	 */
-	shouldInvalidateOnChildChange(slotName, type, name) {
-		const config = this.getSlots()[slotName].invalidateOnChildChange;
-
-		// invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component
-		if (config === undefined) {
-			return false;
-		}
-
-		// The simple format was used: invalidateOnChildChange: true/false;
-		if (typeof config === "boolean") {
-			return config;
-		}
-
-		// The complex format was used: invalidateOnChildChange: { properties, slots }
-		if (typeof config === "object") {
-			// A property was changed
-			if (type === "property") {
-				// The config object does not have a properties field
-				if (config.properties === undefined) {
-					return false;
-				}
-
-				// The config object has the short format: properties: true/false
-				if (typeof config.properties === "boolean") {
-					return config.properties;
-				}
-
-				// The config object has the complex format: properties: [...]
-				if (Array.isArray(config.properties)) {
-					return config.properties.includes(name);
-				}
-
-				throw new Error("Wrong format for invalidateOnChildChange.properties: boolean or array is expected");
-			}
-
-			// A slot was changed
-			if (type === "slot") {
-				// The config object does not have a slots field
-				if (config.slots === undefined) {
-					return false;
-				}
-
-				// The config object has the short format: slots: true/false
-				if (typeof config.slots === "boolean") {
-					return config.slots;
-				}
-
-				// The config object has the complex format: slots: [...]
-				if (Array.isArray(config.slots)) {
-					return config.slots.includes(name);
-				}
-
-				throw new Error("Wrong format for invalidateOnChildChange.slots: boolean or array is expected");
-			}
-		}
-
-		throw new Error("Wrong format for invalidateOnChildChange: boolean or object is expected");
-	}
-}
-
-const validateSingleProperty = (value, propData) => {
-	const propertyType = propData.type;
-
-	if (propertyType === Boolean) {
-		return typeof value === "boolean" ? value : false;
-	}
-	if (propertyType === String) {
-		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
-	}
-	if (propertyType === Object) {
-		return typeof value === "object" ? value : propData.defaultValue;
-	}
-	if (isDescendantOf(propertyType, DataType)) {
-		return propertyType.isValid(value) ? value : propData.defaultValue;
-	}
-};
-
-const validateSingleSlot = (value, slotData) => {
-	value && getSlottedElements(value).forEach(el => {
-		if (!(el instanceof slotData.type)) {
-			throw new Error(`${el} is not of type ${slotData.type}`);
-		}
-	});
-
-	return value;
-};
-
-export default UI5ElementMetadata;

package/src/animations/AnimationQueue.js

@@ -1,42 +0,0 @@
-const tasks = new WeakMap();
-
-class AnimationQueue {
-	static get tasks() {
-		return tasks;
-	}
-
-	static enqueue(element, task) {
-		if (!tasks.has(element)) {
-			tasks.set(element, []);
-		}
-
-		tasks.get(element).push(task);
-	}
-
-	static run(element, task) {
-		if (!tasks.has(element)) {
-			tasks.set(element, []);
-		}
-
-		return task().then(() => {
-			const elementTasks = tasks.get(element);
-
-			if (elementTasks.length > 0) {
-				return AnimationQueue.run(element, elementTasks.shift());
-			}
-			tasks.delete(element);
-		});
-	}
-
-	static push(element, task) {
-		const elementTasks = tasks.get(element);
-
-		if (elementTasks) {
-			AnimationQueue.enqueue(element, task);
-		} else {
-			AnimationQueue.run(element, task);
-		}
-	}
-}
-
-export default AnimationQueue;

package/src/animations/animate.js

@@ -1,53 +0,0 @@
-import AnimationQueue from "./AnimationQueue.js";
-import animationConfig from "./config.js";
-
-export default ({
-	beforeStart = animationConfig.identity,
-	duration = animationConfig.defaultDuration,
-	element = animationConfig.element,
-	progress: progressCallback = animationConfig.identity,
-}) => {
-	let start = null;
-	let stopped = false;
-	let animationFrame;
-	let stop;
-	let animate;
-
-	const promise = new Promise((resolve, reject) => {
-		animate = timestamp => {
-			start = start || timestamp;
-
-			const timeElapsed = timestamp - start;
-			const remaining = duration - timeElapsed;
-
-			if (timeElapsed <= duration) {
-				const progress = 1 - remaining / duration; // easing formula (currently linear)
-				progressCallback(progress);
-				animationFrame = !stopped && requestAnimationFrame(animate);
-			} else {
-				progressCallback(1);
-				resolve();
-			}
-		};
-
-		stop = () => {
-			stopped = true;
-			cancelAnimationFrame(animationFrame);
-			reject(new Error("animation stopped"));
-		};
-	}).catch(oReason => oReason);
-
-	AnimationQueue.push(element, () => {
-		beforeStart();
-		requestAnimationFrame(animate);
-
-		return new Promise(resolve => {
-			promise.then(() => resolve());
-		});
-	});
-
-	return {
-		promise: () => promise,
-		stop: () => stop,
-	};
-};

package/src/animations/config.js

@@ -1,5 +0,0 @@
-export default {
-	defaultDuration: 400,
-	element: document.createElement("DIV"),
-	identity: () => {},
-};

package/src/animations/scroll.js

@@ -1,28 +0,0 @@
-import animate from "./animate.js";
-import animationConfig from "./config.js";
-
-export default ({
-	element = animationConfig.element,
-	duration = animationConfig.duration,
-	progress: progressCallback = animationConfig.identity,
-	dx = 0,
-	dy = 0,
-}) => {
-	let scrollLeft;
-	let scrollTop;
-
-	return animate({
-		beforeStart: () => {
-			scrollLeft = element.scrollLeft;
-			scrollTop = element.scrollTop;
-		},
-		duration,
-		element,
-		progress: progress => {
-			progressCallback(progress);
-
-			element.scrollLeft = scrollLeft + (progress * dx); // easing - linear
-			element.scrollTop = scrollTop + (progress * dy); // easing - linear
-		},
-	});
-};

package/src/animations/slideDown.js

@@ -1,79 +0,0 @@
-import animationConfig from "./config.js";
-import animate from "./animate.js";
-
-export default ({
-	element = animationConfig.element,
-	duration = animationConfig.defaultDuration,
-	progress: progressCallback = animationConfig.identity,
-}) => {
-	let computedStyles,
-		paddingTop,
-		paddingBottom,
-		marginTop,
-		marginBottom,
-		height;
-	let storedOverflow,
-		storedPaddingTop,
-		storedPaddingBottom,
-		storedMarginTop,
-		storedMarginBottom,
-		storedHeight;
-
-	const animation = animate({
-		beforeStart: () => {
-			// Show the element to measure its properties
-			element.style.display = "block";
-
-			// Get Computed styles
-			computedStyles = getComputedStyle(element);
-			paddingTop = parseFloat(computedStyles.paddingTop);
-			paddingBottom = parseFloat(computedStyles.paddingBottom);
-			marginTop = parseFloat(computedStyles.marginTop);
-			marginBottom = parseFloat(computedStyles.marginBottom);
-			height = parseFloat(computedStyles.height);
-
-			// Store inline styles
-			storedOverflow = element.style.overflow;
-			storedPaddingTop = element.style.paddingTop;
-			storedPaddingBottom = element.style.paddingBottom;
-			storedMarginTop = element.style.marginTop;
-			storedMarginBottom = element.style.marginBottom;
-			storedHeight = element.style.height;
-
-			element.style.overflow = "hidden";
-			element.style.paddingTop = 0;
-			element.style.paddingBottom = 0;
-			element.style.marginTop = 0;
-			element.style.marginBottom = 0;
-			element.style.height = 0;
-		},
-		duration,
-		element,
-		progress(progress) {
-			progressCallback(progress);
-
-			// WORKAROUND
-			element.style.display = "block";
-			// END OF WORKAROUND
-
-			/* eslint-disable */
-			element.style.paddingTop = 0 + (paddingTop * progress) + "px";
-			element.style.paddingBottom = 0 + (paddingBottom * progress) + "px";
-			element.style.marginTop = 0 + (marginTop * progress) + "px";
-			element.style.marginBottom = 0 + (marginBottom * progress) + "px";
-			element.style.height = 0 + (height * progress) + "px";
-			/* eslint-enable */
-		},
-	});
-
-	animation.promise().then(() => {
-		element.style.overflow = storedOverflow;
-		element.style.paddingTop = storedPaddingTop;
-		element.style.paddingBottom = storedPaddingBottom;
-		element.style.marginTop = storedMarginTop;
-		element.style.marginBottom = storedMarginBottom;
-		element.style.height = storedHeight;
-	});
-
-	return animation;
-};

package/src/animations/slideUp.js

@@ -1,71 +0,0 @@
-import animationConfig from "./config.js";
-import animate from "./animate.js";
-
-export default ({
-	element = animationConfig.element,
-	duration = animationConfig.defaultDuration,
-	progress: progressCallback = animationConfig.identity,
-}) => {
-	// Get Computed styles
-	let computedStyles,
-		paddingTop,
-		paddingBottom,
-		marginTop,
-		marginBottom,
-		height;
-
-	// Store inline styles
-	let storedOverflow,
-		storedPaddingTop,
-		storedPaddingBottom,
-		storedMarginTop,
-		storedMarginBottom,
-		storedHeight;
-
-	const animation = animate({
-		beforeStart: () => {
-			// Get Computed styles
-			computedStyles = getComputedStyle(element);
-			paddingTop = parseFloat(computedStyles.paddingTop);
-			paddingBottom = parseFloat(computedStyles.paddingBottom);
-			marginTop = parseFloat(computedStyles.marginTop);
-			marginBottom = parseFloat(computedStyles.marginBottom);
-			height = parseFloat(computedStyles.height);
-
-			// Store inline styles
-			storedOverflow = element.style.overflow;
-			storedPaddingTop = element.style.paddingTop;
-			storedPaddingBottom = element.style.paddingBottom;
-			storedMarginTop = element.style.marginTop;
-			storedMarginBottom = element.style.marginBottom;
-			storedHeight = element.style.height;
-
-			element.style.overflow = "hidden";
-		},
-		duration,
-		element,
-		progress(progress) {
-			progressCallback(progress);
-
-			element.style.paddingTop = `${paddingTop - (paddingTop * progress)}px`;
-			element.style.paddingBottom = `${paddingBottom - (paddingBottom * progress)}px`;
-			element.style.marginTop = `${marginTop - (marginTop * progress)}px`;
-			element.style.marginBottom = `${marginBottom - (marginBottom * progress)}px`;
-			element.style.height = `${height - (height * progress)}px`;
-		},
-	});
-
-	animation.promise().then(oReason => {
-		if (!(oReason instanceof Error)) {
-			element.style.overflow = storedOverflow;
-			element.style.paddingTop = storedPaddingTop;
-			element.style.paddingBottom = storedPaddingBottom;
-			element.style.marginTop = storedMarginTop;
-			element.style.marginBottom = storedMarginBottom;
-			element.style.height = storedHeight;
-			element.style.display = "none";
-		}
-	});
-
-	return animation;
-};