@ui5/webcomponents-base 0.0.0-0fcda382e → 0.0.0-10f3c0dc7

package/dist/delegate/ItemNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemNavigation.js","sourceRoot":"","sources":["../../src/delegate/ItemNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n\tisPageDown,\n\tisPageUp,\n} from \"../Keys.js\";\nimport getActiveElement from \"../util/getActiveElement.js\";\n\nimport NavigationMode from \"../types/NavigationMode.js\";\nimport ItemNavigationBehavior from \"../types/ItemNavigationBehavior.js\";\n\nimport type UI5Element from \"../UI5Element.js\";\nimport { instanceOfUI5Element } from \"../UI5Element.js\";\n\ninterface ITabbable {\n\tid: string,\n\tforcedTabIndex?: string,\n}\n\ntype ItemNavigationOptions = {\n\tcurrentIndex?: number,\n\tnavigationMode?: NavigationMode,\n\trowSize?: number\n\tskipItemsSize?: number,\n\tbehavior?: ItemNavigationBehavior,\n\tgetItemsCallback: () => Array<ITabbable>,\n\taffectedPropertiesNames?: Array<string>,\n};\n\n/**\n * The ItemNavigation class manages the calculations to determine the correct \"tabindex\" for a group of related items inside a root component.\n * Important: ItemNavigation only does the calculations and does not change \"tabindex\" directly, this is a responsibility of the developer.\n *\n * The keys that trigger ItemNavigation are:\n *  - Up/down\n *  - Left/right\n *  - Home/End\n *\n * Usage:\n * 1) Use the \"getItemsCallback\" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.\n *\n * Each item passed to ItemNavigation via \"getItemsCallback\" must be:\n *  - A) either a UI5Element with a \"forcedTabIndex\" property\n *  - B) or an Object with \"id\" and \"forcedTabIndex\" properties which represents a part of the root component's shadow DOM.\n *    The \"id\" must be a valid ID within the shadow root of the component ItemNavigation operates on.\n *    This object must not be a DOM object because, as said, ItemNavigation will not set \"tabindex\" on it. It must be a representation of a DOM object only\n *    and the developer has the responsibility to update the \"tabindex\" in the component's DOM.\n *  - C) a combination of the above\n *\n * Whenever the user navigates with the keyboard, ItemNavigation will modify the \"forcedTabIndex\" properties of the items.\n * It is the items' responsibilities to re-render themselves and apply the correct value of \"tabindex\" (i.e. to map the \"forcedTabIndex\" ItemNavigation set to them to the \"tabindex\" property).\n * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their \"forcedTabIndex\" property.\n * If the items are Objects with \"id\" and \"forcedTabIndex\" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.\n * To do so, set the \"affectedPropertiesNames\" constructor property to point to one or more of the root component's properties that need refreshing when \"forcedTabIndex\" is changed deeply.\n *\n * 2) Call the \"setCurrentItem\" method of ItemNavigation whenever you want to change the current item.\n * This is most commonly required if the user for example clicks on an item and thus selects it directly.\n * Pass as the only argument to \"setCurrentItem\" the item that becomes current (must be one of the items, returned by \"getItemsCallback\").\n *\n * @class\n * @public\n */\nclass ItemNavigation {\n\trootWebComponent: UI5Element;\n\n\t_getItems: () => Array<ITabbable>;\n\n\t_currentIndex: number;\n\n\t_rowSize: number;\n\n\t_behavior: ItemNavigationBehavior;\n\n\t_navigationMode: NavigationMode;\n\n\t_affectedPropertiesNames: Array<string>;\n\n\t_skipItemsSize: number | null;\n\n\t_initBound: () => void;\n\n\t/**\n\t *\n\t * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)\n\t * @param {ItemNavigationOptions} options Object with configuration options:\n\t *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)\n\t *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)\n\t *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto\n\t * \t- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item\n\t *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items\n\t *    Static means that nothing happens if the user tries to navigate beyond the first/last item.\n\t *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.\n\t *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among\n\t *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate\n\t */\n\tconstructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {\n\t\tif (!rootWebComponent.isUI5Element) {\n\t\t\tthrow new Error(\"The root web component must be a UI5 Element instance\");\n\t\t}\n\n\t\tthis.rootWebComponent = rootWebComponent;\n\t\tthis.rootWebComponent.addEventListener(\"keydown\", this._onkeydown.bind(this));\n\t\tthis._initBound = this._init.bind(this);\n\t\tthis.rootWebComponent.attachComponentStateFinalized(this._initBound);\n\n\t\tif (typeof options.getItemsCallback !== \"function\") {\n\t\t\tthrow new Error(\"getItemsCallback is required\");\n\t\t}\n\n\t\tthis._getItems = options.getItemsCallback;\n\t\tthis._currentIndex = options.currentIndex || 0;\n\t\tthis._rowSize = options.rowSize || 1;\n\t\tthis._behavior = options.behavior || ItemNavigationBehavior.Static;\n\t\tthis._navigationMode = options.navigationMode || NavigationMode.Auto;\n\t\tthis._affectedPropertiesNames = options.affectedPropertiesNames || [];\n\t\tthis._skipItemsSize = options.skipItemsSize || null;\n\t}\n\n\t/**\n\t * Call this method to set a new \"current\" (selected) item in the item navigation\n\t * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function\n\t *\n\t * @public\n\t * @param current the new selected item\n\t */\n\tsetCurrentItem(current: ITabbable): void {\n\t\tconst currentItemIndex = this._getItems().indexOf(current);\n\n\t\tif (currentItemIndex === -1) {\n\t\t\tconsole.warn(`The provided item is not managed by ItemNavigation`, current); // eslint-disable-line\n\t\t\treturn;\n\t\t}\n\n\t\tthis._currentIndex = currentItemIndex;\n\t\tthis._applyTabIndex();\n\t}\n\n\t/**\n\t * Call this method to dynamically change the row size\n\t *\n\t * @public\n\t * @param newRowSize\n\t */\n\tsetRowSize(newRowSize: number): void {\n\t\tthis._rowSize = newRowSize;\n\t}\n\n\t_init() {\n\t\tthis._getItems().forEach((item, idx) => {\n\t\t\titem.forcedTabIndex = (idx === this._currentIndex) ? \"0\" : \"-1\";\n\t\t});\n\t}\n\n\t_onkeydown(event: KeyboardEvent) {\n\t\tif (!this._canNavigate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;\n\t\tconst verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;\n\t\tconst isRTL = this.rootWebComponent.effectiveDir === \"rtl\";\n\n\t\tif (isRTL && isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isRTL && isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isUp(event) && verticalNavigationOn) {\n\t\t\tthis._handleUp();\n\t\t} else if (isDown(event) && verticalNavigationOn) {\n\t\t\tthis._handleDown();\n\t\t} else if (isHome(event)) {\n\t\t\tthis._handleHome();\n\t\t} else if (isEnd(event)) {\n\t\t\tthis._handleEnd();\n\t\t} else if (isPageUp(event)) {\n\t\t\tthis._handlePageUp();\n\t\t} else if (isPageDown(event)) {\n\t\t\tthis._handlePageDown();\n\t\t} else {\n\t\t\treturn; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tthis._applyTabIndex();\n\t\tthis._focusCurrentItem();\n\t}\n\n\t_handleUp() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex - this._rowSize >= 0) { // no border reached, just decrease the index by a row\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize;\n\t\t\tconst firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this._rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)\n\t\t\tconst rows = Math.ceil(itemsLength / this._rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and _rowSize=4 -> 4 rows total, although only 2 items on the last row)\n\t\t\tlet lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this._rowSize; // multiply rows by columns, and add the column's first item's index\n\t\t\tif (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing\n\t\t\t\tlastItemInPreviousColumnIndex -= this._rowSize;\n\t\t\t}\n\t\t\tthis._currentIndex = lastItemInPreviousColumnIndex;\n\t\t} else { // not cyclic, so just go to the first item\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleDown() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex + this._rowSize < itemsLength) { // no border reached, just increase the index by a row\n\t\t\tthis._currentIndex += this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize; // find the first item in the current column first\n\t\t\tconst firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this._rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column\n\t\t\tthis._currentIndex = firstItemInNextColumnIndex;\n\t\t} else { // not cyclic, so just go to the last item\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleLeft() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex > 0) {\n\t\t\tthis._currentIndex -= 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleRight() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex < itemsLength - 1) {\n\t\t\tthis._currentIndex += 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleHome() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex -= this._currentIndex % homeEndRange;\n\t}\n\n\t_handleEnd() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line\n\t}\n\n\t_handlePageUp() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageUpFlat();\n\t}\n\n\t_handlePageDown() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageDownFlat();\n\t}\n\n\t/**\n\t * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageUpFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._currentIndex + 1 > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items to the top,\n\t\t\t// move the focus up/left with the predefined number.\n\t\t\tthis._currentIndex -= this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t}\n\t}\n\n\t/**\n\t * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageDownFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentToEndRange = this._getItems().length - this._currentIndex - 1;\n\n\t\tif (currentToEndRange > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items until the bottom,\n\t\t\t// move the focus down/right with the predefined number.\n\t\t\tthis._currentIndex += this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t}\n\t}\n\n\t_applyTabIndex() {\n\t\tconst items = this._getItems();\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\titems[i].forcedTabIndex = i === this._currentIndex ? \"0\" : \"-1\";\n\t\t}\n\n\t\tthis._affectedPropertiesNames.forEach(propName => {\n\t\t\tconst prop = (this.rootWebComponent as Record<string, any>)[propName];\n\t\t\t(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };\n\t\t});\n\t}\n\n\t_focusCurrentItem() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tif (currentItem) {\n\t\t\tcurrentItem.focus();\n\t\t}\n\t}\n\n\t_canNavigate() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tconst activeElement = getActiveElement();\n\n\t\treturn currentItem && currentItem === activeElement;\n\t}\n\n\t_getCurrentItem() {\n\t\tconst items = this._getItems();\n\n\t\tif (!items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// normalize the index\n\t\twhile (this._currentIndex >= items.length) {\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t}\n\n\t\tif (this._currentIndex < 0) {\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\n\t\tconst currentItem = items[this._currentIndex];\n\n\t\tif (!currentItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (instanceOfUI5Element(currentItem)) {\n\t\t\treturn currentItem.getFocusDomRef();\n\t\t}\n\n\t\tconst currentItemDOMRef = this.rootWebComponent.getDomRef();\n\t\tif (!currentItemDOMRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentItem.id) {\n\t\t\treturn currentItemDOMRef.querySelector(`[id=\"${currentItem.id}\"]`) as HTMLElement;\n\t\t}\n\t}\n}\n\nexport default ItemNavigation;\n\nexport {\n\tITabbable,\n};\n"]}

