@ui5/webcomponents-base 0.0.0-9e104af01 → 0.0.0-a289c53b5

package/src/features/F6Navigation.ts

@@ -1,141 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import { isF6Next, isF6Previous } from "../Keys.js";
-import { instanceOfUI5Element } from "../UI5Element.js";
-import { getFirstFocusableElement } from "../util/FocusableElements.js";
-import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
-
-class F6Navigation {
-	static _instance: F6Navigation;
-	keydownHandler: (event: KeyboardEvent) => void;
-	selectedGroup: HTMLElement | null = null;
-	groups: Array<HTMLElement> = [];
-
-	constructor() {
-		this.keydownHandler = this._keydownHandler.bind(this) as (event: KeyboardEvent) => void;
-		this.attachEventListeners();
-	}
-
-	attachEventListeners() {
-		document.addEventListener("keydown", this.keydownHandler);
-	}
-
-	async _keydownHandler(event: KeyboardEvent) {
-		if (isF6Next(event)) {
-			this.updateGroups();
-
-			if (this.groups.length < 1) {
-				return;
-			}
-
-			event.preventDefault();
-
-			let nextIndex = -1;
-			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
-			}
-
-			if (nextIndex > -1) {
-				if (nextIndex + 1 >= this.groups.length) {
-					nextElement = this.groups[0];
-				} else {
-					nextElement = this.groups[nextIndex + 1];
-				}
-			} else {
-				nextElement = this.groups[0];
-			}
-
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
-
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
-			}
-		}
-
-		if (isF6Previous(event)) {
-			this.updateGroups();
-
-			if (this.groups.length < 1) {
-				return;
-			}
-
-			event.preventDefault();
-
-			let nextIndex = -1;
-			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
-			}
-
-			if (nextIndex > 0) {
-				// Handle the situation where the first focusable element of two neighbor groups is the same
-				// For example:
-				// <ui5-flexible-column-layout>
-				//     <ui5-list>
-				//         <ui5-li>List Item</ui5-li>
-				//     </ui5-list>
-				// </ui5-flexible-column-layout>
-				// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
-
-				const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
-				const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
-
-				nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
-			} else {
-				nextElement = this.groups[this.groups.length - 1];
-			}
-
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
-
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
-			}
-		}
-	}
-
-	removeEventListeners() {
-		document.removeEventListener("keydown", this.keydownHandler);
-	}
-
-	updateGroups() {
-		this.setSelectedGroup();
-		this.groups = getFastNavigationGroups(document.body);
-	}
-
-	setSelectedGroup(root: DocumentOrShadowRoot = window.document) {
-		const htmlElement = window.document.querySelector("html");
-		let element: Element | null | ParentNode = this.deepActive(root);
-
-		while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
-		   element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
-		}
-
-		this.selectedGroup = element as HTMLElement;
-	 }
-
-	 deepActive(root: DocumentOrShadowRoot): Element | null {
-		if (root.activeElement && root.activeElement.shadowRoot) {
-		   return this.deepActive(root.activeElement.shadowRoot);
-		}
-
-		return root.activeElement;
-	 }
-
-	destroy() {
-		this.removeEventListeners();
-	}
-
-	static init() {
-		if (!this._instance) {
-			this._instance = new F6Navigation();
-		}
-
-		return this._instance;
-	}
-}
-
-registerFeature("F6Navigation", F6Navigation);
-
-export default F6Navigation;

package/src/features/OpenUI5Element.ts

@@ -1,11 +0,0 @@
-import UI5Element from "../UI5Element.js";
-
-class OpenUI5Element extends UI5Element {
-	__isBusy?: boolean;
-	isOpenUI5Component?: boolean;
-	__suppressFocusIn?: () => void;
-	__suppressFocusBack?: (e: KeyboardEvent) => void;
-	__redirectFocus?: boolean;
-}
-
-export default OpenUI5Element;

package/src/features/OpenUI5Enablement.ts

