@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/Carousel.js

@@ -9,21 +9,23 @@ 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 { 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";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import { CAROUSEL_OF_TEXT, CAROUSEL_DOT_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT, CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_ARIA_ROLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import { CAROUSEL_OF_TEXT, CAROUSEL_DOT_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT, CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_ARIA_ROLE_DESCRIPTION, CAROUSEL_ARIA_LIST_LABEL, } from "./generated/i18n/i18n-defaults.js";
 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";
 /**
@@ -50,6 +52,12 @@ import CarouselCss from "./generated/themes/Carousel.css.js";
  * - The items you want to display need to be visible at the same time.
  * - The items you want to display are uniform and very similar.
  *
+ * ### Hidden Items
+ *
+ * Carousel items can be conditionally hidden by adding the `hidden` attribute to any child element.
+ * Hidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination.
+ * This allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior.
+ *
  * ### Keyboard Handling
  *
  * #### Basic Navigation
@@ -153,7 +161,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 +179,31 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
          * @since 1.0.0-rc.15
          */
         this._visibleNavigationArrows = false;
+        /**
+         * Internal trigger flag that forces component re-rendering when content items change.
+         * @private
+         * @since 2.16.0
+         */
+        this._visibleItemsCount = 0;
+        /**
+         * Defines the current slide index, which contains the visible item in the viewport.
+         * @private
+         * @since 2.16.0-r.c1
+         */
+        this._currentSlideIndex = 0;
+        this._pageStep = 10;
+        this._itemIndicator = 0;
+        this._observableContent = [];
+        this._contentItemsObserver = new MutationObserver(() => {
+            const visibleItemsCount = this._visibleItems.length;
+            if (this._visibleItemsCount === visibleItemsCount) {
+                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._scrollEnablement = new ScrollEnablement(this);
         this._scrollEnablement.attachEvent("touchend", e => {
             this._updateScrolling(e);
@@ -179,8 +212,10 @@ 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() {
+        this._observeContentItems();
         if (this.arrowsPlacement === CarouselArrowsPlacement.Navigation || !isDesktop()) {
             this._visibleNavigationArrows = true;
         }
@@ -197,11 +232,13 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         }
     }
     onExitDOM() {
+        this._contentItemsObserver.disconnect();
+        this._observableContent = [];
         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 +248,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 +267,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 (isEnd(e)) {
+            this._handleEnd(e);
+        }
+        if (isPageUp(e)) {
+            this._handlePageUp(e);
+        }
+        if (isPageDown(e)) {
+            this._handlePageDown(e);
         }
-        if (isLeft(e) || isDown(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) {
@@ -257,8 +299,8 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
             return;
         }
         let pageIndex = -1;
-        for (let i = 0; i < this.content.length; i++) {
-            if (this.content[i].contains(target)) {
+        for (let i = 0; i < this._visibleItems.length; i++) {
+            if (this._visibleItems[i].isEqualNode(target?.querySelector("slot")?.assignedNodes()[0])) {
                 pageIndex = i;
                 break;
             }
@@ -266,6 +308,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,14 +329,80 @@ 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();
+        }
+    }
+    _observeContentItems() {
+        if (this.hasMatchingContent) {
+            return;
+        }
+        this.content.forEach(item => {
+            if (!this._observableContent.includes(item)) {
+                this._contentItemsObserver.observe(item, {
+                    characterData: false,
+                    childList: false,
+                    subtree: false,
+                    attributes: true,
+                    attributeFilter: ["hidden"],
+                });
+            }
+        });
+        this._observableContent = this.content;
+    }
+    get hasMatchingContent() {
+        if (this._observableContent.length !== this.content.length) {
+            return false;
         }
+        const observableContentSet = new WeakSet(this._observableContent);
+        return this.content.every(item => observableContentSet.has(item));
+    }
+    async _handleHome(e) {
+        e.preventDefault();
+        this.navigateTo(0);
+        await renderFinished();
+        this.focusItem();
+    }
+    async _handleEnd(e) {
+        e.preventDefault();
+        this.navigateTo(this.items.length - 1);
+        await renderFinished();
+        this.focusItem();
+    }
+    async _handlePageUp(e) {
+        e.preventDefault();
+        this.navigateTo(this._focusedItemIndex + this._pageStep < this.items.length ? this._focusedItemIndex + this._pageStep : this.items.length - 1);
+        await renderFinished();
+        this.focusItem();
+    }
+    async _handlePageDown(e) {
+        e.preventDefault();
+        this.navigateTo(this._focusedItemIndex - this._pageStep > 0 ? this._focusedItemIndex - this._pageStep : 0);
+        await renderFinished();
+        this.focusItem();
     }
     get _backgroundDesign() {
         return this.backgroundDesign.toLowerCase();
@@ -305,75 +414,198 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
                 return pageIndex;
             }
         }
-        return this._selectedIndex;
+        return this._focusedItemIndex;
     }
-    navigateLeft() {
+    async 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);
+            await renderFinished();
+            this.focusItem();
+            this.fireDecoratorEvent("navigate", { selectedIndex: this._focusedItemIndex });
         }
     }
-    navigateRight() {
+    async 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);
+            await renderFinished();
+            this.focusItem();
+            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.focusItem();
+            this._moveToItem(this._currentSlideIndex + 1);
         }
         else {
-            this.navigateLeft();
+            this._moveToItem(this._currentSlideIndex + 1);
+            this.navigateTo(this._focusedItemIndex);
+            this.focusItem();
+        }
+    }
+    navigateArrowLeft() {
+        if (this._focusedItemIndex > 0 && this._focusedItemIndex === this._visibleItemsIndexes[this._visibleItemsIndexes.length - 1]) {
+            this.navigateTo(this._focusedItemIndex - 1);
+            this.focusItem();
+            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);
+            this.focusItem();
+        }
+    }
+    _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.
-     * @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) {
-        this._resizing = false;
-        this._selectedIndex = itemIndex;
+        if (!this.isIndexInRange(itemIndex)) {
+            return;
+        }
+        if (this._focusedItemIndex < itemIndex) {
+            this._itemIndicator = 1;
+        }
+        this._focusedItemIndex = itemIndex;
+        this._currentSlideIndex = itemIndex - this._itemIndicator;
+        if (this.isItemInViewport(itemIndex)) {
+            this._currentSlideIndex = this._visibleItemsIndexes[0];
+        }
+        else {
+            this.skipToItem(this._focusedItemIndex, 1);
+        }
+    }
+    skipToItem(focusIndex, offset) {
+        if (!this.isItemInViewport(focusIndex)) {
+            let slideIndex = this._calculateItemSlideIndex(this._currentSlideIndex, offset);
+            if (focusIndex === 0) {
+                slideIndex = 0;
+            }
+            this._moveToItem(slideIndex);
+        }
+    }
+    /**
+     * The indices of the currently visible items of the component.
+     * @public
+     * @since 1.0.0-rc.15
+     * @default []
+     */
+    get visibleItemsIndices() {
+        return this._visibleItemsIndexes;
     }
     /**
      * Assuming that all items have the same width
      * @private
      */
     get items() {
-        return this.content.map((item, idx) => {
-            const visible = this.isItemInViewport(idx);
+        return this._visibleItems.map((item, 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,
+                setsize: this._visibleItems.length,
+                visible: this.isItemInViewport(idx),
             };
         });
     }
@@ -409,10 +641,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
@@ -453,7 +701,7 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
         };
     }
     get pagesCount() {
-        const items = this.content.length;
+        const items = this._visibleItems.length;
         return items > this.effectiveItemsPerPage ? items - this.effectiveItemsPerPage + 1 : 1;
     }
     get isPageTypeDots() {
@@ -467,7 +715,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 +729,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._visibleItems.length - 1 && this._currentSlideIndex < this.pagesCount - 1);
     }
     get suppressAnimation() {
         return this._resizing || getAnimationMode() === AnimationMode.None;
@@ -493,14 +741,11 @@ 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;
-    }
     get ariaLabelTxt() {
         return getEffectiveAriaLabelText(this);
     }
