@sapudex/web-components 0.224.0 → 0.226.0

package/src/MastheadMobileMenu.ts

@@ -19,6 +19,8 @@ import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenu
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
 export type MobileItemClickEventDetail = {
+  category?: string,
+  isMobile: boolean,
   originalEvent: Event,
   item: UDExMastheadMenuItem,
 }
@@ -71,7 +73,13 @@ export type MobileItemClickEventDetail = {
  * @allowPreventDefault
  * @public
  */
-@event("explorer-menu-click")
+@event("explorer-menu-click", {
+  detail: {
+    originalEvent: {
+      type: Event,
+    },
+  },
+})
 
 class UDExMastheadMobileMenu extends UI5Element {
   /**
@@ -152,7 +160,7 @@ class UDExMastheadMobileMenu extends UI5Element {
     e.preventDefault();
     this.openExploreSapMenu(e);
     this.setFocusItemByIndex(0);
-    this.fireEvent("explorer-menu-click");
+    this.fireEvent("explorer-menu-click", { originalEvent: e });
   }
 
   handleBackToMenuItems(e: Event) {
@@ -239,6 +247,11 @@ class UDExMastheadMobileMenu extends UI5Element {
     this.fireMobileItemEvent(e);
   }
 
+  handleMobileCategoryItemEvent(e: PointerEvent) {
+    e.stopPropagation();
+    this.fireMobileItemEvent(e, this._category.category);
+  }
+
   handleMenuMode() {
     if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
       this.openCategories(this.exploreItem);
@@ -406,8 +419,10 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._showCategoryItems = false;
   }
 
-  fireMobileItemEvent(e: Event) {
+  fireMobileItemEvent(e: Event, category?: string) {
     this.fireEvent<MobileItemClickEventDetail>("item-click", {
+      ...(category && { category }),
+      isMobile: true,
       item: e.target as UDExMastheadMenuItem,
       originalEvent: e,
     }, true, false);

package/src/MastheadShell.hbs

@@ -1,4 +1,6 @@
-<header class="udex-masthead-shell" @keydown="{{handleKeyDown}}">
+<header
+    class="udex-masthead-shell"
+    @keydown="{{handleKeyDown}}">
     <div class="udex-masthead-shell__main-content">
         <div class="udex-masthead-shell__landing-wrap">
             {{#if logoUrl}}
@@ -26,7 +28,9 @@
     </div>
 
     {{#if isSearchVisible}}
-        <div class="udex-masthead-shell__search-container">
+        <div
+            class="udex-masthead-shell__search-container"
+            @ui5-search-keydown="{{handleSearchKeyDown}}">
             <slot name="search"></slot>
         </div>
         {{#if _isSearchOpened}}
@@ -80,6 +84,14 @@
                 <slot name="cart"></slot>
             </div>
         {{/if}}
+        {{#if hasSupport}}
+            <div
+                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleSupportClick}}">
+                <slot name="support"></slot>
+            </div>
+        {{/if}}
         {{#if hasProfile}}
             <div
                 class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
@@ -96,7 +108,6 @@
                 <slot name="countrySelector"></slot>
             </div>
         {{/if}}
-
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"

package/src/MastheadShell.ts

@@ -7,16 +7,15 @@ import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
-  isLeft, isRight, isSpace, isEnter,
+  isLeft, isRight, isSpace, isEnter, isEscape,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
-import "@ui5/webcomponents-icons/dist/cart.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
-import UDExMastheadItem from "./MastheadItem.js";
+import UDExMastheadItem, { DropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
@@ -32,6 +31,12 @@ import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 const canvasContentFont = "16px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
+export const MastheadOriginalEvent = {
+  detail: {
+    originalEvent: { type: Event },
+  },
+};
+
 /**
  * @class
  *
@@ -83,54 +88,71 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  *
  * @public
  */
-@event("search-click")
+@event("search-click", MastheadOriginalEvent)
+
+/**
+ * Fired event when the user clicks the search close button.
+ *
+ * @public
+ */
+@event("search-close-click", MastheadOriginalEvent)
+
+/**
+ * Fired event when the search panel is opened.
+ *
+ * @public
+ */
+@event("search-opened")
+
+/**
+ * Fired event when the search panel is closed.
+ *
+ * @public
+ */
+@event("search-closed")
 
 /**
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
  */
-@event("cart-click")
+@event("cart-click", MastheadOriginalEvent)
+
+/**
+ * Fired event when the user clicks the support button trigger.
+ *
+ * @public
+ */
+@event("support-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
  */
-@event("profile-click")
+@event("profile-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
  */
-@event("country-selector-click")
+@event("country-selector-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the logo.
  *
  * @public
  */
-@event("logo-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("logo-click", MastheadOriginalEvent)
 
 /**
  * Fired event when the user clicks the site label.
  *
  * @public
+ * @public
  */
-@event("site-label-click", {
-  detail: {
-    originalEvent: {
-      type: Event,
-    },
-  },
-})
+@event("site-label-click", MastheadOriginalEvent)
 
 class UDExMastheadShell extends UI5Element {
   /**
@@ -191,6 +213,14 @@ class UDExMastheadShell extends UI5Element {
   @slot({ type: HTMLElement })
     profile!: Array<UDExMastheadItem>;
 
+  /**
+   * Slot for support
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    support!: Array<UDExMastheadItem>;
+
   /**
    * Defines URL to homepage. It will be used as a link on a logo and a site label
    *
@@ -350,8 +380,6 @@ class UDExMastheadShell extends UI5Element {
     this._searchOpener = this.searchOpener;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    this.handleOutsideClick();
-
     if (this._isSearchOpened) {
       this.focusSearchInput();
     }
@@ -380,6 +408,7 @@ class UDExMastheadShell extends UI5Element {
 
     if (this._shouldHandleResize && this._isMobileMenuOpen) {
       this.closeMobileMenu();
+      this.resetSelectedItems();
       return;
     }
 
@@ -409,6 +438,19 @@ class UDExMastheadShell extends UI5Element {
     this.handleRightArrow(e);
   }
 
+  handleSearchKeyDown(e: CustomEvent): void {
+    e.stopPropagation();
+    const keyEvent = e.detail as KeyboardEvent;
+
+    if (isEscape(keyEvent)) {
+      if (this.showSearchByDefault && this.isAtLeastBreakpointSizeM) {
+        return;
+      }
+      this.closeSearch();
+      this.focusSearchBtn();
+    }
+  }
+
   handleLeftArrow(e: KeyboardEvent): void {
     if (isLeft(e)) {
       const currentItem = e.target as UDExMastheadItem;
@@ -443,23 +485,28 @@ class UDExMastheadShell extends UI5Element {
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
+    this.fireEvent("search-click", { originalEvent: e });
     this.openSearch();
-    this.fireEvent("search-click");
   }
 
   handleCartClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("cart-click");
+    this.fireEvent("cart-click", { originalEvent: e });
+  }
+
+  handleSupportClick(e: CustomEvent): void {
+    e.stopPropagation();
+    this.fireEvent("support-click", { originalEvent: e });
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("profile-click");
+    this.fireEvent("profile-click", { originalEvent: e });
   }
 
   handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.fireEvent("country-selector-click");
+    this.fireEvent("country-selector-click", { originalEvent: e });
   }
 
   handleOpenMobileMenu(): void {
@@ -478,9 +525,10 @@ class UDExMastheadShell extends UI5Element {
     this.fireEvent("mobile-menu-open");
   }
 
-  handleCloseSearch(): void {
-    this.closeSearch();
+  handleCloseSearch(e: CustomEvent): void {
     this._closeBtnClicked = true;
+    this.fireEvent("search-close-click", { originalEvent: e });
+    this.closeSearch();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -491,17 +539,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  handleOutsideClick(): void {
-    document.addEventListener("click", (e: Event) => {
-      const el = e.target as UDExMastheadItem;
-      const isMobile = window.innerWidth < 1280 || this._isMobileMode;
-      const isDropdownSlot = el.getAttribute("slot") === "dropdown";
-      if (!isDropdownSlot && !el.isMenuItem && !isMobile) {
-        this.resetSelectedItems();
-      }
-    });
-  }
-
   focusSearchInput(): void {
     const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
     if (searchSlot) {
@@ -527,7 +564,10 @@ class UDExMastheadShell extends UI5Element {
 
   resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedId) {
+      if (item._id !== clickedId && item.selected) {
+        if (item.hasDropdownSlot) {
+          item.fireDropdownCloseEvent(item.eventItemTitle, DropdownItemAction.ClickOutside);
+        }
         item.selected = false;
       }
     });
@@ -556,6 +596,7 @@ class UDExMastheadShell extends UI5Element {
       ...this.menuItems,
       ...this.exploreSAP,
       ...this.cart,
+      ...this.support,
       ...this.profile,
       ...this.countrySelector,
       ...(this.mobileBtn && this.closeBtn ? [this.mobileBtn, this.closeBtn] : []),
@@ -673,6 +714,7 @@ class UDExMastheadShell extends UI5Element {
    */
   closeSearch(): void {
     this._isSearchOpened = false;
+    this.fireEvent("search-closed");
   }
 
   /**
@@ -683,7 +725,7 @@ class UDExMastheadShell extends UI5Element {
     const shouldPreventOpeningSearch = this._isSearchOpened
       || (this.isBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
-      || (this.IsAtLeastBreakpointSizeM && this.showSearchByDefault);
+      || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
 
     if (shouldPreventOpeningSearch) {
       return;
@@ -695,6 +737,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._searchOpener) {
       this._searchOpener.selected = false;
     }
+
+    this.fireEvent("search-opened");
   }
 
   /**
@@ -703,7 +747,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openMobileMenu(): void {
     if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
-      (this.mobileBtn as UDExMastheadItem).handleSelectedChange();
+      this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
   }
@@ -717,8 +761,8 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
-    this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
     if (this.bodyOverflow) {
@@ -733,6 +777,7 @@ class UDExMastheadShell extends UI5Element {
       this.profileItem,
       this.profileMenu,
       this.cartItem,
+      this.supportItem,
       this.profileMenu,
       this.profileMenuLinks,
       this.countrySelectorItem,
@@ -772,6 +817,10 @@ class UDExMastheadShell extends UI5Element {
     return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
   }
 
+  get supportItem(): MastheadItemType {
+    return this.getSlottedNodes<UDExMastheadItem>("support")[0];
+  }
+
   get profileMenu(): UDExMastheadProfileMenu {
     return this.querySelector("[udex-masthead-profile-menu]")!;
   }
@@ -804,6 +853,10 @@ class UDExMastheadShell extends UI5Element {
     return !!this.countrySelector.length;
   }
 
+  get hasSupport(): boolean {
+    return !!this.support.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
@@ -812,7 +865,7 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtMost("M");
   }
 
-  get IsAtLeastBreakpointSizeM(): boolean {
+  get isAtLeastBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtLeast("M");
   }
 

package/src/PasswordField.hbs

@@ -2,6 +2,7 @@
     type="{{type}}"
     value="{{value}}"
     label="{{passwordLabel}}"
+    autocomplete="{{autocomplete}}"
     ?disabled="{{disabled}}"
     ?readonly="{{readonly}}"
     ?displayonly="{{displayonly}}"

package/src/PasswordField.ts

@@ -7,9 +7,18 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
 import ValueState from "./types/common.js";
-
+import "@ui5/webcomponents-icons/dist/hide.js";
+import "@ui5/webcomponents-icons/dist/show.js";
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
 
+// Styles
+import PasswordFieldCss from "./generated/themes/PasswordField.css";
+
+export enum PasswordFieldAutoComplete {
+  On = "on",
+  Off = "off",
+}
+
 export enum InputType {
   Password = "password",
   Text = "text",
@@ -40,6 +49,7 @@ export enum IconType {
 @customElement({
   tag: "udex-password-field",
   renderer: litRender,
+  styles: PasswordFieldCss,
   template: PasswordFieldTemplate,
   dependencies: [UDExTextField],
 })
@@ -54,6 +64,14 @@ class UDExPasswordField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: InputType.Password })
     type!: InputType;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   *
+   * @public
+   */
+  @property({ type: String, defaultValue: PasswordFieldAutoComplete.Off })
+    autocomplete!: `${PasswordFieldAutoComplete}`;
+
   /**
    * Defines whether the component is in disabled state.
    * <br><br>

package/src/SecondaryNavigation.ts

@@ -244,7 +244,7 @@ class UDExSecondaryNavigation extends UI5Element {
       return item.closeDropdown();
     }
     if (isDown(e) && item.hasNestedItems) {
-      item.openDropdown();
+      item.openDropdown(e);
     }
   }
 
@@ -293,12 +293,13 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleItemClick(e: CustomEvent): void {
-    const clickedItem = e.detail.item as UDExSecondaryNavigationItem;
+    const { index, item: detailItem, originalEvent: actualOriginalEvent } = e.detail;
+    const clickedItem = detailItem as UDExSecondaryNavigationItem;
     const {
       path, target, title, active, subItems, _id, mobileLinkTitle,
     } = clickedItem;
 
-    const prevented = !this.fireEventItemClick(e, {
+    const prevented = !this.fireEventItemClick(actualOriginalEvent as Event, index as number, {
       path,
       target,
       title,
@@ -321,9 +322,10 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleSubItemClick(e: CustomEvent): void {
+    const { originalEvent: actualOriginalEvent, index } = e.detail;
     const item = e.detail.item as UDExSecondaryNavigationSubItem;
     const { items } = item as NavItem;
-    const prevented = !this.fireEventItemClick(e, item);
+    const prevented = !this.fireEventItemClick(actualOriginalEvent as Event, index as number, item);
 
     if (prevented) {
       e.preventDefault();
@@ -341,7 +343,8 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   fireEventItemClick(
-    e: CustomEvent,
+    e: Event,
+    clickedIndex: number,
     {
       items, target, path, title, active, mobileLinkTitle,
     }: NavItem,
@@ -356,7 +359,7 @@ class UDExSecondaryNavigation extends UI5Element {
         target,
         title,
       },
-      clickedIndex: e.detail.index,
+      clickedIndex,
     }, true);
   }
 

package/src/SecondaryNavigationItem.ts

@@ -173,7 +173,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onSubItemClick(e: Event): void {
+  onSubItemClick(e: CustomEvent | KeyboardEvent): void {
+    const { originalEvent } = e.detail;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
 
@@ -183,24 +184,21 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireEvent("sub-item-click", {
-      item: clickedItem,
-      index,
-    });
+    this.fireSubItemClickEvent(originalEvent as PointerEvent, clickedItem, index);
   }
 
   onBackClick(): void {
     this.setPrevNestedItems();
   }
 
-  openDropdown(): void {
+  openDropdown(e: PointerEvent | KeyboardEvent): void {
     if (this.hasNestedItems) {
       this.setDropdownItems();
       this.isOpen = !this.isOpen;
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireNavItemClickEvent();
+    this.fireNavItemClickEvent(e);
   }
 
   closeDropdown(): void {
@@ -209,7 +207,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
-      this.openDropdown();
+      this.fireNavItemClickEvent(e);
     }
   }
 
@@ -326,11 +324,20 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this.focus();
   }
 
-  fireNavItemClickEvent(): void {
+  fireNavItemClickEvent(e: PointerEvent | KeyboardEvent): void {
     this.fireEvent("nav-item-click", {
       item: this,
       index: this.index,
-    });
+      originalEvent: e,
+    }, true);
+  }
+
+  fireSubItemClickEvent(e: PointerEvent, clickedItem: NavItem, index: number): void {
+    this.fireEvent("sub-item-click", {
+      item: clickedItem,
+      index,
+      originalEvent: e,
+    }, true);
   }
 
   setDropdownHistory(): void {

package/src/SecondaryNavigationSubItem.ts

@@ -88,14 +88,15 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
     UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
-  onItemClick(): void {
+  onItemClick(e: PointerEvent): void {
     this.fireEvent("sub-item-click", {
       item: this,
-    });
+      originalEvent: e,
+    }, true);
   }
 
-  onBackItemClick(): void {
-    this.fireEvent("back-item-click");
+  onBackItemClick(e: PointerEvent): void {
+    this.fireEvent("back-item-click", { originalEvent: e }, true);
   }
 
   get hasItems(): boolean {

package/src/Table.ts

@@ -163,6 +163,13 @@ class UDExTable extends UI5Element {
   @slot()
     footnotes!: Array<HTMLElement>;
 
+  /**
+   * Defines the rows of the table.
+   * @public
+   */
+  @property({ type: String })
+    customColumns!: string;
+
   /**
    * Defines the table has vertical scrolling.
    *
@@ -382,7 +389,7 @@ class UDExTable extends UI5Element {
 
     return {
       table: {
-        "grid-template-columns": this._gridTemplateColumns,
+        "grid-template-columns": this.customColumns || this._gridTemplateColumns,
         "max-height": this._tableMaxHeight,
         ...headerStyleMap,
       },

package/src/TextField.hbs

@@ -19,6 +19,7 @@
          @click="{{handleClick}}"
          @keydown="{{handleKeydown}}"
          maxlength="{{maxlength}}"
+         autocomplete="{{autocomplete}}"
          ?disabled="{{disabled}}"
          ?readonly="{{isInputReadonly}}"
          ?required="{{required}}"
@@ -30,6 +31,7 @@
          aria-haspopup="{{accInfo.ariaHasPopup}}"
          aria-label="{{accInfo.ariaLabel}}"
          aria-labelledby="{{accInfo.ariaLabelledBy}}"
+         role="{{inputRole}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"

package/src/TextField.ts

@@ -228,6 +228,14 @@ class UDExTextField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: "" })
     labelActiveClass!: string;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   * @default "off"
+   * @public
+   */
+  @property({ type: String, defaultValue: "off" })
+    autocomplete!: string;
+
   /**
    * Defines the inner stored value of the readonly attribute of the input.
    *
@@ -358,6 +366,14 @@ class UDExTextField extends UI5Element {
     };
   }
 
+  get inputRole(): string | undefined {
+    return this.isAutoCompleteDisabled ? "presentation" : undefined;
+  }
+
+  get isAutoCompleteDisabled(): boolean {
+    return this.autocomplete === "off" || this.autocomplete === "new-password";
+  }
+
   handleKeydown(e: KeyboardEvent): void {
     e.stopPropagation();
     this.fireEvent<KeyboardEvent>("keydown", e);