@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/MessageStrip.js

@@ -8,20 +8,12 @@ var MessageStrip_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/information.js";
-import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
-import "@ui5/webcomponents-icons/dist/error.js";
-import "@ui5/webcomponents-icons/dist/alert.js";
-import MessageStripDesign from "./types/MessageStripDesign.js";
-import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
-import Icon from "./Icon.js";
-import Button from "./Button.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON, MESSAGE_STRIP_CLOSABLE, MESSAGE_STRIP_ERROR, MESSAGE_STRIP_WARNING, MESSAGE_STRIP_SUCCESS, MESSAGE_STRIP_INFORMATION, } from "./generated/i18n/i18n-defaults.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import MessageStripTemplate from "./MessageStripTemplate.js";
+import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE, MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE, MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM, MESSAGE_STRIP_CLOSABLE, MESSAGE_STRIP_ERROR, MESSAGE_STRIP_WARNING, MESSAGE_STRIP_SUCCESS, MESSAGE_STRIP_INFORMATION, MESSAGE_STRIP_CUSTOM, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import messageStripCss from "./generated/themes/MessageStrip.css.js";
 var DesignClassesMapping;
@@ -29,24 +21,20 @@ var DesignClassesMapping;
     DesignClassesMapping["Information"] = "ui5-message-strip-root--info";
     DesignClassesMapping["Positive"] = "ui5-message-strip-root--positive";
     DesignClassesMapping["Negative"] = "ui5-message-strip-root--negative";
-    DesignClassesMapping["Warning"] = "ui5-message-strip-root--warning";
+    DesignClassesMapping["Critical"] = "ui5-message-strip-root--critical";
+    DesignClassesMapping["ColorSet1"] = "ui5-message-strip-root--color-set-1";
+    DesignClassesMapping["ColorSet2"] = "ui5-message-strip-root--color-set-2";
 })(DesignClassesMapping || (DesignClassesMapping = {}));
