@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/Carousel.js

@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isLeft, isRight, isDown, isUp, isF7, isHome, isEnd, isPageDown, isPageUp, } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -186,13 +186,12 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
          */
         this._visibleItemsCount = 0;
         /**
-         * Defines the current slide index, which contains the visible item in the viewport.
+         * Defines the current page index, which determines the first visible item.
          * @private
          * @since 2.16.0-r.c1
          */
-        this._currentSlideIndex = 0;
+        this._currentPageIndex = 0;
         this._pageStep = 10;
-        this._itemIndicator = 0;
         this._observableContent = [];
         this._contentItemsObserver = new MutationObserver(() => {
             const visibleItemsCount = this._visibleItems.length;
@@ -200,9 +199,9 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
                 return;
             }
             this._visibleItemsCount = visibleItemsCount;
-            this._currentSlideIndex = clamp(this._currentSlideIndex, 0, Math.max(0, this.items.length - this.effectiveItemsPerPage));
-            this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentSlideIndex, this.items.length - 1);
-            this._moveToItem(this._currentSlideIndex);
+            this._currentPageIndex = clamp(this._currentPageIndex, 0, Math.max(0, this.items.length - this.effectiveItemsPerPage));
+            this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentPageIndex, this.items.length - 1);
+            this._changePageIndex(this._currentPageIndex, { fireEvent: false });
         });
         this._scrollEnablement = new ScrollEnablement(this);
         this._scrollEnablement.attachEvent("touchend", e => {
@@ -211,7 +210,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         this._onResizeBound = this._onResize.bind(this);
         this._resizing = false; // indicates if the carousel is in process of resizing
         this._lastFocusedElements = [];
-        this._orderOfLastFocusedPages = [];
+        this._orderOfLastFocusedItems = [];
         this._visibleItemsIndexes = [];
     }
     onBeforeRendering() {
@@ -219,7 +218,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation || !isDesktop()) {
             this._visibleNavigationArrows = true;
         }
-        this.validateSelectedIndex();
+        this.validateFocusedIndex();
     }
     onAfterRendering() {
         this._scrollEnablement.scrollContainer = this.getDomRef();
@@ -236,7 +235,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         this._observableContent = [];
         ResizeHandler.deregister(this, this._onResizeBound);
     }
