@sapudex/web-components 0.225.0 → 2.0.0

package/dist/MediaPlayerVimeo.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlayerVimeo.js","sourceRoot":"","sources":["../src/MediaPlayerVimeo.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Player from \"@vimeo/player\";\nimport MediaPlayerVimeoTemplate from \"./generated/templates/MediaPlayerVimeoTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\n\nexport type VimeoPlayer = Player;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player-vimeo</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-media-player-vimeo\",\n  renderer: litRender,\n  styles: [MediaPlayerCss],\n  template: MediaPlayerVimeoTemplate,\n  dependencies: [],\n})\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ready\")\n/**\n * Fires when video play ended\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ended\")\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"pause\")\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"playing\", {\n  detail: {\n    percentPlayed: { type: Number },\n  },\n})\nclass UDExMediaPlayerVimeo extends UI5Element {\n  /**\n * Defines the source of the video  or audio\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    source!: string;\n  /**\n   * Defines a title for youtube video\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    title!: string;\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    width!: string;\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    height!: string;\n  /**\n   * CSS class name for iframe fluid styles\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    aspectRatioClass!: string;\n  /**\n  * Defines if video should be displayed in fluid mode.\n  * In fluid mode, width and height will be ignored and size will be adjusted to the container.\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    fluidMode!: boolean;\n\n  player!: Player;\n\n  setupPlayer = () => {\n    const iframe = this.shadowRoot?.querySelector(\"iframe\");\n    if (!iframe) {\n      return;\n    }\n    this.player = new Player(iframe);\n\n    this.player.on(\"timeupdate\", e => {\n      this.fireEvent(\"playing\", { percentPlayed: e.percent * 100 });\n    });\n\n    this.player.on(\"pause\", () => {\n      this.fireEvent(\"pause\");\n    });\n\n    this.player.on(\"ended\", () => {\n      this.fireEvent(\"ended\");\n    });\n\n    this.player.on(\"loaded\", () => {\n      this.fireEvent(\"ready\");\n    });\n  };\n\n  onEnterDOM(): void {\n    this.setupPlayer();\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): VimeoPlayer {\n    return this.player;\n  }\n\n  get fluidModeClass() {\n    if (this.fluidMode) {\n      return \"video-js udex-media-player__fluid\";\n    }\n    return \"\";\n  }\n}\n\nUDExMediaPlayerVimeo.define();\n\nexport default UDExMediaPlayerVimeo;\n"]}
+{"version":3,"file":"MediaPlayerVimeo.js","sourceRoot":"","sources":["../src/MediaPlayerVimeo.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Player from \"@vimeo/player\";\nimport MediaPlayerVimeoTemplate from \"./generated/templates/MediaPlayerVimeoTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\n\nexport type VimeoPlayer = Player;\n\ntype UDExMediaPLayerViemeoPlayingEventDetail = {\n  percentPlayed: number,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player-vimeo</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MediaPlayerVimeo.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-media-player-vimeo\",\n  renderer: litRender,\n  styles: [MediaPlayerCss],\n  template: MediaPlayerVimeoTemplate,\n  dependencies: [],\n})\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ready\", { bubbles: true })\n/**\n * Fires when video play ended\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ended\", { bubbles: true })\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"pause\", { bubbles: true })\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"playing\", { bubbles: true })\nclass UDExMediaPlayerVimeo extends UI5Element {\n  eventDetails!: {\n    \"ready\": void,\n    \"ended\": void,\n    \"pause\": void,\n    \"playing\": UDExMediaPLayerViemeoPlayingEventDetail,\n  };\n  /**\n * Defines the source of the video  or audio\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String })\n    source: string = \"\";\n  /**\n   * Defines a title for youtube video\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    title: string = \"\";\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String })\n    width: string = \"\";\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    height: string = \"\";\n  /**\n   * CSS class name for iframe fluid styles\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    aspectRatioClass: string = \"\";\n  /**\n  * Defines if video should be displayed in fluid mode.\n  * In fluid mode, width and height will be ignored and size will be adjusted to the container.\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    fluidMode!: boolean;\n\n  player!: Player;\n\n  setupPlayer = () => {\n    const iframe = this.shadowRoot?.querySelector(\"iframe\");\n    if (!iframe) {\n      return;\n    }\n    this.player = new Player(iframe);\n\n    this.player.on(\"timeupdate\", e => {\n      this.fireDecoratorEvent(\"playing\", { percentPlayed: e.percent * 100 });\n    });\n\n    this.player.on(\"pause\", () => {\n      this.fireDecoratorEvent(\"pause\");\n    });\n\n    this.player.on(\"ended\", () => {\n      this.fireDecoratorEvent(\"ended\");\n    });\n\n    this.player.on(\"loaded\", () => {\n      this.fireDecoratorEvent(\"ready\");\n    });\n  };\n\n  onEnterDOM(): void {\n    this.setupPlayer();\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): VimeoPlayer {\n    return this.player;\n  }\n\n  get fluidModeClass() {\n    if (this.fluidMode) {\n      return \"video-js udex-media-player__fluid\";\n    }\n    return \"\";\n  }\n}\n\nUDExMediaPlayerVimeo.define();\n\nexport default UDExMediaPlayerVimeo;\n"]}

package/dist/MediaPlayerYoutube.d.ts

@@ -1,11 +1,16 @@
-/// <reference types="youtube" />
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { AspectRatio } from "./MediaPlayer.js";
+import type { UDExAspectRatio } from "./MediaPlayer.js";
 declare global {
     interface Window {
         onYouTubeIframeAPIReady: () => void;
     }
 }
