@ui5/webcomponents 2.7.1 → 2.7.3

package/dist/custom-elements.json

@@ -2282,24 +2282,24 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n * ### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`",
+          "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`",
           "name": "ButtonBadge",
           "members": [
             {
               "kind": "field",
               "name": "design",
               "type": {
-                "text": "BadgeDesign",
+                "text": "ButtonBadgeDesign",
                 "references": [
                   {
-                    "name": "BadgeDesign",
+                    "name": "ButtonBadgeDesign",
                     "package": "@ui5/webcomponents",
                     "module": "dist/types/ButtonBadgeDesign.js"
                   }
                 ]
               },
               "default": "\"AttentionDot\"",
-              "description": "Determines where the badge should be placed and how it should be styled.",
+              "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.",
               "privacy": "public"
             },
             {
@@ -2309,13 +2309,13 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
               "privacy": "public"
             }
           ],
           "attributes": [
             {
-              "description": "Determines where the badge should be placed and how it should be styled.",
+              "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.",
               "name": "design",
               "default": "\"AttentionDot\"",
               "fieldName": "design",
@@ -2324,7 +2324,7 @@
               }
             },
             {
-              "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.",
               "name": "text",
               "default": "\"\"",
               "fieldName": "text",

package/dist/features/InputSuggestionsTemplate.d.ts

@@ -1,3 +1,7 @@
 import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Input from "../Input.js";
-export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+export default function InputSuggestionsTemplate(this: Input, hooks?: {
+    suggestionsList?: (this: Input) => JsxTemplateResult;
+    valueStateMessage: (this: Input) => JsxTemplateResult;
+    valueStateMessageInputIcon: (this: Input) => string;
+}): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/features/InputSuggestionsTemplate.js

@@ -5,18 +5,21 @@ import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
-export default function InputSuggestionsTemplate(valueStateMessage, valueStateMessageInputIcon) {
+export default function InputSuggestionsTemplate(hooks) {
+    const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+    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 &&
                 _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", children: [_jsxs("div", { class: "row", children: [_jsx("span", { children: this._headerTitleText }), _jsx(Button, { class: "ui5-responsive-popover-close-btn", icon: decline, design: "Transparent", onClick: this._closePicker })] }), _jsx("div", { class: "row", children: _jsx("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, onChange: this._handleChange }) }) })] }), 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", { 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,
                         "ui5-responsive-popover-header--focused": this._isValueStateFocused,
                         ...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)] }), suggestionsList.call(this), this._isPhone &&
+                    }, style: this.styles.suggestionPopoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: valueStateMessageInputIcon?.call(this) }), this.open && valueStateMessage?.call(this)] }), suggestionsList.call(this), this._isPhone &&
                 _jsx("div", { slot: "footer", class: "ui5-responsive-popover-footer", children: _jsx(Button, { design: "Transparent", onClick: this._closePicker, children: "OK" }) })] }));
 }
-function suggestionsList() {
+function defaultSuggestionsList() {
     return (_jsx(List, { separators: this.suggestionSeparators, selectionMode: "Single", onMouseDown: this.onItemMouseDown, onItemClick: this._handleSuggestionItemPress, onSelectionChange: this._handleSelectionChange, children: _jsx("slot", {}) }));
 }
 //# sourceMappingURL=InputSuggestionsTemplate.js.map

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\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {\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\t<Button\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\t\t\ticon={decline}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this._closePicker}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</Button>\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\tonChange={this._handleChange}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\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{ this.open && valueStateMessage.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t\t<div\n\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header--focused\": this._isValueStateFocused,\n\t\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t\t>\n\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{ this.open && valueStateMessage.call(this) }\n\t\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ 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=\"Transparent\"\n\t\t\t\t\t\tonClick={this._closePicker}\n\t\t\t\t\t>\n\t\t\t\t\t\tOK\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 suggestionsList(this: Input) {\n\treturn (\n\t\t<List\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\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\n\nimport List from \"../List.js\";\nimport ResponsivePopover from \"../ResponsivePopover.js\";\nimport Button from \"../Button.js\";\n\nexport default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {\n\tconst suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;\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\t<Button\n\t\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\t\t\ticon={decline}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this._closePicker}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</Button>\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\tonChange={this._handleChange}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>\n\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{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t{!this._isPhone && this.hasValueStateMessage &&\n\t\t\t\t\t<div\n\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header\": true,\n\t\t\t\t\t\t\t\"ui5-responsive-popover-header--focused\": this._isValueStateFocused,\n\t\t\t\t\t\t\t...this.classes.popoverValueState,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={this.styles.suggestionPopoverHeader}\n\t\t\t\t\t>\n\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{ this.open && valueStateMessage?.call(this) }\n\t\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ 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=\"Transparent\"\n\t\t\t\t\t\tonClick={this._closePicker}\n\t\t\t\t\t>\n\t\t\t\t\t\tOK\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\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"]}