@sapudex/web-components 2.11.0 → 2.12.0

package/src/MastheadProfileMenu.ts

@@ -6,16 +6,28 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
+import {
+  LOGOUT, SWITCH_ACCOUNT, BACK, OTHER_IDENTITIES, ADD_OR_REMOVE_ACCOUNT,
+} from "./generated/i18n/i18n-defaults.js";
+import { isEscape } from "@ui5/webcomponents-base/Keys.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
+import UDExButton from "./Button.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
-import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import type UDExMastheadShell from "./MastheadShell.js";
-
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
+import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 interface UserData {
   name?: string,
@@ -25,6 +37,24 @@ interface UserData {
   avatarInitials?: string
 }
 
+interface UserIdentity {
+  avatarUrl: string,
+  email: string,
+  name: string,
+  idsUser: string,
+  isLogged: boolean,
+}
+
+interface ExtendedUserIdentity extends UserIdentity {
+  supportingText: string;
+  statusBadge: string;
+}
+
+type UDExMastheadProfileMenuIdentityClickEventDetail = {
+  item: ExtendedUserIdentity;
+  analyticsName: AnalyticsName,
+};
+
 type UDExMastheadProfileMenuItemClickEventDetail = {
   item: UDExMastheadMenuItem,
   originalEvent: PointerEvent,
@@ -32,6 +62,10 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
   sourceNode: HTMLElement,
 }
 
+type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
+  analyticsName: AnalyticsName,
+}
+
 /**
  * @class
  *
@@ -54,27 +88,59 @@ type UDExMastheadProfileMenuItemClickEventDetail = {
   renderer: litRender,
   styles: [UDExMastheadMenu.styles, MastheadProfileMenuCss],
   template: MastheadProfileMenuTemplate,
-  dependencies: [UDExMastheadMenu],
+  dependencies: [
+    UDExMastheadMenuItem,
+    UDExMastheadMenu,
+    UDExListItem,
+    UDExButton,
+    UDExList,
+  ],
 })
 
 /**
  * Fired when use click Logout link
  * @public
  */
-@event("logout", { bubbles: true })
+@event("logout", { cancelable: true, bubbles: true })
 
 /**
  * Fires when profile menu item is clicked
  *
  * @public
  */
