@ui5/webcomponents-base 1.9.3 → 1.10.0

package/src/asset-registries/Illustrations.js

@@ -1,59 +0,0 @@
-import getSharedResource from "../getSharedResource.js";
-
-const loaders = new Map();
-const registry = getSharedResource("SVGIllustration.registry", new Map());
-const illustrationPromises = getSharedResource("SVGIllustration.promises", new Map());
-const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
-
-const registerIllustration = (name, { dialogSvg, sceneSvg, spotSvg, set, title, subtitle } = {}) => { // eslint-disable-line
-	registry.set(`${set}/${name}`, {
-		dialogSvg,
-		sceneSvg,
-		spotSvg,
-		title,
-		subtitle,
-	});
-};
-
-const registerIllustrationLoader = async (illustrationName, loader) => {
-	loaders.set(illustrationName, loader);
-};
-
-const _loadIllustrationOnce = async illustrationName => {
-	if (!illustrationPromises.has(illustrationName)) {
-		if (!loaders.has(illustrationName)) {
-			throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module.`);
-		}
-		const loadIllustrations = loaders.get(illustrationName);
-		illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
-	}
-	return illustrationPromises.get(illustrationName);
-};
-
-const getIllustrationDataSync = nameProp => {
-	let set = "fiori";
-
-	if (nameProp.startsWith("Tnt")) {
-		set = "tnt";
-		nameProp = nameProp.replace(/^Tnt/, "");
-	}
-	return registry.get(`${set}/${nameProp}`);
-};
-
-const getIllustrationData = async illustrationName => {
-	let set = "fiori";
-
-	await _loadIllustrationOnce(illustrationName);
-	if (illustrationName.startsWith("Tnt")) {
-		set = "tnt";
-		illustrationName = illustrationName.replace(/^Tnt/, "");
-	}
-	return registry.get(`${set}/${illustrationName}`) || ILLUSTRATION_NOT_FOUND;
-};
-
-export {
-	getIllustrationDataSync,
-	registerIllustration,
-	registerIllustrationLoader,
-	getIllustrationData,
-};

package/src/config/AnimationMode.js

@@ -1,23 +0,0 @@
-import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
-import AnimationMode from "../types/AnimationMode.js";
-
-let animationMode;
-
-const getAnimationMode = () => {
-	if (animationMode === undefined) {
-		animationMode = getConfiguredAnimationMode();
-	}
-
-	return animationMode;
-};
-
-const setAnimationMode = newAnimationMode => {
-	if (Object.values(AnimationMode).includes(newAnimationMode)) {
-		animationMode = newAnimationMode;
-	}
-};
-
-export {
-	getAnimationMode,
-	setAnimationMode,
-};

package/src/config/FormatSettings.js

@@ -1,13 +0,0 @@
-import { getFormatSettings } from "../InitialConfiguration.js";
-
-let formatSettings;
-
-const getFirstDayOfWeek = () => {
-	if (formatSettings === undefined) {
-		formatSettings = getFormatSettings();
-	}
-
-	return formatSettings.firstDayOfWeek;
-};
-
-export { getFirstDayOfWeek }; // eslint-disable-line

package/src/config/NoConflict.js

@@ -1,51 +0,0 @@
-import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
-
-// Fire these events even with noConflict: true
-const excludeList = [
-	"value-changed",
-];
-
-const shouldFireOriginalEvent = eventName => {
-	return excludeList.includes(eventName);
-};
-
-let noConflict;
-
-const shouldNotFireOriginalEvent = eventName => {
-	const nc = getNoConflict();
-	return !(nc.events && nc.events.includes && nc.events.includes(eventName));
-};
-
-const getNoConflict = () => {
-	if (noConflict === undefined) {
-		noConflict = getConfiguredNoConflict();
-	}
-
-	return noConflict;
-};
-
-const skipOriginalEvent = eventName => {
-	const nc = getNoConflict();
-
-	// Always fire these events
-	if (shouldFireOriginalEvent(eventName)) {
-		return false;
-	}
-
-	// Read from the configuration
-	if (nc === true) {
-		return true;
-	}
-
-	return !shouldNotFireOriginalEvent(eventName);
-};
-
-const setNoConflict = noConflictData => {
-	noConflict = noConflictData;
-};
-
-export {
-	getNoConflict,
-	setNoConflict,
-	skipOriginalEvent,
-};

package/src/config/Theme.js

@@ -1,53 +0,0 @@
-import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
-import { reRenderAllUI5Elements } from "../Render.js";
-import applyTheme from "../theming/applyTheme.js";
-
-let theme;
-
-const getTheme = () => {
-	if (theme === undefined) {
-		theme = getConfiguredTheme();
-	}
-
-	return theme;
-};
-
-const setTheme = async newTheme => {
-	if (theme === newTheme) {
-		return;
-	}
-
-	theme = newTheme;
-
-	// Update CSS Custom Properties
-	await applyTheme(theme);
-	await reRenderAllUI5Elements({ themeAware: true });
-};
-
-/**
- * Returns if the given theme name is the one currently applied.
- * @private
- * @param {String}
- * @returns {boolean}
- */
-const isTheme = _theme => {
-	const currentTheme = getTheme();
-	return currentTheme === _theme || currentTheme === `${_theme}_exp`;
-};
-
-/**
- * Returns if the current theme is part of given theme family
- * @private
- * @param {String} the theme family
- * @returns {boolean}
- */
-const isThemeFamily = _theme => {
-	return getTheme().startsWith(_theme);
-};
-
-export {
-	getTheme,
-	setTheme,
-	isTheme,
-	isThemeFamily,
-};

package/src/delegate/ScrollEnablement.js

@@ -1,188 +0,0 @@
-import { supportsTouch } from "../Device.js";
-import EventProvider from "../EventProvider.js";
-import scroll from "../animations/scroll.js";
-
-const scrollEventName = "scroll";
-const touchEndEventName = supportsTouch() ? "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.supportsTouch = supportsTouch();
-
-		// 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.supportsTouch) {
-			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, disableAnimation) {
-		if (disableAnimation) {
-			this._container.scrollLeft += dx;
-			this._container.scrollTop += dy;
-			return;
-		}
-
-		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.supportsTouch ? touch.clientX : touch.x;
-		const y = this.supportsTouch ? touch.clientY : touch.y;
-
-		return x >= rect.left && x <= rect.right
-			&& y >= rect.top && y <= rect.bottom;
-	}
-
-	ontouchstart(event) {
-		const touch = this.supportsTouch ? event.touches[0] : null;
-
-		if (!this.supportsTouch) {
-			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.supportsTouch ? touch.pageX : event.x;
-		this._prevDragY = this.supportsTouch ? touch.pageY : event.y;
-
-		this._canScroll = this._isTouchInside(this.supportsTouch ? touch : event);
-	}
-
-	ontouchmove(event) {
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const touch = this.supportsTouch ? event.touches[0] : null;
-
-		const dragX = this.supportsTouch ? touch.pageX : event.x;
-		const dragY = this.supportsTouch ? 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.supportsTouch) {
-			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.supportsTouch ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.supportsTouch ? 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.supportsTouch) {
-			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
-			document.removeEventListener("mouseup", this.mouseUp);
-		}
-	}
-}
-
-export default ScrollEnablement;

package/src/features/OpenUI5Enablement.js

@@ -1,119 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import BusyIndicatorStyles from "../generated/css/BusyIndicator.css.js";
-import merge from "../thirdparty/merge.js";
-import {
-	isTabPrevious,
-} from "../Keys.js";
-
-const busyIndicatorMetadata = {
-	properties: {
-		__isBusy: {
-			type: Boolean,
-		},
-	},
-};
-
-const getBusyIndicatorStyles = () => {
-	return BusyIndicatorStyles;
-};
-
-const wrapTemplateResultInBusyMarkup = (html, host, templateResult) => {
-	if (host.isOpenUI5Component && host.__isBusy) {
-		templateResult = html`
-		<div class="busy-indicator-wrapper">
-			<span tabindex="0" busy-indicator-before-span @focusin=${host.__suppressFocusIn}></span>
-			${templateResult}
-			<div class="busy-indicator-overlay"></div>
-			<div busy-indicator
-				class="busy-indicator-busy-area"
-				tabindex="0"
-				role="progressbar"
-				@keydown=${host.__suppressFocusBack}
-				aria-valuemin="0"
-				aria-valuemax="100"
-				aria-valuetext="Busy">
-				<div>
-					<div class="busy-indicator-circle circle-animation-0"></div>
-					<div class="busy-indicator-circle circle-animation-1"></div>
-					<div class="busy-indicator-circle circle-animation-2"></div>
-				</div>
-			</div>
-		</div>`;
-	}
-
-	return templateResult;
-};
-
-const enrichBusyIndicatorMetadata = UI5Element => {
-	UI5Element.metadata = merge(UI5Element.metadata, busyIndicatorMetadata);
-};
-
-const enrichBusyIndicatorMethods = UI5ElementPrototype => {
-	Object.defineProperties(UI5ElementPrototype, {
-		"__redirectFocus": { value: true, writable: true },
-		"__suppressFocusBack": {
-			get() {
-				const that = this;
-
-				return {
-					handleEvent: e => {
-						if (isTabPrevious(e)) {
-							const beforeElem = that.shadowRoot.querySelector("[busy-indicator-before-span]");
-							that.__redirectFocus = false;
-							beforeElem.focus();
-							that.__redirectFocus = true;
-						}
-					},
-					capture: true,
-					passive: false,
-				};
-			},
-		},
-		"isOpenUI5Component": { get: () => { return true; } },
-	});
-
-	UI5ElementPrototype.__suppressFocusIn = function handleFocusIn() {
-		const busyIndicator = this.shadowRoot.querySelector("[busy-indicator]");
-		if (busyIndicator && this.__redirectFocus) {
-			busyIndicator.focus();
-		}
-	};
-
-	UI5ElementPrototype.getDomRef = function getDomRef() {
-		// If a component set _getRealDomRef to its children, use the return value of this function
-		if (typeof this._getRealDomRef === "function") {
-			return this._getRealDomRef();
-		}
-
-		if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
-			return;
-		}
-
-		const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
-
-		if (children.length !== 1) {
-			console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
-		}
-
-		if (this.__isBusy) {
-			return children[0].querySelector(".busy-indicator-wrapper > :not([busy-indicator-before-span]):not(.busy-indicator-overlay):not(.busy-indicator-busy-area)");
-		}
-
-		return children[0];
-	};
-};
-
-const enrichBusyIndicatorSettings = UI5Element => {
-	enrichBusyIndicatorMetadata(UI5Element);
-	enrichBusyIndicatorMethods(UI5Element.prototype);
-};
-
-const OpenUI5Enablement = {
-	enrichBusyIndicatorSettings,
-	wrapTemplateResultInBusyMarkup,
-	getBusyIndicatorStyles,
-};
-
-export default OpenUI5Enablement;
-
-registerFeature("OpenUI5Enablement", OpenUI5Enablement);

package/src/features/OpenUI5Support.js

@@ -1,126 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import { setTheme } from "../config/Theme.js";
-import { getCurrentZIndex } from "../util/PopupUtils.js";
-
-const getCore = () => {
-	const sap = window.sap;
-	const core = sap && sap.ui && typeof sap.ui.getCore === "function" && sap.ui.getCore();
-	return core;
-};
-
-const isLoaded = () => {
-	return !!getCore();
-};
-
-const init = () => {
-	const core = getCore();
-	if (!core) {
-		return Promise.resolve();
-	}
-
-	return new Promise(resolve => {
-		core.attachInit(() => {
-			window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData, Popup) => {
-				Popup.setInitialZIndex(getCurrentZIndex());
-				resolve();
-			});
-		});
-	});
-};
-
-const getConfigurationSettingsObject = () => {
-	const core = getCore();
-	if (!core) {
-		return;
-	}
-
-	const config = core.getConfiguration();
-	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
-
-	return {
-		animationMode: config.getAnimationMode(),
-		language: config.getLanguage(),
-		theme: config.getTheme(),
-		themeRoot: config.getThemeRoot(),
-		rtl: config.getRTL(),
-		calendarType: config.getCalendarType(),
-		formatSettings: {
-			firstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,
-		},
-	};
-};
-
-const getLocaleDataObject = () => {
-	const core = getCore();
-	if (!core) {
-		return;
-	}
-
-	const config = core.getConfiguration();
-	const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
-	return LocaleData.getInstance(config.getLocale())._get();
-};
-
-const listenForThemeChange = () => {
-	const core = getCore();
-	const config = core.getConfiguration();
-	core.attachThemeChanged(async () => {
-		await setTheme(config.getTheme());
-	});
-};
-
-const attachListeners = () => {
-	const core = getCore();
-	if (!core) {
-		return;
-	}
-
-	listenForThemeChange();
-};
-
-const cssVariablesLoaded = () => {
-	const core = getCore();
-	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 getNextZIndex = () => {
-	const core = getCore();
-	if (!core) {
-		return;
-	}
-
-	const Popup = window.sap.ui.require("sap/ui/core/Popup");
-	return Popup.getNextZIndex();
-};
-
-const setInitialZIndex = () => {
-	const core = getCore();
-	if (!core) {
-		return;
-	}
-
-	const Popup = window.sap.ui.require("sap/ui/core/Popup");
-	Popup.setInitialZIndex(getCurrentZIndex());
-};
-
-const OpenUI5Support = {
-	isLoaded,
-	init,
-	getConfigurationSettingsObject,
-	getLocaleDataObject,
-	attachListeners,
-	cssVariablesLoaded,
-	getNextZIndex,
-	setInitialZIndex,
-};
-
-registerFeature("OpenUI5Support", OpenUI5Support);

package/src/locale/RTLAwareRegistry.js

@@ -1,14 +0,0 @@
-const rtlAwareSet = new Set();
-
-const markAsRtlAware = klass => {
-	rtlAwareSet.add(klass);
-};
-
-const isRtlAware = klass => {
-	return rtlAwareSet.has(klass);
-};
-
-export {
-	markAsRtlAware,
-	isRtlAware,
-};

package/src/locale/languageChange.js

@@ -1,22 +0,0 @@
-import EventProvider from "../EventProvider.js";
-
-const eventProvider = new EventProvider();
-const LANG_CHANGE = "languageChange";
-
-const attachLanguageChange = listener => {
-	eventProvider.attachEvent(LANG_CHANGE, listener);
-};
-
-const detachLanguageChange = listener => {
-	eventProvider.detachEvent(LANG_CHANGE, listener);
-};
-
-const fireLanguageChange = lang => {
-	return eventProvider.fireEventAsync(LANG_CHANGE, lang);
-};
-
-export {
-	attachLanguageChange,
-	detachLanguageChange,
-	fireLanguageChange,
-};