@sapudex/web-components 0.138.0 → 0.147.0

package/src/Review.ts

@@ -94,7 +94,7 @@ class UDExReview extends UI5Element {
   _maxRatingBars: number = 5;
 
   static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExReview.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get reviewsText(): string {

package/src/ReviewItem.ts

@@ -146,7 +146,7 @@ class UDExReviewItem extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExReviewItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExReviewItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {

package/src/Search.ts

@@ -504,7 +504,7 @@ class UDExSearch extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("udex-search");
+    UDExSearch.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM(): void {
@@ -587,7 +587,7 @@ class UDExSearch extends UI5Element {
   }
 
   setSuggestedRecommendedLists(value: string): void {
-    if (this.showSuggestedPopover) {
+    if (this.showSuggestedPopover && value) {
       const parsedData: SuggestionRecommendLists = JSON.parse(value);
       const hasDataLabels = this.hasDataLabel(parsedData);
 

package/src/SearchableListBase.ts

@@ -241,9 +241,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onResetSearch() {
-    const search = this.getSearch();
-    search.value = "";
-    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+    this.resetSearch();
     this.fireEvent("reset-search");
   }
 
@@ -253,6 +251,16 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  /**
+   * Reset the search value.
+   * @public
+   */
+  resetSearch() {
+    const search = this.getSearch();
+    search.value = "";
+    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+  }
+
   filterItems(items: Array<ProcessedItem>, str: string): Array<ProcessedItem> {
     return items.filter(preparedItem => {
       const { isGroup, item } = preparedItem;
@@ -285,7 +293,7 @@ class UDExSearchableListBase extends UI5Element {
     return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
   }
 
-  isIncludes(string: string, value: string):boolean {
+  isIncludes(string: string, value: string): boolean {
     return string.toLowerCase().includes(value.toLowerCase());
   }
 
@@ -407,11 +415,11 @@ class UDExSearchableListBase extends UI5Element {
     return this.mode === ListMode.MultiSelect && isGrouping;
   }
 
-  get additionalClassName() {
+  get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
 
-  get groupClassName() {
+  get groupClassName(): string {
     const classHeader = `udex-searchable-list__header`;
     return this.showSearch ? `${classHeader} udex-searchable-list__header_no-margin` : classHeader;
   }
@@ -422,7 +430,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -31,6 +31,7 @@
                             mobile-link-title="{{this.mobileLinkTitle}}"
                             target="{{this.target}}"
                             .subItems="{{this.items}}"
+                            _nav-items-length="{{../visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}">
                         </udex-secondary-navigation-item>
@@ -41,6 +42,7 @@
                         role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
+                            _nav-items-length="{{visibleItems.length}}"
                             index="{{visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}"

package/src/SecondaryNavigation.ts

@@ -156,13 +156,13 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("udex-secondary-navigation");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {
     super();
     this._showMoreButton = true;
-    this._boundReflowItems = this.reflowItems.bind(this);
+    this._boundReflowItems = this._handleResize.bind(this);
   }
 
   onEnterDOM(): void {
@@ -177,6 +177,13 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this, this._boundReflowItems);
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   onInvalidation(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "navItems") {
       this.reflowItems();

package/src/SecondaryNavigationItem.ts

@@ -123,6 +123,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Boolean })
     isOpen!: boolean;
 
+  /**
+   * Defines the length of items in the secondary navigation.
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    _navItemsLength!: number;
+
   /**
    * Defines processed items.
    *
@@ -137,6 +145,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _subTitle!: string | undefined;
 
   onAfterRendering(): void {
+    if (this.isLastItem && this.isOpen && !this._isMobileView) {
+      this.setDropdownHorizontalAlign();
+    }
+
     if (this._shouldFocusFirstSubItem && this.isOpen) {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
@@ -306,6 +318,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHorizontalAlign(): void {
+    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
+    const { right, left } = dropdown!.getBoundingClientRect();
+
+    if (right > window.innerWidth) {
+      dropdown?.setAttribute("data-horizontal-align", "right");
+    }
+
+    if (left < 0) {
+      dropdown?.setAttribute("data-horizontal-align", "left");
+    }
+  }
+
   onFirstSubItemFocus(): void {
     this.domNavItems[0].focus();
   }
@@ -318,6 +343,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get isLastItem(): boolean {
+    return this._navItemsLength === this.index;
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
     const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
     return domNavItems ? Array.from(domNavItems) : [];

package/src/SecondaryNavigationSubItem.ts

@@ -91,7 +91,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("udex-secondary-navigation-sub-item");
+    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onItemClick(): void {

package/src/SelectBox.hbs

@@ -4,7 +4,7 @@
             <div
                 @click="{{getHandleSingleSelectOpen}}"
                 class="udex-text-field__input"
-                @ui5-iconClick="{{handleRemoveTag}}"
+                @ui5-tag-icon-click="{{handleRemoveTag}}"
                 @keydown="{{handleKeyDownTrigger}}"
                 ?open="{{_open}}"
                 tabindex="{{effectiveTabIndex}}"
@@ -38,31 +38,26 @@
                     </div>
                 {{/if}}
                 {{#if showMultiSelectedOptions}}
-                    <ui5-tokenizer
-                            part="tokenizer"
-                            show-more
-                            @ui5-selectionChange="{{handleTagPress}}"
-                            @keydown="{{handleKeydownTokenizer}}"
-                            prevent-popover-open
-                            class="{{tokenizerClass}}"
+                    <udex-tag-group
+                            class="udex-tag-group"
+                            ?displayonly="{{displayonly}}"
+                            ?readonly="{{readonly}}"
                             ?disabled="{{disabled}}"
-                            @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
+                            tooltip-placement="{{tooltipPlacement}}"
+                            @ui5-tag-click="{{handleTagPress}}"
+                            @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
+                            @ui5-tag-keydown="{{handleKeyDownTag}}"
                             ?expanded="{{tokenizerExpanded}}">
                         {{#each selectedItems}}
                             {{#unless this.isGroup}}
                                 <udex-tag
-                                        accessible-role="option"
-                                        class="udex-text-field__token"
-                                        @keydown="{{../handleKeyDownTag}}"
-                                        ?read-only="{{../isReadOrDisplayOnly}}"
-                                        data-id="{{this._id}}"
-                                        part="token-{{@index}}"
                                         text="{{this.label}}"
+                                        id="{{this._id}}"
                                         icon="decline">
                                 </udex-tag>
                             {{/unless}}
                         {{/each}}
-                    </ui5-tokenizer>
+                    </udex-tag-group>
                 {{/if}}
                 {{#if showTrigger}}
                     <udex-control-button
@@ -120,12 +115,4 @@
             {{searchableList}}
         {{/if}}
     </ui5-popover>
-    {{#if displayonly}}
-        <udex-tooltip
-            placement="{{tooltipPlacement}}">
-            {{#each overflowsTags}}
-                <ul class="udex-select-box__overflow-tags"><li>{{this.text}}</li></ul>
-            {{/each}}
-        </udex-tooltip>
-    {{/if}}
 </div>

package/src/SelectBox.ts

@@ -32,7 +32,7 @@ import UDExSelectBoxGroupHeader from "./SelectBoxGroupHeader.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExSearch from "./Search.js";
 import UDExTag from "./Tag.js";
-import UDExTooltip, { PlacementType } from "./Tooltip.js";
+import { PlacementType } from "./Tooltip.js";
 import UDExButton from "./Button.js";
 import ValueState from "./types/common.js";
 
@@ -46,6 +46,7 @@ import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import UDExControlButton from "./ControlButton.js";
+import UDExTagGroup from "./TagGroup.js";
 
 /**
  * @class
@@ -77,7 +78,6 @@ import UDExControlButton from "./ControlButton.js";
     UDExListSelectAll,
     UDExSelectBoxItem,
     UDExList,
-    UDExTooltip,
     UDExSearch,
     UDExButton,
     Tokenizer,
@@ -87,6 +87,7 @@ import UDExControlButton from "./ControlButton.js";
     UDExStatusMessage,
     UDExControlButton,
     ResponsivePopover,
+    UDExTagGroup,
   ],
 })
 
@@ -273,13 +274,16 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   onAfterRendering() {
-    this._tokenizer = this.getTokenizer();
+    this._tokenizer = this.getTagGroup()?._tokenizer;
     this._popover = this.getPopover();
     this._search = this.getSearch();
     this._trigger = this.getTrigger();
     this._tags = this.getTags();
     this.handleDirection();
     if (this._tokenizer?.tokens.length > 0) {
+      if (!this.displayonly) {
+        this._tokenizer.shadowRoot!.querySelector(".ui5-tokenizer-more-text")?.setAttribute("tabindex", "-1");
+      }
       this.handleOutsideClick();
       this.resetTagsTabIndexes();
     }
@@ -333,7 +337,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleFocusIn() {
-    if (this.disabled) {
+    if (this.isDisabled) {
       return;
     }
     this._focused = true;
@@ -364,17 +368,10 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._showTagsDropdownContent = false;
     this.openDropdown();
     this.handleUnselectTruncatableTag();
-    this.fireEvent("show-more");
   }
 
-  showMoreReadOnlyItems() {
-    const tooltip = this.shadowRoot!.querySelector<UDExTooltip>("udex-tooltip")!;
-    const moreBtn = this._tokenizer.shadowRoot!.querySelector<HTMLElement>(".ui5-tokenizer-more-text")!;
-    tooltip.onOpen(moreBtn);
-  }
-
-  handleRemoveTag(e: Event) {
-    const tag = e.target as UI5Element;
+  handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
+    tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
     this.handleDropdownItemPress(tagId);
     this.fireEventRemove(tagId);
@@ -388,7 +385,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleTagPress(e: CustomEvent) {
-    const tag = e.target as UDExTag;
+    const tag = e.detail.tag as UDExTag;
     tag.selected = false;
     this.toggleTruncatedPopover(tag);
   }
@@ -399,60 +396,57 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
-  handleKeydownTokenizer(e: KeyboardEvent) {
-    e.stopPropagation();
+  handleKeyDownTrigger(e: KeyboardEvent) {
+    if (!this.isDisabled && (isSpace(e) || isEnter(e))) {
+      e.preventDefault();
+      e.stopPropagation();
+      this._showTagsDropdownContent = false;
+      this._openedByTrigger = true;
+      this.openDropdown();
+    }
+  }
+
+  handleKeyDownTag(e: CustomEvent) {
+    if (this.isDisabled) { return; }
+    const originalEvent: KeyboardEvent = e.detail.originalEvent;
+    const tag = originalEvent.target as UDExTag;
     this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
 
-    const target = e.target as Token;
-    const activeIndex = this._tokenizer.tokens?.indexOf(target);
+    const activeIndex = this._tokenizer.tokens?.indexOf(originalEvent.target as Token);
     const tagsCount = this._tokenizer._tokensCount;
-    const shouldNavigateTags = (isLeft(e) || isRight(e) || isBackSpace(e) || isDelete(e)) && tagsCount > 0;
-    this._tokenizer.expanded = shouldNavigateTags;
+    this._tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && tagsCount > 0;
 
-    if (isLeft(e) && activeIndex !== 0) {
+    if (isLeft(originalEvent) && activeIndex !== 0) {
       this.focusTag(activeIndex - 1);
       this.scrollToTag(activeIndex - 1);
     }
 
-    if (isRight(e) && tagsCount !== activeIndex + 1) {
+    if (isRight(originalEvent) && tagsCount !== activeIndex + 1) {
       this.focusTag(activeIndex + 1);
       this.scrollToTag(activeIndex + 1);
     }
 
-    if ((isDown(e) || isUp(e))) {
+    if ((isDown(originalEvent) || isUp(originalEvent))) {
       this._openedByTrigger = false;
       this.openDropdown();
     }
-  }
-
-  handleKeyDownTrigger(e: KeyboardEvent) {
-    if (isSpace(e) || isEnter(e)) {
-      e.preventDefault();
-      e.stopPropagation();
-      this._showTagsDropdownContent = false;
-      this._openedByTrigger = true;
-      this.openDropdown();
-    }
-  }
 
-  handleKeyDownTag(e: KeyboardEvent) {
-    const tag = e.target as UDExTag;
-    if (isSpace(e) || isShift(e) || isEnter(e)) {
-      e.preventDefault();
-      e.stopPropagation();
+    if (isSpace(originalEvent) || isShift(originalEvent) || isEnter(originalEvent)) {
+      originalEvent.preventDefault();
+      originalEvent.stopPropagation();
     }
 
-    if (tag.isTruncatable && this.validTruncatableKey(e)) {
+    if (tag.isTruncatable && this.validTruncatableKey(originalEvent)) {
       this.toggleTruncatedPopover(tag);
     } else {
       this._showTagsDropdownContent = false;
     }
 
-    if (isDelete(e) || isBackSpace(e)) {
-      this.handleRemoveTag(e);
-      const target = e.target as Token;
+    if (isDelete(originalEvent) || isBackSpace(originalEvent)) {
+      this.handleRemoveTag(null, tag);
+
       const tags = this._tokenizer.tokens;
-      const deletedTagIndex = tags.indexOf(target);
+      const deletedTagIndex = tags.indexOf(originalEvent.target as Token);
       let nextTokenIndex = deletedTagIndex + 1;
       if (this._tokenizer.tokens.length !== 1) {
         if (deletedTagIndex === tags.length - 1) {
@@ -574,8 +568,12 @@ class UDExSelectBox extends UDExSearchableListBase {
     return !this.isDisabled && this.modeSingleSelect ? this.handleOpenSingleSelect() : undefined;
   }
 
-  getHandlerShowMoreItems() {
-    return this.displayonly ? this.showMoreReadOnlyItems() : this.showMoreItems();
+  getHandlerShowMoreItems(e: CustomEvent) {
+    if (!this.displayonly) {
+      e.preventDefault();
+      this.showMoreItems();
+    }
+    this.fireEvent("show-more");
   }
 
   getPopover(): ResponsivePopover {
@@ -590,12 +588,15 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector(".udex-text-field__input")!;
   }
 
-  getTokenizer(): Tokenizer {
-    return this.shadowRoot!.querySelector<Tokenizer>("[ui5-tokenizer]")!;
+  getTagGroup(): UDExTagGroup {
+    return this.shadowRoot!.querySelector<UDExTagGroup>("udex-tag-group")!;
   }
 
   getTags(): Array<UDExTag> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+    if (this.getTagGroup()) {
+      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+    }
+    return [];
   }
 
   getTagContent(tag: UDExTag): HTMLElement {
@@ -619,7 +620,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   resetTagsTabIndexes() {
-    this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = i === 0 ? this._activeTabIndex : this._inactiveTabIndex; });
+    this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = (i === 0 && !this.isDisabled) ? this._activeTabIndex : this._inactiveTabIndex; });
   }
 
   get allowTargetOverlap(): boolean {
@@ -630,10 +631,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.readonly || this.displayonly || this.disabled;
   }
 
-  get overflowsTags() {
-    return this._tokenizer?.tokens?.filter(tag => tag.overflows) || [];
-  }
-
   get truncatableTagLabel(): string {
     return this._truncatableTag.text.replace(/<\/?b>/gi, "");
   }
@@ -656,12 +653,6 @@ class UDExSelectBox extends UDExSearchableListBase {
     return this.readonly || this.displayonly;
   }
 
-  get tokenizerClass(): string {
-    return `udex-text-field__tokenizer
-    ${this.displayonly ? "udex-text-field__tokenize_displayonly" : ""}
-    ${this.readonly ? "udex-text-field__tokenize_readonly" : ""}`;
-  }
-
   get tokenizerExpanded() {
     if (this._showTagsDropdownContent && this._truncatableTag) {
       return false;

package/src/StatusBadge.ts

@@ -94,7 +94,7 @@ class UDExStatusBadge extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExStatusBadge.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExStatusBadge.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get iconFieldName(): string {

package/src/StepInput.ts

@@ -263,7 +263,7 @@ class UDExStepInput extends UI5Element {
   _keyDownHandlerBound: (e: KeyboardEvent) => void;
 
   static async onDefine() {
-    UDExStepInput.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExStepInput.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {

package/src/Tab.ts

@@ -215,7 +215,7 @@ class UDExTab extends UI5Element implements ITab {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExTab.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTab.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get isOnSelectedTab(): boolean {

package/src/TabNavigation.ts

@@ -169,7 +169,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExTabNavigation.i18nBundle = await getI18nBundle("udex-tab-navigation");
+    UDExTabNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM(): void {

package/src/Table.ts

@@ -175,7 +175,7 @@ class UDExTable extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTable.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTable.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onAfterRendering() {

package/src/TagGroup.hbs

@@ -43,6 +43,6 @@
             ?non-selectable="{{this.nonSelectable}}"
             ?data-overflows="{{this.overflows}}"
             @keydown="{{../handleTagKeyDown}}"
-            @iconClick="{{../tagIconClickHandler}}">
+            @ui5-iconClick="{{../tagIconClickHandler}}">
         ></udex-tag>
 {{/inline}}

package/src/TextArea.ts

@@ -233,7 +233,7 @@ class UDExTextArea extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTextArea.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTextArea.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   getInputDomRef() {

package/src/TextField.ts

@@ -314,7 +314,7 @@ class UDExTextField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExTextField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTextField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get valueStateTypeMappings(): Record<string, string> {
@@ -370,7 +370,6 @@ class UDExTextField extends UI5Element {
 
   handleInput = (inputEvent: InputEvent) => {
     this.value = (inputEvent.target as HTMLInputElement)?.value;
-    this.fireEvent("input");
   };
 
   handleClick = (): void => {

package/src/TruncatedText.ts

@@ -81,7 +81,7 @@ class UDExTruncatedText extends UI5Element {
   }
 
   static async onDefine() {
-    UDExTruncatedText.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTruncatedText.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get visibleText() {

package/src/data/CountryListISO3166.ts

@@ -2164,7 +2164,7 @@ export const CountryListDB = [
     "locKey": "COUNTRY_TW",
     "iso": "TW",
     "phoneFmt": " XX XXXX XXXX",
-    "countryName": "Province of China",
+    "countryName": "Taiwan (Province of China)",
     "localName": "台湾",
     "phonePrefix": "+886",
     "flagX": "-6780px",

package/src/generated/templates/CountrySelectorTemplate.lit.ts

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type CountrySelector from "../../CountrySelector.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.countrySelectorClasses)}"><${scopeTag("udex-dropdown", tags, suffix)} id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-text-field", tags, suffix)} label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?active="${this._open}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></${scopeTag("udex-text-field", tags, suffix)}></div>${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</div> ` : html`<div class="${ifDefined(this.countrySelectorClasses)}"><udex-dropdown id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<udex-text-field label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?active="${this._open}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></udex-text-field></div>${ifDefined(this.searchableList)}</udex-dropdown>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</div> `;}
+function block0 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.countrySelectorClasses)}"><${scopeTag("udex-dropdown", tags, suffix)} id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-search-keydown="${ifDefined(this.handleKeyDownSearch)}" @keydown="${this.handleKeyDownDropdown}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-text-field", tags, suffix)} label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></${scopeTag("udex-text-field", tags, suffix)}></div>${ifDefined(this.searchableList)}</${scopeTag("udex-dropdown", tags, suffix)}>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</div> ` : html`<div class="${ifDefined(this.countrySelectorClasses)}"><udex-dropdown id="dropdown" horizontal-align="Left" height="${ifDefined(this.height)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-after-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-after-close="${ifDefined(this._dropdownAfterClose)}" @click-trigger="${this.handleTriggerClick}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-search-keydown="${ifDefined(this.handleKeyDownSearch)}" @keydown="${this.handleKeyDownDropdown}" @ui5-handle-close-search="${ifDefined(this.handleCloseSearch)}"><div class="${ifDefined(this.countrySelectorTriggerClasses)}" ?disabled="${this.isOpenerDisabled}" slot="trigger">${ this.showFlagImages ? block1.call(this, context, tags, suffix) : undefined }<udex-text-field label="${ifDefined(this.effectiveAriaLabel)}" id="udexTextField" class="udex-country-selector__text" value="${ifDefined(this.selectedCountryName)}" value-state="${ifDefined(this.valueState)}" direction="left" aria-label="${ifDefined(this.effectiveAriaLabel)}" accessible-name="${ifDefined(this.supportingText)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" aria-controls="${ifDefined(this.ariaControls)}" role="combobox" aria-haspopup="true" aria-expanded="${ifDefined(this._open)}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" @click-trigger="${this.handleKeyDown}" @mousedown="${this.handleInputMouseDown}" icon="${ifDefined(this.triggerIcon)}" accessible-icon-name="${ifDefined(this.effectiveAriaLabel)}" maxlength="0"></udex-text-field></div>${ifDefined(this.searchableList)}</udex-dropdown>${ this.supportingText ? block2.call(this, context, tags, suffix) : undefined }</div> `;}
 function block1 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-country-selector__image" design="Default" aria-label="${ifDefined(this.flagAriaLabel)}" style="background-position-x: ${ifDefined(this.selectedCountryFlagX)}; background-position-y: ${ifDefined(this.selectedCountryFlagY)}">`;}
 function block2 (this: CountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}