@ui5/webcomponents-base 0.0.0-0a074c90e → 0.0.0-111ecd79a

package/src/{UI5ElementMetadata.js → UI5ElementMetadata.ts}

@@ -1,8 +1,48 @@
 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";
+import { getSlottedNodes } from "./util/SlotsHelper.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
+
+type SlotInvalidation = {
+	properties: boolean | Array<string>,
+	slots: boolean | Array<string>,
+}
+
+type Slot = {
+	type: typeof Node | typeof HTMLElement,
+	default?: boolean,
+	propertyName?: string,
+	individualSlots?: boolean,
+	invalidateOnChildChange?: boolean | SlotInvalidation,
+};
+
+type SlotValue = Node;
+
+type Property = {
+	type?: BooleanConstructor | StringConstructor | ObjectConstructor | DataType
+	validator?: DataType,
+	defaultValue?: PropertyValue,
+	noAttribute?: boolean,
+	multiple?: boolean,
+	compareValues?: boolean,
+}
+
+type PropertyValue = boolean | number | string | object | undefined | null | DataType;
+
+type EventData = Record<string, object>;
+
+type Metadata = {
+	tag?: string,
+	managedSlots?: boolean,
+	properties?: Record<string, Property>,
+	slots?: Record<string, Slot>,
+	events?: EventData,
+	fastNavigation?: boolean,
+	themeAware?: boolean,
+	languageAware?: boolean,
+};
+
+type State = Record<string, PropertyValue | Array<SlotValue>>;
 
 /**
  *
@@ -10,16 +50,18 @@ import { getEffectiveScopingSuffixForTag } from "./CustomElementsScope.js";
  * @public
  */
 class UI5ElementMetadata {
-	constructor(metadata) {
+	metadata: Metadata;
+	_initialState: State | undefined;
+
+	constructor(metadata: Metadata) {
 		this.metadata = metadata;
 	}
 
 	getInitialState() {
 		if (Object.prototype.hasOwnProperty.call(this, "_initialState")) {
-			return this._initialState;
+			return this._initialState!;
 		}
-
-		const initialState = {};
+		const initialState: State = {};
 		const slotsAreManaged = this.slotsAreManaged();
 
 		// Initialize properties
@@ -48,7 +90,7 @@ class UI5ElementMetadata {
 		// Initialize slots
 		if (slotsAreManaged) {
 			const slots = this.getSlots();
-			for (const [slotName, slotData] of Object.entries(slots)) { // eslint-disable-line
+			for (const [slotName, slotData] of Object.entries<Slot>(slots)) { // eslint-disable-line
 				const propertyName = slotData.propertyName || slotName;
 				initialState[propertyName] = [];
 			}
@@ -59,22 +101,26 @@ class UI5ElementMetadata {
 	}
 
 	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
+	 * Validates the property's value and returns it if correct
+	 * or returns the default value if not.
+	 * <b>Note:</b> Only intended for use by UI5Element.js
+	 * @public
 	 */
-	static validatePropertyValue(value, propData) {
+	static validatePropertyValue(value: PropertyValue, propData: Property) {
 		const isMultiple = propData.multiple;
-		if (isMultiple) {
-			return value.map(propValue => validateSingleProperty(propValue, propData));
+		if (isMultiple && value) {
+			return (value as Array<PropertyValue>).map((propValue: PropertyValue) => validateSingleProperty(propValue, propData));
 		}
 		return validateSingleProperty(value, propData);
 	}
 
 	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
+	 * Validates the slot's value and returns it if correct
+	 * or throws an exception if not.
+	 * <b>Note:</b> Only intended for use by UI5Element.js
+	 * @pubic
 	 */
-	static validateSlotValue(value, slotData) {
+	static validateSlotValue(value: Node, slotData: Slot) {
 		return validateSingleSlot(value, slotData);
 	}
 
@@ -83,7 +129,7 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	getPureTag() {
-		return this.metadata.tag;
+		return this.metadata.tag || "";
 	}
 
 	/**
@@ -92,30 +138,17 @@ class UI5ElementMetadata {
 	 */
 	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;
+		if (!pureTag) {
+			return "";
 		}
 
-		const suffix = getEffectiveScopingSuffixForTag(pureAltTag);
+		const suffix = getEffectiveScopingSuffixForTag(pureTag);
 		if (!suffix) {
-			return pureAltTag;
+			return pureTag;
 		}
 
-		return `${pureAltTag}-${suffix}`;
+		return `${pureTag}-${suffix}`;
 	}
 
 	/**
@@ -124,9 +157,9 @@ class UI5ElementMetadata {
 	 * @param propName
 	 * @returns {boolean}
 	 */
-	hasAttribute(propName) {
+	hasAttribute(propName: string) {
 		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
+		return propData.type !== Object && !propData.noAttribute && !propData.multiple;
 	}
 
 	/**
@@ -144,15 +177,7 @@ class UI5ElementMetadata {
 	 * @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 || {};
+		return this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase);
 	}
 
 	/**
@@ -177,7 +202,7 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	hasIndividualSlots() {
-		return this.slotsAreManaged() && Object.entries(this.getSlots()).some(([_slotName, slotData]) => slotData.individualSlots);
+		return this.slotsAreManaged() && Object.values(this.getSlots()).some(slotData => slotData.individualSlots);
 	}
 
 	/**
@@ -188,12 +213,23 @@ class UI5ElementMetadata {
 		return !!this.metadata.managedSlots;
 	}
 
+	/**
+	 * Determines whether this control supports F6 fast navigation
+	 * @public
+	 */
+	supportsF6FastNavigation() {
+		return !!this.metadata.fastNavigation;
+	}
+
 	/**
 	 * Returns an object with key-value pairs of properties and their metadata definitions
 	 * @public
 	 */
 	getProperties() {
-		return this.metadata.properties || {};
+		if (!this.metadata.properties) {
+			this.metadata.properties = {};
+		}
+		return this.metadata.properties;
 	}
 
 	/**
@@ -201,7 +237,21 @@ class UI5ElementMetadata {
 	 * @public
 	 */
 	getEvents() {
-		return this.metadata.events || {};
+		if (!this.metadata.events) {
+			this.metadata.events = {};
+		}
+		return this.metadata.events;
+	}
+
+	/**
+	 * Returns an object with key-value pairs of slots and their metadata definitions
+	 * @public
+	 */
+	 getSlots() {
+		if (!this.metadata.slots) {
+			this.metadata.slots = {};
+		}
+		return this.metadata.slots;
 	}
 
 	/**
@@ -212,6 +262,14 @@ class UI5ElementMetadata {
 		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
@@ -221,7 +279,7 @@ class UI5ElementMetadata {
 	 * @param name the name of the property/slot that changed
 	 * @returns {boolean}
 	 */
-	shouldInvalidateOnChildChange(slotName, type, name) {
+	shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string) {
 		const config = this.getSlots()[slotName].invalidateOnChildChange;
 
 		// invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component
@@ -281,27 +339,38 @@ class UI5ElementMetadata {
 	}
 }
 
-const validateSingleProperty = (value, propData) => {
+const validateSingleProperty = (value: PropertyValue, propData: Property) => {
 	const propertyType = propData.type;
+	let propertyValidator = propData.validator;
 
-	if (propertyType === Boolean) {
-		return typeof value === "boolean" ? value : false;
+	if (propertyType && (propertyType as typeof DataType).isDataTypeClass) {
+		propertyValidator = propertyType as typeof DataType;
+	}
+
+	if (propertyValidator) {
+		return (propertyValidator as typeof DataType).isValid(value) ? value : propData.defaultValue;
 	}
-	if (propertyType === String) {
+
+	if (!propertyType || propertyType === String) {
 		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
 	}
+
+	if (propertyType === Boolean) {
+		return typeof value === "boolean" ? value : false;
+	}
+
 	if (propertyType === Object) {
 		return typeof value === "object" ? value : propData.defaultValue;
 	}
-	if (isDescendantOf(propertyType, DataType)) {
-		return propertyType.isValid(value) ? value : propData.defaultValue;
-	}
+
+	// Check if "value" is part of the enum (propertyType) values and return the defaultValue if not found.
+	return value as string in propertyType ? value : propData.defaultValue;
 };
 
-const validateSingleSlot = (value, slotData) => {
-	value && getSlottedElements(value).forEach(el => {
+const validateSingleSlot = (value: Node, slotData: Slot) => {
+	value && getSlottedNodes(value).forEach(el => {
 		if (!(el instanceof slotData.type)) {
-			throw new Error(`${el} is not of type ${slotData.type}`);
+			throw new Error(`The element is not of type ${slotData.type.toString()}`);
 		}
 	});
 
@@ -309,3 +378,12 @@ const validateSingleSlot = (value, slotData) => {
 };
 
 export default UI5ElementMetadata;
+export type {
+	Property,
+	PropertyValue,
+	Slot,
+	SlotValue,
+	EventData,
+	State,
+	Metadata,
+};

package/src/animations/{AnimationQueue.js → AnimationQueue.ts}

@@ -1,19 +1,20 @@
-const tasks = new WeakMap();
+type TaskType =	() => Promise<void>;
+const tasks = new WeakMap<HTMLElement, Array<TaskType>>();
 
 class AnimationQueue {
 	static get tasks() {
 		return tasks;
 	}
 
-	static enqueue(element, task) {
+	static enqueue(element: HTMLElement, task: TaskType) {
 		if (!tasks.has(element)) {
 			tasks.set(element, []);
 		}
 
-		tasks.get(element).push(task);
+		tasks.get(element)!.push(task);
 	}
 
-	static run(element, task) {
+	static run(element: HTMLElement, task: TaskType): Promise<void> {
 		if (!tasks.has(element)) {
 			tasks.set(element, []);
 		}
@@ -21,14 +22,14 @@ class AnimationQueue {
 		return task().then(() => {
 			const elementTasks = tasks.get(element);
 
-			if (elementTasks.length > 0) {
-				return AnimationQueue.run(element, elementTasks.shift());
+			if (elementTasks!.length > 0) {
+				return AnimationQueue.run(element, elementTasks!.shift()!);
 			}
 			tasks.delete(element);
 		});
 	}
 
-	static push(element, task) {
+	static push(element: HTMLElement, task: TaskType) {
 		const elementTasks = tasks.get(element);
 
 		if (elementTasks) {

package/src/animations/animate.ts

@@ -0,0 +1,64 @@
+import AnimationQueue from "./AnimationQueue.js";
+
+type AnimateOptions = {
+	beforeStart?: () => void,
+	duration: number,
+	element: HTMLElement,
+	advance: (p: number) => void,
+};
+
+const animate = (options: AnimateOptions) => {
+	let start: number | null = null;
+	let stopped = false;
+	let animationFrame: number;
+	let stop: () => void;
+	let advanceAnimation: (timestamp: number) => void;
+
+	const promise = new Promise<void>((resolve, reject) => {
+		advanceAnimation = timestamp => {
+			start = start || timestamp;
+
+			const timeElapsed = timestamp - start;
+			const remaining = options.duration - timeElapsed;
+
+			if (timeElapsed <= options.duration) {
+				const currentAdvance = 1 - remaining / options.duration; // easing formula (currently linear)
+				options.advance(currentAdvance);
+				if (!stopped) {
+					animationFrame = requestAnimationFrame(advanceAnimation);
+				}
+			} else {
+				options.advance(1);
+				resolve();
+			}
+		};
+
+		stop = () => {
+			stopped = true;
+			cancelAnimationFrame(animationFrame);
+			reject(new Error("animation stopped"));
+		};
+	}).catch((reason: Error) => reason);
+
+	AnimationQueue.push(options.element, () => {
+		if (typeof options.beforeStart === "function") {
+			options.beforeStart();
+		}
+
+		requestAnimationFrame(advanceAnimation);
+
+		return new Promise(resolve => {
+			promise.then(() => resolve());
+		});
+	});
+
+	return {
+		promise: () => promise,
+		stop: () => stop,
+	};
+};
+const duration = 400;
+
+export { duration };
+export type { AnimateOptions };
+export default animate;

package/src/animations/scroll.ts

@@ -0,0 +1,21 @@
+import animate, { duration } from "./animate.js";
+
+const scroll = (element: HTMLElement, dx: number, dy: number) => {
+	let scrollLeft: number;
+	let scrollTop: number;
+
+	return animate({
+		beforeStart: () => {
+			scrollLeft = element.scrollLeft;
+			scrollTop = element.scrollTop;
+		},
+		duration,
+		element,
+		advance: progress => {
+			element.scrollLeft = scrollLeft + (progress * dx); // easing - linear
+			element.scrollTop = scrollTop + (progress * dy); // easing - linear
+		},
+	});
+};
+
+export default scroll;

package/src/animations/{slideDown.js → slideDown.ts}

@@ -1,23 +1,18 @@
-import animationConfig from "./config.js";
-import animate from "./animate.js";
+import animate, { duration } 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 slideDown = (element: HTMLElement) => {
+	let computedStyles: CSSStyleDeclaration,
+		paddingTop: number,
+		paddingBottom: number,
+		marginTop: number,
+		marginBottom: number,
+		height: number;
+	let storedOverflow: string,
+		storedPaddingTop: string,
+		storedPaddingBottom: string,
+		storedMarginTop: string,
+		storedMarginBottom: string,
+		storedHeight: string;
 
 	const animation = animate({
 		beforeStart: () => {
@@ -41,28 +36,24 @@ export default ({
 			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;
+			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);
-
+		advance: 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 */
+			element.style.paddingTop = `${(paddingTop * progress)}px`;
+			element.style.paddingBottom = `${(paddingBottom * progress)}px`;
+			element.style.marginTop = `${(marginTop * progress)}px`;
+			element.style.marginBottom = `${(marginBottom * progress)}px`;
+			element.style.height = `${(height * progress)}px`;
 		},
 	});
 
@@ -77,3 +68,5 @@ export default ({
 
 	return animation;
 };
+
+export default slideDown;

package/src/animations/{slideUp.js → slideUp.ts}

@@ -1,31 +1,27 @@
-import animationConfig from "./config.js";
-import animate from "./animate.js";
+import animate, { duration } from "./animate.js";
 
-export default ({
-	element = animationConfig.element,
-	duration = animationConfig.defaultDuration,
-	progress: progressCallback = animationConfig.identity,
-}) => {
+const slideUp = (element: HTMLElement) => {
 	// Get Computed styles
-	let computedStyles,
-		paddingTop,
-		paddingBottom,
-		marginTop,
-		marginBottom,
-		height;
+	let computedStyles: CSSStyleDeclaration,
+		paddingTop: number,
+		paddingBottom: number,
+		marginTop: number,
+		marginBottom: number,
+		height: number;
 
 	// Store inline styles
-	let storedOverflow,
-		storedPaddingTop,
-		storedPaddingBottom,
-		storedMarginTop,
-		storedMarginBottom,
-		storedHeight;
+	let storedOverflow: string,
+		storedPaddingTop: string,
+		storedPaddingBottom: string,
+		storedMarginTop: string,
+		storedMarginBottom: string,
+		storedHeight: string;
 
 	const animation = animate({
 		beforeStart: () => {
 			// Get Computed styles
-			computedStyles = getComputedStyle(element);
+			const el = element;
+			computedStyles = getComputedStyle(el);
 			paddingTop = parseFloat(computedStyles.paddingTop);
 			paddingBottom = parseFloat(computedStyles.paddingBottom);
 			marginTop = parseFloat(computedStyles.marginTop);
@@ -33,20 +29,18 @@ export default ({
 			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;
+			storedOverflow = el.style.overflow;
+			storedPaddingTop = el.style.paddingTop;
+			storedPaddingBottom = el.style.paddingBottom;
+			storedMarginTop = el.style.marginTop;
+			storedMarginBottom = el.style.marginBottom;
+			storedHeight = el.style.height;
 
-			element.style.overflow = "hidden";
+			el.style.overflow = "hidden";
 		},
 		duration,
 		element,
-		progress(progress) {
-			progressCallback(progress);
-
+		advance: progress => {
 			element.style.paddingTop = `${paddingTop - (paddingTop * progress)}px`;
 			element.style.paddingBottom = `${paddingBottom - (paddingBottom * progress)}px`;
 			element.style.marginTop = `${marginTop - (marginTop * progress)}px`;
@@ -55,8 +49,8 @@ export default ({
 		},
 	});
 
-	animation.promise().then(oReason => {
-		if (!(oReason instanceof Error)) {
+	animation.promise().then(reason => {
+		if (!(reason instanceof Error)) {
 			element.style.overflow = storedOverflow;
 			element.style.paddingTop = storedPaddingTop;
 			element.style.paddingBottom = storedPaddingBottom;
@@ -69,3 +63,5 @@ export default ({
 
 	return animation;
 };
+
+export default slideUp;