@sapudex/web-components 2.21.0 → 2.23.0

package/src/MastheadProfileMenu.ts

@@ -101,6 +101,10 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
 /**
  * Fired when use click Logout link
  * @public
+ * @param {UDExMastheadMenuItem} item The clicked logout item
+ * @param {HTMLElement} sourceNode The HTML element of the clicked logout item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked logout item
  */
 @event("logout", { cancelable: true, bubbles: true })
 
@@ -108,6 +112,10 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fires when profile menu item is clicked
  *
  * @public
+ * @param {UDExMastheadMenuItem} item The clicked profile menu item
+ * @param {PointerEvent} originalEvent The original event object
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked profile menu item
+ * @param {HTMLElement} sourceNode The HTML element of the clicked profile menu item
  */
 @event("profile-item-click", { cancelable: true, bubbles: true })
 
@@ -115,6 +123,7 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fired when use click add or remove account button
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked add or remove account button
  */
 @event("add-or-remove-account-click", { cancelable: true, bubbles: true })
 
@@ -122,6 +131,8 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
  * Fires when identity item is clicked
  *
  * @public
+ * @param {ExtendedUserIdentity} item The clicked identity item
+ * @param {AnalyticsName} analyticsName The analytics name for the clicked identity item
  */
 @event("identity-item-click", { cancelable: true, bubbles: true })
 

package/src/MastheadShell.ts

@@ -96,6 +96,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the mobile menu button opener.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("mobile-menu-open", { bubbles: true })
 
@@ -103,6 +104,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the mobile menu button closer.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("mobile-menu-close", { bubbles: true })
 
@@ -110,6 +112,11 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the search button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
+ *
  */
 @event("search-click", { bubbles: true })
 
@@ -117,6 +124,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the search close button.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("search-close-click", { bubbles: true })
 
@@ -124,6 +135,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is opened.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("search-opened", { bubbles: true })
 
@@ -131,6 +143,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is closed.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
  */
 @event("search-closed", { bubbles: true })
 
@@ -138,6 +151,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("cart-click", { bubbles: true })
 
@@ -145,6 +162,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the support button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("support-click", { bubbles: true })
 
@@ -152,6 +173,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("profile-click", { bubbles: true })
 
@@ -159,6 +184,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("country-selector-click", { bubbles: true })
 
@@ -166,6 +195,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the logo.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("logo-click", { bubbles: true })
 
@@ -173,6 +206,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the site label.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("site-label-click", { bubbles: true })
 
@@ -180,6 +217,10 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the co-brand.
  *
  * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
  */
 @event("co-brand-click", { bubbles: true })
 

package/src/MediaPlayer.ts

