@sapudex/web-components 0.184.0 → 0.192.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "0.184.0",
+  "version": "0.192.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3944,7 +3944,7 @@
             {
               "name": "pages",
               "description": "Defines number of pages.",
-              "value": { "type": "number | undefined" }
+              "value": { "type": "number", "default": "0" }
             },
             {
               "name": "type",
@@ -3984,7 +3984,7 @@
               {
                 "name": "pages",
                 "description": "Defines number of pages.",
-                "value": { "type": "number | undefined" }
+                "value": { "type": "number" }
               },
               {
                 "name": "type",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.184.0",
+  "version": "0.192.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/CountrySelector.hbs

@@ -20,9 +20,9 @@
     </udex-dropdown>
     {{#if supportingText}}
         <udex-status-message
-                ?disabled="{{disabled}}"
-                supporting-text="{{supportingText}}"
-                value-state="{{valueState}}">
+            ?disabled="{{disabled}}"
+            supporting-text="{{supportingText}}"
+            value-state="{{valueState}}">
         </udex-status-message>
     {{/if}}
 </div>
@@ -34,33 +34,33 @@
         slot="trigger">
         {{#if showFlagImages}}
             <img
-                    class="udex-country-selector__image"
-                    aria-label="{{flagAriaLabel}}"
-                    style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
+                class="udex-country-selector__image"
+                aria-label="{{flagAriaLabel}}"
+                style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
         {{/if}}
-            <udex-text-field
-                label="{{effectiveAriaLabel}}"
-                id="udexTextField"
-                class="udex-country-selector__text"
-                value="{{selectedCountryName}}"
-                value-state="{{valueState}}"
-                direction="left"
-                aria-label="{{effectiveAriaLabel}}"
-                accessible-name="{{supportingText}}"
-                accessible-name-ref="{{accessibleNameRef}}"
-                aria-controls="{{ariaControls}}"
-                role="combobox"
-                aria-haspopup="true"
-                aria-expanded="{{_open}}"
-                ?required="{{required}}"
-                ?disabled="{{disabled}}"
-                ?readonly="{{readonly}}"
-                ?displayonly="{{displayonly}}"
-                @click-trigger="{{handleKeyDown}}"
-                @mousedown="{{handleInputMouseDown}}"
-                icon="{{triggerIcon}}"
-                accessible-icon-name="{{effectiveAriaLabel}}"
-                maxlength="0">
-            </udex-text-field>
+        <udex-text-field
+            label="{{effectiveAriaLabel}}"
+            id="udexTextField"
+            class="udex-country-selector__text"
+            value="{{selectedCountryName}}"
+            value-state="{{valueState}}"
+            direction="left"
+            aria-label="{{effectiveAriaLabel}}"
+            accessible-name="{{supportingText}}"
+            accessible-name-ref="{{accessibleNameRef}}"
+            aria-controls="{{ariaControls}}"
+            role="combobox"
+            aria-haspopup="true"
+            aria-expanded="{{_open}}"
+            ?required="{{required}}"
+            ?disabled="{{disabled}}"
+            ?readonly="{{readonly}}"
+            ?displayonly="{{displayonly}}"
+            @click-trigger="{{handleKeyDown}}"
+            @mousedown="{{handleInputMouseDown}}"
+            icon="{{triggerIcon}}"
+            accessible-icon-name="{{effectiveAriaLabel}}"
+            maxlength="0">
+        </udex-text-field>
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -269,10 +269,10 @@ class CountrySelector extends UDExSearchableListBase {
 
   countryList: Country[] = CountryListDB;
   selectedCountry!: Country | undefined;
+  _trigger!: HTMLElement;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
-
   _handleResizeBound: ResizeObserverCallback;
 
   static i18nBundle: I18nBundle;
@@ -316,6 +316,11 @@ class CountrySelector extends UDExSearchableListBase {
   onAfterRendering() {
     this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._trigger = this.getTrigger();
+  }
+
+  getTrigger(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
   }
 
   _dropdownBeforeOpen() {
@@ -346,7 +351,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   _handleResize() {
-    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this._trigger.offsetWidth}px`);
   }
 
   get ariaControls(): string | null | undefined {
@@ -354,19 +359,19 @@ class CountrySelector extends UDExSearchableListBase {
     return list?.getAttribute("id");
   }
 
-  get selectedCountryFlagX() {
+  get selectedCountryFlagX(): string | undefined {
     return this.selectedCountry?.flagX;
   }
 
-  get selectedCountryFlagY() {
+  get selectedCountryFlagY(): string | undefined {
     return this.selectedCountry?.flagY;
   }
 
-  get selectedCountryName() {
+  get selectedCountryName(): string | null {
     return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
   }
 
-  get flagAriaLabel():string {
+  get flagAriaLabel(): string {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
   }
 
@@ -374,12 +379,12 @@ class CountrySelector extends UDExSearchableListBase {
     return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
   }
 
-  get countrySelectorClasses() {
+  get countrySelectorClasses(): string {
     const baseClass = "udex-country-selector__dropdown";
     return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
   }
 
-  get countrySelectorTriggerClasses() {
+  get countrySelectorTriggerClasses(): string {
     const baseClass = "udex-country-selector__trigger";
     const classes = [baseClass];
 
@@ -398,15 +403,15 @@ class CountrySelector extends UDExSearchableListBase {
     return classes.join(" ");
   }
 
-  get showFlagImages() {
+  get showFlagImages(): boolean {
     return !this.hideFlagImages;
   }
 
-  get isOpenerDisabled() {
+  get isOpenerDisabled(): boolean {
     return this.readonly || this.displayonly || this.disabled;
   }
 
-  getItemTemplate(country: Country) {
+  getItemTemplate(country: Country): string | undefined {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }
 
@@ -507,7 +512,7 @@ class CountrySelector extends UDExSearchableListBase {
     }
   }
 
-  dropDownClose():void {
+  dropDownClose(): void {
     this.getDropdownPopover()?.close(false, false, true);
   }
 
@@ -532,7 +537,7 @@ class CountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }
 
-  getDropdownPopover() {
+  getDropdownPopover(): Popover {
     return this._dropdown.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 

package/src/MastheadItem.hbs

@@ -15,7 +15,7 @@
         href="{{href}}"
         aria-label="{{accessibleLabel}}"
         aria-describedby="{{ariaDescribedBy}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </a>
 {{else if isProfileBtn}}
@@ -29,7 +29,7 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </span>
     {{#if showDropdown}}
@@ -45,7 +45,7 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </button>
     {{#if showDropdown}}

package/src/MastheadItem.ts

@@ -13,9 +13,8 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { OPENS_IN_A_NEW_WINDOW, PROFILE } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExAvatar from "./Avatar.js";
-import MastheadShell from "./MastheadShell.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-
+import UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 
 // Styles
@@ -212,6 +211,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Slot for the dropdown
    *
@@ -231,20 +238,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     content?: Array<HTMLElement>;
 
   _profileAvatar!: UDExAvatar;
+  _mastheadShell!: UDExMastheadShell;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
     UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
-  onEnterDOM() {
+  onEnterDOM(): void {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
   }
 
-  onAfterRendering() {
+  onAfterRendering(): void {
     this._profileAvatar = this.profileAvatar;
+    this._mastheadShell = this.mastheadShell;
     this.handleDirection();
     if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
       this.setDropdownInsetStart();
@@ -280,13 +290,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleKeyEscapeMobile(): void {
-    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("[udex-masthead-shell]")!;
-
-    mastheadShell.closeMobileMenu();
-    mastheadShell.mobileBtn?.focus();
+    this._mastheadShell.closeMobileMenu();
+    this._mastheadShell.mobileBtn?.focus();
   }
 
-  handleNavigationItemClick(e: Event): void {
+  handleItemClick(e: Event): void {
     this.selected = this.isMobile ? true : !this.selected;
 
     this.fireEvent<ItemClickEventDetail>("item-click", {
@@ -357,6 +365,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.parseArrayFromString(this.subItems);
   }
 
+  get mastheadShell(): UDExMastheadShell {
+    return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
+  }
+
   get additionalClass(): string {
     const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
@@ -435,7 +447,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < breakpointSizeM;
+    return window.innerWidth < breakpointSizeM || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MastheadMenu.ts

@@ -99,6 +99,14 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: String, defaultValue: "[]" })
     subItems!: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);

package/src/MastheadMenuItem.hbs

@@ -11,7 +11,7 @@
         aria-describedby="{{ariaDescribedby}}"
         role="{{accessibleRoleText}}"
         href="{{url}}"
-        part="menu-item-link"
+        part="{{partAttr}}"
         target="{{target}}">
         {{#if iconStart}}
             {{>arrow-left}}
@@ -25,6 +25,7 @@
     </a>
     {{#if badge}}
         <udex-badge
+            part="badge"
             class="udex-masthead-menu-item-badge"
             type="Number"
             number-design="Blue"

package/src/MastheadMenuItem.ts

@@ -196,6 +196,10 @@ class UDExMastheadMenuItem extends UI5Element {
   get accessibleRoleText(): string | null {
     return this.accessibleRole ? this.accessibleRole : null;
   }
+
+  get partAttr(): string {
+    return this.badge ? "menu-item-link-badge" : "menu-item-link";
+  }
 }
 
 UDExMastheadMenuItem.define();

package/src/MastheadProfileMenu.ts

@@ -112,6 +112,14 @@ class UDExMastheadProfileMenu extends UI5Element {
   @property()
     logoutUrl!: string;
 
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode!: boolean;
+
   /**
    * Placeholder for message strip.
    *

package/src/MastheadShell.hbs

@@ -1,15 +1,19 @@
-<div class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
+<header class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
-        {{#if logoUrl}}
-            {{>logo}}
-        {{/if}}
+        <div class="udex-masthead-shell__landing-wrap">
+            {{#if logoUrl}}
+                {{>logo}}
+            {{/if}}
 
-        {{#if siteLabel}}
-            {{>siteLabel}}
-        {{/if}}
+            {{#if siteLabel}}
+                {{>siteLabel}}
+            {{/if}}
+        </div>
 
         {{#if isMainMenuVisible}}
-            <nav aria-label="{{mainNavigationAriaLabel}}">
+            <nav
+                class="udex-masthead-shell__nav"
+                aria-label="{{mainNavigationAriaLabel}}">
                 <ul
                     class="udex-masthead-shell__main-menu"
                     aria-label="{{mainNavigationAriaLabel}}">
@@ -39,67 +43,65 @@
         {{/if}}
     {{/if}}
 
-    {{#if isRightMenuVisible}}
-        <div class="udex-masthead-shell__right-menu">
-            {{#if hasMobileMenuButtons}}
-                <udex-masthead-item
-                    @ui5-item-click="{{handleMobileMenuClick}}"
-                    class="udex-masthead-shell__menu-btn"
-                    accessible-role="button"
-                    icon="menu2"
-                    part="menu-open-btn"
-                    accessible-name="menu">
-                    <slot slot="dropdown" name="mobileMenu"></slot>
-                </udex-masthead-item>
-            {{/if}}
-            {{#if hasExploreSAP}}
-                <div
-                    class="udex-masthead-shell__explore"
-                    @ui5-item-click="{{setSelectedItem}}">
-                    <slot name="exploreSAP"></slot>
-                </div>
-            {{/if}}
-            {{#if hasSearch}}
-                <div class="udex-masthead-shell__search-icon">
-                    <udex-masthead-item
-                        class="udex-masthead-shell__search-btn"
-                        icon="search"
-                        @click="{{handleSearchClick}}"
-                        accessible-name="search">
-                    </udex-masthead-item>
-                </div>
-            {{/if}}
-            {{#if hasCart}}
-                <div
-                    class="udex-masthead-shell__cart"
-                    @ui5-item-click="{{setSelectedItem}}"
-                    @click="{{handleCartClick}}">
-                    <slot name="cart"></slot>
-                </div>
-            {{/if}}
-            {{#if hasProfile}}
-                <div
-                    class="udex-masthead-shell__profile"
-                    @ui5-item-click="{{setSelectedItem}}"
-                    @click="{{handleProfileClick}}">
-                    <slot name="profile"></slot>
-                </div>
-            {{/if}}
-            {{#if hasMobileMenuButtons}}
+    <div class="udex-masthead-shell__right-menu">
+        {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @ui5-item-click="{{handleMobileMenuClick}}"
+                class="udex-masthead-shell__menu-btn"
+                accessible-role="button"
+                icon="menu2"
+                part="menu-open-btn"
+                accessible-name="menu">
+                <slot slot="dropdown" name="mobileMenu"></slot>
+            </udex-masthead-item>
+        {{/if}}
+        {{#if hasExploreSAP}}
+            <div
+                class="udex-masthead-shell__explore"
+                @ui5-item-click="{{setSelectedItem}}">
+                <slot name="exploreSAP"></slot>
+            </div>
+        {{/if}}
+        {{#if hasSearch}}
+            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
                 <udex-masthead-item
-                    @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
-                    @ui5-item-click="{{handleMobileCloseClick}}"
-                    class="udex-masthead-shell__close-btn"
-                    accessible-role="button"
-                    icon="decline"
-                    accessible-name="close"
-                    part="menu-close-btn"
-                    hide-active-border>
+                    class="udex-masthead-shell__search-btn"
+                    icon="search"
+                    @click="{{handleSearchClick}}"
+                    accessible-name="search">
                 </udex-masthead-item>
-            {{/if}}
-        </div>
-    {{/if}}
-</div>
+            </div>
+        {{/if}}
+        {{#if hasCart}}
+            <div
+                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCartClick}}">
+                <slot name="cart"></slot>
+            </div>
+        {{/if}}
+        {{#if hasProfile}}
+            <div
+                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleProfileClick}}">
+                <slot name="profile"></slot>
+            </div>
+        {{/if}}
+        {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
+                @ui5-item-click="{{handleMobileCloseClick}}"
+                class="udex-masthead-shell__close-btn"
+                accessible-role="button"
+                icon="decline"
+                accessible-name="close"
+                part="menu-close-btn"
+                hide-active-border>
+            </udex-masthead-item>
+        {{/if}}
+    </div>
+</header>
 
 {{#*inline "item"}}
     <li