@sapudex/web-components 0.184.0 → 0.192.2

package/src/MastheadShell.ts

@@ -15,19 +15,22 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/cart.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadItem from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
-
+import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
-import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
 
 const breakpointSizeM: number = 1279;
+const canvasContentFont = "16px '72 Brand Variable'";
+type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | undefined | null;
+type MastheadItemType = UDExMastheadItem | null | undefined;
 /**
  * @class
  *
@@ -293,6 +296,14 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     _isMobileMenuOpen!: boolean;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Defines if the close button was clicked
    *
@@ -343,11 +354,15 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
+    if (this.shouldHandleMobileView) {
+      this.handleMobileMode();
+    }
+
     if (this.isBreakpointSizeM) {
       this._isSearchOpened = false;
     }
 
-    if (this._shouldHandleResize && this.isBreakpointSizeM) {
+    if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
       return;
     }
@@ -355,6 +370,23 @@ class UDExMastheadShell extends UI5Element {
     this._shouldHandleResize = true;
   }
 
+  handleMobileMode(): void {
+    const rootHolder = this.getDomRef();
+    if (rootHolder) {
+      const rootHolderWidth = this.getRootHolderWidth(rootHolder);
+      const landingHolderWidth = this.getLandingHolderWidth();
+      const rightMenuWidth = this.getRightMenuWidth();
+      const mainMenuWidth = this.getMainMenuWidth();
+      const availableWidth = rootHolderWidth - rightMenuWidth - landingHolderWidth;
+
+      if (mainMenuWidth >= availableWidth) {
+        this.setMobileMode();
+      } else {
+        this.removeMobileMode();
+      }
+    }
+  }
+
   handleKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
     this.handleLeftArrow(e);
@@ -429,12 +461,14 @@ class UDExMastheadShell extends UI5Element {
   handleMobileCloseClick(e: CustomEvent) {
     e.preventDefault();
     this.closeMobileMenu();
+    this.fireMobileMenuCloseEvent();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
     if (isSpace(e) || isEnter(e)) {
       e.preventDefault();
       this.closeMobileMenu();
+      this.fireMobileMenuCloseEvent();
       this.mobileBtn?.focus();
     }
   }
@@ -442,7 +476,7 @@ class UDExMastheadShell extends UI5Element {
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const el = e.target as UDExMastheadItem;
-      const isMobile = window.innerWidth < 1280;
+      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
       const isDropdownSlot = el.getAttribute("slot") === "dropdown";
       if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
         this.resetSelectedItems();
@@ -459,16 +493,18 @@ class UDExMastheadShell extends UI5Element {
   }
 
   focusPreviousMenuItem(item: UDExMastheadItem): void {
+    const menuItems = this.menuItems;
+    const lastItemIndex = menuItems.length - 1;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const lastItemIndex = this.menuItems.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
-    this.menuItems[previousSelectIndex].focus();
+    menuItems[previousSelectIndex].focus();
   }
 
   focusNextMenuItem(item: UDExMastheadItem): void {
+    const menuItems = this.menuItems;
     const currentSelectedIndex = this.getCurrentIndex(item);
-    const nextSelectIndex = currentSelectedIndex + 1 > this.menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
-    this.menuItems[nextSelectIndex].focus();
+    const nextSelectIndex = currentSelectedIndex + 1 > menuItems.length - 1 ? 0 : currentSelectedIndex + 1;
+    menuItems[nextSelectIndex].focus();
   }
 
   resetSelectedItems(): void {
@@ -518,6 +554,74 @@ class UDExMastheadShell extends UI5Element {
     return buttonsArray.filter(({ selected }) => selected);
   }
 
+  getRootHolderWidth(root: HTMLElement): number {
+    const rootPadding = parseInt(window.getComputedStyle(root).getPropertyValue("padding-left")) * 2;
+    const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+    return this.getDomRef()!.clientWidth + scrollWidth - rootPadding;
+  }
+
+  getLandingHolderWidth(): number {
+    const landingHolder = this.getDomElement(".udex-masthead-shell__landing-wrap");
+    return landingHolder?.offsetWidth || 0;
+  }
+
+  getRightMenuWidth(): number {
+    const itemsIcon = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>(".udex-masthead-shell__item_icon")];
+    const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
+    const itemIconGaps = itemsIcon.length * this.getItemIconGap();
+    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(this.exploreSAP[0]) : 0;
+    const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
+    return exploreSAPWidth + itemIconWidths + rightMenuGaps;
+  }
+
+  getItemIconWidth(): number {
+    const style = window.getComputedStyle(this.profileItem);
+    const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
+    return parseInt(itemIconWidthVar);
+  }
+
+  getMainMenuWidth(): number {
+    const mainItems = this.getSlottedNodes("menuItems");
+    const gapItemVar = this.getRootVar("--udex-masthead-shell-item-gap");
+    return mainItems.reduce((accumulatedWidth, item, index) => {
+      return accumulatedWidth + this.getItemWidth(item as UDExMastheadItem) + (index && parseInt(gapItemVar));
+    }, 0);
+  }
+
+  getDomElement(selector: string): HTMLElement | undefined | null {
+    return this.shadowRoot?.querySelector(`${selector}`);
+  }
+
+  getItemWidth(item: UDExMastheadItem): number {
+    const context = this.getCanvasContext();
+    context.font = canvasContentFont;
+    return Math.ceil(context.measureText(item.innerText.trim()).width);
+  }
+
+  getCanvasContext(): CanvasRenderingContext2D {
+    const canvas = document.createElement("canvas");
+    return canvas.getContext("2d")!;
+  }
+
+  getItemIconGap(): number {
+    const gapIconItemVar = this.getRootVar("--udex-masthead-shell-item-icon-gap");
+    return parseInt(gapIconItemVar);
+  }
+
+  getExploreSapBtnGap(): number {
+    const exploreSapBtnGapVar = this.getRootVar("--udex-masthead-shell-explore-margin");
+    return this.hasExploreSAP ? parseInt(exploreSapBtnGapVar) : 0;
+  }
+
+  getRightMenuGap(): number {
+    const rightMenuGapVar = this.getRootVar("--udex-masthead-right-menu-padding");
+    return parseInt(rightMenuGapVar);
+  }
+
+  getRootVar(variableName: string): string {
+    return window.getComputedStyle(this.getDomRef()!).getPropertyValue(`${variableName}`);
+  }
+
   isNavigationItem(item: UDExMastheadItem): boolean {
     return this.menuItems.some(menuItem => menuItem === item);
   }
@@ -541,15 +645,33 @@ class UDExMastheadShell extends UI5Element {
     if (this.bodyOverflow) {
       this.removeOverflowBody();
     }
+  }
 
-    this.fireMobileMenuCloseEvent();
+  setMobileMode(): void {
+    this._isMobileMode = true;
+    this.slottedItems.forEach((item: MastheadSlottedItem) => {
+      if (item) {
+        item._isMobileMode = true;
+      }
+    });
+  }
+
+  removeMobileMode(): void {
+    this._isMobileMode = false;
+    this.slottedItems.forEach((item: MastheadSlottedItem) => {
+      item?.removeAttribute("_is-mobile-mode");
+    });
   }
 
   fireMobileMenuCloseEvent(): void {
     this.fireEvent("mobile-menu-close");
   }
 
-  get searchOpener(): UDExMastheadItem | null | undefined {
+  get slottedItems(): (MastheadSlottedItem)[] {
+    return [this.profileItem, this.cartItem, this.profileMenu, this.profileMenuLinks];
+  }
+
+  get searchOpener(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
 
@@ -561,14 +683,30 @@ class UDExMastheadShell extends UI5Element {
     return this.querySelector("[udex-masthead-mobile-menu]");
   }
 
-  get mobileBtn(): UDExMastheadItem | null | undefined {
+  get mobileBtn(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__menu-btn");
   }
 
-  get closeBtn(): UDExMastheadItem | null | undefined {
+  get closeBtn(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__close-btn");
   }
 
+  get profileItem(): UDExMastheadItem {
+    return this.getSlottedNodes<UDExMastheadItem>("profile")[0];
+  }
+
+  get cartItem(): MastheadItemType {
+    return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
+  }
+
+  get profileMenu(): UDExMastheadProfileMenu {
+    return this.querySelector("[udex-masthead-profile-menu]")!;
+  }
+
+  get profileMenuLinks(): UDExMastheadMenu | undefined | null {
+    return this.profileMenu?.shadowRoot?.querySelector("[udex-masthead-menu]");
+  }
+
   get hasProfile(): boolean {
     return !!this.profile.length;
   }
@@ -597,14 +735,14 @@ class UDExMastheadShell extends UI5Element {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }
 
-  get isRightMenuVisible(): boolean {
-    return this.showSearchByDefault || !this._isSearchOpened;
-  }
-
   get isSearchVisible(): boolean {
     return this.showSearchByDefault || this._isSearchOpened;
   }
 
+  get shouldHandleMobileView(): boolean {
+    return !this.isBreakpointSizeM && !this.showSearchByDefault;
+  }
+
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }

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/SelectBox.ts

@@ -246,6 +246,7 @@ class UDExSelectBox extends UDExSearchableListBase {
     _showTagsDropdownContent!: boolean;
 
   _trigger!: HTMLElement;
+  _triggerWrapper!: HTMLElement;
   _popover!: Popover;
   _tokenizer!: Tokenizer;
   _search!: UDExSearch;
@@ -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) {
@@ -588,6 +590,10 @@ class UDExSelectBox extends UDExSearchableListBase {
     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]")!;
   }

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

@@ -74,6 +74,7 @@ export enum Mode {
   template: TabNavigationTemplate,
   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.
@@ -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);
     });
   }
 

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>