@sapudex/web-components 0.147.0 → 0.173.0

package/src/Pagination.ts

@@ -16,6 +16,7 @@ import {
   LAST_PAGE,
   PREVIOUS_PAGE,
   NEXT_PAGE,
+  CURRENT_PAGE,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -128,18 +129,26 @@ class UDExPagination extends UI5Element {
     _direction?: string;
 
   _pages: Page[];
+  _visiblePages: Page[];
 
   _previousPageElement?: HTMLElement;
 
   _mobileDisplayNumber: number;
+  _desktopDisplayNumber: number;
+  _firstPageIndex!: number;
+  _lastPageIndex!: number;
+  _pageFocusedManually!: boolean;
 
   static i18nBundle: I18nBundle;
 
   constructor() {
     super();
     this._pages = [];
+    this._visiblePages = [];
     this.currentPageIndex = 0;
     this._mobileDisplayNumber = 5;
+    this._desktopDisplayNumber = 10;
+    this._pageFocusedManually = false;
   }
 
   onEnterDOM() {
@@ -148,6 +157,10 @@ class UDExPagination extends UI5Element {
     }
   }
 
+  onBeforeRendering(): void {
+    this.setupPages(this.pages);
+  }
+
   get nextButtonDisbled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
@@ -189,6 +202,13 @@ class UDExPagination extends UI5Element {
     return ` ${UDExPagination.i18nBundle.getText(OF)} `;
   }
 
+  get paginationAccessibleName(): string {
+    if (this.typeShort) {
+      return this.paginationShortAccessibleName;
+    }
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}`;
+  }
+
   get pageAccessibleName(): string {
     return UDExPagination.i18nBundle.getText(PAGINATION_PAGE);
   }
@@ -213,7 +233,7 @@ class UDExPagination extends UI5Element {
 
   get previousPageAccessibleName(): string {
     if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(PREVIOUS_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -222,7 +242,7 @@ class UDExPagination extends UI5Element {
 
   get nextPageAccessibleName(): string {
     if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
@@ -230,7 +250,7 @@ class UDExPagination extends UI5Element {
   }
 
   get pagination(): Page[] {
-    return this.setupPages(this.pages);
+    return this._visiblePages;
   }
 
   get paginationClass(): string {
@@ -244,6 +264,18 @@ class UDExPagination extends UI5Element {
     return `${classes} udex-pagination--${this.display} udex-pagination--${this.type}`;
   }
 
+  get displayNumber(): number {
+    const lastIndex = this.display === DisplayType.mobile ? this._mobileDisplayNumber : this._desktopDisplayNumber;
+    return lastIndex;
+  }
+
+  get pageOffset(): number {
+    if (this.display === DisplayType.mobile) {
+      return Math.floor(this._mobileDisplayNumber / 2);
+    }
+    return this._desktopDisplayNumber / 2 - 1;
+  }
+
   static async onDefine() {
     UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
   }
@@ -256,9 +288,8 @@ class UDExPagination extends UI5Element {
       return;
     }
 
-    element.setAttribute("aria-current", "page");
     this.currentPageIndex = pageIndex;
-    this._previousPageElement?.removeAttribute("aria-current");
+    this._pageFocusedManually = true;
     this._previousPageElement = element;
   }
 
@@ -268,7 +299,11 @@ class UDExPagination extends UI5Element {
     if (this.pages && currentPage >= this.pages - 1) {
       return;
     }
+
     this.currentPageIndex = currentPage + 1;
+    this._pageFocusedManually = false;
+    this._pages = this.setupPagesData();
+
     this.emitChangeEvent();
   }
 
@@ -279,6 +314,9 @@ class UDExPagination extends UI5Element {
       return;
     }
     this.currentPageIndex -= 1;
+    this._pageFocusedManually = false;
+    this._pages = this.setupPagesData();
+
     this.emitChangeEvent();
   }
 
@@ -288,6 +326,10 @@ class UDExPagination extends UI5Element {
     if (currentPage === 0) {
       return;
     }
+
+    this._firstPageIndex = 0;
+    this._lastPageIndex = this.displayNumber;
+
     this.currentPageIndex = 0;
     this.emitChangeEvent();
   }
@@ -298,76 +340,79 @@ class UDExPagination extends UI5Element {
     if (!this.pages || currentPage >= this.pages - 1) {
       return;
     }
-    this.currentPageIndex = this.pages - 1;
+
+    this._firstPageIndex = this.pages - this.displayNumber;
+    this._lastPageIndex = this.pages;
+
+    this.currentPageIndex = this._lastPageIndex - 1;
     this.emitChangeEvent();
   }
 
-  setupMobilePages(pages: number): Page[] {
-    const pagesCollection = [];
-    let startIndex;
-    let endIndex;
-    const offset = Math.floor(this._mobileDisplayNumber / 2);
-
-    if (pages <= this._mobileDisplayNumber) {
-      startIndex = 0;
-      endIndex = pages;
-    } else {
-      const displayStartNumber = this.currentPageIndex < offset ? 0 : this.currentPageIndex - offset;
+  setupPages(pages?: number) {
+    if (!pages) {
+      this._visiblePages = [];
+      return;
+    }
 
-      startIndex = this.currentPageIndex <= pages - offset - 1
-        ? displayStartNumber
-        : pages - this._mobileDisplayNumber;
+    if (!this._pages.length) {
+      this._firstPageIndex = 0;
+      this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
+    }
 
-      const displayEndNumber = this.currentPageIndex < offset
-        ? this._mobileDisplayNumber
-        : this.currentPageIndex + this._mobileDisplayNumber - offset;
+    this._pages = this.setupPagesData();
 
-      endIndex = this.currentPageIndex <= pages - offset ? displayEndNumber : pages;
+    if (this.currentPageIndex > this._lastPageIndex || this._lastPageIndex - this.currentPageIndex <= this.pageOffset) {
+      this._visiblePages = this.shiftVisiblePages();
     }
 
-    for (let index = startIndex; index < endIndex && index < pages; index++) {
-      const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
-      pagesCollection.push({
-        index,
-        value: index + 1,
-        active: isCurrent,
-        accessibleName,
-      });
+    if (this.currentPageIndex < this._firstPageIndex || this.currentPageIndex - this._firstPageIndex <= this.pageOffset) {
+      this._visiblePages = this.shiftVisiblePages(true);
     }
+  }
 
-    return pagesCollection;
-  }
-
-  setupDesktopPages(pages: number): Page[] {
-    const pagesCollection = [];
-    for (let index = 0; index < pages; index++) {
-      const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
-      pagesCollection.push({
-        index,
-        value: index + 1,
-        active: isCurrent,
-        accessibleName,
-      });
+  setupPagesData(): Page[] {
+    const updatedPages = [];
+    if (this.pages) {
+      this._previousPageElement?.removeAttribute("aria-current");
+      for (let index = 0; index < this.pages; index++) {
+        const isCurrent = index === this.currentPageIndex;
+        const ariaCurrent = "page";
+        const accessibleName = this.getPageAccessibleName(index);
+        updatedPages.push({
+          index,
+          value: index + 1,
+          active: isCurrent,
+          accessibleName,
+          ...(isCurrent && { ariaCurrent }),
+        });
+      }
     }
-
-    return pagesCollection;
+    return updatedPages;
   }
 
-  setupPages(pages?: number): Page[] {
-    if (!pages) {
-      return [];
-    }
-    if (this.display === DisplayType.mobile) {
-      return this.setupMobilePages(pages);
+  shiftVisiblePages(shiftBackwards: boolean = false): Page[] {
+    if (shiftBackwards) {
+      while (this.currentPageIndex - this._firstPageIndex < this.pageOffset && this._firstPageIndex > 0) {
+        this._firstPageIndex--;
+        this._lastPageIndex--;
+      }
+    } else {
+      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages!) {
+        this._firstPageIndex++;
+        this._lastPageIndex++;
+      }
     }
+    return this._pages.slice(this._firstPageIndex, this._lastPageIndex);
+  }
 
-    return this.setupDesktopPages(pages);
+  getPageAccessibleName(index: number): string {
+    const isCurrent = index === this.currentPageIndex;
+
+    const accessibleName = isCurrent ? `
+    ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
+    ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
+
+    return accessibleName;
   }
 
   onPageClick(e: Event) {
@@ -387,6 +432,11 @@ class UDExPagination extends UI5Element {
   }
 
   onAfterRendering() {
+    if (this._pageFocusedManually) {
+      const activePageItem = this.shadowRoot?.querySelector<HTMLElement>(".udex-pagination__page[active]");
+      activePageItem?.focus();
+    }
+
     if (this.type === PaginationType.full) {
       return;
     }

package/src/PhoneNumberField.hbs

@@ -65,10 +65,10 @@
                     {{selectedCountryName}} {{selectedPhonePrefix}}
                 </div>
                 <div class="udex-phone-number-field__button-content">
-                    <div
+                    <img
                         class="udex-phone-number-field__flag"
-                        style="{{selectedFlagBackgroundPosition}}"
-                    ></div>
+                        aria-label={{selectedCountryName}}
+                        style="{{selectedFlagBackgroundPosition}}">
                 </div>
             </udex-button>
         {{/unless}}

package/src/PhoneNumberField.ts

@@ -287,6 +287,7 @@ class UDExPhoneNumberField extends UI5Element {
 
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
+  _dropdownList!: UDExList;
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
@@ -318,6 +319,10 @@ class UDExPhoneNumberField extends UI5Element {
 
   onAfterRendering() {
     this._dropdown = this.getDropdown();
+    this._dropdownList = this.getDropdownList();
+    if (this.countryIso) {
+      this._dropdownList.focusSelectedItem();
+    }
   }
 
   onClick(): void {
@@ -409,7 +414,6 @@ class UDExPhoneNumberField extends UI5Element {
     if (isIncorrectNumberEntered) {
       this.value = "";
     }
-
     this.fireEvent("change");
   }
 
@@ -417,11 +421,8 @@ class UDExPhoneNumberField extends UI5Element {
     const dropdown = this.getDropdown();
 
     dropdown.onClose();
-
     this.selectedIso = e.detail.item.id;
-    this.value = this.selectedPhonePrefix;
-    this.phoneFormat = this.value + this.selectedPlaceholder;
-    this.maxlength = this.phoneFormat.length;
+    this.applyPhoneMask();
     this.getInputField().focus();
   }
 
@@ -429,6 +430,7 @@ class UDExPhoneNumberField extends UI5Element {
     this.buttonIcon = OpenButtonIcon.iconUp;
     this._dropdownExpanded = true;
   }
+
   handleDropdownClose() {
     this.buttonIcon = OpenButtonIcon.iconDown;
     this._dropdownExpanded = false;
@@ -490,13 +492,19 @@ class UDExPhoneNumberField extends UI5Element {
       ? this.selectedPhonePrefix + this.selectedPlaceholder : initialPlaceholder;
   }
 
-  getDropdown() {
+  getDropdownList(): UDExList {
+    return this.shadowRoot!.querySelector<UDExList>(
+      "[udex-list]",
+    )!;
+  }
+
+  getDropdown(): UDExDropdown {
     return this.shadowRoot!.querySelector<UDExDropdown>(
       "[udex-dropdown]",
     )!;
   }
 
-  getButton() {
+  getButton(): UDExButton {
     return this.shadowRoot!.querySelector<UDExButton>(
       "[udex-button]",
     )!;
@@ -528,7 +536,7 @@ class UDExPhoneNumberField extends UI5Element {
 
   get selectedCountryName(): string {
     if (!this.countryIso) {
-      return "";
+      return "None";
     }
 
     return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.countryName

package/src/RangeSlider.ts

@@ -29,7 +29,6 @@ import SliderCss from "./generated/themes/Slider.css.js";
   tag: "udex-range-slider",
   renderer: litRender,
   styles: [SliderBase.styles, rangeSliderCss, SliderCss],
-  dependencies: [],
 })
 class UDExRangeSlider extends RangeSlider {
   onEnterDOM(): void {

package/src/RatingBar.hbs

@@ -5,7 +5,7 @@
         <div class="udex-rating-bar__progress"></div>
     </div>
     {{#if showPercentage}}
-        <div role="note" class="udex-rating-bar__percentage">{{validatedPercentage}}</div>
+        <div role="note" class="udex-rating-bar__percentage" aria-label="{{validatedPercentage}}">{{validatedPercentage}}</div>
     {{/if}}
     <span id="ratingDescription" class="hidden-text">{{_ratingDescription}}</span>
 </div>

package/src/ReviewItem.hbs

@@ -10,7 +10,7 @@
         <div class="udex-review-item__text-wrapper">
             <p class="udex-review-item__text" id="udex-review-item__text">{{_completeText}}</p>
             {{#if _showTextExpander}}
-                <udex-button id="reviewExpander" class="udex-review-item__text-expander" design="Invisible" size="Small" @click="{{_toggleText}}">{{buttonText}}</udex-button>
+                <udex-button id="reviewExpander" class="udex-review-item__text-expander" design="Invisible" size="Large" @click="{{_toggleText}}">{{buttonText}}</udex-button>
             {{/if}}
         </div>
         {{#if author}}

package/src/Search.hbs

@@ -1,13 +1,14 @@
 <div class="udex-search__root {{classWithPrefix}}">
     {{#if isShowSearchHomePrefix}}
         <div class="udex-search__prefix">
-            <button type="button"
-                    role="combobox"
-                    aria-expanded="{{_prefixDropdownExpanded}}"
-                    aria-haspopup="true"
-                    aria-controls="udex-search-prefix"
-                    class="udex-search__prefix-button"
-                    @click="{{handleDropdownClick}}">
+            <button
+                type="button"
+                role="combobox"
+                aria-expanded="{{_prefixDropdownExpanded}}"
+                aria-haspopup="true"
+                aria-controls="udex-search-prefix"
+                class="udex-search__prefix-button"
+                @click="{{handleDropdownClick}}">
                 <span class="udex-search__prefix-label">{{labelPrefix}}</span>
                 <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon>
             </button>
@@ -16,7 +17,7 @@
                 class="udex-search__prefix-popover"
                 hide-arrow
                 placement-type="Bottom"
-	              horizontal-align="Left"
+                horizontal-align="Left"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
@@ -75,8 +76,7 @@
                     design="Default"
                     tooltip="{{tooltipInfo.tooltipResetButton}}"
                     @click="{{onReset}}"
-                    @keydown="{{handleKeyDownReset}}"
-                >
+                    @keydown="{{handleKeyDownReset}}">
                     <ui5-icon
                         class="udex-search__button-icon"
                         accessible-name="{{accInfo.accessibleNameResetIcon}}"

package/src/Search.ts

@@ -728,22 +728,20 @@ class UDExSearch extends UI5Element {
       dropdown.style.width = `${button.offsetWidth + 1}px`;
       button.classList.add("udex-search__prefix-button--active");
       wrapper.classList.add("udex-search__prefix--show-popover");
-      this.handleItemClick();
+      this.dropdownPrefix[0].addEventListener("item-press", this.handleItemClick);
     }
   }
 
-  private handleItemClick() {
-    this.dropdownPrefix[0].addEventListener("item-press", (e: any) => {
-      const selectedItemPrefix = e.detail.item as ListItemBase;
-      this.labelPrefix = selectedItemPrefix.innerText;
-      this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
-      this.onClosePrefixPopover();
-    });
-  }
+  handleItemClick = (e: Event) => {
+    const selectedItemPrefix = (e as CustomEvent).detail.item as ListItemBase;
+    this.labelPrefix = selectedItemPrefix.innerText;
+    this.fireEvent("prefix-item-click", { item: selectedItemPrefix });
+    this.onClosePrefixPopover();
+  };
 
   onClosePrefixPopover() {
     const dropdown = this.getPrefixPopover();
-
+    this.dropdownPrefix[0].removeEventListener("item-press", this.handleItemClick);
     dropdown.close();
     this._prefixDropdownExpanded = false;
     this.handleAfterClosePrefixPopover();
@@ -755,7 +753,6 @@ class UDExSearch extends UI5Element {
 
     wrapper.classList.remove("udex-search__prefix--show-popover");
     button.classList.remove("udex-search__prefix-button--active");
-    this.dropdownPrefix[0].removeEventListener("item-press", () => {});
   }
 
   handleInputClick(): void {
@@ -767,7 +764,7 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  onSubmit(e: MouseEvent): void {
+  onSubmit(e: Event): void {
     e.stopPropagation();
     this.handleSubmitValue();
   }
@@ -810,6 +807,10 @@ class UDExSearch extends UI5Element {
     }
   }
 
+  handleKeyPressSuggestionList(e: KeyboardEvent): void {
+    this.Suggestion?.handleKeyPress(e);
+  }
+
   handleClassToRoot() {
     const hasAdditionRootClass = !this.shadowRoot?.querySelector(".udex-search__root")?.classList.contains("udex-search__root--show-popover");
 
@@ -891,7 +892,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("mousedown", (e: MouseEvent) => {
+    document.addEventListener("mousedown", (e: Event) => {
       const popover = (e.target as HTMLElement).shadowRoot?.querySelector("[ui5-popover]");
 
       if (e.target !== this && popover !== this.Suggestion?.popover) {
@@ -1011,7 +1012,7 @@ class UDExSearch extends UI5Element {
     this.focusClasses = "";
   }
 
-  onReset(e: MouseEvent): void {
+  onReset(e: Event): void {
     e.stopPropagation();
     this.handleReset();
   }
@@ -1022,7 +1023,7 @@ class UDExSearch extends UI5Element {
     this.onClosePopover();
     this.fireEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
-    this.focus();
+    this.getSearchInput()?.focus();
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
@@ -1033,7 +1034,6 @@ class UDExSearch extends UI5Element {
       e.preventDefault();
       e.stopPropagation();
       this.handleReset();
-      this.getSearchInput()?.focus();
     }
   }
 
@@ -1041,7 +1041,7 @@ class UDExSearch extends UI5Element {
     return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
-  onVoice(e: MouseEvent): void {
+  onVoice(e: Event): void {
     e.stopPropagation();
     if (this.speechRecognition) {
       this.onSpeechLaunch();

package/src/SearchSuggestions.hbs

@@ -8,6 +8,7 @@
     id="{{getSuggestionsPopoverId}}"
     aria-orientation="vertical"
     accessible-role="Dialog"
+    @keydown="{{handleKeyPressSuggestionList}}"
     accessible-name="{{suggestionsAccessibleName}}">
     {{#if showNoResultMessage}}
         <span class="udex-search-suggestions__message">{{noResultMessage}}</span>

package/src/SearchableListBase.hbs

@@ -14,6 +14,8 @@
 {{else}}
     <udex-list
         id="udex-list"
+        role="{{roleForGroupList}}"
+        accessible-role="{{accessibleRoleForList}}"
         class="udex-filter-menu__list"
         ?controlled="{{isControlled}}"
         mode="{{mode}}">
@@ -45,7 +47,7 @@
                     </udex-list-select-all>
                 {{else}}
                     <udex-list-group-header
-                        role="list"
+                        role="group"
                         _additional-class-name="udex-searchable-list__header"
                         class="{{../groupClassName}}"
                         ?non-interactive="{{this.item.nonInteractive}}"