@sapudex/web-components 2.22.0 → 2.23.0

package/src/List.ts

@@ -235,7 +235,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, previousSelectIndex);
-    items[previousSelectIndex].focus();
+    setTimeout(() => { items[previousSelectIndex].focus(); }, 0);
   }
 
   handleDownArrow(e: KeyboardEvent): void {
@@ -267,7 +267,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, nextSelectIndex);
-    items[nextSelectIndex].focus();
+    setTimeout(() => { items[nextSelectIndex].focus(); }, 0);
   }
 
   handleHomeKey(e: KeyboardEvent): void {
@@ -319,7 +319,6 @@ class UDExList extends UI5Element {
 
   handleLetterKey(e: KeyboardEvent): void {
     const letterKey = e.key;
-    e.stopPropagation();
     e.preventDefault();
     this._focusHandler.focusMatchingListItem(letterKey);
   }

package/src/ListGroupHeaderBase.ts

@@ -189,6 +189,10 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
     return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName}`;
   }
+
+  get listItem(): UDExListItemBase {
+    return this.shadowRoot!.querySelector<UDExListItemBase>("[udex-list-item]")!;
+  }
 }
 
 export default UDExListGroupHeaderBase;

package/src/ListItem.hbs

@@ -33,7 +33,6 @@
                 part="radio"
                 tabindex="-1"
                 accessible-name="radio {{stateAccessibleName}}"
-                ?aria-selected="{{selected}}"
                 ?checked="{{selected}}"
                 ?disabled="{{disabled}}">
             </udex-radio-button>

package/src/ListItemBase.ts

@@ -32,7 +32,8 @@ type UDExListItemBaseEventDetail = {
 
 /**
  * Fired event when the user click on a first icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  * @public
  * @param { PointerEvent } originalEvent The original event object
  * @param { HTMLElement } item The list item
@@ -40,7 +41,8 @@ type UDExListItemBaseEventDetail = {
 @event("first-icon-click", { bubbles: true })
 /**
  * Fired event when the user click on a second icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { HTMLElement } item The list item
  * @public
  * @param { PointerEvent } originalEvent The original event object
  * @param { HTMLElement } item The list item
@@ -137,11 +139,23 @@ class UDExListItemBase extends UI5Element {
   @property()
     type: `${UDExListStyleType}` = UDExListStyleType.None;
 
+  /**
+   * Defines the icon of the component.
+   *
+   * @default ""
+   * @private
+   */
   @property({ type: String })
     _icon: string = "";
 
+  /**
+   * Defines the tab index of the component.
+   *
+   * @default ""
+   * @private
+   */
   @property({ type: String })
-    _tabIndex!: string;
+    _tabIndex: string = "";
 
   _fireIconClickEvent(e: PointerEvent): void {
     const target = e.target as HTMLElement;

package/src/MediaPlayer.ts

@@ -334,6 +334,7 @@ class UDExMediaPlayer extends UI5Element {
     player.on("ready", () => {
       this.checkCaptionsAvailability(player);
       this.applyScrollIntoTheView();
+      this.player.src(this.source);
       this.fireDecoratorEvent("videoReady");
     });
 
@@ -458,6 +459,7 @@ class UDExMediaPlayer extends UI5Element {
 
   getOptionsValue() {
     const baseOptions = {
+      type: this.type,
       playbackRates: [1, 1.5, 2],
       controls: true,
       poster: this.poster,

package/src/MediaPlayerTemplate.tsx

@@ -35,7 +35,6 @@ function renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {
     <video-js
       id={this.playerElementId}
       class={`${rootClass} ${this.aspectRatioClass}`}>
-      <source src={this.source} type={this.type} />
       {this._tracks.map((element: HTMLTrackElement, index: number) => {
         const {
           "default": isDefault, kind, src, srclang, label

package/src/SearchableListBase.ts

@@ -3,16 +3,17 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import { UDExListMode } from "./types/List.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
-import { isDown, isUp } from "@ui5/webcomponents-base/dist/Keys.js";
-import { cleanLabel } from "./utils/listItemLabelUtils.js";
+import type { UDExProcessedItem } from "./types/SearchableListBase.js";
 import type UDExSearch from "./Search.js";
 import type UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
-import { UDExListMode } from "./types/List.js";
+import type UDExList from "./List.js";
+import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
-import type { UDExProcessedItem } from "./types/SearchableListBase.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
 import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
@@ -49,7 +50,7 @@ export type UDExSearchableListBaseEvents = {
  * @class
  *
  * A class to serve as a foundation
- * for the <code>UDExFilterMenu</code> , <code>UDExSelectBox</code> and <code>UDExCountrySelector/code> classes.
+ * for the <code>UDExFilterMenu</code> and <code>UDExSelectBox</code> classes.
  *
  * @constructor
  * @author SAP SE
@@ -59,7 +60,8 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user click on an item on the list.
- *
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
+ * @param {UDExListItemBase | UDExListGroupHeaderBase | null | undefined} item The clicked item.
  * @public
  * @param {Array<UDExListItemBase>} selectedItems The selected items.
  * @param {UDExListItemBase | UDExListGroupHeaderBase | null | undefined} item The clicked item.
@@ -76,7 +78,7 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user clicks on the submitted icon in the search.
- *
+ * @param {Array<UDExListItemBase>} selectedItems The selected items.
  * @public
  * @param {Array<UDExListItemBase>} selectedItems The selected items.
  *
@@ -92,7 +94,7 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user submitted the value in the search.
- *
+ * @param {string} value The search value.
  * @public
  * @param {string} value The search value.
  */
@@ -100,7 +102,8 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user clicks on the first icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  * @public
  * @param { PointerEvent } originalEvent The original event object
  * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
@@ -109,7 +112,8 @@ export type UDExSearchableListBaseEvents = {
 
 /**
  * Fired event when the user clicks on the second icon.
- *
+ * @param { PointerEvent } originalEvent The original event object
+ * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
  * @public
  * @param { PointerEvent } originalEvent The original event object
  * @param { UDExListItemBase | UDExListGroupHeaderBase | null | undefined } item The list item
@@ -225,7 +229,7 @@ class UDExSearchableListBase extends UI5Element {
     items!: Array<UDExListItemBase | UDExListGroupHeaderBase>;
 
   /**
-   * Defines the default accessible role for the list componnet.
+   * Defines the default accessible role for the list component.
    *
    * @default "list"
    * @public
@@ -233,6 +237,12 @@ class UDExSearchableListBase extends UI5Element {
   @property({ type: String })
     defaultAccessibleRole: string = "list";
 
+  /**
+   * Defines the filtered items for the component.
+   *
+   * @default []
+   * @private
+   */
   @property({ type: Object })
     _filteredItems!: Array<UDExProcessedItem>;
 
@@ -255,16 +265,11 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onItemPress(e:CustomEvent) {
-    const dropdownItemId: string = this.getDataTokenId(e);
+    const dropdownItemId: string = this.getDataTokenId(e.detail.item as UDExListItemBase);
     this.handleDropdownItemPress(dropdownItemId);
     this.fireSelectionChange(dropdownItemId);
   }
 
-  activateHeaderAndSetAllItems(item: UDExListGroupHeaderBase) {
-    item.activateHeader();
-    item.setAllItems(false);
-  }
-
   handleDropdownItemPress(dropdownItemId: string) {
     this.getProcessedItems().forEach(({ item, groupItems, isGroup }) => {
       if (isGroup) {
@@ -301,28 +306,31 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onHeaderPress(e:CustomEvent) {
-    this.handleGroupHeaderSelection(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
+    this.handleGroupHeaderSelection(id);
     this.syncFilteredItems();
-    this.fireSelectionChange(this.getDataTokenId(e));
+    this.fireSelectionChange(id);
   }
 
   onSelectAllHeaderPress(e:CustomEvent) {
-    this.handleGroupHeaderSelection(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
+    this.handleGroupHeaderSelection(id);
     this.syncFilteredItems();
     this.fireDecoratorEvent("select-all");
   }
 
-  handleGroupHeaderSelection(e: CustomEvent): void {
-    const headerItemId = this.getDataTokenId(e);
+  handleGroupHeaderSelection(id: string): void {
     this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === headerItemId) {
+      if (item._id === id) {
         (item as UDExListGroupHeaderBase).handleSelectionGroupState();
       }
     });
   }
 
-  onSearch(e:CustomEvent) {
-    const searchValue: string = e.detail.value;
+  onSearch(value: string) {
+    const searchValue: string = value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
     const items = this.getFlattenItemsArray(this._filteredItems);
@@ -413,15 +421,6 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
-  handleKeyDown(e: KeyboardEvent) {
-    if (isUp(e)) {
-      this.handlePreviousItemFocus(e);
-    }
-    if (isDown(e)) {
-      this.handleNextListItemFocus(e);
-    }
-  }
-
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
     const arr: Array<UDExListItemBase | UDExListGroupHeaderBase> = [];
     items.forEach(item => {
@@ -462,31 +461,6 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
-  // moves focus to next list item
-  handlePreviousItemFocus(e: KeyboardEvent) {
-    const item = e.target as HTMLElement;
-    const listItems = this.getDomListItems();
-    const currentSelectIndex = this.getCurrentIndex(item);
-    const previousSelectIndex = currentSelectIndex - 1;
-    if (currentSelectIndex > 0) {
-      e.preventDefault();
-      (listItems[previousSelectIndex] as HTMLElement).focus();
-    }
-  }
-
-  // moves focus to previous list item
-  handleNextListItemFocus(e: KeyboardEvent) {
-    const item = e.target as HTMLElement;
-    const listItems = this.getDomListItems();
-    const lastItemIndex = listItems.length - 1;
-    const currentSelectIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectIndex + 1;
-    if (nextSelectIndex <= lastItemIndex) {
-      e.preventDefault();
-      (listItems[nextSelectIndex] as HTMLElement).focus();
-    }
-  }
-
   fireFirstIconClickEvent(e: CustomEvent): void {
     this._fireIconClickEvent("first-icon-click", e);
   }
@@ -496,7 +470,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
-    const id = this.getDataTokenId(e);
+    const item = e.detail.item as UDExListItemBase;
+    const id = this.getDataTokenId(item);
     this.fireDecoratorEvent(eventName, {
       originalEvent: e.detail.originalEvent,
       item: this.getItemFromList(id),
@@ -515,47 +490,44 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
-  getCurrentIndex(item: Element): number {
+  getCurrentIndex(item: UDExListItem): number {
     return this.getDomListItems().indexOf(item);
   }
 
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
+  getList(): UDExList {
+    return this.shadowRoot!.querySelector<UDExList>("[udex-list]")!;
+  }
+
+  getSearch(): UDExSearch | HTMLInputElement {
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")! || this.shadowRoot!.querySelector<HTMLInputElement>(".udex-text-field__search")!;
   }
 
   getPopover(): Popover {
     return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
-  getDomListItems(): Element[] {
+  getDomListItems(): UDExListItem[] {
     const elementList = this.shadowRoot!.querySelector("[udex-list]") as HTMLElement;
     return elementList ? Array.from(elementList.querySelectorAll("[udex-list-item]")) : [];
   }
 
-  setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
-    items.forEach(item => {
-      item.mode = this.mode;
-      item.controlled = this.isControlled;
-    });
-  }
-
-  getDataTokenId(e:CustomEvent): string {
-    return e.detail.item.getAttribute("data-token-id") as string;
+  getDataTokenId(item: UDExListItemBase): string {
+    return item.getAttribute("data-token-id") as string;
   }
 
   getProcessedItems(): Array<UDExProcessedItem> {
     return this.items.map(item => {
-      if (item.isGroup) {
-        const groupItems = (item as UDExListGroupHeaderBase).getItems();
-        this.setItemsModeAndControl(groupItems);
+      const isGroup = item.isGroup;
+      const groupItems = isGroup ? (item as UDExListGroupHeaderBase).getItems() : [];
+
+      if (isGroup) {
+        this._setItemsModeAndControl(groupItems);
       }
+
       item.mode = this.mode;
       item.controlled = this.isControlled;
-      return {
-        item,
-        groupItems: item.isGroup ? (item as UDExListGroupHeaderBase).getItems() : [],
-        isGroup: item.isGroup,
-      };
+
+      return { item, groupItems, isGroup };
     });
   }
 
@@ -573,6 +545,13 @@ class UDExSearchableListBase extends UI5Element {
     content.style.maxHeight = this.height || "";
   }
 
+  _setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
+    items.forEach(item => {
+      item.mode = this.mode;
+      item.controlled = this.isControlled;
+    });
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
     return hasTextProperty ? this.noResultText : this.noMatchesFoundText;
@@ -591,7 +570,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get selectedItems(): Array<UDExListItemBase> {
-    return this.getSlottedItems(this.items).filter(({ selected }) => selected);
+    const selectedItems: Array<UDExListItemBase> = this.getSlottedItems(this.items).filter(({ selected }) => selected);
+    return selectedItems;
   }
 
   get modeMultiSelect(): boolean {
@@ -621,7 +601,8 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get showSearch(): boolean {
-    return this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+    const isSearchVisible = this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+    return !this.hideDropdownSearch && isSearchVisible;
   }
 
   get isSearchActive(): boolean {
@@ -651,6 +632,10 @@ class UDExSearchableListBase extends UI5Element {
 
     return "none";
   }
+
+  get hideDropdownSearch(): boolean {
+    return false;
+  }
 }
 
 export default UDExSearchableListBase;