@ui5/webcomponents 2.19.2 → 2.20.0-rc.1

package/dist/custom-elements.json

@@ -26,7 +26,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`",
+          "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `interactive` property is set to true.\n- [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`",
           "name": "Avatar",
           "slots": [
             {
@@ -56,7 +56,25 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
+              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
+              "privacy": "public",
+              "deprecated": "Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility."
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "AvatarMode",
+                "references": [
+                  {
+                    "name": "AvatarMode",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/AvatarMode.js"
+                  }
+                ]
+              },
+              "default": "\"Image\"",
+              "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.",
               "privacy": "public"
             },
             {
@@ -188,12 +206,22 @@
               }
             },
             {
-              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
+              "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
               "name": "interactive",
               "default": "false",
               "fieldName": "interactive",
               "type": {
                 "text": "boolean"
+              },
+              "deprecated": "Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility."
+            },
+            {
+              "description": "Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.",
+              "name": "mode",
+              "default": "\"Image\"",
+              "fieldName": "mode",
+              "type": {
+                "text": "\"Image\" | \"Decorative\" | \"Interactive\""
               }
             },
             {
@@ -3610,6 +3638,28 @@
               "description": "Defines the `ui5-color-palette-item` elements."
             }
           ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible name of the component.",
+              "default": "undefined",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "default": "undefined",
+              "privacy": "public"
+            }
+          ],
           "events": [
             {
               "name": "item-click",
@@ -3626,6 +3676,26 @@
               "description": "Fired when the user selects a color."
             }
           ],
+          "attributes": [
+            {
+              "description": "Defines the accessible name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "name": "accessible-name-ref",
+              "default": "undefined",
+              "fieldName": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              }
+            }
+          ],
           "superclass": {
             "name": "UI5Element",
             "package": "@ui5/webcomponents-base",
@@ -3787,6 +3857,26 @@
               "default": "undefined",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible name of the component.",
+              "default": "undefined",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "default": "undefined",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -3885,6 +3975,24 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines the accessible name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "name": "accessible-name-ref",
+              "default": "undefined",
+              "fieldName": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
             {
               "description": "Defines the open | closed state of the popover.",
               "name": "open",
@@ -3979,6 +4087,26 @@
               "default": "false",
               "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible name of the component.",
+              "default": "undefined",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "default": "undefined",
+              "privacy": "public"
             }
           ],
           "events": [
@@ -4017,6 +4145,24 @@
               "type": {
                 "text": "boolean"
               }
+            },
+            {
+              "description": "Defines the accessible name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "name": "accessible-name-ref",
+              "default": "undefined",
+              "fieldName": "accessibleNameRef",
+              "type": {
+                "text": "string | undefined"
+              }
             }
           ],
           "superclass": {
@@ -4595,6 +4741,14 @@
                 "name": "ListItemGroup",
                 "module": "dist/ListItemGroup.js"
               }
+            },
+            {
+              "description": "Used to style the title of the group header",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "ListItemGroup",
+                "module": "dist/ListItemGroup.js"
+              }
             }
           ],
           "attributes": [
@@ -4915,7 +5069,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`",
+          "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`",
           "name": "DatePicker",
           "cssParts": [
             {
@@ -11485,6 +11639,10 @@
             {
               "description": "Used to style the header item of the group",
               "name": "header"
+            },
+            {
+              "description": "Used to style the title of the group header",
+              "name": "title"
             }
           ],
           "slots": [
@@ -13751,6 +13909,14 @@
                 "name": "ListItemGroup",
                 "module": "dist/ListItemGroup.js"
               }
+            },
+            {
+              "description": "Used to style the title of the group header",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "ListItemGroup",
+                "module": "dist/ListItemGroup.js"
+              }
             }
           ],
           "attributes": [
@@ -16879,6 +17045,26 @@
               "description": "Defines the tooltip of the component.",
               "default": "undefined",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "iconSelected",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the icon to be displayed for the selected (filled) rating symbol.",
+              "default": "\"favorite\"",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "iconUnselected",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.",
+              "default": "\"unfavorite\"",
+              "privacy": "public"
             }
           ],
           "events": [
@@ -16971,6 +17157,24 @@
               "type": {
                 "text": "string | undefined"
               }
+            },
+            {
+              "description": "Defines the icon to be displayed for the selected (filled) rating symbol.",
+              "name": "icon-selected",
+              "default": "\"favorite\"",
+              "fieldName": "iconSelected",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "description": "Defines the icon to be displayed for the unselected (empty) rating symbol.",
+              "name": "icon-unselected",
+              "default": "\"unfavorite\"",
+              "fieldName": "iconUnselected",
+              "type": {
+                "text": "string | undefined"
+              }
             }
           ],
           "superclass": {
@@ -19883,6 +20087,14 @@
                 "name": "ListItemGroup",
                 "module": "dist/ListItemGroup.js"
               }
