@sapudex/web-components 0.226.0 → 2.1.0

package/dist/SideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,kBAAkB,MAAM,qDAAqD,CAAC;AAErF,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,kBAAkB;IACrD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;aACxC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAVK,sBAAsB;IAN3B,aAAa,CAAC;QACb,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,kBAAkB,CAAC,MAAM,EAAE,qBAAqB,CAAC;KAC3D,CAAC;GAEI,sBAAsB,CAU3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\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-side-navigation-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: litRender,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}
+{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,kBAAkB,MAAM,qDAAqD,CAAC;AAErF,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,kBAAkB;IACrD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YACzC,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAfK,sBAAsB;IAN3B,aAAa,CAAC;QACb,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,kBAAkB,CAAC,MAAM,EAAE,qBAAqB,CAAC;KAC3D,CAAC;GAEI,sBAAsB,CAe3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base\";\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-side-navigation-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}

package/dist/SideNavigationMobile.d.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UDExDropdown from "./Dropdown.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import UDExSideNavigationItem from "./SideNavigationItem.js";
-import UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
-import UDExSideNavigationGroup from "./SideNavigationGroup.js";
+import type UDExSideNavigationItem from "./SideNavigationItem.js";
+import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
 type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
 /**
  * @class
@@ -57,23 +57,18 @@ declare class UDExSideNavigationMobile extends UI5Element {
     _navItems: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
     _initialized: boolean;
     _dropdown: UDExDropdown;
-    /**
-     * Getter for the interactive element that opens the dropdown
-     * @private
-     */
-    get _dropdownTrigger(): HTMLElement;
-    _getResponsePopover(): Promise<UDExDropdown>;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    _getResponsePopover(): UDExDropdown;
     _afterDropdownOpen(): void;
     _afterDropdownClose(): void;
-    handleTriggerClick(): Promise<void>;
-    handleKeydown(event: KeyboardEvent): Promise<void>;
+    handleTriggerClick(): void;
+    handleKeydown(event: KeyboardEvent): void;
     _handleSelectionChanged(event: {
         detail: {
             item: UDExSideNavigationItem | UDExSideNavigationSubItem;
         };
-    }): Promise<void>;
+    }): void;
     getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined;
-    onBeforeRendering(): void;
-    onAfterRendering(): Promise<void>;
 }
 export default UDExSideNavigationMobile;

package/dist/SideNavigationMobile.js

@@ -14,7 +14,6 @@ import UDExSideNavigation from "./SideNavigation.js";
 import UDExDropdown from "./Dropdown.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
-import SideNavigationMobileDropdownTemplate from "./generated/templates/SideNavigationMobileDropdownTemplate.lit.js";
 // Styles
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
 import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
@@ -40,16 +39,20 @@ let UDExSideNavigationMobile = class UDExSideNavigationMobile extends UI5Element
         super(...arguments);
         this._initialized = false;
     }
