@sapudex/web-components 2.5.0 → 2.6.0

package/src/CarouselTemplate.tsx

@@ -0,0 +1,56 @@
+import type Carousel from "./Carousel.js";
+import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
+import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function CarouselTemplate(this: Carousel) {
+  return (
+    <div className={this.carouselClass} onKeyDown={this._onkeydown}>
+      {this.showNavigationButtons.top && navigation.call(this)}
+      <UI5Carousel
+        id="carousel"
+        hideNavigationArrows
+        arrowsPlacement={CarouselArrowsPlacement.Navigation}
+        accessibleName={this.accessibleName}
+        hidePageIndicator={this._hidePageIndicator}>
+        {this.items.map(item =>
+          <slot name={(item as SlottedChild)._individualSlot}></slot>
+        )}
+      </UI5Carousel>
+      {this.showNavigationButtons.bottom && navigation.call(this)}
+    </div>
+  );
+}
+
+function navigation(this: Carousel) {
+  const btnClassName = "udex-carousel__navigation-button";
+
+  return (
+    <div class="udex-carousel__navigation-wrapper" part="navigation">
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isPrevButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowLeft}
+        design={this.buttonDesign}
+        tooltip={this.previousPageText}
+        onClick={this._prevButtonClick}
+        part="prev-button">
+      </UDExButton>
+      <UDExButton
+        size={UDExButtonSize.Large}
+        disabled={this.isNextButtonDisabled}
+        class={btnClassName}
+        icon={slimArrowRight}
+        design={this.buttonDesign}
+        tooltip={this.nextPageText}
+        onClick={this._nextButtonClick}
+        part="next-button">
+      </UDExButton>
+    </div>
+  );
+}

package/src/ContactItemTemplate.tsx

@@ -1,11 +1,12 @@
 import type ContactItem from "./ContactItem.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExLink from "./Link.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 
 export default function ContactItemTemplate(this: ContactItem) {
   return (
     <div class="udex-contact-item">
-      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode="Decorative"></UI5Icon>}
+      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode={IconMode.Decorative}></UI5Icon>}
       <div class="udex-contact-item__content">
         {labelContent.call(this)}
         <p class="udex-contact-item__description"><slot></slot></p>

package/src/CountrySelector.ts

@@ -364,30 +364,25 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.open = true;
     this._search.focus();
     this._search.value = key;
-    this.onValueSearch(key);
+    this.fireChangeSearch();
   }
 
   handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
-  onValueSearch(searchValue: string) {
-    this._shouldFilterItems = true;
-    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireDecoratorEvent("change-search", { value: searchValue });
-  }
-
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
       this._dropdown.open = !this._dropdown.open;
     }
   }
 