package/dist/delegate/ResizeHandler.d.ts

@@ -0,0 +1,23 @@
+type ResizeObserverCallback = () => Promise<void> | void;
+/**
+ * Allows to register/deregister resize observers for a DOM element
+ *
+ * @public
+ * @class
+  */
+declare class ResizeHandler {
+    /**
+     * @public
+     * @param element UI5 Web Component or DOM Element to be observed
+     * @param callback Callback to be executed
+     */
+    static register(element: HTMLElement, callback: ResizeObserverCallback): void;
+    /**
+     * @public
+     * @param element UI5 Web Component or DOM Element to be unobserved
+     * @param callback Callback to be removed
+     */
+    static deregister(element: HTMLElement, callback: ResizeObserverCallback): void;
+}
+export default ResizeHandler;
+export type { ResizeObserverCallback, };

package/dist/delegate/ResizeHandler.js

@@ -1,66 +1,85 @@
-import UI5Element from "../UI5Element.js";
-import NativeResize from "./NativeResize.js";
-import CustomResize from "./CustomResize.js";
-
+import { instanceOfUI5Element } from "../UI5Element.js";
+let resizeObserver;
+const observedElements = new Map();
+const getResizeObserver = () => {
+    if (!resizeObserver) {
+        resizeObserver = new window.ResizeObserver(entries => {
+            window.requestAnimationFrame(() => {
+                entries.forEach(entry => {
+                    const callbacks = observedElements.get(entry.target);
+                    // Callbacks could be async and we need to handle returned promises to comply with the eslint "no-misused-promises" rule.
+                    // Although Promise.all awaits all, we don't await the additional task after calling the callbacks and should not make any difference.
+                    callbacks && Promise.all(callbacks.map((callback) => callback()));
+                });
+            });
+        });
+    }
+    return resizeObserver;
+};
+const observe = (element, callback) => {
+    const callbacks = observedElements.get(element) || [];
+    // if no callbacks have been added for this element - start observing it
+    if (!callbacks.length) {
+        getResizeObserver().observe(element);
+    }
+    // save the callbacks in an array
+    observedElements.set(element, [...callbacks, callback]);
+};
+const unobserve = (element, callback) => {
+    const callbacks = observedElements.get(element) || [];
+    if (callbacks.length === 0) {
+        return;
+    }
+    const filteredCallbacks = callbacks.filter((fn) => fn !== callback);
+    if (filteredCallbacks.length === 0) {
+        getResizeObserver().unobserve(element);
+        observedElements.delete(element);
+    }
+    else {
+        observedElements.set(element, filteredCallbacks);
+    }
+};
+/**
+ * Allows to register/deregister resize observers for a DOM element
+ *
+ * @public
+ * @class
+  */
 class ResizeHandler {
-	static initialize() {
-		ResizeHandler.Implementation = window.ResizeObserver ? NativeResize : CustomResize;
-		ResizeHandler.Implementation.initialize();
-	}
-
-	/**
-	 * @static
-	 * @private
-	 * @param {*} ref Reference to be observed
-	 * @param {*} callback Callback to be executed
-	 * @memberof ResizeHandler
-	 */
-	static attachListener(ref, callback) {
-		ResizeHandler.Implementation.attachListener.call(ResizeHandler.Implementation, ref, callback);
-	}
-
-	/**
-	 * @static
-	 * @private
-	 * @param {*} ref Reference to be unobserved
-	 * @memberof ResizeHandler
-	 */
-	static detachListener(ref, callback) {
-		ResizeHandler.Implementation.detachListener.call(ResizeHandler.Implementation, ref, callback);
-	}
-
-
-	/**
-	 * @static
-	 * @public
-	 * @param {*} ref Reference to a UI5 Web Component or DOM Element to be observed
-	 * @param {*} callback Callback to be executed
-	 * @memberof ResizeHandler
-	 */
-	static register(ref, callback) {
-		if (ref instanceof UI5Element) {
-			ref = ref.getDomRef();
-		}
-
-		ResizeHandler.attachListener(ref, callback);
-	}
-
-
-	/**
-	 * @static
-	 * @public
-	 * @param {*} ref Reference to UI5 Web Component or DOM Element to be unobserved
-	 * @memberof ResizeHandler
-	 */
-	static deregister(ref, callback) {
-		if (ref instanceof UI5Element) {
-			ref = ref.getDomRef();
-		}
-
-		ResizeHandler.detachListener(ref, callback);
-	}
+    /**
+     * @public
+     * @param element UI5 Web Component or DOM Element to be observed
+     * @param callback Callback to be executed
+     */
+    static register(element, callback) {
+        let effectiveElement = element;
+        if (instanceOfUI5Element(effectiveElement)) {
+            effectiveElement = effectiveElement.getDomRef();
+        }
+        if (effectiveElement instanceof HTMLElement) {
+            observe(effectiveElement, callback);
+        }
+        else {
+            console.warn("Cannot register ResizeHandler for element", element); // eslint-disable-line
+        }
+    }
+    /**
+     * @public
+     * @param element UI5 Web Component or DOM Element to be unobserved
+     * @param callback Callback to be removed
+     */
+    static deregister(element, callback) {
+        let effectiveElement = element;
+        if (instanceOfUI5Element(effectiveElement)) {
+            effectiveElement = effectiveElement.getDomRef();
+        }
+        if (effectiveElement instanceof HTMLElement) {
+            unobserve(effectiveElement, callback);
+        }
+        else {
+            console.warn("Cannot deregister ResizeHandler for element", element); // eslint-disable-line
+        }
+    }
 }
