Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ui5/webcomponents

Package Overview
Dependencies
Maintainers
5
Versions
493
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ui5/webcomponents - npm Package Versions

1
49

1.24.3

Diff

ilhan007
published 1.24.2 •

ui5-webc-bot
published 1.24.1 •

ui5-webc-bot
published 2.0.0-rc.3 •

Changelog

Source

2.0.0-rc.3 (2024-05-10)

Bug Fixes

  • 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

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

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

ui5-webc-bot
published 2.0.0-rc.2 •

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

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.
ui5-webc-bot
published 2.0.0-rc.1 •

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

ui5-webc-bot
published 2.0.0-rc.0 •

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

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

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.
ui5-webc-bot
published 1.24.0 •

Changelog

Source

1.24.0 (2024-04-04)

Features

  • ui5-carousel: add accessibleName and accessibleNameRef (#8631) (0d0d765)
ui5-webc-bot
published 1.23.3 •

ui5-webc-bot
published 1.24.0-rc.4 •

Changelog

Source

1.24.0-rc.4 (2024-04-04)

Bug Fixes

Features

  • enable property decorator for property accessors (#8587) (12b6f1a)
  • ui5-progress-indicator: introduce "bar" CSS part (#8599) (831fad3), closes #6140
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc