@ui5/webcomponents-base 0.0.0-201dc9cbe → 0.0.0-20ff83d14

package/src/delegate/ItemNavigation.js

@@ -1,293 +0,0 @@
-import {
-	isDown,
-	isUp,
-	isLeft,
-	isRight,
-	isHome,
-	isEnd,
-} from "../Keys.js";
-import getActiveElement from "../util/getActiveElement.js";
-
-import EventProvider from "../EventProvider.js";
-import NavigationMode from "../types/NavigationMode.js";
-import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
-
-/**
- * The ItemNavigation class manages the calculations to determine the correct "tabindex" for a group of related items inside a root component.
- * Important: ItemNavigation only does the calculations and does not change "tabindex" directly, this is a responsibility of the developer.
- *
- * The keys that trigger ItemNavigation are:
- *  - Up/down
- *  - Left/right
- *  - Home/End
- *
- * Usage:
- * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
- *
- * Each item passed to ItemNavigation via "getItemsCallback" must be:
- *  - A) either a UI5Element with a "_tabIndex" property
- *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
- *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
- *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
- *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
- *  - C) a combination of the above
- *
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
- *
- * 2) Call the "update" method of ItemNavigation whenever you want to change the current item.
- * This is most commonly required if the user for example clicks on an item and thus selects it directly.
- * Pass as the only argument to "update" the item that becomes current (must be one of the items, returned by "getItemsCallback").
- *
- * @class
- * @public
- */
-class ItemNavigation extends EventProvider {
-	/**
-	 *
-	 * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)
-	 * @param options Object with configuration options:
-	 *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)
-	 *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)
-	 *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto
-	 *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items
-	 *    Static means that nothing happens if the user tries to navigate beyond the first/last item.
-	 *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.
-	 *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among
-	 *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate
-	 */
-	constructor(rootWebComponent, options = {}) {
-		super();
-
-		this.currentIndex = options.currentIndex || 0;
-		this.rowSize = options.rowSize || 1;
-		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-		const navigationMode = options.navigationMode;
-		const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
-		this.horizontalNavigationOn = autoNavigation || navigationMode === NavigationMode.Horizontal;
-		this.verticalNavigationOn = autoNavigation || navigationMode === NavigationMode.Vertical;
-
-		if (options.affectedPropertiesNames) {
-			this.affectedPropertiesNames = options.affectedPropertiesNames;
-		}
-
-		if (options.getItemsCallback) {
-			this._getItems = options.getItemsCallback;
-		}
-
-		this.rootWebComponent = rootWebComponent;
-		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
-		this.rootWebComponent._onComponentStateFinalized = () => {
-			this._init();
-		};
-	}
-
-	_init() {
-		this._getItems().forEach((item, idx) => {
-			item._tabIndex = (idx === this.currentIndex) ? "0" : "-1";
-		});
-	}
-
-	onkeydown(event) {
-		if (!this._canNavigate()) {
-			return;
-		}
-
-		if (isUp(event) && this.verticalNavigationOn) {
-			this._handleUp();
-		} else if (isDown(event) && this.verticalNavigationOn) {
-			this._handleDown();
-		} else if (isLeft(event) && this.horizontalNavigationOn) {
-			this._handleLeft();
-		} else if (isRight(event) && this.horizontalNavigationOn) {
-			this._handleRight();
-		} else if (isHome(event)) {
-			this._handleHome();
-		} else if (isEnd(event)) {
-			this._handleEnd();
-		} else {
-			return; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation
-		}
-
-		event.preventDefault();
-		this.update();
-		this.focusCurrent();
-	}
-
-	_handleUp() {
-		const itemsLength = this._getItems().length;
-		if (this.currentIndex - this.rowSize >= 0) { // no border reached, just decrease the index by a row
-			this.currentIndex -= this.rowSize;
-			return;
-		}
-
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column
-			const firstItemInThisColumnIndex = this.currentIndex % this.rowSize;
-			const firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this.rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)
-			const rows = Math.ceil(itemsLength / this.rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and rowSize=4 -> 4 rows total, although only 2 items on the last row)
-			let lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this.rowSize; // multiply rows by columns, and add the column's first item's index
-			if (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing
-				lastItemInPreviousColumnIndex -= this.rowSize;
-			}
-			this.currentIndex = lastItemInPreviousColumnIndex;
-		} else { // not cyclic, so just go to the first item
-			this.currentIndex = 0;
-		}
-	}
-
-	_handleDown() {
-		const itemsLength = this._getItems().length;
-		if (this.currentIndex + this.rowSize < itemsLength) { // no border reached, just increase the index by a row
-			this.currentIndex += this.rowSize;
-			return;
-		}
-
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column
-			const firstItemInThisColumnIndex = this.currentIndex % this.rowSize; // find the first item in the current column first
-			const firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this.rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column
-			this.currentIndex = firstItemInNextColumnIndex;
-		} else { // not cyclic, so just go to the last item
-			this.currentIndex = itemsLength - 1;
-		}
-	}
-
-	_handleLeft() {
-		const itemsLength = this._getItems().length;
-		if (this.currentIndex > 0) {
-			this.currentIndex -= 1;
-			return;
-		}
-
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
-			this.currentIndex = itemsLength - 1;
-		}
-	}
-
-	_handleRight() {
-		const itemsLength = this._getItems().length;
-		if (this.currentIndex < itemsLength - 1) {
-			this.currentIndex += 1;
-			return;
-		}
-
-		if (this.behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column
-			this.currentIndex = 0;
-		}
-	}
-
-	_handleHome() {
-		const homeEndRange = this.rowSize > 1 ? this.rowSize : this._getItems().length;
-		this.currentIndex -= this.currentIndex % homeEndRange;
-	}
-
-	_handleEnd() {
-		const homeEndRange = this.rowSize > 1 ? this.rowSize : this._getItems().length;
-		this.currentIndex += (homeEndRange - 1 - this.currentIndex % homeEndRange); // eslint-disable-line
-	}
-
-	/**
-	 * Call this method to set a new "current" (selected) item in the item navigation
-	 * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function
-	 *
-	 * @public
-	 * @param current the new selected item
-	 */
-	update(current) {
-		const origItems = this._getItems();
-
-		if (current) {
-			this.currentIndex = this._getItems().indexOf(current);
-		}
-
-		if (!origItems[this.currentIndex]
-			|| (origItems[this.currentIndex]._tabIndex && origItems[this.currentIndex]._tabIndex === "0")) {
-			return;
-		}
-
-		const items = origItems.slice(0);
-
-		for (let i = 0; i < items.length; i++) {
-			items[i]._tabIndex = (i === this.currentIndex ? "0" : "-1");
-		}
-
-		if (Array.isArray(this.affectedPropertiesNames)) {
-			this.affectedPropertiesNames.forEach(propName => {
-				const prop = this.rootWebComponent[propName];
-				this.rootWebComponent[propName] = Array.isArray(prop) ? [...prop] : { ...prop };
-			});
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	focusCurrent() {
-		const currentItem = this._getCurrentItem();
-		if (currentItem) {
-			currentItem.focus();
-		}
-	}
-
-	_canNavigate() {
-		const currentItem = this._getCurrentItem();
-		const activeElement = getActiveElement();
-
-		return currentItem && currentItem === activeElement;
-	}
-
-	_getCurrentItem() {
-		const items = this._getItems();
-
-		if (!items.length) {
-			return null;
-		}
-
-		// normalize the index
-		while (this.currentIndex >= items.length) {
-			this.currentIndex -= this.rowSize;
-		}
-
-		if (this.currentIndex < 0) {
-			this.currentIndex = 0;
-		}
-
-		const currentItem = items[this.currentIndex];
-
-		if (!currentItem) {
-			return;
-		}
-
-		if (currentItem.isUI5Element) {
-			return currentItem.getFocusDomRef();
-		}
-
-		if (!this.rootWebComponent.getDomRef()) {
-			return;
-		}
-
-		return this.rootWebComponent.getDomRef().querySelector(`#${currentItem.id}`);
-	}
-
-	/**
-	 * Set to callback that returns the list of items to navigate among
-	 * @public
-	 * @param callback a function that returns an array of items to navigate among
-	 */
-	set getItemsCallback(callback) {
-		this._getItems = callback;
-	}
-
-	/**
-	 * @public
-	 * @deprecated
-	 * @param val
-	 */
-	set current(val) {
-		this.currentIndex = val;
-	}
-}
-
-export default ItemNavigation;

package/src/delegate/ResizeHandler.js

@@ -1,106 +0,0 @@
-let resizeObserver;
-const observedElements = new Map();
-
-const getResizeObserver = () => {
-	if (!resizeObserver) {
-		resizeObserver = new window.ResizeObserver(entries => {
-			entries.forEach(entry => {
-				const callbacks = observedElements.get(entry.target);
-				callbacks.forEach(callback => callback());
-			});
-		});
-	}
-	return resizeObserver;
-};
-
-let observe = (element, callback) => {
-	const callbacks = observedElements.get(element) || [];
-
-	// if no callbacks have been added for this element - start observing it
-	if (!callbacks.length) {
-		getResizeObserver().observe(element);
-	}
-
-	// save the callbacks in an array
-	observedElements.set(element, [...callbacks, callback]);
-};
-
-let unobserve = (element, callback) => {
-	const callbacks = observedElements.get(element) || [];
-	if (callbacks.length === 0) {
-		return;
-	}
-
-	const filteredCallbacks = callbacks.filter(fn => fn !== callback);
-	if (filteredCallbacks.length === 0) {
-		getResizeObserver().unobserve(element);
-		observedElements.delete(element);
-	} else {
-		observedElements.set(element, filteredCallbacks);
-	}
-};
-
-/**
- * Allows to register/deregister resize observers for a DOM element
- *
- * @public
- * @class
-  */
-class ResizeHandler {
-	/**
-	 * @static
-	 * @public
-	 * @param {*} element UI5 Web Component or DOM Element to be observed
-	 * @param {*} callback Callback to be executed
-	 */
-	static register(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
-		}
-
-		if (element instanceof HTMLElement) {
-			observe(element, callback);
-		} else {
-			console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
-		}
-	}
-
-	/**
-	 * @static
-	 * @public
-	 * @param {*} element UI5 Web Component or DOM Element to be unobserved
-	 * @param {*} callback Callback to be removed
-	 */
-	static deregister(element, callback) {
-		if (element.isUI5Element) {
-			element = element.getDomRef();
-		}
-
-		if (element instanceof HTMLElement) {
-			unobserve(element, callback);
-		} else {
-			console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
-		}
-	}
-}
-
-/**
- * Set a function to be executed whenever a DOM node needs to be observed for size change.
- * @public
- * @param fn
- */
-const setResizeHandlerObserveFn = fn => {
-	observe = fn;
-};
-
-/**
- * Set a function to be executed whenever a DOM node needs to no longer be observed for size changes
- * @public
- * @param fn
- */
-const setResizeHandlerUnobserveFn = fn => {
-	unobserve = fn;
-};
-
-export default ResizeHandler;
-export { setResizeHandlerObserveFn, setResizeHandlerUnobserveFn };

package/src/delegate/ScrollEnablement.js

@@ -1,182 +0,0 @@
-import { isPhone } from "../Device.js";
-import EventProvider from "../EventProvider.js";
-import scroll from "../animations/scroll.js";
-
-const scrollEventName = "scroll";
-const touchEndEventName = isPhone() ? "touchend" : "mouseup";
-
-class ScrollEnablement extends EventProvider {
-	constructor(containerComponent) {
-		super();
-		this.containerComponent = containerComponent;
-		this.mouseMove = this.ontouchmove.bind(this);
-		this.mouseUp = this.ontouchend.bind(this);
-		this.touchStart = this.ontouchstart.bind(this);
-
-		this.isPhone = isPhone();
-
-		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
-		// so we have to cache the previus coordinates in order to provide correct parameters in the
-		// event for Android
-		this.cachedValue = {};
-
-		// In components like Carousel you need to know if the user has clicked on something or swiped
-		// in order to throw the needed event or not
-		this.startX = 0;
-		this.startY = 0;
-
-		if (this.isPhone) {
-			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
-			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
-			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
-		} else {
-			containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
-		}
-	}
-
-	set scrollContainer(container) {
-		this._container = container;
-	}
-
-	get scrollContainer() {
-		return this._container;
-	}
-
-	/**
-	 * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
-	 *
-	 * @param left
-	 * @param top
-	 * @param retryCount
-	 * @param retryInterval
-	 * @returns {Promise<void>} resolved when scrolled successfully
-	 */
-	async scrollTo(left, top, retryCount = 0, retryInterval = 0) {
-		let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
-
-		/* eslint-disable no-loop-func, no-await-in-loop */
-		while (!containerPainted && retryCount > 0) {
-			await new Promise(resolve => {
-				setTimeout(() => {
-					containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
-					retryCount--;
-					resolve();
-				}, retryInterval);
-			});
-		}
-		/* eslint-disable no-loop-func, no-await-in-loop */
-
-		this._container.scrollLeft = left;
-		this._container.scrollTop = top;
-	}
-
-	move(dx, dy) {
-		return scroll({
-			element: this._container,
-			dx,
-			dy,
-		});
-	}
-
-	getScrollLeft() {
-		return this._container.scrollLeft;
-	}
-
-	getScrollTop() {
-		return this._container.scrollTop;
-	}
-
-	_isTouchInside(touch) {
-		const rect = this._container.getBoundingClientRect();
-		const x = this.isPhone ? touch.clientX : touch.x;
-		const y = this.isPhone ? touch.clientY : touch.y;
-
-		return x >= rect.left && x <= rect.right
-			&& y >= rect.top && y <= rect.bottom;
-	}
-
-	ontouchstart(event) {
-		const touch = this.isPhone ? event.touches[0] : null;
-
-		if (!this.isPhone) {
-			document.addEventListener("mouseup", this.mouseUp, { passive: true });
-			document.addEventListener("mousemove", this.mouseMove, { passive: true });
-		} else {
-			// Needed only on mobile
-			this.startX = touch.pageX;
-			this.startY = touch.pageY;
-		}
-
-		this._prevDragX = this.isPhone ? touch.pageX : event.x;
-		this._prevDragY = this.isPhone ? touch.pageY : event.y;
-
-		this._canScroll = this._isTouchInside(this.isPhone ? touch : event);
-	}
-
-	ontouchmove(event) {
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const touch = this.isPhone ? event.touches[0] : null;
-
-		const dragX = this.isPhone ? touch.pageX : event.x;
-		const dragY = this.isPhone ? touch.pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		this.fireEvent(scrollEventName, {
-			isLeft: dragX > this._prevDragX,
-			isRight: dragX < this._prevDragX,
-		});
-
-		this.cachedValue.dragX = this._prevDragX;
-		this.cachedValue.dragY = this._prevDragY;
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-	}
-
-	ontouchend(event) {
-		if (this.isPhone) {
-			const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
-			const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
-
-			if (deltaX < 10 && deltaY < 10) {
-				return;
-			}
-		}
-
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const dragX = this.isPhone ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.isPhone ? event.changedTouches[0].pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		const useCachedValues = dragX === this._prevDragX;
-		const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
-		// const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
-
-		this.fireEvent(touchEndEventName, {
-			isLeft: _dragX < this._prevDragX,
-			isRight: _dragX > this._prevDragX,
-		});
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-
-		if (!this.isPhone) {
-			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
-			document.removeEventListener("mouseup", this.mouseUp);
-		}
-	}
-}
-
-export default ScrollEnablement;

