@sapudex/web-components 2.4.2 → 2.5.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.4.2",
+  "version": "2.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3695,7 +3695,7 @@
         },
         {
           "name": "udex-masthead-shell",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **search-close-click** - Fired event when the user clicks the search close button.\n- **search-opened** - Fired event when the search panel is opened.\n- **search-closed** - Fired event when the search panel is closed.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **support-click** - Fired event when the user clicks the support button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar\n- **support** - Slot for support",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-masthead-shell</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadShell.js\";</code>\n---\n\n\n### **Events:**\n - **mobile-menu-open** - Fired event when the user clicks the mobile menu button opener.\n- **mobile-menu-close** - Fired event when the user clicks the mobile menu button closer.\n- **search-click** - Fired event when the user clicks the search button trigger.\n- **search-close-click** - Fired event when the user clicks the search close button.\n- **search-opened** - Fired event when the search panel is opened.\n- **search-closed** - Fired event when the search panel is closed.\n- **cart-click** - Fired event when the user clicks the cart button trigger.\n- **support-click** - Fired event when the user clicks the support button trigger.\n- **profile-click** - Fired event when the user clicks the profile button trigger.\n- **country-selector-click** - Fired event when the user clicks the country selector button trigger.\n- **logo-click** - Fired event when the user clicks the logo.\n- **site-label-click** - Fired event when the user clicks the site label.\n- **co-brand-click** - Fired event when the user clicks the co-brand.\n\n### **Methods:**\n - **closeSearch(): _void_** - Close the search panel.\n- **openSearch(): _void_** - Open the search panel.\n- **openMobileMenu(): _void_** - Open the mobile menu panel.\n- **closeMobileMenu(): _void_** - Close the mobile menu panel.\n\n### **Slots:**\n - **countrySelector** - Slot for country selector item.\n- **mobileMenu** - Slot for mobile menu\n- **default** - Slot for main menu items.\n- **search** - Slot for search component - will be visible on search icon click.\nNote: search component should be hidden by default.\nNote: search icon won't be visible if this slot would be empty\n- **exploreSAP** - Slot for 'Explore SAP' menu\n- **cart** - Slot for cart menu\n- **profile** - Slot for avatar\n- **support** - Slot for support",
           "doc-url": "",
           "attributes": [
             {
@@ -3706,7 +3706,7 @@
             {
               "name": "site-label-url",
               "description": "Defines URL for site label. It will be used as a link on a logo and a site label",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "body-overflow",
@@ -3723,40 +3723,70 @@
               "description": "Defines sticky position for component",
               "value": { "type": "boolean", "default": "\"\"" }
             },
+            {
+              "name": "co-brand-image",
+              "description": "Defines the co-brand image",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "co-brand-alt",
+              "description": "Defines an alt text for the co-brand image",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "co-brand-url",
+              "description": "Defines the co-brand URL",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "co-brand-title",
+              "description": "Defines the default tooltip title for co-brand",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "co-brand-aria-label",
+              "description": "Defines an aria label for the co-brand link",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "logo-url",
               "description": "Defines the Logo image URL",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "logo-title",
               "description": "Defines the Logo default title",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "site-label-title",
+              "description": "Defines the default tooltip title for site label",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "site-label",
               "description": "Defines a site label. It will be displayed next to a logo.",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "logo-alt",
               "description": "Defines an alt text for logo",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "close-button-accessible-name",
               "description": "Defines an accessible name for close icon for the search bar",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "homepage-aria-label",
               "description": "Defines an aria label for the homepage link",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "site-label-aria-label",
               "description": "Defines an aria label for the site label",
-              "value": { "type": "string", "default": "\"\"" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3826,6 +3856,10 @@
             {
               "name": "site-label-click",
               "description": "Fired event when the user clicks the site label."
+            },
+            {
+              "name": "co-brand-click",
+              "description": "Fired event when the user clicks the co-brand."
             }
           ],
           "js": {
@@ -3838,7 +3872,7 @@
               {
                 "name": "site-label-url",
                 "description": "Defines URL for site label. It will be used as a link on a logo and a site label",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "body-overflow",
@@ -3855,40 +3889,70 @@
                 "description": "Defines sticky position for component",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "co-brand-image",
+                "description": "Defines the co-brand image",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "co-brand-alt",
+                "description": "Defines an alt text for the co-brand image",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "co-brand-url",
+                "description": "Defines the co-brand URL",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "co-brand-title",
+                "description": "Defines the default tooltip title for co-brand",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "co-brand-aria-label",
+                "description": "Defines an aria label for the co-brand link",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "logo-url",
                 "description": "Defines the Logo image URL",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "logo-title",
                 "description": "Defines the Logo default title",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "site-label-title",
+                "description": "Defines the default tooltip title for site label",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "site-label",
                 "description": "Defines a site label. It will be displayed next to a logo.",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "logo-alt",
                 "description": "Defines an alt text for logo",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "close-button-accessible-name",
                 "description": "Defines an accessible name for close icon for the search bar",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "homepage-aria-label",
                 "description": "Defines an aria label for the homepage link",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "site-label-aria-label",
                 "description": "Defines an aria label for the site label",
-                "value": { "type": "string" }
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -3939,6 +4003,10 @@
               {
                 "name": "site-label-click",
                 "description": "Fired event when the user clicks the site label."
+              },
+              {
+                "name": "co-brand-click",
+                "description": "Fired event when the user clicks the co-brand."
               }
             ]
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/MastheadItem.ts

@@ -10,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
@@ -22,7 +23,6 @@ import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
@@ -312,6 +312,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
+    if (this.shouldFocusFirstElement) {
+      this.applyFocusToFirstElement();
+    }
+
     this.handleOutsideClick();
   }
 
@@ -419,7 +423,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   setDropdownInsetStart(): void {
-    const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+    const dropdown = this.dropdownHolder;
     if (dropdown) {
       const rect = dropdown.getBoundingClientRect();
       const marginInlineStart = this.calculateMarginInlineStart(rect);
@@ -468,6 +472,13 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
+  async applyFocusToFirstElement(): Promise<void> {
+    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
+    if (focusedElement) {
+      focusedElement.focus();
+    }
+  }
+
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -498,6 +509,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       || this.isNavItemTarget(target);
   }
 
+  get dropdownHolder(): HTMLElement {
+    return this.getDomElement(".udex-masthead-item__dropdown")!;
+  }
+
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
@@ -549,6 +564,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
+  get shouldFocusFirstElement(): boolean {
+    return this.isDropdownOpened && !this._preventFocusOut;
+  }
+
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }

package/src/MastheadMenu.ts

@@ -9,6 +9,7 @@ import "@ui5/webcomponents-icons/dist/action.js";
 import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
+import type UDExMastheadItem from "./MastheadItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -38,9 +39,10 @@ export type MenuItem = {
 
 type UDExMastheadMenuMenuItemClickEventDetail = {
   category?: string,
+  analyticsPath: Array<string>,
+  analyticsName: AnalyticsName,
   originalEvent: PointerEvent,
   item: UDExMastheadMenuItem,
-  analyticsName: AnalyticsName,
   sourceNode: HTMLElement,
 }
 
@@ -129,18 +131,26 @@ class UDExMastheadMenu extends UI5Element {
   }
 
   handleMenuItemClick(e: PointerEvent): void {
-    const item = e.target as UDExMastheadMenuItem;
-    const { url, type } = item;
-    if (url?.length) {
-      const list = item.closest(".udex-masthead-menu__list") as HTMLElement;
-      this.fireDecoratorEvent("menu-item-click", {
-        sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-        analyticsName: AnalyticsName.Header,
-        item,
-        originalEvent: e,
-        ...(type !== UDExItemType.Heading && { category: list?.getAttribute("category") || "" }),
-      });
+    const menuItem = e.target as UDExMastheadMenuItem;
+    if (!menuItem.url?.length) {
+      return;
     }
+
+    const mainItem = this.closest("[udex-masthead-item]") as UDExMastheadItem;
+    const menuList = menuItem.closest(".udex-masthead-menu__list") as HTMLElement;
+    const sourceNode = menuItem.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement;
+    const category = menuList?.getAttribute("category") || "";
+
+    const eventDetail: UDExMastheadMenuMenuItemClickEventDetail = {
+      analyticsPath: [mainItem?.label, category, menuItem.label].filter(Boolean),
+      analyticsName: AnalyticsName.Header,
+      originalEvent: e,
+      item: menuItem,
+      sourceNode,
+      ...(menuItem.type !== UDExItemType.Heading && { category }),
+    };
+
+    this.fireDecoratorEvent("menu-item-click", eventDetail);
   }
 
   focusPreviousItem(item: UDExMastheadMenuItem): void {

package/src/MastheadMobileMenu.hbs

@@ -18,6 +18,7 @@
                             @click="{{handleExploreBackToMenuItems}}"
                             label="{{_clickedItem.innerText}}"
                             type="Button"
+                            is-back
                             has-border
                             icon-start
                             is-explore-back>
@@ -39,6 +40,7 @@
                                 label="{{_clickedItem.innerText}}"
                                 aria-has-popup="true"
                                 type="Button"
+                                is-back
                                 has-border
                                 icon-start
                                 is-back-to-nav>
@@ -59,6 +61,7 @@
                         aria-has-popup="true"
                         has-border
                         icon-start
+                        is-back
                         is-back-to-categories>
                     </udex-masthead-menu-item>
                 </li>
@@ -76,6 +79,7 @@
             accessible-role-text="button"
             aria-has-popup="true"
             type="Button"
+            first-level-btn
             first-level
             icon-end
             is-explore
@@ -95,6 +99,8 @@
                     aria-has-popup="true"
                     id="{{this._id}}"
                     type="Button"
+                    first-level-btn
+                    first-level
                     has-border
                     icon-end
                     first-level>
@@ -106,6 +112,7 @@
                     url="{{this.href}}"
                     label="{{this.innerText}}"
                     target="{{this.target}}"
+                    first-level
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}
@@ -121,6 +128,7 @@
                 url="{{_clickedItem.href}}"
                 label="{{overviewLinkText}}"
                 @click="{{handleMobileItemEvent}}"
+                second-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -136,6 +144,7 @@
                     label="{{this.category}}"
                     aria-has-popup="true"
                     type="Button"
+                    second-level-btn
                     second-level
                     has-border
                     icon-end>
@@ -149,6 +158,7 @@
                         @click="{{../handleMobileItemEvent}}"
                         url="{{this.url}}"
                         label="{{this.title}}"
+                        second-level
                         has-border>
                     </udex-masthead-menu-item>
                 </li>
@@ -165,6 +175,7 @@
                 @click="{{../handleMobileCategoryItemEvent}}"
                 url="{{this._category.url}}"
                 label="{{overviewLinkText}}"
+                third-level
                 has-border>
             </udex-masthead-menu-item>
         </li>
@@ -177,6 +188,7 @@
                     @click="{{../handleMobileCategoryItemEvent}}"
                     label="{{this.title}}"
                     url="{{this.url}}"
+                    third-level
                     has-border>
                 </udex-masthead-menu-item>
             </li>

package/src/MastheadMobileMenu.ts

@@ -24,7 +24,9 @@ type UDExMastheadMobileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   category?: string,
   isMobile: boolean,
+  isBack: boolean,
   analyticsName: AnalyticsName,
+  analyticsPath: Array<string>,
   sourceNode: HTMLElement,
 }
 
@@ -127,6 +129,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   _shouldFocusItemByIndex!: boolean;
   _shouldFocusExploreBtn!: boolean;
   _focusedItemIndex!: number;
+  _navItem?: UDExMastheadMenuItem;
 
   onAfterRendering() {
     this.handleMenuMode();
@@ -299,12 +302,12 @@ class UDExMastheadMobileMenu extends UI5Element {
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("first-level")) {
+    if (target.hasAttribute("first-level-btn")) {
       this.openCategories(item);
       this.fireMobileItemEvent(e);
     }
 
-    if (target.hasAttribute("second-level")) {
+    if (target.hasAttribute("second-level-btn")) {
       this.openCategoryItems(e);
       this.fireMobileItemEvent(e);
     }
@@ -416,15 +419,19 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   fireMobileItemEvent(e: PointerEvent | KeyboardEvent, category?: string) {
     const item = e.target as UDExMastheadMenuItem;
-
-    this.fireDecoratorEvent("item-click", {
-      isMobile: true,
+    const isBack = item.hasAttribute("is-back");
+    const eventDetail: UDExMastheadMobileMenuItemClickEventDetail = {
+      ...(category && { category }),
       item,
+      isMobile: true,
+      isBack,
+      analyticsPath: this.buildAnalyticsPath(item),
       originalEvent: e,
       analyticsName: AnalyticsName.Header,
       sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
-      ...(category && { category }),
-    });
+    };
+
+    this.fireDecoratorEvent("item-click", eventDetail);
   }
 
   fireExploreSapMobileButton(e: PointerEvent | KeyboardEvent) {
@@ -483,6 +490,42 @@ class UDExMastheadMobileMenu extends UI5Element {
     });
   }
 
+  buildAnalyticsPath(item: UDExMastheadMenuItem): Array<string> {
+    const category = this.getListItemByIndex(0).label.trim();
+    const isFirstLevel = item.hasAttribute("first-level");
+    const isSecondLevel = item.hasAttribute("second-level");
+    const isThirdLevel = item.hasAttribute("third-level");
+    const isBackToCategories = item.hasAttribute("is-back-to-categories");
+    const shouldResetPath = item.hasAttribute("is-back-to-nav") || this._hideExploreSapBtn;
+    const isExploreMode = !this.showExploreBtn && !!this.items.length;
+    const clickedLabel = item.label.trim();
+    const analyticsPath: Array<string> = [];
+
+    if (shouldResetPath) {
+      this._navItem = undefined;
+      analyticsPath.length = 0;
+    }
+
+    if (isFirstLevel) {
+      this._navItem = item;
+      analyticsPath.push(clickedLabel);
+    } else if (isSecondLevel) {
+      analyticsPath.push(...(this._navItem ? [category, clickedLabel] : [clickedLabel]));
+    } else if (isThirdLevel) {
+      analyticsPath.push(...(this._navItem ? [this._navItem.label.trim(), category, clickedLabel] : [category, clickedLabel]));
+    } else if (isBackToCategories) {
+      if (this._navItem) {
+        analyticsPath.push(this._navItem.label.trim());
+      }
+    }
+
+    if (isExploreMode) {
+      analyticsPath.unshift(this.exploreItem.label);
+    }
+
+    return analyticsPath;
+  }
+
   get exploreBtnMenu(): UDExMastheadMenuItem {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }

package/src/MastheadShell.hbs

@@ -1,5 +1,5 @@
 <header
-    class="udex-masthead-shell"
+    class="{{mainClass}}"
     @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
         <div class="udex-masthead-shell__landing-wrap">
@@ -10,6 +10,10 @@
             {{#if siteLabel}}
                 {{>siteLabel}}
             {{/if}}
+
+            {{#if coBrandImage}}
+                {{>coBrand}}
+            {{/if}}
         </div>
 
         {{#if isMainMenuVisible}}
@@ -166,6 +170,7 @@
             @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
+            title="{{siteLabelTitle}}"
             target="_self"
             aria-label="{{siteLabelAriaLabel}}"
             class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">
@@ -175,3 +180,32 @@
         <div class="udex-masthead-shell__site-label">{{siteLabel}}</div>
     {{/if}}
 {{/inline}}
+
+{{#*inline "coBrand"}}
+    {{#if coBrandUrl}}
+        <div class="udex-masthead-shell__co-brand">
+            <a
+                class="udex-masthead-shell__co-brand-link"
+                @click="{{handleCoBrandClick}}"
+                href="{{coBrandUrl}}"
+                title="{{coBrandTitle}}"
+                aria-label="{{coBrandAriaLabel}}"
+                target="_self"
+                role="link">
+                <img
+                    class="udex-masthead-shell__co-brand-image"
+                    src="{{coBrandImage}}"
+                    alt="{{coBrandAlt}}"
+                />
+            </a>
+        </div>
+    {{else}}
+        <div class="udex-masthead-shell__co-brand">
+            <img
+                class="udex-masthead-shell__co-brand-image"
+                src="{{coBrandImage}}"
+                alt="{{coBrandAlt}}"
+            />
+        </div>
+    {{/if}}
+{{/inline}}