+type UDExMediaPlayerYoutubePlayingEventDetail = {
+    percentPlayed: number;
+};
+type UDExMediaPlayerYoutubeBaseEventDetails = {
+    ytevent: YT.OnStateChangeEvent;
+};
 /**
  * @class
  *
@@ -24,6 +29,12 @@ declare global {
  * @public
  */
 declare class UDExMediaPlayerYoutube extends UI5Element {
+    eventDetails: {
+        "ready": void;
+        "ended": UDExMediaPlayerYoutubeBaseEventDetails;
+        "pause": UDExMediaPlayerYoutubeBaseEventDetails;
+        "playing": UDExMediaPlayerYoutubePlayingEventDetail;
+    };
     /**
    * Defines the source of the video  or audio
    *
@@ -54,7 +65,7 @@ declare class UDExMediaPlayerYoutube extends UI5Element {
     * @default "16:9"
     * @public
     */
-    aspectRatio: `${AspectRatio}`;
+    aspectRatio: `${UDExAspectRatio}`;
     /**
     * Defines if video should be displayed in fluid mode.
     * In fluid mode, width and height will be ignored and size will be adjusted to the container.

package/dist/MediaPlayerYoutube.js

@@ -7,13 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
 // Styles
 import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
-import MediaPlayerCss from "./generated/themes/MediaPlayer.css";
-import { AspectRatio } from "./MediaPlayer.js";
+import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 const MATCH_NOCOOKIE = /youtube-nocookie\.com/;
 const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
 const NOCOOKIE_HOST = "https://www.youtube-nocookie.com";
@@ -44,6 +43,37 @@ const MATCH_NUMERIC = /^\d+$/;
 let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
     constructor() {
         super(...arguments);
+        /**
+       * Defines the source of the video  or audio
+       *
+       * @default ""
+       * @public
+       */
+        this.source = "";
+        /**
+       * Defines video width. Used for YouTube and Vimeo videos only.
+       * Regular video and audio sizes are control by CSS variables.
+       *
+       * @default ""
+       * @public
+       */
+        this.width = "";
+        /**
+         * Defines video height. Used for YouTube and Vimeo videos only.
+         * Regular video and audio sizes are control by CSS variables.
+         *
+         * @default ""
+         * @public
+         */
+        this.height = "";
+        /**
+         * Defines aspect ratio of video. If set, video will be display in fluid mode.
+         * Possible values: "16:9" , "9:16", "4:3", "1:1", "none"
+        *
+        * @default "16:9"
+        * @public
+        */
+        this.aspectRatio = "16:9";
         this.videoDuration = 0;
         this.setupYoutubeAPI = () => {
             if (!window.YT) { // Only load script if YT is not already loaded
@@ -80,7 +110,7 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
         };
         this.onPlayerReady = (ytevent) => {
             this.videoDuration = ytevent.target.getDuration();
-            this.fireEvent("ready");
+            this.fireDecoratorEvent("ready");
         };
         this.onPlayerStateChange = (ytevent) => {
             const { data } = ytevent;
@@ -95,10 +125,10 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
                 this.checkInterval = undefined;
             }
             if (data === ENDED) {
-                this.fireEvent("ended", ytevent);
+                this.fireDecoratorEvent("ended", { ytevent });
             }
             if (data === PAUSED) {
-                this.fireEvent("pause", ytevent);
+                this.fireDecoratorEvent("pause", { ytevent });
             }
         };
     }
