@ui5/webcomponents-base 1.9.3 → 1.10.1

package/src/types/ItemNavigationBehavior.ts

@@ -0,0 +1,26 @@
+/**
+ * Different behavior for ItemNavigation.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.ItemNavigationBehavior
+ */
+enum ItemNavigationBehavior {
+	/**
+	 * Static behavior: navigations stops at the first or last item.
+	 * @public
+	 * @type {Static}
+ 	 */
+	Static = "Static",
+
+	/**
+	 * Cycling behavior: navigating past the last item continues with the first and vice versa.
+	 * @public
+	 * @type {Cyclic}
+ 	 */
+	Cyclic = "Cyclic",
+}
+
+export default ItemNavigationBehavior;

package/src/types/NavigationMode.ts

@@ -0,0 +1,33 @@
+/**
+ * Different navigation modes for ItemNavigation.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.NavigationMode
+ */
+enum NavigationMode {
+	/**
+	 * @public
+	 * @type {Auto}
+	 */
+	Auto = "Auto",
+	/**
+	 * @public
+	 * @type {Vertical}
+	 */
+	Vertical = "Vertical",
+	/**
+	 * @public
+	 * @type {Horizontal}
+	 */
+	Horizontal = "Horizontal",
+	/**
+	 * @public
+	 * @type {Paging}
+	 */
+	Paging = "Paging",
+}
+
+export default NavigationMode;

package/src/types/ValueState.ts

@@ -0,0 +1,47 @@
+/**
+ * Different types of ValueStates.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.base.types.ValueState
+ */
+enum ValueState {
+	/**
+	 *
+	 * @public
+	 * @type {None}
+	 */
+	None = "None",
+
+	/**
+	 *
+	 * @public
+	 * @type {Success}
+	 */
+	Success = "Success",
+
+	/**
+	 *
+	 * @public
+	 * @type {Warning}
+	 */
+	Warning = "Warning",
+
+	/**
+	 *
+	 * @public
+	 * @type {Error}
+	 */
+	Error = "Error",
+
+	/**
+	 *
+	 * @public
+	 * @type {Information}
+	 */
+	Information = "Information",
+}
+
+export default ValueState;

package/src/types.ts

@@ -0,0 +1,30 @@
+type PromiseResolve = (value: void | PromiseLike<void>) => void;
+type Timeout = ReturnType<typeof setTimeout>;
+type Interval = ReturnType<typeof setInterval>;
+
+type StyleDataCSP = {
+	content: string,
+	packageName: string,
+	fileName: string,
+};
+
+type StyleData = StyleDataCSP | string;
+
+type ComponentStylesData = Array<ComponentStylesData> | Array<StyleData> | StyleData;
+
+type ClassMapValue = Record<string, boolean>
+
+type ClassMap = { [x: string] : ClassMapValue | ClassMap };
+
+type PassiveEventListenerObject = EventListenerObject & { passive: boolean };
+
+export type {
+	PromiseResolve,
+	Timeout,
+	Interval,
+	StyleData,
+	StyleDataCSP,
+	ComponentStylesData,
+	ClassMap,
+	PassiveEventListenerObject,
+};

package/src/updateShadowRoot.ts