@@ -513,20 +758,23 @@ let Carousel = Carousel_1 = class Carousel extends UI5Element {
     get _roleDescription() {
         return Carousel_1.i18nBundle.getText(CAROUSEL_ARIA_ROLE_DESCRIPTION);
     }
+    get _ariaListLabel() {
+        return Carousel_1.i18nBundle.getText(CAROUSEL_ARIA_LIST_LABEL);
+    }
     /**
-     * The indices of the currently visible items of the component.
-     * @public
-     * @since 1.0.0-rc.15
+     * Returns only visible (non-hidden) content items.
+     * Items with the 'hidden' attribute are automatically excluded from carousel navigation.
      * @default []
+     * @private
      */
-    get visibleItemsIndices() {
-        const visibleItemsIndices = [];
-        this.items.forEach((item, index) => {
-            if (this.isItemInViewport(index)) {
-                visibleItemsIndices.push(index);
-            }
+    get _visibleItems() {
+        return this.content.filter(x => !x.hasAttribute("hidden"));
+    }
+    carouselItemDomRef(idx) {
+        const items = this.getDomRef()?.querySelectorAll(".ui5-carousel-item") || [];
+        return Array.from(items).filter((item, index) => {
+            return index === idx;
         });
-        return visibleItemsIndices;
     }
 };
 __decorate([
@@ -560,8 +808,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);
@@ -574,6 +822,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], Carousel.prototype, "_visibleNavigationArrows", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], Carousel.prototype, "_visibleItemsCount", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], Carousel.prototype, "_currentSlideIndex", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, individualSlots: true })
 ], Carousel.prototype, "content", void 0);