@sapudex/web-components 2.53.0 → 2.55.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-strict.js\";\nimport Player from \"@vimeo/player\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport MediaPlayerVimeoTemplate from \"./MediaPlayerVimeoTemplate.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\n\nexport type VimeoPlayer = Player;\n\ntype UDExMediaPlayerVimeoPlayingEventDetail = {\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: jsxRenderer,\n  styles: [MediaPlayerCss],\n  template: MediaPlayerVimeoTemplate,\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 * @param {number} percentPlayed Percentage of video played (0-100)\n */\n@event(\"playing\", { bubbles: true })\nclass UDExMediaPlayerVimeo extends UI5Element {\n  eventDetails!: {\n    \"ready\": void,\n    \"ended\": void,\n    \"pause\": void,\n    \"playing\": UDExMediaPlayerVimeoPlayingEventDetail,\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;\nexport type { UDExMediaPlayerVimeoPlayingEventDetail };\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 Player from \"@vimeo/player\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport MediaPlayerVimeoTemplate from \"./MediaPlayerVimeoTemplate.js\";\n\n// Styles\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.js\";\n\nexport type VimeoPlayer = Player;\n\ntype UDExMediaPlayerVimeoPlayingEventDetail = {\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: jsxRenderer,\n  styles: [MediaPlayerCss],\n  template: MediaPlayerVimeoTemplate,\n})\n/**\n * Fires when video starts playing for the first time or is replayed after ending\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoStart\", { bubbles: true })\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 * @param {number} percentPlayed Percentage of video played (0-100)\n */\n@event(\"playing\", { bubbles: true })\nclass UDExMediaPlayerVimeo extends UI5Element {\n  eventDetails!: {\n    \"videoStart\": void,\n    \"ready\": void,\n    \"ended\": void,\n    \"pause\": void,\n    \"playing\": UDExMediaPlayerVimeoPlayingEventDetail,\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  private _hasStarted = false;\n  private _replayPending = false;\n\n  _onVimeoPlay = () => {\n    if (!this._hasStarted || this._replayPending) {\n      this.fireDecoratorEvent(\"videoStart\");\n      this._hasStarted = true;\n      this._replayPending = false;\n    }\n  };\n\n  _onVimeoPause = () => {\n    this.fireDecoratorEvent(\"pause\");\n  };\n\n  _onVimeoEnded = () => {\n    this._replayPending = true;\n    this.fireDecoratorEvent(\"ended\");\n  };\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(\"play\", this._onVimeoPlay);\n\n    this.player.on(\"timeupdate\", e => {\n      this.fireDecoratorEvent(\"playing\", { percentPlayed: e.percent * 100 });\n    });\n\n    this.player.on(\"pause\", this._onVimeoPause);\n\n    this.player.on(\"ended\", this._onVimeoEnded);\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;\nexport type { UDExMediaPlayerVimeoPlayingEventDetail };\n"]}

package/dist/MediaPlayerYoutube.d.ts