-
-ResizeHandler.initialize();
-
 export default ResizeHandler;
+//# sourceMappingURL=ResizeHandler.js.map

package/dist/delegate/ResizeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandler.js","sourceRoot":"","sources":["../../src/delegate/ResizeHandler.ts"],"names":[],"mappings":"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","sourcesContent":["import { instanceOfUI5Element } from \"../UI5Element.js\";\n\ntype ResizeObserverCallback = () => Promise<void> | void;\n\nlet resizeObserver: ResizeObserver;\nconst observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();\n\nconst getResizeObserver = () => {\n\tif (!resizeObserver) {\n\t\tresizeObserver = new window.ResizeObserver(entries => {\n\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\tentries.forEach(entry => {\n\t\t\t\t\tconst callbacks = observedElements.get(entry.target as HTMLElement);\n\t\t\t\t\t// Callbacks could be async and we need to handle returned promises to comply with the eslint \"no-misused-promises\" rule.\n\t\t\t\t\t// Although Promise.all awaits all, we don't await the additional task after calling the callbacks and should not make any difference.\n\t\t\t\t\tcallbacks && Promise.all(callbacks.map((callback: ResizeObserverCallback) => callback()));\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\treturn resizeObserver;\n};\n\nconst observe = (element: HTMLElement, callback: ResizeObserverCallback) => {\n\tconst callbacks = observedElements.get(element) || [];\n\n\t// if no callbacks have been added for this element - start observing it\n\tif (!callbacks.length) {\n\t\tgetResizeObserver().observe(element);\n\t}\n\n\t// save the callbacks in an array\n\tobservedElements.set(element, [...callbacks, callback]);\n};\n\nconst unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => {\n\tconst callbacks = observedElements.get(element) || [];\n\tif (callbacks.length === 0) {\n\t\treturn;\n\t}\n\n\tconst filteredCallbacks = callbacks.filter((fn: ResizeObserverCallback) => fn !== callback);\n\tif (filteredCallbacks.length === 0) {\n\t\tgetResizeObserver().unobserve(element);\n\t\tobservedElements.delete(element);\n\t} else {\n\t\tobservedElements.set(element, filteredCallbacks);\n\t}\n};\n\n/**\n * Allows to register/deregister resize observers for a DOM element\n *\n * @public\n * @class\n  */\nclass ResizeHandler {\n\t/**\n\t * @public\n\t * @param element UI5 Web Component or DOM Element to be observed\n\t * @param callback Callback to be executed\n\t */\n\tstatic register(element: HTMLElement, callback: ResizeObserverCallback): void {\n\t\tlet effectiveElement: HTMLElement | undefined = element;\n\n\t\tif (instanceOfUI5Element(effectiveElement)) {\n\t\t\teffectiveElement = effectiveElement.getDomRef();\n\t\t}\n\n\t\tif (effectiveElement instanceof HTMLElement) {\n\t\t\tobserve(effectiveElement, callback);\n\t\t} else {\n\t\t\tconsole.warn(\"Cannot register ResizeHandler for element\", element); // eslint-disable-line\n\t\t}\n\t}\n\n\t/**\n\t * @public\n\t * @param element UI5 Web Component or DOM Element to be unobserved\n\t * @param callback Callback to be removed\n\t */\n\tstatic deregister(element: HTMLElement, callback: ResizeObserverCallback): void {\n\t\tlet effectiveElement: HTMLElement | undefined = element;\n\n\t\tif (instanceOfUI5Element(effectiveElement)) {\n\t\t\teffectiveElement = effectiveElement.getDomRef();\n\t\t}\n\n\t\tif (effectiveElement instanceof HTMLElement) {\n\t\t\tunobserve(effectiveElement, callback);\n\t\t} else {\n\t\t\tconsole.warn(\"Cannot deregister ResizeHandler for element\", element); // eslint-disable-line\n\t\t}\n\t}\n}\n\nexport default ResizeHandler;\nexport type {\n\tResizeObserverCallback,\n};\n"]}