package/src/features/OpenUI5Support.js

@@ -1,90 +0,0 @@
-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 ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,
-		},
-	};
-};
-
-const getLocaleDataObject = () => {
-	if (!core) {
-		return;
-	}
-
-	const config = core.getConfiguration();
-	const LocaleData = sap.ui.require("sap/ui/core/LocaleData");
-	return LocaleData.getInstance(config.getLocale())._get();
-};
-
-const listenForThemeChange = () => {
-	const config = core.getConfiguration();
-	core.attachThemeChanged(async () => {
-		await setTheme(config.getTheme());
-	});
-};
-
-const attachListeners = () => {
-	if (!core) {
-		return;
-	}
-
-	listenForThemeChange();
-};
-
-const cssVariablesLoaded = () => {
-	if (!core) {
-		return;
-	}
-
-	const link = [...document.head.children].find(el => el.id === "sap-ui-theme-sap.ui.core"); // more reliable than querySelector early
-	if (!link) {
-		return;
-	}
-
-	return !!link.href.match(/\/css(-|_)variables\.css/);
-};
-
-const OpenUI5Support = {
-	isLoaded,
-	init,
-	getConfigurationSettingsObject,
-	getLocaleDataObject,
-	attachListeners,
-	cssVariablesLoaded,
-};
-
-registerFeature("OpenUI5Support", OpenUI5Support);

package/src/getSharedResource.js

@@ -1,30 +0,0 @@
-import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
-
-const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
-
-/**
- * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
- * The data will be accessed via a singleton "ui5-shared-resources" HTML element in the "head" element of the page.
- *
- * @public
- * @param namespace Unique ID of the resource, may contain "." to denote hierarchy
- * @param initialValue Object or primitive that will be used as an initial value if the resource does not exist
- * @returns {*}
- */
-const getSharedResource = (namespace, initialValue) => {
-	const parts = namespace.split(".");
-	let current = getSharedResourcesInstance();
-
-	for (let i = 0; i < parts.length; i++) {
-		const part = parts[i];
-		const lastPart = i === parts.length - 1;
-		if (!Object.prototype.hasOwnProperty.call(current, part)) {
-			current[part] = lastPart ? initialValue : {};
-		}
-		current = current[part];
-	}
-
-	return current;
-};
-
-export default getSharedResource;