@sapudex/web-components 2.11.0 → 2.12.0

package/package.json

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

package/src/Button.ts

@@ -8,6 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 
@@ -77,6 +78,15 @@ class UDExButton extends Button {
   @property({ type: Boolean })
     _ariaDisabled!: boolean;
 
+  /**
+   * Defines if button should wrap text inside
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: String })
+    wrappingType: `${WrappingType}` = WrappingType.None;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/List.hbs

@@ -13,7 +13,6 @@
                 class="udex-list"
                 role="{{accessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
-                aria-label="{{accessibleName}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </div>
@@ -27,7 +26,6 @@
         class="udex-list"
         role="{{accessibleRole}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}"
         aria-busy="{{ariaBusy}}">
         <slot></slot>
     </div>

package/src/List.ts

@@ -135,12 +135,21 @@ class UDExList extends UI5Element {
   /**
    * Defines the name of the UI5 Icon, that will be displayed for each item of the list.
    *
-   * @defaultv ""
-   * @private
+   * @default ""
+   * @public
    */
   @property({ type: String })
     itemIcon: string = "";
 
+  /**
+   * Enables tab navigation for the list.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    tabNavigationEnabled?: boolean;
+
   /**
    * Slot for list items.
    *
@@ -167,6 +176,9 @@ class UDExList extends UI5Element {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
+    if (this.tabNavigationEnabled) {
+      return;
+    }
     if (isUp(e)) {
       this.handleUpArrow(e);
     }
@@ -323,8 +335,10 @@ class UDExList extends UI5Element {
       clickedItem.selected = true;
     }
 
-    this.resetTabIndexes();
-    clickedItem._tabIndex = "0";
+    if (!this.tabNavigationEnabled) {
+      this.resetTabIndexes();
+      clickedItem._tabIndex = "0";
+    }
 
     this.fireDecoratorEvent("selection-change", {
       listItems: this.getItemsFromList(),
@@ -406,6 +420,10 @@ class UDExList extends UI5Element {
   }
 
   getTabIndex(index: number, item: UDExListItemBase): string {
+    if (this.tabNavigationEnabled) {
+      return "0";
+    }
+
     const isFirstItem = this.modeSelected && index === 0;
     const isFirstItemInGroupList = this.isGroupList && index === 1;
     const listGroupHeader = item.closest("[udex-list-group-header]") as UDExListGroupHeader;
@@ -433,10 +451,11 @@ class UDExList extends UI5Element {
   }
 
   get ariaLabelModeText(): string {
-    if (this.modeSingleSelect || this.modeRadioGroup) {
-      return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
-    }
-    return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+    const defaultText = this.modeSingleSelect || this.modeRadioGroup
+      ? ARIA_LABEL_LIST_SELECTABLE
+      : ARIA_LABEL_LIST_MULTISELECTABLE;
+
+    return this.accessibleName || UDExList.i18nBundle.getText(defaultText);
   }
 
   get ariaLabelledBy(): string {

package/src/ListGroupHeader.ts

@@ -6,6 +6,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./generated/templates/ListGroupHeaderTemplate.lit.js";
 import { UDExListItemSize } from "./types/List.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -48,7 +49,7 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
 class UDExListGroupHeader extends UDExListGroupHeaderBase {
   eventDetails!: {
     "header-press": UDExListGroupHeaderBaseHeaderPressEventDetail,
-  };
+  } & UDExListItemBaseEvents;
 
   handleHeaderPress() {
     if (!this.controlled) {

package/src/ListItem.hbs

@@ -74,6 +74,13 @@
                 shape="{{imageShape}}"
                 size="{{imageSize}}"
                 part="avatar">
+                {{#if imageBadgeState}}
+                    <udex-status-badge
+                        slot="badge"
+                        value-state="{{imageBadgeState}}"
+                        size="{{imageSize}}">
+                    </udex-status-badge>
+                {{/if}}
                 <img src="{{image}}" alt="{{imageAlt}}" />
             </udex-avatar>
         {{/if}}
@@ -86,6 +93,13 @@
                     {{/if}}
                     <slot part="content"></slot>
                 </div>
+                {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
+                {{#if hasFirstIcon}}
+                  <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                {{/if}}
+                {{#if hasSecondIcon}}
+                  <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                {{/if}}
             {{else}}
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
@@ -93,10 +107,10 @@
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
                 {{#if hasFirstIcon}}
-                    <slot name="firstIcon"></slot>
+                    <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
                 {{#if hasSecondIcon}}
-                    <slot name="secondIcon"></slot>
+                    <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
             {{/if}}
         </div>

package/src/ListItem.ts

@@ -7,10 +7,13 @@ import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UDExCheckbox from "./Checkbox.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import UDExListItemBase from "./ListItemBase.js";
 import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 import UDExButton from "./Button.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import {
   UDExListItemSize, UDExListMode, UDExAdditionalTextState,
 } from "./types/List.js";
@@ -68,6 +71,7 @@ type UDExListItemItemPressEventDetail = {
     UDExButton,
     UDExRadioButton,
     UDExCheckbox,
+    UDExStatusBadge,
     Icon,
   ],
 })
@@ -89,7 +93,16 @@ class UDExListItem extends UDExListItemBase {
   eventDetails!: {
     "item-press": UDExListItemItemPressEventDetail,
     "item-focus": UDExListItemBaseEventDetail,
-  };
+  } & UDExListItemBaseEvents;
+  /**
+   * Defines the image badge state of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    imageBadgeState?: `${UDExStatusBadgeValueState}`;
+
   /**
    * Defines the accessible name of the item.
    *
@@ -190,6 +203,7 @@ class UDExListItem extends UDExListItemBase {
    */
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
+
   /**
    * Slot for first icon.
    *
@@ -198,6 +212,7 @@ class UDExListItem extends UDExListItemBase {
    */
   @slot({ type: UDExButton })
     firstIcon!: Array<UDExButton>;
+
   /**
    * Slot for second icon.
    *
@@ -261,6 +276,10 @@ class UDExListItem extends UDExListItemBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
+    if (this.firstIconElement === e.target || this.secondIconElement === e.target) {
+      return;
+    }
+
     if (isSpace(e)) {
       e.preventDefault();
     }
@@ -324,6 +343,14 @@ class UDExListItem extends UDExListItemBase {
     return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();
   }
 
+  get firstIconElement(): UDExButton {
+    return this.getSlottedNodes<UDExButton>("firstIcon")[0];
+  }
+
+  get secondIconElement(): UDExButton {
+    return this.getSlottedNodes<UDExButton>("secondIcon")[0];
+  }
+
   get hasFirstIcon(): boolean {
     return !!this.firstIcon;
   }
@@ -357,7 +384,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get accessibleListItemName(): string {
-    return this.accessibleName || this.label;
+    return this.accessibleName || this.label?.replace(/<[^>]+>/g, "");
   }
 
   get stateAccessibleName(): string {

package/src/ListItemBase.ts

@@ -1,9 +1,20 @@
 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 { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
 
+type UDExListItemBaseEventDetail = {
+  originalEvent: PointerEvent,
+  item: HTMLElement,
+}
+
+export type UDExListItemBaseEvents = {
+  "first-icon-click": UDExListItemBaseEventDetail,
+  "second-icon-click": UDExListItemBaseEventDetail,
+}
+
 /**
  * @class
  *
@@ -20,7 +31,22 @@ import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.
   renderer: litRender,
 })
 
+/**
+ * Fired event when the user click on a first icon.
+ *
+ * @public
+ */
+@event("first-icon-click", { bubbles: true })
+/**
+ * Fired event when the user click on a second icon.
+ *
+ * @public
+ */
+@event("second-icon-click", { bubbles: true })
+
 class UDExListItemBase extends UI5Element {
+  eventDetails!: UDExListItemBaseEvents;
+
   /**
    * Defines the <code>label</code> for the item.
    *
@@ -114,6 +140,22 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _tabIndex!: string;
 
+  _fireIconClickEvent(e: PointerEvent): void {
+    const target = e.target as HTMLElement;
+    const slot = target.getAttribute("slot");
+    if (slot === "firstIcon") {
+      this.fireDecoratorEvent("first-icon-click", {
+        originalEvent: e,
+        item: this,
+      });
+    } else if (slot === "secondIcon") {
+      this.fireDecoratorEvent("second-icon-click", {
+        originalEvent: e,
+        item: this,
+      });
+    }
+  }
+
   get _effectiveTabIndex(): string {
     if (this.disabled) {
       return "-1";

package/src/ListSelectAll.ts

@@ -9,6 +9,7 @@ import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
 import UDExListItem from "./ListItem.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -50,7 +51,7 @@ type UDExListSelectAllSelectAllEventDetail = {
 class UDExListSelectAll extends UDExListGroupHeaderBase {
   eventDetails!: {
     "select-all": UDExListSelectAllSelectAllEventDetail,
-  };
+  } & UDExListItemBaseEvents;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/MastheadItem.ts

@@ -23,6 +23,8 @@ import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
@@ -398,6 +400,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   handleItemClick(e: PointerEvent): void {
+    if (this.isProfileBtn) {
+      this.profileSlot.closeIdentitiesPanel();
+    }
     this.handleSelectedChange();
     this.fireItemClickEvent(e);
     this.fireDropdownEvents();
@@ -626,6 +631,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
   }
 
+  get profileSlot(): UDExMastheadProfileMenu {
+    return this.getSlottedNodes<UDExMastheadProfileMenu>("dropdown")[0];
+  }
+
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }

package/src/MastheadProfileMenu.hbs

@@ -1,4 +1,14 @@
-<div class="udex-masthead-profile-menu">
+<div
+  @keydown="{{handleKeydown}}"
+  class="{{rootClass}}">
+  {{#if _openIdentities}}
+    {{> account-indetities}}
+  {{else}}
+    {{> account-profile}}
+  {{/if}}
+</div>
+
+{{#*inline "account-profile"}}
   <div class="udex-masthead-profile-menu__header">
     {{#if userData}}
       <udex-avatar
@@ -6,35 +16,89 @@
         size="L"
         initials="{{userData.avatarInitials}}">
         {{#if userData.avatarUrl}}
-            <img src="{{userData.avatarUrl}}" alt="avatar"/>
+          <img src="{{userData.avatarUrl}}" alt="avatar"/>
         {{/if}}
       </udex-avatar>
       <div>
         <p class="udex-profile-menu__account-name">{{userData.name}}</p>
         <p class="udex-profile-menu__account-email">{{userData.email}}</p>
+        {{#if hasIdentities}}
+          <udex-button
+            @click="{{handleSwitcherClick}}"
+            class="udex-masthead-profile-menu__btn-switcher"
+            size="Large"
+            end-icon="slim-arrow-right"
+            design="Invisible">
+            {{switcherAccountText}}
+          </udex-button>
+        {{/if}}
       </div>
     {{/if}}
   </div>
   {{#if messageAvailable}}
     <div class="udex-masthead-profile-menu__message">
-        <slot name="message"></slot>
+      <slot name="message"></slot>
     </div>
   {{/if}}
   <div class="udex-masthead-profile-menu__links">
     <udex-masthead-menu
-        part="menu"
-        exportparts="badge, menu-item"
-        sub-items='{{linksList}}'
-        @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
+      exportparts="badge, menu-item"
+      part="menu"
+      sub-items='{{linksList}}'
+      @ui5-menu-item-click="{{handleProfileMenuItemClick}}">
     </udex-masthead-menu>
     {{#if logoutLink}}
-        <div class="udex-masthead-profile-menu__actions">
-            <udex-masthead-menu-item
-                @click="{{handleUserLogoutItemClick}}"
-                url="{{logoutUrl}}"
-                label="{{logoutText}}">
-            </udex-masthead-menu-item>
-        </div>
+      <div class="udex-masthead-profile-menu__actions">
+        <udex-masthead-menu-item
+          @click="{{handleUserLogoutItemClick}}"
+          label="{{logoutText}}"
+          url="{{logoutUrl}}">
+        </udex-masthead-menu-item>
+      </div>
     {{/if}}
   </div>
-</div>
+{{/inline}}
+
+{{#*inline "account-indetities"}}
+  <div class="udex-masthead-profile-menu__header-wrap back-btn">
+    <udex-masthead-menu-item
+      class="udex-masthead-profile-menu__btn-back"
+      @click="{{handleSwitcherClick}}"
+      label="{{btnBackText}}"
+      type="Button"
+      icon-start>
+    </udex-masthead-menu-item>
+    <span class="udex-masthead-profile-menu__switcher-title">{{switcherAccountText}}</span>
+  </div>
+  <div class="udex-masthead-profile-menu__identities-list-wrap">
+    <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
+    {{#if identitiesList.length}}
+      <udex-list
+        class="udex-masthead-profile-menu__identities-list"
+        mode="SingleSelect"
+        accessible-name="{{listTitleText}}"
+        controlled>
+        {{#each identitiesList}}
+          <udex-list-item
+            id="{{this.idsUser}}"
+            class="udex-masthead-profile-menu__identities-list-item"
+            @ui5-item-press="{{../fireEventIdentityItemClick}}"
+            supporting-text="{{this.supportingText}}"
+            image-badge-state="{{this.statusBadge}}"
+            image="{{this.avatarUrl}}"
+            image-alt="{{this.name}}">
+            {{this.email}}
+          </udex-list-item>
+        {{/each}}
+      </udex-list>
+    {{/if}}
+    <udex-button
+      @click="{{fireEventAddOrRemoveAccountClick}}"
+      class="udex-masthead-profile-menu__add-remove-btn"
+      design="Primary"
+      end-icon="action"
+      size="Large">
+      {{addOrRemoveAccountText}}
+    </udex-button>
+  </div>
+{{/inline}}