@@ -1,117 +0,0 @@
-import { TemplateResult } from "lit-html";
-import { registerFeature } from "../FeaturesRegistry.js";
-import BusyIndicatorStyles from "../generated/css/BusyIndicator.css.js";
-import merge from "../thirdparty/merge.js";
-import {
-	isTabPrevious,
-} from "../Keys.js";
-
-import type UI5Element from "../UI5Element.js";
-import type OpenUI5Element from "./OpenUI5Element.js";
-
-const busyIndicatorMetadata = {
-	properties: {
-		__isBusy: {
-			type: Boolean,
-		},
-	},
-};
-
-class OpenUI5Enablement {
-	static wrapTemplateResultInBusyMarkup(html: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult, host: OpenUI5Element, templateResult: 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;
-	}
-
-	static enrichBusyIndicatorSettings(klass: typeof UI5Element) {
-		OpenUI5Enablement.enrichBusyIndicatorMetadata(klass);
-		OpenUI5Enablement.enrichBusyIndicatorMethods(klass.prototype);
-	}
-
-	static enrichBusyIndicatorMetadata(klass: typeof UI5Element) {
-		klass.metadata = merge(klass.metadata, busyIndicatorMetadata);
-	}
-
-	static enrichBusyIndicatorMethods(UI5ElementPrototype: typeof OpenUI5Element.prototype) {
-		Object.defineProperties(UI5ElementPrototype, {
-			"__redirectFocus": { value: true, writable: true },
-			"__suppressFocusBack": {
-				get() {
-					return {
-						handleEvent: (e: KeyboardEvent) => {
-							if (isTabPrevious(e)) {
-								const beforeElem = this.shadowRoot.querySelector("[busy-indicator-before-span]");
-								this.__redirectFocus = false;
-								beforeElem.focus();
-								this.__redirectFocus = true;
-							}
-						},
-						capture: true,
-						passive: false,
-					};
-				},
-			},
-			"isOpenUI5Component": { get: () => { return true; } },
-		});
-
-		UI5ElementPrototype.__suppressFocusIn = function handleFocusIn() {
-			const busyIndicator = this.shadowRoot?.querySelector("[busy-indicator]") as HTMLElement;
-			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 as typeof UI5Element).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)") as HTMLElement;
-			}
-
-			return children[0] as HTMLElement;
-		};
-	}
-
-	static getBusyIndicatorStyles() {
-		return BusyIndicatorStyles;
-	}
-}
-
-registerFeature("OpenUI5Enablement", OpenUI5Enablement);
-
-export default OpenUI5Enablement;

package/src/features/OpenUI5Support.ts

@@ -1,148 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import { setTheme } from "../config/Theme.js";
-import { getCurrentZIndex } from "../util/PopupUtils.js";
-import { CLDRData } from "../asset-registries/LocaleData.js";
-
-type OpenUI5Popup = {
-	setInitialZIndex: (zIndex: number) => void,
-	getNextZIndex: () => number,
-};
-
-type OpenUI5Core = {
-	attachInit: (callback: () => void) => void,
-	attachThemeChanged: (callback: () => Promise<void>) => void,
-	getConfiguration: () => OpenUI5CoreConfiguration,
-};
-
-type OpenUI5CoreConfiguration = {
-	getAnimationMode: () => string,
-	getLanguage: () => string,
-	getTheme: () => string,
-	getThemeRoot: () => string,
-	getRTL: () => string,
-	getCalendarType: () => string,
-	getLocale: () => string,
-};
-
-type LocaleData = {
-	getInstance: (locale: string) => Locale,
-}
-
-type Locale = {
-	getFirstDayOfWeek: () => number,
-	_get: () => CLDRData,
-};
-
-const getCore = () => {
-	return window.sap?.ui?.getCore?.() as OpenUI5Core;
-};
-
-class OpenUI5Support {
-	static isLoaded() {
-		return !!getCore();
-	}
-
-	static init() {
-		const core = getCore();
-		if (!core) {
-			return Promise.resolve();
-		}
-
-		return new Promise<void>(resolve => {
-			core.attachInit(() => {
-				window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData: LocaleData, Popup: OpenUI5Popup) => {
-					Popup.setInitialZIndex(getCurrentZIndex());
-					resolve();
-				});
-			});
-		});
-	}
-
-	static 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,
-			},
-		};
-	}
-
-	static getLocaleDataObject() {
-		const core = getCore();
-		if (!core) {
-			return;
-		}
-
-		const config = core.getConfiguration();
-		const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData") as LocaleData;
-		return LocaleData.getInstance(config.getLocale())._get();
-	}
-
-	static _listenForThemeChange() {
-		const core = getCore();
-		const config = core.getConfiguration();
-		core.attachThemeChanged(async () => {
-			await setTheme(config.getTheme());
-		});
-	}
-
-	static attachListeners() {
-		const core = getCore();
-		if (!core) {
-			return;
-		}
-
-		OpenUI5Support._listenForThemeChange();
-	}
-
-	static cssVariablesLoaded() {
-		const core = getCore();
-		if (!core) {
-			return;
-		}
-
-		const link = [...document.head.children].find(el => el.id === "sap-ui-theme-sap.ui.core") as HTMLLinkElement; // more reliable than querySelector early
-		if (!link) {
-			return;
-		}
-
-		return !!link.href.match(/\/css(-|_)variables\.css/);
-	}
-
-	static getNextZIndex() {
-		const core = getCore();
-		if (!core) {
-			return;
-		}
-
-		const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
-		return Popup.getNextZIndex();
-	}
-
-	static setInitialZIndex() {
-		const core = getCore();
-		if (!core) {
-			return;
-		}
-
-		const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
-		Popup.setInitialZIndex(getCurrentZIndex());
-	}
-}
-
-registerFeature("OpenUI5Support", OpenUI5Support);
-
-export default OpenUI5Support;

