@sapudex/web-components 2.46.0 → 2.48.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.46.0",
+  "version": "2.48.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -584,7 +584,7 @@
         },
         {
           "name": "udex-carousel",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n---\n\n\n### **Events:**\n - **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-carousel</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n---\n\n\n### **Events:**\n - **autoplay-toggle-click** - Fired event when the user click on a play/paused button.\n- **navigate** - Triggered when carousel navigates to a new slide\n\n### **Slots:**\n - **default** - Defines the content of the component.",
           "doc-url": "",
           "attributes": [
             {
@@ -592,6 +592,21 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "autoplay",
+              "description": "Controls carousel autoplay functionality",
+              "value": { "type": "boolean | undefined", "default": "undefined" }
+            },
+            {
+              "name": "autoplay-speed",
+              "description": "Defines carousel autoplay speed in milliseconds till next slide",
+              "value": { "type": "number", "default": "2000" }
+            },
+            {
+              "name": "cyclic",
+              "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
             {
               "name": "items-per-page",
               "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
@@ -618,6 +633,10 @@
             }
           ],
           "events": [
+            {
+              "name": "autoplay-toggle-click",
+              "description": "Fired event when the user click on a play/paused button."
+            },
             {
               "name": "navigate",
               "description": "Triggered when carousel navigates to a new slide"
@@ -630,6 +649,21 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "autoplay",
+                "description": "Controls carousel autoplay functionality",
+                "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "autoplay-speed",
+                "description": "Defines carousel autoplay speed in milliseconds till next slide",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "cyclic",
+                "description": "Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.",
+                "value": { "type": "boolean | undefined" }
+              },
               {
                 "name": "items-per-page",
                 "description": "Defines the number of items per page depending on the carousel width.\n\n- 'S' for screens smaller than 600 pixels.\n- 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n- 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n- 'XL' for screens greater than or equal to 1440 pixels.\n\nOne item per page is shown by default.",
@@ -647,6 +681,10 @@
               }
             ],
             "events": [
+              {
+                "name": "autoplay-toggle-click",
+                "description": "Fired event when the user click on a play/paused button."
+              },
               {
                 "name": "navigate",
                 "description": "Triggered when carousel navigates to a new slide"
@@ -4885,6 +4923,11 @@
               "description": "Defines a title for sub menu items",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "number-badge",
+              "description": "Defines the number badge for item",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "selected",
               "description": "Defines the selected item.",
@@ -4976,6 +5019,11 @@
                 "description": "Defines a title for sub menu items",
                 "value": { "type": "string" }
               },
+              {
+                "name": "number-badge",
+                "description": "Defines the number badge for item",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "selected",
                 "description": "Defines the selected item.",

package/package.json

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

package/src/Carousel.ts

@@ -10,12 +10,16 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from "./generated/i18n/i18n-defaults.js";
+import {
+  CAROUSEL_NEXT_ARROW_TEXT,
+  CAROUSEL_PREVIOUS_ARROW_TEXT,
+  CAROUSEL_AUTOPLAY_TOGGLE_START,
+  CAROUSEL_AUTOPLAY_TOGGLE_STOP,
+} from "./generated/i18n/i18n-defaults.js";
 import redirectAttributes from "./utils/redirectAttributes.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
-import type Icon from "@ui5/webcomponents/dist/Icon.js";
 import translate from "./utils/translate.js";
 
 import CarouselTemplate from "./CarouselTemplate.js";
@@ -23,7 +27,6 @@ import CarouselTemplate from "./CarouselTemplate.js";
 // Styles
 import CarouselCss from "./generated/themes/Carousel.css.js";
 import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
-import type UDExButton from "./Button.js";
 
 export enum UDExCarouselNavigationPosition {
   top = "top",
@@ -35,6 +38,10 @@ export enum UDExCarouselButtonDesign {
   Tertiary = "Tertiary",
 }
 
+type UDExCarouselAutoplayToggleEventDetails = {
+  isPaused: boolean;
+}
+
 /**
  * @class
  *
@@ -65,10 +72,18 @@ export enum UDExCarouselButtonDesign {
  * @param { CustomEvent }
  */
 @event("navigate")
+/**
+ * Fired event when the user click on a play/paused button.
+ *
+ * @public
+ * @param {boolean} isPaused - Indicates current state of autoplay
+ */
+@event("autoplay-toggle-click", { bubbles: true })
 
 class UDExCarousel extends UI5Element {
   eventDetails!: {
     "navigate": CarouselNavigateEventDetail,
+    "autoplay-toggle-click": UDExCarouselAutoplayToggleEventDetails,
   };
   /**
    * Defines the position of the navigation.
@@ -83,6 +98,37 @@ class UDExCarousel extends UI5Element {
    */
   @property()
     navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;
+  /**
+   * Controls carousel autoplay functionality
+   * @public
+   * @default undefined
+   */
+  @property({ type: Boolean })
+    autoplay?: boolean;
+
+  /**
+   * Defines carousel autoplay speed in milliseconds till next slide
+   * @public
+   */
+  @property({ type: Number })
+    autoplaySpeed: number = 2000;
+
+  /**
+   * Indicates current state of autoplay.
+   *
+   * @default true
+   * @private
+   */
+  @property({ type: Boolean })
+    _autoplayIsPaused = true;
+
+  /**
+   * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    cyclic?: boolean;
 
   /**
    * Defines the content of the component.
@@ -151,6 +197,31 @@ class UDExCarousel extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _autoplayInterval: ReturnType<typeof setInterval> | null = null;
+  _autoplayLastToggle = Date.now();
+  _autoplayMinTimeBetweenToggle = 250;
+  _autoplayManualStop = false;
+  _autoplayLoop = () => {
+    const items = this._carousel?.items;
+    if (!items) { return; }
+
+    const currentSlide = this._carousel._currentPageIndex;
+    const itemsPerPage = this._carousel.effectiveItemsPerPage;
+    const isLastSlide = currentSlide === (items.length - itemsPerPage);
+
+    if (isLastSlide && !this.cyclic) {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
+
+      return;
+    }
+
+    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);
+
+    this._carousel?.navigateTo(nextSlide);
+    this._calculateDisabledButtonsState();
+  };
+
   get nextPageText(): string {
     return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
   }
@@ -165,6 +236,26 @@ class UDExCarousel extends UI5Element {
     return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
+  get navigationWrapperClass(): string {
+    let _class = "udex-carousel__navigation-wrapper";
+
+    if (this.autoplay) {
+      _class += " udex-carousel__navigation-wrapper--autoplay";
+    }
+
+    return _class;
+  }
+
+  get navigationButtonWrapperClass(): string {
+    let _class = "udex-carousel__navigation-button-wrapper";
+
+    if (this._carousel?.isPageTypeDots) {
+      _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+    }
+
+    return _class;
+  }
+
   get buttonDesign(): UDExCarouselButtonDesign {
     return this.navigationPlacement === UDExCarouselNavigationPosition.top
       ? UDExCarouselButtonDesign.Secondary
@@ -190,25 +281,98 @@ class UDExCarousel extends UI5Element {
     return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
   }
 
+  _startAutoplay(): void {
+    if (!this.autoplay) { return; }
+
+    if (!this._carousel?.items) {
+      console.warn("[UDExCarousel] Cannot start autoplay on an empty carousel");
+      return;
+    }
+
+    const toggleBuffer = Date.now() - this._autoplayLastToggle;
+    if (this._autoplayInterval !== null && toggleBuffer <= this._autoplayMinTimeBetweenToggle) {
+      this._autoplayLastToggle = Date.now();
+      return;
+    }
+
+    if (this._autoplayInterval !== null) {
+      clearInterval(this._autoplayInterval);
+    }
+
+    this._autoplayInterval = setInterval(this._autoplayLoop, this.autoplaySpeed);
+    this._autoplayIsPaused = false;
+    this._autoplayLastToggle = Date.now();
+  }
+
+  _stopAutoplay(): void {
+    if (!this._autoplayInterval) { return; }
+
+    clearInterval(this._autoplayInterval);
+    this._autoplayIsPaused = true;
+    this._autoplayLastToggle = Date.now();
+  }
+
+  _onAutoplayToggleClick(): void {
+    if (this._autoplayIsPaused) {
+      this._startAutoplay();
+      this._autoplayManualStop = false;
+    } else {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
+    }
+
+    this.fireDecoratorEvent("autoplay-toggle-click", {
+      isPaused: this._autoplayIsPaused,
+    });
+  }
+
+  get _isBottomNavigation(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  }
+
+  get autoplayToggleButtonTooltipText(): string {
+    return this._autoplayIsPaused
+      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
+      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
+  }
+
+  _onFocusIn(): void {
+    this._stopAutoplay();
+  }
+
+  _onFocusOut(): void {
+    if (!this._autoplayManualStop) { this._startAutoplay(); }
+  }
+
+  _onMouseEnter(): void {
+    this._stopAutoplay();
+  }
+
+  _onMouseLeave(): void {
+    if (!this._autoplayManualStop) { this._startAutoplay(); }
+  }
+
   _calculateDisabledButtonsState() {
     this.isPrevButtonDisabled = !this._carousel?.hasPrev;
     this.isNextButtonDisabled = !this._carousel?.hasNext;
   }
 
-  _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isPrevButtonDisabled) {
+  _prevButtonClick() {
+    if (this.isPrevButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateLeft();
+    this._calculateDisabledButtonsState();
   }
 
-  _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">) {
-    if (this.isNextButtonDisabled) {
+  _nextButtonClick() {
+    if (this.isNextButtonDisabled || !this._carousel) {
       return;
     }
 
-    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, "click">);
+    this._carousel.navigateRight();
+    this._calculateDisabledButtonsState();
   }
 
   _onkeydown(e: KeyboardEvent) {
@@ -227,9 +391,16 @@ class UDExCarousel extends UI5Element {
     redirectAttributes(this, "carousel");
 
     this._calculateDisabledButtonsState();
+
+    if (this._autoplayInterval === null) { this._startAutoplay(); }
+  }
+
+  onExitDOM(): void {
+    if (this._autoplayInterval) { clearInterval(this._autoplayInterval); }
   }
 }
 
 UDExCarousel.define();
 
 export default UDExCarousel;
+export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/src/CarouselTemplate.tsx

@@ -2,15 +2,19 @@ import type Carousel from "./Carousel.js";
 import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
 import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
 import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import play from "@ui5/webcomponents-icons/dist/play.js";
+import pause from "@ui5/webcomponents-icons/dist/pause.js";
 
 export default function CarouselTemplate(this: Carousel) {
   return (
     <div className={this.carouselClass} onKeyDown={this._onkeydown}>
       {this.showNavigationButtons.top && navigation.call(this)}
+
       <UI5Carousel
         itemsPerPage={this.itemsPerPage}
         pageIndicatorType={this.pageIndicatorType}
@@ -19,11 +23,20 @@ export default function CarouselTemplate(this: Carousel) {
         arrowsPlacement={CarouselArrowsPlacement.Navigation}
         accessibleName={this.accessibleName}
         hidePageIndicator={this._hidePageIndicator}
-        onNavigate={this._handleNavigate}>
-        {this.items.map(item =>
-          <slot name={(item as SlottedChild)._individualSlot}></slot>
-        )}
+        onNavigate={this._handleNavigate}
+        onMouseEnter={this._onMouseEnter}
+        onMouseLeave={this._onMouseLeave}
+        onFocusIn={this._onFocusIn}
+        onFocusOut={this._onFocusOut}
+        cyclic={this.cyclic}
+      >
+        {
+          this.items.map(item =>
+            <slot name={(item as SlottedChild)._individualSlot}></slot>
+          )
+        }
       </UI5Carousel>
+
       {this.showNavigationButtons.bottom && navigation.call(this)}
     </div>
   );
@@ -31,31 +44,57 @@ export default function CarouselTemplate(this: Carousel) {
 
 function navigation(this: Carousel) {
   const btnClassName = "udex-carousel__navigation-button";
+  const icon = this._autoplayIsPaused ? play : pause;
 
   return (
-    <div class="udex-carousel__navigation-wrapper" part="navigation">
-      <UDExButton
-        data-ui5-arrow-back
-        size={UDExButtonSize.Large}
-        disabled={this.isPrevButtonDisabled}
-        class={btnClassName}
-        icon={slimArrowLeft}
-        design={this.buttonDesign}
-        tooltip={this.previousPageText}
-        onClick={this._prevButtonClick}
-        part="prev-button">
-      </UDExButton>
-      <UDExButton
-        data-ui5-arrow-forward
-        size={UDExButtonSize.Large}
-        disabled={this.isNextButtonDisabled}
-        class={btnClassName}
-        icon={slimArrowRight}
-        design={this.buttonDesign}
-        tooltip={this.nextPageText}
-        onClick={this._nextButtonClick}
-        part="next-button">
-      </UDExButton>
+    <div className={this.navigationWrapperClass} part="navigation">
+      {
+        this.autoplay &&
+        <UDExButton
+          class={`udex-carousel__autoplay-toggle-button`}
+          size={UDExButtonSize.Large}
+          design={UDExButtonDesign.Tertiary}
+          icon={icon}
+          onClick={this._onAutoplayToggleClick}
+          tooltip={this.autoplayToggleButtonTooltipText}
+        ></UDExButton>
+      }
+
+      <div className={this.navigationButtonWrapperClass}>
+        <UDExButton
+          data-ui5-arrow-back
+          size={UDExButtonSize.Large}
+          disabled={this.isPrevButtonDisabled}
+          class={btnClassName}
+          icon={slimArrowLeft}
+          design={this.buttonDesign}
+          tooltip={this.previousPageText}
+          onClick={this._prevButtonClick}
+          part="prev-button">
+        </UDExButton>
+
+        {
+          this._isBottomNavigation &&
+          <div className="udex-carousel__navigation-page-indicator-spacer" />
+        }
+
+        <UDExButton
+          data-ui5-arrow-forward
+          size={UDExButtonSize.Large}
+          disabled={this.isNextButtonDisabled}
+          class={btnClassName}
+          icon={slimArrowRight}
+          design={this.buttonDesign}
+          tooltip={this.nextPageText}
+          onClick={this._nextButtonClick}
+          part="next-button">
+        </UDExButton>
+      </div>
+
+      {
+        this.autoplay && this._isBottomNavigation &&
+        <div className="udex-carousel__navigation-spacer"></div>
+      }
     </div>
   );
 }

package/src/DatePicker.ts

@@ -215,6 +215,13 @@ class UDExDatePicker extends DateComponentBase {
   @property()
     _tempValue!: string;
 
+  /**
+   * Tracks whether the calendar popover is currently open, used to reflect aria-expanded on the control button.
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isPopoverOpen: boolean = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -237,6 +244,7 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   _afterDropdownClose(): void {
+    this._isPopoverOpen = false;
     this._dropdownTrigger.active = false;
     this._dropdownTrigger.iconActive = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
@@ -244,6 +252,7 @@ class UDExDatePicker extends DateComponentBase {
   }
 
   _afterDropdownOpen(): void {
+    this._isPopoverOpen = true;
     this._dropdownTrigger.iconActive = true;
   }
 

package/src/DatePickerTemplate.tsx

@@ -7,7 +7,6 @@ export default function DatePickerTemplate(this: DatePicker) {
     <>
       <UDExTextField
         class="udex-date-picker__input"
-        _aria-has-popup="grid"
         icon="appointment-2"
         value={this.value}
         placeholder={this._effectivePlaceholder}
@@ -15,6 +14,8 @@ export default function DatePickerTemplate(this: DatePicker) {
         accessible-name={this.dateAccessibleName}
         accessible-name-ref={this.accessibleNameRef}
         accessible-icon-name={this.accessibleIconName}
+        _icon-aria-has-popup="grid"
+        _icon-aria-expanded={this._isPopoverOpen ? "true" : "false"}
         {...(this.disabled ? { "disabled": true } : {})}
         {...(this.required ? { "required": true } : {})}
         {...(this.readonly ? { "readonly": true } : {})}

package/src/MastheadItem.hbs

@@ -12,6 +12,7 @@
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}">
         {{> content}}
+        {{> badge}}
     </a>
     {{#if isTargetBlank}}
         <span
@@ -35,6 +36,7 @@
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}">
         {{> content}}
+        {{> badge}}
     </button>
     {{> dropdown}}
 {{else}}
@@ -52,6 +54,7 @@
         @mouseup="{{handleMouseUp}}"
         @click="{{handleItemClick}}">
         {{> content}}
+        {{> badge}}
     </button>
     {{> dropdown}}
 {{/if}}
@@ -119,3 +122,15 @@
       <div id="{{this._id}}_dropdown"></div>
     {{/if}}
 {{/inline}}
+
+{{#*inline "badge"}}
+    {{#if this.numberBadge}}
+        <udex-badge
+            class="udex-masthead-item__badge"
+            type="Number"
+            number-design="Red"
+            size="Small">
+            {{this.numberBadge}}
+        </udex-badge>
+    {{/if}}
+{{/inline}}

package/src/MastheadItem.ts

@@ -283,6 +283,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: String })
     label!: string;
 
+  /**
+   * Defines the number badge for item
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    numberBadge?: string;
+
   /**
    * Slot for the dropdown
    *
@@ -402,9 +411,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   handleFocusOutForDropdowns(e: FocusEvent): void {
     const relatedTarget = e.relatedTarget as HTMLElement;
-    const target = e.target as HTMLElement;
+    const currentItem = relatedTarget.closest("[udex-masthead-item]");
 
-    if (this.shouldCloseDropdown(relatedTarget, target)) {
+    if (currentItem !== this) {
       this.closeDropdown();
     }
   }
@@ -584,24 +593,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.isMobile || e.relatedTarget === null || this._preventFocusOut;
   }
 
-  private isProfileButtonTarget(relatedTarget: HTMLElement | null): boolean {
-    return (relatedTarget?.tagName === "UDEX-AVATAR" || relatedTarget?.tagName === "UDEX-MASTHEAD-ITEM") && this.isProfileBtn;
-  }
-
-  private isNavItemTarget(target: HTMLElement): boolean {
-    return target.getAttribute("slot") === "dropdown" && !this.isProfileBtn;
-  }
-
-  private isRelatedTargetOutside(relatedTarget: HTMLElement | null): boolean {
-    return relatedTarget?.closest("[udex-masthead-item]") === null;
-  }
-
-  private shouldCloseDropdown(relatedTarget: HTMLElement, target:HTMLElement): boolean {
-    return this.isRelatedTargetOutside(relatedTarget)
-      || this.isProfileButtonTarget(relatedTarget)
-      || this.isNavItemTarget(target);
-  }
-
   get dropdownHolder(): HTMLElement {
     return this.getDomElement(".udex-masthead-item__dropdown")!;
   }
@@ -611,7 +602,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get additionalClass(): string {
-    const iconClass = (this.icon || this.image) ? "udex-masthead-item__button--icon" : "";
+    const iconClass = (this.icon || this.image || this.isProfileBtn) ? "udex-masthead-item__button--icon" : "";
     const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
     const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
     const supportClass = this.isSupportBtn ? "udex-masthead-item__button--support" : "";

package/src/Tag.ts

@@ -293,10 +293,11 @@ class UDExTag extends UI5Element {
     const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
     const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
     const nonSelectableClass = this.nonSelectable && !this.href && !this.nonInteractive ? "udex-tag--nonselectable" : "";
+    const nonInteractiveClass = this.nonInteractive ? "udex-tag--noninteractive" : "";
     const linkTagClass = this.href ? "udex-tag--link" : "";
     const selectableClass = this.selected ? "udex-tag--selected" : "";
     const designClass = `udex-tag-${this.design?.toLowerCase()}`;
-    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${nonInteractiveClass} ${linkTagClass} ${selectableClass}`.trim();
   }
 
   get startIcon(): boolean {
@@ -331,7 +332,7 @@ class UDExTag extends UI5Element {
   }
 
   get hasIcon(): boolean {
-    return !!this.icon && !this.readOnly;
+    return !!this.icon;
   }
 
   get iconAccessibleName(): string {