@sapudex/web-components 2.42.0 → 2.44.0

package/src/MastheadCountrySelector.ts

@@ -8,9 +8,6 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import {
-  isEnd, isHome, isTabNext, isTabPrevious,
-} from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
 import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
@@ -238,6 +235,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   _mastheadShell!: UDExMastheadShell;
   _countriesListHolderClassName = "udex-masthead-country-selector__list-wrap";
   _itemClassName = "udex-masthead-country-selector__item";
+  _boundHandleActiveRegionClose!: () => void;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -245,12 +243,23 @@ class UDExMastheadCountrySelector extends UI5Element {
   constructor() {
     super();
     this._activeCountries = [];
+    this._boundHandleActiveRegionClose = this.handleActiveRegionClose.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    this.closest("[udex-masthead-item]")?.addEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
+  }
+
+  onExitDOM(): void {
+    this.closest("[udex-masthead-item]")?.removeEventListener("dropdown-closed", this._boundHandleActiveRegionClose);
   }
 
   onAfterRendering(): void {
     this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
-    this.setTabIndexForItems();
     this.handleOutsideClick();
 
     if (this.isSingleMode) {
@@ -262,9 +271,11 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  onEnterDOM(): void {
-    if (isDesktop()) {
-      this.setAttribute("desktop", "");
+  handleActiveRegionClose(): void {
+    if (!this.isSingleMode) {
+      this.handleSearchReset();
+      this._isActiveRegionOpen = false;
+      this.setActiveRegion(null);
     }
   }
 
@@ -280,26 +291,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     }
   }
 
-  handleKeyDown(e: KeyboardEvent): void {
-    const item = e.target as UDExMastheadMenuItem;
-
-    if (item.hasAttribute("is-nav-item")) {
-      const isFirstItem = item === this.items[0];
-      const isLastItem = item === this.items[this.items.length - 1];
-
-      if (isTabNext(e) && !isLastItem) {
-        e.preventDefault();
-        this.focusNextItem(item);
-      }
-      if (isTabPrevious(e) && !isFirstItem) {
-        e.preventDefault();
-        this.focusPreviousItem(item);
-      }
-      this.handleHomeKey(e);
-      this.handleEndKey(e);
-    }
-  }
-
   handleSearch(e: CustomEvent): void {
     const searchTerm = e.detail.value.toLowerCase().trim() as string;
 
@@ -348,9 +339,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
       if (e.target !== this && !this.isMobile) {
-        this.handleSearchReset();
-        this._isActiveRegionOpen = false;
-        this.setActiveRegion(null);
+        this.handleActiveRegionClose();
       }
     });
   }
@@ -392,50 +381,12 @@ class UDExMastheadCountrySelector extends UI5Element {
     prevItem.focus({ preventScroll: true });
   }
 
-  focusLastItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const lastItem = this.items[lastItemIndex];
-
-    this.items[currentIndex]._tabIndex = "-1";
-    lastItem._tabIndex = "0";
-    lastItem.scrollIntoView({ block: "end" });
-    lastItem.focus({ preventScroll: true });
-  }
-
-  focusFirstItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
+  focusFirstItem(): void {
     const firstItem = this.items[0];
-
-    this.items[currentIndex]._tabIndex = "-1";
     firstItem._tabIndex = "0";
     firstItem.focus();
   }
 
-  handleEndKey(e: KeyboardEvent): void {
-    if (isEnd(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.removeScrollableClassInCountryList();
-      }
-
-      this.focusLastItem(e);
-    }
-  }
-
-  handleHomeKey(e: KeyboardEvent): void {
-    if (isHome(e)) {
-      e.preventDefault();
-
-      if (this.isScrollableCountriesList) {
-        this.addScrollableClassToCountryList();
-      }
-
-      this.focusFirstItem(e);
-    }
-  }
-
   handleSingleRegionMode(): void {
     this.setActiveRegion(this.regionsData[0]);
     this.setActiveCountries([...this.regionsData[0].countries]);
@@ -490,17 +441,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._activeCountries = countries;
   }
 
-  setTabIndexForItems(): void {
-    this.items.forEach((item, index) => {
-      if (this._activeRegionIndex > 0 && this._shouldFocusRegionByIndex) {
-        item._tabIndex = index === this._activeRegionIndex ? "0" : "-1";
-        return;
-      }
-
-      item._tabIndex = index === 0 ? "0" : "-1";
-    });
-  }
-
   closeMenu():void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();

package/src/Search.ts

