diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index e4f1e29a692..9ada5848b5c 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -193,7 +193,7 @@ }, "tagName": "ui5-ai-button", "customElement": true, - "_ui5experimental": "The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.0.0", "_ui5privacy": "public" } @@ -332,7 +332,7 @@ }, "tagName": "ui5-ai-button-state", "customElement": true, - "_ui5experimental": "The Button and ButtonState web components are available since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package (including ButtonState) is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.0.0", "_ui5privacy": "public", "_ui5abstract": true @@ -640,6 +640,24 @@ "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -658,12 +676,37 @@ "name": "item-click", "_ui5privacy": "public", "type": { - "text": "CustomEvent" + "text": "CustomEvent", + "references": [ + { + "name": "InputItemClickEventDetail", + "package": "@ui5/webcomponents-ai", + "module": "dist/Input.js" + } + ] }, "description": "Fired when an item from the AI actions menu is clicked.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": false + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "HTMLElement" + }, + "name": "item", + "_ui5privacy": "public", + "description": "The currently clicked menu item." + }, + { + "type": { + "text": "string" + }, + "name": "text", + "_ui5privacy": "public", + "description": "The text of the currently clicked menu item." + } + ] }, { "name": "stop-generation", @@ -828,7 +871,7 @@ }, "tagName": "ui5-ai-input", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.16.0", "_ui5privacy": "public", "cssParts": [ @@ -1156,7 +1199,7 @@ }, "tagName": "ui5-ai-prompt-input", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5privacy": "public" } ], @@ -1573,7 +1616,7 @@ }, "tagName": "ui5-ai-textarea", "customElement": true, - "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.\nFurthermore, the package supports **Horizon** themes only.", "_ui5since": "2.16.0", "_ui5privacy": "public", "cssParts": [ diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 5ad0e2dc031..430e5b44336 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -2125,7 +2125,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn desktop and tablet devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn phone devices, the side navigation is hidden by default and can\nbe displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", + "description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`", "name": "NavigationLayout", "slots": [ { @@ -3509,6 +3509,21 @@ "description": "Indicates whether the items picker is open.", "privacy": "public" }, + { + "kind": "field", + "name": "fieldLoading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "kind": "field", "name": "showClearIcon", @@ -3709,6 +3724,19 @@ "text": "boolean" } }, + { + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "description": "Defines whether the clear icon of the search will be shown.", "name": "show-clear-icon", @@ -5603,6 +5631,21 @@ "module": "dist/Search.js" } }, + { + "kind": "field", + "name": "fieldLoading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the input field.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "kind": "field", "name": "showClearIcon", @@ -5738,6 +5781,19 @@ "module": "dist/Search.js" } }, + { + "description": "Indicates whether a loading indicator should be shown in the input field.", + "name": "field-loading", + "default": "false", + "fieldName": "fieldLoading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, { "description": "Defines whether the clear icon of the search will be shown.", "name": "show-clear-icon", @@ -6099,7 +6155,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on phones and tablets.\nPadding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", + "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user’s current work context\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)", "name": "SideNavigation", "slots": [ { @@ -6151,7 +6207,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", "privacy": "public" }, { @@ -6205,7 +6261,7 @@ ], "attributes": [ { - "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** The collapsed mode is not supported on phones.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for phones where the collapsed mode should not be used.", + "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.", "name": "collapsed", "default": "false", "fieldName": "collapsed", @@ -6459,7 +6515,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined", "inheritedFrom": { @@ -6626,7 +6682,7 @@ } }, { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -6953,7 +7009,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined" }, @@ -7137,7 +7193,7 @@ ], "attributes": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -7276,7 +7332,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "undefined", "inheritedFrom": { @@ -7444,7 +7500,7 @@ "_ui5abstract": true, "attributes": [ { - "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "name": "icon", "default": "undefined", "fieldName": "icon", @@ -9272,6 +9328,23 @@ "default": "undefined", "privacy": "public" }, + { + "kind": "field", + "name": "avatarColorScheme", + "type": { + "text": "AvatarColorScheme", + "references": [ + { + "name": "AvatarColorScheme", + "package": "@ui5/webcomponents", + "module": "dist/types/AvatarColorScheme.js" + } + ] + }, + "default": "\"Auto\"", + "description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "privacy": "public" + }, { "kind": "field", "name": "titleText", @@ -9353,6 +9426,15 @@ "text": "string | undefined" } }, + { + "description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.", + "name": "avatar-color-scheme", + "default": "\"Auto\"", + "fieldName": "avatarColorScheme", + "type": { + "text": "\"Auto\" | \"Transparent\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\"" + } + }, { "description": "Defines the title text of the user.", "name": "title-text", @@ -9928,7 +10010,7 @@ "name": "account", "description": "Defines the user account.", "_ui5type": { - "text": "Array | undefined", + "text": "Array", "references": [ { "name": "UserMenuAccount", @@ -10138,7 +10220,7 @@ "name": "additionalContent", "description": "Defines additional content displayed below the items list.", "_ui5type": { - "text": "Array | undefined" + "text": "Array" }, "_ui5privacy": "public" } @@ -13763,7 +13845,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Automatically calculates the navigation layout mode based on the screen device type.\n`Expanded` on desktop and `Collapsed` on tablet and phone.", + "description": "Automatically calculates the navigation layout mode based on the screen width.\n`Collapsed` on small screens (screen width of 599px or less) and `Expanded` on larger screens (screen width of 600px or more).", "default": "Auto", "name": "Auto", "readonly": true diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 34cb5431301..1bc9ac57713 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -41,7 +41,7 @@ }, { "name": "badge", - "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, you can use the `ui5-tag` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.", + "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.", "_ui5since": "1.7.0", "_ui5type": { "text": "Array" @@ -324,6 +324,93 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/AvatarBadge.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\nThe badge can display an icon and supports different states for visual affordance.\n\n### Usage\n\nThe badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n\n```html\n\n \n\n```\n\n### Keyboard Handling\n\nThe badge does not receive keyboard focus.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/AvatarBadge.js\";`", + "name": "AvatarBadge", + "members": [ + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "state", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "description": "Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states", + "default": "\"None\"", + "privacy": "public" + } + ], + "attributes": [ + { + "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the state of the badge, which determines its styling.\n\nAvailable options:\n- `None` (default) - Standard appearance\n- `Positive` - Green, used for success/approved states\n- `Critical` - Orange, used for warning states\n- `Negative` - Red, used for error/rejected states\n- `Information` - Blue, used for informational states", + "name": "state", + "default": "\"None\"", + "fieldName": "state", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-avatar-badge", + "customElement": true, + "_ui5since": "2.19.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "AvatarBadge", + "module": "dist/AvatarBadge.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-avatar-badge", + "declaration": { + "name": "AvatarBadge", + "module": "dist/AvatarBadge.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/AvatarGroup.js", @@ -732,7 +819,7 @@ "default": "\"Toolbar\"", "fieldName": "accessibleRole", "type": { - "text": "\"Toolbar\" | \"None\"" + "text": "\"None\" | \"Toolbar\"" } }, { @@ -1536,7 +1623,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -3464,7 +3551,7 @@ "type": { "text": "number" }, - "description": "The index of the target page", + "description": "The index of the target item", "_ui5privacy": "public" } ], @@ -3932,7 +4019,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -4262,6 +4349,24 @@ "privacy": "public", "default": "undefined", "_ui5since": "1.21.0" + }, + { + "kind": "field", + "name": "placement", + "type": { + "text": "PopoverPlacement", + "references": [ + { + "name": "PopoverPlacement", + "package": "@ui5/webcomponents", + "module": "dist/types/PopoverPlacement.js" + } + ] + }, + "default": "\"Bottom\"", + "description": "Determines on which side the component is placed at.", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -4360,6 +4465,15 @@ "type": { "text": "string | HTMLElement | null | undefined" } + }, + { + "description": "Determines on which side the component is placed at.", + "name": "placement", + "default": "\"Bottom\"", + "fieldName": "placement", + "type": { + "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"" + } } ], "superclass": { @@ -4862,7 +4976,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -5329,6 +5443,12 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/CustomAnnouncement.js", + "declarations": [], + "exports": [] + }, { "kind": "javascript-module", "path": "dist/DateComponentBase.js", @@ -5828,9 +5948,21 @@ "type": { "text": "Date | null" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true + }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", "readonly": true }, { @@ -6124,7 +6256,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -6227,10 +6359,20 @@ } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "name": "date-value", "default": "null", "fieldName": "dateValue", + "type": { + "text": "any" + }, + "deprecated": "Use dateValueAsync instead" + }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", "type": { "text": "any" } @@ -6398,6 +6540,7 @@ "description": "**Note:** The getter method is inherited and not supported. If called it will return an empty value.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", "readonly": true, "inheritedFrom": { "name": "DatePicker", @@ -6766,6 +6909,21 @@ "module": "dist/DatePicker.js" } }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { "kind": "field", "name": "primaryCalendarType", @@ -6976,7 +7134,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "DatePicker", @@ -7126,6 +7284,19 @@ "module": "dist/DatePicker.js" } }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", + "type": { + "text": "any" + }, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, { "description": "Sets a calendar type used for display.\nIf not set, the calendar type of the global configuration is used.", "name": "primary-calendar-type", @@ -7796,9 +7967,25 @@ "type": { "text": "Date | null" }, - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "privacy": "public", "default": "null", + "deprecated": "Use dateValueAsync instead", + "readonly": true, + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "kind": "field", + "name": "dateValueAsync", + "type": { + "text": "Promise" + }, + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "privacy": "public", + "default": "Promise", "readonly": true, "inheritedFrom": { "name": "DatePicker", @@ -8000,7 +8187,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "DatePicker", @@ -8151,13 +8338,27 @@ } }, { - "description": "Currently selected date represented as a Local JavaScript Date instance.", + "description": "Currently selected date represented as a Local JavaScript Date instance.\nNote: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met.", "name": "date-value", "default": "null", "fieldName": "dateValue", "type": { "text": "any" }, + "deprecated": "Use dateValueAsync instead", + "inheritedFrom": { + "name": "DatePicker", + "module": "dist/DatePicker.js" + } + }, + { + "description": "Promise that resolves to the currently selected date represented as a Local JavaScript Date instance.", + "name": "date-value-async", + "default": "Promise", + "fieldName": "dateValueAsync", + "type": { + "text": "any" + }, "inheritedFrom": { "name": "DatePicker", "module": "dist/DatePicker.js" @@ -8774,7 +8975,7 @@ "default": "\"None\"", "fieldName": "state", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -9628,7 +9829,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -10405,7 +10606,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Default\" | \"Contrast\" | \"Neutral\" | \"NonInteractive\"" } }, { @@ -10746,6 +10947,24 @@ "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.", "privacy": "public", "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0" } ], "events": [ @@ -10907,7 +11126,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -10990,6 +11209,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + } } ], "superclass": { @@ -11181,15 +11409,6 @@ "_ui5type": { "text": "Array" } - }, - { - "name": "default", - "description": "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.", - "_ui5propertyName": "text", - "_ui5type": { - "text": "Array" - }, - "_ui5privacy": "public" } ], "members": [ @@ -11751,6 +11970,17 @@ "description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.", "privacy": "public" }, + { + "kind": "field", + "name": "stickyHeader", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "privacy": "public", + "_ui5since": "2.19.0" + }, { "kind": "field", "name": "accessibleName", @@ -12193,6 +12423,15 @@ "text": "number" } }, + { + "description": "Indicates whether the List header is sticky or not.\nIf stickyHeader is set to true, then whenever you scroll the content or\nthe application, the header of the list will be always visible.", + "name": "sticky-header", + "default": "false", + "fieldName": "stickyHeader", + "type": { + "text": "boolean" + } + }, { "description": "Defines the accessible name of the component.", "name": "accessible-name", @@ -12459,7 +12698,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -12805,7 +13044,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -13481,7 +13720,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -13569,7 +13808,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -14474,7 +14713,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -14776,7 +15015,7 @@ "default": "\"Information\"", "fieldName": "design", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"ColorSet1\" | \"ColorSet2\"" } }, { @@ -15018,6 +15257,16 @@ "privacy": "public", "_ui5since": "1.0.0-rc.5" }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether a loading indicator should be shown in the picker.", + "privacy": "public" + }, { "kind": "field", "name": "filter", @@ -15171,6 +15420,35 @@ "description": "an array of the selected items." } ] + }, + { + "name": "value-state-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "MultiComboBoxValueStateChangeEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/MultiComboBox.js" + } + ] + }, + "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.19.0", + "_ui5parameters": [ + { + "type": { + "text": "string" + }, + "name": "valueState", + "_ui5privacy": "public", + "description": "The new `valueState` that will be set." + } + ] } ], "attributes": [ @@ -15234,7 +15512,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -15255,6 +15533,15 @@ "text": "boolean" } }, + { + "description": "Indicates whether a loading indicator should be shown in the picker.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, { "description": "Defines the filter type of the component.", "name": "filter", @@ -16089,6 +16376,28 @@ "name": "Input", "module": "dist/Input.js" } + }, + { + "kind": "field", + "name": "filter", + "type": { + "text": "InputSuggestionsFilter", + "references": [ + { + "name": "InputSuggestionsFilter", + "package": "@ui5/webcomponents", + "module": "dist/types/InputSuggestionsFilter.js" + } + ] + }, + "description": "Defines the filter type of the component.", + "default": "\"None\"", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "events": [ @@ -16363,7 +16672,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "Input", @@ -16473,6 +16782,19 @@ "name": "Input", "module": "dist/Input.js" } + }, + { + "description": "Defines the filter type of the component.", + "name": "filter", + "default": "\"None\"", + "fieldName": "filter", + "type": { + "text": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"" + }, + "inheritedFrom": { + "name": "Input", + "module": "dist/Input.js" + } } ], "superclass": { @@ -17204,7 +17526,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public" }, { @@ -17228,6 +17550,17 @@ "description": "Determines if there is no enough space, the component can be placed\nover the target.", "privacy": "public" }, + { + "kind": "field", + "name": "resizable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0" + }, { "kind": "field", "name": "opener", @@ -17435,7 +17768,7 @@ } }, { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "name": "modal", "default": "false", "fieldName": "modal", @@ -17461,6 +17794,15 @@ "text": "boolean" } }, + { + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", + "type": { + "text": "boolean" + } + }, { "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen 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.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "name": "opener", @@ -17697,6 +18039,21 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/PopoverResize.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PopoverResize", + "module": "dist/PopoverResize.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/Popup.js", @@ -18122,7 +18479,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } } ], @@ -18372,7 +18729,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -18494,6 +18851,9 @@ "description": "Defines start point of a selection - position of a first handle on the slider.", "default": "0", "privacy": "public", + "type": { + "text": "number" + }, "_ui5formProperty": true, "_ui5formEvents": "change,input" }, @@ -18503,6 +18863,9 @@ "description": "Defines end point of a selection - position of a second handle on the slider.", "default": "100", "privacy": "public", + "type": { + "text": "number" + }, "_ui5formProperty": true, "_ui5formEvents": "change,input" }, @@ -19219,7 +19582,7 @@ "text": "boolean" }, "default": "false", - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "privacy": "public", "inheritedFrom": { "name": "Popover", @@ -19255,6 +19618,21 @@ "module": "dist/Popover.js" } }, + { + "kind": "field", + "name": "resizable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "privacy": "public", + "_ui5since": "2.19.0", + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, { "kind": "field", "name": "opener", @@ -19530,7 +19908,7 @@ } }, { - "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.", + "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.", "name": "modal", "default": "false", "fieldName": "modal", @@ -19568,6 +19946,19 @@ "module": "dist/Popover.js" } }, + { + "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.", + "name": "resizable", + "default": "false", + "fieldName": "resizable", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Popover", + "module": "dist/Popover.js" + } + }, { "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen 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.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "name": "opener", @@ -20618,7 +21009,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -21638,7 +22029,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -21963,7 +22354,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -22983,7 +23374,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Neutral\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Default\" | \"Neutral\"" } }, { @@ -23519,7 +23910,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Selects the first cell of the row\n* Space - Toggles the selection of the row\n* Ctrl/Cmd + A - In multi selection mode, toggles the selection of all rows\n* Home - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* End - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* Page Up - Navigates one page up, if the focus is on the first row, navigates to the header row\n* Page Down - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* F2 - Focuses the first tabbable element in the row\n* F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Navigates right\n* Left - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* Home - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* End - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* Page Up - Navigates one page up while keeping the focus in same column\n* Page Down - Navigates one page down while keeping the focus in same column\n* F2 - Toggles the focus between the first tabbable cell content and the cell\n* Enter - Focuses the first tabbable cell content\n* F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* [Shift]Tab - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", + "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Selects the first cell of the row\n* Space - Toggles the selection of the row\n* Ctrl/Cmd + A - In multi selection mode, toggles the selection of all rows\n* Home - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* End - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* Page Up - Navigates one page up, if the focus is on the first row, navigates to the header row\n* Page Down - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* F2 - Focuses the first tabbable element in the row\n* F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* Down - Navigates down\n* Up - Navigates up\n* Right - Navigates right\n* Left - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* Home - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* End - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* Page Up - Navigates one page up while keeping the focus in same column\n* Page Down - Navigates one page down while keeping the focus in same column\n* F2 - Toggles the focus between the first tabbable cell content and the cell\n* Enter - Focuses the first tabbable cell content\n* F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* [Shift]Tab - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* [Shift]Tab - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)", "name": "Table", "slots": [ { @@ -26164,7 +26555,7 @@ "default": "\"Neutral\"", "fieldName": "design", "type": { - "text": "\"Positive\" | \"Negative\" | \"Critical\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" + "text": "\"Positive\" | \"Critical\" | \"Negative\" | \"Information\" | \"Neutral\" | \"Set1\" | \"Set2\"" } }, { @@ -26662,7 +27053,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -27151,7 +27542,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -27874,7 +28265,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" }, "inheritedFrom": { "name": "Button", @@ -28951,7 +29342,7 @@ "default": "\"Default\"", "fieldName": "design", "type": { - "text": "\"Transparent\" | \"Default\" | \"Positive\" | \"Negative\" | \"Emphasized\" | \"Attention\"" + "text": "\"Transparent\" | \"Positive\" | \"Negative\" | \"Default\" | \"Emphasized\" | \"Attention\"" } }, { @@ -29380,7 +29771,7 @@ "default": "\"None\"", "fieldName": "valueState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -30664,7 +31055,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "TreeItemBase", @@ -30742,7 +31133,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -31204,7 +31595,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" } }, { @@ -31274,7 +31665,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -31727,7 +32118,7 @@ "default": "\"None\"", "fieldName": "additionalTextState", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "TreeItemBase", @@ -31805,7 +32196,7 @@ "default": "\"None\"", "fieldName": "highlight", "type": { - "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" }, "inheritedFrom": { "name": "ListItem", @@ -34029,6 +34420,66 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/types/InputSuggestionsFilter.js", + "declarations": [ + { + "kind": "enum", + "name": "InputSuggestionsFilter", + "description": "Different filtering types of the Input.", + "_ui5privacy": "public", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines filtering by first symbol of each word of item's text.", + "default": "StartsWithPerTerm", + "name": "StartsWithPerTerm", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines filtering by starting symbol of item's text.", + "default": "StartsWith", + "name": "StartsWith", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Defines contains filtering.", + "default": "Contains", + "name": "Contains", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Removes any filtering applied while typing", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputSuggestionsFilter", + "module": "dist/types/InputSuggestionsFilter.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/types/InputType.js", diff --git a/config/version-info.json b/config/version-info.json index e778c9e4e10..b12946d9599 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -60,5 +60,6 @@ "2.15.0": "2.15.0", "2.16.1": "2.16.0", "2.17.0": "2.17.0", - "2.18.0": "2.18.0" + "2.18.0": "2.18.0", + "2.19.0": "2.19.0" } diff --git a/package.json b/package.json index b1a5d62dff5..970b9f5151c 100644 --- a/package.json +++ b/package.json @@ -40,11 +40,11 @@ "@storybook/addon-a11y": "10.2.3", "@storybook/addon-docs": "10.2.3", "@storybook/react-vite": "10.2.3", - "@ui5/webcomponents": "2.18.1", - "@ui5/webcomponents-ai": "2.18.1", - "@ui5/webcomponents-compat": "2.18.1", - "@ui5/webcomponents-fiori": "2.18.1", - "@ui5/webcomponents-icons": "2.18.1", + "@ui5/webcomponents": "2.19.0", + "@ui5/webcomponents-ai": "2.19.0", + "@ui5/webcomponents-compat": "2.19.0", + "@ui5/webcomponents-fiori": "2.19.0", + "@ui5/webcomponents-icons": "2.19.0", "react": "19.2.4", "react-dom": "19.2.4", "remark-gfm": "4.0.1", @@ -66,7 +66,7 @@ "@types/node": "24.10.9", "@types/react": "19.2.10", "@types/react-dom": "19.2.3", - "@ui5/webcomponents-tools": "2.18.1", + "@ui5/webcomponents-tools": "2.19.0", "@vitejs/plugin-react": "5.1.2", "chromatic": "15.0.0", "cssnano": "7.1.2", diff --git a/packages/ai/package.json b/packages/ai/package.json index aa5c650b573..04d6b727f2e 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -53,7 +53,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.18.0", + "@ui5/webcomponents-ai": "~2.19.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/ai/src/components/Button/index.tsx b/packages/ai/src/components/Button/index.tsx index 1902c40b031..d15408ed152 100644 --- a/packages/ai/src/components/Button/index.tsx +++ b/packages/ai/src/components/Button/index.tsx @@ -102,27 +102,28 @@ interface ButtonPropTypes /** * The `Button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `Button` * or by pressing keyboard keys like [Enter] or [Space]. - * + * * ### Usage - * + * * For the `Button` user interface, you can define one or more button states by placing `ButtonState` components in their default slot. * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose. * You can define a split mode for the `Button`, which will results in displaying an arrow button for additional actions. - * + * * You can choose from a set of predefined designs for `Button` (as in `ui5-button`) to match the desired styling. - * + * * The `Button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space]. * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4]. * To display additional actions, you can attach a menu to the arrow button. - * - * + * + * * * __Note:__ This is a UI5 Web Component! [Button UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/Button) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-ai__. - * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. - */ + * @experimental The **@ui5/webcomponents-ai** package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change. +Furthermore, the package supports **Horizon** themes only. +*/ const Button = withWebComponent( 'ui5-ai-button', ['accessibilityAttributes', 'design', 'state'], diff --git a/packages/ai/src/components/ButtonState/index.tsx b/packages/ai/src/components/ButtonState/index.tsx index 77bbd8c4cac..91a18ea0140 100644 --- a/packages/ai/src/components/ButtonState/index.tsx +++ b/packages/ai/src/components/ButtonState/index.tsx @@ -54,20 +54,21 @@ interface ButtonStatePropTypes extends ButtonStateAttributes, Omit( 'ui5-ai-button-state', ['endIcon', 'icon', 'name', 'text'], diff --git a/packages/ai/src/components/Input/index.tsx b/packages/ai/src/components/Input/index.tsx index 67095257fe3..04c902d5b42 100644 --- a/packages/ai/src/components/Input/index.tsx +++ b/packages/ai/src/components/Input/index.tsx @@ -2,8 +2,9 @@ import '@ui5/webcomponents-ai/dist/Input.js'; import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Input.js'; +import type InputSuggestionsFilter from '@ui5/webcomponents/dist/types/InputSuggestionsFilter.js'; import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; -import type { InputVersionChangeEventDetail, InputItemClickEventDetail } from '@ui5/webcomponents-ai/dist/Input.js'; +import type { InputItemClickEventDetail, InputVersionChangeEventDetail } from '@ui5/webcomponents-ai/dist/Input.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; @@ -52,6 +53,14 @@ interface InputAttributes { */ disabled?: boolean; + /** + * Defines the filter type of the component. + * + * **Note:** Available since [v2.19.0](https://github.com/UI5/webcomponents/releases/tag/v2.19.0) of **@ui5/webcomponents-ai**. + * @default "None" + */ + filter?: InputSuggestionsFilter | keyof typeof InputSuggestionsFilter; + /** * Defines whether the AI Writing Assistant is currently loading. * @@ -354,30 +363,31 @@ interface InputPropTypes /** * The `Input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities. - * + * * ### Structure - * + * * The `Input` consists of the following main parts: - * + * * - **Input Field** – Inherits all standard Input behaviors. * - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation. - * + * * The component automatically determines which elements to render based on its internal state: * - The AI Button is only shown when there are available `actions`. * - The version navigation appears only when `totalVersions > 1`. - * + * * ### Keyboard Support - * + * * - **Shift + F4** — Opens the AI menu. * - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions. - * - * + * + * * * __Note:__ This is a UI5 Web Component! [Input UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/Input) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__. * @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change. - */ +Furthermore, the package supports **Horizon** themes only. +*/ const Input = withWebComponent( 'ui5-ai-input', [ @@ -386,6 +396,7 @@ const Input = withWebComponent( 'accessibleName', 'accessibleNameRef', 'currentVersion', + 'filter', 'maxlength', 'name', 'placeholder', diff --git a/packages/ai/src/components/PromptInput/index.tsx b/packages/ai/src/components/PromptInput/index.tsx index 4d31b6d6ff8..2fcfdbb9c19 100644 --- a/packages/ai/src/components/PromptInput/index.tsx +++ b/packages/ai/src/components/PromptInput/index.tsx @@ -177,14 +177,15 @@ interface PromptInputPropTypes /** * The `PromptInput` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs. - * + * * **Note:** The web component is in an experimental state - * - * + * + * * * __Note:__ This is a UI5 Web Component! [PromptInput UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/PromptInput) | [Repository](https://github.com/UI5/webcomponents) * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change. - */ +Furthermore, the package supports **Horizon** themes only. +*/ const PromptInput = withWebComponent( 'ui5-ai-prompt-input', ['label', 'maxlength', 'placeholder', 'value', 'valueState'], diff --git a/packages/ai/src/components/TextArea/index.tsx b/packages/ai/src/components/TextArea/index.tsx index b1d67f0898d..cee05966d78 100644 --- a/packages/ai/src/components/TextArea/index.tsx +++ b/packages/ai/src/components/TextArea/index.tsx @@ -270,21 +270,22 @@ interface TextAreaPropTypes /** * The `TextArea` component extends the standard TextArea with Writing Assistant capabilities. * It provides AI-powered text generation, editing suggestions, and version management functionality. - * + * * ### Structure * The `TextArea` consists of the following elements: * - TextArea: The main text input area with all standard textarea functionality * - WritingAssistant: Dedicated toolbar containing: * - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions * - AI Button: Opens a menu that can be extended with custom AI generation options through slotting - * - * + * + * * * __Note:__ This is a UI5 Web Component! [TextArea UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/TextArea) | [Repository](https://github.com/UI5/webcomponents) * * @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__. * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change. - */ +Furthermore, the package supports **Horizon** themes only. +*/ const TextArea = withWebComponent( 'ui5-ai-textarea', [ diff --git a/packages/base/package.json b/packages/base/package.json index 69b12afb64e..772779150e3 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.18.0", + "@ui5/webcomponents-base": "~2.19.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index 1f6ea3c36d7..441e7c3b3d9 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -131,8 +131,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.18.0", - "@ui5/webcomponents-react-base": "~2.18.0", + "@ui5/webcomponents-react": "~2.19.0", + "@ui5/webcomponents-react-base": "~2.19.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index df0e855c739..564c346d6de 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.18.0", - "@ui5/webcomponents-react": "~2.18.0", + "@ui5/webcomponents-compat": "~2.19.0", + "@ui5/webcomponents-react": "~2.19.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index 53b1489d52d..2234b0cc69d 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.18.0", - "@ui5/webcomponents-base": "~2.18.0", + "@ui5/webcomponents": "~2.19.0", + "@ui5/webcomponents-base": "~2.19.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 840b6f9bedc..c2b41f43166 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -144,6 +144,10 @@ "types": "./dist/webComponents/Avatar/index.d.ts", "default": "./dist/webComponents/Avatar/index.js" }, + "./AvatarBadge": { + "types": "./dist/webComponents/AvatarBadge/index.d.ts", + "default": "./dist/webComponents/AvatarBadge/index.js" + }, "./AvatarGroup": { "types": "./dist/webComponents/AvatarGroup/index.d.ts", "default": "./dist/webComponents/AvatarGroup/index.js" @@ -809,10 +813,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.18.0", - "@ui5/webcomponents-base": "~2.18.0", - "@ui5/webcomponents-fiori": "~2.18.0", - "@ui5/webcomponents-icons": "~2.18.0", + "@ui5/webcomponents": "~2.19.0", + "@ui5/webcomponents-base": "~2.19.0", + "@ui5/webcomponents-fiori": "~2.19.0", + "@ui5/webcomponents-icons": "~2.19.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.module.css b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.module.css index 9d6676cd8f6..c49f856a306 100644 --- a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.module.css +++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.module.css @@ -8,10 +8,10 @@ outline: none; position: absolute; pointer-events: none; - inset: var(--_ui5wcr_card_header_focus_offset); - border: var(--_ui5wcr_card_header_focus_border); - border-radius: var(--_ui5wcr_card_header_focus_radius) var(--_ui5wcr_card_header_focus_radius) - var(--_ui5wcr_card_header_focus_bottom_radius) var(--_ui5wcr_card_header_focus_bottom_radius); + inset: var(--_ui5_card_header_focus_offset); + border: var(--_ui5_card_header_focus_border); + border-radius: var(--_ui5_card_header_focus_radius) var(--_ui5_card_header_focus_radius) + var(--_ui5_card_header_focus_bottom_radius) var(--_ui5_card_header_focus_bottom_radius); } &:focus-visible { diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index fa4d900a5ea..8e1149631f6 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -491,11 +491,14 @@ } .filterIcon { + min-width: var(--_ui5_list_item_icon_size); + min-height: var(--_ui5_list_item_icon_size); padding-inline-end: 0.5rem; color: var(--sapContent_NonInteractiveIconColor); } .filterText { + font-size: var(--_ui5_list_item_title_size); overflow: visible; padding-inline-end: 0.5rem; } diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index 7fd53c41279..b83a9da0dd1 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx @@ -2,14 +2,13 @@ import IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; -import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; import iconDecline from '@ui5/webcomponents-icons/dist/decline.js'; import iconFilter from '@ui5/webcomponents-icons/dist/filter.js'; import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js'; import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js'; import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js'; import { enrichEventWithDetails, useI18nBundle } from '@ui5/webcomponents-react-base'; -import { useEffect, useId, useMemo, useRef } from 'react'; +import { useEffect, useId, useRef } from 'react'; import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js'; import { TextAlign } from '../../../../enums/TextAlign.js'; import { @@ -56,15 +55,6 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { const ungroupText = i18nBundle.getText(UNGROUP); const filterText = i18nBundle.getText(FILTER); - const filterStyles = useMemo(() => { - if (showFilter) { - return { - iconDimensions: `var(${getScopedVarName('--_ui5_list_item_icon_size')})`, - fontSize: `var(${getScopedVarName('--_ui5_list_item_title_size')})`, - }; - } - }, [showFilter]); - const handleSort = (e) => { const sortType = e.detail.item.getAttribute('data-sort'); @@ -220,23 +210,8 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { {showFilter && ( - - + + {filterText} {column.render(RenderColumnTypes.Filter, { diff --git a/packages/main/src/components/ObjectPageAnchorBar/ObjectPageAnchorBar.module.css b/packages/main/src/components/ObjectPageAnchorBar/ObjectPageAnchorBar.module.css index 9db417368bf..29b94f3c03f 100644 --- a/packages/main/src/components/ObjectPageAnchorBar/ObjectPageAnchorBar.module.css +++ b/packages/main/src/components/ObjectPageAnchorBar/ObjectPageAnchorBar.module.css @@ -23,6 +23,8 @@ } .anchorBarActionButton { + min-width: 1.5rem; + height: 1.5rem; --_ui5wcr_anchor-btn-center: calc((1.5rem - var(--sapButton_BorderWidth)) / 2); position: absolute; inset-block-start: calc(-1 * var(--_ui5wcr_anchor-btn-center)); diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx index 01d36851542..495dccc77e7 100644 --- a/packages/main/src/components/ObjectPageAnchorBar/index.tsx +++ b/packages/main/src/components/ObjectPageAnchorBar/index.tsx @@ -7,9 +7,9 @@ import iconArrowUp from '@ui5/webcomponents-icons/dist/slim-arrow-up.js'; import { debounce, enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import { forwardRef, useEffect, useRef } from 'react'; -import type { CSSProperties, Dispatch, MouseEvent, SetStateAction } from 'react'; +import type { Dispatch, MouseEvent, SetStateAction } from 'react'; import { COLLAPSE_HEADER, EXPAND_HEADER, PIN_HEADER, UNPIN_HEADER } from '../../i18n/i18n-defaults.js'; -import { cssVarVersionInfoPrefix, getUi5TagWithSuffix } from '../../internal/utils.js'; +import { getUi5TagWithSuffix } from '../../internal/utils.js'; import type { CommonProps } from '../../types/index.js'; import type { ButtonDomRef } from '../../webComponents/Button/index.js'; import { Button } from '../../webComponents/Button/index.js'; @@ -18,14 +18,6 @@ import { ToggleButton } from '../../webComponents/ToggleButton/index.js'; import type { ObjectPagePropTypes } from '../ObjectPage/types/index.js'; import { classNames, styleData } from './ObjectPageAnchorBar.module.css.js'; -const _buttonBaseMinWidth = `${cssVarVersionInfoPrefix}button_base_min_width`; -const _buttonBaseHeight = `${cssVarVersionInfoPrefix}button_base_height`; - -const anchorButtonVariables = { - [_buttonBaseMinWidth]: '1.5rem', - [_buttonBaseHeight]: '1.5rem', -} as CSSProperties; - interface ObjectPageAnchorBarPropTypes extends CommonProps { /** * Determines if the header content is visible. @@ -145,7 +137,6 @@ const ObjectPageAnchorBar = forwardRef { - return `${key}: ${value};`; - }) - .join(' ')}}`; - function ThemeProviderStyles() { const uniqueId = useId(); useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`); - useStylesheet(ui5WcVariablesStyle, `${ThemeProvider.displayName}-css-vars-${uniqueId}`, { alwaysInject: true }); return null; } diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.module.css b/packages/main/src/components/VariantManagement/ManageViewsDialog.module.css index ed78c98c7de..951dc0c7771 100644 --- a/packages/main/src/components/VariantManagement/ManageViewsDialog.module.css +++ b/packages/main/src/components/VariantManagement/ManageViewsDialog.module.css @@ -19,20 +19,14 @@ } .headerText { - margin: 0; - text-align: center; + box-sizing: border-box; align-self: start; - text-overflow: ellipsis; overflow: hidden; - white-space: nowrap; max-width: 100%; - display: inline-block; - padding-inline-start: 1rem; - font-family: var(--_ui5wcr_popup_header_font_family); - font-size: 1rem; - min-height: var(--_ui5wcr_popup_default_header_height); - max-height: var(--_ui5wcr_popup_default_header_height); - line-height: var(--_ui5wcr_popup_default_header_height); + padding-inline: 1rem; + min-height: var(--_ui5_popup_default_header_height); + max-height: var(--_ui5_popup_default_header_height); + line-height: var(--_ui5_popup_default_header_height); } .search { diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx index f47ce892f75..c9ab8eccaff 100644 --- a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx +++ b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx @@ -1,7 +1,6 @@ import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js'; import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js'; -import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; import { isPhone as getIsPhone } from '@ui5/webcomponents-base/dist/Device.js'; import NoEntriesIllu from '@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js'; import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; @@ -24,7 +23,6 @@ import { SHARING, VIEW, } from '../../i18n/i18n-defaults.js'; -import type { CommonProps } from '../../types/CommonProps.js'; import { Bar } from '../../webComponents/Bar/index.js'; import { Button } from '../../webComponents/Button/index.js'; import type { ButtonDomRef } from '../../webComponents/Button/index.js'; @@ -39,6 +37,7 @@ import type { TableDomRef, TablePropTypes } from '../../webComponents/Table/inde import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js'; import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js'; import type { TableRowDomRef } from '../../webComponents/TableRow/index.js'; +import { Title } from '../../webComponents/Title/index.js'; import { FlexBox } from '../FlexBox/index.js'; import type { VariantItemPropTypes } from '../VariantItem/index.js'; import { classNames, styleData } from './ManageViewsDialog.module.css.js'; @@ -244,14 +243,13 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => { onBeforeClose={handleClose} headerText={manageViewsText} initialFocus={`search-${uniqueId}`} - style={ - { - '--_ui5wcr_popup_default_header_height': `var(${getScopedVarName('--_ui5_popup_default_header_height')})`, - } as CommonProps['style'] & { '--_ui5wcr_popup_default_header_height': string } - } header={ -

{manageViewsText}

+
+ + {manageViewsText} + +
- +
@@ -16,4 +16,24 @@ import * as ComponentStories from './Avatar.stories'; +# More Examples + +## With Image + +The Avatar can show images. + + + +## With Badge + +The Avatar supports visual affordance through badges using the `AvatarBadge` component. Badges can display icons with different value states to indicate status or notifications. + + + +## Custom Styling + +The Avatar allows customization with pure CSS on tag level. + + +