package/dist/delegate/ScrollEnablement.d.ts

@@ -0,0 +1,49 @@
+import EventProvider from "../EventProvider.js";
+import type UI5Element from "../UI5Element.js";
+type ScrollEnablementEventListenerParam = {
+    isLeft: boolean;
+    isRight: boolean;
+};
+type ScrollEnablementEventListenerReturn = void;
+declare class ScrollEnablement extends EventProvider<ScrollEnablementEventListenerParam, ScrollEnablementEventListenerReturn> {
+    containerComponent: UI5Element;
+    mouseMove: (event: MouseEvent | TouchEvent) => void;
+    mouseUp: (event: MouseEvent | TouchEvent) => void;
+    touchStart: (event: MouseEvent | TouchEvent) => void;
+    cachedValue: {
+        dragX: number;
+        dragY: number;
+    };
+    startX: number;
+    startY: number;
+    _container?: HTMLElement;
+    supportsTouch: boolean;
+    _canScroll?: boolean;
+    _prevDragX?: number;
+    _prevDragY?: number;
+    constructor(containerComponent: UI5Element);
+    set scrollContainer(container: HTMLElement);
+    get scrollContainer(): HTMLElement;
+    /**
+     * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
+     *
+     * @param left
+     * @param top
+     * @param retryCount
+     * @param retryInterval
+     * @returns {Promise<void>} resolved when scrolled successfully
+     */
+    scrollTo(left: number, top: number, retryCount?: number, retryInterval?: number): Promise<void>;
+    move(dx: number, dy: number, disableAnimation: boolean): {
+        promise: () => Promise<void | Error>;
+        stop: () => () => void;
+    } | undefined;
+    getScrollLeft(): number;
+    getScrollTop(): number;
+    _isTouchInside(event: TouchEvent | MouseEvent): boolean;
+    ontouchstart(event: TouchEvent | MouseEvent): void;
+    ontouchmove(event: TouchEvent | MouseEvent): void;
+    ontouchend(event: TouchEvent | MouseEvent): void;
+}
+export default ScrollEnablement;
+export type { ScrollEnablementEventListenerParam, };

