@ui5/webcomponents 2.5.0-rc.3 → 2.6.0-rc.0

package/src/ToolbarPopoverTemplate.tsx

@@ -0,0 +1,24 @@
+import type Toolbar from "./Toolbar.js";
+import Popover from "./Popover.js";
+
+export default function ToolbarPopoverTemplate(this: Toolbar) {
+	return (
+		<Popover
+			class="ui5-overflow-popover"
+			placement="Bottom"
+			horizontalAlign="End"
+			onClose={this.onOverflowPopoverClosed}
+			onOpen={this.onOverflowPopoverOpened}
+			hideArrow={true}
+		>
+			<div class={{
+				"ui5-overflow-list": true,
+				"ui5-overflow-list--alignleft": this.hasItemWithText,
+			}}>
+				{ this.overflowItems.map(item => (
+					item.toolbarPopoverTemplate.call(item.context)
+				))}
+			</div>
+		</Popover>
+	);
+}

package/src/ToolbarSelectTemplate.tsx

@@ -0,0 +1,26 @@
+import type ToolbarSelect from "./ToolbarSelect.js";
+import Select from "./Select.js";
+import Option from "./Option.js";
+
+export default function ToolbarSelectTemplate(this: ToolbarSelect) {
+	return (
+		<Select
+			class="ui5-tb-item"
+			style={this.styles}
+			data-ui5-external-action-item-id={this._id}
+			valueState={this.valueState}
+			disabled={this.disabled}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+		>
+			{this.options.map((option, index) => (
+				<Option
+					selected={option.selected}
+					data-ui5-external-action-item-index={index}
+				>
+					{option.textContent}
+				</Option>
+			))}
+		</Select>
+	);
+}

package/src/ToolbarSeparatorTemplate.tsx

@@ -0,0 +1,10 @@
+import type ToolbarSeparator from "./ToolbarSeparator.js";
+
+export default function ToolbarSeparatorTemplate(this: ToolbarSeparator) {
+	return (
+		<div
+			class="ui5-tb-separator ui5-tb-item"
+			data-ui5-external-action-item-id={this._id}
+		></div>
+	);
+}

package/src/ToolbarSpacerTemplate.tsx

@@ -0,0 +1,12 @@
+import type ToolbarSpacer from "./ToolbarSpacer.js";
+
+export default function ToolbarSpacerTemplate(this: ToolbarSpacer) {
+	return (
+		<div
+			class="ui5-tb-spacer ui5-tb-item"
+			style={this.styles}
+			role="separator"
+			data-ui5-external-action-item-id={this._id}
+		></div>
+	);
+}

package/src/ToolbarTemplate.tsx

