@sapudex/web-components 2.2.0 → 2.3.0

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": "2.2.0",
+  "version": "2.3.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -690,6 +690,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -838,6 +843,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -1103,6 +1113,105 @@
             "events": []
           }
         },
+        {
+          "name": "udex-event-ribbon",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-event-ribbon</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/EventRibbon.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "event-logo",
+              "description": "Defines the text of the event logo.",
+              "value": {
+                "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\"",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "event-link",
+              "description": "Defines the link details of the event ribbon.",
+              "value": { "type": "string", "default": "\"{}\"" }
+            },
+            {
+              "name": "event-link-icon",
+              "description": "Defines the icon displayed next to the link.",
+              "value": {
+                "type": "\"add-calendar\" | \"media-play\"",
+                "default": "\"\""
+              }
+            },
+            {
+              "name": "event-text",
+              "description": "Defines the text displayed in event ribbon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "mode",
+              "description": "Defines whether event-ribbon uses dark or light theme.",
+              "value": {
+                "type": "\"dark\" | \"light\"",
+                "default": "\"light\""
+              }
+            },
+            {
+              "name": "background-color-scheme",
+              "description": "Defines the solid background color.",
+              "value": {
+                "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\"",
+                "default": "\"Blue\""
+              }
+            },
+            {
+              "name": "background-image",
+              "description": "Allows control over the background image source.",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "event-logo",
+                "description": "Defines the text of the event logo.",
+                "value": {
+                  "type": "\"sapphire\" | \"sapphire-stacked\" | \"connect\" | \"connect-stacked\" | \"teched\" | \"teched-stacked\" | \"now\""
+                }
+              },
+              {
+                "name": "event-link",
+                "description": "Defines the link details of the event ribbon.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "event-link-icon",
+                "description": "Defines the icon displayed next to the link.",
+                "value": { "type": "\"add-calendar\" | \"media-play\"" }
+              },
+              {
+                "name": "event-text",
+                "description": "Defines the text displayed in event ribbon.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "mode",
+                "description": "Defines whether event-ribbon uses dark or light theme.",
+                "value": { "type": "\"dark\" | \"light\"" }
+              },
+              {
+                "name": "background-color-scheme",
+                "description": "Defines the solid background color.",
+                "value": {
+                  "type": "\"Mango1\" | \"Mango2\" | \"Mango3\" | \"Mango4\" | \"Red1\" | \"Red2\" | \"Red3\" | \"Red4\" | \"Raspberry1\" | \"Raspberry2\" | \"Raspberry3\" | \"Raspberry4\" | \"Pink1\" | \"Pink2\" | \"Pink3\" | \"Pink4\" | ... 19 more ... | \"Grey4\""
+                }
+              },
+              {
+                "name": "background-image",
+                "description": "Allows control over the background image source.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "udex-filter-menu",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-filter-menu</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExFilterMenu.js\";</code>\n---\n\n\n### **Events:**\n - **reset-click** - Fired event when the user click on a reset button on the footer.\n- **result-click** - Fired event when the user click on a result button on the footer.\n- **select-all** - Fired event when the user click on Select All header item.\n- **before-open** - Fired before the dropdown pane is opened.\n- **after-open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **after-close** - Fired after the dropdown pane is closed.\n- **selection-change** - \n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
@@ -1213,6 +1322,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -1386,6 +1500,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -5390,6 +5509,11 @@
               "description": "Defines if the component would display a loading indicator.",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "show-search-input",
+              "description": "Defines if the search input is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "busy-delay",
               "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -5528,6 +5652,11 @@
                 "description": "Defines if the component would display a loading indicator.",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "show-search-input",
+                "description": "Defines if the search input is visible.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "busy-delay",
                 "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
@@ -7436,6 +7565,11 @@
               "description": "Defines if the text-field is active",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "icon-active",
+              "description": "Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "autocomplete",
               "description": "Defines the behaviour of autocomplete.",
@@ -7536,6 +7670,11 @@
                 "description": "Defines if the text-field is active",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "icon-active",
+                "description": "Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "autocomplete",
                 "description": "Defines the behaviour of autocomplete.",
@@ -8110,6 +8249,11 @@
               "name": "indeterminate",
               "description": "Defines whether the component has unknown number of steps.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines aria-label of the wizard, read by screen readers with the first step.",
+              "value": { "type": "string" }
             }
           ],
           "events": [],
@@ -8119,6 +8263,11 @@
                 "name": "indeterminate",
                 "description": "Defines whether the component has unknown number of steps.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines aria-label of the wizard, read by screen readers with the first step.",
+                "value": { "type": "string" }
               }
             ],
             "events": []

package/filter-coverage.js

