@ui5/webcomponents - npm Package Versions

published 2.0.0-rc.2 • last month

Changelog

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

published 2.0.0-rc.1 • last month

Changelog

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

published 2.0.0-rc.0 • last month

Changelog

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.

1.24.0

published 1.24.0 • 2 months ago

Changelog