@sapudex/web-components 2.53.0 → 2.55.0

package/src/ListItemTemplate.tsx

@@ -0,0 +1,193 @@
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type UDExListItem from "./ListItem.js";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAvatar from "./Avatar.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+function ContentList(this: UDExListItem) {
+  return (
+    <div
+      class="udex-list__content-wrap"
+      {...({ "_id": this._id } as object)}
+      aria-labelledby={`${this._id}-invisibleText`}
+      aria-label={this.accessibleListItemName}>
+      {this.flag && (
+        <div class="udex-list__flag-wrap">
+          <span class="udex-list__flag" style={{ backgroundPosition: this.flagPosition }}></span>
+        </div>
+      )}
+      {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
+      {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
+      {this.typeIcon && (
+        <Icon
+          name={this._icon}
+          class="udex-list__icon"
+          accessible-role="presentation"
+          aria-hidden="true"
+          part="icon"
+        />
+      )}
+      {this.image && (
+        <UDExAvatar
+          class="udex-list__avatar"
+          part="avatar"
+          shape={this.imageShape}
+          size={this.imageSize}>
+          {this.imageBadgeState && (
+            <UDExStatusBadge
+              slot="badge"
+              value-state={this.imageBadgeState}
+              size={this.imageSize}
+            />
+          )}
+          <img src={this.image} alt={this.imageAlt} />
+        </UDExAvatar>
+      )}
+      <div class="udex-list__content" part="content">
+        {this.label ? (
+          <>
+            <div class="udex-list__text-holder">
+              <span part="title" {...({ innerHTML: this.label } as object)}></span>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              <slot part="content"></slot>
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        ) : (
+          <>
+            <div class="udex-list__text-holder">
+              <slot part="content"></slot>
+              {this.supportingText && (
+                <span class="udex-list__supporting-text" part="supporting">{this.supportingText}</span>
+              )}
+              {this.hasRating && (
+                <UDExRatingIndicator
+                  aria-label={this.ratingAriaLabel}
+                  value={this.rating !== undefined ? Number(this.rating) : undefined}
+                  rating-count={this.ratingCount}
+                  total-count={this.totalCount}
+                  max={this.ratingMax}
+                  display={this._displayRating}
+                  disabled
+                  readonly
+                />
+              )}
+            </div>
+            {this.additionalText && (
+              <div class="udex-list__add-text" part="additional-text">{this.additionalText}</div>
+            )}
+            <div class="udex-list__btn-wrap">
+              {this.hasFirstIcon && <slot name="firstIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+              {this.hasSecondIcon && <slot name="secondIcon" onClick={this._fireIconClickEvent as EventListener}></slot>}
+            </div>
+          </>
+        )}
+        {this.collapsible && (
+          <div class="udex-list__group-heading__icon-wrapper">
+            <UDExButton
+              class="udex-list__group-heading__icon"
+              size={UDExButtonSize.Small}
+              design={UDExButtonDesign.Tertiary}
+              onMouseDown={this.handleCollapseIconMouseDown}
+              onClick={this.handleCollapseIconClick as EventListener}
+              tabindex={-1}
+              accessible-name={this.expandButtonAccessibleName}
+              {...({ "mode": "Interactive" } as object)}
+              icon={slimArrowRight}
+            />
+          </div>
+        )}
+      </div>
+      <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
+      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
+    </div>
+  );
+}
+
+export default function ListItemTemplate(this: UDExListItem) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          part="item"
+          tabIndex={Number(this._effectiveTabIndex)}
+          aria-disabled={this._ariaDisabled}
+          class={this.className}
+          role={this.roleItem as AriaRole}
+          aria-checked={this.ariaCheckedValue}
+          aria-selected={this.ariaSelectedValue}
+          aria-expanded={this.ariaExpandedValue}
+          onFocusIn={this.handleFocusIn}
+          onFocusOut={this.handleFocusOut}
+          onClick={this.handleItemClick}
+          onMouseDown={this.handleMouseDown}
+          onMouseUp={this.handleMouseUp}
+          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
+          {...({ divider: this.divider, "_id": this._id } as object)}
+          data-selected={this.selected}
+          aria-describedby={this.itemDescribedBy}>
+          {this.modeMultiSelect && (
+            <UDExCheckbox
+              class="udex-list__checkbox"
+              part="checkbox"
+              tabindex={-1}
+              indeterminate={this.indeterminate}
+              accessible-name={`checkbox ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+            />
+          )}
+          {this.modeRadioGroup && (
+            <UDExRadioButton
+              class="udex-list__radio"
+              part="radio"
+              tabindex={-1}
+              accessible-name={`radio ${this.stateAccessibleName}`}
+              checked={this.selected}
+              disabled={this.disabled}
+            />
+          )}
+          {ContentList.call(this)}
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <div
+          part="item"
+          role={this.roleItem as AriaRole}
+          aria-selected={this.selected}
+          class={this.className}>
+          {ContentList.call(this)}
+        </div>
+      )}
+    </>
+  );
+}

package/src/ListSelectAll.ts

@@ -1,14 +1,13 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
-import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
-import UDExListItem from "./ListItem.js";
+import ListSelectAllTemplate from "./ListSelectAllTemplate.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import translate from "./utils/translate.js";
 
@@ -41,10 +40,10 @@ type UDExListSelectAllSelectAllEventDetail = {
  */
 @customElement({
   tag: "udex-list-select-all",
-  renderer: litRender,
+  renderer: jsxRenderer,
+  languageAware: true,
   styles: ListGroupHeaderCss,
   template: ListSelectAllTemplate,
-  dependencies: [UDExListItem],
 })
 /**
    * Fired when the user clicks on the Select All header.

package/src/ListSelectAllTemplate.tsx

@@ -0,0 +1,38 @@
+import type UDExListSelectAll from "./ListSelectAll.js";
+import UDExListItem from "./ListItem.js";
+
+export default function ListSelectAllTemplate(this: UDExListSelectAll) {
+  return (
+    <div
+      part="item"
+      class="udex-list__group"
+      role="group"
+      aria-labelledby="group-select-all">
+      <div
+        role="listbox"
+        aria-label="select-all-group"
+        class={this.groupListClassName}
+        onui5-item-press={this.handleSelectAllGroupItemsPress}>
+        <UDExListItem
+          role="group"
+          part="group-item"
+          accessible-role="option"
+          mode={this.multiselectMode}
+          onClick={this.handleSelectAllPress}
+          class={this.className}
+          selected={this.selected}
+          aria-current={this.selected}
+          indeterminate={this.indeterminate}
+          controlled={this.controlled}
+          onKeyDown={this.handleKeyDownPress}
+          _tab-index={Number(this._effectiveTabIndex)}
+          _additional-class-name={this.additionalClassName}
+          supportingText={this.supportingText}
+          divider>
+          {this.selectAllLabel}
+        </UDExListItem>
+        <slot></slot>
+      </div>
+    </div>
+  );
+}

package/src/ListTemplate.tsx

@@ -0,0 +1,60 @@
+import type UDExList from "./List.js";
+import type { AriaRole } from "@ui5/webcomponents-base/types.js";
+
+export default function ListTemplate(this: UDExList) {
+  return (
+    <>
+      {this.modeSelected && (
+        <div
+          class="udex-list-root"
+          onKeyDown={this.handleKeyDown}
+          style={{ height: this.holderHeight }}
+          onui5-item-press={this.handleItemPress}
+          onui5-header-press={this.handleItemPress}>
+          <div class="udex-list__scroll-container">
+            {HeaderText.call(this)}
+            <span id={`${this._id}-mode-label`} class="udex-list__hidden-text">
+              {this.ariaLabelModeText}
+            </span>
+            <div
+              id="udex-list"
+              class="udex-list"
+              role={this.effectiveAccessibleRole as AriaRole}
+              aria-labelledby={this.ariaLabelledBy}
+              aria-multiselectable={this._listAriaMultiSelectable as "true" | undefined}
+              aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      )}
+      {this.modeSingleContent && (
+        <>
+          {HeaderText.call(this)}
+          <div
+            id="udex-list"
+            class="udex-list"
+            role={this.accessibleRole as AriaRole}
+            aria-label={this.singleContentAriaLabel}
+            aria-busy={(this.ariaBusy ?? undefined) as "true" | "false" | undefined}>
+            <slot></slot>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+function HeaderText(this: UDExList) {
+  if (!this.headerText) {
+    return null;
+  }
+  return (
+    <header
+      id={`${this._id}-mode-label`}
+      class="udex-list__header-text"
+      part="header">
+      {this.headerText}
+    </header>
+  );
+}

package/src/MastheadItem.ts

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -299,7 +299,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @slot({ type: HTMLElement })
-    dropdown?: Array<HTMLElement>;
+    dropdown!: Slot<HTMLElement>;
 
   /**
    * Slot for any content
@@ -308,7 +308,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @slot({ type: HTMLElement, "default": true })
-    content?: DefaultSlot<HTMLElement>;
+    content!: DefaultSlot<HTMLElement>;
 
   /**
    * Defines the prevents the item from losing focus.

package/src/MastheadMobileMenu.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -106,7 +106,7 @@ class UDExMastheadMobileMenu extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    search!: Array<Node>;
+    search!: Slot<Node>;
 
   /**
    * List of the menu items
@@ -124,7 +124,7 @@ class UDExMastheadMobileMenu extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    exploreSapMobileButton?: UDExMastheadItem;
+    exploreSapMobileButton!: Slot<UDExMastheadItem>;
 
   @property({ type: Boolean })
     _showCategories!: boolean;

package/src/MastheadProfileMenu.ts

@@ -1,7 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -215,7 +216,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    * @public
    */
   @slot({ type: Node, "default": false })
-    message!: Array<Node>;
+    message!: Slot<Node>;
 
   /**
    * Slot for logout button.
@@ -223,7 +224,7 @@ class UDExMastheadProfileMenu extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    logoutButton!: Array<Node>;
+    logoutButton!: Slot<Node>;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;

package/src/MastheadShell.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -259,7 +259,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    countrySelector!: Array<UDExMastheadItem>;
+    countrySelector!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for mobile menu
@@ -267,7 +267,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    mobileMenu!: Array<Node>;
+    mobileMenu!: Slot<Node>;
 
   /**
    * Slot for main menu items.
@@ -285,7 +285,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: Node })
-    search!: Array<Node>;
+    search!: Slot<Node>;
 
   /**
    * Slot for 'Explore SAP' menu
@@ -293,7 +293,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    exploreSAP!: Array<UDExMastheadItem>;
+    exploreSAP!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for cart menu
@@ -301,7 +301,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    cart!: Array<UDExMastheadItem>;
+    cart!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for joule menu
@@ -309,7 +309,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    joule!: Array<UDExMastheadItem>;
+    joule!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for avatar
@@ -317,7 +317,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    profile!: Array<UDExMastheadItem>;
+    profile!: Slot<UDExMastheadItem>;
 
   /**
    * Slot for support
@@ -325,7 +325,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   @slot({ type: HTMLElement })
-    support!: Array<UDExMastheadItem>;
+    support!: Slot<UDExMastheadItem>;
 
   /**
    * Defines URL to homepage. It will be used as a link on a logo and a site label

package/src/MediaPlayer.ts

@@ -5,7 +5,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
 import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
@@ -264,7 +264,7 @@ class UDExMediaPlayer extends UI5Element {
   video50!: boolean;
   video75!: boolean;
   videoCompleted!: boolean;
-  videoStart!: boolean;
+  _embedVideoStartFired = false;
   videoReady!: boolean;
   videoProgress!: number;
   private _pendingPlugins: Array<{ name: string; plugin: (...args: any[]) => any }> = [];
@@ -371,6 +371,9 @@ class UDExMediaPlayer extends UI5Element {
     });
 
     player.on("ended", () => {
+      this.video25 = false;
+      this.video50 = false;
+      this.video75 = false;
       this.fireDecoratorEvent("videoComplete");
     });
 
@@ -611,15 +614,19 @@ class UDExMediaPlayer extends UI5Element {
   }
 
   handleEmbedVideoPlaying = (embedEvent: CustomEvent) => {
-    if (!this.videoStart) {
+    if (!this._embedVideoStartFired) {
       this.fireDecoratorEvent("videoStart");
-      this.videoStart = true;
+      this._embedVideoStartFired = true;
     }
     const playedTime = Math.round(embedEvent.detail.percentPlayed as number);
     this.calculateVideoProgress(playedTime);
   };
 
   handleEmbedVideoEnded() {
+    this._embedVideoStartFired = false;
+    this.video25 = false;
+    this.video50 = false;
+    this.video75 = false;
     this.fireDecoratorEvent("videoComplete");
   }
 

package/src/MediaPlayerVimeo.ts

@@ -39,6 +39,13 @@ type UDExMediaPlayerVimeoPlayingEventDetail = {
   styles: [MediaPlayerCss],
   template: MediaPlayerVimeoTemplate,
 })
+/**
+ * Fires when video starts playing for the first time or is replayed after ending
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("videoStart", { bubbles: true })
 /**
  * Fires when video is ready
  *
@@ -70,6 +77,7 @@ type UDExMediaPlayerVimeoPlayingEventDetail = {
 @event("playing", { bubbles: true })
 class UDExMediaPlayerVimeo extends UI5Element {
   eventDetails!: {
+    "videoStart": void,
     "ready": void,
     "ended": void,
     "pause": void,
@@ -128,6 +136,25 @@ class UDExMediaPlayerVimeo extends UI5Element {
     fluidMode!: boolean;
 
   player!: Player;
+  private _hasStarted = false;
+  private _replayPending = false;
+
+  _onVimeoPlay = () => {
+    if (!this._hasStarted || this._replayPending) {
+      this.fireDecoratorEvent("videoStart");
+      this._hasStarted = true;
+      this._replayPending = false;
+    }
+  };
+
+  _onVimeoPause = () => {
+    this.fireDecoratorEvent("pause");
+  };
+
+  _onVimeoEnded = () => {
+    this._replayPending = true;
+    this.fireDecoratorEvent("ended");
+  };
 
   setupPlayer = () => {
     const iframe = this.shadowRoot?.querySelector("iframe");
@@ -136,17 +163,15 @@ class UDExMediaPlayerVimeo extends UI5Element {
     }
     this.player = new Player(iframe);
 
+    this.player.on("play", this._onVimeoPlay);
+
     this.player.on("timeupdate", e => {
       this.fireDecoratorEvent("playing", { percentPlayed: e.percent * 100 });
     });
 
-    this.player.on("pause", () => {
-      this.fireDecoratorEvent("pause");
-    });
+    this.player.on("pause", this._onVimeoPause);
 
-    this.player.on("ended", () => {
-      this.fireDecoratorEvent("ended");
-    });
+    this.player.on("ended", this._onVimeoEnded);
 
     this.player.on("loaded", () => {
       this.fireDecoratorEvent("ready");

package/src/MediaPlayerYoutube.ts

@@ -1,3 +1,4 @@
+/// <reference types="youtube" />
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
@@ -61,6 +62,13 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
   styles: [MediaPlayerCss, MediaPlayerYoutubeCss],
   template: MediaPlayerYoutubeTemplate,
 })
+/**
+ * Fires when video starts playing for the first time or is replayed after ending
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("videoStart", { bubbles: true })
 /**
  * Fires when video is ready
  *
@@ -94,6 +102,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
 @event("playing", { bubbles: true })
 class UDExMediaPlayerYoutube extends UI5Element {
   eventDetails!: {
+    "videoStart": void,
     "ready": void,
     "ended": UDExMediaPlayerYoutubeBaseEventDetails,
     "pause": UDExMediaPlayerYoutubeBaseEventDetails,
@@ -147,6 +156,8 @@ class UDExMediaPlayerYoutube extends UI5Element {
   private youtubePlayer!: YT.Player;
   private checkInterval?: number;
   private videoDuration: number = 0;
+  private _hasStarted = false;
+  private _replayPending = false;
 
   get videoId(): string {
     if (!this.source) {
@@ -221,16 +232,24 @@ class UDExMediaPlayerYoutube extends UI5Element {
     const { data } = ytevent;
     const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;
 
-    if (data === PLAYING && !this.checkInterval) {
-      this.checkInterval = window.setInterval(() => {
-        this.checkVideoProgress();
-      }, CHECK_INTERVAL_TIME);
-    } else if (data !== PLAYING && this.checkInterval) {
+    if (data === PLAYING) {
+      if (!this._hasStarted || this._replayPending) {
+        this.fireDecoratorEvent("videoStart");
+        this._hasStarted = true;
+        this._replayPending = false;
+      }
+      if (!this.checkInterval) {
+        this.checkInterval = window.setInterval(() => {
+          this.checkVideoProgress();
+        }, CHECK_INTERVAL_TIME);
+      }
+    } else if (this.checkInterval) {
       clearInterval(this.checkInterval);
       this.checkInterval = undefined;
     }
 
     if (data === ENDED) {
+      this._replayPending = true;
       this.fireDecoratorEvent("ended", { ytevent });
     }