-    /**
-     * Getter for the interactive element that opens the dropdown
-     * @private
-     */
-    get _dropdownTrigger() {
-        return this.shadowRoot.querySelector(".udex-side-navigation-mobile__trigger");
+    onBeforeRendering() {
+        if (!this._initialized) {
+            const items = this.getSlottedNodes("navItems");
+            const fixedItems = this.getSlottedNodes("fixedItems");
+            this._navItems = items.concat(fixedItems);
+            this._selectedItem = this.getSelectedItem() || null;
+        }
+        this._initialized = true;
+    }
+    onAfterRendering() {
+        this._dropdown = this._getResponsePopover();
     }
-    async _getResponsePopover() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector(`[udex-dropdown]`);
+    _getResponsePopover() {
+        return this.shadowRoot.querySelector(`[udex-dropdown]`);
     }
     _afterDropdownOpen() {
         this._dropdownOpened = true;
@@ -57,23 +60,17 @@ let UDExSideNavigationMobile = class UDExSideNavigationMobile extends UI5Element
     _afterDropdownClose() {
         this._dropdownOpened = false;
     }
-    async handleTriggerClick() {
-        this._dropdown = await this._getResponsePopover();
-        if (this._dropdown?.open) {
-            this._dropdown.onClose();
-        }
-        else {
-            this._dropdown.onOpen(this._dropdownTrigger);
-        }
+    handleTriggerClick() {
+        this._dropdown.open = !this._dropdown.open;
     }
-    async handleKeydown(event) {
+    handleKeydown(event) {
         if ((event.key === "Enter" || event.key === " ")) {
-            await this.handleTriggerClick();
+            this.handleTriggerClick();
         }
     }
-    async _handleSelectionChanged(event) {
-        this._dropdown = await this._getResponsePopover();
-        this._dropdown.onClose();
+    _handleSelectionChanged(event) {
+        this._dropdown = this._getResponsePopover();
+        this._dropdown.open = false;
         this._selectedItem = event.detail.item;
     }
     getSelectedItem() {
@@ -82,18 +79,6 @@ let UDExSideNavigationMobile = class UDExSideNavigationMobile extends UI5Element
         }, new Array());
         return items.find(item => item._selected);
     }
-    onBeforeRendering() {
-        if (!this._initialized) {
-            const items = this.getSlottedNodes("navItems");
-            const fixedItems = this.getSlottedNodes("fixedItems");
-            this._navItems = items.concat(fixedItems);
-            this._selectedItem = this.getSelectedItem() || null;
-        }
-        this._initialized = true;
-    }
-    async onAfterRendering() {
-        this._dropdown = await this._getResponsePopover();
-    }
 };
 __decorate([
     property({ noAttribute: true, type: Boolean })
@@ -112,9 +97,7 @@ UDExSideNavigationMobile = __decorate([
         tag: "udex-side-navigation-mobile",
         renderer: litRender,
         template: SideNavigationMobileTemplate,
-        styles: SideNavigationMobileCss,
-        staticAreaTemplate: SideNavigationMobileDropdownTemplate,
-        staticAreaStyles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
+        styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
         dependencies: [UDExSideNavigation, UDExDropdown, Icon],
     })
 ], UDExSideNavigationMobile);

package/dist/SideNavigationMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport SideNavigationMobileTemplate from \"./generated/templates/SideNavigationMobileTemplate.lit.js\";\nimport SideNavigationMobileDropdownTemplate from \"./generated/templates/SideNavigationMobileDropdownTemplate.lit.js\";\nimport UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\nimport SideNavigationMobileDropdownCss from \"./generated/themes/SideNavigationMobileDropdown.css.js\";\n\ntype SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-side-navigation-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: litRender,\n  template: SideNavigationMobileTemplate,\n  styles: SideNavigationMobileCss,\n  staticAreaTemplate: SideNavigationMobileDropdownTemplate,\n  staticAreaStyles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],\n  dependencies: [UDExSideNavigation, UDExDropdown, Icon],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _initialized = false;\n  _dropdown!: UDExDropdown;\n\n  /**\n   * Getter for the interactive element that opens the dropdown\n   * @private\n   */\n  get _dropdownTrigger() {\n    return this.shadowRoot!.querySelector<HTMLElement>(\".udex-side-navigation-mobile__trigger\")!;\n  }\n\n  async _getResponsePopover() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  async handleTriggerClick() {\n    this._dropdown = await this._getResponsePopover();\n    if (this._dropdown?.open) {\n      this._dropdown.onClose();\n    } else {\n      this._dropdown.onOpen(this._dropdownTrigger);\n    }\n  }\n\n  async handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      await this.handleTriggerClick();\n    }\n  }\n\n  async _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = await this._getResponsePopover();\n    this._dropdown.onClose();\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem() {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item._selected);\n  }\n\n  onBeforeRendering() {\n    if (!this._initialized) {\n      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n      this._navItems = items.concat(fixedItems);\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n    this._initialized = true;\n  }\n\n  async onAfterRendering() {\n    this._dropdown = await this._getResponsePopover();\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}
+{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport SideNavigationMobileTemplate from \"./generated/templates/SideNavigationMobileTemplate.lit.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport type UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\nimport SideNavigationMobileDropdownCss from \"./generated/themes/SideNavigationMobileDropdown.css.js\";\n\ntype SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-side-navigation-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: litRender,\n  template: SideNavigationMobileTemplate,\n  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],\n  dependencies: [UDExSideNavigation, UDExDropdown, Icon],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _initialized = false;\n  _dropdown!: UDExDropdown;\n\n  onBeforeRendering() {\n    if (!this._initialized) {\n      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n      this._navItems = items.concat(fixedItems);\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n    this._initialized = true;\n  }\n\n  onAfterRendering() {\n    this._dropdown = this._getResponsePopover();\n  }\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  handleTriggerClick() {\n    this._dropdown.open = !this._dropdown.open;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      this.handleTriggerClick();\n    }\n  }\n\n  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = this._getResponsePopover();\n    this._dropdown.open = false;\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item._selected);\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}

package/dist/SideNavigationSubItem.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
 // Styles
 import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
@@ -31,7 +31,7 @@ let UDExSideNavigationSubItem = class UDExSideNavigationSubItem extends SideNavi
 UDExSideNavigationSubItem = __decorate([
     customElement({
         tag: "udex-side-navigation-sub-item",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
     })
 ], UDExSideNavigationSubItem);

package/dist/SideNavigationSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,qBAAqB,MAAM,wDAAwD,CAAC;AAE3F,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,qBAAqB;CAAG,CAAA;AAA1D,yBAAyB;IAN9B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC;KACjE,CAAC;GAEI,yBAAyB,CAAiC;AAEhE,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: litRender,\n  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}
+{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,qBAAqB,MAAM,wDAAwD,CAAC;AAE3F,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,qBAAqB;CAAG,CAAA;AAA1D,yBAAyB;IAN9B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC;KACjE,CAAC;GAEI,yBAAyB,CAAiC;AAEhE,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\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-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}

package/dist/Slider.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import Slider from "@ui5/webcomponents/dist/Slider.js";
 import SliderBase from "@ui5/webcomponents/dist/SliderBase.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -38,7 +38,7 @@ let UDExSlider = class UDExSlider extends Slider {
 UDExSlider = __decorate([
     customElement({
         tag: "udex-slider",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [SliderBase.styles, SliderCss],
     })
 ], UDExSlider);

package/dist/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,SAAS;AACT,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AAMH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,MAAM;IAC7B,UAAU;QACR,IAAI,SAAS,EAAE,EAAE;YACf,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AANK,UAAU;IALf,aAAa,CAAC;QACb,GAAG,EAAE,aAAa;QAClB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC;KACvC,CAAC;GACI,UAAU,CAMf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Slider from \"@ui5/webcomponents/dist/Slider.js\";\nimport SliderBase from \"@ui5/webcomponents/dist/SliderBase.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Styles\nimport SliderCss from \"./generated/themes/Slider.css.js\";\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-slider</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Slider.js\";</code>\n *\n * @constructor\n * @extends Slider\n * @public\n */\n@customElement({\n  tag: \"udex-slider\",\n  renderer: litRender,\n  styles: [SliderBase.styles, SliderCss],\n})\nclass UDExSlider extends Slider {\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n}\n\nUDExSlider.define();\n\nexport default UDExSlider;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,SAAS;AACT,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AAMH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,MAAM;IAC7B,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;CACF,CAAA;AANK,UAAU;IALf,aAAa,CAAC;QACb,GAAG,EAAE,aAAa;QAClB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC;KACvC,CAAC;GACI,UAAU,CAMf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport Slider from \"@ui5/webcomponents/dist/Slider.js\";\nimport SliderBase from \"@ui5/webcomponents/dist/SliderBase.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Styles\nimport SliderCss from \"./generated/themes/Slider.css.js\";\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-slider</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Slider.js\";</code>\n *\n * @constructor\n * @extends Slider\n * @public\n */\n@customElement({\n  tag: \"udex-slider\",\n  renderer: jsxRenderer,\n  styles: [SliderBase.styles, SliderCss],\n})\nclass UDExSlider extends Slider {\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n}\n\nUDExSlider.define();\n\nexport default UDExSlider;\n"]}

