@sapudex/web-components 2.61.0 → 2.62.0

package/cypress/specs/TagGroup.cy.tsx

@@ -1,4 +1,5 @@
 import { UDExTagGroup, UDExTag } from "../support/component-imports.js";
+import type Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 
 const defaultTagGroup = <UDExTagGroup>
   <UDExTag text="Default"></UDExTag>
@@ -106,6 +107,173 @@ describe("TagGroup", () => {
     cy.get("[udex-tag-group]").shadow().find("[udex-tooltip]").should("have.attr", "accessible-name", "Hidden tags");
   });
 
+  describe("Empty tokenizer accessibility", () => {
+    const UDExLongTagText = "JavaScript is a lightweight interpreted programming language with a deliberately long selected tag";
+    const UDExTagTexts = [UDExLongTagText, "Swift", "React", "Angular", "Django"];
+    const UDExTokenizer = () => cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer");
+    const UDExTokenizerList = () => UDExTokenizer().shadow().find(".ui5-tokenizer--list");
+    const UDExMoreButton = () => UDExTokenizer().shadow().find(".ui5-tokenizer-more-text");
+
+    function UDExMountOverflowTags(UDExTexts = UDExTagTexts) {
+      cy.mount(
+        <div id="tag-group-overflow-fixture" style="width: 320px;">
+          <button id="before-overflow-tags">Previous</button>
+          <UDExTagGroup tooltipAccessibleName="Hidden selected languages">
+            {UDExTexts.map(UDExText => <UDExTag text={UDExText}></UDExTag>)}
+          </UDExTagGroup>
+        </div>
+      );
+    }
+
+    function UDExAssertTokenizerList(UDExVisibleCount: number, UDExTotalCount = UDExTagTexts.length) {
+      // Retry ownership and semantics together: UI5 computes overflow after rendering.
+      UDExTokenizerList().should($list => {
+        const UDExAssignedTags = Array.from($list[0].querySelectorAll("slot"))
+          .flatMap(UDExSlot => UDExSlot.assignedElements());
+        const UDExVisibleTags = UDExAssignedTags.filter(UDExTokenElement => !UDExTokenElement.hasAttribute("overflows"));
+        expect(UDExAssignedTags, "all tags remain slotted into the tokenizer list").to.have.length(UDExTotalCount);
+        expect(UDExVisibleTags, "visible tags owned through the tokenizer list's slots").to.have.length(UDExVisibleCount);
+        expect($list).to.have.attr("role", UDExVisibleCount ? "listbox" : "presentation");
+        if (UDExVisibleCount) {
+          const UDExTokenizerHost = ($list[0].getRootNode() as ShadowRoot).host as Tokenizer;
+          expect($list).to.have.attr("aria-label", UDExTokenizerHost.tokenizerLabel);
+          expect(UDExTokenizerHost.tokenizerLabel).not.to.equal("");
+          UDExVisibleTags.forEach(UDExTokenElement => {
+            expect(UDExTokenElement.shadowRoot?.querySelector('[role="option"]'), "owned tag exposes an option").to.exist;
+          });
+        } else {
+          ["aria-label", "aria-description", "aria-disabled", "aria-readonly"].forEach(UDExAttribute => {
+            expect($list, `empty list omits ${UDExAttribute}`).not.to.have.attr(UDExAttribute);
+          });
+        }
+      });
+    }
+
+    it("makes a tokenizer without tags presentational and removes global ARIA again after a tokenizer-only render", () => {
+      cy.mount(<UDExTagGroup></UDExTagGroup>);
+      UDExTokenizer().find("[udex-tag]").should("not.exist");
+      UDExAssertTokenizerList(0, 0);
+
+      // These public UI5 properties would otherwise restore the global ARIA attributes.
+      UDExTokenizer().invoke("prop", "accessibleName", "Selected languages");
+      UDExTokenizer().invoke("prop", "disabled", true);
+      UDExTokenizer().then($tokenizer => {
+        // jQuery.prop maps "readonly" to native "readOnly", not UI5's property.
+        ($tokenizer[0] as Tokenizer).readonly = true;
+      });
+      UDExTokenizer().should("have.attr", "accessible-name", "Selected languages");
+      UDExTokenizer().should("have.attr", "disabled");
+      UDExTokenizer().should("have.attr", "readonly");
+      UDExAssertTokenizerList(0, 0);
+    });
+
+    it("keeps More named and keyboard-operable when all five tags overflow at 320px", () => {
+      UDExMountOverflowTags();
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      UDExMoreButton().should("be.visible").and("have.attr", "role", "button");
+      UDExMoreButton().should($more => {
+        expect($more.text()).to.contain("5");
+        expect($more[0].closest(".ui5-tokenizer--list"), "More is outside the presentational list").to.equal(null);
+        let UDExNode: HTMLElement | null = $more[0];
+        while (UDExNode) {
+          expect(UDExNode.getAttribute("aria-hidden"), "More has no hidden composed ancestor").not.to.equal("true");
+          expect(UDExNode.hasAttribute("hidden") || UDExNode.hasAttribute("inert")).to.equal(false);
+          UDExNode = UDExNode.assignedSlot || UDExNode.parentElement
+            || ((UDExNode.getRootNode() as ShadowRoot).host as HTMLElement | undefined) || null;
+        }
+      });
+
+      cy.get("#before-overflow-tags").focus();
+      cy.realPress("Tab");
+      UDExMoreButton().should("be.focused");
+      cy.realPress("Enter");
+      cy.get("[udex-tag-group]").shadow().find("[udex-tooltip]").should("have.attr", "open");
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group-tooltip__content [udex-tag]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+    });
+
+    it("restores the current tokenizer name and owned options on expansion, then removes the empty listbox on collapse", () => {
+      UDExMountOverflowTags();
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      UDExTokenizer().invoke("prop", "accessibleName", "Selected languages");
+      UDExTokenizer().should("have.attr", "accessible-name", "Selected languages");
+      UDExAssertTokenizerList(0);
+
+      cy.get("[udex-tag-group]").invoke("prop", "tokenizerExpanded", true);
+      UDExAssertTokenizerList(5);
+      UDExTokenizerList().should("have.attr", "aria-label", "Selected languages");
+      UDExMoreButton().should("not.exist");
+
+      cy.get("[udex-tag-group]").invoke("prop", "tokenizerExpanded", false);
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      UDExMoreButton().should("be.visible");
+    });
+
+    it("retains a named listbox when collapse leaves one visible option and four overflowing tags", () => {
+      UDExMountOverflowTags(["Python", UDExLongTagText, "React", "Angular", "Django"]);
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 4);
+      UDExAssertTokenizerList(1);
+      UDExMoreButton().should("be.visible");
+
+      cy.get("[udex-tag-group]").invoke("prop", "tokenizerExpanded", true);
+      UDExAssertTokenizerList(5);
+      cy.get("[udex-tag-group]").invoke("prop", "tokenizerExpanded", false);
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 4);
+      UDExAssertTokenizerList(1);
+      UDExMoreButton().should("be.visible");
+    });
+
+    it("updates list semantics after real container resizes from all-overflow to visible tags and back", () => {
+      cy.viewport(1400, 800);
+      UDExMountOverflowTags();
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+
+      cy.get("#tag-group-overflow-fixture").invoke("attr", "style", "width: 1200px;");
+      UDExAssertTokenizerList(5);
+      UDExMoreButton().should("not.exist");
+
+      cy.get("#tag-group-overflow-fixture").invoke("attr", "style", "width: 320px;");
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      UDExMoreButton().should("be.visible");
+    });
+
+    it("resumes tokenizer ARIA synchronization after the same TagGroup is detached and reattached", () => {
+      let UDExDetachedGroup: HTMLElement & { tokenizerExpanded: boolean };
+      UDExMountOverflowTags();
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      cy.get("[udex-tag-group]").then($group => {
+        UDExDetachedGroup = $group[0] as typeof UDExDetachedGroup;
+        UDExDetachedGroup.remove();
+      });
+      cy.then(() => {
+        // The detached node is intentional; do not make it a Cypress DOM subject.
+        expect(UDExDetachedGroup.isConnected).to.equal(false);
+        UDExDetachedGroup.tokenizerExpanded = true;
+      });
+      cy.get("#tag-group-overflow-fixture").then($fixture => {
+        $fixture[0].append(UDExDetachedGroup);
+      });
+      cy.get("[udex-tag-group]").should($group => {
+        expect($group[0]).to.equal(UDExDetachedGroup);
+        expect($group[0].isConnected).to.equal(true);
+      });
+
+      UDExAssertTokenizerList(5);
+      UDExTokenizer().invoke("prop", "accessibleName", "Reattached selected languages");
+      UDExTokenizerList().should("have.attr", "aria-label", "Reattached selected languages");
+      cy.get("[udex-tag-group]").invoke("prop", "tokenizerExpanded", false);
+      UDExTokenizer().find("[udex-tag][overflows]").should("have.length", 5);
+      UDExAssertTokenizerList(0);
+      UDExMoreButton().should("be.visible");
+    });
+  });
+
   describe("Keyboard focus with hidden tags", () => {
     it("keeps the 'n more' button visible when a visible tag receives focus (overflow case)", () => {
       cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);

package/dist/AccordionSpotlight.d.ts

@@ -43,8 +43,9 @@ declare class UDExAccordionSpotlight extends UI5Element {
         };
     };
     /**
-     * The index of the currently expanded item (0-based).
-     * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+     * The index of the currently expanded item (0-based), or <code>-1</code> when
+     * no item is expanded. Derived from items' <code>selected</code> attribute;
+     * kept in sync by the parent.
      *
      * @private
      */
@@ -105,6 +106,10 @@ declare class UDExAccordionSpotlight extends UI5Element {
     /**
      * The slotted AccordionSpotlightItem elements.
      *
+     * <code>invalidateOnChildChange</code> lets the component react when an item's
+     * <code>selected</code> property is set programmatically, so
+     * <code>item.selected = true</code> switches the expanded item at runtime.
+     *
      * @public
      */
     items: DefaultSlot<AccordionSpotlightItem>;

package/dist/AccordionSpotlight.js

@@ -59,12 +59,13 @@ let UDExAccordionSpotlight = class UDExAccordionSpotlight extends UI5Element {
     constructor() {
         super();
         /**
-         * The index of the currently expanded item (0-based).
-         * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+         * The index of the currently expanded item (0-based), or <code>-1</code> when
+         * no item is expanded. Derived from items' <code>selected</code> attribute;
+         * kept in sync by the parent.
          *
          * @private
          */
-        this._selectedIndex = 0;
+        this._selectedIndex = -1;
         /**
          * Vertical alignment of the navigation sidebar relative to the content panel.
          *
@@ -158,8 +159,27 @@ let UDExAccordionSpotlight = class UDExAccordionSpotlight extends UI5Element {
         if (this.items.length === 0) {
             return;
         }
-        const foundIndex = this.items.findIndex(item => item.selected);
-        const activeIndex = foundIndex === -1 ? 0 : foundIndex;
+        const selectedIndexes = this.items.reduce((acc, item, index) => {
+            if (item.selected) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        // Prefer a selected item that differs from the currently tracked index — it
+        // signals a selection requested via `item.selected = true`. Otherwise keep
+        // the current index if it is still selected. When no item is selected, leave
+        // the component with no active item (-1) rather than forcing the first one.
+        let activeIndex;
+        const newlySelected = selectedIndexes.find(index => index !== this._selectedIndex);
+        if (newlySelected !== undefined) {
+            activeIndex = newlySelected;
+        }
+        else if (selectedIndexes.includes(this._selectedIndex)) {
+            activeIndex = this._selectedIndex;
+        }
+        else {
+            activeIndex = selectedIndexes[0] ?? -1;
+        }
         this._selectedIndex = activeIndex;
         this.items.forEach((item, index) => {
             item.selected = index === activeIndex;
@@ -254,7 +274,12 @@ __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExAccordionSpotlight.prototype, "_isPaused", void 0);
 __decorate([
-    slot({ type: HTMLElement, "default": true, individualSlots: true })
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+        invalidateOnChildChange: true,
+    })
 ], UDExAccordionSpotlight.prototype, "items", void 0);
 __decorate([
     slot({ type: HTMLElement })

package/dist/AccordionSpotlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSpotlight.js","sourceRoot":"","sources":["../src/AccordionSpotlight.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AccordionSpotlightTemplate from \"./AccordionSpotlightTemplate.js\";\nimport AccordionSpotlightItem from \"./AccordionSpotlightItem.js\";\nimport UDExButton from \"./Button.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport \"@ui5/webcomponents-icons/dist/pause.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\n\n// Styles\nimport AccordionSpotlightCss from \"./generated/themes/AccordionSpotlight.css.js\";\n\nexport enum UDExAccordionSpotlightVerticalAlignment {\n  Top = \"Top\",\n  Center = \"Center\",\n}\n\nexport enum UDExAccordionSpotlightPlacement {\n  Start = \"Start\",\n  End = \"End\",\n}\n\nexport enum UDExAccordionSpotlightMediaMode {\n  Dynamic = \"Dynamic\",\n  Static = \"Static\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * Vertical accordion navigation with spotlight layout. Items are listed on the\n * left; the expanded panel is displayed on the right (desktop) or inline below\n * the heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightCss,\n  template: AccordionSpotlightTemplate,\n  dependencies: [AccordionSpotlightItem, UDExButton],\n})\n\n/**\n * Fired when the expanded item clicked.\n *\n * @public\n * @param {AccordionSpotlightItem} [item] The accordion spotlight item that was clicked\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExAccordionSpotlight extends UI5Element {\n  eventDetails!: {\n    \"item-click\": { item: AccordionSpotlightItem },\n  };\n\n  /**\n   * The index of the currently expanded item (0-based).\n   * Derived from items' <code>selected</code> attribute; kept in sync by the parent.\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _selectedIndex: number = 0;\n\n  /**\n   * Vertical alignment of the navigation sidebar relative to the content panel.\n   *\n   * @default \"Top\"\n   * @public\n   */\n  @property()\n    verticalAlignment: `${UDExAccordionSpotlightVerticalAlignment}` = UDExAccordionSpotlightVerticalAlignment.Top;\n\n  /**\n   * Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).\n   *\n   * @default \"Start\"\n   * @public\n   */\n  @property()\n    placement: `${UDExAccordionSpotlightPlacement}` = UDExAccordionSpotlightPlacement.Start;\n\n  /**\n   * Enables automatic cycling through items on an interval.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    autoPlay: boolean = false;\n\n  /**\n   * Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.\n   *\n   * @default 5000\n   * @public\n   */\n  @property({ type: Number })\n    autoPlayInterval: number = 5000;\n\n  /**\n   * Defines the width of the navigation panel.\n   *\n   * @default \"auto\"\n   * @public\n   */\n  @property({ type: String })\n    tabWidth: string = \"auto\";\n\n  /**\n   * Controls how the media area behaves. In <code>Static</code> mode a single\n   * persistent media element (image or video) is displayed alongside the nav\n   * list and never changes when items are expanded. In <code>Dynamic</code>\n   * mode (default) each item provides its own content panel.\n   *\n   * @default \"Dynamic\"\n   * @public\n   */\n  @property()\n    mediaMode: `${UDExAccordionSpotlightMediaMode}` = UDExAccordionSpotlightMediaMode.Dynamic;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isPaused: boolean = false;\n\n  /**\n   * The slotted AccordionSpotlightItem elements.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    items!: DefaultSlot<AccordionSpotlightItem>;\n\n  /**\n   * Defines optional content rendered below the navigation items.\n   * Use to place a button or any action element beneath the items.\n   *\n   * @slot footer\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Slot<HTMLElement>;\n\n  /**\n   * Persistent media area shown in <code>Static</code> media mode.\n   * Place an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\n   * it remains visible regardless of which item is currently expanded.\n   *\n   * @slot media\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    media!: Slot<HTMLElement>;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _autoPlayTimer?: number;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onBeforeRendering() {\n    this._syncItemStates();\n  }\n\n  onAfterRendering() {\n    this._checkMobile();\n  }\n\n  onEnterDOM() {\n    ResizeHandler.register(this, this._handleResizeBound);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    if (this.autoPlay) {\n      const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (prefersReducedMotion) {\n        this._isPaused = true;\n      } else {\n        this._startAutoPlay();\n      }\n    }\n  }\n\n  onExitDOM() {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n    this._stopAutoPlay();\n  }\n\n  _handleResize(): void {\n    this._checkMobile();\n  }\n\n  _checkMobile() {\n    const isMobile = BreakpointUtils.isAtMost(\"S\");\n    if (isMobile !== this._isMobile) {\n      this._isMobile = isMobile;\n    }\n  }\n\n  _syncItemStates() {\n    if (this.items.length === 0) {\n      return;\n    }\n\n    const foundIndex = this.items.findIndex(item => item.selected);\n    const activeIndex = foundIndex === -1 ? 0 : foundIndex;\n    this._selectedIndex = activeIndex;\n\n    this.items.forEach((item, index) => {\n      item.selected = index === activeIndex;\n      item._isMobile = this._isMobile;\n    });\n  }\n\n  _startAutoPlay(): void {\n    this._stopAutoPlay();\n    this._isPaused = false;\n    this._autoPlayTimer = window.setInterval(() => {\n      this._advanceItem();\n    }, this.autoPlayInterval);\n  }\n\n  _stopAutoPlay(): void {\n    if (this._autoPlayTimer !== undefined) {\n      window.clearInterval(this._autoPlayTimer);\n      this._autoPlayTimer = undefined;\n    }\n  }\n\n  _advanceItem(): void {\n    const count = this.items.length;\n    if (count === 0) {\n      return;\n    }\n\n    const next = (this._selectedIndex + 1) % count;\n    this._selectItem(next);\n  }\n\n  onPlayButtonClick(): void {\n    if (this._isPaused) {\n      this._startAutoPlay();\n    } else {\n      this._stopAutoPlay();\n      this._isPaused = true;\n    }\n  }\n\n  handleNavItemClick(e: MouseEvent) {\n    const btn = (e.target as HTMLElement).closest<HTMLElement>(\"[data-index]\");\n    if (!btn) {\n      return;\n    }\n    const index = Number.parseInt(btn.dataset.index!);\n    this._selectItem(index);\n  }\n\n  private _selectItem(index: number) {\n    if (index === this._selectedIndex) {\n      return;\n    }\n\n    this._selectedIndex = index;\n    this.items.forEach((item, i) => { item.selected = i === index; });\n    const item = this.items[index];\n    this.fireDecoratorEvent(\"item-click\", { item });\n  }\n\n  get playBtnIcon(): string {\n    return this._isPaused ? \"play\" : \"pause\";\n  }\n\n  get showFooterSlot(): boolean {\n    return this.footer?.length > 0;\n  }\n\n  get isStaticMedia(): boolean {\n    return this.mediaMode === UDExAccordionSpotlightMediaMode.Static;\n  }\n\n  get showMediaSlot(): boolean {\n    return this.isStaticMedia && this.media?.length > 0;\n  }\n}\n\nUDExAccordionSpotlight.define();\n\nexport default UDExAccordionSpotlight;\n"]}
+{"version":3,"file":"AccordionSpotlight.js","sourceRoot":"","sources":["../src/AccordionSpotlight.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport AccordionSpotlightTemplate from \"./AccordionSpotlightTemplate.js\";\nimport AccordionSpotlightItem from \"./AccordionSpotlightItem.js\";\nimport UDExButton from \"./Button.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport \"@ui5/webcomponents-icons/dist/pause.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\n\n// Styles\nimport AccordionSpotlightCss from \"./generated/themes/AccordionSpotlight.css.js\";\n\nexport enum UDExAccordionSpotlightVerticalAlignment {\n  Top = \"Top\",\n  Center = \"Center\",\n}\n\nexport enum UDExAccordionSpotlightPlacement {\n  Start = \"Start\",\n  End = \"End\",\n}\n\nexport enum UDExAccordionSpotlightMediaMode {\n  Dynamic = \"Dynamic\",\n  Static = \"Static\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * Vertical accordion navigation with spotlight layout. Items are listed on the\n * left; the expanded panel is displayed on the right (desktop) or inline below\n * the heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightCss,\n  template: AccordionSpotlightTemplate,\n  dependencies: [AccordionSpotlightItem, UDExButton],\n})\n\n/**\n * Fired when the expanded item clicked.\n *\n * @public\n * @param {AccordionSpotlightItem} [item] The accordion spotlight item that was clicked\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExAccordionSpotlight extends UI5Element {\n  eventDetails!: {\n    \"item-click\": { item: AccordionSpotlightItem },\n  };\n\n  /**\n   * The index of the currently expanded item (0-based), or <code>-1</code> when\n   * no item is expanded. Derived from items' <code>selected</code> attribute;\n   * kept in sync by the parent.\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _selectedIndex: number = -1;\n\n  /**\n   * Vertical alignment of the navigation sidebar relative to the content panel.\n   *\n   * @default \"Top\"\n   * @public\n   */\n  @property()\n    verticalAlignment: `${UDExAccordionSpotlightVerticalAlignment}` = UDExAccordionSpotlightVerticalAlignment.Top;\n\n  /**\n   * Placement of the navigation sidebar — \"Start\" (left) or \"End\" (right).\n   *\n   * @default \"Start\"\n   * @public\n   */\n  @property()\n    placement: `${UDExAccordionSpotlightPlacement}` = UDExAccordionSpotlightPlacement.Start;\n\n  /**\n   * Enables automatic cycling through items on an interval.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    autoPlay: boolean = false;\n\n  /**\n   * Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.\n   *\n   * @default 5000\n   * @public\n   */\n  @property({ type: Number })\n    autoPlayInterval: number = 5000;\n\n  /**\n   * Defines the width of the navigation panel.\n   *\n   * @default \"auto\"\n   * @public\n   */\n  @property({ type: String })\n    tabWidth: string = \"auto\";\n\n  /**\n   * Controls how the media area behaves. In <code>Static</code> mode a single\n   * persistent media element (image or video) is displayed alongside the nav\n   * list and never changes when items are expanded. In <code>Dynamic</code>\n   * mode (default) each item provides its own content panel.\n   *\n   * @default \"Dynamic\"\n   * @public\n   */\n  @property()\n    mediaMode: `${UDExAccordionSpotlightMediaMode}` = UDExAccordionSpotlightMediaMode.Dynamic;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isPaused: boolean = false;\n\n  /**\n   * The slotted AccordionSpotlightItem elements.\n   *\n   * <code>invalidateOnChildChange</code> lets the component react when an item's\n   * <code>selected</code> property is set programmatically, so\n   * <code>item.selected = true</code> switches the expanded item at runtime.\n   *\n   * @public\n   */\n  @slot({\n    type: HTMLElement,\n    \"default\": true,\n    individualSlots: true,\n    invalidateOnChildChange: true,\n  })\n    items!: DefaultSlot<AccordionSpotlightItem>;\n\n  /**\n   * Defines optional content rendered below the navigation items.\n   * Use to place a button or any action element beneath the items.\n   *\n   * @slot footer\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    footer!: Slot<HTMLElement>;\n\n  /**\n   * Persistent media area shown in <code>Static</code> media mode.\n   * Place an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\n   * it remains visible regardless of which item is currently expanded.\n   *\n   * @slot media\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    media!: Slot<HTMLElement>;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _autoPlayTimer?: number;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onBeforeRendering() {\n    this._syncItemStates();\n  }\n\n  onAfterRendering() {\n    this._checkMobile();\n  }\n\n  onEnterDOM() {\n    ResizeHandler.register(this, this._handleResizeBound);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    if (this.autoPlay) {\n      const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n      if (prefersReducedMotion) {\n        this._isPaused = true;\n      } else {\n        this._startAutoPlay();\n      }\n    }\n  }\n\n  onExitDOM() {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n    this._stopAutoPlay();\n  }\n\n  _handleResize(): void {\n    this._checkMobile();\n  }\n\n  _checkMobile() {\n    const isMobile = BreakpointUtils.isAtMost(\"S\");\n    if (isMobile !== this._isMobile) {\n      this._isMobile = isMobile;\n    }\n  }\n\n  _syncItemStates() {\n    if (this.items.length === 0) {\n      return;\n    }\n\n    const selectedIndexes = this.items.reduce<number[]>((acc, item, index) => {\n      if (item.selected) {\n        acc.push(index);\n      }\n      return acc;\n    }, []);\n\n    // Prefer a selected item that differs from the currently tracked index — it\n    // signals a selection requested via `item.selected = true`. Otherwise keep\n    // the current index if it is still selected. When no item is selected, leave\n    // the component with no active item (-1) rather than forcing the first one.\n    let activeIndex: number;\n    const newlySelected = selectedIndexes.find(index => index !== this._selectedIndex);\n    if (newlySelected !== undefined) {\n      activeIndex = newlySelected;\n    } else if (selectedIndexes.includes(this._selectedIndex)) {\n      activeIndex = this._selectedIndex;\n    } else {\n      activeIndex = selectedIndexes[0] ?? -1;\n    }\n\n    this._selectedIndex = activeIndex;\n\n    this.items.forEach((item, index) => {\n      item.selected = index === activeIndex;\n      item._isMobile = this._isMobile;\n    });\n  }\n\n  _startAutoPlay(): void {\n    this._stopAutoPlay();\n    this._isPaused = false;\n    this._autoPlayTimer = window.setInterval(() => {\n      this._advanceItem();\n    }, this.autoPlayInterval);\n  }\n\n  _stopAutoPlay(): void {\n    if (this._autoPlayTimer !== undefined) {\n      window.clearInterval(this._autoPlayTimer);\n      this._autoPlayTimer = undefined;\n    }\n  }\n\n  _advanceItem(): void {\n    const count = this.items.length;\n    if (count === 0) {\n      return;\n    }\n\n    const next = (this._selectedIndex + 1) % count;\n    this._selectItem(next);\n  }\n\n  onPlayButtonClick(): void {\n    if (this._isPaused) {\n      this._startAutoPlay();\n    } else {\n      this._stopAutoPlay();\n      this._isPaused = true;\n    }\n  }\n\n  handleNavItemClick(e: MouseEvent) {\n    const btn = (e.target as HTMLElement).closest<HTMLElement>(\"[data-index]\");\n    if (!btn) {\n      return;\n    }\n    const index = Number.parseInt(btn.dataset.index!);\n    this._selectItem(index);\n  }\n\n  private _selectItem(index: number) {\n    if (index === this._selectedIndex) {\n      return;\n    }\n\n    this._selectedIndex = index;\n    this.items.forEach((item, i) => { item.selected = i === index; });\n    const item = this.items[index];\n    this.fireDecoratorEvent(\"item-click\", { item });\n  }\n\n  get playBtnIcon(): string {\n    return this._isPaused ? \"play\" : \"pause\";\n  }\n\n  get showFooterSlot(): boolean {\n    return this.footer?.length > 0;\n  }\n\n  get isStaticMedia(): boolean {\n    return this.mediaMode === UDExAccordionSpotlightMediaMode.Static;\n  }\n\n  get showMediaSlot(): boolean {\n    return this.isStaticMedia && this.media?.length > 0;\n  }\n}\n\nUDExAccordionSpotlight.define();\n\nexport default UDExAccordionSpotlight;\n"]}

package/dist/AccordionSpotlightItem.d.ts

@@ -37,7 +37,9 @@ declare class UDExAccordionSpotlightItem extends UI5Element {
     subheading: string;
     /**
      * Whether this item is currently expanded.
-     * Set on the element directly to control the initial selection.
+     * Set on the element directly to control the initial selection, or at runtime
+     * (<code>item.selected = true</code>) to expand this item programmatically —
+     * the parent deselects the other items automatically.
      *
      * @default false
      * @public

package/dist/AccordionSpotlightItem.js

@@ -51,7 +51,9 @@ let UDExAccordionSpotlightItem = class UDExAccordionSpotlightItem extends UI5Ele
         this.subheading = "";
         /**
          * Whether this item is currently expanded.
-         * Set on the element directly to control the initial selection.
+         * Set on the element directly to control the initial selection, or at runtime
+         * (<code>item.selected = true</code>) to expand this item programmatically —
+         * the parent deselects the other items automatically.
          *
          * @default false
          * @public

package/dist/AccordionSpotlightItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSpotlightItem.js","sourceRoot":"","sources":["../src/AccordionSpotlightItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,SAAS;AACT,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QACE;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEvB;;;;;WAKG;QAED,eAAU,GAAW,EAAE,CAAC;QAE1B;;;;;;WAMG;QAED,aAAQ,GAAY,KAAK,CAAC;QAE5B;;;;;WAKG;QAED,cAAS,GAAY,KAAK,CAAC;QAE7B;;;;WAIG;QAED,WAAM,GAAW,CAAC,CAAC;IA8BvB,CAAC;IAVC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,CAAC;CACF,CAAA;AAlEG;IADD,QAAQ,EAAE;2DACY;AASrB;IADD,QAAQ,EAAE;8DACe;AAUxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACA;AAS1B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;6DAClB;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACzB;AAQnB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACR;AAU5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;wDACD;AA9DvB,0BAA0B;IAN/B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,yBAAyB;QACjC,QAAQ,EAAE,8BAA8B;KACzC,CAAC;GACI,0BAA0B,CA0E/B;AAED,0BAA0B,CAAC,MAAM,EAAE,CAAC;AAEpC,eAAe,0BAA0B,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport AccordionSpotlightItemTemplate from \"./AccordionSpotlightItemTemplate.js\";\n\n// Styles\nimport AccordionSpotlightItemCss from \"./generated/themes/AccordionSpotlightItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * A single item within the <code>udex-accordion-spotlight</code> component.\n * Provides a heading button (<code>aria-expanded</code>) and an associated\n * content region (<code>role=\"region\"</code>).\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlightItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight-item\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightItemCss,\n  template: AccordionSpotlightItemTemplate,\n})\nclass UDExAccordionSpotlightItem extends UI5Element {\n  /**\n   * The label text shown in the heading button.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    heading: string = \"\";\n\n  /**\n   * Optional descriptive subtext visible when the item is expanded.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    subheading: string = \"\";\n\n  /**\n   * Whether this item is currently expanded.\n   * Set on the element directly to control the initial selection.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected: boolean = false;\n\n  /**\n   * Whether the parent is in mobile layout mode (managed by the parent component).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Zero-based index within the parent (managed by the parent component).\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _index: number = 0;\n\n  /**\n   * The slotted content for this item's panel.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Slot<HTMLElement>;\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n}\n\nUDExAccordionSpotlightItem.define();\n\nexport default UDExAccordionSpotlightItem;\n"]}
+{"version":3,"file":"AccordionSpotlightItem.js","sourceRoot":"","sources":["../src/AccordionSpotlightItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,SAAS;AACT,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;GAmBG;AAOH,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QACE;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEvB;;;;;WAKG;QAED,eAAU,GAAW,EAAE,CAAC;QAE1B;;;;;;;;WAQG;QAED,aAAQ,GAAY,KAAK,CAAC;QAE5B;;;;;WAKG;QAED,cAAS,GAAY,KAAK,CAAC;QAE7B;;;;WAIG;QAED,WAAM,GAAW,CAAC,CAAC;IA8BvB,CAAC;IAVC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,YAAY;QACd,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzC,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAClD,CAAC;CACF,CAAA;AApEG;IADD,QAAQ,EAAE;2DACY;AASrB;IADD,QAAQ,EAAE;8DACe;AAYxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACA;AAS1B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;6DAClB;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACzB;AAQnB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACR;AAU5B;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;wDACD;AAhEvB,0BAA0B;IAN/B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,yBAAyB;QACjC,QAAQ,EAAE,8BAA8B;KACzC,CAAC;GACI,0BAA0B,CA4E/B;AAED,0BAA0B,CAAC,MAAM,EAAE,CAAC;AAEpC,eAAe,0BAA0B,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport AccordionSpotlightItemTemplate from \"./AccordionSpotlightItemTemplate.js\";\n\n// Styles\nimport AccordionSpotlightItemCss from \"./generated/themes/AccordionSpotlightItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * A single item within the <code>udex-accordion-spotlight</code> component.\n * Provides a heading button (<code>aria-expanded</code>) and an associated\n * content region (<code>role=\"region\"</code>).\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion-spotlight-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionSpotlightItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-spotlight-item\",\n  renderer: jsxRenderer,\n  styles: AccordionSpotlightItemCss,\n  template: AccordionSpotlightItemTemplate,\n})\nclass UDExAccordionSpotlightItem extends UI5Element {\n  /**\n   * The label text shown in the heading button.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    heading: string = \"\";\n\n  /**\n   * Optional descriptive subtext visible when the item is expanded.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    subheading: string = \"\";\n\n  /**\n   * Whether this item is currently expanded.\n   * Set on the element directly to control the initial selection, or at runtime\n   * (<code>item.selected = true</code>) to expand this item programmatically —\n   * the parent deselects the other items automatically.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected: boolean = false;\n\n  /**\n   * Whether the parent is in mobile layout mode (managed by the parent component).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _isMobile: boolean = false;\n\n  /**\n   * Zero-based index within the parent (managed by the parent component).\n   *\n   * @private\n   */\n  @property({ type: Number, noAttribute: true })\n    _index: number = 0;\n\n  /**\n   * The slotted content for this item's panel.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines the link(s) to be displayed in the tab header (vertical orientation only).\n   * Use this slot to add one or more udex-link elements to the tab button.\n   *\n   * @slot link\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    link!: Slot<HTMLElement>;\n\n  get hasLinkSlot(): boolean {\n    return this.link && this.link.length > 0;\n  }\n\n  get linkSlotHtml(): string {\n    if (!this.link || this.link.length === 0) {\n      return \"\";\n    }\n    return this.link.map(l => l.outerHTML).join(\"\");\n  }\n}\n\nUDExAccordionSpotlightItem.define();\n\nexport default UDExAccordionSpotlightItem;\n"]}

package/dist/Carousel.d.ts

@@ -163,6 +163,7 @@ declare class UDExCarousel extends UI5Element {
     _calculateDisabledButtonsState(): void;
     _prevButtonClick(): void;
     _nextButtonClick(): void;
+    _navigateToPage(direction: 1 | -1): void;
     _onkeydown(e: KeyboardEvent): void;
     _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void;
     get nextPageText(): string;

package/dist/Carousel.js

@@ -241,14 +241,30 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         if (this.isPrevButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateArrowLeft();
-        this._calculateDisabledButtonsState();
+        this._navigateToPage(-1);
     }
     _nextButtonClick() {
         if (this.isNextButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateArrowRight();
+        this._navigateToPage(1);
+    }
+    _navigateToPage(direction) {
+        const carousel = this._carousel;
+        if (!carousel) {
+            return;
+        }
+        let newPageIndex = carousel._currentPageIndex + direction;
+        if (this.cyclic) {
+            const lastPageIndex = carousel.items.length - carousel.effectiveItemsPerPage;
+            if (newPageIndex > lastPageIndex) {
+                newPageIndex = 0;
+            }
+            else if (newPageIndex < 0) {
+                newPageIndex = carousel.items.length - 1;
+            }
+        }
+        carousel._changePageIndex(newPageIndex);
         this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {

package/dist/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAC9B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,wBAAwB,EACxB,4BAA4B,EAC5B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAK/D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D,MAAM,CAAN,IAAY,8BAGX;AAHD,WAAY,8BAA8B;IACxC,6CAAW,CAAA;IACX,mDAAiB,CAAA;AACnB,CAAC,EAHW,8BAA8B,KAA9B,8BAA8B,QAGzC;AAED,MAAM,CAAN,IAAY,6BAIX;AAJD,WAAY,6BAA6B;IACrC,oDAAmB,CAAA;IACnB,oDAAmB,CAAA;IACnB,8CAAa,CAAA;AACjB,CAAC,EAJW,6BAA6B,KAA7B,6BAA6B,QAIxC;AAED,MAAM,CAAN,IAAY,wBAGX;AAHD,WAAY,wBAAwB;IAClC,mDAAuB,CAAA;IACvB,iDAAqB,CAAA;AACvB,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,QAGnC;AAMD;;;;;;;;;;;;;;;;;GAiBG;AAqBH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAqInC;QACE,KAAK,EAAE,CAAC;QAjIV;;;;;;;;;;WAUG;QAED,wBAAmB,GAAwC,8BAA8B,CAAC,GAAG,CAAC;QAShG;;;WAGG;QAED,kBAAa,GAAW,IAAI,CAAC;QAE/B;;;;;WAKG;QAED,sBAAiB,GAAG,IAAI,CAAC;QAmB3B;;;;;;;;;;;WAWG;QAED,iBAAY,GAAG,cAAc,CAAC;QAEhC;;;;;;;;;WASG;QAED,sBAAiB,GAAuC,SAAS,CAAC;QAoBpE;;;;;WAKG;QAED,mBAAc,GAAW,EAAE,CAAC;QAE9B;;;;;WAKG;QAED,kBAAa,GAAG,KAAK,CAAC;QAKxB,sBAAiB,GAA0C,IAAI,CAAC;QAChE,wBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACjC,kCAA6B,GAAG,GAAG,CAAC;QACpC,wBAAmB,GAAG,KAAK,CAAC;QAE5B,qBAAgB,GAAkB,IAAI,CAAC;QAgDvC,kBAAa,GAAG,GAAG,EAAE;YACnB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;YACpC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO;YACT,CAAC;YAED,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;YACtD,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC;YAC1D,MAAM,WAAW,GAAG,YAAY,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;YAEnE,IAAI,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAEhC,OAAO;YACT,CAAC;YAED,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;YAElE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;YACtC,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC,CAAC;QAjEA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAErC,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAEtC,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,SAAS;QACP,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAEpD,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE,CAAC;YACnC,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC5C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC/B,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,UAAU;QACR,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACpD,CAAC;IAED,SAAS;QACP,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,EAAE,CAAC;YACnC,oBAAoB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC9C,CAAC;QACD,wEAAwE;QACxE,6EAA6E;QAC7E,+EAA+E;QAC/E,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,KAAK,CAAC;YAC3D,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAyBD,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YAC1E,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,YAAY,IAAI,IAAI,CAAC,6BAA6B,EAAE,CAAC;YAC1F,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,EAAE,CAAC;YACpC,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7E,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACxC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACxC,CAAC;IAED,sBAAsB;QACpB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,EAAE;YAC/C,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC,CAAC;IACL,CAAC;IAED,UAAU;QACR,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAED,8BAA8B;QAC5B,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;QACrD,IAAI,CAAC,oBAAoB,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACvD,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,CAAC;QACnC,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC;QACpC,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACxC,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAA0C;QACxD,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAEtC,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,SAAS,CAAC,cAAY,EAAE,wBAAwB,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,SAAS,CAAC,cAAY,EAAE,4BAA4B,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,aAAa;QACf,IAAI,OAAO,GAAG,eAAe,CAAC;QAE9B,OAAO,IAAI,+BAA+B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAErE,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,iDAAiD,CAAC;QAC/D,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,sBAAsB;QACxB,IAAI,MAAM,GAAG,mCAAmC,CAAC;QAEjD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,IAAI,8CAA8C,CAAC;QAC3D,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAI,4BAA4B;QAC9B,IAAI,MAAM,GAAG,0CAA0C,CAAC;QAExD,IAAI,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,CAAC;YACnC,MAAM,IAAI,2DAA2D,CAAC;QACxE,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAI,YAAY;QACd,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,wBAAwB,CAAC,SAAS,CAAC;QAC5C,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG;YACpE,CAAC,CAAC,wBAAwB,CAAC,SAAS;YACpC,CAAC,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAI,qBAAqB;QACvB,OAAO;YACL,GAAG,EAAE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa;YAC1F,MAAM,EAAE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa;SACjG,CAAC;IACJ,CAAC;IAED,IAAI,kBAAkB;QACpB,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,GAAG,CAAC;IACzE,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,gBAAgB,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,sBAAsB;QACxB,IACE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;eAC/D,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAChE,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,+BAA+B;QACjC,OAAO,IAAI,CAAC,iBAAiB;YAC3B,CAAC,CAAC,SAAS,CAAC,cAAY,EAAE,8BAA8B,CAAC;YACzD,CAAC,CAAC,SAAS,CAAC,cAAY,EAAE,6BAA6B,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,0BAA0B;QAC5B,IAAI,IAAI,CAAC,iBAAiB,KAAK,6BAA6B,CAAC,IAAI,EAAE,CAAC;YAClE,OAAO,6BAA6B,CAAC,OAAO,CAAC;QAC/C,CAAC;QAED,OAAO,IAAI,CAAC,iBAAiB,CAAC;IAChC,CAAC;CACF,CAAA;AAtYG;IADD,QAAQ,EAAE;yDACqF;AAO9F;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACP;AAOnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACI;AAS7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACD;AAQzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT;AASjB;IADD,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;2CACjC;AAejC;IADD,QAAQ,EAAE;kDACqB;AAa9B;IADD,QAAQ,EAAE;uDACyD;AASlE;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACd;AAS/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACd;AAS/B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACG;AAS5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDACvB;AAGjB;IADN,IAAI,CAAC,yBAAyB,CAAC;sCACF;AA5H1B,YAAY;IApBjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;IACF;;;;OAIG;;IACF,KAAK,CAAC,UAAU,CAAC;IAClB;;;;;OAKG;;IACF,KAAK,CAAC,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAE5C,YAAY,CAuZjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n  CAROUSEL_NEXT_ARROW_TEXT,\n  CAROUSEL_PREVIOUS_ARROW_TEXT,\n  CAROUSEL_AUTOPLAY_TOGGLE_START,\n  CAROUSEL_AUTOPLAY_TOGGLE_STOP,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselPageIndicatorType {\n    Default = \"Default\",\n    Numeric = \"Numeric\",\n    None = \"None\"\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\n}\n\ntype UDExCarouselAutoplayToggleEventDetails = {\n  isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n * @param {boolean} isPaused - Indicates current state of autoplay\n */\n@event(\"autoplay-toggle-click\", { bubbles: true })\n\nclass UDExCarousel extends UI5Element {\n  eventDetails!: {\n    \"navigate\": CarouselNavigateEventDetail,\n    \"autoplay-toggle-click\": UDExCarouselAutoplayToggleEventDetails,\n  };\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n  /**\n   * Controls carousel autoplay functionality\n   * @public\n   * @default undefined\n   */\n  @property({ type: Boolean })\n    autoplay?: boolean;\n\n  /**\n   * Defines carousel autoplay speed in milliseconds till next slide\n   * @public\n   */\n  @property({ type: Number })\n    autoplaySpeed: number = 2000;\n\n  /**\n   * Indicates current state of autoplay.\n   *\n   * @default true\n   * @private\n   */\n  @property({ type: Boolean })\n    _autoplayIsPaused = true;\n\n  /**\n   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    cyclic?: boolean;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the number of items per page depending on the carousel width.\n   *\n   * - 'S' for screens smaller than 600 pixels.\n   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n   * - 'XL' for screens greater than or equal to 1440 pixels.\n   *\n   * One item per page is shown by default.\n   * @default \"S1 M1 L1 XL1\"\n   * @public\n   */\n  @property()\n    itemsPerPage = \"S1 M1 L1 XL1\";\n\n  /**\n   * Defines the style of the page indicator.\n   * Available options are:\n   *\n   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n   * @since 1.10\n   * @default \"Default\"\n   * @public\n   */\n  @property()\n    pageIndicatorType: `${UDExCarouselPageIndicatorType}` = \"Default\";\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  /**\n   * Tracks whether the inner carousel has multiple pages (updated after render).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _hasManyPages = false;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _autoplayInterval: ReturnType<typeof setInterval> | null = null;\n  _autoplayLastToggle = Date.now();\n  _autoplayMinTimeBetweenToggle = 250;\n  _autoplayManualStop = false;\n  _resizeHandler: ResizeObserverCallback;\n  _resizeRafHandle: number | null = null;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n\n    if (this._autoplayInterval === null) {\n      this._startAutoplay();\n    }\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n\n    if (this._resizeRafHandle !== null) {\n      cancelAnimationFrame(this._resizeRafHandle);\n      this._resizeRafHandle = null;\n    }\n\n    if (this._autoplayInterval) {\n      clearInterval(this._autoplayInterval);\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n  }\n\n  _onResize(): void {\n    if (this._resizeRafHandle !== null) {\n      cancelAnimationFrame(this._resizeRafHandle);\n    }\n    // Defer until after the inner UI5 carousel has processed its own resize\n    // (outer element's ResizeObserver fires before inner element's, so the inner\n    // carousel's effectiveItemsPerPage and _currentPageIndex are still stale here)\n    this._resizeRafHandle = requestAnimationFrame(() => {\n      this._resizeRafHandle = null;\n      this._hasManyPages = this._carousel?.hasManyPages ?? false;\n      this._calculateDisabledButtonsState();\n    });\n  }\n\n  _autoplayLoop = () => {\n    const items = this._carousel?.items;\n    if (!items) {\n      return;\n    }\n\n    const currentSlide = this._carousel._currentPageIndex;\n    const itemsPerPage = this._carousel.effectiveItemsPerPage;\n    const isLastSlide = currentSlide === (items.length - itemsPerPage);\n\n    if (isLastSlide && !this.cyclic) {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n\n      return;\n    }\n\n    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);\n\n    this._carousel?.navigateTo(nextSlide);\n    this._calculateDisabledButtonsState();\n  };\n\n  _startAutoplay(): void {\n    if (!this.autoplay) {\n      return;\n    }\n\n    if (!this._carousel?.items) {\n      console.warn(\"[UDExCarousel] Cannot start autoplay on an empty carousel\");\n      return;\n    }\n\n    const toggleBuffer = Date.now() - this._autoplayLastToggle;\n    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {\n      this._autoplayLastToggle = Date.now();\n      return;\n    }\n\n    if (this._autoplayInterval !== null) {\n      clearInterval(this._autoplayInterval);\n    }\n\n    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);\n    this._autoplayIsPaused = false;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _stopAutoplay(): void {\n    if (!this._autoplayInterval) {\n      return;\n    }\n\n    clearInterval(this._autoplayInterval);\n    this._autoplayIsPaused = true;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _onAutoplayToggleClick(): void {\n    if (this._autoplayIsPaused) {\n      this._startAutoplay();\n      this._autoplayManualStop = false;\n    } else {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n    }\n\n    this.fireDecoratorEvent(\"autoplay-toggle-click\", {\n      isPaused: this._autoplayIsPaused,\n    });\n  }\n\n  _onFocusIn(): void {\n    this._stopAutoplay();\n  }\n\n  _onFocusOut(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _onMouseEnter(): void {\n    this._stopAutoplay();\n  }\n\n  _onMouseLeave(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._carousel.navigateArrowLeft();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._carousel.navigateArrowRight();\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n    this._calculateDisabledButtonsState();\n\n    this.fireDecoratorEvent(\"navigate\", e.detail);\n  }\n\n  get nextPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    let classes = \"udex-carousel\";\n\n    classes += ` udex-carousel__navigation--${this.navigationPlacement}`;\n\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      classes += \" udex-carousel__navigation--bottom-buttons-only\";\n    }\n\n    return classes;\n  }\n\n  get navigationWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-wrapper\";\n\n    if (this.autoplay) {\n      _class += \" udex-carousel__navigation-wrapper--autoplay\";\n    }\n\n    return _class;\n  }\n\n  get navigationButtonWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-button-wrapper\";\n\n    if (this._carousel?.isPageTypeDots) {\n      _class += \" udex-carousel__navigation-button-wrapper--dot-indicators\";\n    }\n\n    return _class;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return UDExCarouselButtonDesign.Secondary;\n    }\n\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _isBottomDotNavigation(): boolean {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n    return false;\n  }\n\n  get autoplayToggleButtonTooltipText(): string {\n    return this._autoplayIsPaused\n      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)\n      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);\n  }\n\n  get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}` {\n    if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {\n      return UDExCarouselPageIndicatorType.Default;\n    }\n\n    return this.pageIndicatorType;\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n  CAROUSEL_NEXT_ARROW_TEXT,\n  CAROUSEL_PREVIOUS_ARROW_TEXT,\n  CAROUSEL_AUTOPLAY_TOGGLE_START,\n  CAROUSEL_AUTOPLAY_TOGGLE_STOP,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { CarouselNavigateEventDetail } from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport translate from \"./utils/translate.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselPageIndicatorType {\n    Default = \"Default\",\n    Numeric = \"Numeric\",\n    None = \"None\"\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\n}\n\ntype UDExCarouselAutoplayToggleEventDetails = {\n  isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n/**\n * Triggered when carousel navigates to a new slide\n * @public\n * @param { CustomEvent }\n */\n@event(\"navigate\")\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n * @param {boolean} isPaused - Indicates current state of autoplay\n */\n@event(\"autoplay-toggle-click\", { bubbles: true })\n\nclass UDExCarousel extends UI5Element {\n  eventDetails!: {\n    \"navigate\": CarouselNavigateEventDetail,\n    \"autoplay-toggle-click\": UDExCarouselAutoplayToggleEventDetails,\n  };\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n  /**\n   * Controls carousel autoplay functionality\n   * @public\n   * @default undefined\n   */\n  @property({ type: Boolean })\n    autoplay?: boolean;\n\n  /**\n   * Defines carousel autoplay speed in milliseconds till next slide\n   * @public\n   */\n  @property({ type: Number })\n    autoplaySpeed: number = 2000;\n\n  /**\n   * Indicates current state of autoplay.\n   *\n   * @default true\n   * @private\n   */\n  @property({ type: Boolean })\n    _autoplayIsPaused = true;\n\n  /**\n   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    cyclic?: boolean;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the number of items per page depending on the carousel width.\n   *\n   * - 'S' for screens smaller than 600 pixels.\n   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n   * - 'XL' for screens greater than or equal to 1440 pixels.\n   *\n   * One item per page is shown by default.\n   * @default \"S1 M1 L1 XL1\"\n   * @public\n   */\n  @property()\n    itemsPerPage = \"S1 M1 L1 XL1\";\n\n  /**\n   * Defines the style of the page indicator.\n   * Available options are:\n   *\n   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n   * @since 1.10\n   * @default \"Default\"\n   * @public\n   */\n  @property()\n    pageIndicatorType: `${UDExCarouselPageIndicatorType}` = \"Default\";\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  /**\n   * Tracks whether the inner carousel has multiple pages (updated after render).\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _hasManyPages = false;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _autoplayInterval: ReturnType<typeof setInterval> | null = null;\n  _autoplayLastToggle = Date.now();\n  _autoplayMinTimeBetweenToggle = 250;\n  _autoplayManualStop = false;\n  _resizeHandler: ResizeObserverCallback;\n  _resizeRafHandle: number | null = null;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n\n    if (this._autoplayInterval === null) {\n      this._startAutoplay();\n    }\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._resizeHandler);\n\n    if (this._resizeRafHandle !== null) {\n      cancelAnimationFrame(this._resizeRafHandle);\n      this._resizeRafHandle = null;\n    }\n\n    if (this._autoplayInterval) {\n      clearInterval(this._autoplayInterval);\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._resizeHandler);\n  }\n\n  _onResize(): void {\n    if (this._resizeRafHandle !== null) {\n      cancelAnimationFrame(this._resizeRafHandle);\n    }\n    // Defer until after the inner UI5 carousel has processed its own resize\n    // (outer element's ResizeObserver fires before inner element's, so the inner\n    // carousel's effectiveItemsPerPage and _currentPageIndex are still stale here)\n    this._resizeRafHandle = requestAnimationFrame(() => {\n      this._resizeRafHandle = null;\n      this._hasManyPages = this._carousel?.hasManyPages ?? false;\n      this._calculateDisabledButtonsState();\n    });\n  }\n\n  _autoplayLoop = () => {\n    const items = this._carousel?.items;\n    if (!items) {\n      return;\n    }\n\n    const currentSlide = this._carousel._currentPageIndex;\n    const itemsPerPage = this._carousel.effectiveItemsPerPage;\n    const isLastSlide = currentSlide === (items.length - itemsPerPage);\n\n    if (isLastSlide && !this.cyclic) {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n\n      return;\n    }\n\n    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);\n\n    this._carousel?.navigateTo(nextSlide);\n    this._calculateDisabledButtonsState();\n  };\n\n  _startAutoplay(): void {\n    if (!this.autoplay) {\n      return;\n    }\n\n    if (!this._carousel?.items) {\n      console.warn(\"[UDExCarousel] Cannot start autoplay on an empty carousel\");\n      return;\n    }\n\n    const toggleBuffer = Date.now() - this._autoplayLastToggle;\n    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {\n      this._autoplayLastToggle = Date.now();\n      return;\n    }\n\n    if (this._autoplayInterval !== null) {\n      clearInterval(this._autoplayInterval);\n    }\n\n    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);\n    this._autoplayIsPaused = false;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _stopAutoplay(): void {\n    if (!this._autoplayInterval) {\n      return;\n    }\n\n    clearInterval(this._autoplayInterval);\n    this._autoplayIsPaused = true;\n    this._autoplayLastToggle = Date.now();\n  }\n\n  _onAutoplayToggleClick(): void {\n    if (this._autoplayIsPaused) {\n      this._startAutoplay();\n      this._autoplayManualStop = false;\n    } else {\n      this._stopAutoplay();\n      this._autoplayManualStop = true;\n    }\n\n    this.fireDecoratorEvent(\"autoplay-toggle-click\", {\n      isPaused: this._autoplayIsPaused,\n    });\n  }\n\n  _onFocusIn(): void {\n    this._stopAutoplay();\n  }\n\n  _onFocusOut(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _onMouseEnter(): void {\n    this._stopAutoplay();\n  }\n\n  _onMouseLeave(): void {\n    if (!this._autoplayManualStop) {\n      this._startAutoplay();\n    }\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._navigateToPage(-1);\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled || !this._carousel) {\n      return;\n    }\n\n    this._navigateToPage(1);\n  }\n\n  _navigateToPage(direction: 1 | -1) {\n    const carousel = this._carousel;\n    if (!carousel) {\n      return;\n    }\n\n    let newPageIndex = carousel._currentPageIndex + direction;\n\n    if (this.cyclic) {\n      const lastPageIndex = carousel.items.length - carousel.effectiveItemsPerPage;\n      if (newPageIndex > lastPageIndex) {\n        newPageIndex = 0;\n      } else if (newPageIndex < 0) {\n        newPageIndex = carousel.items.length - 1;\n      }\n    }\n\n    carousel._changePageIndex(newPageIndex);\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  _handleNavigate(e: UI5CustomEvent<UI5Carousel, \"navigate\">): void {\n    this._calculateDisabledButtonsState();\n\n    this.fireDecoratorEvent(\"navigate\", e.detail);\n  }\n\n  get nextPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    let classes = \"udex-carousel\";\n\n    classes += ` udex-carousel__navigation--${this.navigationPlacement}`;\n\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      classes += \" udex-carousel__navigation--bottom-buttons-only\";\n    }\n\n    return classes;\n  }\n\n  get navigationWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-wrapper\";\n\n    if (this.autoplay) {\n      _class += \" udex-carousel__navigation-wrapper--autoplay\";\n    }\n\n    return _class;\n  }\n\n  get navigationButtonWrapperClass(): string {\n    let _class = \"udex-carousel__navigation-button-wrapper\";\n\n    if (this._carousel?.isPageTypeDots) {\n      _class += \" udex-carousel__navigation-button-wrapper--dot-indicators\";\n    }\n\n    return _class;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return UDExCarouselButtonDesign.Secondary;\n    }\n\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType === UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _isBottomDotNavigation(): boolean {\n    if (\n      this.navigationPlacement === UDExCarouselNavigationPosition.bottom\n      && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None\n    ) {\n      return true;\n    }\n    return false;\n  }\n\n  get autoplayToggleButtonTooltipText(): string {\n    return this._autoplayIsPaused\n      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)\n      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);\n  }\n\n  get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}` {\n    if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {\n      return UDExCarouselPageIndicatorType.Default;\n    }\n\n    return this.pageIndicatorType;\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\nexport type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };\n"]}

package/dist/CountrySelector.js

@@ -93,9 +93,7 @@ let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
         this.dropdownBeforeOpen();
     }
     handleDropdownClose() {
-        this._setActiveDescendant(null);
-        this._open = false;
-        this.fireEventDropdownClose();
+        this._finishDropdownClose();
     }
     handleOutsideClick() {
         document.addEventListener("click", (e) => {