-@event("profile-item-click", { bubbles: true })
+@event("profile-item-click", { cancelable: true, bubbles: true })
+
+/**
+ * Fired when use click add or remove account button
+ *
+ * @public
+ */
+@event("add-or-remove-account-click", { cancelable: true, bubbles: true })
+
+/**
+ * Fires when identity item is clicked
+ *
+ * @public
+ */
+@event("identity-item-click", { cancelable: true, bubbles: true })
 
 class UDExMastheadProfileMenu extends UI5Element {
   eventDetails!: {
     "logout": UDExMastheadProfileMenuItemClickEventDetail,
-    "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail
+    "profile-item-click": UDExMastheadProfileMenuItemClickEventDetail,
+    "add-or-remove-account-click": UDExMastheadProfileMenuAddOrRemoveClickEventDetail,
+    "identity-item-click": UDExMastheadProfileMenuIdentityClickEventDetail,
   };
+
+  /**
+   * Defines the object of user identities
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    identities!: string;
+
   /**
    * Defines the object of link values
    *
@@ -110,6 +176,14 @@ class UDExMastheadProfileMenu extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  /**
+   * Defines the open identities panel state
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _openIdentities: boolean = false;
+
   /**
    * Placeholder for message strip.
    *
@@ -122,25 +196,115 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _mastheadShell!: UDExMastheadShell;
+  _handleResizeBound: ResizeObserverCallback;
+  _shouldFocusBackBtn!: boolean;
+  _shouldFocusSwitchBtn!: boolean;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this.handleResize.bind(this);
+  }
 
   onAfterRendering(): void {
     this._mastheadShell = this.mastheadShell;
+    this.updateFocusState(this._shouldFocusBackBtn, this.focusBackBtn.bind(this));
+    this.updateFocusState(this._shouldFocusSwitchBtn, this.focusSwitchBtn.bind(this));
+    this.setMenuItemsMobileMode();
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  handleResize(): void {
+    this._isMobileMode = this.isMobile;
+
+    if (this.profileMenuLinks) {
+      this.profileMenuLinks._isMobileMode = this.isMobile;
+    }
+  }
+
+  handleSwitcherClick(): void {
+    this._openIdentities = !this._openIdentities;
+    this._shouldFocusBackBtn = this._openIdentities;
+    this._shouldFocusSwitchBtn = !this._openIdentities;
   }
 
   handleUserLogoutItemClick(e: PointerEvent): void {
     this.fireLogoutItemClick(e);
-    if (this.shouldCloseMenu) {
+    if (this._isMobileMode) {
       this.closeMenu();
     }
   }
 
   handleProfileMenuItemClick(e: CustomEvent): void {
     this.fireMenuItemClick(e);
-    if (this.shouldCloseMenu) {
+    if (this._isMobileMode) {
+      this.closeMenu();
+    }
+  }
+
+  updateFocusState(shouldFocus: boolean, focusMethod: () => void): void {
+    if (shouldFocus) {
+      focusMethod();
+      if (focusMethod === this.focusBackBtn) {
+        this._shouldFocusBackBtn = false;
+      } else if (focusMethod === this.focusSwitchBtn) {
+        this._shouldFocusSwitchBtn = false;
+      }
+    }
+  }
+
+  handleKeydown(e: KeyboardEvent): void {
+    if (isEscape(e) && this._openIdentities) {
+      this.closeIdentitiesPanel();
+    }
+  }
+
+  focusSwitchBtn(): void {
+    this.focusElement(".udex-masthead-profile-menu__btn-switcher");
+  }
+
+  focusBackBtn(): void {
+    this.focusElement(".udex-masthead-profile-menu__btn-back");
+  }
+
+  focusElement(selector: string): void {
+    const element = this.shadowRoot?.querySelector<UDExButton>(selector);
+    element?.focus();
+  }
+
+  fireEventIdentityItemClick(e: CustomEvent): void {
+    const { item } = e.detail;
+    const identity = this.identitiesList.find(({ idsUser }) => idsUser === item.id);
+    const eventPrevented = !this.fireDecoratorEvent("identity-item-click", {
+      item: identity!,
+      analyticsName: AnalyticsName.Header,
+    });
+
+    if (eventPrevented) {
+      e.preventDefault();
+    }
+
+    if (this._isMobileMode) {
       this.closeMenu();
     }
   }
 
+  fireEventAddOrRemoveAccountClick(e: CustomEvent<LinkClickEventDetail>): void {
+    const eventPrevented = !this.fireDecoratorEvent("add-or-remove-account-click", {
+      analyticsName: AnalyticsName.Header,
+    });
+
+    if (eventPrevented) {
+      e.preventDefault();
+    }
+  }
+
   fireLogoutItemClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
@@ -168,8 +332,14 @@ class UDExMastheadProfileMenu extends UI5Element {
     this._mastheadShell.mobileBtn?.focus();
   }
 
-  get shouldCloseMenu(): boolean {
-    return this._mastheadShell && this._mastheadShell.isMobileMenuMode;
+  closeIdentitiesPanel(): void {
+    this._openIdentities = false;
+  }
+
+  setMenuItemsMobileMode(): void {
+    if (this._isMobileMode && this.profileMenuLinks) {
+      this.profileMenuLinks._isMobileMode = true;
+    }
   }
 
   get linksList(): string {
@@ -178,10 +348,22 @@ class UDExMastheadProfileMenu extends UI5Element {
     }]) : "";
   }
 
+  get hasIdentities(): boolean {
+    return !!this.identities?.length;
+  }
+
   get userData(): UserData {
     return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
+  get identitiesList(): Array<ExtendedUserIdentity> {
+    return parseArrayFromString<ExtendedUserIdentity>(this.identities).map((identity: UserIdentity) => ({
+      ...identity,
+      statusBadge: identity.isLogged ? "" : UDExStatusBadgeValueState.Warning,
+      supportingText: [identity.name, identity.idsUser].filter(Boolean).join(", "),
+    }));
+  }
+
   get messageAvailable(): boolean {
     return !!this.message.length;
   }
@@ -190,13 +372,46 @@ class UDExMastheadProfileMenu extends UI5Element {
     return !!this.logoutUrl?.length;
   }
 
-  get logoutText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+  get rootClass(): string {
+    const root = "udex-masthead-profile-menu";
+    return this._openIdentities ? `${root} ${root}_switcher` : root;
   }
 
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
+
+  get profileMenuLinks(): UDExMastheadMenu | undefined | null {
+    return this.shadowRoot?.querySelector<UDExMastheadMenu>("[udex-masthead-menu]");
+  }
+
+  get btnBackText(): string {
+    return this._isMobileMode ? this.switcherAccountText : UDExMastheadProfileMenu.i18nBundle.getText(BACK);
+  }
+
+  get listTitleText(): string {
+    return `${UDExMastheadProfileMenu.i18nBundle.getText(OTHER_IDENTITIES)} (${this.identitiesList.length})`;
+  }
+
+  get addOrRemoveAccountText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(ADD_OR_REMOVE_ACCOUNT);
+  }
+
+  get switcherAccountText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(SWITCH_ACCOUNT);
+  }
+
+  get logoutText(): string {
+    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+  }
+
+  get isAtMostBreakpointSizeM(): boolean {
+    return BreakpointUtils.isAtMost("M");
+  }
+
+  get isMobile(): boolean {
+    return this.isAtMostBreakpointSizeM || this.mastheadShell?.isMobileMenuMode;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/MastheadShell.ts

@@ -540,6 +540,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this.isMobileMenuMode) {
       this.setMobileMenuHeight();
+      this.setProfileMobileMode();
     }
 
     this._shouldHandleResize = true;
@@ -861,6 +862,12 @@ class UDExMastheadShell extends UI5Element {
     this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 
+  setProfileMobileMode(): void {
+    if (this.profileMenu) {
+      this.profileMenu._isMobileMode = this.isMobileMenuMode;
+    }
+  }
+
   removeMobileMode(): void {
     this._isMobileMode = false;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -951,7 +958,6 @@ class UDExMastheadShell extends UI5Element {
       this.profileMenu,
       this.cartItem,
       this.supportItem,
-      this.profileMenu,
       this.profileMenuLinks,
       this.countrySelectorItem,
       this.countrySelectorMenu,

package/src/SearchableListBase.hbs

@@ -30,6 +30,7 @@
         role="{{roleForGroupList}}"
         accessible-role="{{accessibleRoleForList}}"
         class="udex-filter-menu__list"
+        ?tab-navigation-enabled="{{tabNavigationEnabled}}"
         ?controlled="{{isControlled}}"
         mode="{{mode}}">
         {{#each _filteredItems}}
@@ -43,7 +44,9 @@
                         supporting-text="{{this.item.supportingText}}"
                         ?disabled="{{this.item.disabled}}"
                         ?selected="{{this.item.selected}}"
-                        ?indeterminate="{{this.item.indeterminate}}">
+                        ?indeterminate="{{this.item.indeterminate}}"
+                        @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                        @ui5-second-icon-click="{{../fireSecondIconClickEvent}}">
                         {{#each this.groupItems}}
                             <udex-list-item
                                 role="{{../listItemRole}}"
@@ -51,7 +54,11 @@
                                 data-token-id="{{this._id}}"
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"
+                                @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                                @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                                 supporting-text="{{this.supportingText}}"
+                                additional-text="{{this.additionalText}}"
+                                additional-text-state="{{this.additionalTextState}}"
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
@@ -72,6 +79,8 @@
                         ?controlled="{{this.item.controlled}}"
                         ?disabled="{{this.item.disabled}}"
                         ?selected="{{this.item.selected}}"
+                        @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                        @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                         ?indeterminate="{{this.item.indeterminate}}">
                         {{#each this.groupItems}}
                             <udex-list-item
@@ -80,6 +89,10 @@
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"
                                 supporting-text="{{this.supportingText}}"
+                                additional-text="{{this.additionalText}}"
+                                additional-text-state="{{this.additionalTextState}}"
+                                @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                                @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
@@ -92,8 +105,12 @@
             {{else}}
                 <udex-list-item
                     role="none"
+                    @ui5-first-icon-click="{{../fireFirstIconClickEvent}}"
+                    @ui5-second-icon-click="{{../fireSecondIconClickEvent}}"
                     data-token-id="{{this.item._id}}"
                     supporting-text="{{this.item.supportingText}}"
+                    additional-text="{{this.item.additionalText}}"
+                    additional-text-state="{{this.item.additionalTextState}}"
                     ?disabled="{{this.item.disabled}}"
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"

package/src/SearchableListBase.ts

@@ -36,6 +36,13 @@ export type UDExSearchableListBaseEvents = {
   "submit-search": UDExSearchableListBaseSubmitSearchEventDetail,
   "reset-search": void,
   "change-search": UDExSearchableListBaseChangeSearchEventDetail,
+  "first-icon-click": UDExSelectBoxIconClickEventDetail,
+  "second-icon-click": UDExSelectBoxIconClickEventDetail,
+}
+
+type UDExSelectBoxIconClickEventDetail = {
+  originalEvent: PointerEvent,
+  item: UDExItemFromList,
 }
 
 /**
@@ -85,8 +92,31 @@ export type UDExSearchableListBaseEvents = {
  */
 @event("change-search", { bubbles: true })
 
+/**
+ * Fired event when the user clicks on the first icon.
+ *
+ * @public
+ */
+@event("first-icon-click", { bubbles: true })
+
+/**
+ * Fired event when the user clicks on the second icon.
+ *
+ * @public
+ */
+@event("second-icon-click", { bubbles: true })
+
 class UDExSearchableListBase extends UI5Element {
   eventDetails!: UDExSearchableListBaseEvents;
+  /**
+   * Enables tab navigation for the list.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    tabNavigationEnabled?: boolean;
+
   /**
    * Allows control over the height.
    * @public
@@ -215,7 +245,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onItemPress(e:CustomEvent) {
-    const dropdownItemId: string = e.detail.item.getAttribute("data-token-id");
+    const dropdownItemId: string = this.getDataTokenId(e);
     this.handleDropdownItemPress(dropdownItemId);
     this.fireSelectionChange(dropdownItemId);
   }
@@ -458,6 +488,22 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  fireFirstIconClickEvent(e: CustomEvent): void {
+    this._fireIconClickEvent("first-icon-click", e);
+  }
+
+  fireSecondIconClickEvent(e: CustomEvent): void {
+    this._fireIconClickEvent("second-icon-click", e);
+  }
+
+  private _fireIconClickEvent(eventName: "first-icon-click" | "second-icon-click", e: CustomEvent): void {
+    const id = this.getDataTokenId(e);
+    this.fireDecoratorEvent(eventName, {
+      originalEvent: e.detail.originalEvent,
+      item: this.getItemFromList(id),
+    });
+  }
+
   getFlattenItemsArray(array: Array<UDExProcessedItem>): (UDExProcessedItem | UDExListItemBase)[] {
     return array.flatMap(item => {
       if (item.isGroup) {

package/src/SelectBox.ts

@@ -123,6 +123,13 @@ type UDExSelectBoxRemoveEventDetail = {
  */
 @event("show-more", { bubbles: true })
 
+/**
+ * Fired before the dropdown pane is opened.
+ *
+ * @public
+ */
+@event("before-open", { bubbles: true })
+
 class UDExSelectBox extends UDExSearchableListBase {
   eventDetails!: {
     "remove": UDExSelectBoxRemoveEventDetail,
@@ -480,6 +487,10 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
+    if (this.tabNavigationEnabled) {
+      return;
+    }
+
     const isTabPrevPress = isTabPrevious(e) && !this._search;
     const isTabNextPress = isTabNext(e);
     const isEscapePress = isEscape(e);

package/src/SelectBoxItem.ts

@@ -2,6 +2,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import UDExListItemBase from "./ListItemBase.js";
+import property from "@ui5/webcomponents-base/decorators/property.js";
+import { UDExAdditionalTextState } from "./types/List.js";
+import UDExButton from "./Button.js";
 
 /**
  * @class
@@ -25,9 +28,45 @@ import UDExListItemBase from "./ListItemBase.js";
 @customElement({
   tag: "udex-select-box-item",
   renderer: litRender,
+  dependencies: [UDExButton],
 })
 
 class UDExSelectBoxItem extends UDExListItemBase {
+  /**
+   * Defines the additionalText, displayed at the end of the list item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    additionalText?: string;
+
+  /**
+   * Defines the state of the additionalText.
+   *
+   * @default "None"
+   * @public
+   */
+  @property()
+    additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;
+
+  /**
+   * Slot for first icon.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
+
+  /**
+   * Slot for second icon.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
+
   /**
    * Slot for item content.
    *

package/src/StatusBadge.ts

@@ -10,6 +10,7 @@ import "@ui5/webcomponents-icons/dist/edit.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import {
   STATUS_BADGE_TEXT,
   STATUS_BADGE_EDIT_TITLE,
@@ -40,14 +41,6 @@ export enum BadgeSize {
   XL = "XL",
 }
 
-export enum UDExStatusBadgeValueState {
-  Warning = "Warning",
-  Error = "Error",
-  Success = "Success",
-  Information = "Information",
-  Edit = "Edit"
-}
-
 /**
  * @class
  *

package/src/StepInputTemplate.tsx

@@ -56,6 +56,6 @@ export default function StepInputTemplate(this: UDExStepInput) {
         ></UDExControlButton>
       </>)
     }
-
+    <div class="hidden" aria-live="polite">{this._valuePrecisioned}</div>
   </div>);
 }