From ff480dca5e54d9cf5e425f56e9715fe768f1be17 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 23 Sep 2026 09:54:25 +0200 Subject: [PATCH 1/2] feat: update to UI5 Web Components 2.27.0 --- .storybook/custom-element-manifests/ai.json | 40 + .../custom-element-manifests/fiori.json | 950 +++++++++++++- .storybook/custom-element-manifests/main.json | 1106 +++++++++++++---- config/version-info.json | 3 +- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 28 +- .../src/webComponents/AvatarBadge/index.tsx | 18 +- .../webComponents/ComboBoxItemGroup/index.tsx | 2 +- .../src/webComponents/DatePicker/index.tsx | 14 + .../webComponents/ListItemCustom/index.tsx | 6 +- .../src/webComponents/ListItemGroup/index.tsx | 4 +- .../webComponents/ListItemStandard/index.tsx | 6 +- .../main/src/webComponents/MenuItem/index.tsx | 6 +- .../MultiComboBoxItemGroup/index.tsx | 2 +- .../webComponents/NumberInput/NumberInput.mdx | 19 + .../NumberInput/NumberInput.stories.tsx | 20 + .../src/webComponents/NumberInput/index.tsx | 179 +++ .../src/webComponents/OptionGroup/index.tsx | 50 + .../webComponents/SearchItemGroup/index.tsx | 4 +- .../main/src/webComponents/Select/Select.mdx | 15 +- .../webComponents/Select/Select.stories.tsx | 20 + .../main/src/webComponents/Select/index.tsx | 3 +- .../src/webComponents/SplitButton/index.tsx | 2 - .../src/webComponents/StepInput/index.tsx | 10 - .../SuggestionItemGroup/index.tsx | 2 +- .../main/src/webComponents/Toolbar/index.tsx | 8 + .../src/webComponents/ToolbarButton/index.tsx | 47 + .../src/webComponents/ToolbarItem/index.tsx | 26 +- .../src/webComponents/ToolbarSelect/index.tsx | 26 +- .../webComponents/ToolbarSeparator/index.tsx | 26 +- .../src/webComponents/ToolbarSpacer/index.tsx | 26 +- .../main/src/webComponents/TreeItem/index.tsx | 6 +- .../webComponents/TreeItemCustom/index.tsx | 6 +- .../UploadCollectionItem/index.tsx | 6 +- .../src/webComponents/UserMenuItem/index.tsx | 6 +- .../UserSettingsAppearanceViewGroup/index.tsx | 2 +- .../UserSettingsAppearanceViewItem/index.tsx | 6 +- .../UserSettingsDialog/UserSettingsDialog.mdx | 20 +- .../UserSettingsDialog.stories.tsx | 288 ++++- .../UserSettingsNotificationsView/index.tsx | 133 ++ .../index.tsx | 127 ++ .../index.tsx | 277 +++++ packages/main/src/webComponents/index.ts | 5 + .../mcp-server/src/utils/component-config.ts | 5 + yarn.lock | 166 +-- 49 files changed, 3343 insertions(+), 402 deletions(-) create mode 100644 packages/main/src/webComponents/NumberInput/NumberInput.mdx create mode 100644 packages/main/src/webComponents/NumberInput/NumberInput.stories.tsx create mode 100644 packages/main/src/webComponents/NumberInput/index.tsx create mode 100644 packages/main/src/webComponents/OptionGroup/index.tsx create mode 100644 packages/main/src/webComponents/UserSettingsNotificationsView/index.tsx create mode 100644 packages/main/src/webComponents/UserSettingsNotificationsViewGroup/index.tsx create mode 100644 packages/main/src/webComponents/UserSettingsNotificationsViewItem/index.tsx diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index 80065ee65db..2b75b11424e 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -1971,6 +1971,17 @@ "description": "Defines the text of the label.", "privacy": "public" }, + { + "kind": "field", + "name": "overflowGroup", + "type": { + "text": "string | undefined" + }, + "description": "Co-overflow tag. Items in the same `ui5-toolbar` whose `overflowGroup` is the same\nnon-empty string overflow as one atomic unit: either all visible in the bar, or all\nin the overflow popover, never split. The empty string (the default) means \"no group\" —\nthe item participates in overflow independently.\n\nThe tag is a free-form, case-sensitive string label (e.g. `\"filters\"`, `\"search\"`). It is\nlayout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a\nnon-empty group must have `overflowPriority = \"Default\"`; `AlwaysOverflow` and\n`NeverOverflow` are forbidden inside a group — setting one of those on a grouped item\nemits a one-shot `console.warn` and the item's priority is treated as `Default` for\nthe layout pass. Spacers (`ui5-toolbar-spacer`) do not participate in grouping; setting\na non-empty `overflowGroup` on a spacer emits a one-shot `console.warn` and the spacer's\nexisting overflow behavior is unchanged.\n\nThe visible bar always preserves slot order — ungrouped items between group members\nkeep their slot positions and the toolbar never reorders DOM children. In the popover\ngroup members appear adjacent in slot order.", + "privacy": "public", + "default": "undefined", + "_ui5since": "2.27.0" + }, { "kind": "field", "name": "overflowPriority", @@ -2009,6 +2020,15 @@ "text": "string" } }, + { + "description": "Co-overflow tag. Items in the same `ui5-toolbar` whose `overflowGroup` is the same\nnon-empty string overflow as one atomic unit: either all visible in the bar, or all\nin the overflow popover, never split. The empty string (the default) means \"no group\" —\nthe item participates in overflow independently.\n\nThe tag is a free-form, case-sensitive string label (e.g. `\"filters\"`, `\"search\"`). It is\nlayout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a\nnon-empty group must have `overflowPriority = \"Default\"`; `AlwaysOverflow` and\n`NeverOverflow` are forbidden inside a group — setting one of those on a grouped item\nemits a one-shot `console.warn` and the item's priority is treated as `Default` for\nthe layout pass. Spacers (`ui5-toolbar-spacer`) do not participate in grouping; setting\na non-empty `overflowGroup` on a spacer emits a one-shot `console.warn` and the spacer's\nexisting overflow behavior is unchanged.\n\nThe visible bar always preserves slot order — ungrouped items between group members\nkeep their slot positions and the toolbar never reorders DOM children. In the popover\ngroup members appear adjacent in slot order.", + "name": "overflow-group", + "default": "undefined", + "fieldName": "overflowGroup", + "type": { + "text": "string | undefined" + } + }, { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "name": "overflow-priority", @@ -2112,6 +2132,17 @@ "description": "The total number of available result versions.\n\nNote: Versioning is hidden if the value is `0`.", "privacy": "public" }, + { + "kind": "field", + "name": "overflowGroup", + "type": { + "text": "string | undefined" + }, + "description": "Co-overflow tag. Items in the same `ui5-toolbar` whose `overflowGroup` is the same\nnon-empty string overflow as one atomic unit: either all visible in the bar, or all\nin the overflow popover, never split. The empty string (the default) means \"no group\" —\nthe item participates in overflow independently.\n\nThe tag is a free-form, case-sensitive string label (e.g. `\"filters\"`, `\"search\"`). It is\nlayout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a\nnon-empty group must have `overflowPriority = \"Default\"`; `AlwaysOverflow` and\n`NeverOverflow` are forbidden inside a group — setting one of those on a grouped item\nemits a one-shot `console.warn` and the item's priority is treated as `Default` for\nthe layout pass. Spacers (`ui5-toolbar-spacer`) do not participate in grouping; setting\na non-empty `overflowGroup` on a spacer emits a one-shot `console.warn` and the spacer's\nexisting overflow behavior is unchanged.\n\nThe visible bar always preserves slot order — ungrouped items between group members\nkeep their slot positions and the toolbar never reorders DOM children. In the popover\ngroup members appear adjacent in slot order.", + "privacy": "public", + "default": "undefined", + "_ui5since": "2.27.0" + }, { "kind": "field", "name": "overflowPriority", @@ -2172,6 +2203,15 @@ "text": "number" } }, + { + "description": "Co-overflow tag. Items in the same `ui5-toolbar` whose `overflowGroup` is the same\nnon-empty string overflow as one atomic unit: either all visible in the bar, or all\nin the overflow popover, never split. The empty string (the default) means \"no group\" —\nthe item participates in overflow independently.\n\nThe tag is a free-form, case-sensitive string label (e.g. `\"filters\"`, `\"search\"`). It is\nlayout-only and carries no ARIA, keyboard, or visual-cluster semantics. Items in a\nnon-empty group must have `overflowPriority = \"Default\"`; `AlwaysOverflow` and\n`NeverOverflow` are forbidden inside a group — setting one of those on a grouped item\nemits a one-shot `console.warn` and the item's priority is treated as `Default` for\nthe layout pass. Spacers (`ui5-toolbar-spacer`) do not participate in grouping; setting\na non-empty `overflowGroup` on a spacer emits a one-shot `console.warn` and the spacer's\nexisting overflow behavior is unchanged.\n\nThe visible bar always preserves slot order — ungrouped items between group members\nkeep their slot positions and the toolbar never reorders DOM children. In the popover\ngroup members appear adjacent in slot order.", + "name": "overflow-group", + "default": "undefined", + "fieldName": "overflowGroup", + "type": { + "text": "string | undefined" + } + }, { "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.", "name": "overflow-priority", diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 689ab2a13d4..1124b353281 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -3069,7 +3069,7 @@ ] }, "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "privacy": "public" } ], @@ -3219,7 +3219,7 @@ } }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "name": "type", "default": "\"Active\"", "fieldName": "type", @@ -7018,16 +7018,6 @@ "kind": "class", "description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.", "name": "SearchItemGroup", - "superclass": { - "name": "ListItemGroup", - "package": "@ui5/webcomponents", - "module": "dist/ListItemGroup.js" - }, - "tagName": "ui5-search-item-group", - "customElement": true, - "_ui5experimental": true, - "_ui5since": "2.9.0", - "_ui5privacy": "public", "cssParts": [ { "description": "Used to style the header item of the group", @@ -7038,10 +7028,20 @@ "name": "title" } ], + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-search-item-group", + "customElement": true, + "_ui5experimental": true, + "_ui5since": "2.9.0", + "_ui5privacy": "public", "slots": [ { "name": "default", - "description": "Defines the items of the ui5-li-group.", + "description": "Defines the items of the group.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -7088,7 +7088,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "privacy": "public", "default": "undefined" }, @@ -7198,7 +7198,7 @@ } }, { - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "name": "header-text", "default": "undefined", "fieldName": "headerText", @@ -11688,7 +11688,7 @@ ] }, "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "privacy": "public" } ], @@ -11915,7 +11915,7 @@ } }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "name": "type", "default": "\"Active\"", "fieldName": "type", @@ -12807,7 +12807,7 @@ ] }, "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "privacy": "public" } ], @@ -12948,7 +12948,7 @@ } }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "name": "type", "default": "\"Active\"", "fieldName": "type", @@ -13559,6 +13559,16 @@ "kind": "class", "description": "### Overview\n\nThe `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.\n\nThis is the item to use inside a `ui5-user-settings-appearance-view`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js\";`", "name": "UserSettingsAppearanceViewGroup", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" + } + ], "slots": [ { "name": "default", @@ -13601,16 +13611,6 @@ "customElement": true, "_ui5since": "2.17.0", "_ui5privacy": "public", - "cssParts": [ - { - "description": "Used to style the header item of the group", - "name": "header" - }, - { - "description": "Used to style the title of the group header", - "name": "title" - } - ], "members": [ { "kind": "field", @@ -13628,7 +13628,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "privacy": "public", "default": "undefined" }, @@ -13738,7 +13738,7 @@ } }, { - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "name": "header-text", "default": "undefined", "fieldName": "headerText", @@ -13948,7 +13948,7 @@ ] }, "default": "\"Active\"", - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "privacy": "public" } ], @@ -14062,7 +14062,7 @@ } }, { - "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection (checkbox/radio) to be toggled\nwhen the list has a selection mode. The `item-click` event is not fired for this type.", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", "name": "type", "default": "\"Active\"", "fieldName": "type", @@ -14721,6 +14721,890 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/UserSettingsNotificationsView.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-settings-notifications-view` represents a view displayed in the\n`ui5-user-settings-item` that lists notification preferences. Individual settings\nare represented by `ui5-user-settings-notifications-view-item` elements, optionally\ngrouped by `ui5-user-settings-notifications-view-group`.\n\nWhen a navigable item is clicked, the view drills into a sibling secondary view of\nits parent `ui5-user-settings-item`. When an item's `item-key` matches a target\nview's `id`, that view is opened and keeps its own `text`. Otherwise the first\nsibling marked as `secondary` is opened and its `text` is set to the clicked\nitem's `text` so the drill-in header reflects the origin.\n\nApps can override this behavior by preventing the `item-click` event.\n\nApplications should listen to the item's `switch-change` event (which bubbles) to\nbe notified when a switch is toggled.\n\nAdditional content (e.g. an information message strip) can be placed via the\n`additionalContent` slot, which is rendered above the list.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js\";`", + "name": "UserSettingsNotificationsView", + "slots": [ + { + "name": "additionalContent", + "description": "Defines additional content displayed above the items list.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "name": "default", + "description": "Defines the items of the component. Can be a mix of\n`ui5-user-settings-notifications-view-item` and\n`ui5-user-settings-notifications-view-group` elements.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "name": "headerItems", + "description": "Defines header items rendered above the grouped items list.\nEach item is wrapped in a `role=\"form\"` landmark — a separate Tab stop.\nUse this slot for product-level toggles (e.g. \"Allow Notifications\") that appear\nabove the notification-type groups.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "UserSettingsNotificationsViewItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "secondary", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "privacy": "public" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the view is selected. There can be just one selected view at a time.", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the title text of the user settings view.", + "privacy": "public", + "default": "undefined" + } + ], + "events": [ + { + "name": "item-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "UserSettingsNotificationsViewItemClickEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsView.js" + } + ] + }, + "description": "Fired when a navigable item in the list is clicked.\n\nThe event is cancelable: preventing it skips the built-in drill-in to the\nparent's secondary view, allowing the application to take over.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": false, + "_ui5parameters": [ + { + "type": { + "text": "UserSettingsNotificationsViewItem", + "references": [ + { + "name": "UserSettingsNotificationsViewItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "The clicked notifications view item." + } + ] + } + ], + "superclass": { + "name": "UserSettingsView", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsView.js" + }, + "tagName": "ui5-user-settings-notifications-view", + "customElement": true, + "_ui5since": "2.27.0", + "_ui5privacy": "public", + "attributes": [ + { + "description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.", + "name": "secondary", + "default": "false", + "fieldName": "secondary", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the view is selected. There can be just one selected view at a time.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the title text of the user settings view.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserSettingsNotificationsView", + "module": "dist/UserSettingsNotificationsView.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-notifications-view", + "declaration": { + "name": "UserSettingsNotificationsView", + "module": "dist/UserSettingsNotificationsView.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserSettingsNotificationsViewGroup.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-settings-notifications-view-group` groups `ui5-user-settings-notifications-view-item`\nelements inside a `ui5-user-settings-notifications-view`. Its header renders as a plain bold\nsection title with a separator line below, per the notifications design spec.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js\";`", + "name": "UserSettingsNotificationsViewGroup", + "slots": [ + { + "name": "default", + "description": "Defines the items of the `ui5-user-settings-notifications-view-group`.", + "_ui5propertyName": "items", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "UserSettingsNotificationsViewItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "header", + "description": "Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ListItemBase", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "superclass": { + "name": "ListItemGroup", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + }, + "tagName": "ui5-user-settings-notifications-view-group", + "customElement": true, + "_ui5since": "2.27.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" + } + ], + "members": [ + { + "kind": "field", + "name": "headerAccessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the header.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "headerText", + "type": { + "text": "string | undefined" + }, + "description": "Defines the header text of the group.", + "privacy": "public", + "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" + } + ], + "events": [ + { + "name": "move", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + }, + { + "name": "move-over", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ListItemGroupMoveEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemGroup.js" + } + ] + }, + "description": "Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.", + "_ui5Cancelable": true, + "_ui5allowPreventDefault": true, + "_ui5Bubbles": true, + "_ui5since": "2.1.0", + "_ui5parameters": [ + { + "type": { + "text": "object" + }, + "name": "destination", + "_ui5privacy": "public", + "description": "Contains information about the destination of the moved element. Has `element` and `placement` properties." + }, + { + "type": { + "text": "object" + }, + "name": "source", + "_ui5privacy": "public", + "description": "Contains information about the moved element under `element` property." + } + ] + } + ], + "attributes": [ + { + "description": "Defines the accessible name of the header.", + "name": "header-accessible-name", + "default": "undefined", + "fieldName": "headerAccessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the header text of the group.", + "name": "header-text", + "default": "undefined", + "fieldName": "headerText", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserSettingsNotificationsViewGroup", + "module": "dist/UserSettingsNotificationsViewGroup.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-notifications-view-group", + "declaration": { + "name": "UserSettingsNotificationsViewGroup", + "module": "dist/UserSettingsNotificationsViewGroup.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/UserSettingsNotificationsViewItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-user-settings-notifications-view-item` represents a single notification setting\nwithin the `ui5-user-settings-notifications-view`.\n\nIt displays a title and an optional byline. By default a trailing switch reflects\nthe `checked` state. Applications can override the trailing control by providing content\nin the `endContent` slot (e.g. a `ui5-select` for a value picker); the built-in switch and\nits `switch-change` event are then suppressed. Items can additionally be flagged as\n`navigable` to display a navigation arrow and behave as clickable list rows.\n\n**Note:** The default switch and the `endContent` slot are mutually exclusive.\nWhen any content is provided in `endContent`, the trailing switch is not rendered\nand no `switch-change` event is fired.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js\";`", + "name": "UserSettingsNotificationsViewItem", + "slots": [ + { + "name": "endContent", + "description": "Defines custom content rendered at the trailing end of the item, replacing the\ndefault switch. Use this to place a `ui5-select`, `ui5-input`, or any other\ncontrol instead of a boolean toggle.", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + }, + { + "description": "Defines the content of the component.", + "name": "default", + "_ui5privacy": "public", + "_ui5type": { + "text": "Array" + } + }, + { + "name": "deleteButton", + "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.", + "_ui5since": "1.9.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IButton", + "package": "@ui5/webcomponents", + "module": "dist/Button.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "bylineText", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the byline text of the item, rendered below the title.", + "privacy": "public" + }, + { + "kind": "field", + "name": "checked", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the trailing switch is on.\n\nIgnored when the `endContent` slot is used.", + "privacy": "public" + }, + { + "kind": "field", + "name": "itemKey", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the unique identifier of the item.\n\nWhen the item is navigable, `itemKey` is also used to route to a matching sibling\n`secondary` view by id.", + "privacy": "public" + }, + { + "kind": "field", + "name": "navigable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the item is navigable. When true, a navigation arrow is rendered\nand the whole row becomes clickable (fires the parent view's `item-click` event).", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the title text of the item.", + "privacy": "public" + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes", + "references": [ + { + "name": "ListItemAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/ListItem.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "privacy": "public", + "_ui5since": "1.15.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.0.0-rc.15" + }, + { + "kind": "field", + "name": "accessibleRole", + "type": { + "text": "ListItemAccessibleRole | undefined", + "references": [ + { + "name": "ListItemAccessibleRole", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemAccessibleRole.js" + } + ] + }, + "description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.23.0" + }, + { + "kind": "field", + "name": "highlight", + "type": { + "text": "Highlight", + "references": [ + { + "name": "Highlight", + "package": "@ui5/webcomponents", + "module": "dist/types/Highlight.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "privacy": "public", + "_ui5since": "1.24" + }, + { + "kind": "field", + "name": "movable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the item is movable.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "navigated", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "privacy": "public", + "_ui5since": "1.10.0" + }, + { + "kind": "field", + "name": "selected", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the selected state of the component.", + "privacy": "public" + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "default": "undefined", + "privacy": "public", + "_ui5since": "1.23.0" + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "ListItemType", + "references": [ + { + "name": "ListItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/ListItemType.js" + } + ] + }, + "default": "\"Active\"", + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", + "privacy": "public" + } + ], + "events": [ + { + "name": "switch-change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "UserSettingsNotificationsViewItemSwitchChangeEventDetail", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + ] + }, + "description": "Fired when the switch state changes.\n\nNot fired when the `endContent` slot is used to override the trailing control.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5parameters": [ + { + "type": { + "text": "boolean" + }, + "name": "checked", + "_ui5privacy": "public", + "description": "The new checked state of the switch." + }, + { + "type": { + "text": "UserSettingsNotificationsViewItem", + "references": [ + { + "name": "UserSettingsNotificationsViewItem", + "package": "@ui5/webcomponents-fiori", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + ] + }, + "name": "item", + "_ui5privacy": "public", + "description": "The item whose switch was toggled." + } + ] + }, + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent", + "references": [ + { + "name": "ListItemBaseClickEventDetail", + "package": "@ui5/webcomponents", + "module": "dist/ListItemBase.js" + } + ] + }, + "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.23.0", + "_ui5parameters": [ + { + "type": { + "text": "Event" + }, + "name": "originalEvent", + "_ui5privacy": "public", + "description": "The original event from the user interaction." + } + ] + }, + { + "name": "detail-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the user clicks on the detail button when type is `Detail`.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the byline text of the item, rendered below the title.", + "name": "byline-text", + "default": "\"\"", + "fieldName": "bylineText", + "type": { + "text": "string" + } + }, + { + "description": "Defines whether the trailing switch is on.\n\nIgnored when the `endContent` slot is used.", + "name": "checked", + "default": "false", + "fieldName": "checked", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the unique identifier of the item.\n\nWhen the item is navigable, `itemKey` is also used to route to a matching sibling\n`secondary` view by id.", + "name": "item-key", + "default": "\"\"", + "fieldName": "itemKey", + "type": { + "text": "string" + } + }, + { + "description": "Defines whether the item is navigable. When true, a navigation arrow is rendered\nand the whole row becomes clickable (fires the parent view's `item-click` event).", + "name": "navigable", + "default": "false", + "fieldName": "navigable", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the title text of the item.", + "name": "text", + "default": "\"\"", + "fieldName": "text", + "type": { + "text": "string" + } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **ariaSetsize**: Defines the number of items in the current set when not all items in the set are present in the DOM.\n**Note:** The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\n\t- **ariaPosinset**: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t**Note:** The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListItemAccessibilityAttributes" + } + }, + { + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Used to define the role of the list item.\n\n**Note:** If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n(e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\nAn explicitly set `accessible-role` on the list item takes precedence over the inherited role.", + "name": "accessible-role", + "default": "undefined", + "fieldName": "accessibleRole", + "type": { + "text": "\"None\" | \"ListItem\" | \"MenuItem\" | \"TreeItem\" | \"Option\" | undefined" + } + }, + { + "description": "Defines the highlight state of the list items.\nAvailable options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.", + "name": "highlight", + "default": "\"None\"", + "fieldName": "highlight", + "type": { + "text": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"" + } + }, + { + "description": "Defines whether the item is movable.", + "name": "movable", + "default": "false", + "fieldName": "movable", + "type": { + "text": "boolean" + } + }, + { + "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.", + "name": "navigated", + "default": "false", + "fieldName": "navigated", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the selected state of the component.", + "name": "selected", + "default": "false", + "fieldName": "selected", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the text of the tooltip that would be displayed for the list item.", + "name": "tooltip", + "default": "undefined", + "fieldName": "tooltip", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` (no active press/hover feedback and the\n`item-click` event is not fired), but the item can still be selected. Clicking the item body,\npressing Space/Enter, or interacting with the selection component (checkbox in Multi mode, radio\nbutton in Single modes) toggles the selection when the list has a selection mode.", + "name": "type", + "default": "\"Active\"", + "fieldName": "type", + "type": { + "text": "\"Navigation\" | \"Inactive\" | \"InactiveSelectable\" | \"Active\" | \"Detail\"" + } + } + ], + "superclass": { + "name": "ListItemCustom", + "package": "@ui5/webcomponents", + "module": "dist/ListItemCustom.js" + }, + "tagName": "ui5-user-settings-notifications-view-item", + "customElement": true, + "_ui5since": "2.27.0", + "_ui5privacy": "public", + "cssParts": [ + { + "description": "Used to style the checkbox rendered when the list item is in multiple selection mode", + "name": "checkbox" + }, + { + "description": "Used to style the content area of the list item", + "name": "content" + }, + { + "description": "Used to style the button rendered when the list item is in delete mode", + "name": "delete-button" + }, + { + "description": "Used to style the button rendered when the list item is of type detail", + "name": "detail-button" + }, + { + "description": "Used to style the main li tag of the list item", + "name": "native-li" + }, + { + "description": "Used to style the radio button rendered when the list item is in single selection mode", + "name": "radio" + } + ] + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "UserSettingsNotificationsViewItem", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-user-settings-notifications-view-item", + "declaration": { + "name": "UserSettingsNotificationsViewItem", + "module": "dist/UserSettingsNotificationsViewItem.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/UserSettingsView.js", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 54c5ab50489..d66573fe111 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -362,6 +362,17 @@ "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": "colorScheme", + "type": { + "text": "string | undefined" + }, + "description": "Defines the color scheme of the badge using the indication color palette.\n\nAvailable options are `\"1\"` through `\"10\"`, matching the indication colors.\n\n**Note:** `state` takes precedence - when `state` is set to any value other than `None`,\nthe semantic state styling applies and `colorScheme` is ignored.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.27.0" + }, { "kind": "field", "name": "icon", @@ -385,7 +396,7 @@ } ] }, - "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", + "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\n\n**Note:** `state` takes precedence over `colorScheme`. When `state` is set\nto any value other than `None`, the semantic styling applies and `colorScheme` is ignored.", "default": "\"None\"", "privacy": "public" }, @@ -402,6 +413,15 @@ } ], "attributes": [ + { + "description": "Defines the color scheme of the badge using the indication color palette.\n\nAvailable options are `\"1\"` through `\"10\"`, matching the indication colors.\n\n**Note:** `state` takes precedence - when `state` is set to any value other than `None`,\nthe semantic state styling applies and `colorScheme` is ignored.", + "name": "color-scheme", + "default": "undefined", + "fieldName": "colorScheme", + "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\"`", "name": "icon", @@ -412,7 +432,7 @@ } }, { - "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", + "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\n\n**Note:** `state` takes precedence over `colorScheme`. When `state` is set\nto any value other than `None`, the semantic styling applies and `colorScheme` is ignored.", "name": "state", "default": "\"None\"", "fieldName": "state", @@ -5588,6 +5608,16 @@ "kind": "class", "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.", "name": "ComboBoxItemGroup", + "cssParts": [ + { + "description": "Used to style the header item of the group", + "name": "header" + }, + { + "description": "Used to style the title of the group header", + "name": "title" + } + ], "slots": [ { "name": "default", @@ -5638,7 +5668,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "privacy": "public", "default": "undefined" }, @@ -5678,16 +5708,6 @@ "module": "dist/ComboBox.js" } ], - "cssParts": [ - { - "description": "Used to style the header item of the group", - "name": "header" - }, - { - "description": "Used to style the title of the group header", - "name": "title" - } - ], "attributes": [ { "description": "Defines the accessible name of the header.", @@ -5699,7 +5719,7 @@ } }, { - "description": "Defines the header text of the ui5-li-group.", + "description": "Defines the header text of the group.", "name": "header-text", "default": "undefined", "fieldName": "headerText", @@ -6040,7 +6060,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n