@sapudex/web-components 0.192.4 → 0.224.0

package/src/MastheadShell.ts

@@ -22,14 +22,15 @@ import UDExControlButton from "./ControlButton.js";
 import UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const breakpointSizeM: number = 1279;
 const canvasContentFont = "16px '72 Brand Variable'";
-type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | undefined | null;
+type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
 /**
  * @class
@@ -42,7 +43,7 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  * For the <code>udex-masthead-shell</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadShell.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadShell.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -98,6 +99,13 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
  */
 @event("profile-click")
 
+/**
+ * Fired event when the user clicks the country selector button trigger.
+ *
+ * @public
+ */
+@event("country-selector-click")
+
 /**
  * Fired event when the user clicks the logo.
  *
@@ -125,6 +133,14 @@ type MastheadItemType = UDExMastheadItem | null | undefined;
 })
 
 class UDExMastheadShell extends UI5Element {
+  /**
+   * Slot for country selector item.
+   *
+   * @public
+   */
+  @slot({ type: Node })
+    countrySelector!: Array<UDExMastheadItem>;
+
   /**
    * Slot for mobile menu
    *
@@ -181,7 +197,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     homeUrl!: string;
 
   /**
@@ -226,7 +242,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     logoUrl!: string;
 
   /**
@@ -235,7 +251,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     logoTitle!: string;
 
   /**
@@ -244,7 +260,7 @@ class UDExMastheadShell extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     siteLabel!: string;
 
   /**
@@ -261,8 +277,8 @@ class UDExMastheadShell extends UI5Element {
    * default: ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    closeButtonAccessibleName?: string;
+  @property({ type: String })
+    closeButtonAccessibleName!: string;
 
   /**
    * Defines an aria label for the homepage link
@@ -321,7 +337,7 @@ class UDExMastheadShell extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadShell.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMastheadShell.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -427,15 +443,11 @@ class UDExMastheadShell extends UI5Element {
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this._isSearchOpened = true;
-    this.resetSelectedItems();
-    if (this._searchOpener) {
-      this._searchOpener.selected = false;
-    }
+    this.openSearch();
     this.fireEvent("search-click");
   }
 
-  handleCartClick(e: CustomEvent) {
+  handleCartClick(e: CustomEvent): void {
     e.stopPropagation();
     this.fireEvent("cart-click");
   }
@@ -445,10 +457,18 @@ class UDExMastheadShell extends UI5Element {
     this.fireEvent("profile-click");
   }
 
-  handleMobileMenuClick(e: CustomEvent) {
+  handleCountrySelectorClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.setSelectedItem(e);
+    this.fireEvent("country-selector-click");
+  }
+
+  handleOpenMobileMenu(): void {
+    const clickedItem = this.mobileBtn as UDExMastheadItem;
+    if (!clickedItem) {
+      return;
+    }
 
+    this.resetSelectedItems(clickedItem._id);
     this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
@@ -458,17 +478,15 @@ class UDExMastheadShell extends UI5Element {
     this.fireEvent("mobile-menu-open");
   }
 
-  handleMobileCloseClick(e: CustomEvent) {
-    e.preventDefault();
-    this.closeMobileMenu();
-    this.fireMobileMenuCloseEvent();
+  handleCloseSearch(): void {
+    this.closeSearch();
+    this._closeBtnClicked = true;
   }
 
-  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
+  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
     if (isSpace(e) || isEnter(e)) {
       e.preventDefault();
       this.closeMobileMenu();
-      this.fireMobileMenuCloseEvent();
       this.mobileBtn?.focus();
     }
   }
@@ -507,23 +525,19 @@ class UDExMastheadShell extends UI5Element {
     menuItems[nextSelectIndex].focus();
   }
 
-  resetSelectedItems(): void {
+  resetSelectedItems(clickedId?: string): void {
     this.getSelectedItems().forEach(item => {
-      item.selected = false;
+      if (item._id !== clickedId) {
+        item.selected = false;
+      }
     });
   }
 
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
-    if (!clickedItem) {
-      return;
+    if (clickedItem) {
+      this.resetSelectedItems(clickedItem._id);
     }
-
-    this.getSelectedItems().forEach(item => {
-      if (item._id !== clickedItem._id) {
-        item.selected = false;
-      }
-    });
   }
 
   focusSearchBtn(): void {
@@ -533,11 +547,6 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
-  hideSearch(): void {
-    this._isSearchOpened = false;
-    this._closeBtnClicked = true;
-  }
-
   getCurrentIndex(item: UDExMastheadItem): number {
     return this.menuItems.indexOf(item);
   }
@@ -548,6 +557,7 @@ class UDExMastheadShell extends UI5Element {
       ...this.exploreSAP,
       ...this.cart,
       ...this.profile,
+      ...this.countrySelector,
       ...(this.mobileBtn && this.closeBtn ? [this.mobileBtn, this.closeBtn] : []),
     ];
 
@@ -575,7 +585,11 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemIconWidth(): number {
-    const style = window.getComputedStyle(this.profileItem);
+    const item = this.querySelector("[udex-masthead-item]");
+
+    if (!item) { return 0; }
+
+    const style = window.getComputedStyle(item);
     const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
     return parseInt(itemIconWidthVar);
   }
@@ -637,16 +651,6 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
-  closeMobileMenu(): void {
-    this._isMobileMenuOpen = false;
-    this.resetSelectedItems();
-    this._mobileMenu?.showFirstLevelMenu();
-
-    if (this.bodyOverflow) {
-      this.removeOverflowBody();
-    }
-  }
-
   setMobileMode(): void {
     this._isMobileMode = true;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -663,12 +667,77 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
-  fireMobileMenuCloseEvent(): void {
+  /**
+   * Close the search panel.
+   * @public
+   */
+  closeSearch(): void {
+    this._isSearchOpened = false;
+  }
+
+  /**
+   * Open the search panel.
+   * @public
+   */
+  openSearch(): void {
+    const shouldPreventOpeningSearch = this._isSearchOpened
+      || (this.isBreakpointSizeM && !this.showSearchByDefault)
+      || this._isMobileMode
+      || (this.IsAtLeastBreakpointSizeM && this.showSearchByDefault);
+
+    if (shouldPreventOpeningSearch) {
+      return;
+    }
+
+    this._isSearchOpened = true;
+    this.resetSelectedItems();
+
+    if (this._searchOpener) {
+      this._searchOpener.selected = false;
+    }
+  }
+
+  /**
+   * Open the mobile menu panel.
+   * @public
+   */
+  openMobileMenu(): void {
+    if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
+      (this.mobileBtn as UDExMastheadItem).handleSelectedChange();
+      this.handleOpenMobileMenu();
+    }
+  }
+
+  /**
+   * Close the mobile menu panel.
+   * @public
+   */
+  closeMobileMenu(): void {
+    if (!this._isMobileMenuOpen) {
+      return;
+    }
+
+    this._isMobileMenuOpen = false;
+    this.resetSelectedItems();
+    this._mobileMenu?.showFirstLevelMenu();
+
+    if (this.bodyOverflow) {
+      this.removeOverflowBody();
+    }
+
     this.fireEvent("mobile-menu-close");
   }
 
   get slottedItems(): (MastheadSlottedItem)[] {
-    return [this.profileItem, this.cartItem, this.profileMenu, this.profileMenuLinks];
+    return [
+      this.profileItem,
+      this.profileMenu,
+      this.cartItem,
+      this.profileMenu,
+      this.profileMenuLinks,
+      this.countrySelectorItem,
+      this.countrySelectorMenu,
+    ];
   }
 
   get searchOpener(): MastheadItemType {
@@ -695,6 +764,10 @@ class UDExMastheadShell extends UI5Element {
     return this.getSlottedNodes<UDExMastheadItem>("profile")[0];
   }
 
+  get countrySelectorItem(): UDExMastheadItem {
+    return this.getSlottedNodes<UDExMastheadItem>("countrySelector")[0];
+  }
+
   get cartItem(): MastheadItemType {
     return this.getSlottedNodes<UDExMastheadItem>("cart")[0];
   }
@@ -703,6 +776,10 @@ class UDExMastheadShell extends UI5Element {
     return this.querySelector("[udex-masthead-profile-menu]")!;
   }
 
+  get countrySelectorMenu(): UDExMastheadCountrySelector {
+    return this.querySelector("[udex-masthead-country-selector]")!;
+  }
+
   get profileMenuLinks(): UDExMastheadMenu | undefined | null {
     return this.profileMenu?.shadowRoot?.querySelector("[udex-masthead-menu]");
   }
@@ -723,12 +800,20 @@ class UDExMastheadShell extends UI5Element {
     return !!this.exploreSAP.length;
   }
 
+  get hasCountrySelector(): boolean {
+    return !!this.countrySelector.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
 
   get isBreakpointSizeM(): boolean {
-    return window.innerWidth <= breakpointSizeM;
+    return BreakpointUtils.isAtMost("M");
+  }
+
+  get IsAtLeastBreakpointSizeM(): boolean {
+    return BreakpointUtils.isAtLeast("M");
   }
 
   get isMainMenuVisible(): boolean {

package/src/MediaPlayer.hbs

@@ -10,22 +10,26 @@
 <audio
   id="{{playerElementId}}"
   class="udex-media-player__video  video-js {{aspectRatioClass}}"
-  preload="auto" 
->
-  <source src="{{source}}" type="{{type}}" />
+  preload="auto">
+  <source src="{{source}}" type="{{type}}"/>
 </audio>
 {{/inline}}
 
 {{#*inline "standard"}}
-  <video
+  <video-js
     id="{{playerElementId}}"
-    class="udex-media-player__video video-js {{aspectRatioClass}}"
-  >
+    class="udex-media-player__video video-js {{aspectRatioClass}}">
     <source src="{{source}}" type="{{type}}">
     {{#each _tracks}}
-      <track kind={{this.kind}} src='{{this.src}}' srclang='{{this.srclang}}' label='{{this.label}}' ?default="{{this.default}}"/>
+      <track
+        kind="{{this.kind}}"
+        src="{{this.src}}"
+        srclang="{{this.srclang}}"
+        label="{{this.label}}"
+        ?default="{{this.default}}"
+      />
     {{/each}}
-  </video>
+  </video-js>
 {{/inline}}
 
 {{#*inline "embed"}}
@@ -33,35 +37,37 @@
     <div class="video-js udex-media-player__iframe-poster {{aspectRatioClass}}">
       <div class="udex-media-player__vjs-poster" aria-disabled="false">
         <picture tabindex="-1"><img loading="lazy" alt="" src="{{poster}}" width="{{width}}" height="{{height}}"></picture>
-        <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click={{handleEmbedPlay}}>
+        <button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click="{{handleEmbedPlay}}">
           <ui5-icon aria-label="Play Video" name="play" ui5-icon=""></ui5-icon>
         </button>
       </div>
     </div>
   {{else}}
     {{#if _youtubeSrc}}
-      <udex-media-player-youtube 
-      source="{{source}}" 
-      width="{{width}}" 
-      height="{{height}}" 
-      class="video-js {{aspectRatioClass}}" ?fluid-mode="{{embedVideoFluidClass}}"
-      @playing="{{handleEmbedVideoPlaying}}"
-      @ended="{{handleEmbedVideoEnded}}"
-      @ready="{{handleEmbedVideoReady}}"
-      @pause="{{handleEmbedVideoPause}}"></udex-media-player-youtube>
+      <udex-media-player-youtube
+        source="{{source}}"
+        width="{{width}}"
+        height="{{height}}"
+        class="video-js {{aspectRatioClass}}" ?fluid-mode="{{embedVideoFluidClass}}"
+        @playing="{{handleEmbedVideoPlaying}}"
+        @ended="{{handleEmbedVideoEnded}}"
+        @ready="{{handleEmbedVideoReady}}"
+        @pause="{{handleEmbedVideoPause}}">
+      </udex-media-player-youtube>
     {{/if}}
     {{#if _vimeoSrc}}
-      <udex-media-player-vimeo 
-      source="{{source}}" 
-      width="{{width}}" 
-      height="{{height}}" 
-      title="{{title}}" 
-      aspect-ratio-class="{{aspectRatioClass}}" 
-      ?fluid-mode="{{embedVideoFluidClass}}"
-      @playing="{{handleEmbedVideoPlaying}}"
-      @ended="{{handleEmbedVideoEnded}}"
-      @ready="{{handleEmbedVideoReady}}"
-      @pause="{{handleEmbedVideoPause}}"></udex-media-player-vimeo>
+      <udex-media-player-vimeo
+        source="{{source}}"
+        width="{{width}}"
+        height="{{height}}"
+        title="{{title}}"
+        aspect-ratio-class="{{aspectRatioClass}}"
+        ?fluid-mode="{{embedVideoFluidClass}}"
+        @playing="{{handleEmbedVideoPlaying}}"
+        @ended="{{handleEmbedVideoEnded}}"
+        @ready="{{handleEmbedVideoReady}}"
+        @pause="{{handleEmbedVideoPause}}">
+      </udex-media-player-vimeo>
     {{/if}}
   {{/if}}
 {{/inline}}

package/src/MediaPlayer.ts

@@ -5,12 +5,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/v5/play.svg";
 import Player from "video.js/dist/types/player.js";
 import type SeekBar from "video.js/dist/types/control-bar/progress-control/seek-bar";
 import UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import UDExMediaPlayerVimeo, { VimeoPlayer } from "./MediaPlayerVimeo.js";
+import mapLangFile from "./mediaPlayerLanguageMapping.js";
 
 // Template
 import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.js";
@@ -50,7 +52,7 @@ export interface VideoJSPlayer extends Player{
  * For the <code>udex-media-player</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayer.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -63,7 +65,7 @@ export interface VideoJSPlayer extends Player{
   renderer: litRender,
   styles: MediaPlayerCss,
   template: MediaPlayerTemplate,
-  dependencies: [UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],
+  dependencies: [Icon, UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],
 })
 /**
  * Fires when video is played
@@ -247,11 +249,10 @@ class UDExMediaPlayer extends UI5Element {
   videoProgress!: number;
 
   getPlayedTime = (target: EventTarget): number => {
-    const progressControl: SeekBar = (target as any)?.player.controlBar?.ProgressControl?.childNameIndex_.seekBar;
+    const progressControl: SeekBar = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
     if (!progressControl) {
       return 0;
     }
-
     return Math.round(progressControl.getPercent() * 100);
   };
 
@@ -457,6 +458,7 @@ class UDExMediaPlayer extends UI5Element {
       controls: true,
       poster: this.poster,
       audioOnly: this.audioOnly,
+      bigPlayButton: true,
       controlBar: {
         playToggle: true,
         volumePanel: true,
@@ -490,7 +492,7 @@ class UDExMediaPlayer extends UI5Element {
 
   async setupLanguage(language: string) {
     try {
-      return await import(`video.js/dist/lang/${language}.json`);
+      return await mapLangFile(language);
     } catch (err) {
       console.warn("Cannot load language file", err);
     }
@@ -509,7 +511,11 @@ class UDExMediaPlayer extends UI5Element {
       const options = this.getOptionsValue();
       const language: string = options?.language;
       if (language) {
-        videojs.addLanguage(language, await this.setupLanguage(language));
+        const languageData = await this.setupLanguage(language);
+        videojs.addLanguage(language, {
+          ...languageData,
+          ...languageData?.default,
+        });
       }
 
       this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);

package/src/MediaPlayerVimeo.ts

@@ -22,7 +22,7 @@ export type VimeoPlayer = Player;
  * For the <code>udex-media-player-vimeo</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayerVimeo.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayerVimeo.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/MediaPlayerYoutube.ts

@@ -39,7 +39,7 @@ declare global {
  * For the <code>udex-media-player-youtube</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MediaPlayerYoutube.js";</code>
+ * <code>import "@sapudex/web-components/dist/MediaPlayerYoutube.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/MessageStrip.hbs

@@ -7,7 +7,7 @@
         <div
             class="ui5-message-strip-icon-wrapper udex-message-strip"
             aria-hidden="true">
-            {{#if iconProvided}}
+            {{#if this.hasIcon}}
                 <slot name="icon"></slot>
             {{else}}
                 <ui5-icon name="{{standardIconName}}" class="ui5-message-strip-icon"></ui5-icon>
@@ -26,7 +26,7 @@
           size="Small"
           icon="decline"
           design="Tertiary"
-          @click={{_closeClick}}
+          @click="{{_closeClick}}"
           tooltip="{{_closeButtonText}}">
         </udex-button>
     {{/unless}}