@sapudex/web-components 0.111.0

package/dist/MediaPlayerYoutube.js.map

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

package/dist/MessageStrip.d.ts

@@ -0,0 +1,91 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
+export declare enum MessageStripDesign {
+    /**
+     * Message should be just an information
+     * @public
+     */
+    Information = "Information",
+    /**
+     * Message is a success message
+     * @public
+     */
+    Positive = "Positive",
+    /**
+     * Message is an error
+     * @public
+     */
+    Negative = "Negative",
+    /**
+     * Message is a warning
+     * @public
+     */
+    Warning = "Warning",
+    /**
+     * Message is an action
+     * @public
+     */
+    Action = "Action"
+}
+export declare enum UdexMessageStripStatusType {
+    Icon = "Icon",
+    Text = "Text",
+    None = "None"
+}
+type textStatusType = Record<Exclude<MessageStripDesign, "Action">, string>;
+/**
+ * @class
+ *
+ * @constructor
+ * @extends MessageStrip
+ * @tagname udex-message-strip
+ * @public
+ */
+declare class UDExMessageStrip extends MessageStrip {
+    /**
+     * Defines the component type.
+     *
+     * @public
+     */
+    /** @ts-expect-error */
+    design: `${MessageStripDesign}`;
+    /**
+     * Defines the component Status Type.
+     *
+     * @public
+     */
+    statusType: `${UdexMessageStripStatusType}`;
+    /**
+     * Defines whether the MessageStrip renders close button.
+     *
+     * @public
+     */
+    hideCloseButton: boolean;
+    /**
+     * Defines display the icon for the Message Strip.
+     *
+     * @private
+     */
+    hideIcon: boolean;
+    /**
+     * Defines the content of the component.
+     *
+     * @slot
+     * @public
+     */
+    default: Node;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    getTranslation(text: I18nText): string;
+    textStatusTypeMapping(): textStatusType;
+    onBeforeRendering(): void;
+    isDesignAction(): boolean;
+    get shouldHideIcon(): boolean;
+    get hideTextStatus(): boolean;
+    get textStatus(): string | undefined;
+    get _closeButtonText(): string;
+    get iconProvided(): boolean;
+    _closeClick(): void;
+}
+export default UDExMessageStrip;

package/dist/MessageStrip.js