@@ -0,0 +1,37 @@
+import Button from "./Button.js";
+import type Toolbar from "./Toolbar.js";
+import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
+
+export default function ToolbarTemplate(this: Toolbar) {
+	return (<>
+		<div
+			class={{
+				"ui5-tb-items": true,
+				"ui5-tb-items-full-width": this.hasFlexibleSpacers,
+			}}
+			role={this.accInfo.root.role}
+			aria-label={this.accInfo.root.accessibleName}
+		>
+			{this.standardItems.map(item => (
+				item.toolbarTemplate.call(item.context)
+			))}
+
+			<Button
+				aria-hidden={this.hideOverflowButton}
+				icon={overflowIcon}
+				design="Transparent"
+				class={{
+					"ui5-tb-item": true,
+					"ui5-tb-overflow-btn": true,
+					"ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+				}}
+				tooltip={this.accInfo.overflowButton.tooltip}
+				accessibleName={this.accInfo.overflowButton.accessibleName}
+				accessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}
+			/>
+		</div>
+
+		{toolbarPopoverTemplate.call(this)}
+	</>);
+}

package/src/TreeItemBaseTemplate.tsx

@@ -0,0 +1,60 @@
+import type TreeItemBase from "./TreeItemBase.js";
+import ListItemTemplate from "./ListItemTemplate.js";
+import Icon from "./Icon.js";
+import navigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import navigatioRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemPreContent,
+	listItemContent,
+	imageBegin,
+	iconBegin,
+};
+
+export default function TreeItemBaseTemplate(this: TreeItemBase, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return <div>
+		{
+			ListItemTemplate.call(this, currentHooks)
+		}
+
+		{listItemPostContent.call(this)}
+	</div>;
+}
+
+function listItemPreContent(this: TreeItemBase) {
+	return (
+		<div class="ui5-li-tree-toggle-box" style={this.styles.preContent}>
+			{this.showToggleButton &&
+				<Icon
+					part="toggle-icon"
+					class="ui5-li-tree-toggle-icon"
+					name={this.expanded ? navigationDownArrow : navigatioRightArrow}
+					showTooltip={true}
+					accessibleName={this.iconAccessibleName}
+					// @ts-expect-error
+					onClick={this._toggleClick}
+				/>
+			}
+		</div >);
+}
+
+function listItemPostContent(this: TreeItemBase) {
+	if (this.expanded) {
+		return (
+			<ul
+				role="group"
+				id={`${this._id}-subtree`}
+				class="ui5-tree-li-subtree">
+				<slot></slot>
+			</ul>);
+	}
+}
+
+function listItemContent() { }
+function imageBegin() { }
+function iconBegin(this: TreeItemBase) {
+	return this.icon ? <Icon part="icon" name={this.icon} class="ui5-li-icon" /> : <></>;
+}

package/src/TreeItemCustomTemplate.tsx

@@ -0,0 +1,21 @@
+import type TreeItemCustom from "./TreeItemCustom.js";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function TreeItemCustomTemplate(this: TreeItemCustom, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return TreeItemBaseTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: TreeItemCustom) {
+	return (
+		<div class="ui5-li-tree-text-wrapper">
+			<slot name="content" slot="content"></slot>
+		</div>
+	);
+}

package/src/TreeItemTemplate.tsx

@@ -0,0 +1,28 @@
+import type TreeItem from "./TreeItem.js";
+import TreeItemBaseTemplate from "./TreeItemBaseTemplate.js";
+import type { ListItemHooks } from "./ListItemTemplate.js";
+
+const predefinedHooks: Partial<ListItemHooks> = {
+	listItemContent,
+};
+
+export default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListItemHooks>) {
+	const currentHooks = { ...predefinedHooks, ...hooks };
+
+	return TreeItemBaseTemplate.call(this, currentHooks);
+}
+
+function listItemContent(this: TreeItem) {
+	return <>
+		<div class="ui5-li-text-wrapper">
+			{this._showTitle &&
+				<div part="title" class="ui5-li-title"> {this.text}</div>
+			}
+		</div>
+		{this.additionalText &&
+			<span part="additional-text" class="ui5-li-additional-text">
+				{this.additionalText}
+			</span>
+		}
+	</>;
+}

package/src/TreeTemplate.tsx

@@ -0,0 +1,40 @@
+import DropIndicator from "./DropIndicator.js";
+import type Tree from "./Tree.js";
+import TreeList from "./TreeList.js";
+
+export default function TreeTemplate(this: Tree) {
+	return (
+		<TreeList
+			class="ui5-tree-root"
+			selectionMode={this.selectionMode}
+			headerText={this.headerText}
+			footerText={this.footerText}
+			noDataText={this.noDataText}
+			accessibleRole={this._role}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			accessibleDescription={this.accessibleDescription}
+			accessibleDescriptionRef={this.accessibleDescriptionRef}
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+			onItemClick={this._onListItemClick}
+			onItemDelete={this._onListItemDelete}
+			onItemFocused={this._onListItemFocus}
+			onSelectionChange={this._onListSelectionChange}
+			onMouseOver={this._onListItemMouseOver}
+			onMouseOut={this._onListItemMouseOut}
+			// events bubbling from slotted items
+			onui5-toggle={this._onListItemToggle}
+			onui5-step-in={this._onListItemStepIn}
+			onui5-step-out={this._onListItemStepOut}
+		>
+			{this._hasHeader && <slot name="header" slot="header"></slot>}
+
+			<slot></slot>
+
+			<DropIndicator orientation="Horizontal" ownerReference={this} />
+		</TreeList>
+	);
+}

