@ui5/webcomponents 0.0.0-d849bec2c → 0.0.0-dc3ccac50

package/dist/popup-utils/PopoverRegistry.js

@@ -1,4 +1,4 @@
-import { isClickInRect } from "./PopupUtils.js";
+import { isClickInRect } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./OpenedPopupsRegistry.js";
 
 let updateInterval = null;
@@ -7,7 +7,7 @@ const openedRegistry = [];
 
 const repositionPopovers = event => {
 	openedRegistry.forEach(popover => {
-		popover.reposition();
+		popover.instance.reposition();
 	});
 };
 
@@ -39,7 +39,7 @@ const detachGlobalClickHandler = () => {
 
 const clickHandler = event => {
 	const openedPopups = getOpenedPopups();
-	const isTopPopupPopover = openedPopups[openedPopups.length - 1].openBy;
+	const isTopPopupPopover = openedPopups[openedPopups.length - 1].instance.showAt;
 
 	if (openedPopups.length === 0 || !isTopPopupPopover) {
 		return;
@@ -47,7 +47,7 @@ const clickHandler = event => {
 
 	// loop all open popovers
 	for (let i = (openedPopups.length - 1); i !== -1; i--) {
-		const popup = openedPopups[i];
+		const popup = openedPopups[i].instance;
 
 		// if popup is modal, opener is clicked, popup is dialog skip closing
 		if (popup.isModal || popup.isOpenerClicked(event)) {
@@ -71,8 +71,13 @@ const detachScrollHandler = popover => {
 };
 
 const addOpenedPopover = instance => {
-	addOpenedPopup(instance);
-	openedRegistry.push(instance);
+	const parentPopovers = getParentPopoversIfNested(instance);
+
+	addOpenedPopup(instance, parentPopovers);
+	openedRegistry.push({
+		instance,
+		parentPopovers,
+	});
 
 	attachScrollHandler(instance);
 
@@ -84,18 +89,30 @@ const addOpenedPopover = instance => {
 };
 
 const removeOpenedPopover = instance => {
-	let count = 0;
+	const popoversToClose = [instance];
 
-
-	for (let i = openedRegistry.indexOf(instance); i < openedRegistry.length; i++) {
-		openedRegistry[i].close(false, true);
-		removeOpenedPopup(openedRegistry[i]);
-		detachScrollHandler(openedRegistry[i]);
-		count++;
+	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);
+		}
 	}
 
-	// remove top popovers from registry
-	Array(count).fill().forEach(() => { openedRegistry.pop(); });
+	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();
@@ -108,4 +125,21 @@ 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/dist/timepicker-utils/TimeSlider.js

@@ -1,24 +1,26 @@
-const generateTimeItemsArray = x => {
+const generateTimeItemsArray = (x, step = 1) => {
 	const array = [];
 	for (let i = 0; i < x; i++) {
-		let tempString = i.toString();
-		if (tempString.length === 1) {
-			tempString = `0${tempString}`;
-		}
+		if (i % step === 0) {
+			let tempString = i.toString();
+			if (tempString.length === 1) {
+				tempString = `0${tempString}`;
+			}
 
-		array.push(tempString);
+			array.push(tempString);
+		}
 	}
 
 	return array;
 };
 
-const getHours = config => {
+const getHours = (config, max) => {
 	let hoursValueArray = [];
 
 	if (config.isTwelveHoursFormat) {
-		hoursValueArray = generateTimeItemsArray(12);
+		hoursValueArray = generateTimeItemsArray(max || 12, 1);
 	} else {
-		hoursValueArray = generateTimeItemsArray(24);
+		hoursValueArray = generateTimeItemsArray(max || 24, 1);
 	}
 
 	if (config.minHour === 1) {
@@ -36,12 +38,12 @@ const getHours = config => {
 	return hoursValueArray;
 };
 
-const getMinutes = () => {
-	return generateTimeItemsArray(60);
+const getMinutes = (max, step) => {
+	return generateTimeItemsArray(max || 60, step);
 };
 
-const getSeconds = () => {
-	return generateTimeItemsArray(60);
+const getSeconds = (max, step) => {
+	return generateTimeItemsArray(max || 60, step);
 };
 
 const getHoursConfigByFormat = type => {

package/dist/types/{AvatarBackgroundColor.js → AvatarColorScheme.js}

@@ -1,11 +1,11 @@
 import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
 
 /**
- * Different types of AvatarBackgroundColor.
- * @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype
+ * Different types of AvatarColorSchemes.
+ * @lends sap.ui.webcomponents.main.types.AvatarColorScheme.prototype
  * @public
  */
-const AvatarBackGroundColors = {
+const AvatarColorSchemes = {
 	/**
 	 *
 	 * @public
@@ -86,19 +86,19 @@ const AvatarBackGroundColors = {
 
 /**
  * @class
- * Different types of AvatarBackgroundColor.
+ * Different types of AvatarColorScheme.
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor
+ * @alias sap.ui.webcomponents.main.types.AvatarColorScheme
  * @public
  * @enum {string}
  */
-class AvatarBackgroundColor extends DataType {
+class AvatarColorScheme extends DataType {
 	static isValid(value) {
-		return !!AvatarBackGroundColors[value];
+		return !!AvatarColorSchemes[value];
 	}
 }
 
-AvatarBackgroundColor.generataTypeAcessors(AvatarBackGroundColors);
+AvatarColorScheme.generateTypeAccessors(AvatarColorSchemes);
 
-export default AvatarBackgroundColor;
+export default AvatarColorScheme;

package/dist/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/dist/types/AvatarShape.js

@@ -36,6 +36,6 @@ class AvatarShape extends DataType {
 	}
 }
 
-AvatarShape.generataTypeAcessors(AvatarShapes);
+AvatarShape.generateTypeAccessors(AvatarShapes);
 
 export default AvatarShape;

package/dist/types/AvatarSize.js

@@ -62,6 +62,6 @@ class AvatarSize extends DataType {
 	}
 }
 
-AvatarSize.generataTypeAcessors(AvatarSizes);
+AvatarSize.generateTypeAccessors(AvatarSizes);
 
 export default AvatarSize;

package/dist/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/dist/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/dist/types/BusyIndicatorSize.js

@@ -42,6 +42,6 @@ class BusyIndicatorSize extends DataType {
 	}
 }
 
-BusyIndicatorSize.generataTypeAcessors(BusyIndicatorSizes);
+BusyIndicatorSize.generateTypeAccessors(BusyIndicatorSizes);
 
 export default BusyIndicatorSize;

package/dist/types/ButtonDesign.js

@@ -39,6 +39,13 @@ const ButtonTypes = {
 	 * @type {Emphasized}
 	 */
 	Emphasized: "Emphasized",
+
+	/**
+	 * attention type
+	 * @public
+	 * @type {Attention}
+	 */
+	Attention: "Attention",
 };
 
 /**
@@ -56,6 +63,6 @@ class ButtonDesign extends DataType {
 	}
 }
 
-ButtonDesign.generataTypeAcessors(ButtonTypes);
+ButtonDesign.generateTypeAccessors(ButtonTypes);
 
 export default ButtonDesign;

package/dist/types/CalendarSelectionMode.js

@@ -0,0 +1,47 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.CalendarSelectionMode.prototype
+ * @public
+ */
+const CalendarSelectionModes = {
+	/**
+	 * Only one date can be selected at a time
+	 * @public
+	 * @type {Single}
+	 */
+	Single: "Single",
+
+	/**
+	 * Several dates can be selected
+	 * @public
+	 * @type {Multiple}
+	 */
+	Multiple: "Multiple",
+
+	/**
+	 * A range defined by a start date and an end date can be selected
+	 * @public
+	 * @type {Range}
+	 */
+	Range: "Range",
+};
+
+/**
+ * @class
+ * Different date selection modes for <code>ui5-calendar</code>.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.CalendarSelectionMode
+ * @public
+ * @enum {string}
+ */
+class CalendarSelectionMode extends DataType {
+	static isValid(value) {
+		return !!CalendarSelectionModes[value];
+	}
+}
+
+CalendarSelectionMode.generateTypeAccessors(CalendarSelectionModes);
+
+export default CalendarSelectionMode;

package/dist/types/CarouselArrowsPlacement.js

@@ -8,14 +8,14 @@ const CarouselArrowsPlacementTypes = {
 	/**
 	 * Carousel arrows are placed on the sides of the current Carousel page.
 	 * @public
-	 * @type {Default}
+	 * @type {Content}
 	 */
 	Content: "Content",
 
 	/**
 	 * Carousel arrows are placed on the sides of the page indicator of the Carousel.
 	 * @public
-	 * @type {Positive}
+	 * @type {Navigation}
 	 */
 	Navigation: "Navigation",
 };
@@ -35,6 +35,6 @@ class CarouselArrowsPlacement extends DataType {
 	}
 }
 
-CarouselArrowsPlacement.generataTypeAcessors(CarouselArrowsPlacementTypes);
+CarouselArrowsPlacement.generateTypeAccessors(CarouselArrowsPlacementTypes);
 
 export default CarouselArrowsPlacement;

package/dist/types/GrowingMode.js

@@ -0,0 +1,48 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.GrowingMode.prototype
+ * @public
+ */
+const GrowingModes = {
+	/**
+	 * Component's <code>load-more</code> is fired upon pressing a "More" button.
+	 * at the bottom.
+	 * @public
+	 * @type {Button}
+	 */
+	Button: "Button",
+
+	/**
+	 * Component's <code>load-more</code> is fired upon scroll.
+	 * @public
+	 * @type {Scroll}
+	 */
+	Scroll: "Scroll",
+
+	/**
+	 * Component's growing is not enabled.
+	 * @public
+	 * @type {None}
+	 */
+	None: "None",
+};
+
+/**
+ * @class
+ * Defines the growing mode of the component.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.GrowingMode
+ * @public
+ * @enum {string}
+ */
+class GrowingMode extends DataType {
+	static isValid(value) {
+		return !!GrowingModes[value];
+	}
+}
+
+GrowingMode.generateTypeAccessors(GrowingModes);
+
+export default GrowingMode;

package/dist/types/InputType.js

@@ -6,42 +6,42 @@ import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
  */
 const InputTypes = {
 	/**
-	 * <ui5-input type="text"></ui5-input> defines a one-line text input field:
+	 * Defines a one-line text input field:
 	 * @public
 	 * @type {Text}
 	 */
 	Text: "Text",
 
 	/**
-	 * The <ui5-input type="email"></ui5-input> is used for input fields that must contain an e-mail address.
+	 * Used for input fields that must contain an e-mail address.
 	 * @public
 	 * @type {Email}
 	 */
 	Email: "Email",
 
 	/**
-	 * The <ui5-input type="number"></ui5-input> defines a numeric input field.
+	 * Defines a numeric input field.
 	 * @public
 	 * @type {Number}
 	 */
 	Number: "Number",
 
 	/**
-	 * <ui5-input type="password"></ui5-input> defines a password field.
+	 * Defines a password field.
 	 * @public
 	 * @type {Password}
 	 */
 	Password: "Password",
 
 	/**
-	 * The <ui5-input type="url"></ui5-input> is used for input fields that should contain a telephone number.
+	 * Used for input fields that should contain a telephone number.
 	 * @public
 	 * @type {Tel}
 	 */
 	Tel: "Tel",
 
 	/**
-	 * The <i5-input type="url"></ui5-input> is used for input fields that should contain a URL address.
+	 * Used for input fields that should contain a URL address.
 	 * @public
 	 * @type {URL}
 	 */
@@ -63,6 +63,6 @@ class InputType extends DataType {
 	}
 }
 
-InputType.generataTypeAcessors(InputTypes);
+InputType.generateTypeAccessors(InputTypes);
 
 export default InputType;

package/dist/types/LinkDesign.js

@@ -42,6 +42,6 @@ class LinkDesign extends DataType {
 	}
 }
 
-LinkDesign.generataTypeAcessors(LinkTypes);
+LinkDesign.generateTypeAccessors(LinkTypes);
 
 export default LinkDesign;

package/dist/types/ListGrowingMode.js

@@ -0,0 +1,15 @@
+import GrowingMode from "./GrowingMode.js";
+
+/**
+ * @class
+ * Defines the growing mode, used in the <code>ui5-List</code>.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.ListGrowingMode
+ * @public
+ * @enum {string}
+ */
+class ListGrowingMode extends GrowingMode {
+}
+
+export default ListGrowingMode;

package/dist/types/ListItemType.js

@@ -42,6 +42,6 @@ class ListItemType extends DataType {
 	}
 }
 
-ListItemType.generataTypeAcessors(ListItemTypes);
+ListItemType.generateTypeAccessors(ListItemTypes);
 
 export default ListItemType;

package/dist/types/ListMode.js

@@ -34,6 +34,14 @@ const ListModes = {
 	 */
 	SingleSelectEnd: "SingleSelectEnd",
 
+	/**
+	 * Selected item is highlighted and selection is changed upon arrow navigation
+	 * (only one list item can be selected - this is always the focused item).
+	 * @public
+	 * @type {SingleSelectAuto}
+	 */
+	SingleSelectAuto: "SingleSelectAuto",
+
 	/**
 	 * Multi selection mode (more than one list item can be selected).
 	 * @public
@@ -64,6 +72,6 @@ class ListMode extends DataType {
 	}
 }
 
-ListMode.generataTypeAcessors(ListModes);
+ListMode.generateTypeAccessors(ListModes);
 
 export default ListMode;

package/dist/types/ListSeparators.js

@@ -41,6 +41,6 @@ class ListSeparators extends DataType {
 	}
 }
 
-ListSeparators.generataTypeAcessors(ListSeparatorsTypes);
+ListSeparators.generateTypeAccessors(ListSeparatorsTypes);
 
 export default ListSeparators;