@@ -0,0 +1,154 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var UDExMessageStrip_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import { getI18nBundle, } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js";
+import messageStripCss from "@ui5/webcomponents/dist/generated/themes/MessageStrip.css.js";
+import UDExButton from "./Button.js";
+import { MESSAGE_STRIP_CLOSE_BUTTON, MESSAGE_STRIP_ERROR, MESSAGE_STRIP_INFORMATION, MESSAGE_STRIP_SUCCESS, MESSAGE_STRIP_WARNING, } from "./generated/i18n/i18n-defaults.js";
+import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
+// Styles
+import MessageStripCss from "./generated/themes/MessageStrip.css.js";
+export var MessageStripDesign;
+(function (MessageStripDesign) {
+    /**
+     * Message should be just an information
+     * @public
+     */
+    MessageStripDesign["Information"] = "Information";
+    /**
+     * Message is a success message
+     * @public
+     */
+    MessageStripDesign["Positive"] = "Positive";
+    /**
+     * Message is an error
+     * @public
+     */
+    MessageStripDesign["Negative"] = "Negative";
+    /**
+     * Message is a warning
+     * @public
+     */
+    MessageStripDesign["Warning"] = "Warning";
+    /**
+     * Message is an action
+     * @public
+     */
+    MessageStripDesign["Action"] = "Action";
+})(MessageStripDesign || (MessageStripDesign = {}));
+export var UdexMessageStripStatusType;
+(function (UdexMessageStripStatusType) {
+    UdexMessageStripStatusType["Icon"] = "Icon";
+    UdexMessageStripStatusType["Text"] = "Text";
+    UdexMessageStripStatusType["None"] = "None";
+})(UdexMessageStripStatusType || (UdexMessageStripStatusType = {}));
+/**
+ * @class
+ *
+ * @constructor
+ * @extends MessageStrip
+ * @tagname udex-message-strip
+ * @public
+ */
+let UDExMessageStrip = UDExMessageStrip_1 = class UDExMessageStrip extends MessageStrip {
+    static async onDefine() {
+        UDExMessageStrip_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    getTranslation(text) {
+        return UDExMessageStrip_1.i18nBundle.getText(text);
+    }
+    textStatusTypeMapping() {
+        return {
+            Information: this.getTranslation(MESSAGE_STRIP_INFORMATION),
+            Positive: this.getTranslation(MESSAGE_STRIP_SUCCESS),
+            Negative: this.getTranslation(MESSAGE_STRIP_ERROR),
+            Warning: this.getTranslation(MESSAGE_STRIP_WARNING),
+        };
+    }
+    onBeforeRendering() {
+        if (this.isDesignAction()
+            || this.statusType !== UdexMessageStripStatusType.Icon) {
+            this.hideIcon = true;
+        }
+    }
+    isDesignAction() {
+        return this.design === MessageStripDesign.Action;
+    }
+    get shouldHideIcon() {
+        if (this.isDesignAction()
+            || this.statusType !== UdexMessageStripStatusType.Icon) {
+            return this.hideIcon || this.icon.length === 0;
+        }
+        return this.hideIcon;
+    }
+    get hideTextStatus() {
+        return (this.statusType !== UdexMessageStripStatusType.Text
+            || this.isDesignAction());
+    }
+    get textStatus() {
+        if (this.design !== MessageStripDesign.Action) {
+            return this.textStatusTypeMapping()[this.design];
+        }
+    }
+    get _closeButtonText() {
+        return this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON);
+    }
+    get iconProvided() {
+        return this.icon.length > 0;
+    }
+    _closeClick() {
+        this.fireEvent("close");
+    }
+};
+__decorate([
+    property({
+        type: MessageStripDesign,
+        defaultValue: MessageStripDesign.Action,
+    })
+    /** @ts-expect-error */
+], UDExMessageStrip.prototype, "design", void 0);
+__decorate([
+    property({
+        type: UdexMessageStripStatusType,
+        defaultValue: UdexMessageStripStatusType.Icon,
+    })
+], UDExMessageStrip.prototype, "statusType", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMessageStrip.prototype, "hideCloseButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMessageStrip.prototype, "hideIcon", void 0);
+__decorate([
+    slot({ type: Node })
+], UDExMessageStrip.prototype, "default", void 0);
+UDExMessageStrip = UDExMessageStrip_1 = __decorate([
+    customElement({
+        tag: "udex-message-strip",
+        renderer: litRender,
+        styles: [messageStripCss, MessageStripCss],
+        template: MessageStripTemplate,
+        dependencies: [UDExButton],
+    })
+    /**
+     * Fired when the close button is pressed either with a
+     * click/tap or by using the Enter or Space key.
+     *
+     * @public
+     */
+    ,
+    event("close")
+], UDExMessageStrip);
+UDExMessageStrip.define();
+export default UDExMessageStrip;
+//# sourceMappingURL=MessageStrip.js.map

package/dist/MessageStrip.js.map

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

package/dist/Modal.d.ts

@@ -0,0 +1,29 @@
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+export declare enum ModalType {
+    default = "default",
+    basic = "basic"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-modal</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @extends Dialog
+ * @tagname udex-modal
+ * @public
+ */
+declare class UDExModal extends Dialog {
+    /**
+    * Defines modal display type
+    * <br><br>
+    * <b>Note:</b> The <code>basic</code> type is simplified version of styling.
+    *
+    * @public
+    * @default "default"
+    */
+    type: `${ModalType}`;
+}
+export default UDExModal;

package/dist/Modal.js

@@ -0,0 +1,57 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Popup from "@ui5/webcomponents/dist/Popup.js";
+import Bar from "@ui5/webcomponents-fiori/dist/Bar.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+// Styles
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import PopupsCommonCss from "@ui5/webcomponents/dist/generated/themes/PopupsCommon.css.js";
+import dialogCSS from "@ui5/webcomponents/dist/generated/themes/Dialog.css.js";
+import ModalCss from "./generated/themes/Modal.css.js";
+export var ModalType;
+(function (ModalType) {
+    ModalType["default"] = "default";
+    ModalType["basic"] = "basic";
+})(ModalType || (ModalType = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-modal</code> component is a demo component that displays some text.
+ *
+ * @constructor
+ * @extends Dialog
+ * @tagname udex-modal
+ * @public
+ */
+let UDExModal = class UDExModal extends Dialog {
+};
+__decorate([
+    property({ defaultValue: ModalType.default })
+], UDExModal.prototype, "type", void 0);
+UDExModal = __decorate([
+    customElement({
+        tag: "udex-modal",
+        renderer: litRender,
+        styles: [
+            Popup.styles,
+            getEffectiveScrollbarStyle(),
+            PopupsCommonCss,
+            dialogCSS,
+            ModalCss,
+        ],
+        dependencies: [Bar, Icon],
+    })
+], UDExModal);
+UDExModal.define();
+export default UDExModal;
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +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,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,GAAG,MAAM,sCAAsC,CAAC;AACvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,SAAS;AACT,OAAO,0BAA0B,MAAM,iEAAiE,CAAC;AACzG,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,SAAS,MAAM,wDAAwD,CAAC;AAC/E,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,gCAAmB,CAAA;IACnB,4BAAe,CAAA;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED;;;;;;;;;;;GAWG;AAaH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,MAAM;CAW7B,CAAA;AADG;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC;uCACtB;AAVpB,SAAS;IAZd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE;YACN,KAAK,CAAC,MAAM;YACZ,0BAA0B,EAAE;YAC5B,eAAe;YACf,SAAS;YACT,QAAQ;SACT;QACD,YAAY,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC;KAC1B,CAAC;GACI,SAAS,CAWd;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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Popup from \"@ui5/webcomponents/dist/Popup.js\";\nimport Bar from \"@ui5/webcomponents-fiori/dist/Bar.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\n// Styles\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\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\";\n\nexport enum ModalType {\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: litRender,\n  styles: [\n    Popup.styles,\n    getEffectiveScrollbarStyle(),\n    PopupsCommonCss,\n    dialogCSS,\n    ModalCss,\n  ],\n  dependencies: [Bar, Icon],\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({ defaultValue: ModalType.default })\n    type!: `${ModalType}`;\n}\n\nUDExModal.define();\n\nexport default UDExModal;\n"]}

package/dist/Pagination.d.ts

@@ -0,0 +1,105 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import "@ui5/webcomponents-icons/dist/open-command-field.js";
+import "@ui5/webcomponents-icons/dist/close-command-field.js";
+interface Page {
+    value: number;
+    active: boolean;
+}
+export declare enum PaginationType {
+    full = "full",
+    short = "short"
+}
+export declare enum DisplayType {
+    desktop = "desktop",
+    mobile = "mobile"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>udex-pagination</code> component is a pagination component used to navigate thought the pages.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-pagination
+ * @public
+ */
+declare class UDExPagination extends UI5Element {
+    /**
+     * Defines number of pages.
+     *
+     * @public
+     */
+    pages?: number;
+    /**
+     * Defines type of pagination.
+     *
+     * @public
+     * @default "full"
+     */
+    type?: `${PaginationType}`;
+    /**
+     * Define display purpose.
+     *
+     * @public
+     * @default "desktop"
+     */
+    display?: `${DisplayType}`;
+    /**
+     * Define if arrow icons for last and first page are visible.
+     *
+     * @public
+     */
+    absoluteNavigation: boolean;
+    /**
+     * Current index of pagination page.
+     * @public
+     * @default 0
+     */
+    currentPageIndex: number;
+    /**
+     * Defines direction of the input.
+     *
+     * @private
+     */
+    _direction?: string;
+    _pages: Page[];
+    _previousPageElement?: HTMLElement;
+    _mobileDisplayNumber: number;
+    static i18nBundle: I18nBundle;
+    constructor();
+    get nextButtonDisbled(): boolean;
+    get prevButtonDisbled(): boolean;
+    get typeFull(): boolean;
+    get typeShort(): boolean;
+    get shortTextStart(): string;
+    get shortTextEnd(): string;
+    get shortTextSeparator(): string;
+    get pageAccessibleName(): string;
+    get paginationShortAccessibleName(): string;
+    get activatePageAccessibleText(): string;
+    get firstPageAccessibleName(): string;
+    get lastPageAccessibleName(): string;
+    get previousPageAccessibleName(): string;
+    get nextPageAccessibleName(): string;
+    get pagination(): Page[];
+    get paginationClass(): string;
+    static onDefine(): Promise<void>;
+    setActive(element: HTMLElement): void;
+    setNextPage(e: Event): void;
+    setPrevPage(e: Event): void;
+    setFirstPage(e: Event): void;
+    setLastPage(e: Event): void;
+    setupMobilePages(pages: number): Page[];
+    setupDesktopPages(pages: number): Page[];
+    setupPages(pages?: number): Page[];
+    onPageClick(e: Event): void;
+    emitChangeEvent(): void;
+    onAfterRendering(): void;
+}
+export default UDExPagination;