@ui5/webcomponents-base

UI5 Web Components - Base

Contains the base files for all Web Components, most notably @ui5/webcomponents-base/dist/UI5Element.js.

Provided APIs for applications

Affects	Import	Description
Configuration	@ui5/webcomponents-base/dist/config/Theme.js	Sets Theme Configuration
Configuration	@ui5/webcomponents-base/dist/config/Language.js	Sets Language Configuration
Configuration	@ui5/webcomponents-base/dist/config/AnimationMode.js	Sets Animation Mode Configuration
Configuration	@ui5/webcomponents-base/dist/config/NoConflict.js	Sets "NoConflict" Mode Configuration - if enabled all custom events are fired with the ui5- prefix
Framework	@ui5/webcomponents-base/dist/features/OpenUI5Support.js	Adds integration with the OpenUI5 framework for resources re-use
Components	@ui5/webcomponents-base/dist/features/F6Navigation.js	Adds support for F6 fast group navigation
Components	import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js"	Applies direction ("ltr"/"rtl") - re-renders all RTL-aware components
Components	import { setCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"	Adds suffix to the tag names of all components
Components	@ui5/webcomponents-base/dist/util/InvisibleMessage.js	Provides a way to expose dynamic content changes that can be announced by screen readers

applyDirection.js

• applyDirection

Boot.js

• attachBoot

CustomElementsScope.js

• setCustomElementsScopingSuffix
• getCustomElementsScopingSuffix
• setCustomElementsScopingRules
• getCustomElementsScopingRules

IgnoreCustomElements.js

• ignoreCustomElements

i18nBundle.js

• registerI18nLoader
• getI18nBundle

PropertiesFileFormat.js

• parseProperties

Render.js

• renderFinished

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Playground and API Reference

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.

License

Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.

Changelog

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

Bug Fixes

• ui5-button: adjust screen reader announcement order (#8997) (2d9a16b)
• ui5-calendar: adjust accessibility semantics (#9102) (06891a1), closes #9068 #9069
• ui5-combobox: fix grouping sample (#9085) (2c160d3)
• ui5-date: remove circular dependency (#9137) (9c8d12e)
• ui5-input, ui5-combobox, ui5-multi-combobox: prevent native input autocomplete (#9130) (5d8dbbd)
• ui5-notification-list: improved accessibility (#9070) (5e62d4a)
• ui5-option-custom: show focus outline (#9101) (bf8366e)
• ui5-popup: initialFocus won't work if 'autofocus' is set (#8956) (2c9f775)
• ui5-popup: remove popup from the tab chain (#8955) (aedcdb9), closes #9094
• ui5-shellbar: improved samples accessibility (#8847) (7563e7d), closes #8821

Code Refactoring

• ui5-link: wrap text by default (#9006) (1924b54)
• ui5-radio-button: wrap text by default (#9117) (b8d7bac)

Features

• ui5-menu-item: add endContent slot (dc3cfde), closes #6350
• ui5-select: introduced 'popover' part (#9120) (3c03e17), closes #4503
• ui5-time-picker: introduce open and close events (#9093) (bf2d0aa)

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 -->