ui5-cb-item: return the DOM reference of the list item (#8872) (2553213), closes #8841
ui5-dialog: state icon no longer shrinks when title is too long (#8839) (9b7fa49)
ui5-file-uploader: adjust drop area (56bcab5), closes #8572
ui5-illustrated-message: typo in the UnsuccessfulAuth name (#8873) (b64d76f)
ui5-link: remove unnecessary transparent border (aa27032), closes #8512
ui5-multi-combobox: correct unstable tests (#8867) (b2d004b)
ui5-multi-combobox: remove value state header on validation reset (#8832) (5cad77b), closes #8674
ui5-multi-input: focus tokens on BACKSPACE for inputs of type 'Number' and 'Email' (#8866) (7b5645d), closes #8712
ui5-progress-indicator: removed redundant z-index (#8797) (4763637), closes #8303
ui5-split-button: restrict height manipulation from outside wrapper (#8780) (691c68e)
ui5-step-input: remove value rounding, apply value-state (#8293) (0c0aa1d)
ui5-tabcontainer: avoid multiple selected tabs when there is no explicit selection (#8808) (ae8d969)
ui5-tab: focus() now works if tab is currently displayed in the overflow (#8796) (52c3ea8)
ui5-time-picker: fix buttons announcements in value help dialog (#8848) (d5f25fb)
ui5-toolbar: prevent closing of overflow on interaction (#8924) (9fb21bf)

chore

Icons: make pathData async (#8785) (0549dc9)

Code Refactoring

rename ValueState values (#8864) (ef9304d)
theming: remove Belize theme (#8519) (990313f), closes #8461
ui5-*: use unified API to define a11y attributes via accessibilityAttributes (#8810) (49d587c)
ui5-badge: change default values of properties (#8601) (6d1df02)
ui5-badge: rename Badge ui5-badge to Tag ui5-tag (#8884) (4b8c1ee)
ui5-carousel: replace items-per-page-s, items-per-page-m, items-per-page-l properties (#8635) (fc8d15a), closes #8494 #8496 #8461 #8497 #8461 #8504 #8509 #8507 #8511 #8501 #8461 #8503 #8461 #8506 #8502 #8524 #8461 #8525 #8461 #8518 #8461 #8526 #8529 #8528 #8531 #8532 #8534 #8163 #8527 #8538 #8521 #8461 #8542 #8461 #8548 #8555 #8559 #8565 #8570 #8558 #8568 #8596 #8192 #8606 #8605 #8600 #8602
ui5-icon: add mode property (#8834) (446483d)
ui5-illustrated-message: remove titleLevel property (#8700) (9fe199c)
ui5-input: events changes (#8769) (9f5c8a4)
ui5-li, ui5-list: changes accessibleRole type (#8825) (8235159)
ui5-list: enable hierarchical groups (#8632) (193ed52), closes #8461
ui5-menu: rename the busy and busy delay properties (#8778) (3a4be3a), closes #8764
ui5-page: rename disableScrolling and floatingFooter properties (#8816) (2f6fe6c)
ui5-segmented-button-item: implement segmented button item independently from button (#8669) (7b5f751)
ui5-segmented-button: rename mode to selectionMode (#8761) (4be1540)
ui5-split-button: remove activeIcon property (#8803) (f2bcfc1), closes #8461
ui5-table: move Table to @ui5/webcomponents-compat (#8849) (779bcdc)
ui5-title: wrap text by default (#8916) (f267f50)
ui5-toast: replace show method with open property (#8855) (372d27d), closes #8461
ui5-wizard: rename event parameter (#8845) (9882144), closes #8461

Features

ui5-badge: new property added (#8714) (a60c5ee)
ui5-date-picker: Replace openPicker method with open property (#8749) (d283984)

Reverts

Revert "fix(ui5-shellbar): aligned specs" (#8770) (b73c171), closes #8770 #8694

BREAKING CHANGES

ui5-title: wrapping-type property default value has changed from None to Normal. Previously long texts would truncate if there is not enough space. Now, long texts would wrap.

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-input: Remove suggestion-item-select event. Rename and modify suggestion-item-preview event. Remove openPicker method and replace it with public property "open".
refactor(ui5-input): events changes
refactor(ui5-input): property open tests
refactor(ui5-input): events change
refactor(ui5-input): events change
refactor(ui5-input): events changes
refactor(ui5-input): events changes
refactor(ui5-input): events changes
ui5-date-picker: removed openPicker(), closePicker() and isOpen() methods. If you previously used openPicker() and closePicker():

const datePicker = document.getElementById("exampleID");
datePicker.openPicker();
datePicker.closePicker();

Now use the open property respectively:

const datePicker = document.getElementById("exampleID");
datePicker.open = true;
datePicker.open = false;

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-*: FlexibleLayout's accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:

fcl.accessibilityTexts = {
    startColumnAccessibleName: "Products list",
    midColumnAccessibleName: "Product information",
    endColumnAccessibleName: "Product detailed information",
    startArrowLeftText: "Collapse products list",
    startArrowRightText: "Expand products list",
    endArrowLeftText: "Expand product detailed information",
    endArrowRightText: "Collapse product detailed information",
    startArrowContainerAccessibleName: "Start Arrow Container",
    endArrowContainerAccessibleName: "End Arrow Container",
}

fcl.accessibilityRoles = {
    startColumnRole: "complementary",
    startArrowContainerRole: "navigation",
    midColumnRole: "main",
    endArrowContainerRole: "navigation",
    endColumnRole: "complementary".
}

Now use accessibilityAttributes instead:

fcl.accessibilityAttributes = {
    startColumn: {
      role: "complementary",
      name: "Products list",
    },
    midColumn: {
      role: "main",
      name: "Product information",
    },
    endColumn: {
      role: "complementary",
      name: "Product detailed information",
    },
    startArrowLeft:  {
      name: "Collapse products list",
    },
    startArrowRight: {
      name: "Expand products list",
    },
    endArrowLeft: {
      name: "Expand product detailed information",
    },
    endArrowRight:  {
      name: "Collapse product detailed information",
    },
    startArrowContainer: {
      role: "navigation",
      name: "Start Arrow Container",
    },
    endArrowContainer: {
      role: "navigation",
      name: "End Arrow Container",
    },
};

ShellBar's accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:

shellbar.accessibilityTexts = {
    profileButtonTitle: "John Dow",
    logoTitle: "Custom logo title",
}

shellbar.accessibilityRoles = {
    logoRole: "link"
};

Now use accessibilityAttributes instead:

shellbar.accessibilityAttributes = {
  profile: {
    name:  "John Dow",
  },
  logo: {
    role: "link"
    name: "Custom logo title"
  },
};

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-badge: Badge web component has been renamed to Tag. If you have previously used the ui5-badge:

<ui5-badge></ui5-badge>

Now use ui5-tag instead:

<ui5-tag></ui5-tag>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-icon: The properties ariaHidden , interactive and accessibleRole , previously available in the ui5-icon component, have been removed. They are replaced by a new property named mode that specifies the component's mode. Alongside this update, a new enumeration IconMode, has been introduced to outline the available options for this property:

Image: This is the default setting. It configures the component to internally render role="img". Interactive: Configures the component to internally render role="button". This mode also supports focus and press handling to enhance interactivity. Decorative: In this mode, the component internally renders role="presentation" and aria-hidden="true", making it purely decorative without semantic content or interactivity.

Now, you can set the mode of the ui5-icon as it follows:

<ui5-icon id="imageIcon" mode="Image" name="add-equipment"></ui5-icon>
<ui5-icon id="myInteractiveIcon" mode="Interactive" name="add-equipment"></ui5-icon>
<ui5-icon id="decorativeIcon" mode="Decorative" name="add-equipment"></ui5-icon>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-li, ui5-list: The accessibleRole property for both ui5-li and ui5-list has been updated from a string type to an enum type. Additionally, the new enums ListItemAccessibleRole and ListAccessibleRole have been introduced for these properties respectively. The available options for the ui5-li: ListItem- Represents the ARIA role "listitem". (by default) MenuItem - Represents the ARIA role "menuitem". TreeItem - Represents the ARIA role "treeitem". Option - Represents the ARIA role "option". None - Represents the ARIA role "none".

The available options for the ui5-list: List- Represents the ARIA role "list". (by default) Menu - Represents the ARIA role "menu". Tree - Represents the ARIA role "tree". ListBox - Represents the ARIA role "listbox". If you have previously used:

<ui5-li accessible-role="menuitem"> List Item</ui5-li>
<ui5-list accessible-role="tree"> List </ui5-list>

Now use:

<ui5-li accessible-role="MenuItem"> List Item</ui5-li>
<ui5-list accessible-role="Tree"> List </ui5-list>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-table: If you previously used the Table from @ui5/webcomponents, you need to import it from @ui5/webcomponents-compat:

import "@ui5/webcomponents-compat/dist/Table.js"; // ui5-table
import "@ui5/webcomponents-compat/dist/TableColumn.js"; // ui5-table-column
import "@ui5/webcomponents-compat/dist/TableRow.js"; // ui5-table-row`
import "@ui5/webcomponents-compat/dist/TableGroupRow.js";` // ui5-table-group-row
import "@ui5/webcomponents-compat/dist/TableCell.js"; // ui5-table-cell

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

If you previously used ValueState.Warning, ValueState.Error or ValueState.Success, start using ValueState.Critical, ValueState.Negative and ValueState.Positive respectively. All components with valueState property are also affected. For example:

<ui5-input value-state="Success"></ui5-input>
<ui5-input value-state="Warning"></ui5-input>
<ui5-input value-state="Error"></ui5-input>

<ui5-input value-state="Positive"></ui5-input>
<ui5-input value-state="Critical"></ui5-input>
<ui5-input value-state="Negative"></ui5-input>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-toast: The Toast#show method has been replaced by open property. If you previously used toast.show() to show the toast, you must now se toast.open=true.
ui5-segmented-button-item: The ui5-segmentedbutton-item pressed property is called selected now.

Previously the application developers could use the ui5-segmentedbutton-item as follows:

<ui5-segmented-button>
  <ui5-segmented-button-item pressed> Option 1</ui5-segmented-button-item>
  <ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
  <ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>

Now the application developers should use the ui5-segmentedbutton-item as follows:

<ui5-segmented-button>
  <ui5-segmented-button-item selected> Option 1</ui5-segmented-button-item>
  <ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
  <ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-wizard: changeWithClick was renamed to withScroll in the WizardStepChangeEventDetail.

JIRA: BGSOFUIRILA-3867

theming: Remove SAP Belize theme
ui5-illustrated-message: The titleLevel property of the ui5-illustrated-messageis removed. If you have previously used the titleLevel property:

<ui5-illustrated-message title-level="H6>

it will no longer work for the component.

Instead, you could set the title of the ui5-illustrated-message on the title slot, as it follows

<ui5-illustrated-message>
      <ui5-title slot="title" level="H3">This is a slotted title</ui5-title>
</ui5-illustrated-message>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-segmented-button: The mode property is changed to SelectionMode and the values it take from SingleSelect and MultiSelect to Single and Multiple. Also deleted deprecated getter - selectedItem and deprecated event detail selectedItem and now can be used with the selectedItems getter and selectedItems event detail.

Previously the application developers could set the selection mode as follows:

<ui5-segmented-button id="segButtonMulti" mode="MultiSelect">
  <ui5-segmented-button-item>Item</ui5-segmented-button-item>
  <ui5-segmented-button-item>Item</ui5-segmented-button-item>
  <ui5-segmented-button-item>Click</ui5-segmented-button-item>
  <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>

Now the application developers could set the selection mode as follows:

<ui5-segmented-button id="segButtonMulti" selection-mode="Multiple">
  <ui5-segmented-button-item>Item</ui5-segmented-button-item>
  <ui5-segmented-button-item>Item</ui5-segmented-button-item>
  <ui5-segmented-button-item>Click</ui5-segmented-button-item>
  <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-page: disableScrolling has been renamed, floatingFooter property has been removed and fixedFooter property has been added instead.

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-split-button: The activeIcon property ha been remove, as the interaction is considered obsolete by the UX design team. if you previously used active-icon:

<ui5-split-button id="sbTextActiveIcon" active-icon="accept">Active Icon</ui5-split-button>

it's wont take effect anymore even if set.

ui5-menu: The busy and busyDelay and properties of the ui5-menu and ui5-menu-item are renamed. If you have previously used the busy, busyDelay properties:

<ui5-menu header-text="My ui5-menu" busy busy-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" busy busy-delay="100"><ui5-menu-item> now you should use loading and loadingDelay properties:

<ui5-menu header-text="My ui5-menu" loading loading-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" loading loading-delay="100"><ui5-menu-item>

ui5-carousel: "Device#isIE" method has been removed and no longer available

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: Removed the CSP.js module and the creation of <style> and <link> tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:

import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"

ui5-carousel: Removed the ICardHeader interface. If you previously used the interface

import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"

Use the CardHeader type instead:

import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"

ui5-carousel: Removed the IUploadCollectionItem interface. If you previously used the interface:

import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"

Use the UploadCollectionItem type instead:

import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The size property now accepts different values. If you previously used it like:

<ui5-busy-indicator size="Small"></ui5-busy-indicator>

Now use the new values instead:

<ui5-busy-indicator size="S"></ui5-busy-indicator>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The status property and its shadow part have been renamed. If you previously used them:

<style>
    .cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>

Now use additionalText instead:

<style>
       .cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The pageIndicatorStyle no longer exists. If you previously used it like:

<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>

Now you should use pageIndicatorType instead:

<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: Removed UI5Element#render method in favour of UI5Element#renderer. If you previously used "render"

class MyClass extends UI5Element {
    static get render() {
        return litRenderer;
    }
}

start using "renderer"

class MyClass extends UI5Element {
    static get renderer() {
        return litRenderer;
    }
}

ui5-carousel: Remove JavaScript template option from @ui5/create-webcomponents-package Previously npm init @ui5/webcomponents-package used to create JS-based project, however now it will be TypeScript-based project. If you previously used npm init @ui5/webcomponents-package --enable-typescript to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package and --enable-typescript is removed.
ui5-carousel: The Left and Right options option have been renamed. If you previously used them to set the placement or the alignment of the popover:

<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>

Now use Start or End instead:

<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

docs: deploy v2 preview
ui5-carousel: Remove soccor icon. Use soccer instead.
ui5-carousel: Remove add-polygone icon. Use add-polygon instead.
ui5-carousel: The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json
ui5-carousel: All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package:

import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"

use the dynamic equivalent of it:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The event selected-dates-change is renamed to selection-change. In addition the event details values and dates are renamed to selectedValues and selectedDateValues. If you previously used the Calendar event as follows:

myCalendar.addEventListener("selected-dates-change", () => {
    const values = e.detail.values;
    const dates = e.detail.dates;
})

Now you have to use the new event name and details:

myCalendar.addEventListener("selection-change", () => {
   const values = event.detail.selectedValues;
   const dates = event.detail.selectedDateValues;
})

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The property color is renamed to value. If you previously used the change event of the ColorPicker as follows:

<ui5-color-picker color="red"></ui5-color-picker>

Now you have to use it like this:

<ui5-color-picker value="red"></ui5-color-picker>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: JavaScript projects may not function properly with the tools package.
ui5-carousel: The openPopover and showAt methods are removed in favor of open and opener properties. If you previously used the imperative API:

button.addEventListener("click", function(event) {
	colorPalettePopover.showAt(this);
});

Now the declarative API should be used instead:

<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">

button.addEventListener("click", function(event) {
	colorPalettePopover.open = !colorPalettePopover.open;
});

ui5-carousel: The ui5-bar component is now in main library. If you previously imported the ui5-bar from fiori:

import "@ui5/webcomponents-fiori/dist/Bar.js;

Now, import the ui5-bar from main:

import "@ui5/webcomponents/dist/Bar.js";

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: If you have previously used:

<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>

Now use:

<ui5-tab id="nestedTab" slot="items"></ui5-tab>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: If you have previously used:

<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>

Now use:

<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: If you previously imported TabContainerBackgroundDesign, use BackgroundDesign instead.

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The showOverflow property is removed. If previously you have used:

<ui5-tabcontainer show-overflow></ui5-tabcontainer>

now use the overflowButton slot:

<ui5-tabcontainer>
	<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
	<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The placementType property and the PopoverPlacementType enum have been renamed. If you have previously used the placementType property and the PopoverPlacementType

<ui5-popover placement-type="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";

Now use placement instead:

<ui5-placement="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-carousel: The size property of the ui5--illustrated-message is renamed to design. If you have previously used the size property:

<ui5-illustrated-message size="Dialog">

Now use design instead:

<ui5-illustrated-message design="Dialog">

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-carousel: The separator-style property is renamed to separators and the BreadcrumbsSeparatorStyle enum is renamed to BreadcrumbsSeparator. If you have previously used the separator-style property:

<ui5-breadcrumbs separator-style="Slash">

Now use separators instead:

<ui5-breadcrumbs separators="Slash">

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-carousel: The disabled property of the ui5-option is removed. If you have previously used the disabled property:

<ui5-option disabled>Option</ui5-option>

it will no longer work for the component.

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

refactor(ui5-upload-collection): introduce items-per-page property

The items-per-page-s, items-per-page-m, items-per-page-l properties are replaced by a single property items-per-page with value in the following format "S1 M2 L3"

refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties

Add XL size and refactor

chore: tests added
fix: xl test
refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties

Address code review coments

refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties

Address code review comments

refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties

Updates documentation

Icons: UI5 Web Components Icons now export getPathData (function) instead of pathData (string)

If you used icons like this:

import "@ui5/webcomponents-icons/dist/accept.js";

or like this:

import accept from "@ui5/webcomponents-icons/dist/accept.js";

there is no change and no adaptations are required.

In the rare case you imported pathData from icons, for example:

import { pathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
console.log(pathData); // String containing the SVG path

you must change your code to, for example:

import { getPathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
getPathData().then(pathData => {
  console.log(pathData); // String containing the SVG path
});

ui5-list: The ui5-li-groupheader component is removed. Groups can now be created with the ui5-li-group. Instead of using ui5-li-groupheader as separator in a flat structure:

<ui5-list> <ui5-li-groupheader>Actions</ui5-li-groupheader> <ui5-li>Delete Product</ui5-li> <ui5-li>Audit Log Settings</ui5-li> <ui5-li-groupheader>Products</ui5-li-groupheader> <ui5-li>Product 1</ui5-li> </ui5-list> The API supports nesting of ui5-li components inside an ui5-li-group with the header-text property: <ui5-list> <ui5-li-group header-text="Actions"> <ui5-li>Delete Product</ui5-li> <ui5-li>Audit Log Settings</ui5-li> </ui5-li-group> </ui5-list> or with the header slot: <ui5-list> <ui5-li-group> <div slot="header" style="width: '100%'; display: flex; justify-content:space-between; align-items:center;"> <span>Back End Developers</span> <ui5-icon name="navigation-right-arrow"></ui5-icon> </div> <ui5-li>Delete Product</ui5-li> <ui5-li>Audit Log Settings</ui5-li> </ui5-li-group> </ui5-list> In addition, the the List's items slot getter, will now return ui5-li-group instances as well. There is a new readonly getter listItems will return an array flat structure containing listitems and group header items. * **ui5-badge:** The `design` property has new default value `Neutral` instead of `Set3`. If you have previously used ```html <ui5-badge></ui5-badge>``` without attributes, to have the same look and feel now you have to set the design property to “Set3”: ```html <ui5-badge design="Set3"></ui5-badge>```

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

2.0.0-rc.2

Diff

ui5-webc-bot

published 2.0.0-rc.2 • 7 months ago

Changelog

Source

2.0.0-rc.2 (2024-04-18)

Bug Fixes

u5-dialog: soft keyboard is correctly opened on iOS devices (#8583) (6cf1d74)
ui5-calendar, ui5-daterange-picker: align range selection styling with vd specification (#8585) (d4f0e0e)
ui5-menu-item: apply scoping to internal Icon (#8751) (ce55755)
ui5-popover: fix popover going out of the viewport (#8735) (bca8f2a)
ui5-progress-indicator: hidden value design (#8545) (bf094d3)
ui5-responsive-popover: fix dialog initial focus (#8774) (27b522f)
ui5-shellbar: aligned specs (#8694) (c5ec720)
ui5-shellbar: assistant icon color fixed (#8713) (e501ac8)
ui5-side-navigation: import overflow icon (#8736) (8bc1bb4)
ui5-side-navigation: replace items and fixedItems union type with SideNavigationItemBase (#8740) (b589486)
ui5-split-button: add correct opacity when disabled (#8738) (399144e), closes #8615
ui5-tabcontainer: prevent endless resizing when moving after last overflow item (#8725) (c33ba40)
ui5-tabcontainer: replace default slot union type with interface (#8734) (ac6b44f)

Code Refactoring

ui5-multi-combobox: rename property allowCustomValues to noValidation (#8765) (bb27acb)
ui5-textarea: rename property growingMaxLines to growingMaxRows (#8756) (3fd33ab), closes #8461

Features

ui5-avatar-group: update focus handling (#8550) (0bb5c9d), closes #8320
ui5-barcode-scanner-dialog: add support for close and open events (#8753) (1ae2142), closes #8695
ui5-date-*: adapt date and time controls to timezone feature (#8610) (1acae01), closes #8461
ui5-li: add support for F2 key (#8619) (24c3807), closes #7736
ui5-link: introduce tooltip property (#8670) (ef64000)
ui5-message-strip: introduce custom colors (#8757) (d30f424)

BREAKING CHANGES

ui5-multi-combobox: The allowCustomValues property have been renamed to noValidation. If you have previously used the allowCustomValues property <ui5-multi-combobox allow-custom-values></ui5-multi-combobox> Now use noValidation instead: <ui5-multi-combobox no-validation></ui5-multi-combobox>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-textarea: The growingMaxLines property have been renamed to growingMaxRows.

2.0.0-rc.1

Diff

ui5-webc-bot

published 2.0.0-rc.1 • 7 months ago

Changelog

Source

2.0.0-rc.1 (2024-04-11)

Bug Fixes

decorators stop searching for accessors when reaching HTMLElement (#8718) (dbc48cd)
Popup: prevent a rare runtime error (#8707) (02eb1c7)
ui5-menu: adjust active menu item text color (#8699) (1a7331d), closes #8681
ui5-popup: fix scrolling and visualization on iphone (#8716) (d9ef14b)
ui5-step-input: align the input vertically (#8696) (70322fc), closes #8667
ui5-tabcontainer: don't allow parent item to be moved among its children (#8665) (e265375)
ui5-tree-item-custom: improved key handling (#8637) (eeb76fe), closes #7566

Features

add shadowRootOptions for @customElement decorator (#8703) (7168dc2)
ui5-button: provide focus support for mobile (#8414) (4d9e32f), closes #8178 #8322
ui5-text: introduce Text web component (#8299) (91acaf5), closes #6788
ui5-tree: enable drag and drop (#8477) (4514f57), closes #7562

2.0.0-rc.0

Diff

ui5-webc-bot

published 2.0.0-rc.0 • 7 months ago

Changelog

Source

2.0.0-rc.0 (2024-04-09)

Bug Fixes

ui5-flexible-column-layout: improved separators borders (#8639) (367ca80), closes #8307
ui5-multi-input: fix failing popover test (#8662) (3234747)
ui5-multi-input: prevent double value state message on nMore open (#8638) (ed7b3ba), closes #8586
ui5-multi-input: prevent double value state message on nMore open (#8666) (fdbf442), closes #8638 #8586
ui5-upload-collection: update ui5-upload-collection Drag and Drop overlay color (#8616) (73f713e)

chore

bring release-2.0 to main (#8651) (69271c9), closes #8494 #8496 #8461 #8497 #8461 #8504 #8509 #8507 #8511 #8501 #8461 #8503 #8461 #8506 #8502 #8524 #8461 #8525 #8461 #8518 #8461 #8526 #8529 #8528 #8531 #8532 #8534 #8163 #8527 #8538 #8521 #8461 #8542 #8461 #8548 #8555 #8559 #8565 #8570 #8558 #8568 #8596 #8192 #8606 #8605 #8600 #8602 #8593

Code Refactoring

ui5-list, ui5-tree, ui5-upload-collection: rename mode to selectionMode (#8657) (d53b3b2)
ui5-list: renamed busy, busyDelay to loading, loadingDelay (#8686) (38e4df4), closes #8461 #7887
ui5-progress-indicator: remove disabled property (#8683) (5e5c40a)
ui5-tab, ui5-tab-separator: rename getTabInStripDomRef to getDomRefInStrip (#8653) (773237f)
ui5-tabcontainer: remove fixed property (#8676) (98052e1), closes #8461
ui5-upload-collection: remove Delete selection mode (#8607) (926ae75)

Features

focus: new focus handling (#8590) (b6a33e0)
ui5-checkbox: update focus handling (#8553) (ce28296), closes #8320

BREAKING CHANGES

ui5-list: The busy property of the ui5-list is renamed. If you have previously used the busy, busyDelay properties:

<ui5-list busy busy-delay="500"></ui5-list>

now you must use loading and loadingDelay properties:

<ui5-list loading loading-delay="500"></ui5-list>

ui5-progress-indicator: The disabled property of the ui5-progress-indicator is removed. If you have previously used the disabled property, it won't take effect:

<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-tabcontainer: Property "fixed" is removed and there is no alternative provided. The TabContainer is no longer expandable/collapsible via use interaction. You can still show the TabContainer collapsed via the "collapsed" property.
ui5-upload-collection: The selectionMode property no longer accepts "Delete" as value. If you have previously used it:

<ui5-upload-collection selection-mode="Delete"></ui5-upload-collection>

Now omit it completely and use hide-delete-button onto the ui5-upload-collection:

<ui5-upload-collection>
   <ui5-upload-collection-item hide-delete-button>  </ui5-upload-collection-item>
</ui5-upload-collection>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

ui5-list, ui5-tree, ui5-upload-collection: The mode property and the ListMode enum have been renamed. If you have previously used the mode property and the ListMode values:

<ui5-list class="list" mode="SingleSelect">
<ui5-list class="list" mode="MultiSelect">
<ui5-upload-collection mode="SingleSelectBegin">
<ui5-upload-collection mode="SingleSelectEnd">
<ui5-tree mode="SingleSelectAuto" >
<ui5-tree mode="None" >

Now use selectionMode and Single, Multiple instead:

<ui5-list class="list" selection-mode="Single">
<ui5-list class="list" selection-mode="Multiple">
<ui5-upload-collection selection-mode="SingleStart">
<ui5-upload-collection selection-mode="SingleEnd">
<ui5-tree selection-mode="SingleAuto">
<ui5-tree selection-mode="None">

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

ui5-tab, ui5-tab-separator: If previously you have used:

someTab.getTabInsStripDomRef();
someTabSeparator.getTabInsStripDomRef();

Now use:

someTab.getDomRefInStrip();
someTabSeparator.getDomRefInStrip();

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

"Device#isIE" method has been removed and no longer available

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

Removed the CSP.js module and the creation of <style> and <link> tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:

import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"

Removed the ICardHeader interface. If you previously used the interface

import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"

Use the CardHeader type instead:

import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"

Removed the IUploadCollectionItem interface. If you previously used the interface:

import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"

Use the UploadCollectionItem type instead:

import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

The size property now accepts different values. If you previously used it like:

<ui5-busy-indicator size="Small"></ui5-busy-indicator>

Now use the new values instead:

<ui5-busy-indicator size="S"></ui5-busy-indicator>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

The status property and its shadow part have been renamed. If you previously used them:

<style>
    .cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>

Now use additionalText instead:

<style>
       .cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

The pageIndicatorStyle no longer exists. If you previously used it like:

<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>

Now you should use pageIndicatorType instead:

<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

Removed UI5Element#render method in favour of UI5Element#renderer. If you previously used "render"

class MyClass extends UI5Element {
    static get render() {
        return litRenderer;
    }
}

start using "renderer"

class MyClass extends UI5Element {
    static get renderer() {
        return litRenderer;
    }
}

Remove JavaScript template option from @ui5/create-webcomponents-package Previously npm init @ui5/webcomponents-package used to create JS-based project, however now it will be TypeScript-based project. If you previously used npm init @ui5/webcomponents-package --enable-typescript to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package and --enable-typescript is removed.
The Left and Right options option have been renamed. If you previously used them to set the placement or the alignment of the popover:

<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>

Now use Start or End instead:

<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

docs: deploy v2 preview
Remove soccor icon. Use soccer instead.
Remove add-polygone icon. Use add-polygon instead.
The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json
All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package:

import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"

use the dynamic equivalent of it:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

The event selected-dates-change is renamed to selection-change. In addition the event details values and dates are renamed to selectedValues and selectedDateValues. If you previously used the Calendar event as follows:

myCalendar.addEventListener("selected-dates-change", () => {
    const values = e.detail.values;
    const dates = e.detail.dates;
})

Now you have to use the new event name and details:

myCalendar.addEventListener("selection-change", () => {
   const values = event.detail.selectedValues;
   const dates = event.detail.selectedDateValues;
})

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

The property color is renamed to value. If you previously used the change event of the ColorPicker as follows:

<ui5-color-picker color="red"></ui5-color-picker>

Now you have to use it like this:

<ui5-color-picker value="red"></ui5-color-picker>

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

JavaScript projects may not function properly with the tools package.
The openPopover and showAt methods are removed in favor of open and opener properties. If you previously used the imperative API:

button.addEventListener("click", function(event) {
	colorPalettePopover.showAt(this);
});

Now the declarative API should be used instead:

<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">

button.addEventListener("click", function(event) {
	colorPalettePopover.open = !colorPalettePopover.open;
});

The ui5-bar component is now in main library. If you previously imported the ui5-bar from fiori:

import "@ui5/webcomponents-fiori/dist/Bar.js;

Now, import the ui5-bar from main:

import "@ui5/webcomponents/dist/Bar.js";

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

If you have previously used:

<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>

Now use:

<ui5-tab id="nestedTab" slot="items"></ui5-tab>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

If you have previously used:

<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>

Now use:

<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

If you previously imported TabContainerBackgroundDesign, use BackgroundDesign instead.

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

The showOverflow property is removed. If previously you have used:

<ui5-tabcontainer show-overflow></ui5-tabcontainer>

now use the overflowButton slot:

<ui5-tabcontainer>
	<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
	<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

The placementType property and the PopoverPlacementType enum have been renamed. If you have previously used the placementType property and the PopoverPlacementType

<ui5-popover placement-type="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";

Now use placement instead:

<ui5-placement="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";

Related to https://github.com/SAP/ui5-webcomponents/issues/8461

The size property of the ui5--illustrated-message is renamed to design. If you have previously used the size property:

<ui5-illustrated-message size="Dialog">

Now use design instead:

<ui5-illustrated-message design="Dialog">

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

The separator-style property is renamed to separators and the BreadcrumbsSeparatorStyle enum is renamed to BreadcrumbsSeparator. If you have previously used the separator-style property:

<ui5-breadcrumbs separator-style="Slash">

Now use separators instead:

<ui5-breadcrumbs separators="Slash">

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

The disabled property of the ui5-option is removed. If you have previously used the disabled property:

<ui5-option disabled>Option</ui5-option>

it will no longer work for the component.

Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887

You can no longer import and implement the ITab interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.

…