@@ -0,0 +1,58 @@
+import fs from "fs";
+import path from "path";
+
+const coveragePath = path.resolve("coverage/coverage-summary.json");
+const outputPath = path.resolve("coverage/filtered-coverage-summary.json");
+
+const raw = JSON.parse(fs.readFileSync(coveragePath, "utf-8"));
+
+const excludedDirs = [
+  "/generated/",
+  "/types/",
+  "/data/",
+  "/utils/",
+];
+
+const filtered = {};
+Object.entries(raw).forEach(([file, stats]) => {
+  const normalizedPath = file.replace(/\\/g, "/");
+  const isExcluded = excludedDirs.some(dir => normalizedPath.includes(dir));
+
+  if (!isExcluded) {
+    filtered[file] = stats;
+  }
+});
+
+const metrics = ["lines", "statements", "functions", "branches"];
+
+const total = {
+  lines: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  statements: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  functions: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+  branches: {
+    total: 0, covered: 0, skipped: 0, pct: 100,
+  },
+};
+
+Object.values(filtered).forEach(file => {
+  metrics.forEach(metric => {
+    total[metric].total += file[metric].total;
+    total[metric].covered += file[metric].covered;
+    total[metric].skipped += file[metric].skipped;
+  });
+});
+
+metrics.forEach(metric => {
+  const { total: t, covered: c } = total[metric];
+  total[metric].pct = t === 0 ? 100 : +((100 * c) / t).toFixed(2);
+});
+
+filtered.total = total;
+
+fs.writeFileSync(outputPath, JSON.stringify(filtered, null, 2));

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -17,9 +17,13 @@
     "start": "wc-dev watch",
     "start:devserver": "wc-dev start",
     "build": "wc-dev build",
+    "swap-imports": "node swap-component-imports.js",
     "test": "wc-dev test",
-    "test:cypress": "node run-cypress.js",
+    "test:cypress": "yarn swap-imports && node run-cypress.js",
+    "test:coverage": "yarn instrument && USE_INSTRUMENTED=1 yarn test:cypress",
+    "filter:coverage": "node filter-coverage.js",
     "test:cypress-open": "cypress open --component --browser chrome",
+    "instrument": "npx nyc instrument ./dist ./instrumented",
     "create-ui5-element": "wc-create-ui5-element",
     "prepack": "npm run build"
   },
@@ -43,6 +47,7 @@
     "video.js": "8.22.0"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
     "@ui5/webcomponents-tools": "2.12.0",
     "chromedriver": "138.0.1",

package/src/AssetsVariables.ts