@@ -0,0 +1,37 @@
+import executeTemplate from "./renderer/executeTemplate.js";
+import getConstructableStyle from "./theming/getConstructableStyle.js";
+import getEffectiveStyle from "./theming/getEffectiveStyle.js";
+import getEffectiveLinksHrefs from "./theming/getEffectiveLinksHrefs.js";
+import { shouldUseLinks } from "./CSP.js";
+import type UI5Element from "./UI5Element.js";
+
+/**
+ * Updates the shadow root of a UI5Element or its static area item
+ * @param element
+ * @param forStaticArea
+ */
+const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
+	let styleStrOrHrefsArr;
+	const ctor = element.constructor as typeof UI5Element;
+	const propertyName = forStaticArea ? "staticAreaTemplate" : "template";
+	const template = ctor[propertyName];
+	const shadowRoot = forStaticArea ? element.staticAreaItem!.shadowRoot : element.shadowRoot;
+	const renderResult = executeTemplate(template!, element); // this is checked before calling updateShadowRoot
+
+	if (!shadowRoot) {
+		console.warn(`There is no shadow root to update`); // eslint-disable-line
+		return;
+	}
+
+	if (shouldUseLinks()) {
+		styleStrOrHrefsArr = getEffectiveLinksHrefs(ctor, forStaticArea);
+	} else if (document.adoptedStyleSheets) { // Chrome
+		shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
+	} else { // FF, Safari
+		styleStrOrHrefsArr = getEffectiveStyle(ctor, forStaticArea);
+	}
+
+	ctor.render(renderResult, shadowRoot, styleStrOrHrefsArr, forStaticArea, { host: element });
+};
+
+export default updateShadowRoot;

package/src/util/AriaLabelHelper.ts

@@ -0,0 +1,63 @@
+type AccessibleElement = HTMLElement & {
+	accessibleNameRef: string,
+	accessibleName: string,
+}
+
+const getEffectiveAriaLabelText = (el: HTMLElement) => {
+	const accessibleEl = el as AccessibleElement;
+
+	if (!accessibleEl.accessibleNameRef) {
+		if (accessibleEl.accessibleName) {
+			return accessibleEl.accessibleName;
+		}
+
+		return undefined;
+	}
+
+	return _getAriaLabelledByTexts(el);
+};
+
+/**
+ *
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related texts
+ */
+const _getAriaLabelledByTexts = (el: HTMLElement) => {
+	const ids = (el as AccessibleElement).accessibleNameRef.split(" ");
+	const owner = el.getRootNode() as HTMLElement;
+	let result = "";
+
+	ids.forEach((elementId: string, index: number) => {
+		const element = owner.querySelector(`[id='${elementId}']`);
+		result += `${element && element.textContent ? element.textContent : ""}`;
+
+		if (index < ids.length - 1) {
+			result += " ";
+		}
+	});
+
+	return result;
+};
+
+/**
+ * @param {HTMLElement} el Defines the HTMLElement, for which you need to get all related "label for" texts
+ */
+const getAssociatedLabelForTexts = (el: HTMLElement) => {
+	const results: Array<string> = [];
+	const labels = (el.getRootNode() as HTMLElement).querySelectorAll(`[ui5-label][for="${el.id}"],label[for="${el.id}"]`);
+
+	labels.forEach((label: Node) => {
+		const labelText = label.textContent;
+		labelText && results.push(labelText);
+	});
+
+	if (results.length) {
+		return results.join(" ");
+	}
+
+	return undefined;
+};
+
+export {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+};

package/src/util/{Caret.js → Caret.ts}

@@ -2,23 +2,19 @@
  * Returns the caret (cursor) position of the specified text field (field).
  * Return value range is 0-field.value.length.
  */
-const getCaretPosition = field => {
+const getCaretPosition = (field: HTMLInputElement): number | null => {
 	// Initialize
-	let caretPos = 0;
+	let caretPos: number | null = 0;
 
-	if (field.selectionStart || field.selectionStart === "0") { // Firefox support
+	if (field.selectionStart || field.selectionStart === 0) { // Firefox support
 		caretPos = field.selectionDirection === "backward" ? field.selectionStart : field.selectionEnd;
 	}
 
 	return caretPos;
 };
 
-const setCaretPosition = (field, caretPos) => {
-	if (field.createTextRange) {
-		const range = field.createTextRange();
-		range.move("character", caretPos);
-		range.select();
-	} else if (field.selectionStart) {
+const setCaretPosition = (field: HTMLInputElement, caretPos: number | null) => {
+	if (field.selectionStart) {
 		field.focus();
 		field.setSelectionRange(caretPos, caretPos);
 	} else {