@sapudex/web-components 0.176.0 → 0.192.2

package/src/MessageStrip.ts

@@ -10,6 +10,7 @@ import {
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
 import messageStripCss from "@ui5/webcomponents/dist/generated/themes/MessageStrip.css.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExButton from "./Button.js";
 import {
   MESSAGE_STRIP_CLOSE_BUTTON,
@@ -73,7 +74,7 @@ type textStatusType = Record<Exclude<MessageStripDesign, "Action">, string>;
   renderer: litRender,
   styles: [messageStripCss, MessageStripCss],
   template: MessageStripTemplate,
-  dependencies: [UDExButton],
+  dependencies: [UDExButton, UI5Icon],
 })
 /**
  * Fired when the close button is pressed either with a

package/src/Pagination.hbs

@@ -1,6 +1,6 @@
 {{#if pages}}
-<nav aria-label="pagination" class="{{paginationClass}}">
-    <ul class="udex-pagination__list" role="navigation" aria-label="{{paginationAccessibleName}}">      
+<nav class="{{paginationClass}}" role="navigation" aria-label="{{paginationAccessibleName}}">
+    <ul class="udex-pagination__list">
         {{#if absoluteNavigation}}
         <li class="udex-pagination__item--first udex-pagination__item">
             <udex-button

package/src/Pagination.ts

@@ -82,9 +82,10 @@ class UDExPagination extends UI5Element {
    * Defines number of pages.
    *
    * @public
+   * @default 0
    */
