@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/MessageStrip.d.ts

@@ -7,111 +7,95 @@ 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 Icon from "./Icon.js";
+import type { IIcon } from "./Icon.js";
 declare enum DesignClassesMapping {
     Information = "ui5-message-strip-root--info",
     Positive = "ui5-message-strip-root--positive",
     Negative = "ui5-message-strip-root--negative",
-    Warning = "ui5-message-strip-root--warning"
-}
-declare enum IconMapping {
-    Information = "information",
-    Positive = "sys-enter-2",
-    Negative = "error",
-    Warning = "alert"
+    Critical = "ui5-message-strip-root--critical",
+    ColorSet1 = "ui5-message-strip-root--color-set-1",
+    ColorSet2 = "ui5-message-strip-root--color-set-2"
 }
 type DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-message-strip</code> 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.
+ * 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, Critical and Negative.
  * Each message can have a Close button, so that it can be removed from the UI, if needed.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * For the <code>ui5-message-strip</code> component, you can define whether it displays
+ * For the `ui5-message-strip` component, you can define whether it displays
  * an icon in the beginning and a close button. Moreover, its size and background
  * can be controlled with CSS.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * 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].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
- *
- * <h3>ES6 Module Import</h3>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents/dist/MessageStrip";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/MessageStrip.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MessageStrip
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-message-strip
+ * @extends UI5Element
  * @public
  * @since 0.9.0