package/dist/delegate/ScrollEnablement.js

@@ -1,159 +1,165 @@
-import { isPhone } from "../Device.js";
+import { supportsTouch } from "../Device.js";
 import EventProvider from "../EventProvider.js";
 import scroll from "../animations/scroll.js";
-
 const scrollEventName = "scroll";
-const touchEndEventName = isPhone() ? "touchend" : "mouseup";
-
+const touchEndEventName = supportsTouch() ? "touchend" : "mouseup";
 class ScrollEnablement extends EventProvider {
-	constructor(containerComponent) {
-		super();
-		this.containerComponent = containerComponent;
-		this.mouseMove = this.ontouchmove.bind(this);
-		this.mouseUp = this.ontouchend.bind(this);
-		this.touchStart = this.ontouchstart.bind(this);
-
-		this.isPhone = isPhone();
-
-		// On Android devices touchmove is thrown one more time than neccessary (together with touchend)
-		// so we have to cache the previus coordinates in order to provide correct parameters in the
-		// event for Android
-		this.cachedValue = {};
-
-		// In components like Carousel you need to know if the user has clicked on something or swiped
-		// in order to throw the needed event or not
-		this.startX = 0;
-		this.startY = 0;
-
-		if (this.isPhone) {
-			containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
-			containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
-			containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
-		} else {
-			containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
-		}
-	}
-
-	set scrollContainer(container) {
-		this._container = container;
-	}
-
-	get scrollContainer() {
-		return this._container;
-	}
-
-	scrollTo(left, top) {
-		this._container.scrollLeft = left;
-		this._container.scrollTop = top;
-	}
-
-	move(dx, dy) {
-		return scroll({
-			element: this._container,
-			dx,
-			dy,
-		});
-	}
-
-	getScrollLeft() {
-		return this._container.scrollLeft;
-	}
-
-	getScrollTop() {
-		return this._container.scrollTop;
-	}
-
-	_isTouchInside(touch) {
-		const rect = this._container.getBoundingClientRect();
-		const x = this.isPhone ? touch.clientX : touch.x;
-		const y = this.isPhone ? touch.clientY : touch.y;
-
-		return x >= rect.left && x <= rect.right
-			&& y >= rect.top && y <= rect.bottom;
-	}
-
-	ontouchstart(event) {
-		const touch = this.isPhone ? event.touches[0] : null;
-
-		if (!this.isPhone) {
-			document.addEventListener("mouseup", this.mouseUp, { passive: true });
-			document.addEventListener("mousemove", this.mouseMove, { passive: true });
-		} else {
-			// Needed only on mobile
-			this.startX = touch.pageX;
-			this.startY = touch.pageY;
-		}
-
-		this._prevDragX = this.isPhone ? touch.pageX : event.x;
-		this._prevDragY = this.isPhone ? touch.pageY : event.y;
-
-		this._canScroll = this._isTouchInside(this.isPhone ? touch : event);
-	}
-
-	ontouchmove(event) {
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const touch = this.isPhone ? event.touches[0] : null;
-
-		const dragX = this.isPhone ? touch.pageX : event.x;
-		const dragY = this.isPhone ? touch.pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		this.fireEvent(scrollEventName, {
-			isLeft: dragX > this._prevDragX,
-			isRight: dragX < this._prevDragX,
-		});
-
-		this.cachedValue.dragX = this._prevDragX;
-		this.cachedValue.dragY = this._prevDragY;
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-	}
-
-	ontouchend(event) {
-		if (this.isPhone) {
-			const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
-			const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
-
-			if (deltaX < 10 && deltaY < 10) {
-				return;
-			}
-		}
-
-		if (!this._canScroll) {
-			return;
-		}
-
-		const container = this._container;
-		const dragX = this.isPhone ? event.changedTouches[0].pageX : event.x;
-		const dragY = this.isPhone ? event.changedTouches[0].pageY : event.y;
-
-		container.scrollLeft += this._prevDragX - dragX;
-		container.scrollTop += this._prevDragY - dragY;
-
-		const useCachedValues = dragX === this._prevDragX;
-		const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
-		// const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
-
-		this.fireEvent(touchEndEventName, {
-			isLeft: _dragX < this._prevDragX,
-			isRight: _dragX > this._prevDragX,
-		});
-
-		this._prevDragX = dragX;
-		this._prevDragY = dragY;
-
-		if (!this.isPhone) {
-			document.removeEventListener("mousemove", this.mouseMove, { passive: true });
-			document.removeEventListener("mouseup", this.mouseUp);
-		}
-	}
+    constructor(containerComponent) {
+        super();
+        this.supportsTouch = supportsTouch();
+        this.containerComponent = containerComponent;
+        this.mouseMove = this.ontouchmove.bind(this);
+        this.mouseUp = this.ontouchend.bind(this);
+        this.touchStart = this.ontouchstart.bind(this);
+        this.supportsTouch = supportsTouch();
+        // On Android devices touchmove is thrown one more time than neccessary (together with touchend)
+        // so we have to cache the previus coordinates in order to provide correct parameters in the
+        // event for Android
+        this.cachedValue = { dragX: 0, dragY: 0 };
+        // In components like Carousel you need to know if the user has clicked on something or swiped
+        // in order to throw the needed event or not
+        this.startX = 0;
+        this.startY = 0;
+        if (this.supportsTouch) {
+            containerComponent.addEventListener("touchstart", this.touchStart, { passive: true });
+            containerComponent.addEventListener("touchmove", this.mouseMove, { passive: true });
+            containerComponent.addEventListener("touchend", this.mouseUp, { passive: true });
+        }
+        else {
+            containerComponent.addEventListener("mousedown", this.touchStart, { passive: true });
+        }
+    }
+    set scrollContainer(container) {
+        this._container = container;
+    }
+    get scrollContainer() {
+        return this._container;
+    }
+    /**
+     * Scrolls the container to the left/top position, retrying retryCount times, if the container is not yet painted
+     *
+     * @param left
+     * @param top
+     * @param retryCount
+     * @param retryInterval
+     * @returns {Promise<void>} resolved when scrolled successfully
+     */
+    async scrollTo(left, top, retryCount = 0, retryInterval = 0) {
+        let containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+        /* eslint-disable no-loop-func, no-await-in-loop */
+        while (!containerPainted && retryCount > 0) {
+            await new Promise(resolve => {
+                setTimeout(() => {
+                    containerPainted = this.scrollContainer.clientHeight > 0 && this.scrollContainer.clientWidth > 0;
+                    retryCount--;
+                    resolve();
+                }, retryInterval);
+            });
+        }
+        /* eslint-disable no-loop-func, no-await-in-loop */
+        this._container.scrollLeft = left;
+        this._container.scrollTop = top;
+    }
+    move(dx, dy, disableAnimation) {
+        if (disableAnimation) {
+            this._container.scrollLeft += dx;
+            this._container.scrollTop += dy;
+            return;
+        }
+        if (this._container) {
+            return scroll(this._container, dx, dy);
+        }
+    }
+    getScrollLeft() {
+        return this._container.scrollLeft;
+    }
+    getScrollTop() {
+        return this._container.scrollTop;
+    }
+    _isTouchInside(event) {
+        let touch = null;
+        if (this.supportsTouch && event instanceof TouchEvent) {
+            touch = event.touches[0];
+        }
+        const rect = this._container.getBoundingClientRect();
+        const x = this.supportsTouch ? touch.clientX : event.x;
+        const y = this.supportsTouch ? touch.clientY : event.y;
+        return x >= rect.left && x <= rect.right
+            && y >= rect.top && y <= rect.bottom;
+    }
+    ontouchstart(event) {
+        let touch = null;
+        if (this.supportsTouch && event instanceof TouchEvent) {
+            touch = event.touches[0];
+        }
+        if (!touch) {
+            document.addEventListener("mouseup", this.mouseUp, { passive: true });
+            document.addEventListener("mousemove", this.mouseMove, { passive: true });
+        }
+        else {
+            // Needed only on mobile
+            this.startX = touch.pageX;
+            this.startY = touch.pageY;
+        }
+        if (touch) {
+            this._prevDragX = touch.pageX;
+            this._prevDragY = touch.pageY;
+        }
+        if (event instanceof MouseEvent) {
+            this._prevDragX = event.x;
+            this._prevDragY = event.y;
+        }
+        this._canScroll = this._isTouchInside(event);
+    }
+    ontouchmove(event) {
+        if (!this._canScroll) {
+            return;
+        }
+        const container = this._container;
+        const touch = this.supportsTouch ? event.touches[0] : null;
+        const dragX = this.supportsTouch ? touch.pageX : event.x;
+        const dragY = this.supportsTouch ? touch.pageY : event.y;
+        container.scrollLeft += this._prevDragX - dragX;
+        container.scrollTop += this._prevDragY - dragY;
+        this.fireEvent(scrollEventName, {
+            isLeft: dragX > this._prevDragX,
+            isRight: dragX < this._prevDragX,
+        });
+        this.cachedValue.dragX = this._prevDragX;
+        this.cachedValue.dragY = this._prevDragY;
+        this._prevDragX = dragX;
+        this._prevDragY = dragY;
+    }
+    ontouchend(event) {
+        if (this.supportsTouch) {
+            const deltaX = Math.abs(event.changedTouches[0].pageX - this.startX);
+            const deltaY = Math.abs(event.changedTouches[0].pageY - this.startY);
+            if (deltaX < 10 && deltaY < 10) {
+                return;
+            }
+        }
+        if (!this._canScroll) {
+            return;
+        }
+        const container = this._container;
+        const dragX = this.supportsTouch ? event.changedTouches[0].pageX : event.x;
+        const dragY = this.supportsTouch ? event.changedTouches[0].pageY : event.y;
+        container.scrollLeft += this._prevDragX - dragX;
+        container.scrollTop += this._prevDragY - dragY;
+        const useCachedValues = dragX === this._prevDragX;
+        const _dragX = useCachedValues ? this.cachedValue.dragX : dragX;
+        // const _dragY = useCachedValues ? this.cachedValue.dragY : dragY; add if needed
+        this.fireEvent(touchEndEventName, {
+            isLeft: _dragX < this._prevDragX,
+            isRight: _dragX > this._prevDragX,
+        });
+        this._prevDragX = dragX;
+        this._prevDragY = dragY;
+        if (!this.supportsTouch) {
+            document.removeEventListener("mousemove", this.mouseMove);
+            document.removeEventListener("mouseup", this.mouseUp);
+        }
+    }
 }
-
 export default ScrollEnablement;
+//# sourceMappingURL=ScrollEnablement.js.map