@@ -295,6 +295,15 @@ class UDExSearch extends UI5Element {
    */
   @property({ type: String })
     suggestionList!: string;
+
+  /**
+   * Sets the maximum number of characters available in the input field.
+   *
+   * @public
+   */
+  @property({ type: Number })
+    maxlength?: number;
+
   /**
    * Width of the search component
    * @private

package/src/SearchTemplate.tsx

@@ -189,6 +189,7 @@ function renderSearchInput(this: UDExSearch, placeholder: boolean = false) {
       aria-label={this.accInfo.ariaLabel}
       aria-describedby="search-description"
       {...(placeholder ? { placeholder: this.effectivePlaceholder } : {})}
+      maxlength={this.maxlength}
       value={this.value}
       onInput={this.handleSearchChange}
       onKeyDown={this.handleKeyDown}

package/src/SearchableListBase.ts

@@ -5,7 +5,7 @@ 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 { UDExListMode, UDExListStyleType } from "./types/List.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type Popover from "@ui5/webcomponents/dist/Popover.js";
 import type { UDExProcessedItem } from "./types/SearchableListBase.js";
@@ -217,6 +217,24 @@ class UDExSearchableListBase extends UI5Element {
   @property()
     mode: `${UDExListMode}` = UDExListMode.SingleSelect;
 
+  /**
+   * Defines the list style type of the dropdown items.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    type: `${UDExListStyleType}` = UDExListStyleType.None;
+
+  /**
+   * Defines the name of the UI5 Icon displayed for each item. Use when type is Icon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    itemIcon: string = "";
+
   /**
    * Slot for items.
    *
@@ -382,13 +400,20 @@ class UDExSearchableListBase extends UI5Element {
       const { isGroup, item } = preparedItem;
 
       if (isGroup) {
-        preparedItem.groupItems = this.filterItemsForLabel(preparedItem.groupItems, str);
+        const groupHeaderMatches = this.checkAndUpdateLabel(item, str);
+        const filteredChildren = this.filterItemsForLabel(preparedItem.groupItems, str);
 
-        if (hasSearchQuery && preparedItem.groupItems.length > 0) {
+        if (groupHeaderMatches) {
+          preparedItem.groupItems.forEach(child => this.checkAndUpdateLabel(child, str));
+        } else {
+          preparedItem.groupItems = filteredChildren;
+        }
+
+        if (hasSearchQuery && (groupHeaderMatches || preparedItem.groupItems.length > 0)) {
           item.collapsed = false;
         }
 
-        return preparedItem.groupItems.length > 0;
+        return !hasSearchQuery || groupHeaderMatches || preparedItem.groupItems.length > 0;
       }
 
       return this.checkAndUpdateLabel(item, str);
@@ -413,6 +438,8 @@ class UDExSearchableListBase extends UI5Element {
       item.label = this.addSearchTermTag(cleanedLabel, str);
       return true;
     }
+
+    item.label = cleanedLabel;
     return false;
   }
 
@@ -522,6 +549,43 @@ class UDExSearchableListBase extends UI5Element {
     this._fireIconClickEvent("second-icon-click", e);
   }
 
+  _dropdownScrollToTop() {
+    this.getPopoverPart(UDExPopoverPart.Content)?.scrollTo({ top: 0 });
+  }
+
+  _dropdownScrollToSelectedItem() {
+    const content = this.getPopoverPart(UDExPopoverPart.Content);
+    const activeItem = this.activeItem;
+    if (!content || !activeItem) { return; }
+    const itemRect = activeItem.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    content.scrollTop += itemRect.top - contentRect.top + itemRect.height / 2 - content.clientHeight / 2;
+  }
+
+  _handleDropdownScroll() {
+    if (this.modeMultiSelect) {
+      this._dropdownScrollToTop();
+    }
+    if (this.modeSingleSelect) {
+      this._dropdownScrollToSelectedItem();
+    }
+  }
+
+  focusFirstItem(): void {
+    const list = this.getList();
+    const items = list.getKeyboardNavigationItems();
+    if (!items.length) { return; }
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const firstItem = items[firstIndex];
+    list.setTabIndexByIndex(items, firstIndex);
+
+    if (firstItem.isGroup) {
+      list.focusHeader(firstItem);
+    } else {
+      firstItem.focus();
+    }
+  }
+
   private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
     const item = e.detail.item as UDExListItemBase;
     const id = this.getDataTokenId(item);
@@ -568,10 +632,6 @@ class UDExSearchableListBase extends UI5Element {
     return item.getAttribute("data-token-id") as string;
   }
 
-  get _validItems(): Array<UDExListItemBase | UDExListGroupHeaderBase> {
-    return this.items.filter(item => !(item instanceof HTMLElement) || "isGroup" in item);
-  }
-
   getProcessedItems(): Array<UDExProcessedItem> {
     return this._validItems.map(item => {
       const isGroup = item.isGroup;
@@ -609,6 +669,14 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  get activeItem(): UDExListItem | undefined {
+    return this.getDomListItems().find(({ selected }) => selected);
+  }
+
+  get _validItems(): Array<UDExListItemBase | UDExListGroupHeaderBase> {
+    return this.items.filter(item => !(item instanceof HTMLElement) || "isGroup" in item);
+  }
+
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== undefined && this.noResultText.length > 0;
     return hasTextProperty ? this.noResultText : this.noMatchesFoundText;

package/src/SearchableListBaseTemplate.tsx

@@ -51,7 +51,9 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           accessible-role={this.accessibleRoleForList}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
-          mode={this.mode}>
+          mode={this.mode}
+          type={this.type}
+          item-icon={this.itemIcon}>
           {this._filteredItems.map((processedItem, index) => (
             processedItem.isGroup
               ? renderGroup.call(this, processedItem, index)
@@ -99,6 +101,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
     <UDExListGroupHeader
       key={index}
       role="group"
+      {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
       non-interactive={header.nonInteractive}
@@ -149,6 +152,15 @@ function renderListItem(
       rating-count={item.ratingCount}
       rating-max={item.ratingMax}
       label={item.label}
+      image={item.image}
+      image-alt={item.imageAlt}
+      image-badge-state={item.imageBadgeState}
+      image-shape={item.imageShape}
+      image-size={item.imageSize}
+      flag={item.flag}
+      flag-position={item.flagPosition}
+      size={item.size}
+      type={item.type}
       {...(accessibleRole ? { "accessible-role": accessibleRole } : {})}
       {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
     </UDExListItem>

package/src/SelectBase.ts

@@ -452,6 +452,9 @@ class UDExSelectBase extends UDExSearchableListBase {
       return;
     }
 
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const firstItem = items[firstIndex];
+
     if (isEscAndPopoverOpened) {
       return this.closeDropdown();
     }
@@ -459,7 +462,8 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (isDownAndPopoverClosed) {
       e.preventDefault();
       this.openDropdown();
-      this.focusFirstItem(items);
+      this.focusFirstItem();
+      this._selectedOption = firstItem.label;
       if (this.showImageFlags) {
         this.handleImagePosition(items, 0);
       }
@@ -471,20 +475,8 @@ class UDExSelectBase extends UDExSearchableListBase {
       if (this.showImageFlags) {
         this.handleImagePosition(items, 0);
       }
-      return this.focusFirstItem(items);
-    }
-  }
-
-  focusFirstItem(items: UDExListItemBase[]): void {
-    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
-    const firstItem = items[firstIndex];
-    this._list.setTabIndexByIndex(items, firstIndex);
-    this._selectedOption = firstItem.label;
-
-    if (firstItem.isGroup) {
-      this._list.focusHeader(firstItem);
-    } else {
-      firstItem.focus();
+      this._selectedOption = firstItem.label;
+      return this.focusFirstItem();
     }
   }
 
@@ -509,14 +501,29 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   handleDropdownBeforeClose() {
-    this.fireDecoratorEvent("before-close");
+    this._handleDropdownScroll();
+    this.fireEventDropdownBeforeOClose();
   }
 
   dropdownBeforeOpen() {
     if (this.height) {
       this._setContentHeight();
     }
+    this.fireEventDropdownBeforeOpen();
+  }
+
+  handleDropdownOpen() {
+    if (!this.activeItem) {
+      this._dropdownScrollToTop();
+    }
+    this.fireEventDropdownOpen();
+  }
+
+  fireEventDropdownBeforeOClose() {
+    this.fireDecoratorEvent("before-close");
+  }
 
+  fireEventDropdownBeforeOpen() {
     this.fireDecoratorEvent("before-open");
   }
 

package/src/SelectBox.ts

@@ -34,6 +34,7 @@ import SelectBoxTemplate from "./SelectBoxTemplate.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 import type { UDExSelectBaseEvents } from "./SelectBase.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -248,12 +249,15 @@ class UDExSelectBox extends UDExSelectBase {
     this.fireEventDropdownClose();
   }
 
-  handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
+  async handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
     tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
-    this.tokenizer.deleteToken(tag as Token, true);
+    this.tokenizer.deleteToken(tag as Token);
     this.handleDropdownItemPress(tagId);
     this.fireDecoratorEventRemove(tagId);
+    await renderFinished();
+    this._focused = true;
+    this._search.focus();
   }
 
   handleRemoveTruncatableTag() {
@@ -265,7 +269,15 @@ class UDExSelectBox extends UDExSelectBase {
 
   handleTagClick(e: CustomEvent) {
     const tag = e.detail.tag as UDExTag;
-    this.toggleTruncatedPopover(tag);
+
+    if (!tag.isTruncatable) {
+      this._showTagsDropdownContent = false;
+      tag.selected = false;
+    }
+
+    if (tag.isTruncatable && !this._open) {
+      this.toggleTruncatedPopover(tag);
+    }
   }
 
   handleUnselectTruncatableTag() {
@@ -384,17 +396,10 @@ class UDExSelectBox extends UDExSelectBase {
   }
 
   toggleTruncatedPopover(tag: UDExTag) {
-    if (!tag.isTruncatable) {
-      this._showTagsDropdownContent = false;
-      tag.selected = false;
-    }
-
-    if (tag.isTruncatable && !this._open) {
-      this._truncatableTag = tag;
-      this._truncatableTag.selected = true;
-      this._showTagsDropdownContent = true;
-      this.openDropdown();
-    }
+    this._truncatableTag = tag;
+    this._truncatableTag.selected = true;
+    this._showTagsDropdownContent = true;
+    this.openDropdown();
   }
 
   configureTokenizer() {

package/src/SelectBoxItem.ts

@@ -6,6 +6,8 @@ import property from "@ui5/webcomponents-base/decorators/property.js";
 import { UDExAdditionalTextState } from "./types/List.js";
 import UDExButton from "./Button.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
+import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 
 /**
  * @class
@@ -29,10 +31,18 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 @customElement({
   tag: "udex-select-box-item",
   renderer: litRender,
-  dependencies: [UDExButton],
+  dependencies: [UDExButton, UDExAvatar],
 })
 
 class UDExSelectBoxItem extends UDExListItemBase {
+  /**
+   * Defines the name of the UI5 Icon displayed for each item when type is Icon.
+   *
+   * @public
+   */
+  @property({ type: String })
+    itemIcon?: string;
+
   /**
    * Defines the additionalText, displayed at the end of the list item.
    *
@@ -50,6 +60,65 @@ class UDExSelectBoxItem extends UDExListItemBase {
   @property()
     additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;
 
+  /**
+   * Defines the image, displayed at the start of the item.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    flag?: boolean;
+
+  /**
+   * Defines the position for flag image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    flagPosition?: string;
+
+  /**
+   * Allows control over the image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    image?: string;
+
+  /**
+   * Allows control over the alternative text of the image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    imageAlt?: string;
+
+  /**
+   * Defines the image badge state of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    imageBadgeState?: `${UDExStatusBadgeValueState}`;
+
+  /**
+   * Defines the shape of the image.
+   *
+   * @default "Circle"
+   * @public
+   */
+  @property()
+    imageShape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;
+
+  /**
+   * Allows control over the size of the image.
+   *
+   * @default "S"
+   * @public
+   */
+  @property()
+    imageSize: `${UDExAvatarSize}` = UDExAvatarSize.S;
+
   /**
    * Slot for first icon.
    *

package/src/SelectBoxTemplate.tsx

@@ -83,7 +83,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
                 onHeaderPress: this.handleHeaderPress,
               } as any)}
               onBeforeOpen={this.handleDropdownBeforeOpen}
-              onOpen={this.fireEventDropdownOpen}
+              onOpen={this.handleDropdownOpen}
               onBeforeClose={this.handleDropdownBeforeClose}
               onClose={this.handleDropdownClose}
               class="udex-select-box__dropdown"

package/src/Tag.ts

@@ -265,6 +265,14 @@ class UDExTag extends UI5Element {
     }
   }
 
+  _onIconMouseDown(e: MouseEvent): void {
+    const target = e.currentTarget as HTMLElement;
+
+    if (target === this.shadowRoot?.querySelector("[ui5-icon]")) {
+      this.toBeDeleted = true;
+    }
+  }
+
   _handleResize() {
     if (this.isTruncatable) {
       this.title = this.text;

package/src/TagGroup.ts

@@ -143,6 +143,16 @@ class UDExTagGroup extends UI5Element {
   @property()
     tooltipPlacement: `${Placement}` = Placement.Bottom;
 
+  /**
+   * Defines the accessible name for the "Show More" tooltip, announced by screen readers
+   * when the tooltip containing hidden tags is opened.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    tooltipAccessibleName?: string;
+
   /**
    * Determines whether there are hidden tags in the component.
    *

package/src/TagGroupTemplate.tsx

@@ -29,6 +29,7 @@ export default function TagTemplate(this: UDExTagGroup) {
             <UDExTooltip
               id={`${this._id}-tag-group-tooltip`}
               placement={this.tooltipPlacement}
+              accessible-name={this.tooltipAccessibleName}
               onKeyDown={this.handleShowMoreButtonKeydown}>
               <div
                 role="group"

package/src/TagTemplate.tsx

@@ -76,6 +76,7 @@ function tagIcon(this: UDExTag, rootClass: string, iconType: string, isIconClick
       <UI5Icon
         class={`${rootClass}__icon ${rootClass}__icon--${iconType}`}
         name={this.icon}
+        onMouseDown={this._onIconMouseDown}
         {...(isIconClickable ? { onClick: this.iconClickHandler } : {})}>
       </UI5Icon>
     </>