@ui5/webcomponents 0.0.0-d849bec2c → 0.0.0-dc3ccac50

package/src/popup-utils/PopoverRegistry.js

@@ -0,0 +1,145 @@
+import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
+
+let updateInterval = null;
+const intervalTimeout = 300;
+const openedRegistry = [];
+
+const repositionPopovers = event => {
+	openedRegistry.forEach(popover => {
+		popover.instance.reposition();
+	});
+};
+
+const attachGlobalScrollHandler = () => {
+	document.body.addEventListener("scroll", repositionPopovers, true);
+};
+
+const detachGlobalScrollHandler = () => {
+	document.body.removeEventListener("scroll", repositionPopovers, true);
+};
+
+const runUpdateInterval = () => {
+	updateInterval = setInterval(() => {
+		repositionPopovers();
+	}, intervalTimeout);
+};
+
+const stopUpdateInterval = () => {
+	clearInterval(updateInterval);
+};
+
+const attachGlobalClickHandler = () => {
+	document.addEventListener("mousedown", clickHandler);
+};
+
+const detachGlobalClickHandler = () => {
+	document.removeEventListener("mousedown", clickHandler);
+};
+
+const clickHandler = event => {
+	const openedPopups = getOpenedPopups();
+	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
+
+	if (openedPopups.length === 0 || !isTopPopupPopover) {
+		return;
+	}
+
+	// loop all open popovers
+	for (let i = (openedPopups.length - 1); i !== -1; i--) {
+		const popup = openedPopups[i].instance;
+
+		// if popup is modal, opener is clicked, popup is dialog skip closing
+		if (popup.isModal || popup.isOpenerClicked(event)) {
+			return;
+		}
+
+		if (isClickInRect(event, popup.getBoundingClientRect())) {
+			break;
+		}
+
+		popup.close();
+	}
+};
+
+const attachScrollHandler = popover => {
+	popover && popover.shadowRoot.addEventListener("scroll", repositionPopovers, true);
+};
+
+const detachScrollHandler = popover => {
+	popover && popover.shadowRoot.removeEventListener("scroll", repositionPopovers);
+};
+
+const addOpenedPopover = instance => {
+	const parentPopovers = getParentPopoversIfNested(instance);
+
+	addOpenedPopup(instance, parentPopovers);
+	openedRegistry.push({
+		instance,
+		parentPopovers,
+	});
+
+	attachScrollHandler(instance);
+
+	if (openedRegistry.length === 1) {
+		attachGlobalScrollHandler();
+		attachGlobalClickHandler();
+		runUpdateInterval();
+	}
+};
+
+const removeOpenedPopover = instance => {
+	const popoversToClose = [instance];
+
+	for (let i = 0; i < openedRegistry.length; i++) {
+		const indexOfCurrentInstance = openedRegistry[i].parentPopovers.indexOf(instance);
+		if (openedRegistry[i].parentPopovers.length > 0 && indexOfCurrentInstance > -1) {
+			popoversToClose.push(openedRegistry[i].instance);
+		}
+	}
+
+	for (let i = popoversToClose.length - 1; i >= 0; i--) {
+		for (let j = 0; j < openedRegistry.length; j++) {
+			let indexOfItemToRemove;
+			if (popoversToClose[i] === openedRegistry[j].instance) {
+				indexOfItemToRemove = j;
+			}
+
+			if (indexOfItemToRemove >= 0) {
+				removeOpenedPopup(openedRegistry[indexOfItemToRemove].instance);
+				detachScrollHandler(openedRegistry[indexOfItemToRemove].instance);
+				const itemToClose = openedRegistry.splice(indexOfItemToRemove, 1);
+				itemToClose[0].instance.close(false, true);
+			}
+		}
+	}
+
+	if (!openedRegistry.length) {
+		detachGlobalScrollHandler();
+		detachGlobalClickHandler();
+		stopUpdateInterval();
+	}
+};
+
+const getRegistry = () => {
+	return openedRegistry;
+};
+
+const getParentPopoversIfNested = instance => {
+	let currentElement = instance.parentNode;
+	const parentPopovers = [];
+
+	while (currentElement.parentNode) {
+		for (let i = 0; i < openedRegistry.length; i++) {
+			if (currentElement && currentElement === openedRegistry[i].instance) {
+				parentPopovers.push(currentElement);
+			}
+		}
+
+		currentElement = currentElement.parentNode;
+	}
+
+	return parentPopovers;
+};
+
+export { addOpenedPopover, removeOpenedPopover, getRegistry };