@@ -93,6 +93,7 @@ type UDExMediaPlayerVideoProgressEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} progress percentage of video watched
  */
 @event("videoProgress", { bubbles: true })
 /**
@@ -333,6 +334,7 @@ class UDExMediaPlayer extends UI5Element {
     player.on("ready", () => {
       this.checkCaptionsAvailability(player);
       this.applyScrollIntoTheView();
+      this.player.src(this.source);
       this.fireDecoratorEvent("videoReady");
     });
 
@@ -457,6 +459,7 @@ class UDExMediaPlayer extends UI5Element {
 
   getOptionsValue() {
     const baseOptions = {
+      type: this.type,
       playbackRates: [1, 1.5, 2],
       controls: true,
       poster: this.poster,

package/src/MediaPlayerTemplate.tsx

@@ -35,7 +35,6 @@ function renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {
     <video-js
       id={this.playerElementId}
       class={`${rootClass} ${this.aspectRatioClass}`}>
-      <source src={this.source} type={this.type} />
       {this._tracks.map((element: HTMLTrackElement, index: number) => {
         const {
           "default": isDefault, kind, src, srclang, label

package/src/MediaPlayerVimeo.ts

@@ -12,7 +12,7 @@ import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
 export type VimeoPlayer = Player;
 
-type UDExMediaPLayerViemeoPlayingEventDetail = {
+type UDExMediaPlayerVimeoPlayingEventDetail = {
   percentPlayed: number,
 }
 
@@ -65,6 +65,7 @@ type UDExMediaPLayerViemeoPlayingEventDetail = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} percentPlayed Percentage of video played (0-100)
  */
 @event("playing", { bubbles: true })
 class UDExMediaPlayerVimeo extends UI5Element {
@@ -72,7 +73,7 @@ class UDExMediaPlayerVimeo extends UI5Element {
     "ready": void,
     "ended": void,
     "pause": void,
-    "playing": UDExMediaPLayerViemeoPlayingEventDetail,
+    "playing": UDExMediaPlayerVimeoPlayingEventDetail,
   };
   /**
  * Defines the source of the video  or audio
@@ -175,4 +176,4 @@ class UDExMediaPlayerVimeo extends UI5Element {
 UDExMediaPlayerVimeo.define();
 
 export default UDExMediaPlayerVimeo;
-export type { UDExMediaPLayerViemeoPlayingEventDetail };
+export type { UDExMediaPlayerVimeoPlayingEventDetail };

package/src/MediaPlayerYoutube.ts

@@ -73,6 +73,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event
  */
 @event("ended", { bubbles: true })
 /**
@@ -80,6 +81,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event
  */
 @event("pause", { bubbles: true })
 /**
@@ -87,6 +89,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  *
  * @allowPreventDefault
  * @public
+ * @param {number} percentPlayed Percentage of video played (0-100)
  */
 @event("playing", { bubbles: true })
 class UDExMediaPlayerYoutube extends UI5Element {

package/src/Pagination.ts

@@ -71,7 +71,7 @@ type UDExPaginationChangeEventDetail = {
  * Fires when pagination item was clicked.
  *
  * @allowPreventDefault
- * @param {Number}
+ * @param {number} currentPage The current page number.
  * @public
  */
 @event("change", { bubbles: true })

package/src/Search.ts

@@ -6,7 +6,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import {
@@ -42,12 +42,13 @@ import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
 
-import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
+import SearchTemplate from "./SearchTemplate.js";
 
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type { Booleanish } from "@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -126,7 +127,7 @@ type UDExSearchKeydownEventDetail = {
  */
 @customElement({
   tag: "udex-search",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SearchCss, SearchSuggestionsCss, getEffectiveScrollbarStyle()],
   template: SearchTemplate,
   get dependencies() {
@@ -139,12 +140,20 @@ type UDExSearchKeydownEventDetail = {
  * Fired event when the user submitted the value.
  *
  * @public
+ * @param {string} value The submitted search value
+ * @param {string} categoryName The category name if an item from the suggestion list is clicked
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("submit-search-value", { bubbles: true })
 /**
  * Fired event when the user typed to search field.
  *
  * @public
+ * @param {string} value The current value of the search field
+ * @param {string} categoryName The category name if an item from the suggestion list is clicked
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("handle-value-search", { bubbles: true })
 /**
@@ -157,18 +166,25 @@ type UDExSearchKeydownEventDetail = {
  * Fired event when the user clicks on the item inside the popover.
  *
  * @public
+ * @param {string} value The value of the clicked item
+ * @param {string} categoryName The category name of the clicked item
+ * @param {string} item The clicked item from the suggestion list
+ *
  */
 @event("dropdown-item-click", { bubbles: true })
 /**
  * Fired event when the user clicks on the intem inside the prefix dropdown.
  *
  * @public
+ * @param {ListItemBase} item The clicked item from the prefix dropdown
+ *
  */
 @event("prefix-item-click")
 /**
  * Fired event when the user clicks on the intem inside the prefix dropdown.
  *
  * @public
+ * @param {KeyboardEvent} e The keyboard event object
  */
 @event("search-keydown", { bubbles: true })
 class UDExSearch extends UI5Element {
@@ -1181,7 +1197,7 @@ class UDExSearch extends UI5Element {
     return !!(this.suggestedList?.length || this.recommendedList?.length);
   }
 
-  get getAriaHasPopup(): string {
+  get getAriaHasPopup(): "dialog" | Booleanish {
     return this.showSuggestedPopover ? "dialog" : "false";
   }