+            },
+            {
+              "description": "Used to style the title of the group header",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "ListItemGroup",
+                "module": "dist/ListItemGroup.js"
+              }
             }
           ],
           "attributes": [
@@ -25580,6 +25792,17 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+            },
+            {
+              "name": "close-overflow",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the overflow popover is closed.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
             }
           ],
           "attributes": [
@@ -25715,7 +25938,17 @@
             "module": "dist/ToolbarItem.js"
           },
           "tagName": "ui5-toolbar-button",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "name": "default",
+              "description": "Wrapped component slot.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -25745,6 +25978,12 @@
           "kind": "class",
           "description": "Represents an abstract class for items, used in the `ui5-toolbar`.",
           "name": "ToolbarItem",
+          "slots": [
+            {
+              "name": "default",
+              "description": "Wrapped component slot."
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -25774,6 +26013,15 @@
               "privacy": "public"
             }
           ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the overflow popover is closed."
+            }
+          ],
           "attributes": [
             {
               "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",
@@ -25799,6 +26047,7 @@
             "package": "@ui5/webcomponents-base",
             "module": "dist/UI5Element.js"
           },
+          "tagName": "ui5-toolbar-item",
           "customElement": true
         }
       ],
@@ -25810,6 +26059,14 @@
             "name": "ToolbarItem",
             "module": "dist/ToolbarItem.js"
           }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-toolbar-item",
+          "declaration": {
+            "name": "ToolbarItem",
+            "module": "dist/ToolbarItem.js"
+          }
         }
       ]
     },
@@ -25824,7 +26081,11 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options."
+              "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
             },
             {
               "name": "label",
@@ -25963,6 +26224,17 @@
                 "text": "CustomEvent"
               },
               "description": "Fired after the component's dropdown menu closes."
+            },
+            {
+              "name": "close-overflow",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the overflow popover is closed.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
             }
           ],
           "attributes": [
@@ -26192,6 +26464,16 @@
           },
           "tagName": "ui5-toolbar-separator",
           "customElement": true,
+          "slots": [
+            {
+              "name": "default",
+              "description": "Wrapped component slot.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
+            }
+          ],
           "attributes": [
             {
               "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",
@@ -26219,6 +26501,19 @@
                 "module": "dist/ToolbarItem.js"
               }
             }
+          ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the overflow popover is closed.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
+            }
           ]
         }
       ],
@@ -26339,7 +26634,30 @@
             "module": "dist/ToolbarItem.js"
           },
           "tagName": "ui5-toolbar-spacer",