package/src/timepicker-utils/TimeSlider.js

@@ -0,0 +1,103 @@
+const generateTimeItemsArray = (x, step = 1) => {
+	const array = [];
+	for (let i = 0; i < x; i++) {
+		if (i % step === 0) {
+			let tempString = i.toString();
+			if (tempString.length === 1) {
+				tempString = `0${tempString}`;
+			}
+
+			array.push(tempString);
+		}
+	}
+
+	return array;
+};
+
+const getHours = (config, max) => {
+	let hoursValueArray = [];
+
+	if (config.isTwelveHoursFormat) {
+		hoursValueArray = generateTimeItemsArray(max || 12, 1);
+	} else {
+		hoursValueArray = generateTimeItemsArray(max || 24, 1);
+	}
+
+	if (config.minHour === 1) {
+		for (let i = 0; i < hoursValueArray.length; i++) {
+			const tempValue = hoursValueArray[i] * 1 + 1;
+
+			if (tempValue.toString().length === 1) {
+				hoursValueArray[i] = `0${tempValue.toString()}`;
+			} else {
+				hoursValueArray[i] = tempValue.toString();
+			}
+		}
+	}
+
+	return hoursValueArray;
+};
+
+const getMinutes = (max, step) => {
+	return generateTimeItemsArray(max || 60, step);
+};
+
+const getSeconds = (max, step) => {
+	return generateTimeItemsArray(max || 60, step);
+};
+
+const getHoursConfigByFormat = type => {
+	const config = {};
+
+	if (type === "hour0_23") {
+		config.minHour = 0;
+		config.maxHour = 23;
+		config.isTwelveHoursFormat = false;
+	} else if (type === "hour1_24") {
+		config.minHour = 1;
+		config.maxHour = 24;
+		config.isTwelveHoursFormat = false;
+	} else if (type === "hour0_11") {
+		config.minHour = 0;
+		config.maxHour = 11;
+		config.isTwelveHoursFormat = true;
+	} else if (type === "hour1_12") {
+		config.minHour = 1;
+		config.maxHour = 12;
+		config.isTwelveHoursFormat = true;
+	}
+
+	return config;
+};
+
+const getTimeControlsByFormat = (formatArray, hoursConfig) => {
+	const timeControls = [false, false, false, false]; // hours, minutes, seconds and am/pm
+
+	for (let i = 0; i < formatArray.length; i++) {
+		if (hoursConfig.maxHour !== 0) {
+			timeControls[0] = true;
+		}
+		if (hoursConfig.maxHour !== 0 && hoursConfig.isTwelveHoursFormat) {
+			timeControls[0] = true;
+		}
+		if (formatArray[i].type === "minute") {
+			timeControls[1] = true;
+		}
+		if (formatArray[i].type === "second") {
+			timeControls[2] = true;
+		}
+		if (formatArray[i].type === "amPmMarker") {
+			timeControls[3] = true;
+		}
+	}
+
+	return timeControls;
+};
+
+export {
+	getHours,
+	getMinutes,
+	getSeconds,
+	getHoursConfigByFormat,
+	getTimeControlsByFormat,
+};

package/src/types/AvatarColorScheme.js

