@sapudex/web-components 0.117.1 → 0.138.0

package/src/MastheadShell.ts

@@ -23,6 +23,8 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
 const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
+const breakpointSizeM: number = 1279;
+
 /**
  * @class
  *
@@ -57,7 +59,6 @@ const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 /**
  * Fired event when the user clicks the search button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#searchClick
  * @public
  */
 @event("search-click")
@@ -65,7 +66,6 @@ const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 /**
  * Fired event when the user clicks the cart button trigger.
  *
- * @event sap.ui.webc.web-components.UDExMastheadShell#cartClick
  * @public
  */
 @event("cart-click")
@@ -73,10 +73,36 @@ const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 /**
  * 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
@@ -173,6 +199,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: String, defaultValue: "" })
     logoUrl!: string;
 
+  /**
+   * Defines the Logo default title
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    logoTitle!: string;
+
   /**
    * Defines a site label. It will be displayed next to a logo.
    *
@@ -267,11 +302,15 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
-    if (this._shouldHandleResize) {
-      this._mobileMenu?.showFirstLevelMenu();
-      this.removeOverflowBody();
+    if (this.isMobileView) {
+      this._isSearchVisible = false;
+    }
+
+    if (this._shouldHandleResize && this.isMobileView) {
+      this.resetMobileMenuOpenState();
       return;
     }
+
     this._shouldHandleResize = true;
   }
 
@@ -299,6 +338,14 @@ 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;
@@ -311,13 +358,11 @@ 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");
   }
 
@@ -443,6 +488,16 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
+  resetMobileMenuOpenState(): void {
+    this.removeActiveMobileClass();
+    this.resetSelectedItems();
+    this._mobileMenu?.showFirstLevelMenu();
+
+    if (this.bodyOverflow) {
+      this.removeOverflowBody();
+    }
+  }
+
   get searchOpener(): UDExMastheadItem | null | undefined {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
@@ -478,6 +533,10 @@ class UDExMastheadShell extends UI5Element {
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
+
+  get isMobileView(): boolean {
+    return window.innerWidth <= breakpointSizeM;
+  }
 }
 
 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

@@ -189,7 +189,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get _closeButtonText() {
-    return this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON);
+    return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
   get iconProvided() {

package/src/Pagination.hbs

@@ -17,8 +17,9 @@
             <udex-button
             ?disabled="{{prevButtonDisbled}}"
             accessible-name="{{previousPageAccessibleName}}"
+            tooltip="{{previousBtnTooltip}}"
             size="Large"
-            icon="nav-back"
+            icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
             ></udex-button>
@@ -45,7 +46,8 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}" 
+            ?disabled="{{nextButtonDisbled}}"
+            tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"

package/src/Pagination.ts

@@ -6,6 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OF,
   PAGINATION_PAGE,
@@ -141,6 +142,12 @@ class UDExPagination extends UI5Element {
     this._mobileDisplayNumber = 5;
   }
 
+  onEnterDOM() {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
   get nextButtonDisbled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
@@ -209,11 +216,19 @@ class UDExPagination extends UI5Element {
     return `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
+  get previousBtnTooltip(): string {
+    return !this.prevButtonDisbled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
+  }
+
   get nextPageAccessibleName(): string {
     if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
     return `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
+  get nextBtnTooltip(): string {
+    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+  }
+
   get pagination(): Page[] {
     return this.setupPages(this.pages);
   }
@@ -312,8 +327,8 @@ class UDExPagination extends UI5Element {
 
     for (let index = startIndex; index < endIndex && index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,
@@ -330,8 +345,8 @@ class UDExPagination extends UI5Element {
     const pagesCollection = [];
     for (let index = 0; index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,

package/src/PasswordField.hbs

@@ -1,5 +1,4 @@
-<div class="udex-password-field">
-  <udex-text-field
+<udex-text-field
     type={{type}}
     value="{{value}}"
     label="{{passwordLabel}}"
@@ -11,18 +10,8 @@
     supporting-text="{{supportingText}}"
     accessible-name="{{accessibleName}}"
     accessible-name-ref="{{accessibleNameRef}}"
-  ></udex-text-field>
-  {{#if renderShowButton}}
-    <udex-control-button
-      ?disabled="{{disabled}}"
-      id="show-button"
-      design="Default"
-      class="udex-password-field__button udex-password-field__button_show"
-      icon={{icon}}
-      size="Large"
-      accessible-name="{{showButtonTooltip}}"
-      tooltip={{showButtonTooltip}}
-      @click="{{handleShowPassword}}"
-      ></udex-control-button>
-  {{/if}}
-</div>
+    accessible-icon-name="{{showButtonTooltip}}"
+    show-button-tooltip="{{showButtonTooltip}}"
+    @ui5-click-icon="{{handleShowPassword}}"
+    icon="{{iconButton}}"
+></udex-text-field>

package/src/PasswordField.ts

@@ -6,15 +6,19 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 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 UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
 
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
 
-// Styles
-
-import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
+export enum InputType {
+  Password = "password",
+  Text = "text",
+}
 
+export enum IconType {
+  Hide = "hide",
+  Show = "show",
+}
 /**
  * @class
  *
@@ -36,19 +40,19 @@ import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
 @customElement({
   tag: "udex-password-field",
   renderer: litRender,
-  styles: PasswordFieldCss,
   template: PasswordFieldTemplate,
-  dependencies: [UDExTextField, UDExControlButton],
+  dependencies: [UDExTextField],
 })
+
 class UDExPasswordField extends UI5Element {
   /**
    * Defines supporting text under the input field.
    *
    * @default ""
-   * @public
+   * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "password" })
-    type!: string;
+  @property({ type: String, noAttribute: true, defaultValue: InputType.Password })
+    type!: InputType;
 
   /**
    * Defines whether the component is in disabled state.
@@ -109,8 +113,8 @@ class UDExPasswordField extends UI5Element {
    * @public
    */
 
