@sapudex/web-components 0.199.3 → 0.225.0

package/src/CountrySelector.ts

@@ -5,7 +5,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
-  isEnter, isSpace, isBackSpace, isDelete,
   isEscape,
   isTabPrevious,
   isTabNext,
@@ -31,7 +30,6 @@ import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import isLetterKey from "./utils/isLetterKeyPressed.js";
 
 /**
  * @class
@@ -44,7 +42,7 @@ import isLetterKey from "./utils/isLetterKeyPressed.js";
  * For the <code>udex-country-selector</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/CountrySelector.js";</code>
+ * <code>import "@sapudex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -132,7 +130,7 @@ import isLetterKey from "./utils/isLetterKeyPressed.js";
   },
 })
 
-class CountrySelector extends UDExSearchableListBase {
+class UDExCountrySelector extends UDExSearchableListBase {
   /**
    * Defines label text for the input field.
    *
@@ -278,7 +276,7 @@ class CountrySelector extends UDExSearchableListBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    CountrySelector.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExCountrySelector.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -343,7 +341,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get searchableList() {
-    return executeTemplate(CountrySelector.searchableListBaseTemplate, this);
+    return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);
   }
 
   static get searchableListBaseTemplate() {
@@ -420,6 +418,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
+    this.dropdownClose();
     this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
@@ -428,38 +427,7 @@ class CountrySelector extends UDExSearchableListBase {
     const target = e.target as HTMLElement;
     const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
     this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-    this.dropDownClose();
-  }
-
-  handleKeyDown(e: KeyboardEvent) {
-    if (this.isOpenerDisabled) {
-      return;
-    }
-
-    const key = e.key;
-
-    const isTabNextPress = isTabNext(e) && !this._search;
-    const isTabPrevPress = isTabPrevious(e) && !this._search;
-    const isEscPress = isEscape(e) && !this._search;
-
-    if (isEnter(e) || isSpace(e)) {
-      if (this._dropdown.open) {
-        this.dropDownClose();
-      } else {
-        this._dropdown.onTriggerClick();
-      }
-    }
-    if (isTabNextPress || isTabPrevPress || isEscPress) {
-      this._dropdown.open = false;
-    }
-    if (isBackSpace(e) || isDelete(e)) {
-      this.selectedCountry = undefined;
-      this._render();
-    }
-    if (isLetterKey(key)) {
-      e.preventDefault();
-      this.handleKeyPress(e);
-    }
+    this.dropdownClose();
   }
 
   handleKeyPress(keyEvent: KeyboardEvent) {
@@ -481,9 +449,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleTriggerClick() {
-    if (this._dropdown.open) {
-      this.dropDownClose();
-    }
+    this._dropdown.open = !this._dropdown.open;
   }
 
   handleValueSearch(e:CustomEvent) {
@@ -498,7 +464,7 @@ class CountrySelector extends UDExSearchableListBase {
     const keyEvent = e.detail as KeyboardEvent;
 
     if (isTabPrevious(keyEvent)) {
-      this.dropDownClose();
+      this.dropdownClose();
     }
     if (isEscape(keyEvent)) {
       keyEvent.preventDefault();
@@ -508,11 +474,11 @@ class CountrySelector extends UDExSearchableListBase {
 
   handleKeyDownDropdown(e: KeyboardEvent) {
     if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
-      this.dropDownClose();
+      this.dropdownClose();
     }
   }
 
-  dropDownClose(): void {
+  dropdownClose(): void {
     this.getDropdownPopover()?.close(false, false, true);
   }
 
@@ -550,10 +516,10 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get effectiveAriaLabel(): string {
-    return this.label || this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
+    return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);
   }
 }
 
-CountrySelector.define();
+UDExCountrySelector.define();
 
-export default CountrySelector;
+export default UDExCountrySelector;

package/src/DatePicker.ts

@@ -46,7 +46,7 @@ export type DatePickerSelectionChangeEventDetail = {
  * For the <code>udex-date-picker</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/DatePicker.js";</code>
+ * <code>import "@sapudex/web-components/dist/DatePicker.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -211,7 +211,7 @@ class UDExDatePicker extends DateComponentBase {
   private _prevDelimiter!: string | null;
 
   static async onDefine(): Promise<void> {
-    UDExDatePicker.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExDatePicker.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   async _getResponsePopover(): Promise<UDExDropdown> {
@@ -510,7 +510,11 @@ class UDExDatePicker extends DateComponentBase {
       return;
     }
 
-    this.showCalendar();
+    if (this.responsivePopover?.open) {
+      this.hideCalendar();
+    } else {
+      this.showCalendar();
+    }
   }
 
   /**

package/src/Dropdown.hbs

@@ -23,10 +23,10 @@
         horizontal-align="{{horizontalAlign}}"
         accessible-name="{{accessibleName}}"
         accessible-role="{{accessibleRole}}"
-        @ui5-after-open={{afterDropdownOpen}}
-        @ui5-before-open={{beforeDropdownOpen}}
-        @ui5-after-close={{afterDropdownClose}}
-        @ui5-before-close={{beforeDropdownClose}}>
+        @ui5-after-open="{{afterDropdownOpen}}"
+        @ui5-before-open="{{beforeDropdownOpen}}"
+        @ui5-after-close="{{afterDropdownClose}}"
+        @ui5-before-close="{{beforeDropdownClose}}">
         {{#if hasHeaderSlot}}
             <slot slot="header" name="header"></slot>
         {{/if}}

package/src/Dropdown.ts

@@ -27,7 +27,7 @@ import DropdownCss from "./generated/themes/Dropdown.css";
  * For the <code>udex-dropdown</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Dropdown.js";</code>
+ * <code>import "@sapudex/web-components/dist/Dropdown.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -203,7 +203,7 @@ class UDExDropdown extends UI5Element {
   _breakpointSizeXS = 640;
 
   static async onDefine(): Promise<void> {
-    UDExDropdown.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExDropdown.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onAfterRendering() {

package/src/FilterMenu.hbs

@@ -4,6 +4,7 @@
     @click="{{handleTriggerClick}}"
     @keydown="{{handleTriggerKeydown}}"
     aria-label="{{triggerButtonAccessibleName}}"
+    aria-labelledby="{{accessibleNameRef}}"
     aria-expanded="{{_open}}"
     aria-haspopup="true"
     role="{{triggerAccessibleRole}}"

package/src/FilterMenu.ts

@@ -11,6 +11,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -46,7 +47,7 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
  * For the <code>udex-filter-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UDExFilterMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/UDExFilterMenu.js";</code>
  *
  * @constructor
  * @extends UDExSearchableListBase
@@ -61,6 +62,7 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   dependencies: [
     Popover,
     Icon,
+    BusyIndicator,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,
@@ -276,6 +278,15 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property()
     accessibleName!: string;
 
+  /**
+   * Defines id (or many ids) of the elements that contain the ARIA name of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleNameRef!: string;
+
   /**
    * Allows setting a custom role.
    * @default "None"

package/src/FilterMenuGroupHeader.ts

@@ -15,7 +15,7 @@ import UDExFilterMenuItem from "./FilterMenuItem.js";
  * For the <code>udex-filter-menu-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuGroupHeader.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuGroupHeader.js";</code>
  *
  * @constructor
  * @extends UDExListGroupHeaderBase

package/src/FilterMenuItem.ts

@@ -13,7 +13,7 @@ import UDExListItemBase from "./ListItemBase.js";
  * For the <code>udex-filter-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuItem.js";</code>
  *
  * @constructor
  * @extends UDExListItemBase

package/src/FilterMenuSelectAll.ts

@@ -13,7 +13,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
  * For the <code>udex-filter-menu-select-all</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuSelectAll.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuSelectAll.js";</code>
  *
  * @constructor
  * @extends UDExListGroupHeaderBase

package/src/Footer.hbs

@@ -34,9 +34,13 @@
                 {{#if localCountryNumbersLink}}
                   <p class="udex-footer__remark">
                     {{completeListTitle}}
-                    <a href="{{this.localCountryNumbersLink}}" @click="{{_onContactPhoneLocalNumbersClick}}">
+                    <udex-link
+                      class="udex-footer__remark-link"
+                      @click="{{_onContactPhoneLocalNumbersClick}}"
+                      href="{{this.localCountryNumbersLink}}"
+                      design="Subtle">
                       {{localCountryTitle}}.
-                    </a>
+                    </udex-link>
                   </p>
                 {{/if}}
               </div>

package/src/Footer.ts

@@ -18,6 +18,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
+import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
 import { Target } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
@@ -100,7 +101,7 @@ export const FooterDetailedEvent = {
  * For the <code>udex-footer</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Footer.js";</code>
+ * <code>import "@sapudex/web-components/dist/Footer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -114,7 +115,7 @@ export const FooterDetailedEvent = {
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink],
 })
 /**
  * Triggered on click interaction with logo in footer
@@ -361,7 +362,7 @@ class UDExFooter extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExFooter.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExFooter.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   _handleResizeBound: ResizeObserverCallback;

package/src/HeroBanner.hbs

@@ -1,6 +1,6 @@
-<div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
+<div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}; {{wrapperBackgroundImage}}">
   {{#if hasBackgroundVideo}}
-    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
+    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="{{_handleKeydown}}">
         <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
             <source src="{{backgroundVideo}}" type="video/mp4" />
         </video>
@@ -14,8 +14,8 @@
             <slot id="udex-hero-banner__content" name="content" part="content"></slot>
             <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
         </div>
-        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
-            <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
+        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="{{_toggleMediaButton}}">
+            <ui5-icon name="{{mediaButtonIconName}}"></ui5-icon>
         </button>
     </div>
     {{else}}

package/src/HeroBanner.ts

@@ -91,6 +91,17 @@ class UDExHeroBanner extends UI5Element {
   @property({ type: String })
     backgroundColor?: string;
 
+  /**
+   * Allows control over the background-image to set css gradient.
+   * Value provided should be compatible with standard CSS linear-gradient rendering, e.g:
+   *  linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
+   *  linear-gradient(to bottom, var(--udexColorBlue2) 0%,var(--udexColorBlue4) 100%);
+   *
+   * @public
+   */
+  @property({ type: String })
+    backgroundGradient?: string;
+
   @property({ type: Boolean, noAttribute: true })
     _isVideoRunning?: boolean;
 