@@ -31,6 +31,7 @@ type UDExMediaPlayerYoutubeBaseEventDetails = {
  */
 declare class UDExMediaPlayerYoutube extends UI5Element {
     eventDetails: {
+        "videoStart": void;
         "ready": void;
         "ended": UDExMediaPlayerYoutubeBaseEventDetails;
         "pause": UDExMediaPlayerYoutubeBaseEventDetails;
@@ -78,6 +79,8 @@ declare class UDExMediaPlayerYoutube extends UI5Element {
     private youtubePlayer;
     private checkInterval?;
     private videoDuration;
+    private _hasStarted;
+    private _replayPending;
     get videoId(): string;
     get url(): URL;
     get autoplay(): number | undefined;

package/dist/MediaPlayerYoutube.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/// <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";
@@ -75,6 +76,8 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
         */
         this.aspectRatio = "16:9";
         this.videoDuration = 0;
+        this._hasStarted = false;
+        this._replayPending = false;
         this.setupYoutubeAPI = () => {
             if (!window.YT) { // Only load script if YT is not already loaded
                 const tag = document.createElement("script");
@@ -115,16 +118,24 @@ let UDExMediaPlayerYoutube = class UDExMediaPlayerYoutube extends UI5Element {
         this.onPlayerStateChange = (ytevent) => {
             const { data } = ytevent;
             const { PLAYING, PAUSED, ENDED } = window.YT.PlayerState;
-            if (data === PLAYING && !this.checkInterval) {
-                this.checkInterval = window.setInterval(() => {
-                    this.checkVideoProgress();
-                }, CHECK_INTERVAL_TIME);
+            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 (data !== PLAYING && this.checkInterval) {
+            else if (this.checkInterval) {
                 clearInterval(this.checkInterval);
                 this.checkInterval = undefined;
             }
             if (data === ENDED) {
+                this._replayPending = true;
                 this.fireDecoratorEvent("ended", { ytevent });
             }
             if (data === PAUSED) {
@@ -244,6 +255,14 @@ UDExMediaPlayerYoutube = __decorate([
         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
      *

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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { UDExAspectRatio } from \"./MediaPlayer.js\";\n\nimport MediaPlayerYoutubeTemplate from \"./MediaPlayerYoutubeTemplate.js\";\n\n// Styles\nimport MediaPlayerYoutubeCss from \"./generated/themes/MediaPlayerYoutube.css.js\";\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.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\nexport type YoutubePlayer = YT.Player;\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: jsxRenderer,\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 * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event\n */\n@event(\"ended\", { bubbles: true })\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event\n */\n@event(\"pause\", { bubbles: true })\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n * @param {number} percentPlayed Percentage of video played (0-100)\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(): YoutubePlayer | 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;\nexport type { UDExMediaPlayerYoutubeBaseEventDetails, UDExMediaPlayerYoutubePlayingEventDetail };\n"]}
+{"version":3,"file":"MediaPlayerYoutube.js","sourceRoot":"","sources":["../src/MediaPlayerYoutube.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference types=\"youtube\" />\nimport 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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { UDExAspectRatio } from \"./MediaPlayer.js\";\n\nimport MediaPlayerYoutubeTemplate from \"./MediaPlayerYoutubeTemplate.js\";\n\n// Styles\nimport MediaPlayerYoutubeCss from \"./generated/themes/MediaPlayerYoutube.css.js\";\nimport MediaPlayerCss from \"./generated/themes/MediaPlayer.css.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\nexport type YoutubePlayer = YT.Player;\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: jsxRenderer,\n  styles: [MediaPlayerCss, MediaPlayerYoutubeCss],\n  template: MediaPlayerYoutubeTemplate,\n})\n/**\n * Fires when video starts playing for the first time or is replayed after ending\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"videoStart\", { bubbles: true })\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 * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event\n */\n@event(\"ended\", { bubbles: true })\n/**\n * Fires when video is paused\n *\n * @allowPreventDefault\n * @public\n * @param {YT.OnStateChangeEvent} ytevent The YouTube state change event\n */\n@event(\"pause\", { bubbles: true })\n/**\n * Fires when video watching progress changed\n *\n * @allowPreventDefault\n * @public\n * @param {number} percentPlayed Percentage of video played (0-100)\n */\n@event(\"playing\", { bubbles: true })\nclass UDExMediaPlayerYoutube extends UI5Element {\n  eventDetails!: {\n    \"videoStart\": void,\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  private _hasStarted = false;\n  private _replayPending = false;\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) {\n      if (!this._hasStarted || this._replayPending) {\n        this.fireDecoratorEvent(\"videoStart\");\n        this._hasStarted = true;\n        this._replayPending = false;\n      }\n      if (!this.checkInterval) {\n        this.checkInterval = window.setInterval(() => {\n          this.checkVideoProgress();\n        }, CHECK_INTERVAL_TIME);\n      }\n    } else if (this.checkInterval) {\n      clearInterval(this.checkInterval);\n      this.checkInterval = undefined;\n    }\n\n    if (data === ENDED) {\n      this._replayPending = true;\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(): YoutubePlayer | 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;\nexport type { UDExMediaPlayerYoutubeBaseEventDetails, UDExMediaPlayerYoutubePlayingEventDetail };\n"]}

package/dist/MessageStrip.d.ts

@@ -1,3 +1,4 @@
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -77,7 +78,7 @@ declare class UDExMessageStrip extends MessageStrip {
      * @slot
      * @public
      */
-    default: Node;
+    default: Slot<Node>;
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
     getTranslation(text: I18nText): string;

package/dist/MessageStrip.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var UDExMessageStrip_1;
 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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";

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 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\";\nimport translate from \"./utils/translate.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.Neutral;\n\n  /**\n   * Defines the component Status Type.\n   *\n   * `Text` value is DEPRECATED! Use `Icon` instead.\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 custom status text for information type\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusInformationText!: string;\n\n  /**\n   * Defines custom status text for success type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusSuccessText!: string;\n\n  /**\n   * Defines custom status text for error type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusErrorText!: string;\n\n  /**\n   * Defines custom status text for warning type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusWarningText!: string;\n\n  /**\n   * Defines accessible name for close icon\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    closeIconAccessibleName!: string;\n\n  /**\n   * Defines tooltip for close icon\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    closeIconTooltip!: string;\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.isNotIconStatusType || (this.isDecorativeDesign && this.icon.length === 0)) {\n      this.hideIcon = true;\n    }\n  }\n\n  getTranslation(text: I18nText): string {\n    return translate(UDExMessageStrip, text);\n  }\n\n  textStatusTypeMapping(): Record<string, string> {\n    return {\n      [UDExMessageStripDesign.Information]: this.statusInformationText || this.getTranslation(MESSAGE_STRIP_INFORMATION),\n      [UDExMessageStripDesign.Positive]: this.statusSuccessText || this.getTranslation(MESSAGE_STRIP_SUCCESS),\n      [UDExMessageStripDesign.Negative]: this.statusErrorText || this.getTranslation(MESSAGE_STRIP_ERROR),\n      [UDExMessageStripDesign.Warning]: this.statusWarningText || this.getTranslation(MESSAGE_STRIP_WARNING),\n      [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),\n      [UDExMessageStripDesign.Neutral]: this.getTranslation(MESSAGE_STRIP_ACTION),\n    };\n  }\n\n  isDesignAction(): boolean {\n    return this.design === UDExMessageStripDesign.Action || this.design === UDExMessageStripDesign.Neutral;\n  }\n\n  get isDecorativeDesign(): boolean {\n    const decorativeDesigns: string[] = [\n      UDExMessageStripDesign.Action,\n      UDExMessageStripDesign.Neutral,\n      UDExMessageStripDesign.GreyLight,\n      UDExMessageStripDesign.GreyDark,\n      UDExMessageStripDesign.RedLight,\n      UDExMessageStripDesign.RedDark,\n      UDExMessageStripDesign.MangoLight,\n      UDExMessageStripDesign.MangoDark,\n      UDExMessageStripDesign.GreenLight,\n      UDExMessageStripDesign.GreenDark,\n      UDExMessageStripDesign.TealLight,\n      UDExMessageStripDesign.TealDark,\n      UDExMessageStripDesign.BlueLight,\n      UDExMessageStripDesign.BlueDark,\n      UDExMessageStripDesign.IndigoLight,\n      UDExMessageStripDesign.IndigoDark,\n      UDExMessageStripDesign.PinkLight,\n      UDExMessageStripDesign.PinkDark,\n      UDExMessageStripDesign.RaspberryLight,\n      UDExMessageStripDesign.RaspberryDark,\n    ];\n    return decorativeDesigns.includes(this.design);\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.isDecorativeDesign) {\n      return this.icon.length === 0;\n    }\n    if (this.isNotIconStatusType) {\n      return this.hideIcon || this.icon.length === 0;\n    }\n    return this.hideIcon;\n  }\n\n  get hideTextStatus(): boolean {\n    return this.statusType !== UDExMessageStripStatusType.Text || this.isDecorativeDesign;\n  }\n\n  get textStatus(): string | undefined {\n    if (!this.isDecorativeDesign) {\n      return this.textStatusTypeMapping()[this.design];\n    }\n  }\n\n  get _closeButtonText(): string {\n    return this.closeIconTooltip || `${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.isDecorativeDesign || this.isNotIconStatusType;\n  }\n\n  get hiddenText(): string {\n    const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? \"\") : this.textStatusTypeMapping()[this.design];\n    return `${statusText} ${this.hideCloseButton ? \"\" : this._closableText}`.trim();\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-strict.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.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\";\nimport translate from \"./utils/translate.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.Neutral;\n\n  /**\n   * Defines the component Status Type.\n   *\n   * `Text` value is DEPRECATED! Use `Icon` instead.\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 custom status text for information type\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusInformationText!: string;\n\n  /**\n   * Defines custom status text for success type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusSuccessText!: string;\n\n  /**\n   * Defines custom status text for error type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusErrorText!: string;\n\n  /**\n   * Defines custom status text for warning type\n   * @default \"\"\n   * @public\n   */\n  @property()\n    statusWarningText!: string;\n\n  /**\n   * Defines accessible name for close icon\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    closeIconAccessibleName!: string;\n\n  /**\n   * Defines tooltip for close icon\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    closeIconTooltip!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node }) default!: Slot<Node>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onBeforeRendering() {\n    if (this.isNotIconStatusType || (this.isDecorativeDesign && this.icon.length === 0)) {\n      this.hideIcon = true;\n    }\n  }\n\n  getTranslation(text: I18nText): string {\n    return translate(UDExMessageStrip, text);\n  }\n\n  textStatusTypeMapping(): Record<string, string> {\n    return {\n      [UDExMessageStripDesign.Information]: this.statusInformationText || this.getTranslation(MESSAGE_STRIP_INFORMATION),\n      [UDExMessageStripDesign.Positive]: this.statusSuccessText || this.getTranslation(MESSAGE_STRIP_SUCCESS),\n      [UDExMessageStripDesign.Negative]: this.statusErrorText || this.getTranslation(MESSAGE_STRIP_ERROR),\n      [UDExMessageStripDesign.Warning]: this.statusWarningText || this.getTranslation(MESSAGE_STRIP_WARNING),\n      [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),\n      [UDExMessageStripDesign.Neutral]: this.getTranslation(MESSAGE_STRIP_ACTION),\n    };\n  }\n\n  isDesignAction(): boolean {\n    return this.design === UDExMessageStripDesign.Action || this.design === UDExMessageStripDesign.Neutral;\n  }\n\n  get isDecorativeDesign(): boolean {\n    const decorativeDesigns: string[] = [\n      UDExMessageStripDesign.Action,\n      UDExMessageStripDesign.Neutral,\n      UDExMessageStripDesign.GreyLight,\n      UDExMessageStripDesign.GreyDark,\n      UDExMessageStripDesign.RedLight,\n      UDExMessageStripDesign.RedDark,\n      UDExMessageStripDesign.MangoLight,\n      UDExMessageStripDesign.MangoDark,\n      UDExMessageStripDesign.GreenLight,\n      UDExMessageStripDesign.GreenDark,\n      UDExMessageStripDesign.TealLight,\n      UDExMessageStripDesign.TealDark,\n      UDExMessageStripDesign.BlueLight,\n      UDExMessageStripDesign.BlueDark,\n      UDExMessageStripDesign.IndigoLight,\n      UDExMessageStripDesign.IndigoDark,\n      UDExMessageStripDesign.PinkLight,\n      UDExMessageStripDesign.PinkDark,\n      UDExMessageStripDesign.RaspberryLight,\n      UDExMessageStripDesign.RaspberryDark,\n    ];\n    return decorativeDesigns.includes(this.design);\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.isDecorativeDesign) {\n      return this.icon.length === 0;\n    }\n    if (this.isNotIconStatusType) {\n      return this.hideIcon || this.icon.length === 0;\n    }\n    return this.hideIcon;\n  }\n\n  get hideTextStatus(): boolean {\n    return this.statusType !== UDExMessageStripStatusType.Text || this.isDecorativeDesign;\n  }\n\n  get textStatus(): string | undefined {\n    if (!this.isDecorativeDesign) {\n      return this.textStatusTypeMapping()[this.design];\n    }\n  }\n\n  get _closeButtonText(): string {\n    return this.closeIconTooltip || `${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.isDecorativeDesign || this.isNotIconStatusType;\n  }\n\n  get hiddenText(): string {\n    const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? \"\") : this.textStatusTypeMapping()[this.design];\n    return `${statusText} ${this.hideCloseButton ? \"\" : this._closableText}`.trim();\n  }\n}\n\nUDExMessageStrip.define();\n\nexport default UDExMessageStrip;\n"]}

package/dist/Modal.d.ts

@@ -26,5 +26,7 @@ declare class UDExModal extends Dialog {
     */
     type: `${UDExModalType}`;
     onAfterRendering(): void;
+    _setScrollbarWidth(content: HTMLElement): void;
+    _getPopupContent(): HTMLElement | null;
 }
 export default UDExModal;

package/dist/Modal.js

@@ -45,12 +45,19 @@ let UDExModal = class UDExModal extends Dialog {
         this.type = UDExModalType.default;
     }
     onAfterRendering() {
-        const content = this.shadowRoot?.querySelector(".ui5-popup-content");
+        super.onAfterRendering();
+        const content = this._getPopupContent();
         if (content) {
-            const gutterWidth = content.offsetWidth - content.clientWidth;
-            this.style.setProperty("--udex-modal-scrollbar-width", `${gutterWidth}px`);
+            this._setScrollbarWidth(content);
         }
     }
+    _setScrollbarWidth(content) {
+        const scrollbarWidth = content.offsetWidth - content.clientWidth;
+        this.style.setProperty("--udex-modal-scrollbar-width", `${scrollbarWidth}px`);
+    }
+    _getPopupContent() {
+        return this.shadowRoot?.querySelector(".ui5-popup-content") ?? null;
+    }
 };
 __decorate([
     property()

package/dist/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,SAAS;AACT,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,SAAS,MAAM,wDAAwD,CAAC;AAC/E,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;AACjB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAED;;;;;;;;;;;GAWG;AAYH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,MAAM;IAA9B;;QACE;;;;;;;UAOE;QAEA,SAAI,GAAuB,aAAa,CAAC,OAAO,CAAC;IASrD,CAAC;IAPC,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,oBAAoB,CAAC,CAAC;QAClF,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;YAC9D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;CACF,CAAA;AATG;IADD,QAAQ,EAAE;uCACwC;AAV/C,SAAS;IAXd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACN,KAAK,CAAC,MAAM;YACZ,eAAe;YACf,SAAS;YACT,QAAQ;YACR,0BAA0B,EAAE;SAC7B;KACF,CAAC;GACI,SAAS,CAmBd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Popup from \"@ui5/webcomponents/dist/Popup.js\";\n\n// Styles\nimport PopupsCommonCss from \"@ui5/webcomponents/dist/generated/themes/PopupsCommon.css.js\";\nimport dialogCSS from \"@ui5/webcomponents/dist/generated/themes/Dialog.css.js\";\nimport ModalCss from \"./generated/themes/Modal.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport enum UDExModalType {\n  default = \"default\",\n  basic = \"basic\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-modal</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends Dialog\n * @tagname udex-modal\n * @public\n */\n@customElement({\n  tag: \"udex-modal\",\n  renderer: jsxRenderer,\n  styles: [\n    Popup.styles,\n    PopupsCommonCss,\n    dialogCSS,\n    ModalCss,\n    getEffectiveScrollbarStyle(),\n  ],\n})\nclass UDExModal extends Dialog {\n  /**\n  * Defines modal display type\n  * <br><br>\n  * <b>Note:</b> The <code>basic</code> type is simplified version of styling.\n  *\n  * @public\n  * @default \"default\"\n  */\n  @property()\n    type: `${UDExModalType}` = UDExModalType.default;\n\n  onAfterRendering() {\n    const content = this.shadowRoot?.querySelector<HTMLElement>(\".ui5-popup-content\");\n    if (content) {\n      const gutterWidth = content.offsetWidth - content.clientWidth;\n      this.style.setProperty(\"--udex-modal-scrollbar-width\", `${gutterWidth}px`);\n    }\n  }\n}\n\nUDExModal.define();\n\nexport default UDExModal;\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,SAAS;AACT,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,SAAS,MAAM,wDAAwD,CAAC;AAC/E,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;AACjB,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB;AAED;;;;;;;;;;;GAWG;AAaH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,MAAM;IAA9B;;QACE;;;;;;;UAOE;QAEA,SAAI,GAAuB,aAAa,CAAC,OAAO,CAAC;IAuBrD,CAAC;IArBC,gBAAgB;QACd,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,OAAoB;QACrC,MAAM,cAAc,GAAG,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;QAEjE,IAAI,CAAC,KAAK,CAAC,WAAW,CACpB,8BAA8B,EAC9B,GAAG,cAAc,IAAI,CACtB,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,oBAAoB,CAAC,IAAI,IAAI,CAAC;IACnF,CAAC;CACF,CAAA;AAvBG;IADD,QAAQ,EAAE;uCACwC;AAV/C,SAAS;IAZd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACN,KAAK,CAAC,MAAM;YACZ,eAAe;YACf,SAAS;YACT,QAAQ;YACR,0BAA0B,EAAE;SAC7B;KACF,CAAC;GAEI,SAAS,CAiCd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Popup from \"@ui5/webcomponents/dist/Popup.js\";\n\n// Styles\nimport PopupsCommonCss from \"@ui5/webcomponents/dist/generated/themes/PopupsCommon.css.js\";\nimport dialogCSS from \"@ui5/webcomponents/dist/generated/themes/Dialog.css.js\";\nimport ModalCss from \"./generated/themes/Modal.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport enum UDExModalType {\n  default = \"default\",\n  basic = \"basic\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-modal</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends Dialog\n * @tagname udex-modal\n * @public\n */\n@customElement({\n  tag: \"udex-modal\",\n  renderer: jsxRenderer,\n  styles: [\n    Popup.styles,\n    PopupsCommonCss,\n    dialogCSS,\n    ModalCss,\n    getEffectiveScrollbarStyle(),\n  ],\n})\n\nclass UDExModal extends Dialog {\n  /**\n  * Defines modal display type\n  * <br><br>\n  * <b>Note:</b> The <code>basic</code> type is simplified version of styling.\n  *\n  * @public\n  * @default \"default\"\n  */\n  @property()\n    type: `${UDExModalType}` = UDExModalType.default;\n\n  onAfterRendering() {\n    super.onAfterRendering();\n    const content = this._getPopupContent();\n\n    if (content) {\n      this._setScrollbarWidth(content);\n    }\n  }\n\n  _setScrollbarWidth(content: HTMLElement) {\n    const scrollbarWidth = content.offsetWidth - content.clientWidth;\n\n    this.style.setProperty(\n      \"--udex-modal-scrollbar-width\",\n      `${scrollbarWidth}px`,\n    );\n  }\n\n  _getPopupContent(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(\".ui5-popup-content\") ?? null;\n  }\n}\n\nUDExModal.define();\n\nexport default UDExModal;\n"]}

package/dist/PromoTile.d.ts

@@ -1,5 +1,5 @@
 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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type UDExButton from "./Button.js";
@@ -44,7 +44,7 @@ declare class UDExPromoTile extends UI5Element {
      * @slot pictogram
      * @public
      */
-    pictogram?: Array<HTMLElement>;
+    pictogram: Slot<HTMLElement>;
     /**
      * Allows control over setting the CSS gradient.
      *

package/dist/PromoTile.js

@@ -8,7 +8,7 @@ var UDExPromoTile_1;
 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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";

package/dist/PromoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoTile.js","sourceRoot":"","sources":["../src/PromoTile.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport PromoTileTemplate from \"./PromoTileTemplate.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { PROMO_TILE, PROMO_TILE_ICON } from \"./generated/i18n/i18n-defaults.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\nimport type UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExPromoTileColorScheme, UDExPromoTileMode } from \"./types/PromoTile.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport PromoTileCss from \"./generated/themes/PromoTile.css.js\";\n\nexport enum UDExOrientation {\n  Vertical = \"Vertical\",\n  Horizontal = \"Horizontal\",\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-promo-tile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-promo-tile\n * @public\n */\n@customElement({\n  tag: \"udex-promo-tile\",\n  renderer: jsxRenderer,\n  styles: PromoTileCss,\n  template: PromoTileTemplate,\n})\n\n/**\n * Triggered when the user clicks on the CTA button\n *\n * @public\n */\n@event(\"button-click\", { cancelable: true, bubbles: true })\n\nclass UDExPromoTile extends UI5Element {\n  eventDetails!: {\n    \"button-click\": void,\n  };\n\n  /**\n   * Defines the text content of the Promo Tile.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the custom pictogram of the Promo Tile.\n   *\n   * @slot pictogram\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    pictogram?: Array<HTMLElement>;\n\n  /**\n   * Allows control over setting the CSS gradient.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    backgroundGradient?: string;\n\n  /**\n   * Defines the orientation of the Promo Tile component.\n   *\n   * @default \"Vertical\"\n   * @public\n   */\n  @property()\n    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;\n\n  /**\n   * Defines the UI5 icon name in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines the image aria label and alt in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    imageLabel?: string;\n\n  /**\n   * Defines the logo URL in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    logoUrl?: string;\n\n  /**\n   * Defines the header text of the promo tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    header?: string;\n\n  /**\n   * Defines the eyebrow text of the promo tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eyebrow?: string;\n\n  /**\n   * Defines the CTA button label\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    button?: string;\n\n  /**\n   * Defines the CTA button design\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    buttonDesign?: UDExButtonDesign;\n\n  /**\n   * Defines the color scheme of the Promo Tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    colorScheme?: UDExPromoTileColorScheme;\n\n  /**\n   * Defines the accessible name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines whether promo tile uses dark or light theme.\n   *\n   * @default \"light\"\n   * @private\n   */\n  @property({ type: String })\n    _colorMode: `${UDExPromoTileMode}` = UDExPromoTileMode.light;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _button: UDExButton | undefined;\n  _lightModeColors: Array<number> = [1, 2];\n  _darkModeColors: Array<number> = [7, 8, 9, 10];\n  _defaultBackgroundColor = \"#FFF\";\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering() {\n    this._button = this.getButton();\n    this.applyColorScheme();\n  }\n\n  _handleResize(): void {\n    if (this._button) {\n      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;\n    }\n  }\n\n  getButton(): UDExButton | undefined {\n    return this.shadowRoot!.querySelector<UDExButton>(\"[udex-button]\")!;\n  }\n\n  applyColorScheme(): void {\n    if (!this.colorScheme) {\n      return;\n    }\n\n    this._colorMode = this.checkColorMode(this.colorScheme);\n\n    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);\n    const isDarkMode = this._colorMode === UDExPromoTileMode.dark;\n    const defaultButtonDesign = isDarkMode ? UDExButtonDesign.Secondary : UDExButtonDesign.Primary;\n    const modeColor = isDarkMode ? \"var(--udexColorNeutralWhite)\" : \"inherit\";\n\n    if (this._button) {\n      this._button.design = this.buttonDesign || defaultButtonDesign;\n    }\n\n    this.style.setProperty(\"--udex-promo-tile-icon-fill-color\", modeColor);\n    this.style.setProperty(\"--udex-promo-tile-background\", `var(--udexColor${this.colorScheme})`);\n    this.style.setProperty(\"--udex-promo-tile-eyebrow-color\", `var(--udexColor${eyebrowColor})`);\n  }\n\n  getColorNumber(colorScheme: string): number {\n    const match = colorScheme.match(/\\d+/);\n    return match ? parseInt(match[0]) : 0;\n  }\n\n  checkColorMode(colorScheme: string): UDExPromoTileMode {\n    const number = this.getColorNumber(colorScheme);\n\n    if (number && this._darkModeColors.includes(number)) {\n      return UDExPromoTileMode.dark;\n    }\n    return UDExPromoTileMode.light;\n  }\n\n  checkEyebrowColor(colorScheme: string): string {\n    const number = this.getColorNumber(colorScheme);\n    let color: string = UDExPromoTileColorScheme.Blue8;\n\n    if (number === 7) {\n      color = \"NeutralWhite\";\n    } else if (this._darkModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number - 7}`);\n    } else if (this._lightModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number + 7}`);\n    }\n    return color;\n  }\n\n  handleCTAButtonClick(e: Event) {\n    e.preventDefault();\n    this.fireDecoratorEvent(\"button-click\");\n  }\n\n  get isMobile(): boolean {\n    return BreakpointUtils.isAtMost(\"S\");\n  }\n\n  get promoTileContainerText(): string {\n    return this.accessibleName || this.header || translate(UDExPromoTile, PROMO_TILE);\n  }\n\n  get _showPictogram(): boolean {\n    return !!this.icon || !!this.logoUrl || !!this.pictogram?.length;\n  }\n\n  get _showLogo(): boolean {\n    return !this.icon && !!this.logoUrl;\n  }\n\n  get _imageLabel(): string {\n    return this.imageLabel || translate(UDExPromoTile, PROMO_TILE_ICON);\n  }\n}\n\nUDExPromoTile.define();\n\nexport default UDExPromoTile;\n"]}
+{"version":3,"file":"PromoTile.js","sourceRoot":"","sources":["../src/PromoTile.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport PromoTileTemplate from \"./PromoTileTemplate.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { PROMO_TILE, PROMO_TILE_ICON } from \"./generated/i18n/i18n-defaults.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\nimport type UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport { UDExPromoTileColorScheme, UDExPromoTileMode } from \"./types/PromoTile.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport PromoTileCss from \"./generated/themes/PromoTile.css.js\";\n\nexport enum UDExOrientation {\n  Vertical = \"Vertical\",\n  Horizontal = \"Horizontal\",\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-promo-tile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-promo-tile\n * @public\n */\n@customElement({\n  tag: \"udex-promo-tile\",\n  renderer: jsxRenderer,\n  styles: PromoTileCss,\n  template: PromoTileTemplate,\n})\n\n/**\n * Triggered when the user clicks on the CTA button\n *\n * @public\n */\n@event(\"button-click\", { cancelable: true, bubbles: true })\n\nclass UDExPromoTile extends UI5Element {\n  eventDetails!: {\n    \"button-click\": void,\n  };\n\n  /**\n   * Defines the text content of the Promo Tile.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the custom pictogram of the Promo Tile.\n   *\n   * @slot pictogram\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    pictogram!: Slot<HTMLElement>;\n\n  /**\n   * Allows control over setting the CSS gradient.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    backgroundGradient?: string;\n\n  /**\n   * Defines the orientation of the Promo Tile component.\n   *\n   * @default \"Vertical\"\n   * @public\n   */\n  @property()\n    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;\n\n  /**\n   * Defines the UI5 icon name in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines the image aria label and alt in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    imageLabel?: string;\n\n  /**\n   * Defines the logo URL in the pictogram section.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    logoUrl?: string;\n\n  /**\n   * Defines the header text of the promo tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    header?: string;\n\n  /**\n   * Defines the eyebrow text of the promo tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    eyebrow?: string;\n\n  /**\n   * Defines the CTA button label\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    button?: string;\n\n  /**\n   * Defines the CTA button design\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    buttonDesign?: UDExButtonDesign;\n\n  /**\n   * Defines the color scheme of the Promo Tile.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    colorScheme?: UDExPromoTileColorScheme;\n\n  /**\n   * Defines the accessible name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines whether promo tile uses dark or light theme.\n   *\n   * @default \"light\"\n   * @private\n   */\n  @property({ type: String })\n    _colorMode: `${UDExPromoTileMode}` = UDExPromoTileMode.light;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n  _button: UDExButton | undefined;\n  _lightModeColors: Array<number> = [1, 2];\n  _darkModeColors: Array<number> = [7, 8, 9, 10];\n  _defaultBackgroundColor = \"#FFF\";\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering() {\n    this._button = this.getButton();\n    this.applyColorScheme();\n  }\n\n  _handleResize(): void {\n    if (this._button) {\n      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;\n    }\n  }\n\n  getButton(): UDExButton | undefined {\n    return this.shadowRoot!.querySelector<UDExButton>(\"[udex-button]\")!;\n  }\n\n  applyColorScheme(): void {\n    if (!this.colorScheme) {\n      return;\n    }\n\n    this._colorMode = this.checkColorMode(this.colorScheme);\n\n    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);\n    const isDarkMode = this._colorMode === UDExPromoTileMode.dark;\n    const defaultButtonDesign = isDarkMode ? UDExButtonDesign.Secondary : UDExButtonDesign.Primary;\n    const modeColor = isDarkMode ? \"var(--udexColorNeutralWhite)\" : \"inherit\";\n\n    if (this._button) {\n      this._button.design = this.buttonDesign || defaultButtonDesign;\n    }\n\n    this.style.setProperty(\"--udex-promo-tile-icon-fill-color\", modeColor);\n    this.style.setProperty(\"--udex-promo-tile-background\", `var(--udexColor${this.colorScheme})`);\n    this.style.setProperty(\"--udex-promo-tile-eyebrow-color\", `var(--udexColor${eyebrowColor})`);\n  }\n\n  getColorNumber(colorScheme: string): number {\n    const match = colorScheme.match(/\\d+/);\n    return match ? parseInt(match[0]) : 0;\n  }\n\n  checkColorMode(colorScheme: string): UDExPromoTileMode {\n    const number = this.getColorNumber(colorScheme);\n\n    if (number && this._darkModeColors.includes(number)) {\n      return UDExPromoTileMode.dark;\n    }\n    return UDExPromoTileMode.light;\n  }\n\n  checkEyebrowColor(colorScheme: string): string {\n    const number = this.getColorNumber(colorScheme);\n    let color: string = UDExPromoTileColorScheme.Blue8;\n\n    if (number === 7) {\n      color = \"NeutralWhite\";\n    } else if (this._darkModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number - 7}`);\n    } else if (this._lightModeColors.includes(number)) {\n      color = colorScheme.replace(`${number}`, `${number + 7}`);\n    }\n    return color;\n  }\n\n  handleCTAButtonClick(e: Event) {\n    e.preventDefault();\n    this.fireDecoratorEvent(\"button-click\");\n  }\n\n  get isMobile(): boolean {\n    return BreakpointUtils.isAtMost(\"S\");\n  }\n\n  get promoTileContainerText(): string {\n    return this.accessibleName || this.header || translate(UDExPromoTile, PROMO_TILE);\n  }\n\n  get _showPictogram(): boolean {\n    return !!this.icon || !!this.logoUrl || !!this.pictogram?.length;\n  }\n\n  get _showLogo(): boolean {\n    return !this.icon && !!this.logoUrl;\n  }\n\n  get _imageLabel(): string {\n    return this.imageLabel || translate(UDExPromoTile, PROMO_TILE_ICON);\n  }\n}\n\nUDExPromoTile.define();\n\nexport default UDExPromoTile;\n"]}

package/dist/Quote.d.ts

@@ -1,5 +1,5 @@
 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";
 export declare enum UDExSizeType {
     small = "small",
     large = "large"
@@ -38,21 +38,21 @@ declare class UDExQuote extends UI5Element {
       * @slot
       * @public
     */
-    link: Array<HTMLElement>;
+    link: Slot<HTMLElement>;
     /**
       * Defines author's name and company
       *
       * @public
       * @slot
     */
-    author: Array<HTMLElement>;
+    author: Slot<HTMLElement>;
     /**
       * Defines image near quote text
       *
       * @public
       * @slot
     */
-    image: Array<HTMLElement>;
+    image: Slot<HTMLElement>;
     /**
       * Defines image (Avatar or company logo) size
       *

package/dist/Quote.js

@@ -7,7 +7,7 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import QuoteTemplate from "./QuoteTemplate.js";
 // Styles

package/dist/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../src/Quote.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;AACzB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED;;;;;;;;;;;GAWG;AAOH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqCE;;;;;UAKE;QAEA,cAAS,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEpD;;;;;UAKE;QAEA,aAAQ,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEnD;;;;;UAKE;QAEA,SAAI,GAAsB,YAAY,CAAC,MAAM,CAAC;QAEhD;;;;;WAKG;QAED,mBAAc,GAA4B,kBAAkB,CAAC,IAAI,CAAC;IAKtE,CAAC;IAHC,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,cAAc,KAAK,kBAAkB,CAAC,KAAK,CAAC;IAC1D,CAAC;CACF,CAAA;AApEG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AASnC;IADD,IAAI,EAAE;uCACqB;AAS1B;IADD,IAAI,EAAE;yCACuB;AAS5B;IADD,IAAI,EAAE;wCACsB;AAS3B;IADD,QAAQ,EAAE;4CACyC;AASlD;IADD,QAAQ,EAAE;2CACwC;AASjD;IADD,QAAQ,EAAE;uCACqC;AAS9C;IADD,QAAQ,EAAE;iDACyD;AAvEhE,SAAS;IANd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GACI,SAAS,CA4Ed;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport QuoteTemplate from \"./QuoteTemplate.js\";\n\n// Styles\nimport QuoteCss from \"./generated/themes/Quote.css.js\";\n\nexport enum UDExSizeType {\n  small = \"small\",\n  large = \"large\"\n}\n\nexport enum UDExMaskType {\n  avatar = \"avatar\",\n  rectangle = \"rectangle\"\n}\n\nexport enum UDExImagePlacement {\n  left = \"left\",\n  right = \"right\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-quote</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-quote\n * @public\n */\n@customElement({\n  tag: \"udex-quote\",\n  renderer: jsxRenderer,\n  styles: QuoteCss,\n  template: QuoteTemplate,\n})\nclass UDExQuote extends UI5Element {\n  /**\n    * Defines the text content of the Quote.\n    *\n    * @slot content\n    * @public\n    */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: DefaultSlot<HTMLElement>;\n\n  /**\n    * Defines the link in the Quote\n    *\n    * @slot\n    * @public\n  */\n  @slot()\n    link!: Array<HTMLElement>;\n\n  /**\n    * Defines author's name and company\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    author!: Array<HTMLElement>;\n\n  /**\n    * Defines image near quote text\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    image!: Array<HTMLElement>;\n\n  /**\n    * Defines image (Avatar or company logo) size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    imageSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines text size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    textSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines image mask\n    *\n    * @public\n    * @default \"avatar\"\n  */\n  @property()\n    mask: `${UDExMaskType}` = UDExMaskType.avatar;\n\n  /**\n   * Defines image placement\n   *\n   * @public\n   * @default \"left\"\n   */\n  @property()\n    imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;\n\n  get isImagePlacementRight(): boolean {\n    return this.imagePlacement === UDExImagePlacement.right;\n  }\n}\n\nUDExQuote.define();\n\nexport default UDExQuote;\n"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../src/Quote.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,iCAAiB,CAAA;IACjB,uCAAuB,CAAA;AACzB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,mCAAa,CAAA;IACb,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED;;;;;;;;;;;GAWG;AAOH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqCE;;;;;UAKE;QAEA,cAAS,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEpD;;;;;UAKE;QAEA,aAAQ,GAAsB,YAAY,CAAC,KAAK,CAAC;QAEnD;;;;;UAKE;QAEA,SAAI,GAAsB,YAAY,CAAC,MAAM,CAAC;QAEhD;;;;;WAKG;QAED,mBAAc,GAA4B,kBAAkB,CAAC,IAAI,CAAC;IAKtE,CAAC;IAHC,IAAI,qBAAqB;QACvB,OAAO,IAAI,CAAC,cAAc,KAAK,kBAAkB,CAAC,KAAK,CAAC;IAC1D,CAAC;CACF,CAAA;AApEG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AASnC;IADD,IAAI,EAAE;uCACoB;AASzB;IADD,IAAI,EAAE;yCACsB;AAS3B;IADD,IAAI,EAAE;wCACqB;AAS1B;IADD,QAAQ,EAAE;4CACyC;AASlD;IADD,QAAQ,EAAE;2CACwC;AASjD;IADD,QAAQ,EAAE;uCACqC;AAS9C;IADD,QAAQ,EAAE;iDACyD;AAvEhE,SAAS;IANd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GACI,SAAS,CA4Ed;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport QuoteTemplate from \"./QuoteTemplate.js\";\n\n// Styles\nimport QuoteCss from \"./generated/themes/Quote.css.js\";\n\nexport enum UDExSizeType {\n  small = \"small\",\n  large = \"large\"\n}\n\nexport enum UDExMaskType {\n  avatar = \"avatar\",\n  rectangle = \"rectangle\"\n}\n\nexport enum UDExImagePlacement {\n  left = \"left\",\n  right = \"right\"\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>udex-quote</code> component is a demo component that displays some text.\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-quote\n * @public\n */\n@customElement({\n  tag: \"udex-quote\",\n  renderer: jsxRenderer,\n  styles: QuoteCss,\n  template: QuoteTemplate,\n})\nclass UDExQuote extends UI5Element {\n  /**\n    * Defines the text content of the Quote.\n    *\n    * @slot content\n    * @public\n    */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: DefaultSlot<HTMLElement>;\n\n  /**\n    * Defines the link in the Quote\n    *\n    * @slot\n    * @public\n  */\n  @slot()\n    link!: Slot<HTMLElement>;\n\n  /**\n    * Defines author's name and company\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    author!: Slot<HTMLElement>;\n\n  /**\n    * Defines image near quote text\n    *\n    * @public\n    * @slot\n  */\n  @slot()\n    image!: Slot<HTMLElement>;\n\n  /**\n    * Defines image (Avatar or company logo) size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    imageSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines text size\n    *\n    * @public\n    * @default \"large\"\n  */\n  @property()\n    textSize: `${UDExSizeType}` = UDExSizeType.large;\n\n  /**\n    * Defines image mask\n    *\n    * @public\n    * @default \"avatar\"\n  */\n  @property()\n    mask: `${UDExMaskType}` = UDExMaskType.avatar;\n\n  /**\n   * Defines image placement\n   *\n   * @public\n   * @default \"left\"\n   */\n  @property()\n    imagePlacement: `${UDExImagePlacement}` = UDExImagePlacement.left;\n\n  get isImagePlacementRight(): boolean {\n    return this.imagePlacement === UDExImagePlacement.right;\n  }\n}\n\nUDExQuote.define();\n\nexport default UDExQuote;\n"]}

package/dist/Review.d.ts

@@ -1,5 +1,5 @@
 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 type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
 import type UDExRatingBar from "./RatingBar.js";
@@ -42,14 +42,14 @@ declare class UDExReview extends UI5Element {
      * @slot
      * @public
      */
-    reviewButton: UDExButton;
+    reviewButton: Slot<UDExButton>;
     /**
      * Slot for the default text when there are no reviews or rating.
      *
      * @slot
      * @public
      */
-    defaultText: HTMLElement;
+    defaultText: Slot<HTMLElement>;
     /**
      * Slot for rating bars.
      *

package/dist/Review.js

@@ -8,7 +8,7 @@ var UDExReview_1;
 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 jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { REVIEWS, STARS } from "./generated/i18n/i18n-defaults.js";

package/dist/Review.js.map

@@ -1 +1 @@
-{"version":3,"file":"Review.js","sourceRoot":"","sources":["../src/Review.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { REVIEWS, STARS } from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/favorite.js\";\nimport type UDExRatingBar from \"./RatingBar.js\";\nimport type UDExButton from \"./Button.js\";\nimport ReviewTemplate from \"./ReviewTemplate.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport ReviewCss from \"./generated/themes/Review.css.js\";\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-review</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Review.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-review\",\n  renderer: jsxRenderer,\n  styles: ReviewCss,\n  template: ReviewTemplate,\n})\n\nclass UDExReview extends UI5Element {\n  /**\n   * Defines the rating.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number })\n    rating: number = 0;\n\n  /**\n   * Defines the total number of reviews.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number })\n    reviews: number = 0;\n\n  /**\n   * Slot for a button for writing a review.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    reviewButton!: UDExButton;\n\n  /**\n   * Slot for the default text when there are no reviews or rating.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    defaultText!: HTMLElement;\n\n  /**\n   * Slot for rating bars.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    bars!: DefaultSlot<UDExRatingBar>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _minRating: number = 0;\n  _maxRating: number = 5;\n  _maxRatingBars: number = 5;\n\n  get reviewsText(): string {\n    return `${this.reviews} ${translate(UDExReview, REVIEWS)}`;\n  }\n\n  get withoutBreakdown(): boolean {\n    return this.bars.length === 0;\n  }\n\n  get isEmpty(): boolean {\n    return this.reviews === 0 && this.rating === 0;\n  }\n\n  get validatedRating(): number {\n    if (this.rating > this._maxRating) {\n      console.warn(\"UDEx Review: The rating shouldn't be more than 5.\");\n      return this._maxRating;\n    }\n    if (this.rating < this._minRating) {\n      console.warn(\"UDEx Review: The rating shouldn't be less than 0.\");\n      return this._minRating;\n    }\n    return this.rating;\n  }\n\n  get validatedRatingBars(): Array<UDExRatingBar> {\n    if (this.bars.length > this._maxRatingBars) {\n      console.warn(\"UDEx Review: There shouldn't be more than 5 RatingBars.\");\n      return this.bars.slice(-this._maxRatingBars);\n    }\n\n    return this.bars;\n  }\n\n  get _ratingDescription(): string {\n    return `${this.validatedRating} ${translate(UDExReview, STARS)}`;\n  }\n}\n\nUDExReview.define();\n\nexport default UDExReview;\n"]}
+{"version":3,"file":"Review.js","sourceRoot":"","sources":["../src/Review.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { REVIEWS, STARS } from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/favorite.js\";\nimport type UDExRatingBar from \"./RatingBar.js\";\nimport type UDExButton from \"./Button.js\";\nimport ReviewTemplate from \"./ReviewTemplate.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport ReviewCss from \"./generated/themes/Review.css.js\";\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-review</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Review.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-review\",\n  renderer: jsxRenderer,\n  styles: ReviewCss,\n  template: ReviewTemplate,\n})\n\nclass UDExReview extends UI5Element {\n  /**\n   * Defines the rating.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number })\n    rating: number = 0;\n\n  /**\n   * Defines the total number of reviews.\n   *\n   * @default 0\n   * @public\n   */\n  @property({ type: Number })\n    reviews: number = 0;\n\n  /**\n   * Slot for a button for writing a review.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    reviewButton!: Slot<UDExButton>;\n\n  /**\n   * Slot for the default text when there are no reviews or rating.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    defaultText!: Slot<HTMLElement>;\n\n  /**\n   * Slot for rating bars.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    bars!: DefaultSlot<UDExRatingBar>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _minRating: number = 0;\n  _maxRating: number = 5;\n  _maxRatingBars: number = 5;\n\n  get reviewsText(): string {\n    return `${this.reviews} ${translate(UDExReview, REVIEWS)}`;\n  }\n\n  get withoutBreakdown(): boolean {\n    return this.bars.length === 0;\n  }\n\n  get isEmpty(): boolean {\n    return this.reviews === 0 && this.rating === 0;\n  }\n\n  get validatedRating(): number {\n    if (this.rating > this._maxRating) {\n      console.warn(\"UDEx Review: The rating shouldn't be more than 5.\");\n      return this._maxRating;\n    }\n    if (this.rating < this._minRating) {\n      console.warn(\"UDEx Review: The rating shouldn't be less than 0.\");\n      return this._minRating;\n    }\n    return this.rating;\n  }\n\n  get validatedRatingBars(): Array<UDExRatingBar> {\n    if (this.bars.length > this._maxRatingBars) {\n      console.warn(\"UDEx Review: There shouldn't be more than 5 RatingBars.\");\n      return this.bars.slice(-this._maxRatingBars);\n    }\n\n    return this.bars;\n  }\n\n  get _ratingDescription(): string {\n    return `${this.validatedRating} ${translate(UDExReview, STARS)}`;\n  }\n}\n\nUDExReview.define();\n\nexport default UDExReview;\n"]}