@sapudex/web-components 2.26.0 → 2.28.0

package/dist/vscode.html-custom-data.json

@@ -2822,6 +2822,11 @@
           "name": "total-count",
           "description": "The number of total votes.",
           "values": []
+        },
+        {
+          "name": "rating-count",
+          "description": "The number of the rating.",
+          "values": []
         }
       ],
       "references": []
@@ -3789,7 +3794,7 @@
     },
     {
       "name": "udex-tab",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the tab.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content of the tab.\n- **link** - Defines the link(s) to be displayed in the tab header (vertical orientation only).\nUse this slot to add one or more udex-link elements to the tab button.",
       "attributes": [
         {
           "name": "number-badge",
@@ -3801,6 +3806,11 @@
           "description": "Defines the text of tab.",
           "values": []
         },
+        {
+          "name": "body-text",
+          "description": "Defines the body text (supplementary description) of the tab.\nOptional text to provide additional context or explanation.",
+          "values": []
+        },
         {
           "name": "accessible-name",
           "description": "Accessible name for tab.",
@@ -3853,6 +3863,11 @@
           "description": "Defines the mode of the component.",
           "values": [{ "name": "Light" }, { "name": "Dark" }]
         },
+        {
+          "name": "orientation",
+          "description": "Defines the orientation of the tab navigation.",
+          "values": [{ "name": "Vertical" }, { "name": "Horizontal" }]
+        },
         {
           "name": "icon-without-background",
           "description": "Defines the background color of the component.",

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.26.0",
+  "version": "2.28.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6212,6 +6212,11 @@
               "name": "total-count",
               "description": "The number of total votes.",
               "value": { "type": "number" }
+            },
+            {
+              "name": "rating-count",
+              "description": "The number of the rating.",
+              "value": { "type": "number" }
             }
           ],
           "events": [],
@@ -6226,6 +6231,11 @@
                 "name": "total-count",
                 "description": "The number of total votes.",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "rating-count",
+                "description": "The number of the rating.",
+                "value": { "type": "number" }
               }
             ],
             "events": []
@@ -8108,7 +8118,7 @@
         },
         {
           "name": "udex-tab",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the tab.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/Tab.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the tab.\n- **link** - Defines the link(s) to be displayed in the tab header (vertical orientation only).\nUse this slot to add one or more udex-link elements to the tab button.",
           "doc-url": "",
           "attributes": [
             {
@@ -8121,6 +8131,11 @@
               "description": "Defines the text of tab.",
               "value": { "type": "string" }
             },
+            {
+              "name": "body-text",
+              "description": "Defines the body text (supplementary description) of the tab.\nOptional text to provide additional context or explanation.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "accessible-name",
               "description": "Accessible name for tab.",
@@ -8158,6 +8173,10 @@
             {
               "name": "default",
               "description": "Defines the content of the tab."
+            },
+            {
+              "name": "link",
+              "description": "Defines the link(s) to be displayed in the tab header (vertical orientation only).\nUse this slot to add one or more udex-link elements to the tab button."
             }
           ],
           "events": [],
@@ -8173,6 +8192,11 @@
                 "description": "Defines the text of tab.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "body-text",
+                "description": "Defines the body text (supplementary description) of the tab.\nOptional text to provide additional context or explanation.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "accessible-name",
                 "description": "Accessible name for tab.",
@@ -8230,6 +8254,14 @@
                 "default": "\"Light\""
               }
             },
+            {
+              "name": "orientation",
+              "description": "Defines the orientation of the tab navigation.",
+              "value": {
+                "type": "\"Vertical\" | \"Horizontal\"",
+                "default": "\"Horizontal\""
+              }
+            },
             {
               "name": "icon-without-background",
               "description": "Defines the background color of the component.",
@@ -8264,6 +8296,11 @@
                 "description": "Defines the mode of the component.",
                 "value": { "type": "\"Light\" | \"Dark\"" }
               },
