@ui5/webcomponents 0.0.0-037d08c67

package/dist/MessageStrip.js

@@ -0,0 +1,188 @@
+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 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-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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;
+(function (DesignClassesMapping) {
+    DesignClassesMapping["Information"] = "ui5-message-strip-root--info";
+    DesignClassesMapping["Positive"] = "ui5-message-strip-root--positive";
+    DesignClassesMapping["Negative"] = "ui5-message-strip-root--negative";
+    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 = {}));
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * 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
+ * an icon in the beginning and a close button. Moreover, its size and background
+ * can be controlled with CSS.
+ *
+ * ### Keyboard Handling
+ *
+ * #### 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:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/MessageStrip.js";`
+ * @constructor
+ * @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 {
+    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;
+    }
+    _closeClick() {
+        this.fireDecoratorEvent("close");
+    }
+    static designAnnouncementMappings() {
+        const getTranslation = (text) => {
+            return MessageStrip_1.i18nBundle.getText(text);
+        };
+        return {
+            Information: getTranslation(MESSAGE_STRIP_INFORMATION),
+            Positive: getTranslation(MESSAGE_STRIP_SUCCESS),
+            Negative: getTranslation(MESSAGE_STRIP_ERROR),
+            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.closeButtonMappings()[this.design];
+    }
+    get _closableText() {
+        return MessageStrip_1.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
+    }
+    get iconProvided() {
+        return this.icon.length > 0;
+    }
+    get designClasses() {
+        return DesignClassesMapping[this.design];
+    }
+};
+__decorate([
+    property()
+], MessageStrip.prototype, "design", void 0);
+__decorate([
+    property()
+], MessageStrip.prototype, "colorScheme", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageStrip.prototype, "hideIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageStrip.prototype, "hideCloseButton", void 0);
+__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: jsxRenderer,
+        template: MessageStripTemplate,
+        styles: messageStripCss,
+    })
+    /**
+     * Fired when the close button is pressed either with a
+     * click/tap or by using the Enter or Space key.
+     * @public
+     */
+    ,
+    event("close")
+], MessageStrip);
+MessageStrip.define();
+export default MessageStrip;
+//# 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 UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } 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-strict.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!: Slot<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

@@ -0,0 +1,149 @@
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+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: number;
+    selected: boolean;
+    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 = {
+    timestamp: number;
+};
+/**
+ * Month picker component.
+ * @class
+ *
+ * Displays months which can be selected.
+ * @constructor
+ * @extends CalendarPart
+ * @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.
+     * @default []
+     */
+    selectedDates: Array<number>;
+    /**
+     * 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;
+    get roleDescription(): string;
+    onBeforeRendering(): void;
+    get rowSize(): 2 | 3;
+    _buildMonths(): void;
+    _getDisplayedSecondaryMonthText(timestamp: number): {
+        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;
+    /**
+     * Sets the timestamp to an absolute value.
+     * @param value
+     * @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;
+    /**
+     * Sets the focus reference to the month that was clicked with mousedown.
+     * @param e
+     * @private
+     */
+    _onmousedown(e: MouseEvent): void;
+    /**
+     * Modifies timestamp by a given amount of months and,
+     * if necessary, loads the prev/next page.
+     * @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 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
+     */
+    _hasPreviousPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * @protected
+     */
+    _hasNextPage(): boolean;
+    /**
+     * Called by Calendar.js.
+     *
+     * **Note:** when the user presses the "<" button in the calendar header (same as "PageUp")
+     * @protected
+     */
+    _showPreviousPage(): void;
+    /**
+     * Called by Calendar.js
+     * **Note:** when the user presses the ">" button in the calendar header (same as "PageDown")
+     * @protected
+     */
+    _showNextPage(): void;
+    _isOutOfSelectableRange(date: CalendarDate, minDate: CalendarDate, maxDate: CalendarDate): boolean;
+}
+export default MonthPicker;
+export type { MonthPickerNavigateEventDetail, MonthPickerChangeEventDetail, };