-  @property({ validator: Integer })
-    pages?: number;
+  @property({ validator: Integer, defaultValue: 0 })
+    pages: number;
 
   /**
    * Defines type of pagination.
@@ -143,6 +144,7 @@ class UDExPagination extends UI5Element {
 
   constructor() {
     super();
+    this.pages = 0;
     this._pages = [];
     this._visiblePages = [];
     this.currentPageIndex = 0;
@@ -348,15 +350,16 @@ class UDExPagination extends UI5Element {
     this.emitChangeEvent();
   }
 
-  setupPages(pages?: number) {
+  setupPages(pages: number) {
     if (!pages) {
       this._visiblePages = [];
       return;
     }
 
-    if (!this._pages.length) {
+    if (!this._pages.length || this._visiblePages.length < this.displayNumber) {
       this._firstPageIndex = 0;
       this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
+      this._pageFocusedManually = false;
     }
 
     this._pages = this.setupPagesData();
@@ -397,7 +400,7 @@ class UDExPagination extends UI5Element {
         this._lastPageIndex--;
       }
     } else {
-      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages!) {
+      while (this._lastPageIndex - this.currentPageIndex - 1 < this.pageOffset && this._lastPageIndex < this.pages) {
         this._firstPageIndex++;
         this._lastPageIndex++;
       }

package/src/RadioButton.ts

@@ -29,7 +29,6 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
   tag: "udex-radio-button",
   renderer: litRender,
   styles: [radioButtonCss, RadioButtonCss],
-  dependencies: [RadioButton],
 })
 class UDExRadioButton extends RadioButton {
   /**

package/src/Search.ts

@@ -976,7 +976,6 @@ class UDExSearch extends UI5Element {
         e.preventDefault();
       } else {
         this.Suggestion?.onEnter(e);
-        this.fireDropdownItemClick(this.value);
       }
       this.handleSubmitValue();
     }

package/src/SearchableListBase.ts

@@ -393,12 +393,12 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }
 
   getDomListItems(): Element[] {
-    const elementList = this.shadowRoot!.querySelector("udex-list") as HTMLElement;
-    return elementList ? Array.from(elementList.querySelectorAll("udex-list-item")) : [];
+    const elementList = this.shadowRoot!.querySelector("[udex-list]") as HTMLElement;
+    return elementList ? Array.from(elementList.querySelectorAll("[udex-list-item]")) : [];
   }
 
   setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {

package/src/SecondaryNavigation.ts

@@ -411,7 +411,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get domNavItems(): Array<UDExSecondaryNavigationItem> {
-    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("udex-secondary-navigation-item");
+    const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("[udex-secondary-navigation-item]");
     return items ? Array.from(items) : [];
   }
 

package/src/SecondaryNavigationItem.ts

@@ -378,7 +378,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
-    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
+    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("[udex-secondary-navigation-sub-item]");
     return domNavItems ? Array.from(domNavItems) : [];
   }
 

package/src/SelectBox.ts

@@ -22,7 +22,7 @@ import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -86,7 +86,7 @@ import UDExTagGroup from "./TagGroup.js";
     Icon,
     UDExStatusMessage,
     UDExControlButton,
-    ResponsivePopover,
+    Popover,
     UDExTagGroup,
   ],
 })
@@ -246,7 +246,8 @@ class UDExSelectBox extends UDExSearchableListBase {
     _showTagsDropdownContent!: boolean;
 
   _trigger!: HTMLElement;
-  _popover!: ResponsivePopover;
+  _triggerWrapper!: HTMLElement;
+  _popover!: Popover;
   _tokenizer!: Tokenizer;
   _search!: UDExSearch;
   _singleSelectedOption!: string;
@@ -278,6 +279,7 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._popover = this.getPopover();
     this._search = this.getSearch();
     this._trigger = this.getTrigger();
+    this._triggerWrapper = this.getTriggerWrapper();
     this._tags = this.getTags();
     this.handleDirection();
     if (this._tokenizer?.tokens.length > 0) {
@@ -298,7 +300,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   _handleResize() {
-    this._popover.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+    this._popover.style.setProperty("--udex-dropdown-pane-width", `${this._triggerWrapper.offsetWidth}px`);
   }
 
   handleItemPress(e:CustomEvent) {
@@ -576,25 +578,29 @@ class UDExSelectBox extends UDExSearchableListBase {
     this.fireEvent("show-more");
   }
 
-  getPopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
   }
 
   getTrigger(): HTMLElement {
     return this.shadowRoot!.querySelector(".udex-text-field__input")!;
   }
 
+  getTriggerWrapper(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-text-field__wrap")!;
+  }
+
   getTagGroup(): UDExTagGroup {
-    return this.shadowRoot!.querySelector<UDExTagGroup>("udex-tag-group")!;
+    return this.shadowRoot!.querySelector<UDExTagGroup>("[udex-tag-group]")!;
   }
 
   getTags(): Array<UDExTag> {
     if (this.getTagGroup()) {
-      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("udex-tag"));
+      return Array.from(this.getTagGroup().shadowRoot!.querySelectorAll<UDExTag>("[udex-tag]"));
     }
     return [];
   }
@@ -698,7 +704,7 @@ class UDExSelectBox extends UDExSearchableListBase {
     return {
       "ariaLabel": this.accessibleName || this.label || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
-      "ariaControls": this.shadowRoot?.querySelector("udex-list")?.getAttribute("id"),
+      "ariaControls": this.shadowRoot?.querySelector("[udex-list]")?.getAttribute("id"),
     };
   }
 

package/src/SideNavigationMobile.ts

@@ -101,7 +101,7 @@ class UDExSideNavigationMobile extends UI5Element {
 
   async _getResponsePopover() {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<UDExDropdown>(`udex-dropdown`)!;
+    return staticAreaItem!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;
   }
 
   _afterDropdownOpen() {

package/src/StepInput.ts

@@ -306,7 +306,7 @@ class UDExStepInput extends UI5Element {
   }
 
   get inputOuter() {
-    return this.shadowRoot!.querySelector("udex-text-field")!;
+    return this.shadowRoot!.querySelector("[udex-text-field]")!;
   }
 
   _onInputFocusIn() {

package/src/Tab.ts

@@ -38,7 +38,6 @@ interface ITab extends UI5Element {
   isOnSelectedTab: boolean;
   hasNotIcon: boolean;
   hasNotHref: boolean;
-  isSelected: boolean;
   selectedClass: string;
   tabNavigation: any;
   _individualSlot: string;
@@ -46,7 +45,6 @@ interface ITab extends UI5Element {
   _slotName: string;
   _selected?: boolean;
   _tabIndex: string;
-  _contentTabIndex: string;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -174,15 +172,6 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     _tabIndex!: string;
 
-  /**
-   * Defines the tabindex of the tab content.
-   *
-   * @private
-   * @default -1
-   */
-  @property({ type: String })
-    _contentTabIndex!: string;
-
   /**
    * Defines the background color of the component.
    *
@@ -222,7 +211,7 @@ class UDExTab extends UI5Element implements ITab {
     return this._realTab === this;
   }
 
-  get _effectiveSlotName() {
+  get _effectiveSlotName(): string {
     return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;
   }
 
@@ -246,35 +235,23 @@ class UDExTab extends UI5Element implements ITab {
     return !this.href;
   }
 
-  get isSelected() {
+  get effectiveSelected(): boolean {
     return this.selected || this._selected;
   }
 
   get selectedClass(): string {
-    return this.isSelected ? "udex-tab-navigation__button-tab--active" : "";
+    return this.effectiveSelected ? "udex-tab-navigation__button-tab--active" : "";
   }
 
   get classWithIconWithoutBackground(): string {
     return this.hasIcon && !this._iconWithoutBackground ? " udex-tab-navigation__button-tab--icon-tab" : "";
   }
 
-  get tabNavigation() {
-    return executeTemplate(UDExTab.headerTemplate, this);
-  }
-
-  get tabInOverflow() {
-    return executeTemplate(UDExTab.overflowTemplate, this);
-  }
-
-  get _slotName() {
+  get _slotName(): string {
     return this.isOnSelectedTab ? this._individualSlot : `disabled-${this._individualSlot}`;
   }
 
-  get effectiveSelected() {
-    return this.selected || this._selected;
-  }
-
-  get ariaLabelledBy() {
+  get ariaLabelledBy(): string {
     const labels = [];
 
     if (this.text) {
@@ -288,10 +265,22 @@ class UDExTab extends UI5Element implements ITab {
     return labels.join(" ");
   }
 
-  get accessibleNameText() {
+  get accessibleNameText(): string {
     return this.accessibleName || (this.showAttentionBadge ? `, ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : "");
   }
 
+  get linkTabIndex(): string {
+    return this.href && this.effectiveSelected ? "1" : "-1";
+  }
+
+  get tabNavigation() {
+    return executeTemplate(UDExTab.headerTemplate, this);
+  }
+
+  get tabInOverflow() {
+    return executeTemplate(UDExTab.overflowTemplate, this);
+  }
+
   static get headerTemplate() {
     return TabHeaderTemplate;
   }

package/src/TabHeader.hbs

@@ -19,7 +19,7 @@
     <a
         id="{{this._id}}"
         class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
-        tabindex="-1"
+        tabindex="{{this.linkTabIndex}}"
         role="tab"
         aria-posinset="{{this._posinset}}"
         aria-setsize="{{this._setsize}}"

package/src/TabNavigation.hbs

@@ -41,8 +41,7 @@
                 <div
                     class="udex-tab-navigation__content-item"
                     id="{{_contentId}}"
-                    aria-labelledby="{{_id}}"
-                    tabindex="{{_contentTabIndex}}">
+                    aria-labelledby="{{_id}}">
                     <slot name="{{this._slotName}}"></slot>
                 </div>
             {{else}}

package/src/TabNavigation.ts

@@ -7,7 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -24,8 +24,8 @@ import {
   isTabNext,
   isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Tab, { ITab } from "./Tab.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 
@@ -72,8 +72,9 @@ export enum Mode {
   renderer: litRender,
   styles: [TabNavigationCss, TabInOverflowCss],
   template: TabNavigationTemplate,
-  dependencies: [ResponsivePopover],
+  dependencies: [Popover, Icon],
 })
+
 /**
  * Fires when the tab was clicked.
  *
@@ -86,6 +87,7 @@ export enum Mode {
     currentPage: { type: Number },
   },
 })
+
 class UDExTabNavigation extends UI5Element {
   /**
    * Defines the size of the "More" button.
@@ -157,9 +159,9 @@ class UDExTabNavigation extends UI5Element {
 
   static i18nBundle: any;
   _handleResizeBound: () => void;
-  _responsivePopover?: ResponsivePopover;
+  _popover?: Popover;
   _visibleTabs?: Array<ITab | HTMLElement>;
-  _isExpanded!: boolean;
+  _isExpanded: boolean = false;
   _maxTitleLength: number = 25;
   _maxTitleLengthInSecondLines: number = this._maxTitleLength * 2;
 
@@ -228,7 +230,6 @@ class UDExTabNavigation extends UI5Element {
       tab._contentId = this.getContentId(index);
       tab._realTab = this._selectedTab;
       tab._width = this.tabWidth;
-      tab._contentTabIndex = this.getContentTabIndex(tab);
     });
   }
 
@@ -270,7 +271,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   initOutsideClick() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       this.handleOutsideClick();
     }
   }
@@ -569,8 +570,9 @@ class UDExTabNavigation extends UI5Element {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header`)!;
   }
 
-  handleMoreButton() {
-    this._responsivePopover = this.getResponsePopover();
+  handleMoreButton(e: Event) {
+    e.stopPropagation();
+    this._popover = this.getResponsePopover();
     this.updateOverflowItems();
     this.handleTogglePopover();
   }
@@ -583,7 +585,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleTogglePopover() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       this.handleClosePopover();
     } else {
       this.handleOpenPopover();
@@ -591,16 +593,16 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleClosePopover() {
-    if (this._responsivePopover?.opened) {
-      this._responsivePopover.close();
+    if (this._popover?.opened) {
+      this._popover.close();
       this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
       this._isExpanded = false;
     }
   }
 
   handleOpenPopover() {
-    if (!this._responsivePopover?.opened) {
-      this._responsivePopover!.showAt(this.getMoreButton());
+    if (!this._popover?.opened) {
+      this._popover!.showAt(this.getMoreButton());
       this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
       this._isExpanded = true;
     }
@@ -690,7 +692,7 @@ class UDExTabNavigation extends UI5Element {
   handleEnterKeyMoreButton(e: KeyboardEvent) {
     if (isEnter(e)) {
       e.preventDefault();
-      this._responsivePopover = this.getResponsePopover();
+      this._popover = this.getResponsePopover();
       this.updateOverflowItems();
       this.handleOpenPopover();
     }
@@ -698,14 +700,14 @@ class UDExTabNavigation extends UI5Element {
 
   handleDownMoreButton(e: KeyboardEvent) {
     if (isDown(e) || isEnter(e)) {
-      this._responsivePopover = this.getResponsePopover();
+      this._popover = this.getResponsePopover();
       this.handleOpenPopover();
       this.updateOverflowItems();
     }
   }
 
   onFocusFirstItemPopover() {
-    if (this._responsivePopover?.opened) {
+    if (this._popover?.opened) {
       const popoverItems = this.getItemsFromPopover();
       const firstPopoverItem = popoverItems[0];
       firstPopoverItem.setAttribute("tabindex", "0");
@@ -811,8 +813,8 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  getResponsePopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getResponsePopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   get moreButtonText(): string {

package/src/Table.ts

@@ -301,7 +301,7 @@ class UDExTable extends UI5Element {
 
   getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {
     const focusedElement = document.activeElement as HTMLElement;
-    return focusedElement.closest("udex-table-row, udex-table-header-row, udex-table-group-row")!;
+    return focusedElement.closest("[udex-table-row], [udex-table-header-row], [udex-table-group-row]")!;
   }
 
   getKeyboardNavigationItems(): Array<KeyBoardItem> {
@@ -347,7 +347,7 @@ class UDExTable extends UI5Element {
 
   getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {
     return el.cells.flatMap(cell => Array.from(
-      cell.querySelectorAll("button, a, udex-button, udex-link, udex-rating-indicator"),
+      cell.querySelectorAll("button, a, [udex-button], [udex-link], [udex-rating-indicator]"),
     ));
   }
 

package/src/TextArea.hbs

@@ -1,16 +1,17 @@
 <div class="udex-textarea">
   <div class="udex-textarea__wrapper">
       {{#if label}}
-        <label
-          class="{{labelClasses}}"
-          for="textarea"
-          part="label"
-        >
-          {{label}}
-          {{#if required}}
-            *
-          {{/if}}
-        </label>
+          <label
+              class="{{labelClasses}}"
+              for="textarea"
+              part="label">
+              {{label}}
+              {{#if required}}
+                  *
+              {{/if}}
+          </label>
+      {{else}}
+          <label for="textarea" class="hidden-label">{{textHiddenLabel}}</label>
       {{/if}}
       <textarea
         id="textarea"
@@ -32,23 +33,22 @@
         @focus="{{handleFocus}}"
         @click="{{handleClick}}"
         @blur="{{handleBlur}}"
-        @change="{{handleChange}}"
-      >
+        @change="{{handleChange}}">
      </textarea>
   </div>
   {{#if _supportingText}}
     <udex-status-message 
-    supporting-text-alignment="Right"
-    ?disabled="{{disabled}}" 
-    supporting-text="{{_supportingText}}" 
-    value-state="{{fieldState}}">
+        supporting-text-alignment="Right"
+        ?disabled="{{disabled}}"
+        supporting-text="{{_supportingText}}"
+        value-state="{{fieldState}}">
     </udex-status-message>
-		<span id="{{_id}}-supportingTextDesc" class="hidden-text"> {{_supportingText}} </span>
+    <span id="{{_id}}-supportingTextDesc" class="hidden-text">{{_supportingText}}</span>
   {{/if}}
   {{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="hidden-text"> {{ariaValueStateHiddenText}} </span>
-	{{/if}}
+    <span id="{{_id}}-valueStateDesc" class="hidden-text">{{ariaValueStateHiddenText}}</span>
+  {{/if}}
   {{#if readonly}}
-		<span id="{{_id}}-readonlyDesc" class="hidden-text"> {{readOnlyText}} </span>
-	{{/if}}
+    <span id="{{_id}}-readonlyDesc" class="hidden-text">{{readOnlyText}}</span>
+  {{/if}}
 </div>