@ui5/webcomponents-base 0.0.0-4b10f4f3c → 0.0.0-4b9b0ab7c

package/src/config/FormatSettings.ts

@@ -0,0 +1,35 @@
+import LegacyDateFormats from "../features/LegacyDateFormats.js";
+import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
+import { getFormatSettings } from "../InitialConfiguration.js";
+import { getFeature } from "../FeaturesRegistry.js";
+
+type FormatSettings = {
+	firstDayOfWeek?: number,
+	legacyDateCalendarCustomizing?: LegacyDateCalendarCustomizing,
+};
+
+let formatSettings: FormatSettings;
+
+/**
+ * Returns the first day of the week from the configured format settings or based on the current locale.
+ * @public
+ * @returns {Number} 0 (Sunday) through 6 (Saturday)
+ */
+const getFirstDayOfWeek = (): number | undefined => {
+	if (formatSettings === undefined) {
+		formatSettings = getFormatSettings();
+	}
+
+	return formatSettings.firstDayOfWeek;
+};
+
+const legacyDateFormats = getFeature<typeof LegacyDateFormats>("LegacyDateFormats");
+
+const getLegacyDateCalendarCustomizing = legacyDateFormats ? LegacyDateFormats.getLegacyDateCalendarCustomizing : () => { return []; };
+
+export {
+	getFirstDayOfWeek,
+	getLegacyDateCalendarCustomizing,
+};
+
+export type { FormatSettings };

package/src/config/Icons.ts

@@ -0,0 +1,126 @@
+import { getTheme, isThemeFamily } from "./Theme.js";
+import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
+
+const IconCollectionConfiguration = new Map<string, string>();
+
+// All supported icon collections + unknown custom ones
+type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | "business-suite-v1" | "business-suite-v2" | string;
+
+// All registered icon collections - all icon collections resolves to these options at the end
+enum RegisteredIconCollection {
+	SAPIconsV4 = "SAP-icons-v4",
+	SAPIconsV5 = "SAP-icons-v5",
+	SAPIconsTNTV2 = "tnt-v2",
+	SAPIconsTNTV3 = "tnt-v3",
+	SAPBSIconsV1 = "business-suite-v1",
+	SAPBSIconsV2 = "business-suite-v2",
+}
+
+/**
+ * Sets the default icon collection for a given theme.
+ *
+ * SAP Icons is the default icon collection (that resolves to SAP-icons version 5.x in Horizon theme family and SAP-icons version 4.x in all other themes)
+ * and to display icons from other collections, you have to specify the icon collection in addition to the icon name, for example: "tnt/actor", "business-suite/1x2-grid-layout", etc.
+ * This method allows setting another (built-in or custom) icon collection as default per theme.
+ *
+ * <b>Usage</b>
+ * <b>For example</b>, to make "SAP-icons version 5.x" the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "SAP-icons-v5");
+ *
+ * <ui5-icon name="home"></ui5-icon>
+ * </pre>
+ *
+ * <b>For example</b>, to make a custom icon collection (with name "my-custom-collection") the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "my-custom-collection");
+ *
+ * <ui5-icon name="custom-icon-name"></ui5-icon>
+ * </pre>
+ *
+ * @public
+ * @param { string } theme
+ * @param { string } collectionName
+ */
+const setDefaultIconCollection = (theme: string, collectionName: IconCollection) => {
+	IconCollectionConfiguration.set(theme, collectionName);
+};
+
+/**
+ * Returns the configured default icon collection for a given theme.
+ *
+ * @param { string } theme
+ * @public
+ * @returns { string | undefined }
+ */
+const getDefaultIconCollection = (theme: string): string | undefined => {
+	return IconCollectionConfiguration.get(theme);
+};
+
+/**
+ * Returns the effective icon collection,
+ * based on the default icon collection configuration and the current theme:
+ * @param { IconCollection } collectionName
+ * @returns { IconCollection } the effective collection name
+ */
+const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollection => {
+	const currentTheme = getTheme();
+	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
+
+	// when no collection is set and default collection is configured - return the configured icon collection
+	if (!collectionName && currentThemeConfiguration) {
+		return getIconCollectionByAlias(currentThemeConfiguration);
+	}
+
+	// when collection is set - return the theme dependant icon collection
+	// when collection is not set and there is no default icon collection configured - return theme dependant icon collection
+	return getIconCollectionByTheme(collectionName);
+};
+
+/**
+ * Returns the icon theme dependant collection, based on the collection name and current theme as follows:
+ *
+ * - "no collection" resolves to "SAP-icons-v4" in "Quartz" and "Belize", and to "SAP-icons-v5" in "Horizon" (or as confugred via setDefaultIconCollection)
+ * - "SAP-icons-v4" (and its alias "SAP-icons") forces "SAP-icons v4" in any theme and resolves to itself "SAP-icons-v4"
+ * - "SAP-icons-v5" (and its alias "horizon") forces  "SAP-icons v5" in any theme and resolves to itself "SAP-icons-v5"
+ * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
+ * - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
+ * - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
+ * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
+ * - "business-suite-v1" forces "Business Suite icons v1" in any theme and resolves to itself "business-suite-v1"
+ * - "business-suite-v2" forces "Business Suite icons v2" in any theme and resolves to itself "business-suite-v2"
+ *
+ * <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3", "business-suite-v1" and "business-suite-v2" are just returned
+ * @param { IconCollection } collectionName
+ * @returns { RegisteredIconCollection } the registered collection name
+ */
+const getIconCollectionByTheme = (collectionName?: IconCollection): RegisteredIconCollection => {
+	const horizonThemeFamily = isThemeFamily("sap_horizon");
+
+	if (!collectionName) {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsV5 : RegisteredIconCollection.SAPIconsV4;
+	}
+
+	if (collectionName === "tnt") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
+	}
+
+	if (collectionName === "business-suite") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPBSIconsV2 : RegisteredIconCollection.SAPBSIconsV1;
+	}
+
+	return collectionName as RegisteredIconCollection;
+};
+
+export {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveIconCollection,
+	RegisteredIconCollection,
+};
+
+export type {
+	IconCollection,
+};