-  handleValueSearch(e: CustomEvent) {
-    this.onValueSearch(e.detail.value as string);
+  handleValueSearch(e: CustomEvent): void {
+    this.onSearch(e);
+    this.fireChangeSearch();
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onSubmitSearch();
   }
 
@@ -428,6 +423,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  fireChangeSearch(): void {
+    this.fireDecoratorEvent("change-search", { value: this._search.value });
+  }
+
   getItemTemplate(country: Country) {
     return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
   }

package/src/Divider.ts

@@ -1,10 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 
 // Template
-import DividerTemplate from "./generated/templates/DividerTemplate.lit.js";
+import DividerTemplate from "./DividerTemplate.js";
 
 // Styles
 import DividerCss from "./generated/themes/Divider.css.js";
@@ -14,7 +15,14 @@ import DividerCss from "./generated/themes/Divider.css.js";
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>udex-divider</code> component is a divider component used to separate content in a page.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-divider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Divider.js";</code>
+ *
  *
  * @constructor
  * @extends UI5Element
@@ -23,7 +31,7 @@ import DividerCss from "./generated/themes/Divider.css.js";
  */
 @customElement({
   tag: "udex-divider",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: DividerCss,
   template: DividerTemplate,
 })
@@ -38,7 +46,7 @@ class UDExDivider extends UI5Element {
     accessibleRole: string = "separator";
 
   get effectiveAccRole() {
-    return this.accessibleRole.toLowerCase();
+    return this.accessibleRole.toLowerCase() as AriaRole;
   }
 }
 

package/src/DividerTemplate.tsx

@@ -0,0 +1,11 @@
+import type Divider from "./Divider.js";
+
+export default function DividerTemplate(this: Divider) {
+  return (
+    <div
+      class="udex-divider-wrapper"
+      role={this.effectiveAccRole}>
+      <span class="udex-divider"></span>
+    </div>
+  );
+}

package/src/Dropdown.ts

@@ -5,6 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 /**
  * @class
@@ -27,7 +28,7 @@ import DropdownCss from "./generated/themes/Dropdown.css.js";
 @customElement({
   tag: "udex-dropdown",
   renderer: jsxRenderer,
-  styles: [Popover.styles, DropdownCss],
+  styles: [Popover.styles, DropdownCss, getEffectiveScrollbarStyle()],
 })
 
 class UDExDropdown extends Popover {

package/src/FilterMenu.ts

@@ -21,6 +21,7 @@ import UDExSearch from "./Search.js";
 import UDExButton from "./Button.js";
 import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import { Placement, HorizontalAlign } from "./types/Dropdown.js";
 import { UDExListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
@@ -35,6 +36,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 // Styles
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -65,7 +67,7 @@ type UDExFilterMenuResetClickEventDetail = {
 @customElement({
   tag: "udex-filter-menu",
   renderer: litRender,
-  styles: [FilterMenuCss, SearchableListCss],
+  styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
     Popover,
@@ -160,13 +162,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: Boolean })
     disableTargetOverlap?: boolean;
 
-  /**
-   * Allows control over the height.
-   * @public
-   */
-  @property({ type: String })
-    height?: string;
-
   /**
    * Determines on which side the component is placed at.
    *
@@ -433,15 +428,16 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
-  }
-
   _dropdownBeforeOpen(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "addEventListener");
+    }
+
     if (this.height) {
-      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
-      content.style.maxHeight = this.height;
+      this._setContentHeight();
     }
+
     this.fireDecoratorEvent("before-open");
   }
 
@@ -458,6 +454,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterClose(): void {
+    if (this.preventPageScroll) {
+      this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
+      this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
+    }
+
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -515,10 +516,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }
 
-  getPopover(): Popover {
-    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
-  }
-
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/HeroBanner.hbs

@@ -38,6 +38,7 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
+    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/List.ts

@@ -10,7 +10,6 @@ import {
   isHome,
   isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type UDExListItem from "./ListItem.js";
 import { UDExListStyleType, UDExListMode } from "./types/List.js";
 import type UDExListGroupHeader from "./ListGroupHeader.js";
@@ -29,6 +28,7 @@ import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import type { UDExListWithFirstLetterFocus } from "./utils/ListWithFirstLetterFocus.js";
 import UDExFirstLetterFocusHandler from "./utils/ListWithFirstLetterFocus.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 

package/src/MastheadCountrySelector.hbs

@@ -1,8 +1,6 @@
 <div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
     {{#if _isActiveRegionOpen}}
-        <span class="udex-masthead-country-selector__title">
-            {{countryTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
@@ -26,9 +24,10 @@
             non-interactive-submit-button
             show-submit-button>
         </udex-search>
+        <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
         <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
             {{#each _activeCountries}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                         @click="{{../fireEventCountryItemClick}}"
@@ -43,19 +42,16 @@
             {{/each}}
         </ul>
     {{else}}
-        <span class="udex-masthead-country-selector__title">
-            {{regionTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">
             {{#each regionsData}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-has-popup="true"
-                        accessible-role="button"
                         type="Button"
                         part="menu-item"
                         is-nav-item

package/src/MastheadCountrySelector.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import {
@@ -15,6 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -193,8 +196,12 @@ class UDExMastheadCountrySelector extends UI5Element {
   _activeCountries!: Array<Country>;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusRegionByIndex!: boolean;
+  _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   constructor() {
     super();
     this._activeCountries = [];
@@ -291,6 +298,10 @@ class UDExMastheadCountrySelector extends UI5Element {
       this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
     }
 
+    this._accSearchResultInfo = this._activeCountries.length
+      ? `${this._activeCountries.length} ${this.resultReturnedText}`
+      : this.noMatchesFoundText;
+
     this._shouldFocusBackBtn = false;
     this.fireDecoratorEvent("country-selector-search", {
       value: e.detail.value,
@@ -468,6 +479,14 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  get noMatchesFoundText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+  }
+
   get items(): Array<UDExMastheadMenuItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
     return items ? Array.from(items) : [];

package/src/MastheadMenu.hbs

@@ -42,7 +42,9 @@
         category="{{this.category}}">
         {{#each this.items}}
             <li>
-                {{#if this.url}}
+                {{#if this.isDivider}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"
                         exportparts="menu-item"
@@ -53,8 +55,6 @@
                         label="{{this.title}}"
                         exportparts="badge">
                     </udex-masthead-menu-item>
-                {{else}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
                 {{/if}}
             </li>
         {{/each}}

package/src/MastheadMenu.ts

@@ -24,6 +24,7 @@ export type Item = {
   title: string;
   url: string;
   externalLink: boolean;
+  isDivider?: boolean;
 };
 
 export type SubMenuLinkItem = {
@@ -178,10 +179,16 @@ class UDExMastheadMenu extends UI5Element {
   get itemsList(): Array<MenuItem> {
     let id = 1;
     const parsedItems: Array<MenuItem> = parseArrayFromString(this.subItems);
+
     return parsedItems.map((mainItem: MenuItem) => {
-      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
-        category.categoryId = `${id++}`;
-        return category;
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
+        subMenu.categoryId = `${id++}`;
+        subMenu.items = subMenu.items.map((item: Item) => ({
+          ...item,
+          ...(item.title === "-" && { isDivider: true }),
+        }));
+
+        return subMenu;
       });
 
       return mainItem;

package/src/MastheadMobileMenu.hbs

@@ -102,8 +102,7 @@
                     first-level-btn
                     first-level
                     has-border
-                    icon-end
-                    first-level>
+                    icon-end>
                 </udex-masthead-menu-item>
             {{else}}
                 <udex-masthead-menu-item

package/src/MastheadMobileMenu.ts

@@ -19,6 +19,9 @@ import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenu
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
+const INDEX_OFFSET_WITH_OVERVIEW = 2;
+const INDEX_OFFSET_WITHOUT_OVERVIEW = 1;
+
 type UDExMastheadMobileMenuItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent,
   item: UDExMastheadMenuItem,
@@ -171,7 +174,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleBackToCategories(e: PointerEvent) {
     e.stopPropagation();
     this.showCategories();
-    this.setFocusItemByIndex(this._category.index + 1);
+    this.setFocusItemByIndex(this._category.index);
     this.fireMobileItemEvent(e);
   }
 
@@ -280,7 +283,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
     if (target.hasAttribute("is-back-to-categories")) {
       this.showCategories();
-      this.setFocusItemByIndex(this._category.index + 1);
+      this.setFocusItemByIndex(this._category.index);
       this.fireMobileItemEvent(e);
     }
 
@@ -400,8 +403,9 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
+    const indexOffset = this._clickedItem.href ? INDEX_OFFSET_WITH_OVERVIEW : INDEX_OFFSET_WITHOUT_OVERVIEW;
     const index = Number(item.getAttribute("id"));
-    this._category = { ...this._categories[index], index };
+    this._category = { ...this._categories[index], index: index + indexOffset };
     this._showCategories = false;
     this._showCategoryItems = true;
   }

package/src/MastheadShell.hbs

@@ -52,7 +52,7 @@
         {{/if}}
     {{/if}}
 
-    <div class="udex-masthead-shell__right-menu">
+    <div class="{{rightMenuClass}}">
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @ui5-item-click="{{handleOpenMobileMenu}}"
@@ -72,47 +72,47 @@
             </div>
         {{/if}}
         {{#if hasSearch}}
-            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-                <udex-masthead-item
+          <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+            <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
                     part="search-button"
                     @click="{{handleSearchClick}}"
                     accessible-name="search">
-                </udex-masthead-item>
-            </div>
+            </udex-masthead-item>
+          </div>
         {{/if}}
         {{#if hasCart}}
-            <div
-                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCartClick}}">
-                <slot name="cart"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCartClick}}">
+            <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>
+          <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"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleProfileClick}}">
-                <slot name="profile"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleProfileClick}}">
+            <slot name="profile"></slot>
+          </div>
         {{/if}}
         {{#if hasCountrySelector}}
-            <div
-                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCountrySelectorClick}}">
-                <slot name="countrySelector"></slot>
-            </div>
+          <div
+                  class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                  @ui5-item-click="{{setSelectedItem}}"
+                  @click="{{handleCountrySelectorClick}}">
+            <slot name="countrySelector"></slot>
+          </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item