@ui5/webcomponents 2.19.0 → 2.20.0-rc.0

package/dist/custom-elements.json

@@ -3610,6 +3610,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 +3648,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 +3829,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 +3947,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 +4059,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 +4117,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": {
@@ -4915,7 +5033,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": [
             {
@@ -16879,6 +16997,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 +17109,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": {
@@ -25580,6 +25736,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 +25882,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 +25922,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 +25957,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 +25991,7 @@
             "package": "@ui5/webcomponents-base",
             "module": "dist/UI5Element.js"
           },
+          "tagName": "ui5-toolbar-item",
           "customElement": true
         }
       ],
@@ -25810,6 +26003,14 @@
             "name": "ToolbarItem",
             "module": "dist/ToolbarItem.js"
           }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-toolbar-item",
+          "declaration": {
+            "name": "ToolbarItem",
+            "module": "dist/ToolbarItem.js"
+          }
         }
       ]
     },
@@ -25824,7 +26025,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 +26168,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 +26408,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 +26445,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 +26578,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": [

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"]}