package/src/YearPickerTemplate.tsx

@@ -0,0 +1,42 @@
+import type YearPicker from "./YearPicker.js";
+
+export default function YearPickerTemplate(this: YearPicker) {
+	return (
+		<div
+			class="ui5-yp-root"
+			role="grid"
+			aria-roledescription={this.roleDescription}
+			aria-readonly="false"
+			aria-multiselectable="false"
+			onMouseOver={this._onmouseover}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onClick={this._selectYear}
+		>
+			{this._yearsInterval.map(years =>
+				<div role="row" class="ui5-yp-interval-container">
+					{years.map(year => <div
+						data-sap-timestamp={year.timestamp}
+						tabindex={year._tabIndex}
+						data-sap-focus-ref={year.focusRef ? "true" : undefined}
+						class={year.classes}
+						part={year.parts}
+						role="gridcell"
+						aria-selected={year.ariaSelected}
+						aria-disabled={year.ariaDisabled}
+					>
+						<span class="ui5-dp-yeartext">
+							{year.year}
+						</span>
+						{
+							year.yearInSecType &&
+							<span class="ui5-yp-year-sec-type">
+								{year.yearInSecType}
+							</span>
+						}
+					</div>
+					)}
+				</div>
+			)}
+		</div>);
+}

package/src/i18n/messagebundle.properties

@@ -61,6 +61,9 @@ BREADCRUMBS_OVERFLOW_ARIA_LABEL=More
 #XFLD: Breadcrumbs popover cancel button
 BREADCRUMBS_CANCEL_BUTTON=Cancel
 
+#XACT: Breadcrumbs popover accessible name
+FORM_SELECTABLE_AVALIABLE_VALUES=Available Values
+
 #XTOL: text that could be show if BusyIndicator is active
 BUSY_INDICATOR_TITLE=Please wait
 
@@ -85,6 +88,9 @@ CAL_LEGEND_WORKING_DAY_TEXT=Working Day
 #XACT: Text for Non-Working Day item in CalendarLegend
 CAL_LEGEND_NON_WORKING_DAY_TEXT=Non-Working Day
 
+#XACT: Role description text for the Calendar Legend
+CAL_LEGEND_ROLE_DESCRIPTION=Calendar Legend
+
 # Carousel of text
 CAROUSEL_OF_TEXT=of
 
@@ -170,6 +176,21 @@ EMPTY_INDICATOR_SYMBOL=\u2013
 #XFLD: ARIA announcement for the empty value.
 EMPTY_INDICATOR_ACCESSIBLE_TEXT=Empty value
 
+#XLNK: Link to allow the user to see complete text
+EXPANDABLE_TEXT_SHOW_MORE=Show More
+
+#XLNK: Link to allow the user to collapse the complete text and display only the first characters that can fit
+EXPANDABLE_TEXT_SHOW_LESS=Show Less
+
+#XBUT: Text for close action of dialog on mobile devices
+EXPANDABLE_TEXT_CLOSE=Close
+
+#XACT: ARIA-label text for link that allows the user to see complete text in a popover
+EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL=Show the full text
+
+#XACT: ARIA-label text for link that allows the user to close the popover with the complete text
+EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL=Close the popover
+
 FILEUPLOAD_BROWSE=Browse...
 
 #XACT: File uploader title
@@ -240,8 +261,20 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
 #XACT: ARIA announcement for the list which has deletable items
 ARIA_LABEL_LIST_DELETABLE=Contains Deletable Items
 
-#XTOL: Tooltip of messgae strip close button
-MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
+#XTOL: Tooltip of information message strip close button
+MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Information Information Bar Close
+
+#XTOL: Tooltip of positive message strip close button
+MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Information Bar Close
+
+#XTOL: Tooltip of negative message strip close button
+MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Negative Information Bar Close
+
+#XTOL: Tooltip of critical message strip close button
+MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Critical Information Bar Close
+
+#XTOL: Tooltip of custom message strip close button
+MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Custom Information Bar Close
 
 #XACT: ARIA announcement for the MessageStrip's closable state
 MESSAGE_STRIP_CLOSABLE=Closable