package/src/getSharedResource.ts

@@ -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 = <T>(namespace: string, initialValue: T): T => {
-	const parts = namespace.split(".");
-	let current = getSharedResourcesInstance() as Record<string, any>;
-
-	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 as T;
-};
-
-export default getSharedResource;

package/src/i18nBundle.ts

@@ -1,108 +0,0 @@
-import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
-import formatMessage from "./util/formatMessage.js";
-
-const I18nBundleInstances = new Map<string, I18nBundle>();
-
-let customGetI18nBundle: I18nBundleGetter;
-
-type I18nText = {
-	key: string,
-	defaultText: string,
-};
-
-type I18nBundleGetter = (packageName: string) => Promise<I18nBundle>;
-
-/**
- * @class
- * @public
- */
-class I18nBundle {
-	packageName: string;
-
-	constructor(packageName: string) {
-		this.packageName = packageName;
-	}
-
-	/**
-	 * Returns a text in the currently loaded language
-	 *
-	 * @public
-	 * @param {Object|String} textObj key/defaultText pair or just the key
-	 * @param params Values for the placeholders
-	 * @returns {string}
-	 */
-	getText(textObj: I18nText, ...params: Array<number | string>): string {
-		if (typeof textObj === "string") {
-			textObj = { key: textObj, defaultText: textObj };
-		}
-
-		if (!textObj || !textObj.key) {
-			return "";
-		}
-
-		const bundle = getI18nBundleData(this.packageName);
-		if (bundle && !bundle[textObj.key]) {
-			console.warn(`Key ${textObj.key} not found in the i18n bundle, the default text will be used`); // eslint-disable-line
-		}
-		const messageText = bundle && bundle[textObj.key] ? bundle[textObj.key] : (textObj.defaultText || textObj.key);
-
-		return formatMessage(messageText, params);
-	}
-}
-
-/**
- * Returns the I18nBundle instance for the given package synchronously.
- *
- * @public
- * @param packageName
- * @returns { I18nBundle }
- */
-const getI18nBundleSync = (packageName: string): I18nBundle => {
-	if (I18nBundleInstances.has(packageName)) {
-		return I18nBundleInstances.get(packageName)!;
-	}
-
-	const i18nBundle = new I18nBundle(packageName);
-	I18nBundleInstances.set(packageName, i18nBundle);
-	return i18nBundle;
-};
-
-/**
- * Fetches and returns the I18nBundle instance for the given package.
- *
- * @public
- * @param packageName
- * @returns { Promise<I18nBundle> }
- */
-const getI18nBundle = async (packageName: string): Promise<I18nBundle> => {
-	if (customGetI18nBundle) {
-		return customGetI18nBundle(packageName);
-	}
-
-	await fetchI18nBundle(packageName);
-	return getI18nBundleSync(packageName);
-};
-
-/**
- * Allows developers to provide a custom getI18nBundle implementation
- * If this function is called, the custom implementation will be used for all components and will completely
- * replace the default implementation.
- *
- * @public
- * @param customGet the function to use instead of the standard getI18nBundle implementation
- */
-const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter) => {
-	customGetI18nBundle = customGet;
-};
-
-export default I18nBundle;
-
-export {
-	registerI18nLoader,
-	getI18nBundle,
-	registerCustomI18nBundleGetter,
-};
-
-export type {
-	I18nText,
-};

package/src/locale/Locale.ts