-  @property({ type: ValueState, defaultValue: "Standard" })
-    valueState!: "Standard" | "Warning" | "Error" | "Success";
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: ValueState;
 
   /**
    * Defines supporting text under the input field.
@@ -139,8 +143,8 @@ class UDExPasswordField extends UI5Element {
    * @private
    */
 
-  @property({ type: String, noAttribute: true, defaultValue: "show" })
-    icon!: string;
+  @property({ type: String, noAttribute: true, defaultValue: IconType.Show })
+    icon!: IconType;
 
   /**
    * Defines the inner stored show password button tooltip.
@@ -149,7 +153,7 @@ class UDExPasswordField extends UI5Element {
    * @public
    */
 
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     showButtonTooltip!: string;
 
   /**
@@ -176,7 +180,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property()
+  @property({ type: String })
     accessibleName!: string;
 
   /**
@@ -184,7 +188,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
+  @property({ type: String })
     accessibleNameRef!: string;
 
   static i18nBundle: I18nBundle;
@@ -193,20 +197,24 @@ class UDExPasswordField extends UI5Element {
     UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  handleShowPassword() {
-    const isPassword = this.type === "password";
+  handleShowPassword(): void {
+    const isPassword = this.type === InputType.Password;
 
-    this.icon = isPassword ? "hide" : "show";
-    this.type = isPassword ? "text" : "password";
+    this.icon = isPassword ? IconType.Hide : IconType.Show;
+    this.type = isPassword ? InputType.Text : InputType.Password;
   }
 
-  get passwordLabel() {
-    return `${this.label} ${this.showAsterisk && this.showAsterisk ? "*" : ""}`;
+  get passwordLabel(): string {
+    return `${this.label} ${this.showAsterisk ? "*" : ""}`;
   }
 
-  get renderShowButton() {
+  get renderShowButton(): boolean {
     return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;
   }
+
+  get iconButton(): IconType | null {
+    return this.renderShowButton ? this.icon : null;
+  }
 }
 
 UDExPasswordField.define();

package/src/PhoneNumberField.hbs

@@ -6,8 +6,9 @@
 >
     {{#if label}}
         <label
+            id="udex-phone-number-field__label"
             class="udex-phone-number-field__label"
-            for="phone"
+            for="{{this._id}}-phone"
         >
             {{label}}
             {{#if required}}
@@ -17,7 +18,7 @@
     {{/if}}
     <udex-dropdown
         class="udex-phone-number-field__dropdown"
-        id="dropdown-menu"
+        id="{{this._id}}_dropdown-menu"
         horizontal-align="Left"
         height="{{height}}"
     >
@@ -52,9 +53,12 @@
                 design="Tertiary"
                 icon-end
                 ?disabled="{{isButtonDisabled}}"
-                aria-disabled="{{isButtonDisabled}}"
                 aria-haspopup="true"
-                accessible-name="{{countrySelectorAriaLabel}}"
+                accessible-name-ref="{{_id}}-countrySelectorAriaLabel {{ariaDescribedById}}"
+                aria-label="{{countrySelectorAriaLabel}}"
+                aria-expanded="{{_dropdownExpanded}}"
+                aria-controls="{{this._id}}_dropdown-menu"
+                role="combobox"
                 @click="{{onClick}}"
             >
                 <div class="udex-phone-number-field__open-button-text">
@@ -70,7 +74,7 @@
         {{/unless}}
         <input
             class="udex-phone-number-field__input"
-            id="phone"
+            id="{{this._id}}-phone"
             type="tel"
             .value="{{value}}"
             placeholder="{{phoneFormat}}"
@@ -80,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}}
@@ -101,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>