package/src/themes/CalendarLegendItem.css

@@ -6,7 +6,7 @@
 	white-space: pre-line;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	cursor: default;
+	cursor: pointer;
 	margin: 0.0625rem 0;
 }
 
@@ -33,7 +33,6 @@
 	white-space: pre-line;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	cursor: default;
 }
 
 :host([type="Today"]) .ui5-calendar-legend-item-box {

package/src/themes/Carousel.css

@@ -172,7 +172,7 @@
     transition: background-color .1s ease-in;
 }
 
-.ui5-carousel-navigation-dot[active] {
+.ui5-carousel-navigation-dot.ui5-carousel-navigation-dot--active {
     width: .5rem;
     height: .5rem;
     margin: 0 .25rem;

package/src/themes/ComboBoxItem.css

@@ -11,4 +11,8 @@
 	padding-bottom: .875rem;
 	padding-top: .875rem;
 	box-sizing: border-box;
+}
+
+:host([ui5-cb-item][text][additional-text]) .ui5-li-text-wrapper {
+	gap: 1rem;
 }

package/src/themes/DayPicker.css

@@ -363,12 +363,12 @@
 	inset-block-start: var(--_ui5_daypicker_selected_item_now_special_day_top);
 }
 
-.ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-daytext {
+.ui5-dp-item[data-ui5-special-day].ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-daytext {
 	border-radius: var(--_ui5-daypicker_item_selected_now_border_radius);
 }
 
-.ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now:focus::after,
-.ui5-dp-item[special-day].ui5-dp-item--now:focus::after {
+.ui5-dp-item[data-ui5-special-day].ui5-dp-item--selected.ui5-dp-item--now:focus::after,
+.ui5-dp-item[data-ui5-special-day].ui5-dp-item--now:focus::after {
 	margin: var(--_ui5_daypicker_item_now_focus_margin);
 }
 
@@ -383,15 +383,15 @@
 
 /* Styles for calendar with secondary calendar type and special dates */
 
-.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--selected.ui5-dp-item--now::after,
-.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--now::after {
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[data-ui5-special-day].ui5-dp-item--selected.ui5-dp-item--now::after,
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[data-ui5-special-day].ui5-dp-item--now::after {
 	inset: var(--_ui5_daypicker_twocalendar_item_special_day_now_inset);
 	border-radius: var(--_ui5_daypicker_twocalendar_item_special_day_now_border_radius);
 	border-width: var(--_ui5_daypicker_twocalendar_item_special_day_after_border_width);
 	border-color: var(--_ui5_daypicker_item_selected_focus_color);
 }
 
-.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[special-day].ui5-dp-item--now:not(.ui5-dp-item--selected)::after {
+.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item[data-ui5-special-day].ui5-dp-item--now:not(.ui5-dp-item--selected)::after {
 	inset: 0.1875rem;
 }
 

package/src/themes/ExpandableText.css

@@ -0,0 +1,36 @@
+:host {
+	display: inline-block;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--sapTextColor);
+}
+
+:host([hidden]) {
+	display: none;
+}
+
+.ui5-exp-text-text {
+	display: inline;
+}
+
+.ui5-exp-text-text,
+.ui5-exp-text-toggle {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+.ui5-exp-text-text,
+.ui5-exp-text-ellipsis {
+	color: inherit;
+}
+
+.ui5-exp-text-popover::part(content) {
+	padding-inline: 1rem;
+}
+
+.ui5-exp-text-footer {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}

package/src/themes/GrowingButton.css

@@ -1,4 +1,4 @@
-[growing-button] {
+.ui5-growing-button {
 	display: flex;
 	align-items: center;
 	padding: var(--_ui5_load_more_padding);
@@ -9,7 +9,7 @@
 	outline: none;
 }
 
-[growing-button-inner] {
+.ui5-growing-button-inner {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -23,29 +23,28 @@
 	box-sizing: border-box;
 }
 
-[growing-button-inner]:focus-visible {
+.ui5-growing-button-inner:focus-visible {
 	outline: var(--_ui5_load_more_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: -0.125rem;
 	border-color: transparent;
 }
 
-[growing-button-inner]:hover {
+.ui5-growing-button-inner:hover {
 	background-color: var(--sapList_Hover_Background);
 }
 
-[growing-button-inner]:active,
-[growing-button-inner][active] {
+.ui5-growing-button-inner:active,
+.ui5-growing-button-inner.ui5-growing-button-inner--active {
 	background-color: var(--sapList_Active_Background);
 	border-color: var(--sapList_Active_Background);
 }
 
-[growing-button-inner]:active > *,
-[growing-button-inner][active] > * {
+.ui5-growing-button-inner:active > *,
+.ui5-growing-button-inner.ui5-growing-button-inner--active > * {
 	color: var(--sapList_Active_TextColor);
 }
 
-[growing-button-text],
-[growing-button-subtext] {
+.ui5-growing-button-text {
 	text-align: center;
 	font-family: "72override", var(--sapFontFamily);
 	white-space: nowrap;
@@ -54,7 +53,7 @@
 	box-sizing: border-box;
 }
 
-[growing-button-text] {
+.ui5-growing-button-text {
 	height: var(--_ui5_load_more_text_height);
 	padding: 0.875rem 1rem 1rem;
 	font-size: var(--_ui5_load_more_text_font_size);
@@ -65,11 +64,6 @@
 	display: none;
 }
 
-:host([loading]) .ui5-list-growing-button-busy-indicator[_is-busy] + [growing-button-text]{
+:host([loading]) .ui5-list-growing-button-busy-indicator[_is-busy] + .ui5-growing-button-text {
 	padding-left: 0.5rem;
 }
-
-[growing-button-subtext] {
-	font-size: var(--sapFontSize);
-	padding: var(--_ui5_load_more_desc_padding);
-}

package/src/themes/Input.css

@@ -434,42 +434,42 @@
 }
 
 :host([value-state="Negative"]) .inputIcon:active,
-:host([value-state="Negative"]) .inputIcon[pressed] {
+:host([value-state="Negative"]) .inputIcon.inputIcon--pressed {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 	color: var(--_ui5_input_icon_error_pressed_color);
 }
 
-:host([value-state="Negative"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }
 
 :host([value-state="Critical"]) .inputIcon:active,
-:host([value-state="Critical"]) .inputIcon[pressed] {
+:host([value-state="Critical"]) .inputIcon.inputIcon--pressed {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 	color: var(--_ui5_input_icon_warning_pressed_color);
 }
 
-:host([value-state="Critical"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Critical"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 }
 
 :host([value-state="Information"]) .inputIcon:active,
-:host([value-state="Information"]) .inputIcon[pressed] {
+:host([value-state="Information"]) .inputIcon.inputIcon--pressed {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 	color: var(--_ui5_input_icon_information_pressed_color);
 }
 
-:host([value-state="Information"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Information"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 }
 
 :host([value-state="Positive"]) .inputIcon:active,
-:host([value-state="Positive"]) .inputIcon[pressed] {
+:host([value-state="Positive"]) .inputIcon.inputIcon--pressed {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 	color: var(--_ui5_input_icon_success_pressed_color);
 }
 
-:host([value-state="Positive"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Positive"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 

package/src/themes/InputIcon.css

@@ -9,7 +9,7 @@
 	border-radius: var(--_ui5_input_icon_border_radius);
 }
 
-.inputIcon[pressed] {
+.inputIcon.inputIcon--pressed {
 	background: var(--_ui5_input_icon_pressed_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
@@ -23,7 +23,7 @@
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
-.inputIcon:not([pressed]):not(:active):hover {
+.inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	background: var(--_ui5_input_icon_hover_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 }