@@ -0,0 +1,104 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarColorSchemes.
+ * @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype
+ * @public
+ */
+const AvatarColorSchemes = {
+	/**
+	 *
+	 * @public
+	 * @type {Accent1}
+	 */
+	Accent1: "Accent1",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent2}
+	 */
+	Accent2: "Accent2",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent3}
+	 */
+	Accent3: "Accent3",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent4}
+	 */
+	Accent4: "Accent4",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent5}
+	 */
+	Accent5: "Accent5",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent6}
+	 */
+	Accent6: "Accent6",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent7}
+	 */
+	Accent7: "Accent7",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent8}
+	 */
+	Accent8: "Accent8",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent9}
+	 */
+	Accent9: "Accent9",
+
+	/**
+	 *
+	 * @public
+	 * @type {Accent10}
+	 */
+	Accent10: "Accent10",
+
+	/**
+	 *
+	 * @public
+	 * @type {Placeholder}
+	 */
+	Placeholder: "Placeholder",
+};
+
+/**
+ * @class
+ * Different types of AvatarColorScheme.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarColorScheme
+ * @public
+ * @enum {string}
+ */
+class AvatarColorScheme extends DataType {
+	static isValid(value) {
+		return !!AvatarColorSchemes[value];
+	}
+}
+
+AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes);
+
+export default AvatarColorScheme;

package/src/types/AvatarGroupType.js

@@ -0,0 +1,43 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarGroupType.
+ * @lends sap.ui.webcomponents.main.types.AvatarGroupType.prototype
+ * @public
+ */
+const AvatarGroupTypes = {
+	/**
+	 * The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.
+	 *
+	 * @public
+	 * @type {Group}
+	 */
+	Group: "Group",
+
+	/**
+	 * The avatars are displayed side-by-side and each avatar has its own click/tap area.
+	 *
+	 * @public
+	 * @type {Individual}
+	 */
+	Individual: "Individual",
+};
+
+/**
+ * @class
+ * Different types of AvatarGroupType.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarGroupType
+ * @public
+ * @enum {string}
+ */
+class AvatarGroupType extends DataType {
+	static isValid(value) {
+		return !!AvatarGroupTypes[value];
+	}
+}
+
+AvatarGroupType.generateTypeAccessors(AvatarGroupTypes);
+
+export default AvatarGroupType;

package/src/types/AvatarShape.js

@@ -0,0 +1,41 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarShape.
+ * @lends sap.ui.webcomponents.main.types.AvatarShape.prototype
+ * @public
+ */
+const AvatarShapes = {
+	/**
+	 * Circular shape.
+	 * @public
+	 * @type {Circle}
+	 */
+	Circle: "Circle",
+
+	/**
+	 * Square shape.
+	 * @public
+	 * @type {Square}
+	 */
+	Square: "Square",
+};
+
+/**
+ * @class
+ * Different types of AvatarShape.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarShape
+ * @public
+ * @enum {string}
+ */
+class AvatarShape extends DataType {
+	static isValid(value) {
+		return !!AvatarShapes[value];
+	}
+}
+
+AvatarShape.generateTypeAccessors(AvatarShapes);
+
+export default AvatarShape;

package/src/types/AvatarSize.js

@@ -0,0 +1,67 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarSize.
+ * @lends sap.ui.webcomponents.main.types.AvatarSize.prototype
+ * @public
+ */
+const AvatarSizes = {
+	/**
+	 * component size - 2rem
+	 * font size - 1rem
+	 * @public
+	 * @type {XS}
+	 */
+	XS: "XS",
+
+	/**
+	 * component size - 3rem
+	 * font size - 1.5rem
+	 * @public
+	 * @type {S}
+	 */
+	S: "S",
+
+	/**
+	 * component size - 4rem
+	 * font size - 2rem
+	 * @public
+	 * @type {M}
+	 */
+	M: "M",
+
+	/**
+	 * component size - 5rem
+	 * font size - 2.5rem
+	 * @public
+	 * @type {L}
+	 */
+	L: "L",
+
+	/**
+	 * component size - 7rem
+	 * font size - 3rem
+	 * @public
+	 * @type {XL}
+	 */
+	XL: "XL",
+};
+
+/**
+ * @class
+ * Different types of AvatarSize.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarSize
+ * @public
+ * @enum {string}
+ */
+class AvatarSize extends DataType {
+	static isValid(value) {
+		return !!AvatarSizes[value];
+	}
+}
+
+AvatarSize.generateTypeAccessors(AvatarSizes);
+
+export default AvatarSize;

