@sapudex/web-components 2.19.0 → 2.20.1

package/cypress/specs/AccordionItem.cy.tsx

@@ -1,7 +1,7 @@
 import { UDExAccordionItemTitleSize } from "../../instrumented/AccordionItem.js";
 import { UDExAccordionItem } from "../support/component-imports.js";
 
-const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72">
+const accordionItem = <UDExAccordionItem label="Some label for item 1" numberBadge="72" number-badge-design="Red">
     <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
 </UDExAccordionItem>
 
@@ -68,6 +68,10 @@ describe('AccordionItem', () => {
   it("has a badge", () => {
     cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("exist").and("be.visible")
   });
+
+  it("has a badge with number badge design", () => {
+    cy.get("[udex-accordion-item]").shadow().find(".udex-accordion-item__badge").should("have.attr", "number-design", "Red")
+  });
   
   it("click on accordion adjust content height for animations", () => {
     cy.mount(accordionItemWithAccordion)
@@ -83,4 +87,4 @@ describe('AccordionItem', () => {
     cy.get("[udex-accordion-item]").click().realPress("Tab")
     cy.get("@itemFocus").should("have.been.called")
   });
-});
+});

package/cypress/specs/Footer.cy.tsx

@@ -83,7 +83,8 @@ describe("Footer", () => {
   });
 
   it("renders copyright", () => {
-    cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", "© 2025 SAP SE or an SAP affiliate company. All rights reserved.")
+    const currentYear = new Date().getFullYear();
+    cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", `© ${currentYear} SAP SE or an SAP affiliate company. All rights reserved.`);
   });
 
   it("sets data-id attribute to social links", () => {

package/dist/Accordion.d.ts

@@ -84,6 +84,7 @@ declare class UDExAccordion extends UI5Element {
     toggleOpenItems(isOpen: boolean): void;
     toggleKeyAllHandler(e: KeyboardEvent): void;
     keydownHandler(e: KeyboardEvent): void;
+    handleTabKey(e: KeyboardEvent): void;
     itemFocusHandler(e: CustomEvent): void;
     updateAllExpandedStatus(): void;
     get toggleAllText(): string;

package/dist/Accordion.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import { isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./AccordionTemplate.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 // Styles
@@ -79,6 +79,12 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
         }
     }
     keydownHandler(e) {
+        if (isDown(e) || isUp(e)) {
+            return;
+        }
+        this.handleTabKey(e);
+    }
+    handleTabKey(e) {
         const activeItem = this._items[this._activeItemIndex];
         const previousItem = this._items[this._activeItemIndex - 1];
         const isLastItem = this._activeItemIndex === this._items.length - 1;

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: 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-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: 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-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isDown(e) || isUp(e)) {\n      return;\n    }\n\n    this.handleTabKey(e);\n  }\n\n  handleTabKey(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}

package/dist/AccordionItem.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExNumberBadgeDesign } from "./types/BadgeDesign.js";
 export declare enum UDExAccordionItemTitleSize {
     Standard = "Standard",
     Large = "Large"
@@ -38,6 +39,13 @@ declare class UDExAccordionItem extends UI5Element {
      * @public
      */
     numberBadge: string;
+    /**
+     * Defines the design of the number badge.
+     *
+     * @default "Blue"
+     * @public
+     */
+    numberBadgeDesign: `${UDExNumberBadgeDesign}`;
     /**
      * Defines the label of the accordion item component.
      *

package/dist/AccordionItem.js

@@ -14,6 +14,7 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import AccordionItemTemplate from "./AccordionItemTemplate.js";
+import { UDExNumberBadgeDesign } from "./types/BadgeDesign.js";
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
 export var UDExAccordionItemTitleSize;
@@ -43,6 +44,13 @@ export var UDExAccordionItemTitleSize;
 let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
     constructor() {
         super();
+        /**
+         * Defines the design of the number badge.
+         *
+         * @default "Blue"
+         * @public
+         */
+        this.numberBadgeDesign = UDExNumberBadgeDesign.Blue;
         /**
          * Defines the size of label.
          *
@@ -123,6 +131,9 @@ let UDExAccordionItem = class UDExAccordionItem extends UI5Element {
 __decorate([
     property()
 ], UDExAccordionItem.prototype, "numberBadge", void 0);
+__decorate([
+    property()
+], UDExAccordionItem.prototype, "numberBadgeDesign", void 0);
 __decorate([
     property()
 ], UDExAccordionItem.prototype, "label", void 0);

package/dist/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n  Standard = \"Standard\",\n  Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n  name: string | undefined;\n  expanded: 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-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the size of label.\n   *\n   * @default UDExAccordionItemTitleSize.Standard\n   * @public\n   */\n  @property()\n    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n  /**\n   * Defines icon name to be display with title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    labelIcon!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n    this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n    this.setContentHeight();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.contentElement) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n  }\n\n  _onResize(): void {\n    this.setContentHeight();\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.setContentHeight();\n    this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\nimport { UDExNumberBadgeDesign } from \"./types/BadgeDesign.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n  Standard = \"Standard\",\n  Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n  name: string | undefined;\n  expanded: 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-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the design of the number badge.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberBadgeDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the size of label.\n   *\n   * @default UDExAccordionItemTitleSize.Standard\n   * @public\n   */\n  @property()\n    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n  /**\n   * Defines icon name to be display with title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    labelIcon!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n    this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n    this.setContentHeight();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.contentElement) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n  }\n\n  _onResize(): void {\n    this.setContentHeight();\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.setContentHeight();\n    this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}

package/dist/AccordionItemTemplate.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcompo
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
+import { UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
 import UDExBadge from "./Badge.js";
 import UDExDivider from "./Divider.js";
 export default function AccordionItemTemplate() {
@@ -14,6 +14,6 @@ export default function AccordionItemTemplate() {
     return (_jsxs(_Fragment, { children: [_jsxs("button", { id: ariaLabelledbyId, "aria-controls": ariaControlsId, className: `${headlineClass}`, onFocusIn: this.focusHandler, onClick: this.itemClickHandler, onKeyDown: this.keydownHandler, "aria-expanded": this.expanded, type: "button", children: [this.labelIcon ?
                         _jsx("div", { className: `${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`, children: _jsx(UI5Icon, { class: `${rootClass}__icon ${rootClass}__label-icon`, mode: IconMode.Decorative, name: this.labelIcon }) })
                         : "", _jsxs("span", { className: `${rootClass}__title`, children: [this.label, this.numberBadge &&
-                                _jsx(UDExBadge, { class: `${rootClass}__badge`, "number-design": UDExNumberBadgeDesign.Blue, type: UDExTypeBadgeDesign.Number, size: UDExSizeBadgeDesign.Medium, children: this.numberBadge })] }), _jsx("div", { className: `${rootClass}__icon-wrapper`, children: _jsx(UI5Icon, { class: `${rootClass}__icon`, mode: IconMode.Decorative, name: slimArrowRight }) })] }), _jsx("div", { id: ariaControlsId, "aria-hidden": !this.expanded, "aria-labelledby": ariaLabelledbyId, className: `${rootClass}__content ${titleClass}`, onKeyDown: this.contentKeydown, role: "region", children: _jsx("div", { className: `${rootClass}__content-inner`, children: _jsx("slot", {}) }) }), _jsx(UDExDivider, {})] }));
+                                _jsx(UDExBadge, { class: `${rootClass}__badge`, "number-design": this.numberBadgeDesign, type: UDExTypeBadgeDesign.Number, size: UDExSizeBadgeDesign.Medium, children: this.numberBadge })] }), _jsx("div", { className: `${rootClass}__icon-wrapper`, children: _jsx(UI5Icon, { class: `${rootClass}__icon`, mode: IconMode.Decorative, name: slimArrowRight }) })] }), _jsx("div", { id: ariaControlsId, "aria-hidden": !this.expanded, "aria-labelledby": ariaLabelledbyId, className: `${rootClass}__content ${titleClass}`, onKeyDown: this.contentKeydown, role: "region", children: _jsx("div", { className: `${rootClass}__content-inner`, children: _jsx("slot", {}) }) }), _jsx(UDExDivider, {})] }));
 }
 //# sourceMappingURL=AccordionItemTemplate.js.map

package/dist/AccordionItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItemTemplate.js","sourceRoot":"","sources":["../src/AccordionItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACzG,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,MAAM,cAAc,GAAG,wBAAwB,IAAI,CAAC,GAAG,UAAU,CAAC;IAClE,MAAM,gBAAgB,GAAG,wBAAwB,IAAI,CAAC,GAAG,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,aAAa,GAAG,GAAG,SAAS,YAAY,SAAS,aAAa,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAEnG,OAAO,CACL,8BACE,kBACE,EAAE,EAAE,gBAAgB,mBACL,cAAc,EAC7B,SAAS,EAAE,GAAG,aAAa,EAAE,EAC7B,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,mBACf,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,aACZ,IAAI,CAAC,SAAS,CAAC,CAAC;wBACf,cAAK,SAAS,EAAE,GAAG,SAAS,kBAAkB,SAAS,sBAAsB,YAC3E,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,UAAU,SAAS,cAAc,EACpD,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,SAAS,GACZ,GACN;wBACN,CAAC,CAAC,EAAE,EACN,gBAAM,SAAS,EAAE,GAAG,SAAS,SAAS,aACnC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,WAAW;gCACf,KAAC,SAAS,IACR,KAAK,EAAE,GAAG,SAAS,SAAS,mBACb,qBAAqB,CAAC,IAAI,EACzC,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAChC,IAAI,EAAE,mBAAmB,CAAC,MAAM,YAC/B,IAAI,CAAC,WAAW,GACP,IAET,EACP,cAAK,SAAS,EAAE,GAAG,SAAS,gBAAgB,YAC1C,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,cAAc,GACZ,GACN,IACC,EACT,cACE,EAAE,EAAE,cAAc,iBACL,CAAC,IAAI,CAAC,QAAQ,qBACV,gBAAgB,EACjC,SAAS,EAAE,GAAG,SAAS,aAAa,UAAU,EAAE,EAChD,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,IAAI,EAAC,QAAQ,YACb,cAAK,SAAS,EAAE,GAAG,SAAS,iBAAiB,YAC3C,gBAAa,GACT,GACF,EACN,KAAC,WAAW,KAAe,IAC1B,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type AccordionItem from \"./AccordionItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from \"./types/BadgeDesign.js\";\nimport UDExBadge from \"./Badge.js\";\nimport UDExDivider from \"./Divider.js\";\n\nexport default function AccordionItemTemplate(this: AccordionItem) {\n  const ariaControlsId = `udex-accordion-item__${this._id}-content`;\n  const ariaLabelledbyId = `udex-accordion-item__${this._id}`;\n  const rootClass = \"udex-accordion-item\";\n  const titleClass = this.labelIcon ? `${rootClass}--with-title` : \"\";\n  const headlineClass = `${rootClass}__header ${rootClass}__header--${this.labelSize.toLowerCase()}`;\n\n  return (\n    <>\n      <button\n        id={ariaLabelledbyId}\n        aria-controls={ariaControlsId}\n        className={`${headlineClass}`}\n        onFocusIn={this.focusHandler}\n        onClick={this.itemClickHandler}\n        onKeyDown={this.keydownHandler}\n        aria-expanded={this.expanded}\n        type=\"button\">\n        {this.labelIcon ?\n          <div className={`${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`}>\n            <UI5Icon\n              class={`${rootClass}__icon ${rootClass}__label-icon`}\n              mode={IconMode.Decorative}\n              name={this.labelIcon}>\n            </UI5Icon>\n          </div>\n          : \"\"}\n        <span className={`${rootClass}__title`}>\n          {this.label}\n          {this.numberBadge &&\n            <UDExBadge\n              class={`${rootClass}__badge`}\n              number-design={UDExNumberBadgeDesign.Blue}\n              type={UDExTypeBadgeDesign.Number}\n              size={UDExSizeBadgeDesign.Medium}>\n              {this.numberBadge}\n            </UDExBadge>\n          }\n        </span>\n        <div className={`${rootClass}__icon-wrapper`}>\n          <UI5Icon\n            class={`${rootClass}__icon`}\n            mode={IconMode.Decorative}\n            name={slimArrowRight}>\n          </UI5Icon>\n        </div>\n      </button>\n      <div\n        id={ariaControlsId}\n        aria-hidden={!this.expanded}\n        aria-labelledby={ariaLabelledbyId}\n        className={`${rootClass}__content ${titleClass}`}\n        onKeyDown={this.contentKeydown}\n        role=\"region\">\n        <div className={`${rootClass}__content-inner`}>\n          <slot></slot>\n        </div>\n      </div>\n      <UDExDivider></UDExDivider>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"AccordionItemTemplate.js","sourceRoot":"","sources":["../src/AccordionItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,MAAM,cAAc,GAAG,wBAAwB,IAAI,CAAC,GAAG,UAAU,CAAC;IAClE,MAAM,gBAAgB,GAAG,wBAAwB,IAAI,CAAC,GAAG,EAAE,CAAC;IAC5D,MAAM,SAAS,GAAG,qBAAqB,CAAC;IACxC,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,MAAM,aAAa,GAAG,GAAG,SAAS,YAAY,SAAS,aAAa,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAEnG,OAAO,CACL,8BACE,kBACE,EAAE,EAAE,gBAAgB,mBACL,cAAc,EAC7B,SAAS,EAAE,GAAG,aAAa,EAAE,EAC7B,SAAS,EAAE,IAAI,CAAC,YAAY,EAC5B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,mBACf,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,aACZ,IAAI,CAAC,SAAS,CAAC,CAAC;wBACf,cAAK,SAAS,EAAE,GAAG,SAAS,kBAAkB,SAAS,sBAAsB,YAC3E,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,UAAU,SAAS,cAAc,EACpD,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,SAAS,GACZ,GACN;wBACN,CAAC,CAAC,EAAE,EACN,gBAAM,SAAS,EAAE,GAAG,SAAS,SAAS,aACnC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,WAAW;gCACf,KAAC,SAAS,IACR,KAAK,EAAE,GAAG,SAAS,SAAS,mBACb,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAChC,IAAI,EAAE,mBAAmB,CAAC,MAAM,YAC/B,IAAI,CAAC,WAAW,GACP,IAET,EACP,cAAK,SAAS,EAAE,GAAG,SAAS,gBAAgB,YAC1C,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,QAAQ,CAAC,UAAU,EACzB,IAAI,EAAE,cAAc,GACZ,GACN,IACC,EACT,cACE,EAAE,EAAE,cAAc,iBACL,CAAC,IAAI,CAAC,QAAQ,qBACV,gBAAgB,EACjC,SAAS,EAAE,GAAG,SAAS,aAAa,UAAU,EAAE,EAChD,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,IAAI,EAAC,QAAQ,YACb,cAAK,SAAS,EAAE,GAAG,SAAS,iBAAiB,YAC3C,gBAAa,GACT,GACF,EACN,KAAC,WAAW,KAAe,IAC1B,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type AccordionItem from \"./AccordionItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport { UDExSizeBadgeDesign, UDExTypeBadgeDesign } from \"./types/BadgeDesign.js\";\nimport UDExBadge from \"./Badge.js\";\nimport UDExDivider from \"./Divider.js\";\n\nexport default function AccordionItemTemplate(this: AccordionItem) {\n  const ariaControlsId = `udex-accordion-item__${this._id}-content`;\n  const ariaLabelledbyId = `udex-accordion-item__${this._id}`;\n  const rootClass = \"udex-accordion-item\";\n  const titleClass = this.labelIcon ? `${rootClass}--with-title` : \"\";\n  const headlineClass = `${rootClass}__header ${rootClass}__header--${this.labelSize.toLowerCase()}`;\n\n  return (\n    <>\n      <button\n        id={ariaLabelledbyId}\n        aria-controls={ariaControlsId}\n        className={`${headlineClass}`}\n        onFocusIn={this.focusHandler}\n        onClick={this.itemClickHandler}\n        onKeyDown={this.keydownHandler}\n        aria-expanded={this.expanded}\n        type=\"button\">\n        {this.labelIcon ?\n          <div className={`${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`}>\n            <UI5Icon\n              class={`${rootClass}__icon ${rootClass}__label-icon`}\n              mode={IconMode.Decorative}\n              name={this.labelIcon}>\n            </UI5Icon>\n          </div>\n          : \"\"}\n        <span className={`${rootClass}__title`}>\n          {this.label}\n          {this.numberBadge &&\n            <UDExBadge\n              class={`${rootClass}__badge`}\n              number-design={this.numberBadgeDesign}\n              type={UDExTypeBadgeDesign.Number}\n              size={UDExSizeBadgeDesign.Medium}>\n              {this.numberBadge}\n            </UDExBadge>\n          }\n        </span>\n        <div className={`${rootClass}__icon-wrapper`}>\n          <UI5Icon\n            class={`${rootClass}__icon`}\n            mode={IconMode.Decorative}\n            name={slimArrowRight}>\n          </UI5Icon>\n        </div>\n      </button>\n      <div\n        id={ariaControlsId}\n        aria-hidden={!this.expanded}\n        aria-labelledby={ariaLabelledbyId}\n        className={`${rootClass}__content ${titleClass}`}\n        onKeyDown={this.contentKeydown}\n        role=\"region\">\n        <div className={`${rootClass}__content-inner`}>\n          <slot></slot>\n        </div>\n      </div>\n      <UDExDivider></UDExDivider>\n    </>\n  );\n}\n"]}

package/dist/AccordionTemplate.js

@@ -5,9 +5,9 @@ import UDExButtonDesign from "./types/ButtonDesign.js";
 import { UDExAccordionHeadlineLevel } from "./Accordion.js";
 export default function AccordionTemplate() {
     const rootClass = "udex-accordion";
-    return (_jsxs("div", { className: rootClass, onKeyDown: this.keydownHandler, "onui5-accordion-item-click": this.updateAllExpandedStatus, "onui5-accordion-item-focus": this.itemFocusHandler, children: [_jsxs("div", { className: `${rootClass}__head`, part: "head", children: [this.headline &&
+    return (_jsxs("div", { className: rootClass, "onui5-accordion-item-click": this.updateAllExpandedStatus, "onui5-accordion-item-focus": this.itemFocusHandler, children: [_jsxs("div", { className: `${rootClass}__head`, part: "head", children: [this.headline &&
                         headline.call(this, rootClass), !this.hideExpandButton &&
-                        _jsx(UDExButton, { class: `${rootClass}__btn`, size: UDExButtonSize.Large, design: UDExButtonDesign.Tertiary, onClick: this.toggleAllHandler, onKeyDown: this.toggleKeyAllHandler, accessibleName: this.toggleAllText, children: this.toggleAllText })] }), _jsx("div", { className: `${rootClass}__content`, children: this.items.map(itemInfo => _jsx("slot", { name: itemInfo.item._individualSlot })) })] }));
+                        _jsx(UDExButton, { class: `${rootClass}__btn`, size: UDExButtonSize.Large, design: UDExButtonDesign.Tertiary, onClick: this.toggleAllHandler, onKeyDown: this.toggleKeyAllHandler, accessibleName: this.toggleAllText, children: this.toggleAllText })] }), _jsx("div", { className: `${rootClass}__content`, onKeyDown: this.keydownHandler, children: this.items.map(itemInfo => _jsx("slot", { name: itemInfo.item._individualSlot })) })] }));
 }
 function headline(rootClass) {
     const { headline: title, headlineLevel } = this;

package/dist/AccordionTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTemplate.js","sourceRoot":"","sources":["../src/AccordionTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,cAAc,gCACF,IAAI,CAAC,uBAAuB,gCAC5B,IAAI,CAAC,gBAAgB,aACjD,eAAK,SAAS,EAAE,GAAG,SAAS,QAAQ,EAAE,IAAI,EAAC,MAAM,aAC9C,IAAI,CAAC,QAAQ;wBACZ,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,EAE/B,CAAC,IAAI,CAAC,gBAAgB;wBACrB,KAAC,UAAU,IAAC,KAAK,EAAE,GAAG,SAAS,OAAO,EACpC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,cAAc,EAAE,IAAI,CAAC,aAAa,YACjC,IAAI,CAAC,aAAa,GACR,IAEX,EACN,cAAK,SAAS,EAAE,GAAG,SAAS,WAAW,YACpC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CACzB,eAAM,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAS,CACnD,GACG,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAkB,SAAiB;IAClD,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAChD,QAAQ,aAAa,EAAE,CAAC;QACxB,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D;YACE,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;IAC/D,CAAC;AACH,CAAC","sourcesContent":["import type Accordion from \"./Accordion.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExAccordionHeadlineLevel } from \"./Accordion.js\";\n\nexport default function AccordionTemplate(this: Accordion) {\n  const rootClass = \"udex-accordion\";\n\n  return (\n    <div\n      className={rootClass}\n      onKeyDown={this.keydownHandler}\n      onui5-accordion-item-click={this.updateAllExpandedStatus}\n      onui5-accordion-item-focus={this.itemFocusHandler}>\n      <div className={`${rootClass}__head`} part=\"head\">\n        {this.headline &&\n          headline.call(this, rootClass)\n        }\n        {!this.hideExpandButton &&\n          <UDExButton class={`${rootClass}__btn`}\n            size={UDExButtonSize.Large}\n            design={UDExButtonDesign.Tertiary}\n            onClick={this.toggleAllHandler}\n            onKeyDown={this.toggleKeyAllHandler}\n            accessibleName={this.toggleAllText}>\n            {this.toggleAllText}\n          </UDExButton>\n        }\n      </div>\n      <div className={`${rootClass}__content`}>\n        {this.items.map(itemInfo =>\n          <slot name={itemInfo.item._individualSlot}></slot>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction headline(this: Accordion, rootClass: string) {\n  const { headline: title, headlineLevel } = this;\n  switch (headlineLevel) {\n  case UDExAccordionHeadlineLevel.H1:\n    return <h1 className={`${rootClass}__headline`}>{title}</h1>;\n  case UDExAccordionHeadlineLevel.H2:\n    return <h2 className={`${rootClass}__headline`}>{title}</h2>;\n  case UDExAccordionHeadlineLevel.H3:\n    return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n  case UDExAccordionHeadlineLevel.H4:\n    return <h4 className={`${rootClass}__headline`}>{title}</h4>;\n  case UDExAccordionHeadlineLevel.H5:\n    return <h5 className={`${rootClass}__headline`}>{title}</h5>;\n  case UDExAccordionHeadlineLevel.H6:\n    return <h6 className={`${rootClass}__headline`}>{title}</h6>;\n  default:\n    return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n  }\n}\n"]}
+{"version":3,"file":"AccordionTemplate.js","sourceRoot":"","sources":["../src/AccordionTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,gBAAgB,CAAC;IAEnC,OAAO,CACL,eACE,SAAS,EAAE,SAAS,gCACQ,IAAI,CAAC,uBAAuB,gCAC5B,IAAI,CAAC,gBAAgB,aACjD,eAAK,SAAS,EAAE,GAAG,SAAS,QAAQ,EAAE,IAAI,EAAC,MAAM,aAC9C,IAAI,CAAC,QAAQ;wBACZ,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,EAE/B,CAAC,IAAI,CAAC,gBAAgB;wBACrB,KAAC,UAAU,IAAC,KAAK,EAAE,GAAG,SAAS,OAAO,EACpC,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,cAAc,EAAE,IAAI,CAAC,aAAa,YACjC,IAAI,CAAC,aAAa,GACR,IAEX,EACN,cACE,SAAS,EAAE,GAAG,SAAS,WAAW,EAClC,SAAS,EAAE,IAAI,CAAC,cAAc,YAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CACzB,eAAM,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,eAAe,GAAS,CACnD,GACG,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAkB,SAAiB;IAClD,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAChD,QAAQ,aAAa,EAAE,CAAC;QACxB,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D,KAAK,0BAA0B,CAAC,EAAE;YAChC,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;QAC/D;YACE,OAAO,aAAI,SAAS,EAAE,GAAG,SAAS,YAAY,YAAG,KAAK,GAAM,CAAC;IAC/D,CAAC;AACH,CAAC","sourcesContent":["import type Accordion from \"./Accordion.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExAccordionHeadlineLevel } from \"./Accordion.js\";\n\nexport default function AccordionTemplate(this: Accordion) {\n  const rootClass = \"udex-accordion\";\n\n  return (\n    <div\n      className={rootClass}\n      onui5-accordion-item-click={this.updateAllExpandedStatus}\n      onui5-accordion-item-focus={this.itemFocusHandler}>\n      <div className={`${rootClass}__head`} part=\"head\">\n        {this.headline &&\n          headline.call(this, rootClass)\n        }\n        {!this.hideExpandButton &&\n          <UDExButton class={`${rootClass}__btn`}\n            size={UDExButtonSize.Large}\n            design={UDExButtonDesign.Tertiary}\n            onClick={this.toggleAllHandler}\n            onKeyDown={this.toggleKeyAllHandler}\n            accessibleName={this.toggleAllText}>\n            {this.toggleAllText}\n          </UDExButton>\n        }\n      </div>\n      <div\n        className={`${rootClass}__content`}\n        onKeyDown={this.keydownHandler}>\n        {this.items.map(itemInfo =>\n          <slot name={itemInfo.item._individualSlot}></slot>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction headline(this: Accordion, rootClass: string) {\n  const { headline: title, headlineLevel } = this;\n  switch (headlineLevel) {\n  case UDExAccordionHeadlineLevel.H1:\n    return <h1 className={`${rootClass}__headline`}>{title}</h1>;\n  case UDExAccordionHeadlineLevel.H2:\n    return <h2 className={`${rootClass}__headline`}>{title}</h2>;\n  case UDExAccordionHeadlineLevel.H3:\n    return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n  case UDExAccordionHeadlineLevel.H4:\n    return <h4 className={`${rootClass}__headline`}>{title}</h4>;\n  case UDExAccordionHeadlineLevel.H5:\n    return <h5 className={`${rootClass}__headline`}>{title}</h5>;\n  case UDExAccordionHeadlineLevel.H6:\n    return <h6 className={`${rootClass}__headline`}>{title}</h6>;\n  default:\n    return <h3 className={`${rootClass}__headline`}>{title}</h3>;\n  }\n}\n"]}

package/dist/Carousel.d.ts

@@ -1,6 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
+import type UDExButton from "./Button.js";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
@@ -47,6 +50,30 @@ declare class UDExCarousel extends UI5Element {
      * @public
      */
     items: Array<HTMLElement>;
+    /**
+     * Defines the number of items per page depending on the carousel width.
+     *
+     * - 'S' for screens smaller than 600 pixels.
+     * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+     * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+     * - 'XL' for screens greater than or equal to 1440 pixels.
+     *
+     * One item per page is shown by default.
+     * @default "S1 M1 L1 XL1"
+     * @public
+     */
+    itemsPerPage: string;
+    /**
+     * Defines the style of the page indicator.
+     * Available options are:
+     *
+     * - `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)
+     * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+     * @since 1.10
+     * @default "Default"
+     * @public
+     */
+    pageIndicatorType: `${CarouselPageIndicatorType}`;
     /**
      * Defines the prev button is disabled
      *
@@ -81,8 +108,8 @@ declare class UDExCarousel extends UI5Element {
     get _carousel(): UI5Carousel | null;
     get _ui5CarouselRoot(): HTMLElement | null | undefined;
     _calculateDisabledButtonsState(): void;
-    _prevButtonClick(): void;
-    _nextButtonClick(): void;
+    _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
+    _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
     _onkeydown(e: KeyboardEvent): void;
     onAfterRendering(): void;
 }

package/dist/Carousel.js

@@ -60,6 +60,30 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
          * @public
          */
         this.navigationPlacement = UDExCarouselNavigationPosition.top;
+        /**
+         * Defines the number of items per page depending on the carousel width.
+         *
+         * - 'S' for screens smaller than 600 pixels.
+         * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+         * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+         * - 'XL' for screens greater than or equal to 1440 pixels.
+         *
+         * One item per page is shown by default.
+         * @default "S1 M1 L1 XL1"
+         * @public
+         */
+        this.itemsPerPage = "S1 M1 L1 XL1";
+        /**
+         * Defines the style of the page indicator.
+         * Available options are:
+         *
+         * - `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)
+         * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+         * @since 1.10
+         * @default "Default"
+         * @public
+         */
+        this.pageIndicatorType = "Default";
         /**
          * Defines the accessible ARIA name of the component.
          *
@@ -102,20 +126,18 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         this.isPrevButtonDisabled = !this._carousel?.hasPrev;
         this.isNextButtonDisabled = !this._carousel?.hasNext;
     }
-    _prevButtonClick() {
+    _prevButtonClick(e) {
         if (this.isPrevButtonDisabled) {
             return;
         }
-        this._carousel?.navigateLeft();
-        this._ui5CarouselRoot?.focus();
+        this._carousel?._navButtonClick(e);
         this._calculateDisabledButtonsState();
     }
-    _nextButtonClick() {
+    _nextButtonClick(e) {
         if (this.isNextButtonDisabled) {
             return;
         }
-        this._carousel?.navigateRight();
-        this._ui5CarouselRoot?.focus();
+        this._carousel?._navButtonClick(e);
         this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {
@@ -134,6 +156,12 @@ __decorate([
 __decorate([
     slot({ "default": true, type: HTMLElement, individualSlots: true })
 ], UDExCarousel.prototype, "items", void 0);
+__decorate([
+    property()
+], UDExCarousel.prototype, "itemsPerPage", void 0);
+__decorate([
+    property()
+], UDExCarousel.prototype, "pageIndicatorType", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExCarousel.prototype, "isPrevButtonDisabled", void 0);

package/dist/Carousel.js.map

@@ -1 +1 @@
-{"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 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.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 {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.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 UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\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\nclass UDExCarousel extends UI5Element {\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  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<HTMLElement>;\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  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\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,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\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 _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateLeft();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateRight();\n    this._ui5CarouselRoot?.focus();\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  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAC9B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAC3G,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAK/D,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAI7D,MAAM,CAAN,IAAY,8BAGX;AAHD,WAAY,8BAA8B;IACxC,6CAAW,CAAA;IACX,mDAAiB,CAAA;AACnB,CAAC,EAHW,8BAA8B,KAA9B,8BAA8B,QAGzC;AAED,MAAM,CAAN,IAAY,wBAGX;AAHD,WAAY,wBAAwB;IAClC,mDAAuB,CAAA;IACvB,iDAAqB,CAAA;AACvB,CAAC,EAHW,wBAAwB,KAAxB,wBAAwB,QAGnC;AAED;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACE;;;;;;;;;;WAUG;QAED,wBAAmB,GAAwC,8BAA8B,CAAC,GAAG,CAAC;QAWhG;;;;;;;;;;;WAWG;QAED,iBAAY,GAAG,cAAc,CAAC;QAEhC;;;;;;;;;WASG;QAED,sBAAiB,GAAmC,SAAS,CAAC;QAoBhE;;;;;WAKG;QAED,mBAAc,GAAW,EAAE,CAAC;IA8EhC,CAAC;IAzEC,IAAI,YAAY;QACd,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACnE,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,aAAa;QACf,MAAM,OAAO,GAAG,eAAe,CAAC;QAEhC,OAAO,GAAG,OAAO,+BAA+B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7E,CAAC;IAED,IAAI,YAAY;QACd,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;YACpE,MAAM,EAAE,IAAI,CAAC,mBAAmB,KAAK,8BAA8B,CAAC,MAAM;SAC3E,CAAC;IACJ,CAAC;IAED,IAAI,kBAAkB;QACpB,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,gBAAgB;QAClB,OAAO,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACzE,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,CAAC,CAAsC;QACrD,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAA6C,CAAC,CAAC;QAC/E,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB,CAAC,CAAsC;QACrD,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAA6C,CAAC,CAAC;QAC/E,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,gBAAgB;QACd,kBAAkB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAErC,IAAI,CAAC,8BAA8B,EAAE,CAAC;IACxC,CAAC;CACF,CAAA;AA9IG;IADD,QAAQ,EAAE;yDACqF;AAS9F;IADD,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;2CACvC;AAe3B;IADD,QAAQ,EAAE;kDACqB;AAa9B;IADD,QAAQ,EAAE;uDACqD;AAS9D;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;AAGvB;IADN,IAAI,CAAC,yBAAyB,CAAC;sCACF;AAhF1B,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CA2JjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.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 {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\nimport type UDExButton from \"./Button.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\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\nclass UDExCarousel extends UI5Element {\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  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<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: `${CarouselPageIndicatorType}` = \"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  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\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,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\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 _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\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  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}

package/dist/CarouselTemplate.js

@@ -6,10 +6,10 @@ import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrow
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 export default function CarouselTemplate() {
-    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
+    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { itemsPerPage: this.itemsPerPage, pageIndicatorType: this.pageIndicatorType, id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
 }
 function navigation() {
     const btnClassName = "udex-carousel__navigation-button";
-    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
+    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { "data-ui5-arrow-back": true, size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { "data-ui5-arrow-forward": true, size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
 }
 //# sourceMappingURL=CarouselTemplate.js.map

package/dist/CarouselTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,iCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,oCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        itemsPerPage={this.itemsPerPage}\n        pageIndicatorType={this.pageIndicatorType}\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        data-ui5-arrow-back\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        data-ui5-arrow-forward\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}

package/dist/DatePicker.d.ts

@@ -1,10 +1,10 @@
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
+import type UDExTextField from "./TextField.js";
+import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
 export declare enum UDExDatePickerSelectionMode {
     Single = "Single",
@@ -193,7 +193,7 @@ declare class UDExDatePicker extends DateComponentBase {
     _buildEventData(value: string): UDExDatePickerSelectionChangeEventDetail;
     _updateValueAndFireDecoratorEvents(value: string, normalizeValue: boolean, e?: CustomEvent | null): void;
     _onInputChange(e: Event): void;
-    handleInputClick(e: MouseEvent | KeyboardEvent): void;
+    handleInputClick(e: CustomEvent<void>): void;
     /**
      * Used to provide selectedDates to the calendar based on the component's state
      * Override in derivatives to provide different rules for setting the calendar's selected dates

package/dist/DatePicker.js

@@ -6,23 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var UDExDatePicker_1;
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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";
-// eslint-disable-next-line
-import Calendar from "@ui5/webcomponents/dist/Calendar.js";
-import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExStatusMessage from "./StatusMessage.js";
 import UDExValueState from "./types/common.js";
 // Template
-import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+import DatePickerTemplate from "./DatePickerTemplate.js";
 // Styles
 import DatePickerCss from "./generated/themes/DatePicker.css.js";
 import DatePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js";
@@ -422,10 +416,9 @@ __decorate([
 UDExDatePicker = UDExDatePicker_1 = __decorate([
     customElement({
         tag: "udex-date-picker",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [DatePickerCss, DatePickerPopoverCss],
         template: DatePickerTemplate,
-        dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
     })
     /**
      * Fired when the selected dates change.