@ui5/webcomponents 2.16.0-rc.0 → 2.16.0-rc.1

package/dist/Carousel.js

@@ -11,11 +11,11 @@ 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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import { isLeft, isRight, isDown, isUp, isF7, } from "@ui5/webcomponents-base/dist/Keys.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";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
@@ -24,6 +24,8 @@ import { CAROUSEL_OF_TEXT, CAROUSEL_DOT_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT, CARO
 import CarouselArrowsPlacement from "./types/CarouselArrowsPlacement.js";
 import CarouselPageIndicatorType from "./types/CarouselPageIndicatorType.js";
 import CarouselTemplate from "./CarouselTemplate.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
 /**
@@ -108,6 +110,15 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
          * @public
          */
         this.hideNavigationArrows = false;
+        /**
+         * Defines the current first visible item in the viewport.
+         * Default value is 0, which means the first item in the viewport.
+         *
+         * @since 1.0.0-rc.15
+         * @default 0
+         * @public
+         */
+        this._currentSlideIndex = 0;
         /**
          * Defines the visibility of the page indicator.
          * If set to true the page indicator will be hidden.
@@ -153,7 +164,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
          * @default 0
          * @private
          */
-        this._selectedIndex = 0;
+        this._focusedItemIndex = 0;
         /**
          * Defines the position of arrows.
          *
@@ -171,6 +182,8 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
          * @since 1.0.0-rc.15
          */
         this._visibleNavigationArrows = false;
+        this._pageStep = 10;
+        this._itemIndicator = 0;
         this._scrollEnablement = new ScrollEnablement(this);
         this._scrollEnablement.attachEvent("touchend", e => {
             this._updateScrolling(e);
@@ -179,6 +192,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         this._resizing = false; // indicates if the carousel is in process of resizing
         this._lastFocusedElements = [];
         this._orderOfLastFocusedPages = [];
+        this._visibleItemsIndexes = [];
     }
     onBeforeRendering() {
         if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation || !isDesktop()) {
@@ -200,8 +214,8 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         ResizeHandler.deregister(this, this._onResizeBound);
     }
     validateSelectedIndex() {
-        if (!this.isIndexInRange(this._selectedIndex)) {
-            this._selectedIndex = 0;
+        if (!this.isIndexInRange(this._focusedItemIndex)) {
+            this._focusedItemIndex = 0;
         }
     }
     _onResize() {
@@ -211,15 +225,13 @@ 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,
         // therefore page index does not need to be re-adjusted
         if (this.effectiveItemsPerPage === previousItemsPerPage) {
             return;
         }
-        if (this._selectedIndex > this.pagesCount - 1) {
-            this._selectedIndex = this.pagesCount - 1;
-            this.fireDecoratorEvent("navigate", { selectedIndex: this._selectedIndex });
-        }
+        this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentSlideIndex, this.items.length - this.effectiveItemsPerPage);
     }
     _updateScrolling(e) {
         if (!e) {
@@ -232,23 +244,30 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
             this.navigateRight();
         }
     }
-    async _onkeydown(e) {
+    _onkeydown(e) {
         if (isF7(e)) {
             this._handleF7Key(e);
             return;
         }
-        if (e.target !== this.getDomRef()) {
-            return;
+        if (isHome(e)) {
+            this._handleHome(e);
         }
-        if (isLeft(e) || isDown(e)) {
+        if (isEnd(e)) {
+            this._handleEnd(e);
+        }
+        if (isPageUp(e)) {
+            this._handlePageUp(e);
+        }
+        if (isPageDown(e)) {
+            this._handlePageDown(e);
+        }
+        if (isLeft(e) || isUp(e)) {
+            e.preventDefault();
             this.navigateLeft();
-            await renderFinished();
-            this.getDomRef().focus();
         }
-        else if (isRight(e) || isUp(e)) {
+        else if (isRight(e) || isDown(e)) {
+            e.preventDefault();
             this.navigateRight();
-            await renderFinished();
-            this.getDomRef().focus();
         }
     }
     _onfocusin(e) {
@@ -258,7 +277,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         }
         let pageIndex = -1;
         for (let i = 0; i < this.content.length; i++) {
-            if (this.content[i].contains(target)) {
+            if (this.content[i].isEqualNode(target?.querySelector("slot")?.assignedNodes()[0])) {
                 pageIndex = i;
                 break;
             }
@@ -266,6 +285,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         if (pageIndex === -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);
@@ -286,15 +306,49 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
             this._visibleNavigationArrows = true;
         }
     }
-    _handleF7Key(e) {
+    _ontouchstart(e) {
+        const target = e.target;
+        if (target.hasAttribute("data-ui5-arrow-forward") || target.hasAttribute("data-ui5-arrow-back")) {
+            e.preventDefault();
+        }
+    }
+    _onmousedown(e) {
+        const target = e.target;
+        if (target.hasAttribute("data-ui5-arrow-forward") || target.hasAttribute("data-ui5-arrow-back")) {
+            e.preventDefault();
+        }
+    }
+    async _handleF7Key(e) {
         const lastFocusedElement = this._lastFocusedElements[this._getLastFocusedActivePageIndex];
-        if (e.target === this.getDomRef() && lastFocusedElement) {
+        if (!this._lastInnerFocusedElement) {
+            const firstFocusable = await getFirstFocusableElement(this.items[this._focusedItemIndex].item);
+            firstFocusable?.focus();
+            this._lastInnerFocusedElement = firstFocusable || undefined;
+        }
+        else if (this.carouselItemDomRef(this._focusedItemIndex)[0] === lastFocusedElement && lastFocusedElement !== e.target) {
             lastFocusedElement.focus();
+            this._lastInnerFocusedElement = e.target;
         }
-        else {
-            this.getDomRef().focus();
+        else if (this._lastInnerFocusedElement) {
+            this._lastInnerFocusedElement.focus();
         }
     }
+    _handleHome(e) {
+        e.preventDefault();
+        this.navigateTo(0);
+    }
+    _handleEnd(e) {
+        e.preventDefault();
+        this.navigateTo(this.items.length - 1);
+    }
+    _handlePageUp(e) {
+        e.preventDefault();
+        this.navigateTo(this._focusedItemIndex + this._pageStep < this.items.length ? this._focusedItemIndex + this._pageStep : this.items.length - 1);
+    }
+    _handlePageDown(e) {
+        e.preventDefault();
+        this.navigateTo(this._focusedItemIndex - this._pageStep > 0 ? this._focusedItemIndex - this._pageStep : 0);
+    }
     get _backgroundDesign() {
         return this.backgroundDesign.toLowerCase();
     }
@@ -305,50 +359,136 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
                 return pageIndex;
             }
         }
-        return this._selectedIndex;
+        return this._focusedItemIndex;
     }
     navigateLeft() {
         this._resizing = false;
-        const previousSelectedIndex = this._selectedIndex;
-        if (this._selectedIndex - 1 < 0) {
-            if (this.cyclic) {
-                this._selectedIndex = this.pagesCount - 1;
+        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._selectedIndex;
+            --this._focusedItemIndex;
         }
-        if (previousSelectedIndex !== this._selectedIndex) {
-            this.fireDecoratorEvent("navigate", { selectedIndex: this._selectedIndex });
+        if (previousSelectedIndex !== this._focusedItemIndex) {
+            this.skipToItem(this._focusedItemIndex, -1);
+            this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
         }
     }
     navigateRight() {
         this._resizing = false;
-        const previousSelectedIndex = this._selectedIndex;
-        if (this._selectedIndex + 1 > this.pagesCount - 1) {
+        const previousSelectedIndex = this._focusedItemIndex;
+        if (this._focusedItemIndex + 1 > this.items.length - 1) {
             if (this.cyclic) {
-                this._selectedIndex = 0;
+                if (this._focusedItemIndex === this.items.length - 1 && this.effectiveItemsPerPage > 1) {
+                    this._focusedItemIndex = this.items.length - 1;
+                }
+                else {
+                    this._focusedItemIndex = 0;
+                }
             }
             else {
                 return;
             }
         }
         else {
-            ++this._selectedIndex;
+            ++this._focusedItemIndex;
         }
-        if (previousSelectedIndex !== this._selectedIndex) {
-            this.fireDecoratorEvent("navigate", { selectedIndex: this._selectedIndex });
+        if (previousSelectedIndex !== this._focusedItemIndex) {
+            this.skipToItem(this._focusedItemIndex, 1);
+            this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
         }
     }
-    _navButtonClick(e) {
-        const button = e.target;
-        if (button.hasAttribute("data-ui5-arrow-forward")) {
-            this.navigateRight();
+    navigateArrowRight() {
+        if (this._focusedItemIndex === this._visibleItemsIndexes[0]) {
+            this.navigateTo(this._focusedItemIndex + 1);
+            this._moveToItem(this._currentSlideIndex + 1);
         }
         else {
-            this.navigateLeft();
+            this._moveToItem(this._currentSlideIndex + 1);
+            this.navigateTo(this._focusedItemIndex);
+        }
+    }
+    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);
+        }
+    }
+    _calculateItemSlideIndex(currentSlideIndex, itemStep) {
+        if (this.isItemInViewport(this._focusedItemIndex)) {
+            return 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;
+    }
+    _moveToItem(slideIndex) {
+        if (this.items.length === 0) {
+            return;
+        }
+        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;
+    }
+    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();
+            }
+        }
+        else if (this._visibleItemsIndexes.length <= 1) {
+            if (target.hasAttribute("data-ui5-arrow-forward")) {
+                this.navigateRight();
+            }
+            else {
+                this.navigateLeft();
+            }
         }
-        this.focus();
     }
     /**
      * Changes the currently displayed page.
@@ -357,8 +497,28 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
      * @public
      */
     navigateTo(itemIndex) {
-        this._resizing = false;
-        this._selectedIndex = itemIndex;
+        if (this._focusedItemIndex < itemIndex) {
+            this._itemIndicator = 1;
+        }
+        this._focusedItemIndex = itemIndex;
+        this._currentSlideIndex = itemIndex - this._itemIndicator;
+        if (this.isItemInViewport(itemIndex)) {
+            this._currentSlideIndex = this._visibleItemsIndexes[0];
+            this.focusItem();
+            return;
+        }
+        this.skipToItem(this._focusedItemIndex, 1);
+    }
+    async skipToItem(focusIndex, offset) {
+        if (!this.isItemInViewport(focusIndex)) {
+            let slideIndex = this._calculateItemSlideIndex(this._currentSlideIndex, offset);
+            if (focusIndex === 0) {
+                slideIndex = 0;
+            }
+            this._moveToItem(slideIndex);
+        }
+        await renderFinished();
+        this.focusItem();
     }
     /**
      * Assuming that all items have the same width
@@ -366,14 +526,13 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
      */
     get items() {
         return this.content.map((item, idx) => {
-            const visible = this.isItemInViewport(idx);
             return {
                 id: `${this._id}-carousel-item-${idx + 1}`,
                 item,
-                tabIndex: visible ? 0 : -1,
+                tabIndex: this.isItemInViewport(this._focusedItemIndex) ? 0 : -1,
                 posinset: idx + 1,
                 setsize: this.content.length,
-                selected: visible,
+                visible: this.isItemInViewport(idx),
             };
         });
     }
@@ -409,10 +568,26 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         return itemsPerPageSizeXL;
     }
     isItemInViewport(index) {
-        return index >= this._selectedIndex && index <= this._selectedIndex + this.effectiveItemsPerPage - 1;
+        return this._visibleItemsIndexes.includes(index);
+    }
+    _updateVisibleItems(index) {
+        let newItemIndex = index;
+        const effectiveItemsPerPage = this.effectiveItemsPerPage;
+        const items = this.items;
+        if (!items.length) {
+            return;
+        }
+        if (newItemIndex > items.length - effectiveItemsPerPage) {
+            newItemIndex = items.length - effectiveItemsPerPage;
+        }
+        const lastItemIndex = newItemIndex + effectiveItemsPerPage;
+        this._visibleItemsIndexes = [];
+        for (let i = newItemIndex; i < lastItemIndex; i++) {
+            this._visibleItemsIndexes.push(i);
+        }
     }
     isIndexInRange(index) {
-        return index >= 0 && index <= this.pagesCount - 1;
+        return index >= 0 && index <= this.items.length - 1;
     }
     /**
      * @private
@@ -467,7 +642,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._selectedIndex,
+                active: index === this._currentSlideIndex,
                 ariaLabel: Carousel_1.i18nBundle.getText(CAROUSEL_DOT_TEXT, index + 1, pages),
             });
         }
@@ -481,10 +656,10 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         };
     }
     get hasPrev() {
-        return this.cyclic || this._selectedIndex - 1 >= 0;
+        return this.cyclic || (this._focusedItemIndex - 1 >= 0 && this._currentSlideIndex !== 0);
     }
     get hasNext() {
-        return this.cyclic || this._selectedIndex + 1 <= this.pagesCount - 1;
+        return this.cyclic || (this._focusedItemIndex + 1 <= this.content.length - 1 && this._currentSlideIndex < this.pagesCount - 1);
     }
     get suppressAnimation() {
         return this._resizing || getAnimationMode() === AnimationMode.None;
@@ -493,13 +668,13 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         return this.effectiveDir === "rtl";
     }
     get selectedIndexToShow() {
-        return this._isRTL ? this.pagesCount - (this.pagesCount - this._selectedIndex) + 1 : this._selectedIndex + 1;
+        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);
     }
     get ariaActiveDescendant() {
-        return this.content.length ? `${this._id}-carousel-item-${this._selectedIndex + 1}` : undefined;
+        return this.content.length ? `${this._id}-carousel-item-${this._focusedItemIndex + 1}` : undefined;
     }
     get ariaLabelTxt() {
         return getEffectiveAriaLabelText(this);
@@ -513,20 +688,11 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     get _roleDescription() {
         return Carousel_1.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION);
     }
-    /**
-     * The indices of the currently visible items of the component.
-     * @public
-     * @since 1.0.0-rc.15
-     * @default []
-     */
-    get visibleItemsIndices() {
-        const visibleItemsIndices = [];
-        this.items.forEach((item, index) => {
-            if (this.isItemInViewport(index)) {
-                visibleItemsIndices.push(index);
-            }
+    carouselItemDomRef(idx) {
+        const items = this.getDomRef()?.querySelectorAll(".ui5-carousel-item") || [];
+        return Array.from(items).filter((item, index) => {
+            return index === idx;
         });
-        return visibleItemsIndices;
     }
 };
 __decorate([
@@ -544,6 +710,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Carousel.prototype, "hideNavigationArrows", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], Carousel.prototype, "_currentSlideIndex", void 0);
 __decorate([
     property({ type: Boolean })
 ], Carousel.prototype, "hidePageIndicator", void 0);
@@ -560,8 +729,8 @@ __decorate([
     property()
 ], Carousel.prototype, "pageIndicatorBorderDesign", void 0);
 __decorate([
-    property({ type: Number })
-], Carousel.prototype, "_selectedIndex", void 0);
+    property({ type: Number, noAttribute: true })
+], Carousel.prototype, "_focusedItemIndex", void 0);
 __decorate([
     property()
 ], Carousel.prototype, "arrowsPlacement", void 0);