+              {
+                "name": "orientation",
+                "description": "Defines the orientation of the tab navigation.",
+                "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+              },
               {
                 "name": "icon-without-background",
                 "description": "Defines the background color of the component.",

package/package.json

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

package/src/RatingIndicator.ts

@@ -11,7 +11,7 @@ import RatingIndicatorTemplate from "./RatingIndicatorTemplate.js";
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { TOTAL } from "./generated/i18n/i18n-defaults.js";
+import { TOTAL, RATING_COUNT_TITLE } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
 import "@ui5/webcomponents-icons/dist/unfavorite.js";
@@ -59,20 +59,32 @@ class UDExRatingIndicator extends RatingIndicator {
   @property()
     totalCount!: number;
 
+  /**
+   * The number of the rating.
+   *
+   * @public
+   */
+  @property()
+    ratingCount!: number;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   get _ariaLabel(): string {
-    const ariaLabelText: string = getEffectiveAriaLabelText(this) || "";
-    if (this.totalCount) {
-      return `${ariaLabelText ? `${ariaLabelText}, ` : ""}${translate(RatingIndicator, TOTAL)} ${this.totalCount}`;
-    }
-    return ariaLabelText;
+    const ariaLabelText = getEffectiveAriaLabelText(this) || "";
+    const ratingText = this.ratingCount ? `${translate(RatingIndicator, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
+    const totalText = this.totalCount ? `${translate(RatingIndicator, TOTAL)} ${this.totalCount}` : "";
+
+    return [ariaLabelText, ratingText, totalText].filter(Boolean).join(", ");
   }
 
   get hasTotalCount(): boolean {
     return !!this.totalCount || this.totalCount === 0;
   }
+
+  get hasRatingCount(): boolean {
+    return !!this.ratingCount || this.ratingCount === 0;
+  }
 }
 
 UDExRatingIndicator.define();

package/src/RatingIndicatorTemplate.tsx

@@ -1,6 +1,12 @@
 import type UDExRatingIndicator from "./RatingIndicator.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 
+type Star = {
+  selected: boolean;
+  index: number;
+  halfStar: boolean;
+};
+
 export default function RatingIndicatorTemplate(this: UDExRatingIndicator) {
   const rootClass = "udex-rating-indicator";
   const ui5Class = "ui5-rating-indicator";
@@ -32,22 +38,44 @@ export default function RatingIndicatorTemplate(this: UDExRatingIndicator) {
               "udex-rating-indicator__item ui5-rating-indicator-item": true,
               "udex-rating-indicator__item-sel ui5-rating-indicator-item-sel": star.selected,
               "udex-rating-indicator__item-unsel ui5-rating-indicator-item-unsel": !star.selected && !star.halfStar,
-              "udex-rating-indicator__item-half ui5-rating-indicator-item-half": star.halfStar && !star.selected,
+              "udex-rating-indicator__item-half ui5-rating-indicator-item-half udex-rating-indicator__item-unsel": star.halfStar && !star.selected,
             }}>
-            <UI5Icon data-ui5-value={star.index} name={star.selected ? "favorite" : "unfavorite"}></UI5Icon>
-            {star.halfStar && (
-              <div class={`${rootClass}__half-icon-wrapper ${ui5Class}-half-icon-wrapper`}>
-                <UI5Icon data-ui5-value={star.index} name="favorite" class={`${rootClass}__half-icon ${ui5Class}-half-icon`}></UI5Icon>
-              </div>
-            )}
+            {starRender.call(this, star, ui5Class, rootClass)}
           </li>
         ))}
       </ul>
-      {this.hasTotalCount && (
+      {(this.hasRatingCount || this.hasTotalCount) && (
         <div class={`${rootClass}__total`}>
-          &#40;{this.totalCount}&#41;
+          {this.hasRatingCount && <>{this.ratingCount} </>}
+          {this.hasTotalCount && <>&#40;{this.totalCount}&#41;</>}
         </div>
       )}
     </div>
   );
 }
+
+function starRender(this: UDExRatingIndicator, star: Star, ui5Class: string, rootClass: string) {
+  if (star.selected) {
+    return (
+      <UI5Icon data-ui5-value={star.index} name="favorite"/>
+    );
+  }
+  if (star.halfStar) {
+    return (
+      <>
+        <UI5Icon data-ui5-value={star.index} name={this.readonly ? "favorite" : "unfavorite"}/>
+        <div class={`${rootClass}__half-icon-wrapper ${ui5Class}-half-icon-wrapper`}>
+          <UI5Icon data-ui5-value={star.index} name="favorite" class={`${rootClass}__half-icon ${ui5Class}-half-icon`}></UI5Icon>
+        </div>
+      </>
+    );
+  }
+  if (this.readonly) {
+    return (
+      <UI5Icon data-ui5-value={star.index} name="favorite"/>
+    );
+  }
+  return (
+    <UI5Icon data-ui5-value={star.index} name="unfavorite"/>
+  );
+}

package/src/Review.ts

@@ -10,10 +10,10 @@ import "@ui5/webcomponents-icons/dist/favorite.js";
 import type UDExRatingBar from "./RatingBar.js";
 import type UDExButton from "./Button.js";
 import ReviewTemplate from "./ReviewTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ReviewCss from "./generated/themes/Review.css.js";
-import translate from "./utils/translate.js";
 
 /**
  * @class

package/src/SelectBase.ts

@@ -1,5 +1,6 @@
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import {
   isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -183,7 +184,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
   onEnterDOM() {
     ResizeHandler.register(this, this._handleResizeBound);
-    if (this.modeSingleSelect) {
+    if (this.modeSingleSelect && this.hasSelectedItems) {
       this.setSelectOption();
     }
   }
@@ -192,6 +193,12 @@ class UDExSelectBase extends UDExSearchableListBase {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
+  onInvalidation({ name }: ChangeInfo): void {
+    if (name === "default") {
+      this.setSelectOption();
+    }
+  }
+
   onAfterRendering() {
     this._popover = this.getPopover();
     this._search = this.getSearch();

package/src/Tab.ts

@@ -25,14 +25,18 @@ export interface ITab extends UI5Element {
   selected?: boolean;
   numberBadge?: string;
   text?: string;
+  bodyText?: string;
   showAttentionBadge?: boolean;
   accessibleName?: string;
   href?: string;
   content?: Array<Node>;
+  link?: Array<HTMLElement>;
   hasIcon: boolean;
+  isMobile: boolean;
   isOnSelectedTab: boolean;
   hasNotIcon: boolean;
   hasNotHref: boolean;
+  hasLinkSlot: boolean;
   selectedClass: string;
   tabNavigation: any;
   _individualSlot: string;
@@ -40,6 +44,8 @@ export interface ITab extends UI5Element {
   _slotName: string;
   _selected?: boolean;
   _tabIndex: string;
+  _isMobile: boolean;
+  _isVertical: boolean;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -91,6 +97,16 @@ class UDExTab extends UI5Element implements ITab {
    */
   @property({ type: String })
     text!: string;
+
+  /**
+   * Defines the body text (supplementary description) of the tab.
+   * Optional text to provide additional context or explanation.
+   *
+   * @public
+   */
+  @property({ type: String })
+    bodyText?: string;
+
   /**
    * Accessible name for tab.
    *
@@ -167,6 +183,32 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     _tabIndex!: string;
 
+  /**
+   * Defines if the viewport is mobile size.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isMobile: boolean = false;
+
+  /**
+   * Defines if the tab navigation is in vertical orientation.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isVertical: boolean = false;
+
+  /**
+   * Defines the width of the tab.
+   *
+   * @private
+   */
+  @property({ type: String, noAttribute: true })
+    _width?: string;
+
   /**
    * Defines the background color of the component.
    *
@@ -185,6 +227,16 @@ class UDExTab extends UI5Element implements ITab {
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
 
+  /**
+   * Defines the link(s) to be displayed in the tab header (vertical orientation only).
+   * Use this slot to add one or more udex-link elements to the tab button.
+   *
+   * @slot link
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    link!: Array<HTMLElement>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -219,6 +271,14 @@ class UDExTab extends UI5Element implements ITab {
     return this.hasIcon ? " udex-tab-navigation__button-tab--icon" : "";
   }
 
+  get isMobile(): boolean {
+    return this._isMobile;
+  }
+
+  get isMobileVertical(): boolean {
+    return this._isMobile && this._isVertical;
+  }
+
   get hasNotIcon(): boolean {
     return !this.icon && this.showAttentionBadge;
   }
@@ -227,6 +287,37 @@ class UDExTab extends UI5Element implements ITab {
     return !this.href;
   }
 
+  get hasBodyText(): boolean {
+    return !!this.bodyText;
+  }
+
+  /**
+   * Returns true if aria-describedby should point to bodyText.
+   * Only applies to selected tabs with bodyText in vertical orientation.
+   */
+  get ariaDescribedByBodyText(): boolean {
+    return this.effectiveSelected && this.hasBodyText && this._isVertical;
+  }
+
+  get hasLinkSlot(): boolean {
+    return this.link && this.link.length > 0;
+  }
+
+  /**
+   * Returns the HTML content of the link slot elements.
+   * This is used to render the links in the TabHeader template.
+   */
+  get linkSlotHtml(): string {
+    if (!this.link || this.link.length === 0) {
+      return "";
+    }
+    return this.link.map(l => l.outerHTML).join("");
+  }
+
+  get hasBodyTextOrLink(): boolean {
+    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
+  }
+
   get effectiveSelected(): boolean {
     return this.selected || this._selected;
   }
@@ -265,6 +356,13 @@ class UDExTab extends UI5Element implements ITab {
     return this.href && this.effectiveSelected ? "1" : "-1";
   }
 
+  get widthStyle(): string {
+    if (this._width && this._width !== "auto") {
+      return `width: ${this._width};`;
+    }
+    return "";
+  }
+
   get tabNavigation() {
     return executeTemplate(UDExTab.headerTemplate, this);
   }

package/src/TabHeader.hbs

@@ -1,34 +1,81 @@
-{{#if hasNotHref}}
-    <button
-        id="{{this._id}}"
-        class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
-        tabindex="{{this._tabIndex}}"
-        type="button"
-        role="tab"
-        aria-describedby="udex-tab-navigation__{{this._id}}__accessible-name"
-        aria-posinset="{{this._posinset}}"
-        aria-setsize="{{this._setsize}}"
-        aria-controls="{{this._contentId}}"
-        aria-selected="{{this.effectiveSelected}}"
-        aria-labelledby="{{this.ariaLabelledBy}}"
+{{#if hasBodyTextOrLink}}
+    <div class="udex-tab-navigation__tab-wrapper"
+        role="presentation"
         ._realTab="{{this}}"
-        style="width: {{this._width}};">
-        {{>tab-content}}
-    </button>
+        {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}>
+        {{#if hasNotHref}}
+            <button
+                id="{{this._id}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                type="button"
+                role="tab"
+                tabindex="{{this._tabIndex}}"
+                aria-posinset="{{this._posinset}}"
+                aria-setsize="{{this._setsize}}"
+                aria-controls="{{this._contentId}}"
+                aria-selected="{{this.effectiveSelected}}">
+                {{>tab-content}}
+                {{#if this.ariaDescribedByBodyText}}
+                    <span class="visually-hidden">{{bodyText}}</span>
+                {{/if}}
+            </button>
+        {{else}}
+            <a
+                id="{{this._id}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                href="{{href}}"
+                target="{{target}}"
+                role="tab"
+                tabindex="{{this.linkTabIndex}}"
+                aria-posinset="{{this._posinset}}"
+                aria-setsize="{{this._setsize}}">
+                {{>tab-content}}
+                {{#if this.ariaDescribedByBodyText}}
+                    <span class="visually-hidden">{{bodyText}}</span>
+                {{/if}}
+            </a>
+        {{/if}}
+        {{#if hasBodyText}}
+            <p class="udex-tab-navigation__button-body-text">{{bodyText}}</p>
+        {{/if}}
+        {{#if hasLinkSlot}}
+            <div class="udex-tab-navigation__button-links">
+                {{{linkSlotHtml}}}
+            </div>
+        {{/if}}
+    </div>
 {{else}}
-    <a
-        id="{{this._id}}"
-        class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
-        tabindex="{{this.linkTabIndex}}"
-        role="tab"
-        aria-posinset="{{this._posinset}}"
-        aria-setsize="{{this._setsize}}"
-        href="{{href}}"
-        target="{{target}}"
-        style="max-width: {{this._maxWidth}}px; width: {{this._width}};"
-        ._realTab="{{this}}">
-        {{>tab-content}}
-    </a>
+    {{#if hasNotHref}}
+        <button
+            id="{{this._id}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            tabindex="{{this._tabIndex}}"
+            type="button"
+            role="tab"
+            aria-describedby="udex-tab-navigation__{{this._id}}__accessible-name"
+            aria-posinset="{{this._posinset}}"
+            aria-setsize="{{this._setsize}}"
+            aria-controls="{{this._contentId}}"
+            aria-selected="{{this.effectiveSelected}}"
+            ._realTab="{{this}}"
+            {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}>
+            {{>tab-content}}
+        </button>
+    {{else}}
+        <a
+            id="{{this._id}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            tabindex="{{this.linkTabIndex}}"
+            role="tab"
+            aria-posinset="{{this._posinset}}"
+            aria-setsize="{{this._setsize}}"
+            href="{{href}}"
+            target="{{target}}"
+            {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}
+            ._realTab="{{this}}">
+            {{>tab-content}}
+        </a>
+    {{/if}}
 {{/if}}
 
 {{#*inline "tab-content"}}
@@ -56,9 +103,14 @@
                 {{numberBadge}}
             </udex-badge>
         {{/if}}
+        {{#if hasNotIcon}}
+            <span class="udex-tab-navigation__button-badge"></span>
+        {{/if}}
     </p>
-    {{#if hasNotIcon}}
-        <span class="udex-tab-navigation__button-badge"></span>
-    {{/if}}
-    <span aria-hidden="true" class="hidden" id="udex-tab-navigation__{{this._id}}__accessible-name">{{accessibleNameText}}</span>
+    <span
+        class="visually-hidden"
+        id="udex-tab-navigation__{{this._id}}__accessible-name"
+    >
+        {{accessibleNameText}}
+    </span>
 {{/inline}}

package/src/TabNavigation.hbs

@@ -9,10 +9,25 @@
             class="udex-tab-navigation__header-tabs"
             role="tablist"
             aria-labelledby="tablist-{{_id}}"
+            aria-orientation="{{ariaOrientationValue}}"
             part="tab-navigation-header-tabs"
             @click="{{onTabClick}}">
             {{#each items}}
                 {{this.tabNavigation}}
+                {{#if this.isMobileVertical}}
+                    {{#if this.selected}}
+                        <div
+                            class="udex-tab-navigation__content"
+                            part="tab-navigation-content">
+                            <div
+                                class="udex-tab-navigation__content-item"
+                                id="{{_contentId}}-mobile"
+                                aria-labelledby="{{_id}}">
+                                <slot name="{{this._slotName}}"></slot>
+                            </div>
+                        </div>
+                    {{/if}}
+                {{/if}}
             {{/each}}
         </div>
         <button
@@ -44,6 +59,7 @@
                 <div
                     class="udex-tab-navigation__content-item"
                     id="{{_contentId}}"
+                    aria-hidden="{{this.IsMobile}}"
                     aria-labelledby="{{_id}}">
                     <slot name="{{this._slotName}}"></slot>
                 </div>