@@ -121,16 +132,20 @@ class UDExHeroBanner extends UI5Element {
   @slot()
     backgroundPicture?: Array<HTMLElement>;
 
-  get hasBackgroundImage() {
+  get hasBackgroundImage(): boolean {
     return !!this.backgroundImage;
   }
-  get hasBackgroundVideo() {
+  get hasBackgroundVideo(): boolean {
     return !!this.backgroundVideo;
   }
-  get wrapperBackgroundColor() {
+  get wrapperBackgroundColor(): string {
     return this.backgroundColor ? this.backgroundColor : "transparent";
   }
 
+  get wrapperBackgroundImage(): string {
+    return this.backgroundGradient ? `background-image:${this.backgroundGradient}` : "";
+  }
+
   /**
    * Determines if the video should autoplay based on the user's global preference.
    */

package/src/InputGroup.ts

@@ -41,7 +41,7 @@ export enum Orientation {
  * For the <code>udex-input-group</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/InputGroup.js";</code>
+ * <code>import "@sapudex/web-components/dist/InputGroup.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -104,7 +104,7 @@ class UDExInputGroup extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExInputGroup.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExInputGroup.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get _items() {

package/src/Link.hbs

@@ -10,18 +10,18 @@
 	aria-label="{{ariaLabelText}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
-	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
-	@click={{_onclick}}
-	@keydown={{_onkeydown}}
-	@keyup={{_onkeyup}}>
-    {{#if startIcon}}
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@click="{{_onclick}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}">
+    {{#if hasStartIcon}}
         <ui5-icon class="udex-link__icon udex-link__icon--icon-start" name="{{icon}}"></ui5-icon>
     {{/if}}
     <span class="udex-link__content">
         <slot></slot>
     </span>
-    {{#if endIcon}}
+    {{#if hasEndIcon}}
         <ui5-icon class="udex-link__icon udex-link__icon--icon-end" name="{{icon}}"></ui5-icon>
     {{/if}}
     {{#if hasLinkType}}

package/src/Link.ts

@@ -27,7 +27,7 @@ export type AttributeValuePair = {
  * For the <code>udex-link</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Link.js";</code>
+ * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -61,22 +61,22 @@ class UDExLink extends Link {
     @property({ type: IconPlacement, defaultValue: IconPlacement.End })
       iconPlacement?: `${IconPlacement}`;
 
-    _setCustomAttributes(attributes: AttributeValuePair[]) {
+    _setCustomAttributes(attributes: AttributeValuePair[]): void {
       if (attributes) {
         const link = this.shadowRoot!.querySelector("a")!;
         attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));
       }
     }
 
-    get startIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.Start;
+    get hasStartIcon(): boolean {
+      return !!this.icon && this.iconPlacement === IconPlacement.Start;
     }
 
-    get endIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.End;
+    get hasEndIcon(): boolean {
+      return !!this.icon && this.iconPlacement === IconPlacement.End;
     }
 
-    get linkClass() {
+    get linkClass(): string {
       return this.icon ? "udex-link udex-link--with-icon" : "udex-link";
     }
 }

package/src/List.ts

@@ -1,5 +1,5 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -16,7 +16,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import UDExListItem from "./ListItem.js";
-import { ListStyleType, ListMode, LetterPressedHandlerObj } from "./types/List.js";
+import { ListStyleType, ListMode } from "./types/List.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExUploadItem from "./UploadItem.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
@@ -29,7 +29,7 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 // Styles
 import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
-import listItemLabelStartsWithKeyFocus from "./utils/listItemLabelStartsWithKeyFocus.js";
+import UDExFirstLetterFocusHandler, { UDExListWithFirstLetterFocus } from "./utils/ListWithFirstLetterFocus.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 /**
@@ -43,7 +43,7 @@ export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadIt
  * For the <code>udex-list</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/List.js";</code>
+ * <code>import "@sapudex/web-components/dist/List.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -147,29 +147,18 @@ class UDExList extends UI5Element {
   @slot({ type: HTMLElement, "default": true })
     items!: Array<UDExListItemBase>;
 
-  static i18nBundle: I18nBundle;
+  _focusHandler: UDExListWithFirstLetterFocus = new UDExFirstLetterFocusHandler();
 
-  _pressedKey!: string;
-  _pressedCount!: number;
-  _lastFoundPosition!: number;
-  _focusableListItems!: Array<UDExListItemBase>;
-  _letterKeyHandlerObj!: LetterPressedHandlerObj;
+  static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExList.i18nBundle = await getI18nBundle("@udex/web-components");
-  }
-
-  resetFocusLetterHandlers(): void {
-    this.setPressedCount(0);
-    this.setPressedKey("");
-    this.setLastFoundPosition(0);
+    UDExList.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering(): void {
     this.prepareListItemsMode();
-    this.resetFocusLetterHandlers();
-    this._focusableListItems = this.getItemsWithoutHeader();
-    this._letterKeyHandlerObj = this.getLetterKeyObjHandler();
+    this._focusHandler.resetMatchingItems();
+    this._focusHandler._focusableListItems = this.getItemsWithoutHeader();
   }
 
   handleItemPress(e: CustomEvent): void {
@@ -327,7 +316,7 @@ class UDExList extends UI5Element {
     const letterKey = e.key;
     e.stopPropagation();
     e.preventDefault();
-    listItemLabelStartsWithKeyFocus(letterKey, this._focusableListItems, this._letterKeyHandlerObj);
+    this._focusHandler.focusMatchingListItem(letterKey);
   }
 
   onItemPress(clickedItem: UDExListItemBase): void {
@@ -382,41 +371,6 @@ class UDExList extends UI5Element {
     items[index]._tabIndex = "0";
   }
 
-  setPressedKey(value:string): void {
-    this._pressedKey = value;
-  }
-
-  getPressedKey(): string {
-    return this._pressedKey;
-  }
-
-  setPressedCount(value:number): void {
-    this._pressedCount = value;
-  }
-
-  getPressedCount() : number {
-    return this._pressedCount;
-  }
-
-  setLastFoundPosition(value:number): void {
-    this._lastFoundPosition = value;
-  }
-
-  getLastFoundPosition(): number {
-    return this._lastFoundPosition;
-  }
-
-  getLetterKeyObjHandler(): LetterPressedHandlerObj {
-    return {
-      getPressedKey: () => this.getPressedKey(),
-      setPressedKey: (arg: string) => this.setPressedKey(arg),
-      getPressedCount: () => this.getPressedCount(),
-      setPressedCount: (arg: number) => this.setPressedCount(arg),
-      getLastFoundPosition: () => this.getLastFoundPosition(),
-      setLastFoundPosition: (arg: number) => this.setLastFoundPosition(arg),
-    } as LetterPressedHandlerObj;
-  }
-
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/ListGroupHeader.hbs

@@ -4,6 +4,7 @@
     role="group"
     aria-labelledby="group-heading">
     <ul
+        role="group"
         class="udex-list__group-list"
         @ui5-item-press="{{getHandleGroupItemsClick}}">
         {{#if modeMultiSelectOrRadioGroup}}

package/src/ListGroupHeader.ts

@@ -22,7 +22,7 @@ const listGroupLargeClass: string = "udex-list__group_large";
  * For the <code>udex-list-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ListGroupHeader.js";</code>
+ * <code>import "@sapudex/web-components/dist/ListGroupHeader.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/ListItem.hbs

@@ -105,6 +105,8 @@
                         ?disabled="{{disabled}}"
                         size="Small">
                     </udex-button>
+                    {{else}}
+                        <slot name="firstIcon"></slot>
                 {{/if}}
                 {{#if deleteIcon}}
                     <udex-button
@@ -119,6 +121,8 @@
                         icon="{{deleteIcon}}"
                         ?disabled="{{disabled}}">
                     </udex-button>
+                    {{else}}
+                        <slot name="secondIcon"></slot>
                 {{/if}}
             {{/if}}
         </div>