@sapudex/web-components 2.16.1 → 2.17.1

package/src/AvatarGroup.ts

@@ -3,6 +3,7 @@ import AvatarGroup from "@ui5/webcomponents/dist/AvatarGroup.js";
 import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
 // Styles
@@ -61,22 +62,14 @@ const avatarOffsets = {
 class UDExAvatarGroup extends AvatarGroup {
   constructor() {
     super();
-
-    this._itemNavigation = new ItemNavigation(this, {
-      getItemsCallback: () => {
-        return this._isIndividual
-          ? this.items.slice(0, this._hiddenStartIndex).map(
-            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
-          )
-          : [];
-      },
-    });
   }
+
   onEnterDOM(): void {
     super.onEnterDOM();
     const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
     container?.addEventListener("mouseenter", this._onHover.bind(this, true));
     container?.addEventListener("mouseleave", this._onHover.bind(this, false));
+    this._initializeItemNavigation();
   }
 
   onExitDOM(): void {
@@ -86,6 +79,19 @@ class UDExAvatarGroup extends AvatarGroup {
     container?.removeEventListener("mouseleave", this._onHover.bind(this, false));
   }
 
+  async _initializeItemNavigation() {
+    await renderFinished();
+    this._itemNavigation = new ItemNavigation(this, {
+      getItemsCallback: () => {
+        return this._isIndividual
+          ? this.items.slice(0, this._hiddenStartIndex).map(
+            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
+          )
+          : [];
+      },
+    });
+  }
+
   _onHover(hover: boolean) {
     if (this._isGroup) {
       this.items.every(avatar => {
@@ -102,6 +108,10 @@ class UDExAvatarGroup extends AvatarGroup {
     this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);
   }
 
+  _isValidSize(size: string): boolean {
+    return Object.values(UDExAvatarSize).includes(size as UDExAvatarSize);
+  }
+
   _prepareAvatars() {
     this._colorIndex = 0;
     const visibleColors = Object.values(UDExAvatarColorScheme);
@@ -118,7 +128,7 @@ class UDExAvatarGroup extends AvatarGroup {
       }
 
       if (index !== this._itemsCount - 1 || this._customOverflowButton) {
-        const avatarSize = avatar.effectiveSize || UDExAvatarSize.S;
+        const avatarSize = this._isValidSize(avatar.effectiveSize) ? avatar.effectiveSize : UDExAvatarSize.S;
         avatar.style.marginInlineEnd = avatarOffsets[avatarSize][this.type];
       }
     });

package/src/Breadcrumbs.ts

@@ -18,7 +18,11 @@ import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
-import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
+import {
+  AVAILABLE_VALUES,
+  BREADCRUMBS_ARIA_LABEL,
+  BREADCRUMBS_OVERFLOW_ARIA_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -312,13 +316,17 @@ class UDExBreadcrumbs extends UI5Element {
     return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
   }
 
-  get _accessibleNameText(): string {
+  get _breadcrumbsAccessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
   }
 
   get _dropdownArrowAccessibleNameText(): string {
     return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
   }
+
+  get _dropdownAccessibleNameText(): string {
+    return UDExBreadcrumbs.i18nBundle.getText(AVAILABLE_VALUES);
+  }
 }
 
 UDExBreadcrumbs.define();

package/src/BreadcrumbsPopoverTemplate.tsx

@@ -9,6 +9,7 @@ export default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {
       id={`udex-${this._id}-breadcrumbs__popover`}
       opener={`udex-${this._id}-breadcrumbs__opener`}
       class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}
+      accessibleName={this._dropdownAccessibleNameText}
       placement={Placement.Bottom}
       horizontalAlign={HorizontalAlign.Start}
       onKeyDown={this._handleKeydown}

package/src/BreadcrumbsTemplate.tsx

@@ -11,14 +11,14 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
     <>
       <nav
         class={`${this._rootClass} ui5-breadcrumbs-root`}
-        aria-label={this._accessibleNameText}>
+        aria-label={this._breadcrumbsAccessibleNameText}>
         <ol onFocusIn={this._onfocusin}>
           <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
             <UDExLink
               id={`udex-${this._id}-breadcrumbs__opener`}
               class={`${this._rootClass}__trigger ${this._triggerClass}`}
               onClick={this._toggleDropdown}
-              aria-label={this._dropdownArrowAccessibleNameText}
+              accessibleName={this._dropdownArrowAccessibleNameText}
               accessibleRole={UDExButtonAccessibleRole.Button}
               icon={slimArrowDown}
               aria-haspopup="true">

package/src/EventRibbonTemplate.tsx

@@ -8,7 +8,7 @@ export default function EventRibbonTemplate(this: UDExEventRibbon) {
   return (
     <a
       onKeyDown={this.handleKeyDown}
-      aria-labelledby={`${this.eventText ? `${this._id}-text` : ""} ${this._id}-link-text`}
+      aria-labelledby={`${this._id}__logo-alt ${this.eventText ? `${this._id}-text` : ""} ${this._id}-link-text`}
       class={{
         [`${rootClass}__container`]: true,
         [`${rootClass}__container-with-background-image`]: this.backgroundImage
@@ -17,6 +17,7 @@ export default function EventRibbonTemplate(this: UDExEventRibbon) {
       href={url}>
       <div class={`${rootClass}__logo`}>
         <img class={`${logoClass}`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+        <span id={`${this._id}__logo-alt`} class="hidden-text">{this.eventLogoAlt}</span>
       </div>
       {this.eventText && <p class={`${rootClass}__text`} id={`${this._id}-text`}>{this.eventText}</p>}
       <div class={`${rootClass}__link-container`}>

package/src/Footer.ts

@@ -35,6 +35,7 @@ import {
   COPYRIGHT,
   PUBLIC_SECURITY_NETWORK_NUMBER,
   ICP_NUMBER,
+  BACK_TO_TOP,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -561,6 +562,10 @@ class UDExFooter extends UI5Element {
     return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
   }
 
+  get backToTopTitle(): string {
+    return UDExFooter.i18nBundle.getText(BACK_TO_TOP);
+  }
+
   _onLogoClick(e: MouseEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/FooterTemplate.tsx

@@ -160,49 +160,51 @@ export default function FooterTemplate(this: Footer) {
         )}
 
         <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
-      </div>
 
-      <div className={`${rootClass}__copyright`}>
-        {this.isChineseLang && (
-          <span className={`${rootClass}__copyright-chinese-text`}>
-            <a
-              href={this.chineseIcpNumberLink}
-              title={this.chineseICPNumber}
-              className={`${rootClass}__copyright-chinese-link`}
-              target="_blank"
-              rel="noopener noreferrer">
-              {this.chineseICPNumber}
-            </a>
-            {this.chineseSecurityNetworkNumber}
-          </span>
+        <div className={`${rootClass}__copyright`}>
+          {this.isChineseLang && (
+            <span className={`${rootClass}__copyright-chinese-text`}>
+              <a
+                href={this.chineseIcpNumberLink}
+                title={this.chineseICPNumber}
+                className={`${rootClass}__copyright-chinese-link`}
+                target="_blank"
+                rel="noopener noreferrer">
+                {this.chineseICPNumber}
+              </a>
+              {this.chineseSecurityNetworkNumber}
+            </span>
+          )}
+          <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
+        </div>
+
+        {this.socialLinksArray.length > 0 && (
+          <ul className={`${rootClass}__social-container`}>
+            {this.socialLinksArray.map((social, index) => (
+              <UDExSocialMediaButton
+                {...{ role: "listitem" }}
+                key={index}
+                type={social.name}
+                url={social.url}
+                target={social.target}
+                accessible-name={social.accessibleName}
+                data-name={social.name}
+                data-id={social.id}
+                onui5-click={this._onSocialMediaLinkClick}>
+              </UDExSocialMediaButton>
+            ))}
+          </ul>
         )}
-        <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
       </div>
 
-      {this.socialLinksArray.length > 0 && (
-        <div className={`${rootClass}__social-container`}>
-          {this.socialLinksArray.map((social, index) => (
-            <UDExSocialMediaButton
-              key={index}
-              type={social.name}
-              url={social.url}
-              target={social.target}
-              accessible-name={social.accessibleName}
-              data-name={social.name}
-              data-id={social.id}
-              onui5-click={this._onSocialMediaLinkClick}>
-            </UDExSocialMediaButton>
-          ))}
-        </div>
-      )}
-
       <UDExButton
         class={`${rootClass}__back-to-top-button`}
         icon={backToTop}
         onClick={this.onBackToTopClick}
         design={UDExButtonDesign.Tertiary}
         size={UDExButtonSize.Large}
-        accessibleName="back to top">
+        tooltip={this.backToTopTitle}
+        accessibleName={this.backToTopTitle}>
       </UDExButton>
     </footer>
   );

package/src/MastheadShell.ts

@@ -859,7 +859,8 @@ class UDExMastheadShell extends UI5Element {
 
   setMobileMenuHeight(): void {
     const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue(UDExMastheadVariable.mastheadHeight));
-    const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
+    const rectTop = this.getBoundingClientRect().top;
+    const mobileMenuHeight = `${window.innerHeight - mastheadHeight - rectTop}px`;
     this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 

package/src/Quote.ts

@@ -2,10 +2,8 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
-// Template
-import QuoteTemplate from "./generated/templates/QuoteTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import QuoteTemplate from "./QuoteTemplate.js";
 
 // Styles
 import QuoteCss from "./generated/themes/Quote.css.js";
@@ -39,7 +37,7 @@ export enum UDExImagePlacement {
  */
 @customElement({
   tag: "udex-quote",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: QuoteCss,
   template: QuoteTemplate,
 })
@@ -115,6 +113,10 @@ class UDExQuote extends UI5Element {
    */
   @property()
     imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;
+
+  get isImagePlacementRight(): boolean {
+    return this.imagePlacement === UDExImagePlacement.right;
+  }
 }
 
 UDExQuote.define();

package/src/QuoteTemplate.tsx

@@ -0,0 +1,29 @@
+import type UDExQuote from "./Quote.js";
+
+export default function QuoteTemplate(this: UDExQuote) {
+  const rootClass = "udex-quote";
+
+  return (
+    <div class={`${rootClass}__container`}>
+      {this.image?.length > 0 && !this.isImagePlacementRight && imageHolder.call(this, rootClass)}
+      <div class={`${rootClass}__content-container`}>
+        <blockquote class={`${rootClass}__text-container`}>
+          <p class={`${rootClass}__text`}>
+            <slot></slot>
+          </p>
+        </blockquote>
+        {this.author && <slot slot="author" name="author"></slot>}
+        {this.link && <slot slot="link" name="link"></slot>}
+      </div>
+      {this.image?.length > 0 && this.isImagePlacementRight && imageHolder.call(this, rootClass)}
+    </div>
+  );
+}
+
+function imageHolder(this: UDExQuote, rootClass: string) {
+  return (
+    <div class={`${rootClass}__image-container`}>
+      <slot name="image" slot="image"></slot>
+    </div>
+  );
+}

package/src/Search.hbs

@@ -20,7 +20,7 @@
                 placement="Bottom"
 	              horizontal-align="Start"
                 style="{{prefixPopoverStyles}}"
-                @after-close="{{handleAfterClosePrefixPopover}}">
+                @close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
             </ui5-popover>
         </div>

package/src/Search.ts

@@ -931,7 +931,6 @@ class UDExSearch extends UI5Element {
         prefixObserver.observe(popoverNode, { attributes: true, attributeOldValue: true });
       }
 
-      this.handleOutsideClick();
       this.handleOpenSuggestionPopover();
       this.setSearchWidth();
     }
@@ -944,19 +943,6 @@ class UDExSearch extends UI5Element {
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("mousedown", (e: MouseEvent) => {
-      const popover = (e.target as HTMLElement).shadowRoot?.querySelector("[ui5-popover]");
-      if (e.target !== this && popover !== this.Suggestion?.popover) {
-        this.handleBlur();
-        this.onClosePopover();
-        if (this.isShowSearchHomePrefix) {
-          this.handleAfterClosePrefixPopover();
-        }
-      }
-    });
-  }
-
   handleBlur(): void {
     this._isTouched = false;
     if (this.value) {

package/src/Switch.ts

@@ -5,6 +5,7 @@ import "@ui5/webcomponents/dist/Switch.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import SwitchTemplate from "./SwitchTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 
@@ -128,6 +129,13 @@ class UDExSwitch extends UI5Element {
     }
   }
 
+  handleKeyDown(e: KeyboardEvent): void {
+    if (!this.disabled && (isEnter(e) || isSpace(e))) {
+      e.preventDefault();
+      this.handleSwitchClick();
+    }
+  }
+
   get switchTabIndex(): 0 | undefined {
     return this.disabled ? undefined : 0;
   }

package/src/SwitchTemplate.tsx

@@ -29,7 +29,8 @@ export default function SwitchTemplate(this: Switch) {
         aria-disabled={this.disabled}
         tabindex={this.switchTabIndex}
         title={this.tooltip}
-        onClick={this.handleSwitchClick}>
+        onClick={this.handleSwitchClick}
+        onKeyDown={this.handleKeyDown}>
         <div class={`${rootClass}__track ${this.isActiveTrackClass}`}>
           <div class={`${rootClass}__handle`}>
             <UI5Icon

package/src/Tag.ts

@@ -2,7 +2,7 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -10,7 +10,7 @@ import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UDExIconPlacement from "./types/IconPlacement.js";
 
-import TagTemplate from "./generated/templates/TagTemplate.lit.js";
+import TagTemplate from "./TagTemplate.js";
 
 // Styles
 import TagCss from "./generated/themes/Tag.css.js";
@@ -52,7 +52,7 @@ type UDExTagLinkClickEventDetail = {
  */
 @customElement({
   tag: "udex-tag",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TagCss,
   template: TagTemplate,
   dependencies: [Icon],

package/src/TagGroup.ts

@@ -6,12 +6,12 @@ import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
 import UDExTooltip from "./Tooltip.js";
 
-import TagGroupTemplate from "./generated/templates/TagGroupTemplate.lit.js";
+import TagGroupTemplate from "./TagGroupTemplate.js";
 
 // Styles
 import TagGroupCss from "./generated/themes/TagGroup.css.js";
@@ -48,7 +48,7 @@ type UDExTagKeydownEventDetail = {
  */
 @customElement({
   tag: "udex-tag-group",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TagGroupCss,
   template: TagGroupTemplate,
   dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],
@@ -160,18 +160,10 @@ class UDExTagGroup extends UI5Element {
     return this.readonly || this.displayonly;
   }
 
-  get tagTabIndex(): string {
-    return this.disabled ? "-1" : "";
-  }
-
   get tokenizer(): Tokenizer {
     return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;
   }
 
-  get tagRole(): string {
-    return this.displayonly || this.readonly ? "option" : "";
-  }
-
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
     this._nMoreBtn = this._tokenizer.moreLink || null;

package/src/TagGroupTemplate.tsx

@@ -0,0 +1,75 @@
+import type UDExTagGroup from "./TagGroup.js";
+import UDExTag from "./Tag.js";
+import UDExTooltip from "./Tooltip.js";
+import UI5Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+
+export default function TagTemplate(this: UDExTagGroup) {
+  const rootClass = "udex-tag-group";
+
+  return (
+    <>
+      <div class={`${rootClass}`}
+        id={`${this._id}-tag-group`}
+        role="group">
+        <UI5Tokenizer
+          part="tokenizer"
+          show-more
+          prevent-popover-open
+          disabled={this.disabled}
+          expanded={this.tokenizerExpanded}
+          id={`${this._id}-tag-group-tokenizer`}
+          class={`${rootClass}__tokenizer`}
+          onShowMoreItemsPress={this.showMoreItems}>
+          {this.items.map((item, index) => (
+            tag.call(this, rootClass, item, index)
+          ))}
+        </UI5Tokenizer>
+        {this._isHiddenTags && (
+          <>
+            <UDExTooltip
+              id={`${this._id}-tag-group-tooltip`}
+              placement={this.tooltipPlacement}
+              onKeyDown={this.handleShowMoreButtonKeydown}>
+              <div
+                role="group"
+                class={`${rootClass}-tooltip__content`}>
+                {this.hiddenTags.map((item, index) => (
+                  tag.call(this, rootClass, item, index)
+                ))}
+              </div>
+            </UDExTooltip>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+function tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {
+  return (
+    <>
+      <UDExTag
+        key={index}
+        accessibleRole="option"
+        class={`${rootClass}__tag`}
+        data-id={`${item.id}`}
+        part={`token-${index}`}
+        read-only={this.isReadOrDisplayOnly}
+        id={`${this._id}-tag-group-tag`}
+        text={item.text}
+        icon={item.icon}
+        href={item.href}
+        design={item.design}
+        size={item.size}
+        icon-placement={item.iconPlacement}
+        accessible-name={item.accessibleName}
+        non-selectable={item.nonSelectable}
+        data-overflows={item.overflows}
+        onKeyDown={this.handleTagKeyDown}
+        onSelectionChange={this.handleTagClick}
+        onIconClick={this.tagIconClickHandler}
+        {...(this.disabled ? { tabindex: -1 } : {})}>
+      </UDExTag>
+    </>
+  );
+}

package/src/TagTemplate.tsx

@@ -0,0 +1,79 @@
+import type UDExTag from "./Tag.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+
+export default function TagTemplate(this: UDExTag) {
+  const rootClass = "udex-tag";
+
+  return (
+    this.readOnly ? (
+      <div class={this.tagClasses}>
+        <span class={`${rootClass}__text`}>{this.text}</span>
+      </div>
+    ) : this.href ? (
+      <a class={this.tagClasses}
+        role={this.accessibleRole as AriaRole}
+        href={this.href}
+        onClick={this.tagLinkClickHandler}>
+        {tagContent.call(this, rootClass)}
+      </a>
+    ) : this.nonSelectable ? (
+      <div class={this.tagClasses}>
+        {tagContent.call(this, rootClass, false, true)}
+      </div>
+    ) : (
+      <div
+        tabindex={this._tabIndex}
+        class={this.tagClasses}
+        onClick={this.tagClickHandler}
+        onFocusIn={this._focusin}
+        onFocusOut={this._focusout}
+        onKeyDown={this.tagKeyDown}
+        role={this.accessibleRole as AriaRole}
+        aria-label={this.accessibleName}
+        aria-pressed={this.selected}>
+        {tagContent.call(this, rootClass, true)}
+      </div>
+    )
+  );
+}
+
+function tagContent(this: UDExTag, rootClass: string, isIconClickable: boolean = false, isIconBtn: boolean = false) {
+  return (
+    <>
+      {this.startIcon && (
+        isIconBtn ? tagBtnIcon.call(this, rootClass, "start")
+          : tagIcon.call(this, rootClass, "start", isIconClickable))}
+      <span class={`${rootClass}__text`}>{this.text}</span>
+      {this.endIcon && (
+        isIconBtn ? tagBtnIcon.call(this, rootClass, "end")
+          : tagIcon.call(this, rootClass, "end", isIconClickable))}
+    </>
+  );
+}
+
+function tagBtnIcon(this: UDExTag, rootClass: string, iconType: string) {
+  return (
+    <>
+      <button
+        class={`${rootClass}__btn-icon`}
+        onClick={this.iconClickHandler}
+        role={this.accessibleRole as AriaRole}
+        aria-label={this.iconAccessibleName}>
+        {tagIcon.call(this, rootClass, iconType)}
+      </button>
+    </>
+  );
+}
+
+function tagIcon(this: UDExTag, rootClass: string, iconType: string, isIconClickable: boolean = false) {
+  return (
+    <>
+      <UI5Icon
+        class={`${rootClass}__icon ${rootClass}__icon--${iconType}`}
+        name={this.icon}
+        {...(isIconClickable ? { onClick: this.iconClickHandler } : {})}>
+      </UI5Icon>
+    </>
+  );
+}