+ * @slot {Array<Node>} default
+ * Defines the text of the component.
+ *
+ * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
  */
 declare class MessageStrip extends UI5Element {
     /**
      * Defines the component type.
-     *
-     * @type {sap.ui.webc.main.types.MessageStripDesign}
-     * @name sap.ui.webc.main.MessageStrip.prototype.design
-     * @defaultvalue "Information"
+     * @default "Information"
      * @public
      * @since 1.0.0-rc.15
      */
     design: `${MessageStripDesign}`;
+    /**
+     * 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
+     */
+    colorScheme: string;
     /**
      * Defines whether the MessageStrip will show an icon in the beginning.
-     * You can directly provide an icon with the <code>icon</code> slot. Otherwise, the default icon for the type will be used.
+     * You can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.MessageStrip.prototype.hideIcon
-     * @defaultvalue false
+     *  * **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
      */
     hideIcon: boolean;
     /**
      * Defines whether the MessageStrip renders close button.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.MessageStrip.prototype.hideCloseButton
-     * @defaultvalue false
+     * @default false
      * @public
      */
     hideCloseButton: boolean;
-    /**
-     * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-     *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.MessageStrip.prototype.default
-     * @slot
-     * @public
-     */
     /**
      * Defines the content to be displayed as graphical element within the component.
-     * <br><br>
-     * <b>Note:</b> If no icon is given, the default icon for the component type will be used.
-     * The SAP-icons font provides numerous options.
-     * <br><br>
      *
-     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     * **Note:** If no icon is given, the default icon for the component type will be used.
+     * The SAP-icons font provides numerous options.
      *
-     * @type {sap.ui.webc.main.IIcon}
-     * @name sap.ui.webc.main.MessageStrip.prototype.icon
-     * @slot
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @public
      */
-    icon: Array<Icon>;
+    icon: Array<IIcon>;
     static i18nBundle: I18nBundle;
     _closeClick(): void;
     static onDefine(): Promise<void>;
@@ -121,7 +105,7 @@ declare class MessageStrip extends UI5Element {
     get _closableText(): string;
     get classes(): ClassMap;
     get iconProvided(): boolean;
-    get standardIconName(): IconMapping;
+    get standardIconName(): "error" | "alert" | "sys-enter-2" | "information" | null;
     get designClasses(): DesignClassesMapping;
 }
 export default MessageStrip;

package/dist/MessageStrip.js

@@ -21,7 +21,7 @@ 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 { MESSAGE_STRIP_CLOSE_BUTTON, 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,49 +29,43 @@ 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
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-message-strip</code> 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.
+ * 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, Critical and Negative.
  * Each message can have a Close button, so that it can be removed from the UI, if needed.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * For the <code>ui5-message-strip</code> component, you can define whether it displays
+ * For the `ui5-message-strip` component, you can define whether it displays
  * an icon in the beginning and a close button. Moreover, its size and background
  * can be controlled with CSS.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * 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].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/MessageStrip";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/MessageStrip.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MessageStrip
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-message-strip
+ * @extends UI5Element
  * @public
  * @since 0.9.0
+ * @slot {Array<Node>} default
+ * Defines the text of the component.
+ *
+ * **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() {
@@ -88,7 +82,9 @@ 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() {
@@ -114,7 +110,18 @@ let MessageStrip = MessageStrip_1 = class MessageStrip extends UI5Element {
         return this.icon.length > 0;
     }
     get standardIconName() {
-        return IconMapping[this.design];
+        switch (this.design) {
+            case MessageStripDesign.Critical:
+                return "alert";
+            case MessageStripDesign.Positive:
+                return "sys-enter-2";
+            case MessageStripDesign.Negative:
+                return "error";
+            case MessageStripDesign.Information:
+                return "information";
+            default:
+                return null;
+        }
     }
     get designClasses() {
         return DesignClassesMapping[this.design];
@@ -126,6 +133,9 @@ __decorate([
         defaultValue: MessageStripDesign.Information,
     })
 ], MessageStrip.prototype, "design", void 0);
+__decorate([
+    property({ defaultValue: "1" })
+], MessageStrip.prototype, "colorScheme", void 0);
 __decorate([
     property({ type: Boolean })
 ], MessageStrip.prototype, "hideIcon", void 0);
@@ -147,8 +157,6 @@ MessageStrip = MessageStrip_1 = __decorate([
     /**
      * Fired when the close button is pressed either with a
      * click/tap or by using the Enter or Space key.
-     *
-     * @event sap.ui.webc.main.MessageStrip#close
      * @public
      */
     ,

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 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 * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-message-strip</code> 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 * <h3>Usage</h3>\n *\n * For the <code>ui5-message-strip</code> 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 * <h3>Keyboard Handling</h3>\n *\n * <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.MessageStrip\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-message-strip\n * @public\n * @since 0.9.0\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 *\n * @event sap.ui.webc.main.MessageStrip#close\n * @public\n */\n@event(\"close\")\n\nclass MessageStrip extends UI5Element {\n\t/**\n\t * Defines the component type.\n\t *\n\t * @type {sap.ui.webc.main.types.MessageStripDesign}\n\t * @name sap.ui.webc.main.MessageStrip.prototype.design\n\t * @defaultvalue \"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 <code>icon</code> slot. Otherwise, the default icon for the type will be used.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.MessageStrip.prototype.hideIcon\n\t * @defaultvalue 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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.MessageStrip.prototype.hideCloseButton\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideCloseButton!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * <br><br>\n\t * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t *\n\t * @type {Node[]}\n\t * @name sap.ui.webc.main.MessageStrip.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\t/**\n\t * Defines the content to be displayed as graphical element within the component.\n\t * <br><br>\n\t * <b>Note:</b> 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 * <br><br>\n\t *\n\t * See all the available icons in the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @type {sap.ui.webc.main.IIcon}\n\t * @name sap.ui.webc.main.MessageStrip.prototype.icon\n\t * @slot\n\t * @public\n\t */\n\t@slot()\n\ticon!: Array<Icon>;\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.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\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\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, Critical 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 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({ defaultValue: \"1\" })\n\tcolorScheme!: string;\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!: 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\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 _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\tswitch (this.design) {\n\t\tcase MessageStripDesign.Critical:\n\t\t\treturn \"alert\";\n\t\tcase MessageStripDesign.Positive:\n\t\t\treturn \"sys-enter-2\";\n\t\tcase MessageStripDesign.Negative:\n\t\t\treturn \"error\";\n\t\tcase MessageStripDesign.Information:\n\t\t\treturn \"information\";\n\t\tdefault:\n\t\t\treturn null;\n\t\t}\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/MonthPicker.d.ts

@@ -22,25 +22,19 @@ type MonthPickerNavigateEventDetail = {
 };
 /**
  * Month picker component.
- *
  * @class
  *
  * Displays months which can be selected.
- *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MonthPicker
- * @extends sap.ui.webc.main.CalendarPart
- * @tagname ui5-monthpicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
 declare class MonthPicker extends CalendarPart implements ICalendarPicker {
     /**
      * An array of UTC timestamps representing the selected date
      * or dates depending on the capabilities of the picker component.
-     * @type {array}
-     * @name sap.ui.webc.main.MonthPicker.prototype.selectedDates
      * @public
+     * @default []
      */
     selectedDates: Array<number>;
     _months: MonthInterval;
@@ -50,6 +44,7 @@ declare class MonthPicker extends CalendarPart implements ICalendarPicker {
     get roleDescription(): string;
     onBeforeRendering(): void;
     onAfterRendering(): void;
+    get rowSize(): 2 | 3;
     _buildMonths(): void;
     _getDisplayedSecondaryMonthText(timestamp: number): {
         text: any;
@@ -59,46 +54,45 @@ declare class MonthPicker extends CalendarPart implements ICalendarPicker {
     _onHomeOrEnd(homePressed: boolean): void;
     /**
      * Sets the timestamp to an absolute value.
-     * @param { number } value
+     * @param value
      * @private
      */
     _setTimestamp(value: number): void;
     /**
      * Modifies timestamp by a given amount of months and,
      * if necessary, loads the prev/next page.
-     * @param { number } amount
-     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @param amount
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
     _modifyTimestampBy(amount: number, preserveDate?: boolean): void;
     _onkeyup(e: KeyboardEvent): void;
     /**
      * Selects a month, when the user clicks or presses "Enter" or "Space".
-     * @param { Event } e
+     * @param e
      * @private
      */
     _selectMonth(e: Event): void;
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasPreviousPage(): boolean;
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasNextPage(): boolean;
     /**
      * Called by Calendar.js.
-     * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
+     *
+     * **Note:** when the user presses the "<" button in the calendar header (same as "PageUp")
      * @protected
      */
     _showPreviousPage(): void;
     /**
      * Called by Calendar.js
-     * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
+     * **Note:** when the user presses the ">" button in the calendar header (same as "PageDown")
      * @protected
      */
     _showNextPage(): void;

package/dist/MonthPicker.js

@@ -12,6 +12,7 @@ import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/ge
 import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
 import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import { isEnter, isSpace, isDown, isUp, isLeft, isRight, isHome, isEnd, isHomeCtrl, isEndCtrl, isPageUp, isPageDown, } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
@@ -23,20 +24,14 @@ import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.j
 // Styles
 import monthPickerStyles from "./generated/themes/MonthPicker.css.js";
 const PAGE_SIZE = 12; // total months on a single page
-const ROW_SIZE = 3; // months per row (4 rows of 3 months each)
 /**
  * Month picker component.
- *
  * @class
  *
  * Displays months which can be selected.
- *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.MonthPicker
- * @extends sap.ui.webc.main.CalendarPart
- * @tagname ui5-monthpicker
- * @public
+ * @extends CalendarPart
+ * @private
  */
 let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     static async onDefine() {
@@ -53,6 +48,10 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
             this.focus();
         }
     }
+    get rowSize() {
+        return (this.secondaryCalendarType === CalendarType.Islamic && this.primaryCalendarType !== CalendarType.Islamic)
+            || (this.secondaryCalendarType === CalendarType.Persian && this.primaryCalendarType !== CalendarType.Persian) ? 2 : 3;
+    }
     _buildMonths() {
         if (this._hidden) {
             return;
@@ -92,7 +91,7 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
             if (isDisabled) {
                 month.classes += " ui5-mp-item--disabled";
             }
-            const quarterIndex = Math.floor(i / ROW_SIZE);
+            const quarterIndex = Math.floor(i / this.rowSize);
             if (months[quarterIndex]) {
                 months[quarterIndex].push(month);
             }
@@ -121,10 +120,10 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
             this._modifyTimestampBy(1);
         }
         else if (isUp(e)) {
-            this._modifyTimestampBy(-ROW_SIZE);
+            this._modifyTimestampBy(-this.rowSize);
         }
         else if (isDown(e)) {
-            this._modifyTimestampBy(ROW_SIZE);
+            this._modifyTimestampBy(this.rowSize);
         }
         else if (isPageUp(e)) {
             this._modifyTimestampBy(-PAGE_SIZE);
@@ -139,7 +138,7 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
             this._setTimestamp(parseInt(this._months[0][0].timestamp)); // first month of first row
         }
         else if (isEndCtrl(e)) {
-            this._setTimestamp(parseInt(this._months[PAGE_SIZE / ROW_SIZE - 1][ROW_SIZE - 1].timestamp)); // last month of last row
+            this._setTimestamp(parseInt(this._months[PAGE_SIZE / this.rowSize - 1][this.rowSize - 1].timestamp)); // last month of last row
         }
         else {
             preventDefault = false;
@@ -152,14 +151,14 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
         this._months.forEach(row => {
             const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getMonth() === this._calendarDate.getMonth());
             if (indexInRow !== -1) { // The current month is on this row
-                const index = homePressed ? 0 : ROW_SIZE - 1; // select the first (if Home) or last (if End) month on the row
+                const index = homePressed ? 0 : this.rowSize - 1; // select the first (if Home) or last (if End) month on the row
                 this._setTimestamp(parseInt(row[index].timestamp));
             }
         });
     }
     /**
      * Sets the timestamp to an absolute value.
-     * @param { number } value
+     * @param value
      * @private
      */
     _setTimestamp(value) {
@@ -169,8 +168,8 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     /**
      * Modifies timestamp by a given amount of months and,
      * if necessary, loads the prev/next page.
-     * @param { number } amount
-     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @param amount
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
     _modifyTimestampBy(amount, preserveDate) {
@@ -186,7 +185,7 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     }
     /**
      * Selects a month, when the user clicks or presses "Enter" or "Space".
-     * @param { Event } e
+     * @param e
      * @private
      */
     _selectMonth(e) {
@@ -201,7 +200,6 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasPreviousPage() {
         return this._calendarDate.getYear() !== this._minDate.getYear();
@@ -209,14 +207,14 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     /**
      * Called by the Calendar component.
      * @protected
-     * @returns { boolean }
      */
     _hasNextPage() {
         return this._calendarDate.getYear() !== this._maxDate.getYear();
     }
     /**
      * Called by Calendar.js.
-     * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
+     *
+     * **Note:** when the user presses the "<" button in the calendar header (same as "PageUp")
      * @protected
      */
     _showPreviousPage() {
@@ -224,7 +222,7 @@ let MonthPicker = MonthPicker_1 = class MonthPicker extends CalendarPart {
     }
     /**
      * Called by Calendar.js
-     * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
+     * **Note:** when the user presses the ">" button in the calendar header (same as "PageDown")
      * @protected
      */
     _showNextPage() {
@@ -262,7 +260,6 @@ MonthPicker = MonthPicker_1 = __decorate([
     /**
      * Fired when the user selects a month via "Space", "Enter" or click.
      * @public
-     * @event sap.ui.webc.main.MonthPicker#change
      */
     ,
     event("change")
@@ -270,7 +267,6 @@ MonthPicker = MonthPicker_1 = __decorate([
      * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
      * @since 1.0.0-rc.9
      * @public
-     * @event sap.ui.webc.main.MonthPicker#navigate
      */
     ,
     event("navigate")