@ui5/webcomponents 2.10.0-rc.0 → 2.10.0-rc.2

package/dist/ListItemStandard.js

@@ -4,12 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var ListItemStandard_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import ListItem from "./ListItem.js";
 import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
+/**
+ * Maximum number of characters to display for small screens (Size S)
+ * @private
+ */
+const MAX_CHARACTERS_SIZE_S = 100;
+/**
+ * Maximum number of characters to display for medium and larger screens (Size M and above)
+ * @private
+ */
+const MAX_CHARACTERS_SIZE_M = 300;
 /**
  * @class
  * The `ui5-li` represents the simplest type of item for a `ui5-list`.
@@ -30,12 +41,14 @@ import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
  * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
  * @slot {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.
+ * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>
+ * **Note:** Deprecated since version `2.10.0`. Use the `text` property instead. <br/>
+ * Only use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).
  * @constructor
  * @extends ListItem
  * @public
  */
-let ListItemStandard = class ListItemStandard extends ListItem {
+let ListItemStandard = ListItemStandard_1 = class ListItemStandard extends ListItem {
     constructor() {
         super(...arguments);
         /**
@@ -62,12 +75,21 @@ let ListItemStandard = class ListItemStandard extends ListItem {
          */
         this.movable = false;
         /**
-         * Defines if the text of the component should wrap, they truncate by default.
+         * Defines if the text of the component should wrap when it's too long.
+         * When set to "Normal", the content (title, description) will be wrapped
+         * using the `ui5-expandable-text` component.<br/>
+         *
+         * The text can wrap up to 100 characters on small screens (size S) and
+         * up to 300 characters on larger screens (size M and above). When text exceeds
+         * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+         *
+         * Available options are:
+         * - `None` (default) - The text will truncate with an ellipsis.
+         * - `Normal` - The text will wrap (without truncation).
          *
-         * **Note:** this property takes affect only if text node is provided to default slot of the component
          * @default "None"
-         * @private
-         * @since 1.5.0
+         * @public
+         * @since 2.10.0
          */
         this.wrappingType = "None";
         /**
@@ -79,8 +101,37 @@ let ListItemStandard = class ListItemStandard extends ListItem {
     }
     onBeforeRendering() {
         super.onBeforeRendering();
-        this.hasTitle = !!this.textContent;
+        this.hasTitle = !!(this.text || this.textContent);
         this._hasImage = this.hasImage;
+        // Only load ExpandableText if "Normal" wrapping is used
+        if (this.wrappingType === "Normal") {
+            // If feature is already loaded (preloaded by the user via importing ListItemStandardExpandableText.js), the template is already available
+            if (ListItemStandard_1.ExpandableTextTemplate) {
+                this.expandableTextTemplate = ListItemStandard_1.ExpandableTextTemplate;
+                // If feature is not preloaded, load the template dynamically
+            }
+            else {
+                import("./features/ListItemStandardExpandableTextTemplate.js").then(module => {
+                    this.expandableTextTemplate = module.default;
+                });
+            }
+        }
+    }
+    /**
+     * Returns the content text, either from text property or from the default slot
+     * @private
+     */
+    get _textContent() {
+        return this.text || this.textContent || "";
+    }
+    /**
+     * Determines the maximum characters to display based on the current media range.
+     * - Size S: 100 characters
+     * - Size M and larger: 300 characters
+     * @private
+     */
+    get _maxCharacters() {
+        return this.mediaRange === "S" ? MAX_CHARACTERS_SIZE_S : MAX_CHARACTERS_SIZE_M;
     }
     get displayIconBegin() {
         return !!(this.icon && !this.iconEnd);
@@ -92,6 +143,9 @@ let ListItemStandard = class ListItemStandard extends ListItem {
         return !!this.image.length;
     }
 };
+__decorate([
+    property()
+], ListItemStandard.prototype, "text", void 0);
 __decorate([
     property()
 ], ListItemStandard.prototype, "description", void 0);
@@ -122,10 +176,13 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ListItemStandard.prototype, "_hasImage", void 0);
+__decorate([
+    property({ noAttribute: true })
+], ListItemStandard.prototype, "expandableTextTemplate", void 0);
 __decorate([
     slot()
 ], ListItemStandard.prototype, "image", void 0);
-ListItemStandard = __decorate([
+ListItemStandard = ListItemStandard_1 = __decorate([
     customElement({
         tag: "ui5-li",
         renderer: jsxRenderer,

package/dist/ListItemStandard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemStandard.js","sourceRoot":"","sources":["../src/ListItemStandard.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,QAAQ,MAAM,eAAe,CAAC;AAGrC,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ;IAAvC;;QAsBC;;;;;WAKG;QAEH,YAAO,GAAG,KAAK,CAAC;QAWhB;;;;;;;WAOG;QAEH,wBAAmB,GAAoB,MAAM,CAAC;QAE9C;;;;;WAKG;QAEH,YAAO,GAAG,KAAK,CAAC;QAYhB;;;;;;;WAOG;QAEH,iBAAY,GAAsB,MAAM,CAAC;QAEzC;;;WAGG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAGjB,cAAS,GAAG,KAAK,CAAC;IA+BnB,CAAC;IAjBA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;QACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;CACD,CAAA;AAhHA;IADC,QAAQ,EAAE;qDACU;AAYrB;IADC,QAAQ,EAAE;8CACG;AASd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAShB;IADC,QAAQ,EAAE;wDACa;AAWxB;IADC,QAAQ,EAAE;6DACmC;AAS9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAUR;IADP,QAAQ,EAAE;wDACqB;AAWhC;IADC,QAAQ,EAAE;sDAC8B;AAOzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACV;AAYlB;IADC,IAAI,EAAE;+CACoB;AArGtB,gBAAgB;IALrB,aAAa,CAAC;QACd,GAAG,EAAE,QAAQ;QACb,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,gBAAgB,CAwHrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ListItem from \"./ListItem.js\";\nimport type { IAccessibleListItem } from \"./ListItem.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport ListItemStandardTemplate from \"./ListItemStandardTemplate.js\";\n\n/**\n * @class\n * The `ui5-li` represents the simplest type of item for a `ui5-list`.\n *\n * This is a list item,\n * providing the most common use cases such as `text`,\n * `image` and `icon`.\n\n * @csspart title - Used to style the title of the list item\n * @csspart description - Used to style the description of the list item\n * @csspart additional-text - Used to style the additionalText of the list item\n * @csspart icon - Used to style the icon of the list item\n * @csspart native-li - Used to style the main li tag of the list item\n * @csspart content - Used to style the content area of the list item\n * @csspart detail-button - Used to style the button rendered when the list item is of type detail\n * @csspart delete-button - Used to style the button rendered when the list item is in delete mode\n * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode\n * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode\n * @slot {Node[]} default - 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 * @constructor\n * @extends ListItem\n * @public\n */\n@customElement({\n\ttag: \"ui5-li\",\n\trenderer: jsxRenderer,\n\ttemplate: ListItemStandardTemplate,\n})\nclass ListItemStandard extends ListItem implements IAccessibleListItem {\n\t/**\n\t * Defines the description displayed right under the item text, if such is present.\n\t * @default undefined\n\t * @public\n\t * @since 0.8.0\n\t */\n\t@property()\n\tdescription?: string;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the `icon` should be displayed in the beginning of the list item or in the end.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd = false;\n\n\t/**\n\t * Defines the `additionalText`, displayed in the end of the list item.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalText?: string;\n\n\t/**\n\t * Defines the state of the `additionalText`.\n\t *\n\t * Available options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalTextState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the item is movable.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tmovable = false;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * Note: If not provided a default text alternative will be set, if present.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tdeclare accessibleName?: string;\n\n\t/**\n\t * Defines if the text of the component should wrap, they truncate by default.\n\t *\n\t * **Note:** this property takes affect only if text node is provided to default slot of the component\n\t * @default \"None\"\n\t * @private\n\t * @since 1.5.0\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"None\";\n\n\t/**\n\t * Indicates if the list item has text content.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasTitle = false;\n\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * **Note:** While the slot allows option for setting custom avatar, to match the\n\t * design guidelines, please use the `ui5-avatar` with it's default size - S.\n\t *\n\t * **Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n\t * `ui5-li` should be customized in order to fit.\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@slot()\n\timage!: Array<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!this.textContent;\n\t\tthis._hasImage = this.hasImage;\n\t}\n\n\tget displayIconBegin(): boolean {\n\t\treturn !!(this.icon && !this.iconEnd);\n\t}\n\n\tget displayIconEnd(): boolean {\n\t\treturn !!(this.icon && this.iconEnd);\n\t}\n\n\tget hasImage(): boolean {\n\t\treturn !!this.image.length;\n\t}\n}\n\nListItemStandard.define();\n\nexport default ListItemStandard;\n"]}
+{"version":3,"file":"ListItemStandard.js","sourceRoot":"","sources":["../src/ListItemStandard.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport ListItem from \"./ListItem.js\";\nimport type { IAccessibleListItem } from \"./ListItem.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport ListItemStandardTemplate from \"./ListItemStandardTemplate.js\";\nimport type { ExpandableTextTemplateParams } from \"./types/ExpandableTextTemplateParams.js\";\n\n/**\n * Maximum number of characters to display for small screens (Size S)\n * @private\n */\nconst MAX_CHARACTERS_SIZE_S = 100;\n\n/**\n * Maximum number of characters to display for medium and larger screens (Size M and above)\n * @private\n */\nconst MAX_CHARACTERS_SIZE_M = 300;\n\n// Specific template type for expandable text\ntype ExpandableTextTemplate = (this: ListItemStandard, params: ExpandableTextTemplateParams) => JSX.Element;\n\n/**\n * @class\n * The `ui5-li` represents the simplest type of item for a `ui5-list`.\n *\n * This is a list item,\n * providing the most common use cases such as `text`,\n * `image` and `icon`.\n\n * @csspart title - Used to style the title of the list item\n * @csspart description - Used to style the description of the list item\n * @csspart additional-text - Used to style the additionalText of the list item\n * @csspart icon - Used to style the icon of the list item\n * @csspart native-li - Used to style the main li tag of the list item\n * @csspart content - Used to style the content area of the list item\n * @csspart detail-button - Used to style the button rendered when the list item is of type detail\n * @csspart delete-button - Used to style the button rendered when the list item is in delete mode\n * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode\n * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode\n * @slot {Node[]} default - 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. <br/>\n * **Note:** Deprecated since version `2.10.0`. Use the `text` property instead. <br/>\n * Only use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).\n * @constructor\n * @extends ListItem\n * @public\n */\n@customElement({\n\ttag: \"ui5-li\",\n\trenderer: jsxRenderer,\n\ttemplate: ListItemStandardTemplate,\n})\nclass ListItemStandard extends ListItem implements IAccessibleListItem {\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t * @since 2.10.0\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the description displayed right under the item text, if such is present.\n\t * @default undefined\n\t * @public\n\t * @since 0.8.0\n\t */\n\t@property()\n\tdescription?: string;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the `icon` should be displayed in the beginning of the list item or in the end.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd = false;\n\n\t/**\n\t * Defines the `additionalText`, displayed in the end of the list item.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalText?: string;\n\n\t/**\n\t * Defines the state of the `additionalText`.\n\t *\n\t * Available options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalTextState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the item is movable.\n\t * @default false\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tmovable = false;\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * Note: If not provided a default text alternative will be set, if present.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tdeclare accessibleName?: string;\n\n\t/**\n\t * Defines if the text of the component should wrap when it's too long.\n\t * When set to \"Normal\", the content (title, description) will be wrapped\n\t * using the `ui5-expandable-text` component.<br/>\n\t *\n\t * The text can wrap up to 100 characters on small screens (size S) and\n\t * up to 300 characters on larger screens (size M and above). When text exceeds\n\t * these limits, it truncates with an ellipsis followed by a text expansion trigger.\n\t *\n\t * Available options are:\n\t * - `None` (default) - The text will truncate with an ellipsis.\n\t * - `Normal` - The text will wrap (without truncation).\n\t *\n\t * @default \"None\"\n\t * @public\n\t * @since 2.10.0\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"None\";\n\n\t/**\n\t * Indicates if the list item has text content.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasTitle = false;\n\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * The expandableText template.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\texpandableTextTemplate?: ExpandableTextTemplate;\n\n\t/**\n\t * **Note:** While the slot allows option for setting custom avatar, to match the\n\t * design guidelines, please use the `ui5-avatar` with it's default size - S.\n\t *\n\t * **Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n\t * `ui5-li` should be customized in order to fit.\n\t * @since 2.0.0\n\t * @public\n\t */\n\t@slot()\n\timage!: Array<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.hasTitle = !!(this.text || this.textContent);\n\t\tthis._hasImage = this.hasImage;\n\n\t\t// Only load ExpandableText if \"Normal\" wrapping is used\n\t\tif (this.wrappingType === \"Normal\") {\n\t\t\t// If feature is already loaded (preloaded by the user via importing ListItemStandardExpandableText.js), the template is already available\n\t\t\tif (ListItemStandard.ExpandableTextTemplate) {\n\t\t\t\tthis.expandableTextTemplate = ListItemStandard.ExpandableTextTemplate;\n\t\t\t// If feature is not preloaded, load the template dynamically\n\t\t\t} else {\n\t\t\t\timport(\"./features/ListItemStandardExpandableTextTemplate.js\").then(module => {\n\t\t\t\t\tthis.expandableTextTemplate = module.default;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Returns the content text, either from text property or from the default slot\n\t * @private\n\t */\n\tget _textContent(): string {\n\t\treturn this.text || this.textContent || \"\";\n\t}\n\n\t/**\n\t * Determines the maximum characters to display based on the current media range.\n\t * - Size S: 100 characters\n\t * - Size M and larger: 300 characters\n\t * @private\n\t */\n\tget _maxCharacters(): number {\n\t\treturn this.mediaRange === \"S\" ? MAX_CHARACTERS_SIZE_S : MAX_CHARACTERS_SIZE_M;\n\t}\n\n\tget displayIconBegin(): boolean {\n\t\treturn !!(this.icon && !this.iconEnd);\n\t}\n\n\tget displayIconEnd(): boolean {\n\t\treturn !!(this.icon && this.iconEnd);\n\t}\n\n\tget hasImage(): boolean {\n\t\treturn !!this.image.length;\n\t}\n\n\tstatic ExpandableTextTemplate?: ExpandableTextTemplate;\n}\n\nListItemStandard.define();\n\nexport default ListItemStandard;\n"]}

package/dist/ListItemStandardTemplate.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
 import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
+import WrappingType from "./types/WrappingType.js";
 const predefinedHooks = {
     imageBegin,
     iconBegin,
@@ -12,7 +13,38 @@ export default function ListItemStandardTemplate(hooks) {
     return ListItemTemplate.call(this, currentHooks);
 }
 function listItemContent() {
-    return _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-li-text-wrapper", children: [_jsx("span", { part: "title", class: "ui5-li-title", children: _jsx("slot", {}) }), this.description && (_jsxs("div", { class: "ui5-li-description-info-wrapper", children: [_jsx("span", { part: "description", class: "ui5-li-desc", children: this.description }), this.additionalText && (_jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] })), !this.typeActive && _jsx("span", { class: "ui5-hidden-text", children: this.type })] }), !this.description && this.additionalText && (_jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText }))] });
+    return _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-li-text-wrapper", children: [renderTitle.call(this), renderDescription.call(this), !this.typeActive && _jsx("span", { class: "ui5-hidden-text", children: this.type })] }), !this.description && renderAdditionalText.call(this)] });
+}
+function renderTitle() {
+    if (this.wrappingType === WrappingType.Normal) {
+        return this.expandableTextTemplate?.call(this, {
+            className: "ui5-li-title",
+            text: this._textContent,
+            maxCharacters: this._maxCharacters,
+            part: "title",
+        });
+    }
+    return (_jsx("span", { part: "title", class: "ui5-li-title", children: this.text ? this.text : _jsx("slot", {}) }));
+}
+function renderDescription() {
+    if (!this.description) {
+        return null;
+    }
+    if (this.wrappingType === WrappingType.Normal) {
+        return (_jsxs("div", { class: "ui5-li-description-info-wrapper", children: [this.expandableTextTemplate?.call(this, {
+                    className: "ui5-li-desc",
+                    text: this.description,
+                    maxCharacters: this._maxCharacters,
+                    part: "description",
+                }), renderAdditionalText.call(this)] }));
+    }
+    return (_jsxs("div", { class: "ui5-li-description-info-wrapper", children: [_jsx("span", { part: "description", class: "ui5-li-desc", children: this.description }), renderAdditionalText.call(this)] }));
+}
+function renderAdditionalText() {
+    if (!this.additionalText) {
+        return null;
+    }
+    return _jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText });
 }
 function imageBegin() {
     if (this.hasImage) {

package/dist/ListItemStandardTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemStandardTemplate.js","sourceRoot":"","sources":["../src/ListItemStandardTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAGrD,MAAM,eAAe,GAA2B;IAC/C,UAAU;IACV,SAAS;IACT,OAAO;IACP,eAAe;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAyB,KAA8B;IACtG,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAClD,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,8BACN,eAAK,KAAK,EAAC,qBAAqB,aAC/B,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,YACtC,gBAAa,GACP,EACN,IAAI,CAAC,WAAW,IAAI,CACpB,eAAK,KAAK,EAAC,iCAAiC,aAC3C,eAAM,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,aAAa,YAAE,IAAI,CAAC,WAAW,GAAQ,EAErE,IAAI,CAAC,cAAc,IAAI,CACtB,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,IAEG,CACN,EAEA,CAAC,IAAI,CAAC,UAAU,IAAI,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,IAAI,GAAQ,IAChE,EAEL,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,IAAI,CAC5C,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,CACxF,IACC,CAAC;AACL,CAAC;AAED,SAAS,UAAU;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,cAAK,KAAK,EAAC,cAAc,YAC/B,eAAM,IAAI,EAAC,OAAO,GAAQ,GACrB,CAAC;IACR,CAAC;AACF,CAAC;AAED,SAAS,SAAS;IACjB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC3B,OAAO,KAAC,IAAI,IACX,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,YAAY,GAAG,CAAC;IACvB,CAAC;AACF,CAAC;AAED,SAAS,OAAO;IACf,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,KAAC,IAAI,IACX,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,YAAY,GAAG,CAAC;IACvB,CAAC;AACF,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport type ListItemStandard from \"./ListItemStandard.js\";\nimport ListItemTemplate from \"./ListItemTemplate.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\timageBegin,\n\ticonBegin,\n\ticonEnd,\n\tlistItemContent\n};\n\nexport default function ListItemStandardTemplate(this: ListItemStandard, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn ListItemTemplate.call(this, currentHooks);\n}\n\nfunction listItemContent(this: ListItemStandard) {\n\treturn <>\n\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t<span part=\"title\" class=\"ui5-li-title\">\n\t\t\t\t<slot></slot>\n\t\t\t</span>\n\t\t\t{this.description && (\n\t\t\t\t<div class=\"ui5-li-description-info-wrapper\">\n\t\t\t\t\t<span part=\"description\" class=\"ui5-li-desc\">{this.description}</span>\n\t\t\t\t\t{\n\t\t\t\t\t\tthis.additionalText && (\n\t\t\t\t\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{!this.typeActive && <span class=\"ui5-hidden-text\">{this.type}</span>}\n\t\t</div>\n\n\t\t{!this.description && this.additionalText && (\n\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t)}\n\t</>;\n}\n\nfunction imageBegin(this: ListItemStandard) {\n\tif (this.hasImage) {\n\t\treturn <div class=\"ui5-li-image\">\n\t\t\t<slot name=\"image\"></slot>\n\t\t</div>;\n\t}\n}\n\nfunction iconBegin(this: ListItemStandard) {\n\tif (this.displayIconBegin) {\n\t\treturn <Icon\n\t\t\tpart=\"icon\"\n\t\t\tname={this.icon}\n\t\t\tclass=\"ui5-li-icon\"\n\t\t\tmode=\"Decorative\" />;\n\t}\n}\n\nfunction iconEnd(this: ListItemStandard) {\n\tif (this.displayIconEnd) {\n\t\treturn <Icon\n\t\t\tpart=\"icon\"\n\t\t\tname={this.icon}\n\t\t\tclass=\"ui5-li-icon\"\n\t\t\tmode=\"Decorative\" />;\n\t}\n}\n"]}
+{"version":3,"file":"ListItemStandardTemplate.js","sourceRoot":"","sources":["../src/ListItemStandardTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport type ListItemStandard from \"./ListItemStandard.js\";\nimport ListItemTemplate from \"./ListItemTemplate.js\";\nimport type { ListItemHooks } from \"./ListItemTemplate.js\";\nimport WrappingType from \"./types/WrappingType.js\";\n\nconst predefinedHooks: Partial<ListItemHooks> = {\n\timageBegin,\n\ticonBegin,\n\ticonEnd,\n\tlistItemContent\n};\n\nexport default function ListItemStandardTemplate(this: ListItemStandard, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn ListItemTemplate.call(this, currentHooks);\n}\n\nfunction listItemContent(this: ListItemStandard) {\n\treturn <>\n\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t{renderTitle.call(this)}\n\t\t\t{renderDescription.call(this)}\n\n\t\t\t{!this.typeActive && <span class=\"ui5-hidden-text\">{this.type}</span>}\n\t\t</div>\n\n\t\t{!this.description && renderAdditionalText.call(this)}\n\t</>;\n}\n\nfunction renderTitle(this: ListItemStandard) {\n\tif (this.wrappingType === WrappingType.Normal) {\n\t\treturn this.expandableTextTemplate?.call(this, {\n\t\t\tclassName: \"ui5-li-title\",\n\t\t\ttext: this._textContent,\n\t\t\tmaxCharacters: this._maxCharacters,\n\t\t\tpart: \"title\",\n\t\t});\n\t}\n\n\treturn (\n\t\t<span part=\"title\" class=\"ui5-li-title\">\n\t\t\t{this.text ? this.text : <slot></slot>}\n\t\t</span>\n\t);\n}\n\nfunction renderDescription(this: ListItemStandard) {\n\tif (!this.description) {\n\t\treturn null;\n\t}\n\n\tif (this.wrappingType === WrappingType.Normal) {\n\t\treturn (\n\t\t\t<div class=\"ui5-li-description-info-wrapper\">\n\t\t\t\t{this.expandableTextTemplate?.call(this, {\n\t\t\t\t\tclassName: \"ui5-li-desc\",\n\t\t\t\t\ttext: this.description,\n\t\t\t\t\tmaxCharacters: this._maxCharacters,\n\t\t\t\t\tpart: \"description\",\n\t\t\t\t})}\n\t\t\t\t{renderAdditionalText.call(this)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div class=\"ui5-li-description-info-wrapper\">\n\t\t\t<span part=\"description\" class=\"ui5-li-desc\">{this.description}</span>\n\t\t\t{renderAdditionalText.call(this)}\n\t\t</div>\n\t);\n}\n\nfunction renderAdditionalText(this: ListItemStandard) {\n\tif (!this.additionalText) {\n\t\treturn null;\n\t}\n\treturn <span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>;\n}\n\nfunction imageBegin(this: ListItemStandard) {\n\tif (this.hasImage) {\n\t\treturn <div class=\"ui5-li-image\">\n\t\t\t<slot name=\"image\"></slot>\n\t\t</div>;\n\t}\n}\n\nfunction iconBegin(this: ListItemStandard) {\n\tif (this.displayIconBegin) {\n\t\treturn <Icon\n\t\t\tpart=\"icon\"\n\t\t\tname={this.icon}\n\t\t\tclass=\"ui5-li-icon\"\n\t\t\tmode=\"Decorative\" />;\n\t}\n}\n\nfunction iconEnd(this: ListItemStandard) {\n\tif (this.displayIconEnd) {\n\t\treturn <Icon\n\t\t\tpart=\"icon\"\n\t\t\tname={this.icon}\n\t\t\tclass=\"ui5-li-icon\"\n\t\t\tmode=\"Decorative\" />;\n\t}\n}\n"]}

package/dist/Menu.d.ts

@@ -3,6 +3,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
+import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type MenuItem from "./MenuItem.js";
 import "./MenuItem.js";
 import "./MenuSeparator.js";
@@ -82,12 +83,18 @@ declare class Menu extends UI5Element {
      */
     headerText?: string;
     /**
-     * Indicates if the menu is open
+     * Indicates if the menu is open.
      * @public
      * @default false
      * @since 1.10.0
      */
     open: boolean;
+    /**
+     * Determines the horizontal alignment of the menu relative to its opener control.
+     * @default "Start"
+     * @public
+     */
+    horizontalAlign: `${PopoverHorizontalAlign}`;
     /**
      * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
      * @default false
@@ -96,7 +103,7 @@ declare class Menu extends UI5Element {
      */
     loading: boolean;
     /**
-     * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
+     * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
      * @default 1000
      * @public
      * @since 1.13.0

package/dist/Menu.js

@@ -68,12 +68,18 @@ let Menu = Menu_1 = class Menu extends UI5Element {
     constructor() {
         super(...arguments);
         /**
-         * Indicates if the menu is open
+         * Indicates if the menu is open.
          * @public
          * @default false
          * @since 1.10.0
          */
         this.open = false;
+        /**
+         * Determines the horizontal alignment of the menu relative to its opener control.
+         * @default "Start"
+         * @public
+         */
+        this.horizontalAlign = "Start";
         /**
          * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
          * @default false
@@ -82,7 +88,7 @@ let Menu = Menu_1 = class Menu extends UI5Element {
          */
         this.loading = false;
         /**
-         * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
+         * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
          * @default 1000
          * @public
          * @since 1.13.0
@@ -252,6 +258,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Menu.prototype, "open", void 0);
+__decorate([
+    property()
+], Menu.prototype, "horizontalAlign", void 0);
 __decorate([
     property({ type: Boolean })
 ], Menu.prototype, "loading", void 0);

package/dist/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../src/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport {\n\tisLeft,\n\tisRight,\n\tisEnter,\n\tisTabNext,\n\tisTabPrevious,\n\tisDown,\n\tisUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tisPhone,\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { Timeout } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport DOMReferenceConverter from \"@ui5/webcomponents-base/dist/converters/DOMReference.js\";\nimport type ResponsivePopover from \"./ResponsivePopover.js\";\nimport type MenuItem from \"./MenuItem.js\";\nimport \"./MenuItem.js\";\nimport \"./MenuSeparator.js\";\nimport type {\n\tListItemClickEventDetail,\n} from \"./List.js\";\nimport menuTemplate from \"./MenuTemplate.js\";\nimport {\n\tMENU_CLOSE_BUTTON_ARIA_LABEL,\n\tMENU_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport menuCss from \"./generated/themes/Menu.css.js\";\n\nconst MENU_OPEN_DELAY = 300;\n\n/**\n * Interface for components that may be slotted inside a `ui5-menu`.\n *\n * **Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.\n * @public\n */\ninterface IMenuItem extends UI5Element {\n\tisSeparator: boolean;\n}\n\ntype MenuItemClickEventDetail = {\n\titem: MenuItem,\n\ttext: string,\n}\n\ntype MenuBeforeOpenEventDetail = { item?: MenuItem };\ntype MenuBeforeCloseEventDetail = { escPressed: boolean };\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-menu` component represents a hierarchical menu structure.\n *\n * ### Structure\n *\n * The `ui5-menu` can hold two types of entities:\n *\n * - `ui5-menu-item` components\n * - `ui5-menu-separator` - used to separate menu items with a line\n *\n * An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n *\n * ### Keyboard Handling\n *\n * The `ui5-menu` provides advanced keyboard handling.\n * The user can use the following keyboard shortcuts in order to navigate trough the tree:\n *\n * - `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n * - `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\n * in the currently clicked menu item.\n * - `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n *\n * when there is `endContent` :\n * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n *\n * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Menu.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.3.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-menu\",\n\trenderer: jsxRenderer,\n\tstyles: menuCss,\n\ttemplate: menuTemplate,\n})\n\n/**\n * Fired when an item is being clicked.\n *\n * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n * @param { HTMLElement } item The currently clicked menu item.\n * @param { string } text The text of the currently clicked menu item.\n * @public\n */\n@event(\"item-click\", {\n\tcancelable: true,\n})\n\n/**\n * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n *\n * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n * @public\n * @since 1.10.0\n * @param { HTMLElement } item The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening.\n */\n@event(\"before-open\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the menu is opened.\n * @public\n * @since 1.10.0\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the menu is being closed.\n * @private\n */\n@event(\"close-menu\", {\n\tbubbles: true,\n})\n\n/**\n * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n * @public\n * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.\n * @since 1.10.0\n */\n@event(\"before-close\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the menu is closed.\n * @public\n * @since 1.10.0\n */\n@event(\"close\")\n\nclass Menu extends UI5Element {\n\teventDetails!: {\n\t\t\"item-click\": MenuItemClickEventDetail,\n\t\t\"before-open\": MenuBeforeOpenEventDetail,\n\t\t\"open\": void,\n\t\t\"before-close\": MenuBeforeCloseEventDetail,\n\t\t\"close\": void,\n\t\t\"close-menu\": void,\n\t}\n\t/**\n\t * Defines the header text of the menu (displayed on mobile).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Indicates if the menu is open\n\t * @public\n\t * @default false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.\n\t * @default false\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..\n\t * @default 1000\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t/**\n\t * Defines the ID or DOM Reference of the element at which the menu is shown.\n\t * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\n\t * You can only set the `opener` attribute to a DOM Reference when using JavaScript.\n\t * @public\n\t * @default undefined\n\t * @since 1.10.0\n\t */\n\t@property({ converter: DOMReferenceConverter })\n\topener?: HTMLElement | string;\n\n\t/**\n\t * Defines the items of this component.\n\t *\n\t * **Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\titems!: Array<IMenuItem>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_timeout?: Timeout;\n\n\tget isRtl() {\n\t\treturn this.effectiveDir === \"rtl\";\n\t}\n\n\tget labelClose() {\n\t\treturn Menu.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);\n\t}\n\n\tget isPhone() {\n\t\treturn isPhone();\n\t}\n\n\tget _popover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tget _menuItems() {\n\t\treturn this.items.filter((item): item is MenuItem => !item.isSeparator);\n\t}\n\n\tget acessibleNameText() {\n\t\treturn Menu.i18nBundle.getText(MENU_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\tonBeforeRendering() {\n\t\tconst siblingsWithIcon = this._menuItems.some(menuItem => !!menuItem.icon);\n\n\t\tthis._menuItems.forEach(item => {\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\t}\n\n\t_close() {\n\t\tthis.open = false;\n\t}\n\n\t_openItemSubMenu(item: MenuItem) {\n\t\tclearTimeout(this._timeout);\n\n\t\tif (!item._popover || item._popover.open) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"before-open\", {\n\t\t\titem,\n\t\t});\n\t\titem._popover.opener = item;\n\t\titem._popover.open = true;\n\t\titem.selected = true;\n\t}\n\n\t_closeItemSubMenu(item: MenuItem) {\n\t\tif (item && item._popover) {\n\t\t\tconst openedSibling = item._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);\n\t\t\tif (openedSibling) {\n\t\t\t\tthis._closeItemSubMenu(openedSibling);\n\t\t\t}\n\n\t\t\titem._popover.open = false;\n\t\t\titem.selected = false;\n\t\t}\n\t}\n\n\t_itemMouseOver(e: MouseEvent) {\n\t\tif (isDesktop()) {\n\t\t\t// respect mouseover only on desktop\n\t\t\tconst item = e.target as MenuItem;\n\n\t\t\tif (this._isInstanceOfMenuItem(item)) {\n\t\t\t\titem.focus();\n\n\t\t\t\t// Opens submenu with 300ms delay\n\t\t\t\tthis._startOpenTimeout(item);\n\t\t\t}\n\t\t}\n\t}\n\n\tasync focus(focusOptions?: FocusOptions): Promise<void> {\n\t\tawait renderFinished();\n\t\tconst firstMenuItem = this._menuItems[0];\n\n\t\tif (firstMenuItem) {\n\t\t\treturn firstMenuItem.focus(focusOptions);\n\t\t}\n\n\t\treturn super.focus(focusOptions);\n\t}\n\n\t_startOpenTimeout(item: MenuItem) {\n\t\tclearTimeout(this._timeout);\n\n\t\tthis._timeout = setTimeout(() => {\n\t\t\tconst opener = item.parentElement as MenuItem | Menu;\n\t\t\tconst openedSibling = opener && opener._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);\n\t\t\tif (openedSibling) {\n\t\t\t\tthis._closeItemSubMenu(openedSibling);\n\t\t\t}\n\n\t\t\tthis._openItemSubMenu(item);\n\t\t}, MENU_OPEN_DELAY);\n\t}\n\n\t_itemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst item = e.detail.item as MenuItem;\n\n\t\tif (!item._popover) {\n\t\t\tconst prevented = !this.fireDecoratorEvent(\"item-click\", {\n\t\t\t\t\"item\": item,\n\t\t\t\t\"text\": item.text || \"\",\n\t\t\t});\n\n\t\t\tif (!prevented && this._popover) {\n\t\t\t\titem.fireDecoratorEvent(\"close-menu\");\n\t\t\t}\n\t\t} else {\n\t\t\tthis._openItemSubMenu(item);\n\t\t}\n\t}\n\n\t_itemKeyDown(e: KeyboardEvent) {\n\t\tconst isTabNextPrevious = isTabNext(e) || isTabPrevious(e);\n\t\tconst item = e.target as MenuItem;\n\t\tconst parentElement = item.parentElement as MenuItem;\n\t\tconst shouldItemNavigation = isUp(e) || isDown(e);\n\t\tconst shouldOpenMenu = this.isRtl ? isLeft(e) : isRight(e);\n\t\tconst shouldCloseMenu = !shouldItemNavigation && !shouldOpenMenu && this._isInstanceOfMenuItem(parentElement);\n\n\t\tif (this._isInstanceOfMenuItem(item)) {\n\t\t\tif (isEnter(e) || isTabNextPrevious) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\n\t\t\tif (isRight(e) || isLeft(e)) {\n\t\t\t\titem._navigateToEndContent(isLeft(e));\n\t\t\t}\n\n\t\t\tif (shouldOpenMenu) {\n\t\t\t\tthis._openItemSubMenu(item);\n\t\t\t} else if ((shouldCloseMenu || isTabNextPrevious) && parentElement._popover) {\n\t\t\t\tparentElement._popover.open = false;\n\t\t\t\tparentElement.selected = false;\n\t\t\t\tparentElement._popover.focusOpener();\n\t\t\t}\n\t\t} else if (isUp(e)) {\n\t\t\tthis._navigateOutOfEndContent(parentElement);\n\t\t} else if (isDown(e)) {\n\t\t\tthis._navigateOutOfEndContent(parentElement, true);\n\t\t}\n\t}\n\n\t_navigateOutOfEndContent(menuItem: MenuItem, isDownwards?: boolean) {\n\t\tconst opener = menuItem?.parentElement as MenuItem | Menu;\n\t\tconst currentIndex = opener._menuItems.indexOf(menuItem);\n\t\tconst nextItem = isDownwards ? opener._menuItems[currentIndex + 1] : opener._menuItems[currentIndex - 1];\n\t\tconst itemToFocus = nextItem || opener._menuItems[currentIndex];\n\n\t\titemToFocus.focus();\n\t}\n\n\t_beforePopoverOpen(e: CustomEvent) {\n\t\tconst prevented = !this.fireDecoratorEvent(\"before-open\", {});\n\n\t\tif (prevented) {\n\t\t\tthis.open = false;\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverOpen() {\n\t\tthis._menuItems[0]?.focus();\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_beforePopoverClose(e: CustomEvent) {\n\t\tconst prevented = !this.fireDecoratorEvent(\"before-close\", { escPressed: e.detail.escPressed });\n\n\t\tif (prevented) {\n\t\t\tthis.open = true;\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_isInstanceOfMenuItem(object: any): object is MenuItem {\n\t\treturn \"isMenuItem\" in object;\n\t}\n}\n\nMenu.define();\n\nexport default Menu;\nexport type {\n\tMenuItemClickEventDetail,\n\tMenuBeforeCloseEventDetail,\n\tMenuBeforeOpenEventDetail,\n\tIMenuItem,\n};\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../src/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport {\n\tisLeft,\n\tisRight,\n\tisEnter,\n\tisTabNext,\n\tisTabPrevious,\n\tisDown,\n\tisUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport {\n\tisPhone,\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { Timeout } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport DOMReferenceConverter from \"@ui5/webcomponents-base/dist/converters/DOMReference.js\";\nimport type ResponsivePopover from \"./ResponsivePopover.js\";\nimport type PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport type MenuItem from \"./MenuItem.js\";\nimport \"./MenuItem.js\";\nimport \"./MenuSeparator.js\";\nimport type {\n\tListItemClickEventDetail,\n} from \"./List.js\";\nimport menuTemplate from \"./MenuTemplate.js\";\nimport {\n\tMENU_CLOSE_BUTTON_ARIA_LABEL,\n\tMENU_POPOVER_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport menuCss from \"./generated/themes/Menu.css.js\";\n\nconst MENU_OPEN_DELAY = 300;\n\n/**\n * Interface for components that may be slotted inside a `ui5-menu`.\n *\n * **Note:** Use with `ui5-menu-item` or `ui5-menu-separator`. Implementing the interface does not guarantee that any other classes can work with the `ui5-menu`.\n * @public\n */\ninterface IMenuItem extends UI5Element {\n\tisSeparator: boolean;\n}\n\ntype MenuItemClickEventDetail = {\n\titem: MenuItem,\n\ttext: string,\n}\n\ntype MenuBeforeOpenEventDetail = { item?: MenuItem };\ntype MenuBeforeCloseEventDetail = { escPressed: boolean };\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-menu` component represents a hierarchical menu structure.\n *\n * ### Structure\n *\n * The `ui5-menu` can hold two types of entities:\n *\n * - `ui5-menu-item` components\n * - `ui5-menu-separator` - used to separate menu items with a line\n *\n * An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n *\n * ### Keyboard Handling\n *\n * The `ui5-menu` provides advanced keyboard handling.\n * The user can use the following keyboard shortcuts in order to navigate trough the tree:\n *\n * - `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n * - `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\n * in the currently clicked menu item.\n * - `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n *\n * when there is `endContent` :\n * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n *\n * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Menu.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.3.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-menu\",\n\trenderer: jsxRenderer,\n\tstyles: menuCss,\n\ttemplate: menuTemplate,\n})\n\n/**\n * Fired when an item is being clicked.\n *\n * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n * @param { HTMLElement } item The currently clicked menu item.\n * @param { string } text The text of the currently clicked menu item.\n * @public\n */\n@event(\"item-click\", {\n\tcancelable: true,\n})\n\n/**\n * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n *\n * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n * @public\n * @since 1.10.0\n * @param { HTMLElement } item The `ui5-menu-item` that triggers opening of the sub-menu or undefined when fired upon root menu opening.\n */\n@event(\"before-open\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the menu is opened.\n * @public\n * @since 1.10.0\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the menu is being closed.\n * @private\n */\n@event(\"close-menu\", {\n\tbubbles: true,\n})\n\n/**\n * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n * @public\n * @param {boolean} escPressed Indicates that `ESC` key has triggered the event.\n * @since 1.10.0\n */\n@event(\"before-close\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the menu is closed.\n * @public\n * @since 1.10.0\n */\n@event(\"close\")\n\nclass Menu extends UI5Element {\n\teventDetails!: {\n\t\t\"item-click\": MenuItemClickEventDetail,\n\t\t\"before-open\": MenuBeforeOpenEventDetail,\n\t\t\"open\": void,\n\t\t\"before-close\": MenuBeforeCloseEventDetail,\n\t\t\"close\": void,\n\t\t\"close-menu\": void,\n\t}\n\t/**\n\t * Defines the header text of the menu (displayed on mobile).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Indicates if the menu is open.\n\t * @public\n\t * @default false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Determines the horizontal alignment of the menu relative to its opener control.\n\t * @default \"Start\"\n\t * @public\n\t */\n\t@property()\n\thorizontalAlign: `${PopoverHorizontalAlign}` = \"Start\";\n\n\t/**\n\t * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.\n\t * @default false\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.\n\t * @default 1000\n\t * @public\n\t * @since 1.13.0\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t/**\n\t * Defines the ID or DOM Reference of the element at which the menu is shown.\n\t * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\n\t * You can only set the `opener` attribute to a DOM Reference when using JavaScript.\n\t * @public\n\t * @default undefined\n\t * @since 1.10.0\n\t */\n\t@property({ converter: DOMReferenceConverter })\n\topener?: HTMLElement | string;\n\n\t/**\n\t * Defines the items of this component.\n\t *\n\t * **Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\titems!: Array<IMenuItem>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_timeout?: Timeout;\n\n\tget isRtl() {\n\t\treturn this.effectiveDir === \"rtl\";\n\t}\n\n\tget labelClose() {\n\t\treturn Menu.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);\n\t}\n\n\tget isPhone() {\n\t\treturn isPhone();\n\t}\n\n\tget _popover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tget _menuItems() {\n\t\treturn this.items.filter((item): item is MenuItem => !item.isSeparator);\n\t}\n\n\tget acessibleNameText() {\n\t\treturn Menu.i18nBundle.getText(MENU_POPOVER_ACCESSIBLE_NAME);\n\t}\n\n\tonBeforeRendering() {\n\t\tconst siblingsWithIcon = this._menuItems.some(menuItem => !!menuItem.icon);\n\n\t\tthis._menuItems.forEach(item => {\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\t}\n\n\t_close() {\n\t\tthis.open = false;\n\t}\n\n\t_openItemSubMenu(item: MenuItem) {\n\t\tclearTimeout(this._timeout);\n\n\t\tif (!item._popover || item._popover.open) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"before-open\", {\n\t\t\titem,\n\t\t});\n\t\titem._popover.opener = item;\n\t\titem._popover.open = true;\n\t\titem.selected = true;\n\t}\n\n\t_closeItemSubMenu(item: MenuItem) {\n\t\tif (item && item._popover) {\n\t\t\tconst openedSibling = item._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);\n\t\t\tif (openedSibling) {\n\t\t\t\tthis._closeItemSubMenu(openedSibling);\n\t\t\t}\n\n\t\t\titem._popover.open = false;\n\t\t\titem.selected = false;\n\t\t}\n\t}\n\n\t_itemMouseOver(e: MouseEvent) {\n\t\tif (isDesktop()) {\n\t\t\t// respect mouseover only on desktop\n\t\t\tconst item = e.target as MenuItem;\n\n\t\t\tif (this._isInstanceOfMenuItem(item)) {\n\t\t\t\titem.focus();\n\n\t\t\t\t// Opens submenu with 300ms delay\n\t\t\t\tthis._startOpenTimeout(item);\n\t\t\t}\n\t\t}\n\t}\n\n\tasync focus(focusOptions?: FocusOptions): Promise<void> {\n\t\tawait renderFinished();\n\t\tconst firstMenuItem = this._menuItems[0];\n\n\t\tif (firstMenuItem) {\n\t\t\treturn firstMenuItem.focus(focusOptions);\n\t\t}\n\n\t\treturn super.focus(focusOptions);\n\t}\n\n\t_startOpenTimeout(item: MenuItem) {\n\t\tclearTimeout(this._timeout);\n\n\t\tthis._timeout = setTimeout(() => {\n\t\t\tconst opener = item.parentElement as MenuItem | Menu;\n\t\t\tconst openedSibling = opener && opener._menuItems.find(menuItem => menuItem._popover && menuItem._popover.open);\n\t\t\tif (openedSibling) {\n\t\t\t\tthis._closeItemSubMenu(openedSibling);\n\t\t\t}\n\n\t\t\tthis._openItemSubMenu(item);\n\t\t}, MENU_OPEN_DELAY);\n\t}\n\n\t_itemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst item = e.detail.item as MenuItem;\n\n\t\tif (!item._popover) {\n\t\t\tconst prevented = !this.fireDecoratorEvent(\"item-click\", {\n\t\t\t\t\"item\": item,\n\t\t\t\t\"text\": item.text || \"\",\n\t\t\t});\n\n\t\t\tif (!prevented && this._popover) {\n\t\t\t\titem.fireDecoratorEvent(\"close-menu\");\n\t\t\t}\n\t\t} else {\n\t\t\tthis._openItemSubMenu(item);\n\t\t}\n\t}\n\n\t_itemKeyDown(e: KeyboardEvent) {\n\t\tconst isTabNextPrevious = isTabNext(e) || isTabPrevious(e);\n\t\tconst item = e.target as MenuItem;\n\t\tconst parentElement = item.parentElement as MenuItem;\n\t\tconst shouldItemNavigation = isUp(e) || isDown(e);\n\t\tconst shouldOpenMenu = this.isRtl ? isLeft(e) : isRight(e);\n\t\tconst shouldCloseMenu = !shouldItemNavigation && !shouldOpenMenu && this._isInstanceOfMenuItem(parentElement);\n\n\t\tif (this._isInstanceOfMenuItem(item)) {\n\t\t\tif (isEnter(e) || isTabNextPrevious) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\n\t\t\tif (isRight(e) || isLeft(e)) {\n\t\t\t\titem._navigateToEndContent(isLeft(e));\n\t\t\t}\n\n\t\t\tif (shouldOpenMenu) {\n\t\t\t\tthis._openItemSubMenu(item);\n\t\t\t} else if ((shouldCloseMenu || isTabNextPrevious) && parentElement._popover) {\n\t\t\t\tparentElement._popover.open = false;\n\t\t\t\tparentElement.selected = false;\n\t\t\t\tparentElement._popover.focusOpener();\n\t\t\t}\n\t\t} else if (isUp(e)) {\n\t\t\tthis._navigateOutOfEndContent(parentElement);\n\t\t} else if (isDown(e)) {\n\t\t\tthis._navigateOutOfEndContent(parentElement, true);\n\t\t}\n\t}\n\n\t_navigateOutOfEndContent(menuItem: MenuItem, isDownwards?: boolean) {\n\t\tconst opener = menuItem?.parentElement as MenuItem | Menu;\n\t\tconst currentIndex = opener._menuItems.indexOf(menuItem);\n\t\tconst nextItem = isDownwards ? opener._menuItems[currentIndex + 1] : opener._menuItems[currentIndex - 1];\n\t\tconst itemToFocus = nextItem || opener._menuItems[currentIndex];\n\n\t\titemToFocus.focus();\n\t}\n\n\t_beforePopoverOpen(e: CustomEvent) {\n\t\tconst prevented = !this.fireDecoratorEvent(\"before-open\", {});\n\n\t\tif (prevented) {\n\t\t\tthis.open = false;\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverOpen() {\n\t\tthis._menuItems[0]?.focus();\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_beforePopoverClose(e: CustomEvent) {\n\t\tconst prevented = !this.fireDecoratorEvent(\"before-close\", { escPressed: e.detail.escPressed });\n\n\t\tif (prevented) {\n\t\t\tthis.open = true;\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_afterPopoverClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_isInstanceOfMenuItem(object: any): object is MenuItem {\n\t\treturn \"isMenuItem\" in object;\n\t}\n}\n\nMenu.define();\n\nexport default Menu;\nexport type {\n\tMenuItemClickEventDetail,\n\tMenuBeforeCloseEventDetail,\n\tMenuBeforeOpenEventDetail,\n\tIMenuItem,\n};\n"]}

package/dist/MenuTemplate.js

@@ -5,7 +5,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 export default function MenuTemplate() {
-    return (_jsxs(ResponsivePopover, { id: `${this._id}-menu-rp`, class: "ui5-menu-rp", placement: "Bottom", verticalAlign: "Bottom", opener: this.opener, open: this.open, preventInitialFocus: true, hideArrow: true, allowTargetOverlap: true, accessibleName: this.acessibleNameText, onBeforeOpen: this._beforePopoverOpen, onOpen: this._afterPopoverOpen, onBeforeClose: this._beforePopoverClose, onClose: this._afterPopoverClose, children: [this.isPhone &&
+    return (_jsxs(ResponsivePopover, { id: `${this._id}-menu-rp`, class: "ui5-menu-rp", placement: "Bottom", verticalAlign: "Bottom", horizontalAlign: this.horizontalAlign, opener: this.opener, open: this.open, preventInitialFocus: true, hideArrow: true, allowTargetOverlap: true, accessibleName: this.acessibleNameText, onBeforeOpen: this._beforePopoverOpen, onOpen: this._afterPopoverOpen, onBeforeClose: this._beforePopoverClose, onClose: this._afterPopoverClose, children: [this.isPhone &&
                 _jsxs("div", { slot: "header", class: "ui5-menu-dialog-header", children: [_jsx("div", { class: "ui5-menu-dialog-title", children: _jsx("h1", { children: this.headerText }) }), _jsx(Button, { icon: declineIcon, design: "Transparent", "aria-label": this.labelClose, onClick: this._close })] }), _jsx("div", { id: `${this._id}-menu-main`, children: this.items.length ?
                     (_jsx(List, { id: `${this._id}- menu-list`, selectionMode: "None", loading: this.loading, loadingDelay: this.loadingDelay, separators: "None", accessibleRole: "Menu", onItemClick: this._itemClick, onMouseOver: this._itemMouseOver, onKeyDown: this._itemKeyDown, "onui5-close-menu": this._close, children: _jsx("slot", {}) }))
                     : this.loading && (_jsx(BusyIndicator, { id: `${this._id}-menu-busy-indicator`, delay: this.loadingDelay, class: "ui5-menu-busy-indicator", active: true })) })] }));

package/dist/MenuTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTemplate.js","sourceRoot":"","sources":["../src/MenuTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,MAAC,iBAAiB,IACjB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAC,aAAa,EACnB,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,IAAI,EACf,kBAAkB,EAAE,IAAI,EACxB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EACtC,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,aAAa,EAAE,IAAI,CAAC,mBAAmB,EACvC,OAAO,EAAE,IAAI,CAAC,kBAAkB,aAE/B,IAAI,CAAC,OAAO;gBACZ,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,aAChD,cAAK,KAAK,EAAC,uBAAuB,YACjC,uBACE,IAAI,CAAC,UAAU,GACZ,GACA,EACN,KAAC,MAAM,IACN,IAAI,EAAE,WAAW,EACjB,MAAM,EAAC,aAAa,gBACR,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,MAAM,GACnB,IACG,EAEP,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,YAE1B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBACnB,CAAC,KAAC,IAAI,IACL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC5B,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAC,MAAM,EACjB,cAAc,EAAC,MAAM,EACrB,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,WAAW,EAAE,IAAI,CAAC,cAAc,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,sBAEV,IAAI,CAAC,MAAM,YAE7B,gBAAa,GACP,CAAC;oBACR,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAC,aAAa,IAChC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,sBAAsB,EACrC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAC,yBAAyB,EAC/B,MAAM,EAAE,IAAI,GACX,CACD,GAEG,IACc,CACrB,CAAC;AACH,CAAC","sourcesContent":["import type Menu from \"./Menu.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport List from \"./List.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport Button from \"./Button.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function MenuTemplate(this: Menu) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tid={`${this._id}-menu-rp`}\n\t\t\tclass=\"ui5-menu-rp\"\n\t\t\tplacement=\"Bottom\"\n\t\t\tverticalAlign=\"Bottom\"\n\t\t\topener={this.opener}\n\t\t\topen={this.open}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\tallowTargetOverlap={true}\n\t\t\taccessibleName={this.acessibleNameText}\n\t\t\tonBeforeOpen={this._beforePopoverOpen}\n\t\t\tonOpen={this._afterPopoverOpen}\n\t\t\tonBeforeClose={this._beforePopoverClose}\n\t\t\tonClose={this._afterPopoverClose}\n\t\t>\n\t\t\t{this.isPhone &&\n\t\t\t\t<div slot=\"header\" class=\"ui5-menu-dialog-header\">\n\t\t\t\t\t<div class=\"ui5-menu-dialog-title\">\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t{this.headerText}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={declineIcon}\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\taria-label={this.labelClose}\n\t\t\t\t\t\tonClick={this._close}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div\n\t\t\t\tid={`${this._id}-menu-main`}\n\t\t\t>\n\t\t\t\t{this.items.length ?\n\t\t\t\t\t(<List\n\t\t\t\t\t\tid={`${this._id}- menu-list`}\n\t\t\t\t\t\tselectionMode=\"None\"\n\t\t\t\t\t\tloading={this.loading}\n\t\t\t\t\t\tloadingDelay={this.loadingDelay}\n\t\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\t\taccessibleRole=\"Menu\"\n\t\t\t\t\t\tonItemClick={this._itemClick}\n\t\t\t\t\t\tonMouseOver={this._itemMouseOver}\n\t\t\t\t\t\tonKeyDown={this._itemKeyDown}\n\t\t\t\t\t\t// handles event from slotted children\n\t\t\t\t\t\tonui5-close-menu={this._close}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</List>)\n\t\t\t\t\t: this.loading && (<BusyIndicator\n\t\t\t\t\t\tid={`${this._id}-menu-busy-indicator`}\n\t\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\t\tclass=\"ui5-menu-busy-indicator\"\n\t\t\t\t\t\tactive={true}\n\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</div>\n\t\t</ResponsivePopover >\n\t);\n}\n"]}
+{"version":3,"file":"MenuTemplate.js","sourceRoot":"","sources":["../src/MenuTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,MAAC,iBAAiB,IACjB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAC,aAAa,EACnB,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAC,QAAQ,EACtB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,IAAI,EACf,kBAAkB,EAAE,IAAI,EACxB,cAAc,EAAE,IAAI,CAAC,iBAAiB,EACtC,YAAY,EAAE,IAAI,CAAC,kBAAkB,EACrC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,aAAa,EAAE,IAAI,CAAC,mBAAmB,EACvC,OAAO,EAAE,IAAI,CAAC,kBAAkB,aAE/B,IAAI,CAAC,OAAO;gBACZ,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,aAChD,cAAK,KAAK,EAAC,uBAAuB,YACjC,uBACE,IAAI,CAAC,UAAU,GACZ,GACA,EACN,KAAC,MAAM,IACN,IAAI,EAAE,WAAW,EACjB,MAAM,EAAC,aAAa,gBACR,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,MAAM,GACnB,IACG,EAEP,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,YAE1B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBACnB,CAAC,KAAC,IAAI,IACL,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC5B,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAC,MAAM,EACjB,cAAc,EAAC,MAAM,EACrB,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,WAAW,EAAE,IAAI,CAAC,cAAc,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,sBAEV,IAAI,CAAC,MAAM,YAE7B,gBAAa,GACP,CAAC;oBACR,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,KAAC,aAAa,IAChC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,sBAAsB,EACrC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAC,yBAAyB,EAC/B,MAAM,EAAE,IAAI,GACX,CACD,GAEG,IACc,CACrB,CAAC;AACH,CAAC","sourcesContent":["import type Menu from \"./Menu.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport List from \"./List.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\nimport Button from \"./Button.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nexport default function MenuTemplate(this: Menu) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tid={`${this._id}-menu-rp`}\n\t\t\tclass=\"ui5-menu-rp\"\n\t\t\tplacement=\"Bottom\"\n\t\t\tverticalAlign=\"Bottom\"\n\t\t\thorizontalAlign={this.horizontalAlign}\n\t\t\topener={this.opener}\n\t\t\topen={this.open}\n\t\t\tpreventInitialFocus={true}\n\t\t\thideArrow={true}\n\t\t\tallowTargetOverlap={true}\n\t\t\taccessibleName={this.acessibleNameText}\n\t\t\tonBeforeOpen={this._beforePopoverOpen}\n\t\t\tonOpen={this._afterPopoverOpen}\n\t\t\tonBeforeClose={this._beforePopoverClose}\n\t\t\tonClose={this._afterPopoverClose}\n\t\t>\n\t\t\t{this.isPhone &&\n\t\t\t\t<div slot=\"header\" class=\"ui5-menu-dialog-header\">\n\t\t\t\t\t<div class=\"ui5-menu-dialog-title\">\n\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t{this.headerText}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={declineIcon}\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\taria-label={this.labelClose}\n\t\t\t\t\t\tonClick={this._close}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div\n\t\t\t\tid={`${this._id}-menu-main`}\n\t\t\t>\n\t\t\t\t{this.items.length ?\n\t\t\t\t\t(<List\n\t\t\t\t\t\tid={`${this._id}- menu-list`}\n\t\t\t\t\t\tselectionMode=\"None\"\n\t\t\t\t\t\tloading={this.loading}\n\t\t\t\t\t\tloadingDelay={this.loadingDelay}\n\t\t\t\t\t\tseparators=\"None\"\n\t\t\t\t\t\taccessibleRole=\"Menu\"\n\t\t\t\t\t\tonItemClick={this._itemClick}\n\t\t\t\t\t\tonMouseOver={this._itemMouseOver}\n\t\t\t\t\t\tonKeyDown={this._itemKeyDown}\n\t\t\t\t\t\t// handles event from slotted children\n\t\t\t\t\t\tonui5-close-menu={this._close}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</List>)\n\t\t\t\t\t: this.loading && (<BusyIndicator\n\t\t\t\t\t\tid={`${this._id}-menu-busy-indicator`}\n\t\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\t\tclass=\"ui5-menu-busy-indicator\"\n\t\t\t\t\t\tactive={true}\n\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</div>\n\t\t</ResponsivePopover >\n\t);\n}\n"]}

package/dist/Popover.js

@@ -471,9 +471,9 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         // Restricts the arrow's translate value along each dimension,
         // so that the arrow does not clip over the popover's rounded borders.
-        const safeRangeForArrowY = popoverSize.height / 2 - borderRadius - ARROW_SIZE / 2;
+        const safeRangeForArrowY = popoverSize.height / 2 - borderRadius - ARROW_SIZE / 2 - 2;
         arrowTranslateY = clamp(arrowTranslateY, -safeRangeForArrowY, safeRangeForArrowY);
-        const safeRangeForArrowX = popoverSize.width / 2 - borderRadius - ARROW_SIZE / 2;
+        const safeRangeForArrowX = popoverSize.width / 2 - borderRadius - ARROW_SIZE / 2 - 2;
         arrowTranslateX = clamp(arrowTranslateX, -safeRangeForArrowX, safeRangeForArrowX);
         return {
             x: Math.round(arrowTranslateX),