@ui5/webcomponents-base 0.0.0-5b79982e1 → 0.0.0-5e31d3069

package/src/locale/normalizeLocale.js

@@ -1,54 +0,0 @@
-import { DEFAULT_LOCALE } from "../generated/AssetParameters.js";
-
-const localeRegEX = /^((?:[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;
-const SAPSupportabilityLocales = /(?:^|-)(saptrc|sappsd)(?:-|$)/i;
-
-/* Map for old language names for a few ISO639 codes. */
-const M_ISO639_NEW_TO_OLD = {
-	"he": "iw",
-	"yi": "ji",
-	"id": "in",
-	"sr": "sh",
-};
-
-/**
- * Normalizes the given locale in BCP-47 syntax.
- * @param {string} locale locale to normalize
- * @returns {string} Normalized locale, "undefined" if the locale can't be normalized or the default locale, if no locale provided.
- */
-const normalizeLocale = locale => {
-	let m;
-
-	if (!locale) {
-		return DEFAULT_LOCALE;
-	}
-
-	if (typeof locale === "string" && (m = localeRegEX.exec(locale.replace(/_/g, "-")))) {/* eslint-disable-line */
-		let language = m[1].toLowerCase();
-		let region = m[3] ? m[3].toUpperCase() : undefined;
-		const script = m[2] ? m[2].toLowerCase() : undefined;
-		const variants = m[4] ? m[4].slice(1) : undefined;
-		const isPrivate = m[6];
-
-		language = M_ISO639_NEW_TO_OLD[language] || language;
-
-		// recognize and convert special SAP supportability locales (overwrites m[]!)
-		if ((isPrivate && (m = SAPSupportabilityLocales.exec(isPrivate))) /* eslint-disable-line */ ||
-			(variants && (m = SAPSupportabilityLocales.exec(variants)))) {/* eslint-disable-line */
-			return `en_US_${m[1].toLowerCase()}`; // for now enforce en_US (agreed with SAP SLS)
-		}
-
-		// Chinese: when no region but a script is specified, use default region for each script
-		if (language === "zh" && !region) {
-			if (script === "hans") {
-				region = "CN";
-			} else if (script === "hant") {
-				region = "TW";
-			}
-		}
-
-		return language + (region ? "_" + region + (variants ? "_" + variants.replace("-", "_") : "") : ""); /* eslint-disable-line */
-	}
-};
-
-export default normalizeLocale;

package/src/renderer/LitRenderer.js

@@ -1,31 +0,0 @@
-import { html, svg, render } from "lit-html/lit-html.js";
-import scopeHTML from "./scopeHTML.js";
-
-let tags;
-let	suffix;
-
-const setTags = t => {
-	tags = t;
-};
-const setSuffix = s => {
-	suffix = s;
-};
-
-const litRender = (templateResult, domNode, styles, { eventContext } = {}) => {
-	if (styles) {
-		templateResult = html`<style>${styles}</style>${templateResult}`;
-	}
-	render(templateResult, domNode, { eventContext });
-};
-
-const scopedHtml = (strings, ...values) => html(scopeHTML(strings, tags, suffix), ...values);
-const scopedSvg = (strings, ...values) => svg(scopeHTML(strings, tags, suffix), ...values);
-
-export { setTags, setSuffix };
-export { scopedHtml as html, scopedSvg as svg };
-export { repeat } from "lit-html/directives/repeat.js";
-export { classMap } from "lit-html/directives/class-map.js";
-export { styleMap } from "lit-html/directives/style-map.js";
-export { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-
-export default litRender;

package/src/renderer/executeTemplate.js

@@ -1,17 +0,0 @@
-import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScope.js";
-
-/**
- * Runs a component's template with the component's current state, while also scoping HTML
- *
- * @param template - the template to execute
- * @param component - the component
- * @public
- * @returns {*}
- */
-const executeTemplate = (template, component) => {
-	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
-	const scope = getCustomElementsScopingSuffix();
-	return template(component, tagsToScope, scope);
-};
-
-export default executeTemplate;

package/src/renderer/ifDefined.js

@@ -1,21 +0,0 @@
-import {
-	AttributePart,
-	directive,
-	noChange,
-} from "lit-html/lit-html.js";
-
-/*
-	lit-html directive that removes and attribute if it is undefined
-*/
-export default directive(value => part => {
-	if ((value === undefined) && part instanceof AttributePart) {
-		if (value !== part.value) {
-			const name = part.committer.name;
-			part.committer.element.removeAttribute(name);
-		}
-	} else if (part.committer && part.committer.element && part.committer.element.getAttribute(part.committer.name) === value) {
-		part.setValue(noChange);
-	} else {
-		part.setValue(value);
-	}
-});

package/src/renderer/scopeHTML.js

@@ -1,32 +0,0 @@
-const cache = new Map();
-
-const scopeHTML = (strings, tags, suffix) => {
-	if (suffix && tags && tags.length) {
-		strings = strings.map(string => {
-			if (cache.has(string)) {
-				return cache.get(string);
-			}
-
-			/*
-			const allTags = [...string.matchAll(/<(ui5-.*?)[> ]/g)].map(x => x[1]);
-			allTags.forEach(t => {
-				if (!tags.includes(t)) {
-					throw new Error(`${t} not found in ${string}`);
-					// console.log(t, " in ", string);
-				}
-			});
-			*/
-
-			let result = string;
-			tags.forEach(tag => {
-				result = result.replace(new RegExp(`(</?)(${tag})(/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
-			});
-			cache.set(string, result);
-			return result;
-		});
-	}
-
-	return strings;
-};
-
-export default scopeHTML;

package/src/theming/CSSVarsPonyfill.js

@@ -1,68 +0,0 @@
-let ponyfillTimer;
-
-const ponyfillNeeded = () => !!window.CSSVarsPonyfill;
-
-/**
- * Removes the "data-cssvars-group" attribute for all element styles and their respective out nodes.
- * CSSVarsPonyfill has internal counters for "group" and "job" and running several instances of the ponyfill may lead to issues, since these counters are not shared
- * Therefore we remove them for our "data-ui5-element-styles"
- *
- * @param rootElement
- */
-const cleanPonyfillMetadata = (rootElement = document.head) => {
-	rootElement.querySelectorAll(`style[data-ui5-element-styles][data-cssvars="src"]`).forEach(tag => {
-		const group = tag.getAttribute("data-cssvars-group");
-		tag.removeAttribute("data-cssvars-group");
-		tag.disabled = false;
-		const outNode = rootElement.querySelector(`style[data-cssvars="out"][data-cssvars-group="${group}"]`);
-		if (outNode) {
-			outNode.removeAttribute("data-cssvars-group");
-		}
-	});
-};
-
-const runPonyfill = () => {
-	ponyfillTimer = undefined;
-
-	cleanPonyfillMetadata();
-	window.CSSVarsPonyfill.cssVars({
-		rootElement: document.head,
-		variables: isCompact() ? getCompactModeVars() : {},
-		silent: true,
-	});
-};
-
-const schedulePonyfill = () => {
-	if (!ponyfillTimer) {
-		ponyfillTimer = window.setTimeout(runPonyfill, 0);
-	}
-};
-
-const isCompact = () => {
-	const b = document.body;
-	return b.hasAttribute("data-ui5-compact-size") || b.classList.contains("ui5-content-density-compact") || b.classList.contains("sapUiSizeCompact");
-};
-
-const getCompactModeVars = () => {
-	const compactVars = {};
-	[...document.querySelectorAll(`[data-ui5-theme-properties]`)].forEach(el => {
-		const cssContent = el.textContent.replace("\n", "");
-		let match;
-		const regExp = new RegExp("data-ui5-compact-size[^{]*{(.*?)}", "g");
-		while ((match = regExp.exec(cssContent)) !== null) { // eslint-disable-line
-			const compactCSS = match[1];
-			compactCSS.split(";").forEach(declaration => {
-				const pair = declaration.split(":");
-				compactVars[pair[0].trim()] = pair[1].trim();
-			});
-		}
-	});
-
-	return compactVars;
-};
-
-export {
-	ponyfillNeeded,
-	runPonyfill,
-	schedulePonyfill,
-};

package/src/theming/CustomStyle.js

@@ -1,40 +0,0 @@
-import RenderScheduler from "../RenderScheduler.js";
-import EventProvider from "../EventProvider.js";
-
-const eventProvider = new EventProvider();
-const CUSTOM_CSS_CHANGE = "CustomCSSChange";
-
-const attachCustomCSSChange = listener => {
-	eventProvider.attachEvent(CUSTOM_CSS_CHANGE, listener);
-};
-
-const detachCustomCSSChange = listener => {
-	eventProvider.detachEvent(CUSTOM_CSS_CHANGE, listener);
-};
-
-const fireCustomCSSChange = tag => {
-	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
-};
-
-const customCSSFor = {};
-
-const addCustomCSS = (tag, css) => {
-	if (!customCSSFor[tag]) {
-		customCSSFor[tag] = [];
-	}
-	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
-
-	RenderScheduler.reRenderAllUI5Elements({ tag });
-};
-
-const getCustomCSS = tag => {
-	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
-};
-
-export {
-	addCustomCSS,
-	getCustomCSS,
-	attachCustomCSSChange,
-	detachCustomCSSChange,
-};

package/src/theming/ThemeLoaded.js

@@ -1,22 +0,0 @@
-import EventProvider from "../EventProvider.js";
-
-const eventProvider = new EventProvider();
-const THEME_LOADED = "themeLoaded";
-
-const attachThemeLoaded = listener => {
-	eventProvider.attachEvent(THEME_LOADED, listener);
-};
-
-const detachThemeLoaded = listener => {
-	eventProvider.detachEvent(THEME_LOADED, listener);
-};
-
-const fireThemeLoaded = theme => {
-	return eventProvider.fireEvent(THEME_LOADED, theme);
-};
-
-export {
-	attachThemeLoaded,
-	detachThemeLoaded,
-	fireThemeLoaded,
-};

package/src/theming/adaptCSSForIE.js

@@ -1,95 +0,0 @@
-const findClosingParenthesisPos = (str, openingParenthesisPos) => {
-	let opened = 1;
-	for (let pos = openingParenthesisPos + 1; pos < str.length; pos++) {
-		const char = str.charAt(pos);
-		if (char === "(") {
-			opened++;
-		} else if (char === ")") {
-			opened--;
-		}
-		if (opened === 0) {
-			return pos;
-		}
-	}
-};
-
-const replaceSelector = (str, selector, selectorStartPos, replacement) => {
-	const charAfterSelectorPos = selectorStartPos + selector.length;
-	const charAfterSelector = str.charAt(charAfterSelectorPos);
-
-	const upToSelector = str.substring(0, selectorStartPos) + replacement;
-	if (charAfterSelector === "(") {
-		const closingParenthesisPos = findClosingParenthesisPos(str, charAfterSelectorPos);
-		return upToSelector + str.substring(charAfterSelectorPos + 1, closingParenthesisPos) + str.substring(closingParenthesisPos + 1);
-	}
-
-	return upToSelector + str.substring(charAfterSelectorPos);
-};
-
-/**
- * :host => ui5-button
- * :host([expr]) => ui5-button[expr]
- * ::slotted(expr) => expr
- * @param str - source string
- * @param selector - :host or ::slotted
- * @param replacement - normally tag name
- * @returns {*}
- */
-const replaceSelectors = (str, selector, replacement) => {
-	let selectorStartPos = str.indexOf(selector);
-	while (selectorStartPos !== -1) {
-		str = replaceSelector(str, selector, selectorStartPos, replacement);
-		selectorStartPos = str.indexOf(selector);
-	}
-	return str;
-};
-
-const adaptLinePart = (line, tag, pureTag) => {
-	line = line.trim();
-	line = replaceSelectors(line, "::slotted", ``); // first remove all ::slotted() occurrences
-
-	// Host selector - replace it
-	if (line.startsWith(":host")) {
-		return replaceSelector(line, ":host", 0, tag);
-	}
-
-	// Leave out @keyframes and keyframe values (0%, 100%, etc...)
-	// csso shortens '100%' -> 'to', make sure to leave it untouched
-	if (line.match(/^[@0-9]/) || line === "to" || line === "to{") {
-		return line;
-	}
-
-	// IE specific selector (directly written with the tag, f.e. ui5-button {}) - keep it
-	if (line.match(new RegExp(`^${tag}[^a-zA-Z0-9-]`))) {
-		return line;
-	}
-
-	// IE specific selector (directly written with the tag attribute, f.e. [ui5-button] {}) - keep it
-	if (pureTag && line.startsWith(`[${pureTag}]`)) {
-		return line;
-	}
-
-	// No host and no tag in the beginning of the selector - prepend the tag
-	return `${tag} ${line}`;
-};
-
-const adaptCSSForIE = (str, tag, pureTag) => {
-	str = str.replace(/\n/g, ` `);
-	str = str.replace(/([{}])/g, `$1\n`);
-	let result = ``;
-	const lines = str.split(`\n`);
-	lines.forEach(line => {
-		const mustProcess = line.match(/{$/); // Only work on lines that end on {, otherwise just append to result
-		if (mustProcess) {
-			const lineParts = line.split(",");
-			const processedLineParts = lineParts.map(linePart => {
-				return adaptLinePart(linePart, tag, pureTag);
-			});
-			line = processedLineParts.join(",");
-		}
-		result = `${result}${line}`;
-	});
-	return result;
-};
-
-export default adaptCSSForIE;

package/src/theming/applyTheme.js

@@ -1,84 +0,0 @@
-import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
-import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
-import { ponyfillNeeded, runPonyfill } from "./CSSVarsPonyfill.js";
-import { fireThemeLoaded } from "./ThemeLoaded.js";
-import { getFeature } from "../FeaturesRegistry.js";
-
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
-
-const isThemeBaseRegistered = () => {
-	const registeredPackages = getRegisteredPackages();
-	return registeredPackages.has(BASE_THEME_PACKAGE);
-};
-
-const loadThemeBase = async theme => {
-	if (!isThemeBaseRegistered()) {
-		return;
-	}
-
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
-};
-
-const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
-};
-
-const loadComponentPackages = async theme => {
-	const registeredPackages = getRegisteredPackages();
-	registeredPackages.forEach(async packageName => {
-		if (packageName === BASE_THEME_PACKAGE) {
-			return;
-		}
-
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
-	});
-};
-
-const detectExternalTheme = () => {
-	// If theme designer theme is detected, use this
-	const extTheme = getThemeDesignerTheme();
-	if (extTheme) {
-		return extTheme;
-	}
-
-	// If OpenUI5Support is enabled, try to find out if it loaded variables
-	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support) {
-		const varsLoaded = OpenUI5Support.cssVariablesLoaded();
-		if (varsLoaded) {
-			return {
-				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
-			};
-		}
-	}
-};
-
-const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
-
-	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
-	if (!extTheme || theme !== extTheme.themeName) {
-		await loadThemeBase(theme);
-	} else {
-		deleteThemeBase();
-	}
-
-	// Always load component packages properties. For non-registered themes, try with the base theme, if any
-	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
-	await loadComponentPackages(packagesTheme);
-
-	// When changing the theme, run the ponyfill immediately
-	if (ponyfillNeeded()) {
-		runPonyfill();
-	}
-
-	fireThemeLoaded(theme);
-};
-
-export default applyTheme;

package/src/theming/createComponentStyleTag.js

@@ -1,54 +0,0 @@
-import createStyleInHead from "../util/createStyleInHead.js";
-import getEffectiveStyle from "./getEffectiveStyle.js";
-import adaptCSSForIE from "./adaptCSSForIE.js";
-import { ponyfillNeeded, schedulePonyfill } from "./CSSVarsPonyfill.js";
-import { attachCustomCSSChange } from "./CustomStyle.js";
-
-const IEStyleSet = new Set();
-
-attachCustomCSSChange(tag => {
-	IEStyleSet.delete(tag);
-});
-
-const getStaticStyle = ElementClass => {
-	let componentStaticStyles = ElementClass.staticAreaStyles;
-	if (Array.isArray(componentStaticStyles)) {
-		componentStaticStyles = componentStaticStyles.join(" ");
-	}
-
-	return componentStaticStyles;
-};
-
-/**
- * Creates the needed CSS for a web component class in the head tag
- * Note: IE11, Edge
- * @param ElementClass
- */
-const createComponentStyleTag = ElementClass => {
-	const tag = ElementClass.getMetadata().getTag();
-	const pureTag = ElementClass.getMetadata().getPureTag();
-	if (IEStyleSet.has(tag)) {
-		return;
-	}
-
-	let cssContent = getEffectiveStyle(ElementClass);
-	cssContent = adaptCSSForIE(cssContent, tag, pureTag);
-
-	// Append static CSS, if any, for IE
-	let staticCssContent = getStaticStyle(ElementClass);
-	if (staticCssContent) {
-		staticCssContent = adaptCSSForIE(staticCssContent, "ui5-static-area-item");
-		cssContent = `${cssContent} ${staticCssContent}`;
-	}
-
-	createStyleInHead(cssContent, {
-		"data-ui5-element-styles": tag,
-	});
-	if (ponyfillNeeded()) {
-		schedulePonyfill();
-	}
-
-	IEStyleSet.add(tag);
-};
-
-export default createComponentStyleTag;

package/src/theming/createThemePropertiesStyleTag.js

@@ -1,20 +0,0 @@
-import createStyleInHead from "../util/createStyleInHead.js";
-
-/**
- * Creates/updates a style element holding all CSS Custom Properties
- * @param cssText
- * @param packageName
- */
-const createThemePropertiesStyleTag = (cssText, packageName) => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${packageName}"]`);
-	if (styleElement) {
-		styleElement.textContent = cssText || "";	// in case of undefined
-	} else {
-		const attributes = {
-			"data-ui5-theme-properties": packageName,
-		};
-		createStyleInHead(cssText, attributes);
-	}
-};
-
-export default createThemePropertiesStyleTag;

package/src/theming/getConstructableStyle.js

@@ -1,29 +0,0 @@
-import getEffectiveStyle from "./getEffectiveStyle.js";
-import { attachCustomCSSChange } from "./CustomStyle.js";
-
-const constructableStyleMap = new Map();
-
-attachCustomCSSChange(tag => {
-	constructableStyleMap.delete(tag);
-});
-
-/**
- * Returns (and caches) a constructable style sheet for a web component class
- * Note: Chrome
- * @param ElementClass
- * @returns {*}
- */
-const getConstructableStyle = ElementClass => {
-	const tag = ElementClass.getMetadata().getTag();
-
-	if (!constructableStyleMap.has(tag)) {
-		const styleContent = getEffectiveStyle(ElementClass);
-		const style = new CSSStyleSheet();
-		style.replaceSync(styleContent);
-		constructableStyleMap.set(tag, [style]);
-	}
-
-	return constructableStyleMap.get(tag);
-};
-
-export default getConstructableStyle;

package/src/theming/getEffectiveStyle.js

@@ -1,23 +0,0 @@
-import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
-import getStylesString from "./getStylesString.js";
-
-const effectiveStyleMap = new Map();
-
-attachCustomCSSChange(tag => {
-	effectiveStyleMap.delete(tag);
-});
-
-const getEffectiveStyle = ElementClass => {
-	const tag = ElementClass.getMetadata().getTag();
-
-	if (!effectiveStyleMap.has(tag)) {
-		const customStyle = getCustomCSS(tag) || "";
-		const builtInStyles = getStylesString(ElementClass.styles);
-		const effectiveStyle = `${builtInStyles} ${customStyle}`;
-		effectiveStyleMap.set(tag, effectiveStyle);
-	}
-
-	return effectiveStyleMap.get(tag);
-};
-
-export default getEffectiveStyle;

package/src/theming/getStylesString.js

@@ -1,13 +0,0 @@
-const getStylesString = styles => {
-	if (Array.isArray(styles)) {
-		return flatten(styles).join(" ");
-	}
-
-	return styles;
-};
-
-const flatten = arr => {
-	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
-};
-
-export default getStylesString;

package/src/theming/getThemeDesignerTheme.js

@@ -1,67 +0,0 @@
-const getThemeMetadata = () => {
-	// Check if the class was already applied, most commonly to the link/style tag with the CSS Variables
-	let el = document.querySelector(".sapThemeMetaData-Base-baseLib");
-	if (el) {
-		return getComputedStyle(el).backgroundImage;
-	}
-
-	el = document.createElement("span");
-	el.style.display = "none";
-	el.classList.add("sapThemeMetaData-Base-baseLib");
-	document.body.appendChild(el);
-	const metadata = getComputedStyle(el).backgroundImage;
-	document.body.removeChild(el);
-
-	return metadata;
-};
-
-const parseThemeMetadata = metadataString => {
-	const params = /\(["']?data:text\/plain;utf-8,(.*?)['"]?\)$/i.exec(metadataString);
-	if (params && params.length >= 2) {
-		let paramsString = params[1];
-		paramsString = paramsString.replace(/\\"/g, `"`);
-		if (paramsString.charAt(0) !== "{" && paramsString.charAt(paramsString.length - 1) !== "}") {
-			try {
-				paramsString = decodeURIComponent(paramsString);
-			} catch (ex) {
-				console.warn("Malformed theme metadata string, unable to decodeURIComponent"); // eslint-disable-line
-				return;
-			}
-		}
-		try {
-			return JSON.parse(paramsString);
-		} catch (ex) {
-			console.warn("Malformed theme metadata string, unable to parse JSON"); // eslint-disable-line
-		}
-	}
-};
-
-const processThemeMetadata = metadata => {
-	let themeName;
-	let baseThemeName;
-
-	try {
-		themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
-		baseThemeName = metadata.Extends[0];
-	} catch (ex) {
-		console.warn("Malformed theme metadata Object", metadata); // eslint-disable-line
-		return;
-	}
-
-	return {
-		themeName,
-		baseThemeName,
-	};
-};
-
-const getThemeDesignerTheme = () => {
-	const metadataString = getThemeMetadata();
-	if (!metadataString || metadataString === "none") {
-		return;
-	}
-
-	const metadata = parseThemeMetadata(metadataString);
-	return processThemeMetadata(metadata);
-};
-
-export default getThemeDesignerTheme;