-    validateSelectedIndex() {
+    validateFocusedIndex() {
         if (!this.isIndexInRange(this._focusedItemIndex)) {
             this._focusedItemIndex = 0;
         }
@@ -248,13 +247,23 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         // Change transitively effectiveItemsPerPage by modifying _width
         this._width = this.offsetWidth;
         this._itemWidth = Math.floor(this._width / this.effectiveItemsPerPage);
-        this._updateVisibleItems(this._currentSlideIndex);
-        // Items per page did not change or the current,
+        // Items per page did not change,
         // therefore page index does not need to be re-adjusted
         if (this.effectiveItemsPerPage === previousItemsPerPage) {
+            this._updateVisibleItems(this._currentPageIndex);
             return;
         }
-        this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentSlideIndex, this.items.length - this.effectiveItemsPerPage);
+        // When items per page changes, clamp page index to the valid range
+        // to prevent items from becoming unreachable (e.g. when resizing
+        // from showing 2 to 3 items while on page 1 with only 3 items total).
+        const maxPageIndex = Math.max(0, this.items.length - this.effectiveItemsPerPage);
+        const newPageIndex = clamp(this._currentPageIndex, 0, maxPageIndex);
+        if (this._currentPageIndex !== newPageIndex) {
+            this._currentPageIndex = newPageIndex;
+            this.fireDecoratorEvent("navigate", { selectedIndex: newPageIndex });
+        }
+        this._updateVisibleItems(this._currentPageIndex);
+        this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentPageIndex, this._currentPageIndex + this.effectiveItemsPerPage - 1);
     }
     _updateScrolling(e) {
         if (!e) {
@@ -298,25 +307,25 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         if (target === this.getDomRef()) {
             return;
         }
-        let pageIndex = -1;
+        let itemIndex = -1;
         for (let i = 0; i < this._visibleItems.length; i++) {
             if (this._visibleItems[i].isEqualNode(target?.querySelector("slot")?.assignedNodes()[0])) {
-                pageIndex = i;
+                itemIndex = i;
                 break;
             }
         }
-        if (pageIndex === -1) {
+        if (itemIndex === -1) {
             return;
         }
-        this._focusedItemIndex = pageIndex;
-        // Save reference of the last focused element for each page
-        this._lastFocusedElements[pageIndex] = target;
-        const sortedPageIndex = this._orderOfLastFocusedPages.indexOf(pageIndex);
-        if (sortedPageIndex === -1) {
-            this._orderOfLastFocusedPages.unshift(pageIndex);
+        this._focusedItemIndex = itemIndex;
+        // Save reference of the last focused element for each item
+        this._lastFocusedElements[itemIndex] = target;
+        const sortedItemIndex = this._orderOfLastFocusedItems.indexOf(itemIndex);
+        if (sortedItemIndex === -1) {
+            this._orderOfLastFocusedItems.unshift(itemIndex);
         }
         else {
-            this._orderOfLastFocusedPages.splice(0, 0, this._orderOfLastFocusedPages.splice(sortedPageIndex, 1)[0]);
+            this._orderOfLastFocusedItems.splice(0, 0, this._orderOfLastFocusedItems.splice(sortedItemIndex, 1)[0]);
         }
     }
     _onmouseout() {
@@ -342,7 +351,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         }
     }
     async _handleF7Key(e) {
-        const lastFocusedElement = this._lastFocusedElements[this._getLastFocusedActivePageIndex];
+        const lastFocusedElement = this._lastFocusedElements[this._getLastFocusedItemIndex];
         if (!this._lastInnerFocusedElement) {
             const firstFocusable = await getFirstFocusableElement(this.items[this._focusedItemIndex].item);
             firstFocusable?.focus();
@@ -380,195 +389,129 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         const observableContentSet = new WeakSet(this._observableContent);
         return this.content.every(item => observableContentSet.has(item));
     }
-    _handleHome(e) {
+    async _handleHome(e) {
         e.preventDefault();
-        this.navigateTo(0);
+        this._changePageIndex(0, { moveFocus: true });
+        await renderFinished();
+        this.focusItem();
     }
-    _handleEnd(e) {
+    async _handleEnd(e) {
         e.preventDefault();
-        this.navigateTo(this.items.length - 1);
+        this._changePageIndex(this.items.length - 1, { moveFocus: true });
+        await renderFinished();
+        this.focusItem();
     }
-    _handlePageUp(e) {
+    async _handlePageUp(e) {
         e.preventDefault();
-        this.navigateTo(this._focusedItemIndex + this._pageStep < this.items.length ? this._focusedItemIndex + this._pageStep : this.items.length - 1);
+        this._changePageIndex(this._currentPageIndex + this._pageStep, { moveFocus: true });
+        await renderFinished();
+        this.focusItem();
     }
-    _handlePageDown(e) {
+    async _handlePageDown(e) {
         e.preventDefault();
-        this.navigateTo(this._focusedItemIndex - this._pageStep > 0 ? this._focusedItemIndex - this._pageStep : 0);
+        this._changePageIndex(this._currentPageIndex - this._pageStep, { moveFocus: true });
+        await renderFinished();
+        this.focusItem();
     }
     get _backgroundDesign() {
         return this.backgroundDesign.toLowerCase();
     }
-    get _getLastFocusedActivePageIndex() {
-        for (let i = 0; i < this._orderOfLastFocusedPages.length; i++) {
-            const pageIndex = this._orderOfLastFocusedPages[i];
-            if (this.isItemInViewport(pageIndex)) {
-                return pageIndex;
+    get _getLastFocusedItemIndex() {
+        for (let i = 0; i < this._orderOfLastFocusedItems.length; i++) {
+            const itemIndex = this._orderOfLastFocusedItems[i];
+            if (this.isItemVisible(itemIndex)) {
+                return itemIndex;
             }
         }
         return this._focusedItemIndex;
     }
-    navigateLeft() {
-        this._resizing = false;
-        const previousSelectedIndex = this._focusedItemIndex;
-        if (this._focusedItemIndex - 1 < 0) {
-            if (this.cyclic && this._visibleItemsIndexes.length >= 1) {
-                if (this._focusedItemIndex === 0 && this.effectiveItemsPerPage > 1) {
-                    this._focusedItemIndex = 0;
-                }
-                else {
-                    this._focusedItemIndex = this.items.length - 1;
-                }
-            }
-        }
-        else {
-            --this._focusedItemIndex;
-        }
-        if (previousSelectedIndex !== this._focusedItemIndex) {
-            this.skipToItem(this._focusedItemIndex, -1);
-            this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
-        }
-    }
-    navigateRight() {
-        this._resizing = false;
-        const previousSelectedIndex = this._focusedItemIndex;
-        if (this._focusedItemIndex + 1 > this.items.length - 1) {
-            if (this.cyclic) {
-                if (this._focusedItemIndex === this.items.length - 1 && this.effectiveItemsPerPage > 1) {
-                    this._focusedItemIndex = this.items.length - 1;
-                }
-                else {
-                    this._focusedItemIndex = 0;
-                }
-            }
-            else {
-                return;
-            }
-        }
-        else {
-            ++this._focusedItemIndex;
-        }
-        if (previousSelectedIndex !== this._focusedItemIndex) {
-            this.skipToItem(this._focusedItemIndex, 1);
-            this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
-        }
-    }
-    navigateArrowRight() {
-        if (this._focusedItemIndex === this._visibleItemsIndexes[0]) {
-            this.navigateTo(this._focusedItemIndex + 1);
-            this._moveToItem(this._currentSlideIndex + 1);
-        }
-        else {
-            this._moveToItem(this._currentSlideIndex + 1);
-            this.navigateTo(this._focusedItemIndex);
+    async navigateLeft() {
+        let newFocusedItemIndex = this._focusedItemIndex - 1;
+        if (this.cyclic && newFocusedItemIndex < 0) {
+            newFocusedItemIndex = this.items.length - 1;
         }
+        this._changeFocusIndex(newFocusedItemIndex);
+        await renderFinished();
+        this.focusItem();
     }
-    navigateArrowLeft() {
-        if (this._focusedItemIndex > 0 && this._focusedItemIndex === this._visibleItemsIndexes[this._visibleItemsIndexes.length - 1]) {
-            this.navigateTo(this._focusedItemIndex - 1);
-            this._moveToItem(this._currentSlideIndex - 1);
-        }
-        else {
-            this._moveToItem(this._currentSlideIndex === 0 ? this.pagesCount - 1 : this._currentSlideIndex - 1);
-            this.navigateTo(this._focusedItemIndex === 0 ? this.items.length - 1 : this._focusedItemIndex);
+    async navigateRight() {
+        let newFocusedItemIndex = this._focusedItemIndex + 1;
+        if (this.cyclic && newFocusedItemIndex > this.items.length - 1) {
+            newFocusedItemIndex = 0;
         }
+        this._changeFocusIndex(newFocusedItemIndex);
+        await renderFinished();
+        this.focusItem();
     }
-    _calculateItemSlideIndex(currentSlideIndex, itemStep) {
-        if (this.isItemInViewport(this._focusedItemIndex)) {
-            return 0;
+    async navigateArrowRight() {
+        let newCurrentPageIndex = this._currentPageIndex + 1;
+        if (this.cyclic && newCurrentPageIndex > this.items.length - this.effectiveItemsPerPage) {
+            newCurrentPageIndex = 0;
         }
-        const itemsPerPage = this.effectiveItemsPerPage;
-        let slideIndex;
-        if (itemsPerPage > 1) {
-            if (currentSlideIndex === 0 && itemStep < 0) {
-                return 0;
-            }
-            if (currentSlideIndex >= this.pagesCount && itemStep > 0) {
-                return this.pagesCount - 1;
-            }
-            slideIndex = currentSlideIndex + itemStep;
-        }
-        else {
-            slideIndex = itemStep > 0 ? currentSlideIndex + 1 : currentSlideIndex - 1;
-            if (this.cyclic) {
-                if (currentSlideIndex === 0 && itemStep < 0) {
-                    return this.pagesCount - 1;
-                }
-                if (currentSlideIndex === this.items.length - 1 && itemStep > 0) {
-                    return 0;
-                }
-            }
-        }
-        return slideIndex;
+        this._changePageIndex(newCurrentPageIndex);
+        await renderFinished();
+        this.focusItem();
     }
-    _moveToItem(slideIndex) {
-        if (this.items.length === 0) {
-            return;
+    async navigateArrowLeft() {
+        let newCurrentPageIndex = this._currentPageIndex - 1;
+        if (this.cyclic && newCurrentPageIndex < 0) {
+            newCurrentPageIndex = this.items.length - 1;
         }
-        const itemsInViewportToShow = this.effectiveItemsPerPage, itemsCount = this.items.length, cyclic = this.cyclic;
-        if (cyclic && itemsInViewportToShow !== 1 && (slideIndex < 0 || slideIndex > itemsCount - 1)) {
-            return;
-        }
-        if (slideIndex + itemsInViewportToShow > itemsCount - 1) {
-            slideIndex = itemsCount - itemsInViewportToShow;
-        }
-        this._updateVisibleItems(slideIndex);
-        this._currentSlideIndex = slideIndex;
+        this._changePageIndex(newCurrentPageIndex);
+        await renderFinished();
+        this.focusItem();
     }
     focusItem() {
         this.carouselItemDomRef(this._focusedItemIndex)[0].focus({ preventScroll: true });
     }
     _navButtonClick(e) {
         const target = e.target;
-        if (this._visibleItemsIndexes.length > 1) {
-            if (target.hasAttribute("data-ui5-arrow-forward")) {
-                this.navigateArrowRight();
-            }
-            else {
-                this.navigateArrowLeft();
-            }
+        if (target.hasAttribute("data-ui5-arrow-forward")) {
+            this.navigateArrowRight();
         }
-        else if (this._visibleItemsIndexes.length <= 1) {
-            if (target.hasAttribute("data-ui5-arrow-forward")) {
-                this.navigateRight();
-            }
-            else {
-                this.navigateLeft();
-            }
+        else {
+            this.navigateArrowLeft();
         }
     }
     /**
      * Changes the currently displayed page.
-     * @param itemIndex The index of the target page
+     * @param itemIndex The index of the target item
      * @since 1.0.0-rc.15
      * @public
      */
     navigateTo(itemIndex) {
-        if (!this.isIndexInRange(itemIndex)) {
-            return;
-        }
-        if (this._focusedItemIndex < itemIndex) {
-            this._itemIndicator = 1;
+        this._changePageIndex(itemIndex, { fireEvent: false });
+    }
+    _changePageIndex(itemIndex, options = {}) {
+        const { fireEvent = true, moveFocus = false } = options;
+        const newPageIndex = clamp(itemIndex, 0, this.items.length - this.effectiveItemsPerPage);
+        if (moveFocus || (this._focusedItemIndex < newPageIndex || this._focusedItemIndex > newPageIndex + this.effectiveItemsPerPage - 1)) {
+            this._focusedItemIndex = clamp(itemIndex, 0, this.items.length - 1);
         }
-        this._focusedItemIndex = itemIndex;
-        this._currentSlideIndex = itemIndex - this._itemIndicator;
-        if (this.isItemInViewport(itemIndex)) {
-            this._currentSlideIndex = this._visibleItemsIndexes[0];
-            this.focusItem();
+        if (this._currentPageIndex === newPageIndex) {
             return;
         }
-        this.skipToItem(this._focusedItemIndex, 1);
+        this._currentPageIndex = newPageIndex;
+        this._updateVisibleItems(newPageIndex);
+        if (fireEvent) {
+            this.fireDecoratorEvent("navigate", { selectedIndex: newPageIndex });
+        }
     }
-    async skipToItem(focusIndex, offset) {
-        if (!this.isItemInViewport(focusIndex)) {
-            let slideIndex = this._calculateItemSlideIndex(this._currentSlideIndex, offset);
-            if (focusIndex === 0) {
-                slideIndex = 0;
-            }
-            this._moveToItem(slideIndex);
+    _changeFocusIndex(itemIndex) {
+        itemIndex = clamp(itemIndex, 0, this.items.length - 1);
+        let newPageIndex = this._currentPageIndex;
+        if (itemIndex < this._currentPageIndex) {
+            newPageIndex = itemIndex;
         }
-        await renderFinished();
-        this.focusItem();
+        else if (itemIndex > this._currentPageIndex + this.effectiveItemsPerPage - 1) {
+            newPageIndex = itemIndex - this.effectiveItemsPerPage + 1;
+        }
+        if (this._currentPageIndex !== newPageIndex) {
+            this._currentPageIndex = newPageIndex;
+            this._updateVisibleItems(newPageIndex);
+            this.fireDecoratorEvent("navigate", { selectedIndex: newPageIndex });
+        }
+        this._focusedItemIndex = itemIndex;
     }
     /**
      * The indices of the currently visible items of the component.
@@ -588,10 +531,10 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
             return {
                 id: `${this._id}-carousel-item-${idx + 1}`,
                 item,
-                tabIndex: this.isItemInViewport(this._focusedItemIndex) ? 0 : -1,
+                tabIndex: this.isItemVisible(this._focusedItemIndex) ? 0 : -1,
                 posinset: idx + 1,
                 setsize: this._visibleItems.length,
-                visible: this.isItemInViewport(idx),
+                visible: this.isItemVisible(idx),
             };
         });
     }
@@ -626,7 +569,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         }
         return itemsPerPageSizeXL;
     }
-    isItemInViewport(index) {
+    isItemVisible(index) {
         return this._visibleItemsIndexes.includes(index);
     }
     _updateVisibleItems(index) {
@@ -637,7 +580,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
             return;
         }
         if (newItemIndex > items.length - effectiveItemsPerPage) {
-            newItemIndex = items.length - effectiveItemsPerPage;
+            newItemIndex = Math.max(0, items.length - effectiveItemsPerPage);
         }
         const lastItemIndex = newItemIndex + effectiveItemsPerPage;
         this._visibleItemsIndexes = [];
@@ -701,7 +644,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         const pages = this.pagesCount;
         for (let index = 0; index < pages; index++) {
             dots.push({
-                active: index === this._currentSlideIndex,
+                active: index === this._currentPageIndex,
                 ariaLabel: Carousel_1.i18nBundle.getText(CAROUSEL_DOT_TEXT, index + 1, pages),
             });
         }
@@ -715,10 +658,10 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         };
     }
     get hasPrev() {
-        return this.cyclic || (this._focusedItemIndex - 1 >= 0 && this._currentSlideIndex !== 0);
+        return this.cyclic || (this._focusedItemIndex - 1 >= 0 && this._currentPageIndex !== 0);
     }
     get hasNext() {
-        return this.cyclic || (this._focusedItemIndex + 1 <= this._visibleItems.length - 1 && this._currentSlideIndex < this.pagesCount - 1);
+        return this.cyclic || (this._focusedItemIndex + 1 <= this._visibleItems.length - 1 && this._currentPageIndex < this.pagesCount - 1);
     }
     get suppressAnimation() {
         return this._resizing || getAnimationMode() === AnimationMode.None;
@@ -726,9 +669,6 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     get _isRTL() {
         return this.effectiveDir === "rtl";
     }
-    get selectedIndexToShow() {
-        return this._isRTL ? this.items.length - (this.items.length - this._focusedItemIndex) + 1 : this._focusedItemIndex + 1;
-    }
     get ofText() {
         return Carousel_1.i18nBundle.getText(CAROUSEL_OF_TEXT);
     }
@@ -750,8 +690,8 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     /**
      * Returns only visible (non-hidden) content items.
      * Items with the 'hidden' attribute are automatically excluded from carousel navigation.
+     * @default []
      * @private
-     * @returns {Array<HTMLElement>}
      */
     get _visibleItems() {
         return this.content.filter(x => !x.hasAttribute("hidden"));
@@ -813,7 +753,7 @@ __decorate([
 ], Carousel.prototype, "_visibleItemsCount", void 0);
 __decorate([
     property({ type: Number, noAttribute: true })
-], Carousel.prototype, "_currentSlideIndex", void 0);
+], Carousel.prototype, "_currentPageIndex", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, individualSlots: true })
 ], Carousel.prototype, "content", void 0);