package/src/types/BreadcrumbsDesign.js

@@ -0,0 +1,42 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.BreadcrumbsDesign.prototype
+ * @public
+ */
+const BreadcrumbsTypes = {
+	/**
+	 * Shows the current page as the last item in the trail.
+	 * The last item contains only plain text and is not a link.
+	 *
+	 * @public
+	 * @type {Standard}
+	 */
+	Standard: "Standard",
+
+	/**
+	 * All items are displayed as links.
+	 * @public
+	 * @type {NoCurrentPage}
+	 */
+	NoCurrentPage: "NoCurrentPage",
+};
+
+/**
+ * @class
+ * Different types of <code>Breadcrumbs</code>.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.BreadcrumbsDesign
+ * @public
+ * @enum {string}
+ */
+class BreadcrumbsDesign extends DataType {
+	static isValid(value) {
+		return !!BreadcrumbsTypes[value];
+	}
+}
+
+BreadcrumbsDesign.generateTypeAccessors(BreadcrumbsTypes);
+
+export default BreadcrumbsDesign;

package/src/types/BreadcrumbsSeparatorStyle.js

@@ -0,0 +1,69 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.BreadcrumbsSeparatorStyle.prototype
+ * @public
+ */
+const SeparatorTypes = {
+
+	/**
+	 * The separator appears as "/".
+	 * @public
+	 * @type {Slash}
+	 */
+	Slash: "Slash",
+
+	/**
+	 * The separator appears as "\".
+	 * @public
+	 * @type {BackSlash}
+	 */
+	BackSlash: "BackSlash",
+
+	/**
+	 * The separator appears as "\\".
+	 * @public
+	 * @type {DoubleBackSlash}
+	 */
+	DoubleBackSlash: "DoubleBackSlash",
+
+	/**
+	 * The separator appears as ">>".
+	 * @public
+	 * @type {DoubleGreaterThan}
+	 */
+	DoubleGreaterThan: "DoubleGreaterThan",
+
+	/**
+	 * The separator appears as "//".
+	 * @public
+	 * @type {DoubleSlash}
+	 */
+	DoubleSlash: "DoubleSlash",
+
+	/**
+	 * The separator appears as ">".
+	 * @public
+	 * @type {GreaterThan}
+	 */
+	GreaterThan: "GreaterThan",
+};
+
+/**
+ * @class
+ * Different types of <code>Breadcrumbs</code> separator.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.BreadcrumbsSeparatorStyle
+ * @public
+ * @enum {string}
+ */
+class BreadcrumbsSeparatorStyle extends DataType {
+	static isValid(value) {
+		return !!SeparatorTypes[value];
+	}
+}
+
+BreadcrumbsSeparatorStyle.generateTypeAccessors(SeparatorTypes);
+
+export default BreadcrumbsSeparatorStyle;

package/src/types/BusyIndicatorSize.js

@@ -0,0 +1,47 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.BusyIndicatorSize.prototype
+ * @public
+ */
+const BusyIndicatorSizes = {
+	/**
+	 * small size
+	 * @public
+	 * @type {Small}
+	 */
+	Small: "Small",
+
+	/**
+	 * medium size
+	 * @public
+	 * @type {Medium}
+	 */
+	Medium: "Medium",
+
+	/**
+	 * large size
+	 * @public
+	 * @type {Large}
+	 */
+	Large: "Large",
+};
+
+/**
+ * @class
+ * Different types of BusyIndicator.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.BusyIndicatorSize
+ * @public
+ * @enum {string}
+ */
+class BusyIndicatorSize extends DataType {
+	static isValid(value) {
+		return !!BusyIndicatorSizes[value];
+	}
+}
+
+BusyIndicatorSize.generateTypeAccessors(BusyIndicatorSizes);
+
+export default BusyIndicatorSize;