@@ -1,101 +0,0 @@
-import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-
-const rLocale = /^((?:[A-Z]{2,3}(?:-[A-Z]{3}){0,3})|[A-Z]{4}|[A-Z]{5,8})(?:-([A-Z]{4}))?(?:-([A-Z]{2}|[0-9]{3}))?((?:-[0-9A-Z]{5,8}|-[0-9][0-9A-Z]{3})*)((?:-[0-9A-WYZ](?:-[0-9A-Z]{2,8})+)*)(?:-(X(?:-[0-9A-Z]{1,8})+))?$/i;
-
-class Locale {
-	sLocaleId: string;
-	sLanguage: string;
-	sScript: string;
-	sRegion: string;
-	sVariant: string | null;
-	sExtension: string | null;
-	sPrivateUse: string | null;
-
-	constructor(sLocaleId: string) {
-		const aResult = rLocale.exec(sLocaleId.replace(/_/g, "-"));
-		if (aResult === null) {
-			throw new Error(`The given language ${sLocaleId} does not adhere to BCP-47.`);
-		}
-		this.sLocaleId = sLocaleId;
-		this.sLanguage = aResult[1] || DEFAULT_LANGUAGE;
-		this.sScript = aResult[2] || "";
-		this.sRegion = aResult[3] || "";
-		this.sVariant = (aResult[4] && aResult[4].slice(1)) || null;
-		this.sExtension = (aResult[5] && aResult[5].slice(1)) || null;
-		this.sPrivateUse = aResult[6] || null;
-		if (this.sLanguage) {
-			this.sLanguage = this.sLanguage.toLowerCase();
-		}
-		if (this.sScript) {
-			this.sScript = this.sScript.toLowerCase().replace(/^[a-z]/, s => {
-				return s.toUpperCase();
-			});
-		}
-		if (this.sRegion) {
-			this.sRegion = this.sRegion.toUpperCase();
-		}
-	}
-
-	getLanguage() {
-		return this.sLanguage;
-	}
-
-	getScript() {
-		return this.sScript;
-	}
-
-	getRegion() {
-		return this.sRegion;
-	}
-
-	getVariant() {
-		return this.sVariant;
-	}
-
-	getVariantSubtags() {
-		return this.sVariant ? this.sVariant.split("-") : [];
-	}
-
-	getExtension() {
-		return this.sExtension;
-	}
-
-	getExtensionSubtags() {
-		return this.sExtension ? this.sExtension.slice(2).split("-") : [];
-	}
-
-	getPrivateUse() {
-		return this.sPrivateUse;
-	}
-
-	getPrivateUseSubtags() {
-		return this.sPrivateUse ? this.sPrivateUse.slice(2).split("-") : [];
-	}
-
-	hasPrivateUseSubtag(sSubtag: string) {
-		return this.getPrivateUseSubtags().indexOf(sSubtag) >= 0;
-	}
-
-	toString() {
-		const r = [this.sLanguage];
-
-		if (this.sScript) {
-			r.push(this.sScript);
-		}
-		if (this.sRegion) {
-			r.push(this.sRegion);
-		}
-		if (this.sVariant) {
-			r.push(this.sVariant);
-		}
-		if (this.sExtension) {
-			r.push(this.sExtension);
-		}
-		if (this.sPrivateUse) {
-			r.push(this.sPrivateUse);
-		}
-		return r.join("-");
-	}
-}
-
-export default Locale;

package/src/locale/RTLAwareRegistry.ts

@@ -1,16 +0,0 @@
-import type UI5Element from "../UI5Element";
-
-const rtlAwareSet = new Set<typeof UI5Element>();
-
-const markAsRtlAware = (klass: typeof UI5Element) => {
-	rtlAwareSet.add(klass);
-};
-
-const isRtlAware = (klass: typeof UI5Element) => {
-	return rtlAwareSet.has(klass);
-};
-
-export {
-	markAsRtlAware,
-	isRtlAware,
-};

package/src/locale/applyDirection.ts

@@ -1,18 +0,0 @@
-import { reRenderAllUI5Elements } from "../Render.js";
-import { fireDirectionChange } from "./directionChange.js";
-
-/**
- * Re-renders all RTL-aware UI5 Elements.
- *
- * <b>Note:</b> Call this method whenever you change the "dir" property anywhere in your HTML page.
- * <b>Example:</b> <code>document.body.dir = "rtl"; applyDirection();</code>
- * @public
- * @returns {Promise<void>}
- */
-const applyDirection = async (): Promise<void> => {
-	const listenersResults = fireDirectionChange();
-	await Promise.all(listenersResults);
-	await reRenderAllUI5Elements({ rtlAware: true });
-};
-
-export default applyDirection;