@@ -23,6 +23,8 @@ const variablesOverwrite = `:root {
   ${getScopedVarName("--_ui5_calendar_header_middle_button_focus_outline")}: 1px solid var(--udexColorBlue9, #0040B0);
   ${getScopedVarName("--_ui5_calendar_header_arrow_button_box_shadow")}: none;
   ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
+  ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
+  ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
 
   udex-search {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
@@ -46,6 +48,8 @@ const variablesOverwrite = `:root {
     ${getScopedVarName("--_ui5_monthpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
     ${getScopedVarName("--_ui5_year_picker_item_height")}: 36px;
     ${getScopedVarName("--_ui5_yearpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
+    ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
+    ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
   }
 `;
 

package/src/Button.ts

@@ -68,6 +68,15 @@ class UDExButton extends Button {
   /** @ts-expect-error */
     design: `${UDExButtonDesign}` = UDExButtonDesign.Primary;
 
+  /**
+   * Defines if button is in pseudo-disabled state.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _ariaDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/CountrySelector.ts

@@ -267,7 +267,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   countryList: Country[] = CountryListDB;
   selectedCountry!: Country | undefined;
-  _trigger!: HTMLElement;
+  _trigger!: UDExTextField;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
@@ -314,16 +314,18 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._trigger = this.getTrigger();
   }
 
-  getTrigger(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
+  getTrigger(): UDExTextField {
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _dropdownClose() {
     this.fireDecoratorEvent("close");
+    this._trigger.iconActive = false;
   }
 
   _dropdownOpen() {
     this.fireDecoratorEvent("open");
+    this._trigger.iconActive = true;
   }
 
   _dropdownBeforeOpen() {

package/src/DatePicker.ts

@@ -230,12 +230,13 @@ class UDExDatePicker extends DateComponentBase {
 
   _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
+    this._dropdownTrigger.iconActive = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
     this._tempValue = "";
   }
 
   _afterDropdownOpen(): void {
-    this._dropdownTrigger.active = true;
+    this._dropdownTrigger.iconActive = true;
   }
 
   _closeRespPopover(): void {

package/src/EventRibbon.ts

@@ -0,0 +1,143 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type {
+  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,
+} from "./types/EventRibbon.js";
+import { eventLogoText, UDExEventRibbonMode } from "./types/EventRibbon.js";
+import "@ui5/webcomponents-icons/add-calendar.js";
+import "@ui5/webcomponents-icons/media-play.js";
+import EventRibbonTemplate from "./EventRibbonTemplate.js";
+
+// Styles
+import EventRibbonCss from "./generated/themes/EventRibbon.css.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-event-ribbon</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/EventRibbon.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-event-ribbon",
+  renderer: jsxRenderer,
+  styles: EventRibbonCss,
+  template: EventRibbonTemplate,
+})
+
+class UDExEventRibbon extends UI5Element {
+  /**
+   * Defines the text of the event logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLogo!: `${UDExEventRibbonLogo}`;
+
+  /**
+   * Defines the link details of the event ribbon.
+   *
+   * @default "{}"
+   * @public
+   */
+  @property({ type: String })
+    eventLink: string = "{}";
+
+  /**
+   * Defines the icon displayed next to the link.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLinkIcon!: `${UDExEventRibbonIcon}`;
+
+  /**
+   * Defines the text displayed in event ribbon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventText!: string;
+
+  /**
+   * Defines whether event-ribbon uses dark or light theme.
+   *
+   * @default "light"
+   * @public
+   */
+  @property({ type: String })
+    mode: `${UDExEventRibbonMode}` = UDExEventRibbonMode.light;
+
+  /**
+   * Defines the solid background color.
+   *
+   * @default "Blue"
+   * @public
+   */
+  @property({ type: String })
+    backgroundColorScheme!: UDExEventRibbonColorSheme;
+
+  /**
+   * Allows control over the background image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    backgroundImage?: string;
+
+  _eventLink!: UDExEventRibbonLink;
+
+  onBeforeRendering(): void {
+    this._eventLink = JSON.parse(this.eventLink);
+  }
+
+  onAfterRendering(): void {
+    this.applyColorScheme();
+  }
+
+  applyColorScheme(): void {
+    const backgroundColorLowercase = this.backgroundColorScheme.toLowerCase();
+    const backgroundColor: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-default-background-color)`;
+    const backgroundColorHover: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;
+
+    this.style.setProperty("--udex-event-ribbon-background-color", backgroundColor);
+    this.style.setProperty("--udex-event-ribbon-hover-background-color", backgroundColorHover);
+
+    this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+  }
+
+  handleKeyDown(e: KeyboardEvent): void {
+    if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      this.shadowRoot!.querySelector("a")?.click();
+    }
+  }
+
+  get eventLogoAlt(): string {
+    return eventLogoText[this.eventLogo];
+  }
+
+  get eventLogoPath(): string {
+    return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
+  }
+}
+
+UDExEventRibbon.define();
+
+export default UDExEventRibbon;

package/src/EventRibbonTemplate.tsx

@@ -0,0 +1,18 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type UDExEventRibbon from "./EventRibbon.js";
+
+export default function EventRibbonTemplate(this: UDExEventRibbon) {
+  const { text, target, url } = this._eventLink;
+  return (
+    <a onKeyDown={this.handleKeyDown} role="banner" aria-label={this.eventText} class= {{ "udex-event-ribbon__container": true, "udex-event-ribbon__container-with-background-image": this.backgroundImage }} target={target} href={url} title={text}>
+      <div class="udex-event-ribbon__logo">
+        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+      </div>
+      {this.eventText && <p class="udex-event-ribbon__text">{this.eventText}</p>}
+      <div class="udex-event-ribbon__link-container">
+        {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
+        <span>{text}</span>
+      </div>
+    </a>
+  );
+}

package/src/MastheadShell.ts

@@ -387,6 +387,12 @@ class UDExMastheadShell extends UI5Element {
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
+  onBeforeRendering() {
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+  }
+
   onAfterRendering() {
     this._rootHolder = this.mastheadHolder;
     this._searchOpener = this.searchOpener;
@@ -414,7 +420,7 @@ class UDExMastheadShell extends UI5Element {
       this.handleMobileMode();
     }
 
-    if (this.isBreakpointSizeM) {
+    if (this.isAtMostBreakpointSizeM) {
       this._isSearchOpened = false;
     }
 
@@ -424,6 +430,10 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+
     this._shouldHandleResize = true;
   }
 
@@ -713,6 +723,12 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  setMobileMenuHeight(): void {
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
+    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+  }
+
   removeMobileMode(): void {
     this._isMobileMode = false;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -735,7 +751,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openSearch(): void {
     const shouldPreventOpeningSearch = this._isSearchOpened
-      || (this.isBreakpointSizeM && !this.showSearchByDefault)
+      || (this.isAtMostBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
       || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
 
@@ -758,7 +774,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   openMobileMenu(): void {
-    if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
+    if (!this._isMobileMenuOpen && this.isMobileMenuMode) {
       this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
@@ -873,7 +889,7 @@ class UDExMastheadShell extends UI5Element {
     return !!this.mobileMenu.length;
   }
 
-  get isBreakpointSizeM(): boolean {
+  get isAtMostBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtMost("M");
   }
 
@@ -881,6 +897,10 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtLeast("M");
   }
 
+  get isMobileMenuMode(): boolean {
+    return this._isMobileMode || this.isAtMostBreakpointSizeM;
+  }
+
   get isMainMenuVisible(): boolean {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }
@@ -890,7 +910,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get shouldHandleMobileView(): boolean {
-    return !this.isBreakpointSizeM && !this.showSearchByDefault;
+    return !this.isAtMostBreakpointSizeM && !this.showSearchByDefault;
   }
 
   get mainNavigationAriaLabel(): string {