@@ -127,7 +157,7 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
     checkVideoProgress() {
         const currentTime = this.youtubePlayer?.getCurrentTime() || 0;
         const percentageWatched = (currentTime / this.videoDuration) * 100;
-        this.fireEvent("playing", { percentPlayed: percentageWatched });
+        this.fireDecoratorEvent("playing", { percentPlayed: percentageWatched });
     }
     parseTimeParam(url, pattern) {
         if (url instanceof Array) {
@@ -193,16 +223,16 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
     }
 };
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMediaPlayerYoutube.prototype, "source", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMediaPlayerYoutube.prototype, "width", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExMediaPlayerYoutube.prototype, "height", void 0);
 __decorate([
-    property({ type: AspectRatio, defaultValue: "16:9" })
+    property()
 ], UDExMediaPlayerYoutube.prototype, "aspectRatio", void 0);
 __decorate([
     property({ type: Boolean })
@@ -221,7 +251,7 @@ UDExMediaPlayerYoutube = __decorate([
      * @public
      */
     ,
-    event("ready")
+    event("ready", { bubbles: true })
     /**
      * Fires when video play ended
      *
@@ -229,7 +259,7 @@ UDExMediaPlayerYoutube = __decorate([
      * @public
      */
     ,
-    event("ended")
+    event("ended", { bubbles: true })
     /**
      * Fires when video is paused
      *
@@ -237,7 +267,7 @@ UDExMediaPlayerYoutube = __decorate([
      * @public
      */
     ,
-    event("pause")
+    event("pause", { bubbles: true })
     /**
      * Fires when video watching progress changed
      *
@@ -245,11 +275,7 @@ UDExMediaPlayerYoutube = __decorate([
      * @public
      */
     ,
-    event("playing", {
-        detail: {
-            percentPlayed: { type: Number },
-        },
-    })
+    event("playing", { bubbles: true })
 ], UDExMediaPlayerYoutube);
 UDExMediaPlayerYoutube.define();
 export default UDExMediaPlayerYoutube;

package/dist/MediaPlayerYoutube.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlayerYoutube.js","sourceRoot":"","sources":["../src/MediaPlayerYoutube.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport MediaPlayerYoutubeTemplate from \"./generated/templates/MediaPlayerYoutubeTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerYoutubeCss from \"./generated/themes/MediaPlayerYoutube.css.js\";\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css\";\nimport { AspectRatio } from \"./MediaPlayer.js\";\n\nconst MATCH_NOCOOKIE = /youtube-nocookie\\.com/;\nconst MATCH_URL_YOUTUBE = /(?:youtu\\.be\\/|youtube(?:-nocookie|education)?\\.com\\/(?:embed\\/|v\\/|watch\\/|watch\\?v=|watch\\?.+&v=|shorts\\/|live\\/))((\\w|-){11})|youtube\\.com\\/playlist\\?list=|youtube\\.com\\/user\\//;\nconst NOCOOKIE_HOST = \"https://www.youtube-nocookie.com\";\nconst SDK_URL = \"https://www.youtube.com/iframe_api\";\nconst SDK_GLOBAL_READY = \"onYouTubeIframeAPIReady\";\nconst CHECK_INTERVAL_TIME = 1000;\nconst MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/;\nconst MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;\nconst MATCH_START_STAMP = /(\\d+)(h|m|s)/g;\nconst MATCH_NUMERIC = /^\\d+$/;\n\ndeclare global {\n  interface Window {\n    onYouTubeIframeAPIReady: () => void;\n  }\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player-youtube</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-media-player-youtube\",\n  renderer: litRender,\n  styles: [MediaPlayerCss, MediaPlayerYoutubeCss],\n  template: MediaPlayerYoutubeTemplate,\n})\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ready\")\n/**\n * Fires when video play ended\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ended\")\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"pause\")\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"playing\", {\n  detail: {\n    percentPlayed: { type: Number },\n  },\n})\nclass UDExMediaPlayerYoutube extends UI5Element {\n  /**\n * Defines the source of the video  or audio\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    source!: string;\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String, defaultValue: \"\" })\n    width!: string;\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    height!: string;\n  /**\n   * Defines aspect ratio of video. If set, video will be display in fluid mode.\n   * Possible values: \"16:9\" , \"9:16\", \"4:3\", \"1:1\", \"none\"\n  *\n  * @default \"16:9\"\n  * @public\n  */\n  @property({ type: AspectRatio, defaultValue: \"16:9\" })\n    aspectRatio!: `${AspectRatio}`;\n  /**\n  * Defines if video should be displayed in fluid mode.\n  * In fluid mode, width and height will be ignored and size will be adjusted to the container.\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    fluidMode!: boolean;\n\n  private youtubePlayer!: YT.Player;\n  private checkInterval?: number;\n  private videoDuration: number = 0;\n\n  get videoId(): string {\n    if (!this.source) {\n      return \"\";\n    }\n    const urlMatch = this.source.match(MATCH_URL_YOUTUBE);\n    return urlMatch ? urlMatch[1] : \"\";\n  }\n\n  get url(): URL {\n    return new URL(this.source);\n  }\n\n  get autoplay(): number | undefined {\n    const param = this.url.searchParams.get(\"autoplay\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  get muted(): number | undefined {\n    const param = this.url.searchParams.get(\"mute\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  get playsinline(): number | undefined {\n    const param = this.url.searchParams.get(\"playsinline\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  setupYoutubeAPI = () => {\n    if (!window.YT) { // Only load script if YT is not already loaded\n      const tag = document.createElement(\"script\");\n      tag.src = SDK_URL;\n      const firstScriptTag = document.getElementsByTagName(\"script\")[0];\n      firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);\n    }\n\n    window[SDK_GLOBAL_READY] = () => this.onYouTubeIframeAPIReady();\n\n    // If YouTube IFrame API is already loaded, directly initialize the player\n    if (window.YT && window.YT.Player) {\n      this.onYouTubeIframeAPIReady();\n    }\n  };\n\n  onYouTubeIframeAPIReady = (): void => {\n    this.youtubePlayer = new YT.Player(this.shadowRoot?.querySelector(\"#player\") as HTMLElement, {\n      height: this.height,\n      width: this.width,\n      videoId: this.videoId,\n      playerVars: {\n        autoplay: this.autoplay ? 1 : 0,\n        mute: this.muted ? 1 : 0,\n        playsinline: this.playsinline ? 1 : 0,\n        origin: window.location.origin,\n        start: this.parseStartTime(this.source),\n        end: this.parseEndTime(this.source),\n      },\n      host: MATCH_NOCOOKIE.test(this.source) ? NOCOOKIE_HOST : undefined,\n      events: {\n        \"onReady\": this.onPlayerReady,\n        \"onStateChange\": this.onPlayerStateChange,\n      },\n    } as unknown as YT.PlayerOptions);\n  };\n\n  private onPlayerReady = (ytevent: YT.PlayerEvent): void => {\n    this.videoDuration = ytevent.target.getDuration();\n    this.fireEvent(\"ready\");\n  };\n\n  private onPlayerStateChange = (ytevent: YT.OnStateChangeEvent): void => {\n    const { data } = ytevent;\n    const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;\n\n    if (data === PLAYING && !this.checkInterval) {\n      this.checkInterval = window.setInterval(() => {\n        this.checkVideoProgress();\n      }, CHECK_INTERVAL_TIME);\n    } else if (data !== PLAYING && this.checkInterval) {\n      clearInterval(this.checkInterval);\n      this.checkInterval = undefined;\n    }\n\n    if (data === ENDED) {\n      this.fireEvent(\"ended\", ytevent);\n    }\n\n    if (data === PAUSED) {\n      this.fireEvent(\"pause\", ytevent);\n    }\n  };\n\n  private checkVideoProgress(): void {\n    const currentTime = this.youtubePlayer?.getCurrentTime() || 0;\n    const percentageWatched = (currentTime / this.videoDuration) * 100;\n    this.fireEvent(\"playing\", { percentPlayed: percentageWatched });\n  }\n\n  parseTimeParam(url: any, pattern: RegExp) {\n    if (url instanceof Array) {\n      return undefined;\n    }\n    const match = url.match(pattern);\n    if (match) {\n      const stamp: string = match[1];\n      if (stamp.match(MATCH_START_STAMP)) {\n        return this.parseTimeString(stamp);\n      }\n      if (MATCH_NUMERIC.test(stamp)) {\n        return parseInt(stamp);\n      }\n    }\n    return undefined;\n  }\n\n  parseTimeString(stamp: string) {\n    let seconds = 0;\n    let array = MATCH_START_STAMP.exec(stamp);\n    while (array !== null) {\n      const [, count, period] = array;\n      if (period === \"h\") { seconds += parseInt(count) * 60 * 60; }\n      if (period === \"m\") { seconds += parseInt(count) * 60; }\n      if (period === \"s\") { seconds += parseInt(count); }\n      array = MATCH_START_STAMP.exec(stamp);\n    }\n    return seconds;\n  }\n\n  parseStartTime(url: string) {\n    return this.parseTimeParam(url, MATCH_START_QUERY);\n  }\n\n  parseEndTime(url: string) {\n    return this.parseTimeParam(url, MATCH_END_QUERY);\n  }\n\n  onEnterDOM(): void {\n    this.setupYoutubeAPI();\n  }\n\n  onExitDOM() {\n    if (this.checkInterval) {\n      clearInterval(this.checkInterval);\n      this.checkInterval = undefined;\n    }\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): YT.Player | null {\n    return this.youtubePlayer || null;\n  }\n\n  get fluidModeClass() {\n    if (this.fluidMode) {\n      return \"udex-media-player__fluid\";\n    }\n    return \"\";\n  }\n}\n\nUDExMediaPlayerYoutube.define();\n\nexport default UDExMediaPlayerYoutube;\n"]}
+{"version":3,"file":"MediaPlayerYoutube.js","sourceRoot":"","sources":["../src/MediaPlayerYoutube.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport MediaPlayerYoutubeTemplate from \"./generated/templates/MediaPlayerYoutubeTemplate.lit.js\";\n\n// Styles\nimport MediaPlayerYoutubeCss from \"./generated/themes/MediaPlayerYoutube.css.js\";\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\nimport type { UDExAspectRatio } from \"./MediaPlayer.js\";\n\nconst MATCH_NOCOOKIE = /youtube-nocookie\\.com/;\nconst MATCH_URL_YOUTUBE = /(?:youtu\\.be\\/|youtube(?:-nocookie|education)?\\.com\\/(?:embed\\/|v\\/|watch\\/|watch\\?v=|watch\\?.+&v=|shorts\\/|live\\/))((\\w|-){11})|youtube\\.com\\/playlist\\?list=|youtube\\.com\\/user\\//;\nconst NOCOOKIE_HOST = \"https://www.youtube-nocookie.com\";\nconst SDK_URL = \"https://www.youtube.com/iframe_api\";\nconst SDK_GLOBAL_READY = \"onYouTubeIframeAPIReady\";\nconst CHECK_INTERVAL_TIME = 1000;\nconst MATCH_START_QUERY = /[?&#](?:start|t)=([0-9hms]+)/;\nconst MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;\nconst MATCH_START_STAMP = /(\\d+)(h|m|s)/g;\nconst MATCH_NUMERIC = /^\\d+$/;\n\ndeclare global {\n  interface Window {\n    onYouTubeIframeAPIReady: () => void;\n  }\n}\n\ntype UDExMediaPlayerYoutubePlayingEventDetail = {\n  percentPlayed: number,\n}\n\ntype UDExMediaPlayerYoutubeBaseEventDetails = {\n  ytevent: YT.OnStateChangeEvent,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-media-player-youtube</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MediaPlayerYoutube.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-media-player-youtube\",\n  renderer: litRender,\n  styles: [MediaPlayerCss, MediaPlayerYoutubeCss],\n  template: MediaPlayerYoutubeTemplate,\n})\n/**\n * Fires when video is ready\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ready\", { bubbles: true })\n/**\n * Fires when video play ended\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"ended\", { bubbles: true })\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"pause\", { bubbles: true })\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"playing\", { bubbles: true })\nclass UDExMediaPlayerYoutube extends UI5Element {\n  eventDetails!: {\n    \"ready\": void,\n    \"ended\": UDExMediaPlayerYoutubeBaseEventDetails,\n    \"pause\": UDExMediaPlayerYoutubeBaseEventDetails,\n    \"playing\": UDExMediaPlayerYoutubePlayingEventDetail,\n  };\n  /**\n * Defines the source of the video  or audio\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String })\n    source: string = \"\";\n  /**\n * Defines video width. Used for YouTube and Vimeo videos only.\n * Regular video and audio sizes are control by CSS variables.\n *\n * @default \"\"\n * @public\n */\n  @property({ type: String })\n    width: string = \"\";\n  /**\n   * Defines video height. Used for YouTube and Vimeo videos only.\n   * Regular video and audio sizes are control by CSS variables.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    height: string = \"\";\n  /**\n   * Defines aspect ratio of video. If set, video will be display in fluid mode.\n   * Possible values: \"16:9\" , \"9:16\", \"4:3\", \"1:1\", \"none\"\n  *\n  * @default \"16:9\"\n  * @public\n  */\n  @property()\n    aspectRatio: `${UDExAspectRatio}` = \"16:9\";\n  /**\n  * Defines if video should be displayed in fluid mode.\n  * In fluid mode, width and height will be ignored and size will be adjusted to the container.\n  *\n  * @default false\n  * @public\n  */\n  @property({ type: Boolean })\n    fluidMode!: boolean;\n\n  private youtubePlayer!: YT.Player;\n  private checkInterval?: number;\n  private videoDuration: number = 0;\n\n  get videoId(): string {\n    if (!this.source) {\n      return \"\";\n    }\n    const urlMatch = this.source.match(MATCH_URL_YOUTUBE);\n    return urlMatch ? urlMatch[1] : \"\";\n  }\n\n  get url(): URL {\n    return new URL(this.source);\n  }\n\n  get autoplay(): number | undefined {\n    const param = this.url.searchParams.get(\"autoplay\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  get muted(): number | undefined {\n    const param = this.url.searchParams.get(\"mute\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  get playsinline(): number | undefined {\n    const param = this.url.searchParams.get(\"playsinline\");\n    return param ? parseInt(param) : undefined;\n  }\n\n  setupYoutubeAPI = () => {\n    if (!window.YT) { // Only load script if YT is not already loaded\n      const tag = document.createElement(\"script\");\n      tag.src = SDK_URL;\n      const firstScriptTag = document.getElementsByTagName(\"script\")[0];\n      firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);\n    }\n\n    window[SDK_GLOBAL_READY] = () => this.onYouTubeIframeAPIReady();\n\n    // If YouTube IFrame API is already loaded, directly initialize the player\n    if (window.YT && window.YT.Player) {\n      this.onYouTubeIframeAPIReady();\n    }\n  };\n\n  onYouTubeIframeAPIReady = (): void => {\n    this.youtubePlayer = new YT.Player(this.shadowRoot?.querySelector(\"#player\") as HTMLElement, {\n      height: this.height,\n      width: this.width,\n      videoId: this.videoId,\n      playerVars: {\n        autoplay: this.autoplay ? 1 : 0,\n        mute: this.muted ? 1 : 0,\n        playsinline: this.playsinline ? 1 : 0,\n        origin: window.location.origin,\n        start: this.parseStartTime(this.source),\n        end: this.parseEndTime(this.source),\n      },\n      host: MATCH_NOCOOKIE.test(this.source) ? NOCOOKIE_HOST : undefined,\n      events: {\n        \"onReady\": this.onPlayerReady,\n        \"onStateChange\": this.onPlayerStateChange,\n      },\n    } as unknown as YT.PlayerOptions);\n  };\n\n  private onPlayerReady = (ytevent: YT.PlayerEvent): void => {\n    this.videoDuration = ytevent.target.getDuration();\n    this.fireDecoratorEvent(\"ready\");\n  };\n\n  private onPlayerStateChange = (ytevent: YT.OnStateChangeEvent): void => {\n    const { data } = ytevent;\n    const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;\n\n    if (data === PLAYING && !this.checkInterval) {\n      this.checkInterval = window.setInterval(() => {\n        this.checkVideoProgress();\n      }, CHECK_INTERVAL_TIME);\n    } else if (data !== PLAYING && this.checkInterval) {\n      clearInterval(this.checkInterval);\n      this.checkInterval = undefined;\n    }\n\n    if (data === ENDED) {\n      this.fireDecoratorEvent(\"ended\", { ytevent });\n    }\n\n    if (data === PAUSED) {\n      this.fireDecoratorEvent(\"pause\", { ytevent });\n    }\n  };\n\n  private checkVideoProgress(): void {\n    const currentTime = this.youtubePlayer?.getCurrentTime() || 0;\n    const percentageWatched = (currentTime / this.videoDuration) * 100;\n    this.fireDecoratorEvent(\"playing\", { percentPlayed: percentageWatched });\n  }\n\n  parseTimeParam(url: any, pattern: RegExp) {\n    if (url instanceof Array) {\n      return undefined;\n    }\n    const match = url.match(pattern);\n    if (match) {\n      const stamp: string = match[1];\n      if (stamp.match(MATCH_START_STAMP)) {\n        return this.parseTimeString(stamp);\n      }\n      if (MATCH_NUMERIC.test(stamp)) {\n        return parseInt(stamp);\n      }\n    }\n    return undefined;\n  }\n\n  parseTimeString(stamp: string) {\n    let seconds = 0;\n    let array = MATCH_START_STAMP.exec(stamp);\n    while (array !== null) {\n      const [, count, period] = array;\n      if (period === \"h\") { seconds += parseInt(count) * 60 * 60; }\n      if (period === \"m\") { seconds += parseInt(count) * 60; }\n      if (period === \"s\") { seconds += parseInt(count); }\n      array = MATCH_START_STAMP.exec(stamp);\n    }\n    return seconds;\n  }\n\n  parseStartTime(url: string) {\n    return this.parseTimeParam(url, MATCH_START_QUERY);\n  }\n\n  parseEndTime(url: string) {\n    return this.parseTimeParam(url, MATCH_END_QUERY);\n  }\n\n  onEnterDOM(): void {\n    this.setupYoutubeAPI();\n  }\n\n  onExitDOM() {\n    if (this.checkInterval) {\n      clearInterval(this.checkInterval);\n      this.checkInterval = undefined;\n    }\n  }\n\n  /**\n   * Returns video element\n   * @public\n   */\n  getPlayer(): YT.Player | null {\n    return this.youtubePlayer || null;\n  }\n\n  get fluidModeClass() {\n    if (this.fluidMode) {\n      return \"udex-media-player__fluid\";\n    }\n    return \"\";\n  }\n}\n\nUDExMediaPlayerYoutube.define();\n\nexport default UDExMediaPlayerYoutube;\n"]}

package/dist/MessageStrip.d.ts

@@ -1,7 +1,7 @@
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
-import { UdexMessageStripDesign, UdexMessageStripStatusType } from "./types/MessageStrip.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { UDExMessageStripDesign, UDExMessageStripStatusType } from "./types/MessageStrip.js";
 /**
  * @class
  *
@@ -17,25 +17,19 @@ declare class UDExMessageStrip extends MessageStrip {
      * @public
      */
     /** @ts-expect-error */
-    design: `${UdexMessageStripDesign}`;
+    design: `${UDExMessageStripDesign}`;
     /**
      * Defines the component Status Type.
      *
      * @public
      */
-    statusType: `${UdexMessageStripStatusType}`;
+    statusType: `${UDExMessageStripStatusType}`;
     /**
      * Defines whether the MessageStrip renders close button.
      *
      * @public
      */
     hideCloseButton: boolean;
-    /**
-     * Defines display the icon for the Message Strip.
-     *
-     * @private
-     */
-    hideIcon: boolean;
     /**
      * Defines the content of the component.
      *
@@ -44,11 +38,11 @@ declare class UDExMessageStrip extends MessageStrip {
      */
     default: Node;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     onBeforeRendering(): void;
     getTranslation(text: I18nText): string;
     textStatusTypeMapping(): Record<string, string>;
     isDesignAction(): boolean;
