@ui5/webcomponents-base 1.2.3 → 1.3.1

package/src/features/OpenUI5Enablement.js

@@ -0,0 +1,119 @@
+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/renderer/LitRenderer.js

@@ -1,28 +1,46 @@
-import { render } from "lit-html";
 import {
+	render,
 	html,
 	svg,
-	unsafeStatic,
-} from "lit-html/static.js";
+} from "lit-html";
+import { getFeature } from "../FeaturesRegistry.js";
+
+const effectiveHtml = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.html : html;
+	return fn(...args);
+};
+
+const effectiveSvg = (...args) => {
+	const LitStatic = getFeature("LitStatic");
+	const fn = LitStatic ? LitStatic.svg : svg;
+	return fn(...args);
+};
+
+const litRender = (templateResult, domNode, styleStrOrHrefsArr, forStaticArea, { host } = {}) => {
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+	if (OpenUI5Enablement && !forStaticArea) {
+		templateResult = OpenUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, host, templateResult);
+	}
 
-const litRender = (templateResult, domNode, styleStrOrHrefsArr, { host } = {}) => {
 	if (typeof styleStrOrHrefsArr === "string") {
-		templateResult = html`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
+		templateResult = effectiveHtml`<style>${styleStrOrHrefsArr}</style>${templateResult}`;
 	} else if (Array.isArray(styleStrOrHrefsArr) && styleStrOrHrefsArr.length) {
-		templateResult = html`${styleStrOrHrefsArr.map(href => html`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
+		templateResult = effectiveHtml`${styleStrOrHrefsArr.map(href => effectiveHtml`<link type="text/css" rel="stylesheet" href="${href}">`)}${templateResult}`;
 	}
 	render(templateResult, domNode, { host });
 };
 
 const scopeTag = (tag, tags, suffix) => {
-	const resultTag = suffix && (tags || []).includes(tag) ? `${tag}-${suffix}` : tag;
-	return unsafeStatic(resultTag);
+	const LitStatic = getFeature("LitStatic");
+	if (LitStatic) {
+		return LitStatic.unsafeStatic((tags || []).includes(tag) ? `${tag}-${suffix}` : tag);
+	}
 };
 
 export {
-	html,
-	svg,
-	unsafeStatic,
+	effectiveHtml as html,
+	effectiveSvg as svg,
 };
 export { scopeTag };
 export { repeat } from "lit-html/directives/repeat.js";

package/src/renderer/executeTemplate.js

@@ -1,4 +1,4 @@
-import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScope.js";
+import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../CustomElementsScopeUtils.js";
 
 /**
  * Runs a component's template with the component's current state, while also scoping HTML
@@ -9,9 +9,26 @@ import { getCustomElementsScopingSuffix, shouldScopeCustomElement } from "../Cus
  * @returns {*}
  */
 const executeTemplate = (template, component) => {
-	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+	const tagsToScope = getTagsToScope(component);
 	const scope = getCustomElementsScopingSuffix();
 	return template(component, tagsToScope, scope);
 };
 
+/**
+ * Returns all tags, used inside component's template subject to scoping.
+ * @param component - the component
+ * @returns {Array[]}
+ * @private
+ */
+const getTagsToScope = component => {
+	const componentTag = component.constructor.getMetadata().getPureTag();
+	const tagsToScope = component.constructor.getUniqueDependencies().map(dep => dep.getMetadata().getPureTag()).filter(shouldScopeCustomElement);
+
+	if (shouldScopeCustomElement(componentTag)) {
+		tagsToScope.push(componentTag);
+	}
+
+	return tagsToScope;
+};
+
 export default executeTemplate;

package/src/theming/getEffectiveLinksHrefs.js

@@ -1,4 +1,5 @@
 import { getUrl } from "../CSP.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
 const flatten = arr => {
 	return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);
@@ -6,6 +7,8 @@ const flatten = arr => {
 
 const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
 	let stylesData = ElementClass[forStaticArea ? "staticAreaStyles" : "styles"];
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
+
 	if (!stylesData) {
 		return;
 	}
@@ -14,6 +17,10 @@ const getEffectiveLinksHrefs = (ElementClass, forStaticArea = false) => {
 		stylesData = [stylesData];
 	}
 
+	if (OpenUI5Enablement) {
+		stylesData.push(OpenUI5Enablement.getBusyIndicatorStyles());
+	}
+
 	return flatten(stylesData).filter(data => !!data).map(data => getUrl(data.packageName, data.fileName));
 };
 

package/src/theming/getEffectiveStyle.js

@@ -1,5 +1,6 @@
 import { getCustomCSS, attachCustomCSSChange } from "./CustomStyle.js";
 import getStylesString from "./getStylesString.js";
+import { getFeature } from "../FeaturesRegistry.js";
 
 const effectiveStyleMap = new Map();
 
@@ -10,9 +11,15 @@ attachCustomCSSChange(tag => {
 const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 	const tag = ElementClass.getMetadata().getTag();
 	const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+	const OpenUI5Enablement = getFeature("OpenUI5Enablement");
 
 	if (!effectiveStyleMap.has(key)) {
 		let effectiveStyle;
+		let busyIndicatorStyles = "";
+
+		if (OpenUI5Enablement) {
+			busyIndicatorStyles = getStylesString(OpenUI5Enablement.getBusyIndicatorStyles());
+		}
 
 		if (forStaticArea) {
 			effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
@@ -21,6 +28,8 @@ const getEffectiveStyle = (ElementClass, forStaticArea = false) => {
 			const builtInStyles = getStylesString(ElementClass.styles);
 			effectiveStyle = `${builtInStyles} ${customStyle}`;
 		}
+
+		effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
 		effectiveStyleMap.set(key, effectiveStyle);
 	}
 

package/src/updateShadowRoot.js

@@ -24,7 +24,7 @@ const updateShadowRoot = (element, forStaticArea = false) => {
 		styleStrOrHrefsArr = getEffectiveStyle(element.constructor, forStaticArea);
 	}
 
-	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, { host: element });
+	element.constructor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
 };
 
 export default updateShadowRoot;

package/src/util/getNormalizedTarget.js

@@ -0,0 +1,16 @@
+/**
+ * Returns the normalized event target in cases when it has shadow root.
+ * @param {Object} target The original event target
+ * @returns {Object} The normalized target
+ */
+const getNormalizedTarget = target => {
+	let element = target;
+
+	if (target.shadowRoot && target.shadowRoot.activeElement) {
+		element = target.shadowRoot.activeElement;
+	}
+
+	return element;
+};
+
+export default getNormalizedTarget;