package/src/config/Language.ts

@@ -0,0 +1,72 @@
+import {
+	getLanguage as getConfiguredLanguage,
+	getFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,
+} from "../InitialConfiguration.js";
+import { fireLanguageChange } from "../locale/languageChange.js";
+import { reRenderAllUI5Elements } from "../Render.js";
+
+let curLanguage: string | undefined;
+let fetchDefaultLanguage: boolean;
+
+/**
+ * Returns the currently configured language, or the browser language as a fallback.
+ * @public
+ * @returns {string}
+ */
+const getLanguage = (): string | undefined => {
+	if (curLanguage === undefined) {
+		curLanguage = getConfiguredLanguage();
+	}
+	return curLanguage;
+};
+
+/**
+ * Changes the current language, re-fetches all message bundles, updates all language-aware components
+ * and returns a promise that resolves when all rendering is done.
+ *
+ * @param {string} language
+ * @public
+ * @returns {Promise<void>}
+ */
+const setLanguage = async (language: string): Promise<void> => {
+	if (curLanguage === language) {
+		return;
+	}
+
+	curLanguage = language;
+
+	await fireLanguageChange(language);
+	await reRenderAllUI5Elements({ languageAware: true });
+};
+
+/**
+ * Defines if the default language, that is inlined, should be
+ * fetched over the network instead of using the inlined one.
+ * <b>Note:</b> By default the language will not be fetched.
+ *
+ * @public
+ * @param {boolean} fetchDefaultLang
+ */
+const setFetchDefaultLanguage = (fetchDefaultLang: boolean) => {
+	fetchDefaultLanguage = fetchDefaultLang;
+};
+
+/**
+ * Returns if the default language, that is inlined, should be fetched over the network.
+ * @public
+ * @returns {boolean}
+ */
+const getFetchDefaultLanguage = (): boolean => {
+	if (fetchDefaultLanguage === undefined) {
+		setFetchDefaultLanguage(getConfiguredFetchDefaultLanguage());
+	}
+
+	return fetchDefaultLanguage;
+};
+
+export {
+	getLanguage,
+	setLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+};

package/src/config/NoConflict.ts