+    get isDesignWarning(): boolean;
     _closeClick(): void;
     get shouldHideIcon(): boolean;
     get hideTextStatus(): boolean;

package/dist/MessageStrip.js

@@ -6,18 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var UDExMessageStrip_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import { getI18nBundle, } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
-import messageStripCss from "@ui5/webcomponents/dist/generated/themes/MessageStrip.css.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
-import UDExButton from "./Button.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON, MESSAGE_STRIP_ERROR, MESSAGE_STRIP_INFORMATION, MESSAGE_STRIP_SUCCESS, MESSAGE_STRIP_WARNING, MESSAGE_STRIP_ACTION, } from "./generated/i18n/i18n-defaults.js";
-import { UdexMessageStripDesign, UdexMessageStripStatusType } from "./types/MessageStrip.js";
-import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { MESSAGE_STRIP_ERROR, MESSAGE_STRIP_INFORMATION, MESSAGE_STRIP_SUCCESS, MESSAGE_STRIP_WARNING, MESSAGE_STRIP_ACTION, MESSAGE_STRIP_CLOSE_BUTTON, } from "./generated/i18n/i18n-defaults.js";
+import { UDExMessageStripDesign, UDExMessageStripStatusType } from "./types/MessageStrip.js";
+// Template
+import MessageStripTemplate from "./MessageStripTemplate.js";
 // Styles
 import MessageStripCss from "./generated/themes/MessageStrip.css.js";
 /**
@@ -29,8 +26,20 @@ import MessageStripCss from "./generated/themes/MessageStrip.css.js";
  * @public
  */
 let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends MessageStrip {
-    static async onDefine() {
-        UDExMessageStrip_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the component type.
+         *
+         * @public
+         */
+        this.design = UDExMessageStripDesign.Action;
+        /**
+         * Defines the component Status Type.
+         *
+         * @public
+         */
+        this.statusType = UDExMessageStripStatusType.Icon;
     }
     onBeforeRendering() {
         if (this.isDesignActionOrIsNotIconType) {
@@ -42,18 +51,21 @@ let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends Messa
     }
     textStatusTypeMapping() {
         return {
-            [UdexMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),
-            [UdexMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),
-            [UdexMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),
-            [UdexMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),
-            [UdexMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
+            [UDExMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),
+            [UDExMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),
+            [UDExMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),
+            [UDExMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),
+            [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
         };
     }
     isDesignAction() {
-        return this.design === UdexMessageStripDesign.Action;
+        return this.design === UDExMessageStripDesign.Action;
+    }
+    get isDesignWarning() {
+        return this.design === UDExMessageStripDesign.Warning;
     }
     _closeClick() {
-        this.fireEvent("close");
+        this.fireDecoratorEvent("close");
     }
     get shouldHideIcon() {
         if (this.isDesignActionOrIsNotIconType) {
@@ -62,10 +74,10 @@ let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends Messa
         return this.hideIcon;
     }
     get hideTextStatus() {
-        return this.statusType !== UdexMessageStripStatusType.Text || this.isDesignAction();
+        return this.statusType !== UDExMessageStripStatusType.Text || this.isDesignAction();
     }
     get textStatus() {
-        if (this.design !== UdexMessageStripDesign.Action) {
+        if (this.design !== UDExMessageStripDesign.Action) {
             return this.textStatusTypeMapping()[this.design];
         }
     }
@@ -73,7 +85,7 @@ let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends Messa
         return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
     }
     get isNotIconStatusType() {
-        return this.statusType !== UdexMessageStripStatusType.Icon;
+        return this.statusType !== UDExMessageStripStatusType.Icon;
     }
     get hasIcon() {
         return this.icon.length > 0;
@@ -86,43 +98,28 @@ let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends Messa
     }
 };
 __decorate([
-    property({
-        type: UdexMessageStripDesign,
-        defaultValue: UdexMessageStripDesign.Action,
-    })
+    property()
     /** @ts-expect-error */
 ], UDExMessageStrip.prototype, "design", void 0);
 __decorate([
-    property({
-        type: UdexMessageStripStatusType,
-        defaultValue: UdexMessageStripStatusType.Icon,
-    })
+    property()
 ], UDExMessageStrip.prototype, "statusType", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExMessageStrip.prototype, "hideCloseButton", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExMessageStrip.prototype, "hideIcon", void 0);
 __decorate([
     slot({ type: Node })
 ], UDExMessageStrip.prototype, "default", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExMessageStrip, "i18nBundle", void 0);
 UDExMessageStrip = UDExMessageStrip_1 = __decorate([
     customElement({
         tag: "udex-message-strip",
-        renderer: litRender,
-        styles: [messageStripCss, MessageStripCss],
+        renderer: jsxRenderer,
+        styles: [MessageStrip.styles, MessageStripCss],
         template: MessageStripTemplate,
-        dependencies: [UDExButton, UI5Icon],
     })
-    /**
-     * Fired when the close button is pressed either with a
-     * click/tap or by using the Enter or Space key.
-     *
-     * @public
-     */
-    ,
-    event("close")
 ], UDExMessageStrip);
 UDExMessageStrip.define();
 export default UDExMessageStrip;

package/dist/MessageStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStrip.js","sourceRoot":"","sources":["../src/MessageStrip.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  getI18nBundle,\n  I18nText,\n} from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport MessageStrip from \"@ui5/webcomponents/dist/MessageStrip.js\";\nimport messageStripCss from \"@ui5/webcomponents/dist/generated/themes/MessageStrip.css.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExButton from \"./Button.js\";\nimport {\n  MESSAGE_STRIP_CLOSE_BUTTON,\n  MESSAGE_STRIP_ERROR,\n  MESSAGE_STRIP_INFORMATION,\n  MESSAGE_STRIP_SUCCESS,\n  MESSAGE_STRIP_WARNING,\n  MESSAGE_STRIP_ACTION,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport { UdexMessageStripDesign, UdexMessageStripStatusType } from \"./types/MessageStrip.js\";\n\nimport MessageStripTemplate from \"./generated/templates/MessageStripTemplate.lit.js\";\n\n// Styles\nimport MessageStripCss from \"./generated/themes/MessageStrip.css.js\";\n\n/**\n * @class\n *\n * @constructor\n * @extends MessageStrip\n * @tagname udex-message-strip\n * @public\n */\n@customElement({\n  tag: \"udex-message-strip\",\n  renderer: litRender,\n  styles: [messageStripCss, MessageStripCss],\n  template: MessageStripTemplate,\n  dependencies: [UDExButton, UI5Icon],\n})\n/**\n * Fired when the close button is pressed either with a\n * click/tap or by using the Enter or Space key.\n *\n * @public\n */\n@event(\"close\")\nclass UDExMessageStrip extends MessageStrip {\n  /**\n   * Defines the component type.\n   *\n   * @public\n   */\n  @property({\n    type: UdexMessageStripDesign,\n    defaultValue: UdexMessageStripDesign.Action,\n  })\n  /** @ts-expect-error */\n    design!: `${UdexMessageStripDesign}`;\n\n  /**\n   * Defines the component Status Type.\n   *\n   * @public\n   */\n  @property({\n    type: UdexMessageStripStatusType,\n    defaultValue: UdexMessageStripStatusType.Icon,\n  })\n    statusType!: `${UdexMessageStripStatusType}`;\n\n  /**\n   * Defines whether the MessageStrip renders close button.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideCloseButton!: boolean;\n\n  /**\n   * Defines display the icon for the Message Strip.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    hideIcon!: boolean;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExMessageStrip.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  onBeforeRendering() {\n    if (this.isDesignActionOrIsNotIconType) {\n      this.hideIcon = true;\n    }\n  }\n\n  getTranslation(text: I18nText): string {\n    return UDExMessageStrip.i18nBundle.getText(text);\n  }\n\n  textStatusTypeMapping(): Record<string, string> {\n    return {\n      [UdexMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),\n      [UdexMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),\n      [UdexMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),\n      [UdexMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),\n      [UdexMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),\n    };\n  }\n\n  isDesignAction(): boolean {\n    return this.design === UdexMessageStripDesign.Action;\n  }\n\n  _closeClick(): void {\n    this.fireEvent(\"close\");\n  }\n\n  get shouldHideIcon(): boolean {\n    if (this.isDesignActionOrIsNotIconType) {\n      return this.hideIcon || this.icon.length === 0;\n    }\n\n    return this.hideIcon;\n  }\n\n  get hideTextStatus(): boolean {\n    return this.statusType !== UdexMessageStripStatusType.Text || this.isDesignAction();\n  }\n\n  get textStatus(): string | undefined {\n    if (this.design !== UdexMessageStripDesign.Action) {\n      return this.textStatusTypeMapping()[this.design];\n    }\n  }\n\n  get _closeButtonText(): string {\n    return `${this.textStatus ?? \"\"} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;\n  }\n\n  get isNotIconStatusType(): boolean {\n    return this.statusType !== UdexMessageStripStatusType.Icon;\n  }\n\n  get hasIcon(): boolean {\n    return this.icon.length > 0;\n  }\n\n  get isDesignActionOrIsNotIconType(): boolean {\n    return this.isDesignAction() || this.isNotIconStatusType;\n  }\n\n  get hiddenText(): string {\n    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? \"\" : this._closableText}`;\n  }\n}\n\nUDExMessageStrip.define();\n\nexport default UDExMessageStrip;\n"]}
+{"version":3,"file":"MessageStrip.js","sourceRoot":"","sources":["../src/MessageStrip.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport MessageStrip from \"@ui5/webcomponents/dist/MessageStrip.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  MESSAGE_STRIP_ERROR,\n  MESSAGE_STRIP_INFORMATION,\n  MESSAGE_STRIP_SUCCESS,\n  MESSAGE_STRIP_WARNING,\n  MESSAGE_STRIP_ACTION,\n  MESSAGE_STRIP_CLOSE_BUTTON,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport { UDExMessageStripDesign, UDExMessageStripStatusType } from \"./types/MessageStrip.js\";\n\n// Template\nimport MessageStripTemplate from \"./MessageStripTemplate.js\";\n\n// Styles\nimport MessageStripCss from \"./generated/themes/MessageStrip.css.js\";\n\n/**\n * @class\n *\n * @constructor\n * @extends MessageStrip\n * @tagname udex-message-strip\n * @public\n */\n@customElement({\n  tag: \"udex-message-strip\",\n  renderer: jsxRenderer,\n  styles: [MessageStrip.styles, MessageStripCss],\n  template: MessageStripTemplate,\n})\n\nclass UDExMessageStrip extends MessageStrip {\n  /**\n   * Defines the component type.\n   *\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    design!: `${UDExMessageStripDesign}` = UDExMessageStripDesign.Action;\n\n  /**\n   * Defines the component Status Type.\n   *\n   * @public\n   */\n  @property()\n    statusType: `${UDExMessageStripStatusType}` = UDExMessageStripStatusType.Icon;\n\n  /**\n   * Defines whether the MessageStrip renders close button.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    hideCloseButton!: boolean;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Node;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onBeforeRendering() {\n    if (this.isDesignActionOrIsNotIconType) {\n      this.hideIcon = true;\n    }\n  }\n\n  getTranslation(text: I18nText): string {\n    return UDExMessageStrip.i18nBundle.getText(text);\n  }\n\n  textStatusTypeMapping(): Record<string, string> {\n    return {\n      [UDExMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),\n      [UDExMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),\n      [UDExMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),\n      [UDExMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),\n      [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),\n    };\n  }\n\n  isDesignAction(): boolean {\n    return this.design === UDExMessageStripDesign.Action;\n  }\n\n  get isDesignWarning(): boolean {\n    return this.design === UDExMessageStripDesign.Warning;\n  }\n\n  _closeClick(): void {\n    this.fireDecoratorEvent(\"close\");\n  }\n\n  get shouldHideIcon(): boolean {\n    if (this.isDesignActionOrIsNotIconType) {\n      return this.hideIcon || this.icon.length === 0;\n    }\n\n    return this.hideIcon;\n  }\n\n  get hideTextStatus(): boolean {\n    return this.statusType !== UDExMessageStripStatusType.Text || this.isDesignAction();\n  }\n\n  get textStatus(): string | undefined {\n    if (this.design !== UDExMessageStripDesign.Action) {\n      return this.textStatusTypeMapping()[this.design];\n    }\n  }\n\n  get _closeButtonText(): string {\n    return `${this.textStatus ?? \"\"} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;\n  }\n\n  get isNotIconStatusType(): boolean {\n    return this.statusType !== UDExMessageStripStatusType.Icon;\n  }\n\n  get hasIcon(): boolean {\n    return this.icon.length > 0;\n  }\n\n  get isDesignActionOrIsNotIconType(): boolean {\n    return this.isDesignAction() || this.isNotIconStatusType;\n  }\n\n  get hiddenText(): string {\n    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? \"\" : this._closableText}`;\n  }\n}\n\nUDExMessageStrip.define();\n\nexport default UDExMessageStrip;\n"]}

package/dist/MessageStripTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExMessageStrip from "./MessageStrip.js";
+export default function MessageStripTemplate(this: UDExMessageStrip): import("@ui5/webcomponents-base").JSX.Element;

package/dist/MessageStripTemplate.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExButton from "./Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import { UDExMessageStripDesign } from "./types/MessageStrip.js";
+export default function MessageStripTemplate() {
+    return (_jsxs("div", { class: {
+            "udex-message-strip": true,
+            "ui5-message-strip-root": true,
+            "ui5-message-strip-root-hide-icon": this.shouldHideIcon,
+            "ui5-message-strip-root-hide-close-button": this.hideCloseButton,
+            "ui5-message-strip-root--critical": this.isDesignWarning,
+            [this.designClasses]: true,
+        }, id: this._id, role: "note", "aria-labelledby": this._id, children: [!this.shouldHideIcon && (_jsx("div", { class: "ui5-message-strip-icon-wrapper udex-message-strip", "aria-hidden": "true", children: this.hasIcon ? (_jsx("slot", { name: "icon" })) : (_jsx(Icon, { name: standardIconName.call(this), class: "ui5-message-strip-icon" })) })), _jsx("span", { class: "ui5-hidden-text", children: this.hiddenText }), _jsxs("span", { class: "ui5-message-strip-text message-strip__text", children: [!this.hideTextStatus && (_jsxs("strong", { class: "message-strip__text-status", children: [this.textStatus, ":"] })), _jsx("slot", {})] }), !this.hideCloseButton && (_jsx(UDExButton, { size: "Small", icon: decline, design: "Tertiary", onClick: this._closeClick, tooltip: this._closeButtonText }))] }));
+}
+function standardIconName() {
+    switch (this.design) {
+        case UDExMessageStripDesign.Warning:
+            return alert;
+        case UDExMessageStripDesign.Positive:
+            return sysEnter2;
+        case UDExMessageStripDesign.Negative:
+            return error;
+        case UDExMessageStripDesign.Information:
+            return information;
+        default:
+            return undefined;
+    }
+}
+//# sourceMappingURL=MessageStripTemplate.js.map

package/dist/MessageStripTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStripTemplate.js","sourceRoot":"","sources":["../src/MessageStripTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,SAAS,MAAM,8CAA8C,CAAC;AACrE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,OAAO,CACL,eACE,KAAK,EAAE;YACL,oBAAoB,EAAE,IAAI;YAC1B,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,cAAc;YACvD,0CAA0C,EAAE,IAAI,CAAC,eAAe;YAChE,kCAAkC,EAAE,IAAI,CAAC,eAAe;YACxD,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;SAC3B,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,MAAM,qBACM,IAAI,CAAC,GAAG,aAExB,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,cACE,KAAK,EAAC,mDAAmD,iBAC7C,MAAM,YAEjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,KAAK,EAAC,wBAAwB,GAC9B,CACH,GACG,CACP,EACD,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,UAAU,GAAQ,EACtD,gBAAM,KAAK,EAAC,4CAA4C,aACrD,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,kBAAQ,KAAK,EAAC,4BAA4B,aAAE,IAAI,CAAC,UAAU,SAAW,CACvE,EACD,gBAAa,IACR,EACN,CAAC,IAAI,CAAC,eAAe,IAAI,CACxB,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,UAAU,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAC9B,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,KAAK,sBAAsB,CAAC,OAAO;YACjC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,SAAS,CAAC;QACnB,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,WAAW;YACrC,OAAO,WAAW,CAAC;QACrB;YACE,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC","sourcesContent":["import type UDExMessageStrip from \"./MessageStrip.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport information from \"@ui5/webcomponents-icons/dist/information.js\";\nimport sysEnter2 from \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport error from \"@ui5/webcomponents-icons/dist/error.js\";\nimport alert from \"@ui5/webcomponents-icons/dist/alert.js\";\nimport { UDExMessageStripDesign } from \"./types/MessageStrip.js\";\n\nexport default function MessageStripTemplate(this: UDExMessageStrip) {\n  return (\n    <div\n      class={{\n        \"udex-message-strip\": true,\n        \"ui5-message-strip-root\": true,\n        \"ui5-message-strip-root-hide-icon\": this.shouldHideIcon,\n        \"ui5-message-strip-root-hide-close-button\": this.hideCloseButton,\n        \"ui5-message-strip-root--critical\": this.isDesignWarning,\n        [this.designClasses]: true,\n      }}\n      id={this._id}\n      role=\"note\"\n      aria-labelledby={this._id}\n    >\n      {!this.shouldHideIcon && (\n        <div\n          class=\"ui5-message-strip-icon-wrapper udex-message-strip\"\n          aria-hidden=\"true\"\n        >\n          {this.hasIcon ? (\n            <slot name=\"icon\"></slot>\n          ) : (\n            <Icon\n              name={standardIconName.call(this)}\n              class=\"ui5-message-strip-icon\"\n            />\n          )}\n        </div>\n      )}\n      <span class=\"ui5-hidden-text\">{this.hiddenText}</span>\n      <span class=\"ui5-message-strip-text message-strip__text\">\n        {!this.hideTextStatus && (\n          <strong class=\"message-strip__text-status\">{this.textStatus}:</strong>\n        )}\n        <slot></slot>\n      </span>\n      {!this.hideCloseButton && (\n        <UDExButton\n          size=\"Small\"\n          icon={decline}\n          design=\"Tertiary\"\n          onClick={this._closeClick}\n          tooltip={this._closeButtonText}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction standardIconName(this: UDExMessageStrip) {\n  switch (this.design) {\n  case UDExMessageStripDesign.Warning:\n    return alert;\n  case UDExMessageStripDesign.Positive:\n    return sysEnter2;\n  case UDExMessageStripDesign.Negative:\n    return error;\n  case UDExMessageStripDesign.Information:\n    return information;\n  default:\n    return undefined;\n  }\n}\n"]}

package/dist/Modal.d.ts

@@ -1,5 +1,5 @@
 import Dialog from "@ui5/webcomponents/dist/Dialog.js";
-export declare enum ModalType {
+export declare enum UDExModalType {
     default = "default",
     basic = "basic"
 }
@@ -24,6 +24,6 @@ declare class UDExModal extends Dialog {
     * @public
     * @default "default"
     */
-    type: `${ModalType}`;
+    type: `${UDExModalType}`;
 }
 export default UDExModal;