-var IconMapping;
-(function (IconMapping) {
-    IconMapping["Information"] = "information";
-    IconMapping["Positive"] = "sys-enter-2";
-    IconMapping["Negative"] = "error";
-    IconMapping["Warning"] = "alert";
-})(IconMapping || (IconMapping = {}));
 /**
  * @class
  *
  * ### Overview
  *
- * The `ui5-message-strip` component enables the embedding of app-related messages.
- * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
- * Each message can have a Close button, so that it can be removed from the UI, if needed.
- *
+ * The ui5-message-strip component allows for the embedding of application-related messages.
+ * It supports four semantic designs, each with its own color and icon: "Information", "Positive", "Critical", and "Negative".
+ * Additionally, users can choose from two color sets ("ColorSet1" and "ColorSet2"), each containing 10 predefined color schemes.
+ * Each message shows a "Close" button, so that it can be removed from the UI, if needed.
+
  * ### Usage
  *
  * For the `ui5-message-strip` component, you can define whether it displays
@@ -73,11 +61,45 @@ var IconMapping;
  * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
  */
 let MessageStrip = MessageStrip_1 = class MessageStrip extends UI5Element {
-    _closeClick() {
-        this.fireEvent("close");
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the component type.
+         * @default "Information"
+         * @public
+         * @since 1.0.0-rc.15
+         */
+        this.design = "Information";
+        /**
+         * Defines the color scheme of the component.
+         * There are 10 predefined schemes.
+         * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+         *
+         * @default "1"
+         * @public
+         * @since 2.0.0
+         */
+        this.colorScheme = "1";
+        /**
+         * Defines whether the MessageStrip will show an icon in the beginning.
+         * You can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.
+         *
+         *  * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.
+         *
+         * @default false
+         * @public
+         * @since 1.0.0-rc.15
+         */
+        this.hideIcon = false;
+        /**
+         * Defines whether the MessageStrip renders close button.
+         * @default false
+         * @public
+         */
+        this.hideCloseButton = false;
     }
-    static async onDefine() {
-        MessageStrip_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    _closeClick() {
+        this.fireDecoratorEvent("close");
     }
     static designAnnouncementMappings() {
         const getTranslation = (text) => {
@@ -87,44 +109,52 @@ let MessageStrip = MessageStrip_1 = class MessageStrip extends UI5Element {
             Information: getTranslation(MESSAGE_STRIP_INFORMATION),
             Positive: getTranslation(MESSAGE_STRIP_SUCCESS),
             Negative: getTranslation(MESSAGE_STRIP_ERROR),
-            Warning: getTranslation(MESSAGE_STRIP_WARNING),
+            Critical: getTranslation(MESSAGE_STRIP_WARNING),
+            ColorSet1: getTranslation(MESSAGE_STRIP_CUSTOM),
+            ColorSet2: getTranslation(MESSAGE_STRIP_CUSTOM),
         };
     }
     get hiddenText() {
         return `${MessageStrip_1.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
     }
+    get shouldHideIcon() {
+        if (this.designClasses === DesignClassesMapping.ColorSet1 || this.designClasses === DesignClassesMapping.ColorSet2) {
+            return this.hideIcon || this.icon.length === 0;
+        }
+        return this.hideIcon;
+    }
+    static closeButtonMappings() {
+        const getTranslation = (text) => {
+            return MessageStrip_1.i18nBundle.getText(text);
+        };
+        return {
+            Information: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION),
+            Positive: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE),
+            Negative: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE),
+            Critical: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL),
+            ColorSet1: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),
+            ColorSet2: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),
+        };
+    }
     get _closeButtonText() {
-        return MessageStrip_1.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
+        return MessageStrip_1.closeButtonMappings()[this.design];
     }
     get _closableText() {
         return MessageStrip_1.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
     }
-    get classes() {
-        return {
-            root: {
-                "ui5-message-strip-root": true,
-                "ui5-message-strip-root-hide-icon": this.hideIcon,
-                "ui5-message-strip-root-hide-close-button": this.hideCloseButton,
-                [this.designClasses]: true,
-            },
-        };
-    }
     get iconProvided() {
         return this.icon.length > 0;
     }
-    get standardIconName() {
-        return IconMapping[this.design];
-    }
     get designClasses() {
         return DesignClassesMapping[this.design];
     }
 };
 __decorate([
-    property({
-        type: MessageStripDesign,
-        defaultValue: MessageStripDesign.Information,
-    })
+    property()
 ], MessageStrip.prototype, "design", void 0);
+__decorate([
+    property()
+], MessageStrip.prototype, "colorScheme", void 0);
 __decorate([
     property({ type: Boolean })
 ], MessageStrip.prototype, "hideIcon", void 0);
@@ -134,14 +164,16 @@ __decorate([
 __decorate([
     slot()
 ], MessageStrip.prototype, "icon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], MessageStrip, "i18nBundle", void 0);
 MessageStrip = MessageStrip_1 = __decorate([
     customElement({
         tag: "ui5-message-strip",
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: MessageStripTemplate,
         styles: messageStripCss,
-        dependencies: [Icon, Button],
     })
     /**
      * Fired when the close button is pressed either with a

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 UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport MessageStripDesign from \"./types/MessageStripDesign.js\";\nimport MessageStripTemplate from \"./generated/templates/MessageStripTemplate.lit.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport Icon from \"./Icon.js\";\nimport Button from \"./Button.js\";\nimport {\n\tMESSAGE_STRIP_CLOSE_BUTTON,\n\tMESSAGE_STRIP_CLOSABLE,\n\tMESSAGE_STRIP_ERROR,\n\tMESSAGE_STRIP_WARNING,\n\tMESSAGE_STRIP_SUCCESS,\n\tMESSAGE_STRIP_INFORMATION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport messageStripCss from \"./generated/themes/MessageStrip.css.js\";\n\nenum DesignClassesMapping {\n\tInformation = \"ui5-message-strip-root--info\",\n\tPositive = \"ui5-message-strip-root--positive\",\n\tNegative = \"ui5-message-strip-root--negative\",\n\tWarning = \"ui5-message-strip-root--warning\",\n}\n\nenum IconMapping {\n\tInformation = \"information\",\n\tPositive = \"sys-enter-2\",\n\tNegative = \"error\",\n\tWarning = \"alert\",\n}\n\ntype DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-message-strip` component enables the embedding of app-related messages.\n * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.\n * Each message can have a Close button, so that it can be removed from the UI, if needed.\n *\n * ### Usage\n *\n * For the `ui5-message-strip` component, you can define whether it displays\n * an icon in the beginning and a close button. Moreover, its size and background\n * can be controlled with CSS.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MessageStrip.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.9.0\n * @slot {Array<Node>} default\n * Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n */\n@customElement({\n\ttag: \"ui5-message-strip\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: MessageStripTemplate,\n\tstyles: messageStripCss,\n\tdependencies: [Icon, Button],\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 * @public\n */\n@event(\"close\")\n\nclass MessageStrip extends UI5Element {\n\t/**\n\t * Defines the component type.\n\t * @default \"Information\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({\n\t\ttype: MessageStripDesign,\n\t\tdefaultValue: MessageStripDesign.Information,\n\t})\n\tdesign!: `${MessageStripDesign}`;\n\n\t/**\n\t * Defines whether the MessageStrip will show an icon in the beginning.\n\t * You can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\thideIcon!: boolean;\n\n\t/**\n\t * Defines whether the MessageStrip renders close button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideCloseButton!: boolean;\n\n\t/**\n\t * Defines the content to be displayed as graphical element within the component.\n\t *\n\t * **Note:** If no icon is given, the default icon for the component type will be used.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @public\n\t */\n\t@slot()\n\ticon!: Array<IIcon>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\t_closeClick() {\n\t\tthis.fireEvent(\"close\");\n\t}\n\n\tstatic async onDefine() {\n\t\tMessageStrip.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tstatic designAnnouncementMappings(): DesignTypeAnnouncemnt {\n\t\tconst getTranslation = (text:I18nText): string => {\n\t\t\treturn MessageStrip.i18nBundle.getText(text);\n\t\t};\n\n\t\treturn {\n\t\t\tInformation: getTranslation(MESSAGE_STRIP_INFORMATION),\n\t\t\tPositive: getTranslation(MESSAGE_STRIP_SUCCESS),\n\t\t\tNegative: getTranslation(MESSAGE_STRIP_ERROR),\n\t\t\tWarning: getTranslation(MESSAGE_STRIP_WARNING),\n\t\t};\n\t}\n\n\tget hiddenText() {\n\t\treturn `${MessageStrip.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? \"\" : this._closableText}`;\n\t}\n\n\tget _closeButtonText() {\n\t\treturn MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);\n\t}\n\n\tget _closableText() {\n\t\treturn MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);\n\t}\n\n\tget classes(): ClassMap {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-message-strip-root\": true,\n\t\t\t\t\"ui5-message-strip-root-hide-icon\": this.hideIcon,\n\t\t\t\t\"ui5-message-strip-root-hide-close-button\": this.hideCloseButton,\n\t\t\t\t[this.designClasses]: true,\n\t\t\t},\n\t\t};\n\t}\n\n\tget iconProvided() {\n\t\treturn this.icon.length > 0;\n\t}\n\n\tget standardIconName() {\n\t\treturn IconMapping[this.design];\n\t}\n\n\tget designClasses() {\n\t\treturn DesignClassesMapping[this.design];\n\t}\n}\n\nMessageStrip.define();\n\nexport default MessageStrip;\n"]}
+{"version":3,"file":"MessageStrip.js","sourceRoot":"","sources":["../src/MessageStrip.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.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 customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type MessageStripDesign from \"./types/MessageStripDesign.js\";\nimport MessageStripTemplate from \"./MessageStripTemplate.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport {\n\tMESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,\n\tMESSAGE_STRIP_CLOSE_BUTTON_POSITIVE,\n\tMESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE,\n\tMESSAGE_STRIP_CLOSE_BUTTON_CRITICAL,\n\tMESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,\n\tMESSAGE_STRIP_CLOSABLE,\n\tMESSAGE_STRIP_ERROR,\n\tMESSAGE_STRIP_WARNING,\n\tMESSAGE_STRIP_SUCCESS,\n\tMESSAGE_STRIP_INFORMATION,\n\tMESSAGE_STRIP_CUSTOM,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport messageStripCss from \"./generated/themes/MessageStrip.css.js\";\n\nenum DesignClassesMapping {\n\tInformation = \"ui5-message-strip-root--info\",\n\tPositive = \"ui5-message-strip-root--positive\",\n\tNegative = \"ui5-message-strip-root--negative\",\n\tCritical = \"ui5-message-strip-root--critical\",\n\tColorSet1 = \"ui5-message-strip-root--color-set-1\",\n\tColorSet2 = \"ui5-message-strip-root--color-set-2\",\n}\n\ntype DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;\n\ntype DesignCloseButtonTooltip = Record<MessageStripDesign, string>;\n\n/**\n * @class\n *\n * ### Overview\n *\n * The ui5-message-strip component allows for the embedding of application-related messages.\n * It supports four semantic designs, each with its own color and icon: \"Information\", \"Positive\", \"Critical\", and \"Negative\".\n * Additionally, users can choose from two color sets (\"ColorSet1\" and \"ColorSet2\"), each containing 10 predefined color schemes.\n * Each message shows a \"Close\" button, so that it can be removed from the UI, if needed.\n\n * ### Usage\n *\n * For the `ui5-message-strip` component, you can define whether it displays\n * an icon in the beginning and a close button. Moreover, its size and background\n * can be controlled with CSS.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/MessageStrip.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 0.9.0\n * @slot {Array<Node>} default\n * Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n */\n@customElement({\n\ttag: \"ui5-message-strip\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: MessageStripTemplate,\n\tstyles: messageStripCss,\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 * @public\n */\n@event(\"close\")\n\nclass MessageStrip extends UI5Element {\n\teventDetails!: {\n\t\tclose: void;\n\t}\n\t/**\n\t * Defines the component type.\n\t * @default \"Information\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tdesign: `${MessageStripDesign}` = \"Information\";\n\n\t/**\n\t * Defines the color scheme of the component.\n\t * There are 10 predefined schemes.\n\t * To use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\t *\n\t * @default \"1\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tcolorScheme = \"1\"\n\n\t/**\n\t * Defines whether the MessageStrip will show an icon in the beginning.\n\t * You can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.\n\t *\n\t *  * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.\n\t *\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\thideIcon = false\n\n\t/**\n\t * Defines whether the MessageStrip renders close button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideCloseButton = false;\n\n\t/**\n\t * Defines the content to be displayed as graphical element within the component.\n\t *\n\t * **Note:** If no icon is given, the default icon for the component type will be used.\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @public\n\t */\n\t@slot()\n\ticon!: Array<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_closeClick() {\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\tstatic designAnnouncementMappings(): DesignTypeAnnouncemnt {\n\t\tconst getTranslation = (text:I18nText): string => {\n\t\t\treturn MessageStrip.i18nBundle.getText(text);\n\t\t};\n\n\t\treturn {\n\t\t\tInformation: getTranslation(MESSAGE_STRIP_INFORMATION),\n\t\t\tPositive: getTranslation(MESSAGE_STRIP_SUCCESS),\n\t\t\tNegative: getTranslation(MESSAGE_STRIP_ERROR),\n\t\t\tCritical: getTranslation(MESSAGE_STRIP_WARNING),\n\t\t\tColorSet1: getTranslation(MESSAGE_STRIP_CUSTOM),\n\t\t\tColorSet2: getTranslation(MESSAGE_STRIP_CUSTOM),\n\t\t};\n\t}\n\n\tget hiddenText() {\n\t\treturn `${MessageStrip.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? \"\" : this._closableText}`;\n\t}\n\n\tget shouldHideIcon() {\n\t\tif (this.designClasses === DesignClassesMapping.ColorSet1 || this.designClasses === DesignClassesMapping.ColorSet2) {\n\t\t\treturn this.hideIcon || this.icon.length === 0;\n\t\t}\n\n\t\treturn this.hideIcon;\n\t}\n\n\tstatic closeButtonMappings(): DesignCloseButtonTooltip {\n\t\tconst getTranslation = (text:I18nText): string => {\n\t\t\treturn MessageStrip.i18nBundle.getText(text);\n\t\t};\n\n\t\treturn {\n\t\t\tInformation: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION),\n\t\t\tPositive: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE),\n\t\t\tNegative: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE),\n\t\t\tCritical: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL),\n\t\t\tColorSet1: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),\n\t\t\tColorSet2: getTranslation(MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM),\n\t\t};\n\t}\n\n\tget _closeButtonText() {\n\t\treturn MessageStrip.closeButtonMappings()[this.design];\n\t}\n\n\tget _closableText() {\n\t\treturn MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);\n\t}\n\n\tget iconProvided() {\n\t\treturn this.icon.length > 0;\n\t}\n\n\tget designClasses() {\n\t\treturn DesignClassesMapping[this.design];\n\t}\n}\n\nMessageStrip.define();\n\nexport default MessageStrip;\n"]}

package/dist/MessageStripTemplate.d.ts

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

package/dist/MessageStripTemplate.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import MessageStripDesign from "./types/MessageStripDesign.js";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+export default function MessageStripTemplate() {
+    return (_jsxs("div", { id: this._id, class: {
+            "ui5-message-strip-root": true,
+            "ui5-message-strip-root-hide-icon": this.shouldHideIcon,
+            "ui5-message-strip-root-hide-close-button": this.hideCloseButton,
+            [this.designClasses]: true,
+        }, role: "note", "aria-labelledby": "hidden-text content-text", children: [!this.shouldHideIcon &&
+                _jsx("div", { class: "ui5-message-strip-icon-wrapper", "aria-hidden": "true", children: this.iconProvided ?
+                        _jsx("slot", { name: "icon" })
+                        :
+                            _jsx(Icon, { name: standardIconName.call(this), class: "ui5-message-strip-icon" }) }), _jsx("span", { class: "ui5-hidden-text", id: "hidden-text", children: this.hiddenText }), _jsx("span", { class: "ui5-message-strip-text", id: "content-text", children: _jsx("slot", {}) }), !this.hideCloseButton &&
+                _jsx(Button, { icon: decline, design: "Transparent", class: "ui5-message-strip-close-button", tooltip: this._closeButtonText, accessibleName: this._closeButtonText, onClick: this._closeClick })] }));
+}
+function standardIconName() {
+    switch (this.design) {
+        case MessageStripDesign.Critical:
+            return alert;
+        case MessageStripDesign.Positive:
+            return sysEnter2;
+        case MessageStripDesign.Negative:
+            return error;
+        case MessageStripDesign.Information:
+            return information;
+        default:
+            return undefined;
+    }
+}
+//# sourceMappingURL=MessageStripTemplate.js.map

package/dist/MessageStripTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStripTemplate.js","sourceRoot":"","sources":["../src/MessageStripTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAC/D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,SAAS,MAAM,8CAA8C,CAAC;AACrE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,eACC,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,KAAK,EAAE;YACN,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,cAAc;YACvD,0CAA0C,EAAE,IAAI,CAAC,eAAe;YAChE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;SAC1B,EACD,IAAI,EAAC,MAAM,qBACK,0BAA0B,aAGzC,CAAC,IAAI,CAAC,cAAc;gBACpB,cAAK,KAAK,EAAC,gCAAgC,iBAAa,MAAM,YAC5D,IAAI,CAAC,YAAY,CAAC,CAAC;wBACnB,eAAM,IAAI,EAAC,MAAM,GAAQ;wBACzB,CAAC;4BACD,KAAC,IAAI,IAAC,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,wBAAwB,GAAE,GAErE,EAGP,eAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAC,aAAa,YAAE,IAAI,CAAC,UAAU,GAAQ,EACvE,eAAM,KAAK,EAAC,wBAAwB,EAAC,EAAE,EAAC,cAAc,YAAC,gBAAa,GAAO,EAE1E,CAAC,IAAI,CAAC,eAAe;gBACrB,KAAC,MAAM,IACN,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,cAAc,EAAE,IAAI,CAAC,gBAAgB,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,GACxB,IAEE,CACN,CAAC;AACH,CAAC;AAED,SAAS,gBAAgB;IACxB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,KAAK,kBAAkB,CAAC,QAAQ;YAC/B,OAAO,KAAK,CAAC;QACd,KAAK,kBAAkB,CAAC,QAAQ;YAC/B,OAAO,SAAS,CAAC;QAClB,KAAK,kBAAkB,CAAC,QAAQ;YAC/B,OAAO,KAAK,CAAC;QACd,KAAK,kBAAkB,CAAC,WAAW;YAClC,OAAO,WAAW,CAAC;QACpB;YACC,OAAO,SAAS,CAAC;IAClB,CAAC;AACF,CAAC","sourcesContent":["import type MessageStrip from \"./MessageStrip.js\";\nimport MessageStripDesign from \"./types/MessageStripDesign.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport information from \"@ui5/webcomponents-icons/dist/information.js\";\nimport sysEnter2 from \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport error from \"@ui5/webcomponents-icons/dist/error.js\";\nimport alert from \"@ui5/webcomponents-icons/dist/alert.js\";\n\nexport default function MessageStripTemplate(this: MessageStrip) {\n\treturn (\n\t\t<div\n\t\t\tid={this._id}\n\t\t\tclass={{\n\t\t\t\t\"ui5-message-strip-root\": true,\n\t\t\t\t\"ui5-message-strip-root-hide-icon\": this.shouldHideIcon,\n\t\t\t\t\"ui5-message-strip-root-hide-close-button\": this.hideCloseButton,\n\t\t\t\t[this.designClasses]: true,\n\t\t\t}}\n\t\t\trole=\"note\"\n\t\t\taria-labelledby=\"hidden-text content-text\"\n\t\t>\n\n\t\t\t{!this.shouldHideIcon &&\n\t\t\t\t<div class=\"ui5-message-strip-icon-wrapper\" aria-hidden=\"true\">\n\t\t\t\t\t{this.iconProvided ?\n\t\t\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Icon name={standardIconName.call(this)} class=\"ui5-message-strip-icon\"/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<span class=\"ui5-hidden-text\" id=\"hidden-text\">{this.hiddenText}</span>\n\t\t\t<span class=\"ui5-message-strip-text\" id=\"content-text\"><slot></slot></span>\n\n\t\t\t{!this.hideCloseButton &&\n\t\t\t\t<Button\n\t\t\t\t\ticon={decline}\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tclass=\"ui5-message-strip-close-button\"\n\t\t\t\t\ttooltip={this._closeButtonText}\n\t\t\t\t\taccessibleName={this._closeButtonText}\n\t\t\t\t\tonClick={this._closeClick}\n\t\t\t\t/>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction standardIconName(this: MessageStrip) {\n\tswitch (this.design) {\n\tcase MessageStripDesign.Critical:\n\t\treturn alert;\n\tcase MessageStripDesign.Positive:\n\t\treturn sysEnter2;\n\tcase MessageStripDesign.Negative:\n\t\treturn error;\n\tcase MessageStripDesign.Information:\n\t\treturn information;\n\tdefault:\n\t\treturn undefined;\n\t}\n}\n"]}

package/dist/MonthPicker.d.ts

@@ -2,19 +2,23 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CalendarPart from "./CalendarPart.js";
 import type { ICalendarPicker } from "./Calendar.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 type Month = {
     timestamp: string;
     focusRef: boolean;
-    _tabIndex: string;
+    _tabIndex: number;
     selected: boolean;
-    ariaSelected: string;
+    ariaSelected: boolean;
     name: string;
     nameInSecType: string;
     disabled: boolean;
+    ariaDisabled: boolean | undefined;
     classes: string;
+    parts: string;
 };
 type MonthInterval = Array<Array<Month>>;
 type MonthPickerChangeEventDetail = {
+    dates: Array<number>;
     timestamp: number;
 };
 type MonthPickerNavigateEventDetail = {
@@ -30,17 +34,37 @@ type MonthPickerNavigateEventDetail = {
  * @private
  */
 declare class MonthPicker extends CalendarPart implements ICalendarPicker {
+    eventDetails: CalendarPart["eventDetails"] & {
+        change: MonthPickerChangeEventDetail;
+        navigate: MonthPickerNavigateEventDetail;
+    };
     /**
      * An array of UTC timestamps representing the selected date
      * or dates depending on the capabilities of the picker component.
-     * @public
      * @default []
      */
     selectedDates: Array<number>;
-    _months: MonthInterval;
+    /**
+     * Defines the type of selection used in the month picker component.
+     * Accepted property values are:
+     *
+     * - `CalendarSelectionMode.Single` - enables election of a single month.
+     * - `CalendarSelectionMode.Range` - enables selection of a month range.
+     *
+     * Note that 'CalendarSelectionMode.Multiple` is not supported for Month Picker!
+     * @default "Single"
+     * @since 2.2.0
+     */
+    selectionMode: `${CalendarSelectionMode}`;
+    _monthsInterval: MonthInterval;
     _hidden: boolean;
+    /**
+     * When selectionMode="Range" and the first month in the range is selected, this is the currently hovered or focused month.
+     *
+     * @private
+     */
+    _secondTimestamp?: number;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     get roleDescription(): string;
     onBeforeRendering(): void;
     onAfterRendering(): void;
@@ -50,6 +74,11 @@ declare class MonthPicker extends CalendarPart implements ICalendarPicker {
         text: any;
         textInfo: any;
     };
+    /**
+      * Returns true if month timestamp is inside the selection range.
+      * @private
+      */
+    _isMonthInsideSelectionRange(timestamp: number): boolean;
     _onkeydown(e: KeyboardEvent): void;
     _onHomeOrEnd(homePressed: boolean): void;
     /**
@@ -58,6 +87,18 @@ declare class MonthPicker extends CalendarPart implements ICalendarPicker {
      * @private
      */
     _setTimestamp(value: number): void;
+    /**
+     * In range selection, the currently focused or hovered month is considered the "second day".
+     * @private
+     */
+    _updateSecondTimestamp(): void;
+    /**
+     * Set the hovered day as the "_secondTimestamp".
+     *
+     * @param e
+     * @private
+     */
+    _onmouseover(e: MouseEvent): void;
     /**
      * Modifies timestamp by a given amount of months and,
      * if necessary, loads the prev/next page.
@@ -68,11 +109,12 @@ declare class MonthPicker extends CalendarPart implements ICalendarPicker {
     _modifyTimestampBy(amount: number, preserveDate?: boolean): void;
     _onkeyup(e: KeyboardEvent): void;
     /**
-     * Selects a month, when the user clicks or presses "Enter" or "Space".
+     * Selects a month, when user made selection with mouse or using Space/Enter.
      * @param e
      * @private
      */
     _selectMonth(e: Event): void;
+    _updateSelectedDates(timestamp: number): void;
     /**
      * Called by the Calendar component.
      * @protected