-          "customElement": true
+          "customElement": true,
+          "slots": [
+            {
+              "name": "default",
+              "description": "Wrapped component slot.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "close-overflow",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the overflow popover is closed.",
+              "inheritedFrom": {
+                "name": "ToolbarItem",
+                "module": "dist/ToolbarItem.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -28541,6 +28859,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/AvatarMode.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AvatarMode",
+            "module": "dist/types/AvatarMode.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/AvatarShape.js",

package/dist/features/InputSuggestionsTemplate.js

@@ -5,6 +5,7 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 import ListAccessibleRole from "../types/ListAccessibleRole.js";
+import Title from "../Title.js";
 export default function InputSuggestionsTemplate(hooks) {
     const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
     // Mobile header hook - intended only for MultiInput design scenario
@@ -12,7 +13,7 @@ export default function InputSuggestionsTemplate(hooks) {
     const valueStateMessage = hooks?.valueStateMessage;
     const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
     return (_jsxs(ResponsivePopover, { class: this.classes.popover, hideArrow: true, preventFocusRestore: true, preventInitialFocus: true, placement: "Bottom", horizontalAlign: "Start", tabindex: -1, style: this.styles.suggestionsPopover, onOpen: this._afterOpenPicker, onClose: this._afterClosePicker, onScroll: this._scroll, open: this.open, opener: this, accessibleName: this._popupLabel, children: [this._isPhone &&
-                _jsx(_Fragment, { children: _jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", children: [_jsx("div", { class: "row", children: _jsx("span", { children: this._headerTitleText }) }), _jsx("div", { class: "row", children: _jsxs("div", { class: "input-root-phone native-input-wrapper", children: [_jsx(Input, { class: "ui5-input-inner-phone", type: this.inputType, value: this.value, showClearIcon: this.showClearIcon, placeholder: this.placeholder, onInput: this._handleInput }), mobileHeader?.call(this)] }) }), this.hasValueStateMessage &&
+                _jsx(_Fragment, { children: _jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", children: [_jsx("div", { class: "row", children: _jsx(Title, { level: "H1", wrappingType: "None", class: "ui5-responsive-popover-header-text", children: this._headerTitleText }) }), _jsx("div", { class: "row", children: _jsxs("div", { class: "input-root-phone native-input-wrapper", children: [_jsx(Input, { class: "ui5-input-inner-phone", type: this.inputType, value: this.value, showClearIcon: this.showClearIcon, placeholder: this.placeholder, onInput: this._handleInput }), mobileHeader?.call(this)] }) }), this.hasValueStateMessage &&
                                 _jsxs("div", { class: this.classes.popoverValueState, style: this.styles.suggestionPopoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: valueStateMessageInputIcon?.call(this) }), this.open && valueStateMessage?.call(this)] })] }) }), !this._isPhone && this.hasValueStateMessage &&
                 _jsxs("div", { slot: "header", class: {
                         "ui5-responsive-popover-header": true,

package/dist/features/InputSuggestionsTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSuggestionsTemplate.js","sourceRoot":"","sources":["../../src/features/InputSuggestionsTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JsxTemplateResult } from \"@ui5/webcomponents-base/dist/index.js\";\nimport Input from \"../Input.js\";\nimport Icon from \"../Icon.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\nimport ListAccessibleRole from \"../types/ListAccessibleRole.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {\n\tconst suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;\n\t// Mobile header hook - intended only for MultiInput design scenario\n\tconst mobileHeader = hooks?.mobileHeader;\n\tconst valueStateMessage = hooks?.valueStateMessage;\n\tconst valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;\n\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tclass={this.classes.popover}\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\ttabindex={-1}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonOpen={this._afterOpenPicker}\n\t\t\tonClose={this._afterClosePicker}\n\t\t\tonScroll={this._scroll}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\taccessibleName={this._popupLabel}\n\t\t>\n\t\t\t{this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<div class=\"input-root-phone native-input-wrapper\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-input-inner-phone\"\n\t\t\t\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{mobileHeader?.call(this)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\t\t\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t\t\t{this.open && valueStateMessage?.call(this)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t{this.open && valueStateMessage?.call(this)}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ this.showSuggestions && suggestionsList.call(this) }\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._confirmMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsOkButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._cancelMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsCancelButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\t);\n}\n\nfunction defaultSuggestionsList(this: Input) {\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n"]}
+{"version":3,"file":"InputSuggestionsTemplate.js","sourceRoot":"","sources":["../../src/features/InputSuggestionsTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JsxTemplateResult } from \"@ui5/webcomponents-base/dist/index.js\";\nimport Input from \"../Input.js\";\nimport Icon from \"../Icon.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\nimport ListAccessibleRole from \"../types/ListAccessibleRole.js\";\nimport Title from \"../Title.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {\n\tconst suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;\n\t// Mobile header hook - intended only for MultiInput design scenario\n\tconst mobileHeader = hooks?.mobileHeader;\n\tconst valueStateMessage = hooks?.valueStateMessage;\n\tconst valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;\n\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tclass={this.classes.popover}\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\ttabindex={-1}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonOpen={this._afterOpenPicker}\n\t\t\tonClose={this._afterClosePicker}\n\t\t\tonScroll={this._scroll}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\taccessibleName={this._popupLabel}\n\t\t>\n\t\t\t{this._isPhone &&\n\t\t\t\t<>\n\t\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\">\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<Title\n\t\t\t\t\t\t\t\tlevel=\"H1\"\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-header-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this._headerTitleText}\n\t\t\t\t\t\t\t</Title>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t\t<div class=\"input-root-phone native-input-wrapper\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-input-inner-phone\"\n\t\t\t\t\t\t\t\t\ttype={this.inputType}\n\t\t\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{mobileHeader?.call(this)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\t\t\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t\t\t\t{this.open && valueStateMessage?.call(this)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t<div\n\t\t\t\t\tslot=\"header\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={valueStateMessageInputIcon?.call(this)} />\n\t\t\t\t\t{this.open && valueStateMessage?.call(this)}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.showSuggestions && suggestionsList.call(this)}\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._confirmMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsOkButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._cancelMobileValue}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._suggestionsCancelButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\t);\n}\n\nfunction defaultSuggestionsList(this: Input) {\n\treturn (\n\t\t<List\n\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\tseparators={this.suggestionSeparators}\n\t\t\tselectionMode=\"Single\"\n\t\t\tonMouseDown={this.onItemMouseDown}\n\t\t\tonItemClick={this._handleSuggestionItemPress}\n\t\t\tonSelectionChange={this._handleSelectionChange}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</List>\n\t);\n}\n"]}