@sapudex/web-components 0.127.6 → 0.143.0

package/src/MastheadShell.ts

@@ -6,7 +6,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 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 } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isLeft, isRight, isSpace, isEnter,
+} 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";
@@ -22,7 +24,6 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 const breakpointSizeM: number = 1279;
 /**
  * @class
@@ -58,7 +59,6 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the search button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#searchClick
  * @public
  */
 @event("search-click")
@@ -66,7 +66,6 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the cart button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#cartClick
  * @public
  */
 @event("cart-click")
@@ -74,10 +73,36 @@ const breakpointSizeM: number = 1279;
 /**
  * Fired event when the user clicks the profile button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#profileClick
  * @public
  */
 @event("profile-click")
+
+/**
+ * Fired event when the user clicks the logo.
+ *
+ * @public
+ */
+@event("logo-click", {
+  detail: {
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
+/**
+ * Fired event when the user clicks the site label.
+ *
+ * @public
+ */
+@event("site-label-click", {
+  detail: {
+    originalEvent: {
+      type: PointerEvent,
+    },
+  },
+})
+
 class UDExMastheadShell extends UI5Element {
   /**
    * Slot for mobile menu
@@ -156,6 +181,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     bodyOverflow!: boolean;
 
+  /**
+   * Defines the visibility of the Search by default.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchByDefault!: boolean;
+
   /**
    * Defines sticky position for component
    *
@@ -226,12 +260,20 @@ class UDExMastheadShell extends UI5Element {
     siteLabelAriaLabel!: string;
 
   /**
-   * Defines if the search container is visible
+   * Defines if the search container is opened
    *
    * @private
    */
   @property({ type: Boolean })
-    _isSearchVisible!: boolean;
+    _isSearchOpened!: boolean;
+
+  /**
+   * Defines if the mobile menu is open
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpen!: boolean;
 
   /**
    * Defines if the close button was clicked
@@ -259,7 +301,7 @@ class UDExMastheadShell extends UI5Element {
 
     this.handleOutsideClick();
 
-    if (this._isSearchVisible) {
+    if (this._isSearchOpened) {
       this.focusSearchInput();
     }
 
@@ -277,15 +319,15 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
-    if (this.isMobileView) {
-      this._isSearchVisible = false;
+    if (this.isBreakpointSizeM) {
+      this._isSearchOpened = false;
     }
 
-    if (this._shouldHandleResize) {
-      this._mobileMenu?.showFirstLevelMenu();
-      this.removeOverflowBody();
+    if (this._shouldHandleResize && this.isBreakpointSizeM) {
+      this.closeMobileMenu();
       return;
     }
+
     this._shouldHandleResize = true;
   }
 
@@ -313,9 +355,17 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
+  handleLogoClick(e: CustomEvent): void {
+    this.fireEvent("logo-click", { originalEvent: e });
+  }
+
+  handleSiteLabelClick(e: CustomEvent): void {
+    this.fireEvent("site-label-click", { originalEvent: e });
+  }
+
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this._isSearchVisible = true;
+    this._isSearchOpened = true;
     this.resetSelectedItems();
     if (this._searchOpener) {
       this._searchOpener.selected = false;
@@ -325,20 +375,18 @@ class UDExMastheadShell extends UI5Element {
 
   handleCartClick(e: CustomEvent) {
     e.stopPropagation();
-    this.setSelectedItem(e);
     this.fireEvent("cart-click");
   }
 
   handleProfileClick(e: CustomEvent): void {
     e.stopPropagation();
-    this.setSelectedItem(e);
     this.fireEvent("profile-click");
   }
 
   handleMobileMenuClick(e: CustomEvent) {
     e.stopPropagation();
     this.setSelectedItem(e);
-    this.addActiveMobileClass();
+    this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
       this.setOverflowBody();
@@ -347,12 +395,14 @@ class UDExMastheadShell extends UI5Element {
 
   handleMobileCloseClick(e: CustomEvent) {
     e.preventDefault();
-    this.removeActiveMobileClass();
-    this.setSelectedItem(e);
-    this._mobileMenu?.showFirstLevelMenu();
+    this.closeMobileMenu();
+  }
 
-    if (this.bodyOverflow) {
-      this.removeOverflowBody();
+  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isSpace(e) || isEnter(e)) {
+      this.closeMobileMenu();
+      this.mobileBtn?.focus();
     }
   }
 
@@ -394,14 +444,6 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
-  addActiveMobileClass() {
-    this._rootHolder?.classList.add(mobileMenuActiveClass);
-  }
-
-  removeActiveMobileClass() {
-    this._rootHolder?.classList.remove(mobileMenuActiveClass);
-  }
-
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
     if (!clickedItem) {
@@ -418,11 +460,12 @@ class UDExMastheadShell extends UI5Element {
   focusSearchBtn(): void {
     if (this._searchOpener) {
       this._searchOpener.focus();
+      this._closeBtnClicked = false;
     }
   }
 
   hideSearch(): void {
-    this._isSearchVisible = false;
+    this._isSearchOpened = false;
     this._closeBtnClicked = true;
   }
 
@@ -457,6 +500,16 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
+  closeMobileMenu(): void {
+    this._isMobileMenuOpen = false;
+    this.resetSelectedItems();
+    this._mobileMenu?.showFirstLevelMenu();
+
+    if (this.bodyOverflow) {
+      this.removeOverflowBody();
+    }
+  }
+
   get searchOpener(): UDExMastheadItem | null | undefined {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
@@ -489,13 +542,29 @@ class UDExMastheadShell extends UI5Element {
     return !!this.search.length;
   }
 
+  get hasExploreSAP(): boolean {
+    return !!this.exploreSAP.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
 
-  get isMobileView(): boolean {
+  get isBreakpointSizeM(): boolean {
     return window.innerWidth <= breakpointSizeM;
   }
+
+  get isMainMenuVisible(): boolean {
+    return !this.showSearchByDefault && !this._isSearchOpened;
+  }
+
+  get isRightMenuVisible(): boolean {
+    return this.showSearchByDefault || !this._isSearchOpened;
+  }
+
+  get isSearchVisible(): boolean {
+    return this.showSearchByDefault || this._isSearchOpened;
+  }
 }
 
 UDExMastheadShell.define();

package/src/MediaPlayer.hbs

@@ -10,8 +10,7 @@
 <audio
   id="{{playerElementId}}"
   class="udex-media-player__video  video-js {{aspectRatioClass}}"
-  preload="auto"
-  data-setup="{{dataSetup}}" 
+  preload="auto" 
 >
   <source src="{{source}}" type="{{type}}" />
 </audio>
@@ -21,7 +20,6 @@
   <video
     id="{{playerElementId}}"
     class="udex-media-player__video video-js {{aspectRatioClass}}"
-    data-setup="{{dataSetup}}" 
   >
     <source src="{{source}}" type="{{type}}">
     {{#each _tracks}}

package/src/MediaPlayer.ts

@@ -50,7 +50,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 "@udex/web-components/dist/MediaPlayer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -357,41 +357,135 @@ class UDExMediaPlayer extends UI5Element {
     return this.shadowRoot?.querySelector(".video-js video") as HTMLVideoElement || this.shadowRoot?.querySelector(".video-js audio") || null;
   }
 
-  get optionsValue() {
+  setupHotkeys(e: KeyboardEvent, player: VideoJSPlayer) {
+    // Back to start
+    if (e.key === "0") {
+      e.preventDefault();
+      e.stopPropagation();
+      player.currentTime(0);
+      player.play();
+      return;
+    }
+
+    // Full screen toggle
+    if (e.key.toLowerCase() === "f") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!player.isFullscreen()) {
+        player.requestFullscreen();
+      } else {
+        player.exitFullscreen();
+      }
+      return;
+    }
+
+    // Mute / Unmute
+    if (e.key.toLowerCase() === "m") {
+      e.preventDefault();
+      e.stopPropagation();
+      player.muted(!player.muted());
+      return;
+    }
+
+    // Play / Pause
+    if (e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (player.paused()) {
+        player.play();
+      } else {
+        player.pause();
+      }
+      return;
+    }
+
+    // Speed up the video - set higher playback rate
+    if (e.key === "ArrowRight" && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const playbackRatesOptions: Array<number> = player.options_.playbackRates;
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      if (currentRateIndex < playbackRatesOptions.length - 1) {
+        const newPlaybackRate = currentRateIndex + 1;
+        player.playbackRate(playbackRatesOptions[newPlaybackRate]);
+      }
+      return;
+    }
+
+    // Slow down the video - set lower playback rate
+    if (e.key === "ArrowLeft" && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const playbackRatesOptions: Array<number> = player.options_.playbackRates;
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      if (currentRateIndex > 0) {
+        const newPlaybackRate = currentRateIndex - 1;
+        player.playbackRate(playbackRatesOptions[newPlaybackRate]);
+      }
+      return;
+    }
+
+    // Skip forward / Skip backward
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      e.stopPropagation();
+      const stepSeconds = player.controlBar.progressControl.seekBar.options_.stepSeconds;
+      const duration: number = player.duration() ?? 0;
+      const currentTime: number = player.currentTime() ?? 0;
+      const delta: number = (e.key === "ArrowRight" ? stepSeconds : -stepSeconds);
+      const newTime = Math.min(Math.max(currentTime + delta, 0), duration);
+      player.currentTime(newTime);
+      return;
+    }
+
+    // Volume change
+    if (((e.key === "ArrowUp" || e.key === "ArrowDown") && e.ctrlKey)
+      || ((e.key === "ArrowUp" || e.key === "ArrowDown") && e.metaKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      const volumeStep: number = 0.1;
+      const volume: number = player.volume() ?? 0;
+      let newVolume = volume + (e.key === "ArrowUp" ? volumeStep : -volumeStep);
+      newVolume = Math.min(Math.max(newVolume, 0), 1);
+      player.volume(newVolume);
+    }
+  }
+
+  getOptionsValue() {
     const baseOptions = {
       playbackRates: [1, 1.5, 2],
       controls: true,
-      audioOnly: this.audioOnly,
       poster: this.poster,
+      audioOnly: this.audioOnly,
       controlBar: {
-        children: [
-          "PlayToggle",
-          "VolumePanel",
-          "ProgressControl",
-          "RemainingTimeDisplay",
-          "SubsCapsButton",
-          "PlaybackRateMenuButton",
-          "FullscreenToggle",
-          "MediaLoader",
-        ],
+        playToggle: true,
+        volumePanel: true,
+        progressControl: {
+          seekBar: {
+            stepSeconds: 10,
+          },
+        },
+        remainingTimeDisplay: true,
+        subsCapsButton: true,
+        playbackRateMenuButton: true,
+        fullscreenToggle: true,
+        pictureInPictureToggle: false,
       },
       userActions: {
-        hotkeys: true,
+        hotkeys: (e: KeyboardEvent) => {
+          this.setupHotkeys(e, this.player);
+        },
       },
     };
 
-    if (typeof this.options === "string") {
-      return this.options ? {
-        ...baseOptions,
-        ...JSON.parse(this.options),
-      } : baseOptions;
+    if (!this.options) {
+      return baseOptions;
     }
 
-    return this.options;
-  }
-
-  get dataSetup() {
-    return JSON.stringify(this.optionsValue);
+    return {
+      ...baseOptions,
+      ...JSON.parse(this.options),
+    };
   }
 
   async setupLanguage(language: string) {
@@ -411,12 +505,14 @@ class UDExMediaPlayer extends UI5Element {
       if (this.enableGlobalDependency) {
         window.videojs = videojs;
       }
-      const language: string = this.optionsValue?.language;
+
+      const options = this.getOptionsValue();
+      const language: string = options?.language;
       if (language) {
         videojs.addLanguage(language, await this.setupLanguage(language));
       }
 
-      this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "");
+      this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);
       this.attachListeners(this.player);
 
       if (this.audioOnly) { return; }

package/src/MessageStrip.ts

@@ -133,9 +133,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExMessageStrip.i18nBundle = await getI18nBundle(
-      "sap-ui-webcomponents-bundle",
-    );
+    UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   getTranslation(text: I18nText): string {

package/src/Pagination.ts

@@ -245,7 +245,7 @@ class UDExPagination extends UI5Element {
   }
 
   static async onDefine() {
-    UDExPagination.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   setActive(element: HTMLElement): void {

package/src/PasswordField.ts

@@ -194,7 +194,7 @@ class UDExPasswordField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPasswordField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleShowPassword(): void {

package/src/PhoneNumberField.hbs

@@ -53,10 +53,9 @@
                 design="Tertiary"
                 icon-end
                 ?disabled="{{isButtonDisabled}}"
-                aria-disabled="{{isButtonDisabled}}"
                 aria-haspopup="true"
+                accessible-name-ref="{{_id}}-countrySelectorAriaLabel {{ariaDescribedById}}"
                 aria-label="{{countrySelectorAriaLabel}}"
-                accessible-name="{{countrySelectorAriaLabel}}"
                 aria-expanded="{{_dropdownExpanded}}"
                 aria-controls="{{this._id}}_dropdown-menu"
                 role="combobox"
@@ -85,13 +84,15 @@
             ?required="{{required}}"
             autocomplete="tel"
             aria-label="{{accessibleName}}"
-            aria-labelledby="{{accessibleNameRef}}"
+            aria-labelledby="{{accessibleName}}"
             aria-required="{{required}}"
             aria-readonly="{{isInputReadonly}}"
             aria-disabled="{{disabled}}"
             aria-invalid="{{ariaInvalid}}"
+            aria-describedby="{{ariaDescribedById}}"
             @input="{{handleInput}}"
             @change="{{handleChange}}"
+            @click="{{handleClick}}"
             @focus="{{handleFocus}}"
             @blur="{{handleBlur}}"
             @keydown={{handleKeyDown}}
@@ -106,3 +107,17 @@
   value-state="{{fieldState}}">
   </udex-status-message>
 {{/if}}
+
+{{#if supportingText}}
+  <span id="{{_id}}-supportingTextDesc" class="hidden-text">{{supportingText}}</span>
+{{/if}}
+
+{{#if hasValueState}}
+  <span id="{{_id}}-valueStateDesc" class="hidden-text">{{valueStateText}}</span>
+{{/if}}
+
+{{#if readonly}}
+  <span id="{{_id}}-stateReadOnlyDesc" class="hidden-text">{{readOnlyStateText}}</span>
+{{/if}}
+
+<span id="{{_id}}-countrySelectorAriaLabel" class="hidden-text">{{countrySelectorAriaLabel}}</span>

package/src/PhoneNumberField.ts

@@ -7,7 +7,10 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING,
+} from "./generated/i18n/i18n-defaults.js";
 import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -266,16 +269,32 @@ class UDExPhoneNumberField extends UI5Element {
   @property({ type: String, multiple: false, noAttribute: true })
     previousKey!: string;
 
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get countrySelectorAriaLabel() {
-    return this.accessibleName || `${this.label} ${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)}`;
+    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
   }
 
   get countryIso() {
@@ -360,6 +379,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleFocus() {
+    this.active = true;
     if (this.countryIso.length === 0) {
       this.phoneFormat = initialPlaceholder;
     }
@@ -369,7 +389,15 @@ class UDExPhoneNumberField extends UI5Element {
     }
   }
 
+  handleClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  }
+
   handleBlur() {
+    this.active = false;
+    this._isTouched = false;
     this.applyPlaceholder();
 
     const prefixLength = this.selectedPhonePrefix.length;
@@ -547,6 +575,43 @@ class UDExPhoneNumberField extends UI5Element {
     });
   }
 
+  get valueStateTypeMappings() {
+    return {
+      "Success": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      "Standard": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      "Error": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Warning": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_WARNING),
+    };
+  }
+
+  get hasValueState() {
+    return this.fieldState !== FieldState.Standard;
+  }
+
+  get valueStateText() {
+    return this.fieldState !== FieldState.Standard ? this.valueStateTypeMappings[this.fieldState] : undefined;
+  }
+
+  get readOnlyStateText() {
+    return UDExPhoneNumberField.i18nBundle.getText(READ_ONLY);
+  }
+
+  get ariaDescribedById(): string {
+    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
+  }
+
+  get supportingTextId():string {
+    return this.supportingText ? `${this._id}-supportingTextDesc` : "";
+  }
+
+  get valueStateTextId():string {
+    return this.hasValueState ? `${this._id}-valueStateDesc` : "";
+  }
+
+  get readOnlyStateTextId():string {
+    return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
+  }
+
   onBeforeRendering() {
     this.applyPlaceholder();
 

package/src/RatingBar.ts

@@ -72,7 +72,7 @@ class UDExRatingBar extends UI5Element {
   _maxPercentage: number = 100;
 
   static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExRatingBar.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/Review.ts

@@ -94,7 +94,7 @@ class UDExReview extends UI5Element {
   _maxRatingBars: number = 5;
 
   static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExReview.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get reviewsText(): string {