package/dist/StatusBadge.d.ts

@@ -4,7 +4,8 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
 import "@ui5/webcomponents-icons/dist/information.js";
-import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type UDExProgressBarValueState from "./types/ProgressBar.js";
 export declare enum IconMapping {
     Success = "sys-enter-2",
     Error = "error",
@@ -19,6 +20,7 @@ export declare enum BadgeSize {
     L = "L",
     XL = "XL"
 }
+export type UDExStatusBadgeValueState = `${Exclude<UDExProgressBarValueState, "None">}` | "Edit";
 /**
  * @class
  *
@@ -43,7 +45,7 @@ declare class UDExStatusBadge extends UI5Element {
      * @default "Information"
      * @public
      */
-    valueState: "Information" | "Warning" | "Error" | "Success" | "Edit";
+    valueState: UDExStatusBadgeValueState;
     /**
      * Defines predefined size of the component.
      *
@@ -54,12 +56,11 @@ declare class UDExStatusBadge extends UI5Element {
     /**
      * Defines the text alternative of the component.
      *
-     * @default ""
+     * @default undefined
      * @public
      */
-    accessibleName: string;
+    accessibleName?: string;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     get iconFieldName(): string;
     get badgeAccessibleName(): string;
     get ariaTitle(): string;

package/dist/StatusBadge.js

@@ -15,7 +15,7 @@ import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
 import "@ui5/webcomponents-icons/dist/information.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { STATUS_BADGE_TEXT, STATUS_BADGE_EDIT_TITLE, STATUS_BADGE_INFORMATION_TITLE, STATUS_BADGE_ERROR_TITLE, STATUS_BADGE_SUCCESS_TITLE, STATUS_BADGE_WARNING_TITLE, } from "./generated/i18n/i18n-defaults.js";
 import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.js";
 // Styles
@@ -54,8 +54,22 @@ export var BadgeSize;
  * @public
  */
 let UDExStatusBadge = UDExStatusBadge_1 = class UDExStatusBadge extends UI5Element {
-    static async onDefine() {
-        UDExStatusBadge_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Information"
+         * @public
+         */
+        this.valueState = "Information";
+        /**
+         * Defines predefined size of the component.
+         *
+         * @default "S"
+         * @public
+         */
+        this.size = BadgeSize.S;
     }
     get iconFieldName() {
         if (!IconMapping[this.valueState]) {
@@ -82,14 +96,17 @@ let UDExStatusBadge = UDExStatusBadge_1 = class UDExStatusBadge extends UI5Eleme
     }
 };
 __decorate([
-    property({ type: IconMapping, defaultValue: IconMapping.Information })
+    property()
 ], UDExStatusBadge.prototype, "valueState", void 0);
 __decorate([
-    property({ type: BadgeSize, defaultValue: BadgeSize.S })
+    property()
 ], UDExStatusBadge.prototype, "size", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExStatusBadge.prototype, "accessibleName", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExStatusBadge, "i18nBundle", void 0);
 UDExStatusBadge = UDExStatusBadge_1 = __decorate([
     customElement({
         tag: "udex-status-badge",

package/dist/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../src/StatusBadge.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAChD,OAAO,8CAA8C,CAAC;AACtD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,8CAA8C,CAAC;AACtD,OAAmB,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,mCAAmC,CAAC;AAE3C,OAAO,mBAAmB,MAAM,kDAAkD,CAAC;AAEnF,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,sCAAuB,CAAA;IACvB,8BAAe,CAAA;IACf,gCAAiB,CAAA;IACjB,4BAAa,CAAA;IACb,0CAA2B,CAAA;AAC7B,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB;AAED,MAAM,CAAN,IAAY,SAMX;AAND,WAAY,SAAS;IACnB,sBAAS,CAAA;IACT,oBAAO,CAAA;IACP,oBAAO,CAAA;IACP,oBAAO,CAAA;IACP,sBAAS,CAAA;AACX,CAAC,EANW,SAAS,KAAT,SAAS,QAMpB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,eAAe,uBAArB,MAAM,eAAgB,SAAQ,UAAU;IA8BtC,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,iBAAe,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,yBAAyB,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,aAAa;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACjC,OAAO,WAAW,CAAC,WAAW,CAAC;SAChC;QACD,OAAO,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAChH,CAAC;IAED,IAAI,SAAS;QACX,QAAQ,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;YACtC,KAAK,WAAW,CAAC,IAAI;gBACnB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACrE,KAAK,WAAW,CAAC,WAAW;gBAC1B,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;YAC5E,KAAK,WAAW,CAAC,OAAO;gBACtB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;YACxE,KAAK,WAAW,CAAC,KAAK;gBACpB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;YACtE,KAAK,WAAW,CAAC,OAAO;gBACtB,OAAO,iBAAe,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;SACvE;IACH,CAAC;CACF,CAAA;AAnDG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC;mDACC;AAStE;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC;6CACjC;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;uDACnB;AA1BtB,eAAe;IAPpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;QAC7B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,eAAe,CA2DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  STATUS_BADGE_TEXT,\n  STATUS_BADGE_EDIT_TITLE,\n  STATUS_BADGE_INFORMATION_TITLE,\n  STATUS_BADGE_ERROR_TITLE,\n  STATUS_BADGE_SUCCESS_TITLE,\n  STATUS_BADGE_WARNING_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport StatusBadgeTemplate from \"./generated/templates/StatusBadgeTemplate.lit.js\";\n\n// Styles\nimport StatusBadgeCss from \"./generated/themes/StatusBadge.css.js\";\n\nexport enum IconMapping {\n  Success = \"sys-enter-2\",\n  Error = \"error\",\n  Warning = \"alert\",\n  Edit = \"edit\",\n  Information = \"information\",\n}\n\nexport enum BadgeSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\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-status-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-badge\",\n  renderer: litRender,\n  styles: StatusBadgeCss,\n  template: StatusBadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusBadge extends UI5Element {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property({ type: IconMapping, defaultValue: IconMapping.Information })\n    valueState!: \"Information\" | \"Warning\" | \"Error\" | \"Success\" | \"Edit\";\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property({ type: BadgeSize, defaultValue: BadgeSize.S })\n    size!: `${BadgeSize}`;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExStatusBadge.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  get iconFieldName(): string {\n    if (!IconMapping[this.valueState]) {\n      return IconMapping.Information;\n    }\n    return IconMapping[this.valueState];\n  }\n\n  get badgeAccessibleName(): string {\n    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;\n  }\n\n  get ariaTitle() {\n    switch (IconMapping[this.valueState]) {\n    case IconMapping.Edit:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);\n    case IconMapping.Information:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);\n    case IconMapping.Success:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);\n    case IconMapping.Error:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);\n    case IconMapping.Warning:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);\n    }\n  }\n}\n\nUDExStatusBadge.define();\n\nexport default UDExStatusBadge;\n"]}
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../src/StatusBadge.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  STATUS_BADGE_TEXT,\n  STATUS_BADGE_EDIT_TITLE,\n  STATUS_BADGE_INFORMATION_TITLE,\n  STATUS_BADGE_ERROR_TITLE,\n  STATUS_BADGE_SUCCESS_TITLE,\n  STATUS_BADGE_WARNING_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport StatusBadgeTemplate from \"./generated/templates/StatusBadgeTemplate.lit.js\";\n\n// Styles\nimport StatusBadgeCss from \"./generated/themes/StatusBadge.css.js\";\nimport type UDExProgressBarValueState from \"./types/ProgressBar.js\";\n\nexport enum IconMapping {\n  Success = \"sys-enter-2\",\n  Error = \"error\",\n  Warning = \"alert\",\n  Edit = \"edit\",\n  Information = \"information\",\n}\n\nexport enum BadgeSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nexport type UDExStatusBadgeValueState = `${Exclude<UDExProgressBarValueState, \"None\">}` | \"Edit\";\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-status-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-badge\",\n  renderer: litRender,\n  styles: StatusBadgeCss,\n  template: StatusBadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusBadge extends UI5Element {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    valueState: UDExStatusBadgeValueState = \"Information\";\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${BadgeSize}` = BadgeSize.S;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get iconFieldName(): string {\n    if (!IconMapping[this.valueState]) {\n      return IconMapping.Information;\n    }\n    return IconMapping[this.valueState];\n  }\n\n  get badgeAccessibleName(): string {\n    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;\n  }\n\n  get ariaTitle() {\n    switch (IconMapping[this.valueState]) {\n    case IconMapping.Edit:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);\n    case IconMapping.Information:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);\n    case IconMapping.Success:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);\n    case IconMapping.Error:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);\n    case IconMapping.Warning:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);\n    }\n  }\n}\n\nUDExStatusBadge.define();\n\nexport default UDExStatusBadge;\n"]}

package/dist/StatusMessage.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import UDExValueState from "./types/common.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -52,7 +53,7 @@ declare class UDExStatusMessage extends UI5Element {
      * @default "Standard"
      * @public
      */
-    valueState: "Standard" | "Warning" | "Error" | "Success";
+    valueState: `${UDExValueState}`;
     get iconFieldName(): string;
 }
 export default UDExStatusMessage;

package/dist/StatusMessage.js

@@ -9,7 +9,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -40,8 +40,25 @@ export var IconMapping;
  * @public
  */
 let UDExStatusMessage = class UDExStatusMessage extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines supporting text alignment. It aligns only Standard state text.
+         *
+         * @default ""
+         * @public
+         */
+        this.supportingTextAlignment = "Left";
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = UDExValueState.Standard;
+    }
     get iconFieldName() {
-        if (this.valueState !== ValueState.Standard) {
+        if (this.valueState !== UDExValueState.Standard) {
             return IconMapping[this.valueState];
         }
         return "";
@@ -51,13 +68,13 @@ __decorate([
     property({ type: String })
 ], UDExStatusMessage.prototype, "supportingText", void 0);
 __decorate([
-    property({ type: String, defaultValue: "left" })
+    property({ type: String })
 ], UDExStatusMessage.prototype, "supportingTextAlignment", void 0);
 __decorate([
     property({ type: String })
 ], UDExStatusMessage.prototype, "disabled", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: "Standard" })
+    property()
 ], UDExStatusMessage.prototype, "valueState", void 0);
 UDExStatusMessage = __decorate([
     customElement({

package/dist/StatusMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../src/StatusMessage.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAEhD,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,iCAAkB,CAAA;IAClB,8BAAe,CAAA;IACf,gCAAiB,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAoCxC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ,EAAE;YAC3C,OAAO,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACrC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAA;AAlCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACD;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;kEACJ;AAS3C;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACP;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;qDACG;AAlCxD,iBAAiB;IAPtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,iBAAiB,CA0CtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport ValueState from \"./types/common.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport StatusMessageTemplate from \"./generated/templates/StatusMessageTemplate.lit.js\";\n\n// Styles\nimport StatusMessageCss from \"./generated/themes/StatusMessage.css.js\";\n\nexport enum IconMapping {\n  Success = \"accept\",\n  Error = \"error\",\n  Warning = \"alert\",\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-status-message</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusMessage.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-message\",\n  renderer: litRender,\n  styles: StatusMessageCss,\n  template: StatusMessageTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusMessage extends UI5Element {\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines supporting text alignment. It aligns only Standard state text.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"left\" })\n    supportingTextAlignment!: \"Left\" | \"Right\";\n\n  /**\n   * Defines if component should have disabled styles.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    disabled!: string;\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property({ type: ValueState, defaultValue: \"Standard\" })\n    valueState!: \"Standard\" | \"Warning\" | \"Error\" | \"Success\";\n\n  get iconFieldName(): string {\n    if (this.valueState !== ValueState.Standard) {\n      return IconMapping[this.valueState];\n    }\n    return \"\";\n  }\n}\n\nUDExStatusMessage.define();\n\nexport default UDExStatusMessage;\n"]}
+{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../src/StatusMessage.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAEhD,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,iCAAkB,CAAA;IAClB,8BAAe,CAAA;IACf,gCAAiB,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAUE;;;;;WAKG;QAED,4BAAuB,GAAqB,MAAM,CAAC;QAUrD;;;;;WAKG;QAED,eAAU,GAAwB,cAAc,CAAC,QAAQ,CAAC;IAQ9D,CAAC;IANC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,cAAc,CAAC,QAAQ,EAAE,CAAC;YAChD,OAAO,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAA;AAlCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACD;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAC0B;AASnD;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACP;AAQlB;IADD,QAAQ,EAAE;qDACiD;AAlCxD,iBAAiB;IAPtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,iBAAiB,CA0CtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExValueState from \"./types/common.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport StatusMessageTemplate from \"./generated/templates/StatusMessageTemplate.lit.js\";\n\n// Styles\nimport StatusMessageCss from \"./generated/themes/StatusMessage.css.js\";\n\nexport enum IconMapping {\n  Success = \"accept\",\n  Error = \"error\",\n  Warning = \"alert\",\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-status-message</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusMessage.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-message\",\n  renderer: litRender,\n  styles: StatusMessageCss,\n  template: StatusMessageTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusMessage extends UI5Element {\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines supporting text alignment. It aligns only Standard state text.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingTextAlignment: \"Left\" | \"Right\" = \"Left\";\n\n  /**\n   * Defines if component should have disabled styles.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    disabled!: string;\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  get iconFieldName(): string {\n    if (this.valueState !== UDExValueState.Standard) {\n      return IconMapping[this.valueState];\n    }\n    return \"\";\n  }\n}\n\nUDExStatusMessage.define();\n\nexport default UDExStatusMessage;\n"]}

package/dist/StepInput.d.ts

@@ -1,11 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { Timeout } from "@ui5/webcomponents-base/dist/types.js";
+import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/less.js";
 import "@ui5/webcomponents-icons/dist/add.js";
-import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ValueState from "./types/common.js";
-export type StepInputValueStateChangeEventDetail = {
-    valueState: `${ValueState}`;
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExValueState from "./types/common.js";
+import type { UDExControlButtonDesign } from "./types/Button.js";
+import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
+type UDExStepInputValueChangeEventDetail = {
+    value: number;
+};
+type UDExStepInputValueStateChangeEventDetail = {
+    valueState: `${UDExValueState}`;
     valid: boolean;
 };
 /**
@@ -26,6 +31,10 @@ export type StepInputValueStateChangeEventDetail = {
  * @public
  */
 declare class UDExStepInput extends UI5Element {
+    eventDetails: {
+        "change": UDExStepInputValueChangeEventDetail;
+        "value-state-change": UDExStepInputValueStateChangeEventDetail;
+    };
     /**
      * Defines a value of the component.
      * @default 0
@@ -55,7 +64,7 @@ declare class UDExStepInput extends UI5Element {
      * @default "None"
      * @public
      */
-    valueState: `${ValueState}`;
+    valueState: `${UDExValueState}`;
     /**
      * Defines whether the component is required.
      * @default false
@@ -80,7 +89,7 @@ declare class UDExStepInput extends UI5Element {
      * <b>Note:</b> A display-only component is not editable,
      * but still provides visual feedback upon user interaction, input border is not visible.
      *
-     * @defaultvalue false
+     * @default false
      * @public
      */
     displayonly: boolean;
@@ -93,14 +102,14 @@ declare class UDExStepInput extends UI5Element {
     /**
      * Defines label text for the input field.
      *
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     label: string;
     /**
      * Defines supporting text under the input field.
      *
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     supportingText: string;
@@ -116,7 +125,6 @@ declare class UDExStepInput extends UI5Element {
      * @public
      */
     accessibleNameRef: string;
-    type: string;
     _decIconDisabled: boolean;
     _incIconDisabled: boolean;
     incIconActive: boolean;
@@ -128,10 +136,11 @@ declare class UDExStepInput extends UI5Element {
     _btnDown: boolean;
     _spinTimeoutId: Timeout;
     _spinStarted: boolean;
-    _initialValueState?: `${ValueState}`;
+    _initialValueState?: `${UDExValueState}`;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     constructor();
+    get controlButtonDesign(): UDExControlButtonDesign;
     get decIconTitle(): string;
     get incIconTitle(): string;
     get _decIconInactive(): boolean;
@@ -159,10 +168,10 @@ declare class UDExStepInput extends UI5Element {
      * @param fireChangeEvent if `true`, fires `change` event when the value is changed
      */
     _modifyValue(modifier: number, fireChangeEvent?: boolean): void;
-    _incValue(e: CustomEvent): void;
-    _decValue(e: CustomEvent): void;
+    _incValue(): void;
+    _decValue(): void;
     _onInputChange(): void;
-    _onkeydown(e: CustomEvent<KeyboardEvent>): void;
+    _onkeydown(e: CustomEvent<UDExTextFieldKeydownEventDetail>): void;
     _decSpin(): void;
     _incSpin(): void;
     /**