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

@ui5/webcomponents

Package Overview
Dependencies
Maintainers
2
Versions
494
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ui5/webcomponents - npm Package Versions

1
50

0.0.0-c48b38fdc

Diff

ilhan007
published 0.0.0-fca1107e7 •

ui5-webc-bot
published 1.24.5 •

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

Changelog

Source

2.0.0-rc.6 (2024-06-17)

Bug Fixes

  • framework: set dataTransfer.effectAllowed only for UI5 elements (#9136) (28f6a2d)
  • ui5-barcode-scanner-dialog: properly fire 'close' event (#9193) (db099f1), closes #9177
  • ui5-busy-indicator: add block layer (#9208) (ba4ddb3), closes #9079
  • ui5-button: fix tab chaining in lists (#9148) (9fdf617)
  • ui5-carousel: selected state is added to item (#9184) (ced0f35)
  • ui5-date-picker: adjust unstable tests (#9223) (3b049c8), closes #9033
  • ui5-date-picker: provide accessible name to the popover (#8693) (26dee35), closes #8598
  • ui5-dialog: fix focusing when dialog is open from OpenUI5 dialog (#9183) (d067e13)
  • ui5-file-uploader: apply focus properly from inside of a popover (#9162) (2283e9e), closes #9090
  • ui5-li-notification: enhance accessibility (#9192) (cc34cea), closes #9161
  • ui5-list-item: move styles back from shadow DOM element to :host (#9155) (68cdd20)
  • ui5-list: adjust failing test (#9191) (55e477c), closes #9173
  • ui5-multi-combobox: correct lint error (#9157) (55cd3aa)
  • ui5-notification-list: change host to display:block (#9139) (efb4791)
  • ui5-segmented-button-item: add padding to icon when item is not in icon-only mode (#9180) (a3fd241), closes #9172
  • ui5-shellbar: add tooltip for shellbar items (#9143) (c39c18a)
  • ui5-side-navigation: group name is announced one time by screen … (#9207) (4f18dfd)
  • ui5-special-date: respect format-pattern (#9086) (105c311)
  • ui5-step-input: check for inner input before using value (#9212) (1b9fb61)
  • ui5-tree-item: ensure correct cursor style (#9152) (d196583), closes #9146

Code Refactoring

Features

  • ui5-ai-prompt-input: initial (experimental) implementation (#9078) (9dcdfdb)
  • ui5-grid: implementing new grid component (#8362) (04d291d)
  • ui5-link: introduce icon and endIcon properties (#9036) (06318cb)
  • ui5-toolbar: design property added (#9147) (dc3dfe0)

BREAKING CHANGES

  • ui5-checkbox: wrapping-type property default value has changed from None to Normal. Before:
<ui5-checkbox text=Some very very very very long text"></ui5-checkbox><!-- would truncate the text if there is not enough space -->

Now:

<ui5-checkbox text=Some very very very very long text"></ui5-checkbox> <!-- would let the text wrap if there is not enough space -->

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

  • ui5-side-navigation-item: the wholeItemToggleAble poperty of ui5-side-navigation-item is now remomoved. The functionality of clicking the whole item to show/hide the sub items (if present) will be introduced soon with new property name and enhanced accessibility and keyboard handling.
  • ui5-tag: wrapping-type property default value has changed from None to Normal. Before:
<ui5-tag>In Process</ui5-tag><!-- would truncate the text if there is not enough space -->

Now:

<ui5-tag>In Process</ui5-tag><!-- would let the text wrap if there is not enough space -->

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

  • refactor(ui5-tag): fix test texsts

  • refactor(ui5-tag): fix height of the tags to be the same

No matter if the tag is with wrapping-type="None" or wrapping-type="Normal" the height when there is only one line of text should be the same.

  • refactor(ui5-tag): merge adjustments and code review comments

  • refactor(ui5-tag): fix height

  • ui5-li, ui5-li-custom: StandardListItem has been renamed to ListItemStandard, and CustomListItem has been renamed to ListItemCustom. If you previously imported the classes as follows:

import StandardListItem from "@ui5/webcomponents/StandardListItem.js";
import CustomListItem from "@ui5/webcomponents/CustomListItem.js";

now you must change imports to:

import ListItemStandard from "@ui5/webcomponents/ListItemStandard.js";
import ListItemCustom from "@ui5/webcomponents/ListItemCustom.js";

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

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

Changelog

Source

2.0.0-rc.5 (2024-06-06)

Bug Fixes

Code Refactoring

Features

BREAKING CHANGES

  • ui5-radio-button: wrapping-type property default value has changed from None to Normal. Before:
<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would truncate the text if there is not enough space -->

Now:

<ui5-radio-button text="Option A with long long text"></ui5-radio-button>
<!-- would let the text wrap if there is not enough space -->

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

  • ui5-link: wrapping-type property default value has changed from None to Normal. Before:
<ui5-link>some very very very long link</ui5-link> <!-- would truncate the text if there is not enough space -->

Now:

<ui5-link>some very very very long link</ui5-link> <!-- would let the text wrap if there is not enough space -->
ilhan007
published 0.0.0-d473b9686 •

ilhan007
published 0.0.0-bf8366eb6 •

ui5-webc-bot
published 1.24.4 •

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

Changelog

Source

2.0.0-rc.4 (2024-05-29)

Bug Fixes

  • register runtime in SSR usage (#9013) (54db283)
  • ui5-*: Make setAnimationMode() properly change modes (#8965) (9f5d276), closes #8964
  • ui5-button: add keyboard shortcut to cancel the button's action (c2d9c85), closes #6782
  • ui5-button: adjust ui5-button menu button samples to use open/opener (974ff8c)
  • ui5-button: remove tabindex from disabled button (#8957) (041f573), closes #8852
  • ui5-calendar-legend: align visual design to meet WCAG 2.2 requirements (0860a3e)
  • ui5-calendar: change the show month/year private event names (#8960) (c981459), closes #8893
  • ui5-calendar: respect component level calendarType in week calculation (#8971) (69b8003)
  • ui5-calendar: switch to two column layout on Islamic or Persian secondary calendar type (#8453) (1b172eb)
  • ui5-date-picker: adjust failing tests (#9039) (7232039), closes #9033 #9034
  • ui5-date-picker: display initial view properly (#8910) (e570031), closes #8893
  • ui5-datetime-picker: change dateformat to datetime instance (#9024) (e5051ea)
  • ui5-illustrated-mesasge: update subtitle color (#8986) (c9a5120), closes #8984
  • ui5-multi-input: delete selected value on BACKSPACE (#8982) (d773532)
  • ui5-multiinput: restore and adjust unit tests (#8933) (70dc2a6)
  • ui5-notification-list: fix keyboard issues (#9040) (f1c0635)
  • ui5-notification: implement keyboard navigation spec (#8975) (d68c883)
  • ui5-panel: fix failing tests (#9044) (aeb7d42)
  • ui5-popover: correct placement in RTL direction (#9009) (36fa85e)
  • ui5-popover: fix auto close when click on iframe inside a shadow root (#8961) (5c2f5f6)
  • ui5-popover: fix infinite open/show loop (#9055) (a142caf), closes #9031
  • ui5-popover: prevent runtime error when opener is outside the viewport (#9017) (9212aa8)
  • ui5-responsive-popover: fix initially focused input going out of the viewport on iPhone (#8945) (7ff177c)
  • ui5-segmented-button-item: align sizes to spec (#8972) (0eefe5f), closes #7357
  • ui5-select: popover scrolls to typed item (#9053) (70bbd7f), closes #8987
  • ui5-side-navigation-item: "selected" is no longer announced on every focused item (#9008) (8cd3f83)
  • ui5-side-navigation-item: click event is no longer fired twice (#8944) (0dd36ca)
  • ui5-side-navigation: menu in collapsed mode width is not longer stretched unnecessary (#8940) (30c0530)
  • ui5-side-navigation: overflow menu items are now displayed (#8948) (bcb3008)
  • ui5-tag: add colors for Quartz high contrast themes for Set 2 (#8952) (92b3cf8)
  • ui5-time-picker: remove box shadow (#8951) (7c7170d), closes #8932

Code Refactoring

Features

BREAKING CHANGES

  • ui5-input: Remove openPicker method and replace it with public property open

Before the ui5-input suggestions popover could be opened by calling openPicker() :

const input = document.getElementById("exampleID");
input.openPicker();

Now the suggestions popover is opened by setting the open property to true:

const input = document.getElementById("exampleID");
input.open = true;
  • refactor(ui5-input): fix spacing in input.mobile.spec.js
  • ui5-combobox: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group.
  • ui5-list: Highlight enum should be imported differently. Before:
import HighlightTypes from "@ui5/webcomponents-base/dist/types/HighlightTypes.js";

Now:

import Highlight from "@ui5/webcomponents-base/dist/types/Highlight.js";
  • ui5-toolbar-button: iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>

Now:

<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>

or

<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>

  • ui5-notification: Instead of ui5-list, ui5-notification-list should be used as a container for ui5-li-notification-group and ui5-li-notification components.

Previously the application developers were defining notifications in this way:

<ui5-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..

To support accessibility, developers should now use the ui5-notification-list as seen below:

<ui5-notification-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..
  • ui5-shellbar: 1. The showCoPilot property of the ui5-shellbar is removed.

If you have previously used the showCoPilot property:

<ui5-shellbar show-co-pilot></ui5-shellbar>

it will no longer work for the component.

  1. The CoPilotAnimation feature of the ui5-shellbar is removed.

If you have previously used the CoPilotAnimation feature:

import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"

it will no longer work for the component.

  1. The copilotDomRef getter of the ui5-shellbar is removed.

If you have previously used the copilotDomRef public getter:

shellbar.copilotDomRef

it will no longer work for the component.

  1. The co-pilot-click event of the ui5-shellbar is removed. If you have previously used the co-pilot-click public event:
shellbar.addEventListener("ui5-co-pilot-click", function(event) {
	...
});

it will no longer work for the component.

You can achieve similar functionality with the new slot:

HTML:

<ui5-shellbar>
  <ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
</ui5-shellbar>

JavaScript:

assistant.addEventListener("click", function (event) {
	const toggleButton = event.target;
	toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
});

  • ui5-option: The ui5-select-menu and ui5-select-menu-option components are removed. Custom options can now be created using the ui5-option-custom, directly placed inside the default slot of the ui5-select

SelectMenu & SelectMenuOption Changed item Old New SelectMenu ui5-select-menu removed SelectMenuOption ui5-select-menu-option ui5-option-custom If you have previously used the ui5-select-menu and ui5-select-menu-option:

<ui5-select menu="selectMenu"></ui5-select>

<ui5-select-menu id="selectMenu"> <ui5-select-menu-option> <div class="optionContent">custom</div> </ui5-select-menu-option> </ui5-select-menu> Now use just ui5-select and ui5-option-custom instead: <ui5-select> <ui5-option-custom> <div class="optionContent">custom</div> </ui5-option-custom> </ui5-select> Select Changed item Old New property menu removed The menu property of the ui5-select is removed. * **ui5-button:** iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-button icon="home" icon-end>Button</ui5-button>

Now:

<ui5-button end-icon="home">Button</ui5-button>

or

<ui5-button icon="employee" end-icon="home">Button</ui5-button>

  • ui5-toast: The after-close event has been renamed to close. If you previously used it like:
toast.addEventListener("after-close", (event) => {
});

Now you have to use it like:

toast.addEventListener("close", (event) => {
});

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

  • ui5-*: The features/InputElementsFormSupport.js feature has been deleted and now, form elements works natively in form elements.
  • ui5-date-range: dates slot in a calendar now works with a ui5-date-range when selection-mode="Range"

Previously date ranges were declared as follows:

<ui5-calendar selection-mode="Range"> <ui5-date value="Jan 20, 2021"></ui5-date> <ui5-date value="Jan 30, 2021"></ui5-date> </ui5-calendar>

Now they are declared using a ui5-date-range:

<ui5-calendar selection-mode="Range"> <ui5-date-range start-value="Jan 20, 2021" end-value="Jan 30, 2021"></ui5-date-range> </ui5-calendar> * **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ```

Now the application developers should include the ui5-bar as follows:

popup.addEventListener("open", function() {
	//...
});

popup.addEventListener("close", function() {
	//...
});

  • ui5-popover: Property hideBackdrop is removed.

Previously the application developers could define a modal popover without visible backdrop as follows:

<ui5-popover modal hide-backdrop>

Now the application developers can use the standard ::backdrop CSS selector


<style>
.transparentBackdrop::backdrop {
  background: transparent;
}
</style>

...

<ui5-popover modal class="transparentBackdrop">
ilhan007
published 0.0.0-07d38e78e •

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