@@ -0,0 +1,67 @@
+import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
+
+// Fire these events even with noConflict: true
+const excludeList = [
+	"value-changed",
+];
+
+type NoConflictData = boolean | { events: Array<string>};
+
+let noConflict: NoConflictData;
+
+const shouldFireOriginalEvent = (eventName: string) => {
+	return excludeList.includes(eventName);
+};
+
+const shouldNotFireOriginalEvent = (eventName: string) => {
+	const nc = getNoConflict();
+	// return !(nc.events && nc.events.includes && nc.events.includes(eventName));
+	return !(typeof nc !== "boolean" && nc.events && nc.events.includes && nc.events.includes(eventName));
+};
+
+/**
+ * Returns if the "noConflict" configuration is set.
+ * @public
+ * @returns { NoConflictData }
+ */
+const getNoConflict = (): NoConflictData => {
+	if (noConflict === undefined) {
+		noConflict = getConfiguredNoConflict();
+	}
+
+	return noConflict;
+};
+
+/**
+ * Sets the "noConflict" mode.
+ * - When "false" (default value), all custom events are fired with and without the "ui5-" prefix.
+ * - When "true", all custom events are fired with the "ui5-" prefix only.
+ * - When an object is supplied, just the specified events will be fired with the "ui5-" prefix.
+ * @public
+ * @param { NoConflictData } noConflictData
+ */
+const setNoConflict = (noConflictData: NoConflictData) => {
+	noConflict = noConflictData;
+};
+
+const skipOriginalEvent = (eventName: string) => {
+	const nc = getNoConflict();
+
+	// Always fire these events
+	if (shouldFireOriginalEvent(eventName)) {
+		return false;
+	}
+
+	// Read from the configuration
+	if (nc === true) {
+		return true;
+	}
+
+	return !shouldNotFireOriginalEvent(eventName);
+};
+
+export {
+	getNoConflict,
+	setNoConflict,
+	skipOriginalEvent,
+};

package/src/config/{RTL.js → RTL.ts}

@@ -12,16 +12,30 @@ const M_ISO639_OLD_TO_NEW = {
 
 const A_RTL_LOCALES = getDesigntimePropertyAsArray("$cldr-rtl-locales:ar,fa,he$") || [];
 
-const impliesRTL = language => {
-	language = (language && M_ISO639_OLD_TO_NEW[language]) || language;
+/**
+ * Checks whether the language is using RTL
+ * @param {string} language
+ * @returns {boolean} whether the language is using RTL
+ */
+const impliesRTL = (language: string) => {
+	language = (language && M_ISO639_OLD_TO_NEW[language as keyof typeof M_ISO639_OLD_TO_NEW]) || language;
 
 	return A_RTL_LOCALES.indexOf(language) >= 0;
 };
 
-const getRTL = () => {
+/**
+ * Gets the effective RTL setting by first checking the configuration
+ * and if not set using the currently set language or the navigator language if the language is not explicitly set.
+ * @returns {boolean} whether RTL should be used
+ */
+const getRTL = (): boolean => {
+	if (typeof document === "undefined") {
+		return false;
+	}
+
 	const configurationRTL = getConfiguredRTL();
 
-	if (configurationRTL !== null) {
+	if (configurationRTL !== undefined) {
 		return !!configurationRTL;
 	}
 

package/src/config/Theme.ts

@@ -0,0 +1,64 @@
+import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
+import { reRenderAllUI5Elements } from "../Render.js";
+import applyTheme from "../theming/applyTheme.js";
+
+let curTheme: string;
+
+/**
+ * Returns the current theme.
+ * @public
+ * @returns {string} the current theme name
+ */
+const getTheme = (): string => {
+	if (curTheme === undefined) {
+		curTheme = getConfiguredTheme();
+	}
+
+	return curTheme;
+};
+
+/**
+ * Applies a new theme after fetching its assets from the network.
+ * @public
+ * @param {string} theme the name of the new theme
+ * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM
+ */
+const setTheme = async (theme: string): Promise<void> => {
+	if (curTheme === theme) {
+		return;
+	}
+
+	curTheme = theme;
+
+	// Update CSS Custom Properties
+	await applyTheme(curTheme);
+	await reRenderAllUI5Elements({ themeAware: true });
+};
+
+/**
+ * Returns if the given theme name is the one currently applied.
+ * @private
+ * @param {string} theme
+ * @returns {boolean}
+ */
+const isTheme = (theme: string) => {
+	const currentTheme = getTheme();
+	return currentTheme === theme || currentTheme === `${theme}_exp`;
+};
+
+/**
+ * Returns if the current theme is part of given theme family.
+ * @private
+ * @param {string} theme the theme family
+ * @returns {boolean}
+ */
+const isThemeFamily = (theme: string) => {
+	return getTheme().startsWith(theme);
+};
+
+export {
+	getTheme,
+	setTheme,
+	isTheme,
+	isThemeFamily,
+};

package/src/config/ThemeRoots.ts

@@ -0,0 +1,41 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+
+let themeRoot: string | undefined;
+
+const getThemeRoot = (): string | undefined => {
+	if (themeRoot === undefined) {
+		themeRoot = getConfiguredThemeRoot();
+	}
+
+	return themeRoot;
+};
+
+const setThemeRoot = (theme: string, newThemeRoot: string) => {
+	themeRoot = validateThemeRoot(newThemeRoot);
+
+	if (themeRoot) {
+		attachCustomThemeStylesToHead(theme);
+	}
+};
+
+const formatThemeLink = (theme: string) => {
+	return `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set.
+};
+
+const attachCustomThemeStylesToHead = async (theme: string) => {
+	const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+
+	if (link) {
+		document.head.removeChild(link);
+	}
+
+	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+
+export {
+	getThemeRoot,
+	setThemeRoot,
+	attachCustomThemeStylesToHead,
+};

package/src/css/BusyIndicator.css

@@ -0,0 +1,80 @@
+.busy-indicator-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.busy-indicator-overlay {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    inset: 0;
+    background: var(--ui5_web_components_busy_indicator_background-color);
+    z-index: 99;
+}
+
+.busy-indicator-busy-area {
+    display: var(--ui5_web_components_busy_indicator_display);
+    position: absolute;
+    z-index: 99;
+    inset: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+    flex-direction: column;
+    color: var(--_ui5_busy_indicator_color);
+}
+
+:host([__is-busy]) .busy-indicator-wrapper > :not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]) {
+    --ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-busy-area:focus {
+    outline: var(--_ui5_busy_indicator_focus_outline);
+    outline-offset: -.125rem;
+}
+
+.busy-indicator-circle {
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    background-color: currentColor;
+    border-radius: 50%;
+}
+
+.circle-animation-0 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+}
+
+.circle-animation-1 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 200ms;
+}
+
+.circle-animation-2 {
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+    animation-delay: 400ms;
+}
+
+.sapUiLocalBusy {
+	--ui5_web_components_busy_indicator_display: none;
+}
+
+.busy-indicator-wrapper [ui5-busy-indicator] {
+    display: none;
+}
+
+@keyframes grow {
+    0%, 50%, 100% {
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+}

package/src/css/FontFace.css

@@ -0,0 +1,66 @@
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 400;
+    src: local("72"),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 400;
+    src: local('72-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2");
+
+}
+
+@font-face {
+    font-family: "72";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72full";
+    font-style: normal;
+    font-weight: 700;
+    src: local('72-Bold-full'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Bold';
+    font-style: normal;
+    src: local('72-Bold'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Boldfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Light';
+    font-style: normal;
+    src: local('72-Light'),
+        url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: '72-Lightfull';
+    font-style: normal;
+    src: url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2");
+}
+
+@font-face {
+    font-family: "72Black";
+    font-style: bold;
+    font-weight: 900;
+    src: local('72Black'),
+    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
+}

package/src/css/OverrideFontFace.css

@@ -0,0 +1,32 @@
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+@font-face {
+    font-family: '72override';
+    unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+    src: local('Arial'), local('Helvetica'), local('sans-serif');
+}

package/src/css/SystemCSSVars.css

@@ -0,0 +1,17 @@
+:root {
+    --_ui5_content_density:cozy;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+    --_ui5_content_density:compact;
+}
+
+[dir="rtl"] {
+    --_ui5_dir:rtl;
+}
+
+[dir="ltr"] {
+    --_ui5_dir:ltr;
+}