@ui5/webcomponents 2.11.0-rc.2 → 2.11.0-rc.4

package/src/ToolbarButtonTemplate.tsx

@@ -4,11 +4,10 @@ import Button from "./Button.js";
 export default function ToolbarButtonTemplate(this: ToolbarButton) {
 	return (
 		<Button
-			class="ui5-tb-button ui5-tb-item"
+			class={this.classes.root}
 			id={this.id}
 			style={{
-				width: this.width,
-				display: this.hidden ? "none" : "inline-block",
+				width: this.width || "100%",
 			}}
 			icon={this.icon}
 			endIcon={this.endIcon}

package/src/ToolbarSelectTemplate.tsx

@@ -5,7 +5,7 @@ import Option from "./Option.js";
 export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 	return (
 		<Select
-			class="ui5-tb-item"
+			class={this.classes.root}
 			style={this.styles}
 			data-ui5-external-action-item-id={this._id}
 			valueState={this.valueState}

package/src/ToolbarTemplate.tsx

@@ -1,6 +1,6 @@
 import Button from "./Button.js";
 import type Toolbar from "./Toolbar.js";
-import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js";
+import Popover from "./Popover.js";
 import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
 
 export default function ToolbarTemplate(this: Toolbar) {
@@ -13,10 +13,20 @@ export default function ToolbarTemplate(this: Toolbar) {
 			role={this.accInfo.root.role}
 			aria-label={this.accInfo.root.accessibleName}
 		>
-			{this.standardItems.map(item => (
-				item.toolbarTemplate.call(item.context)
-			))}
-
+			{this.standardItems.map(item => {
+				if ("styles" in item) {
+					return (
+						<div class="ui5-tb-item" id={item._individualSlot} style={item.styles as string}>
+							<slot name={item._individualSlot}></slot>
+						</div>
+					);
+				}
+				return (
+					<div class="ui5-tb-item" id={item._individualSlot}>
+						<slot name={item._individualSlot}></slot>
+					</div>
+				);
+			})}
 			<Button
 				aria-hidden={this.hideOverflowButton}
 				icon={overflowIcon}
@@ -33,6 +43,33 @@ export default function ToolbarTemplate(this: Toolbar) {
 			/>
 		</div>
 
-		{toolbarPopoverTemplate.call(this)}
+		<Popover
+			class="ui5-overflow-popover"
+			placement="Bottom"
+			horizontalAlign="End"
+			onClose={this.onOverflowPopoverClosed}
+			onOpen={this.onOverflowPopoverOpened}
+			accessibleName={this.accInfo.popover.accessibleName}
+			hideArrow={true}
+		>
+			<div class={{
+				"ui5-overflow-list": true
+			}}>
+				{this.overflowItems.map(item => {
+					if (item.isSeparator) {
+						return (
+							<div class="ui5-tb-popover-item ui5-tb-separator ui5-tb-separator-in-overflow" id={item._individualSlot}>
+								<slot name={item._individualSlot}></slot>
+							</div>
+						);
+					}
+					return (
+						<div class="ui5-tb-popover-item" id={item._individualSlot}>
+							<slot name={item._individualSlot}></slot>
+						</div>
+					);
+				})}
+			</div>
+		</Popover>
 	</>);
 }

package/src/YearRangePickerTemplate.tsx

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

package/src/dynamic-date-range-options/DateRangeTemplate.tsx

@@ -0,0 +1,22 @@
+import type DynamicDateRange from "../DynamicDateRange.js";
+import Calendar from "../Calendar.js";
+import CalendarDateRange from "../CalendarDateRange.js";
+
+export default function DateRangeRangeTemplate(this: DynamicDateRange) {
+	return (
+		<Calendar onSelectionChange={this.handleSelectionChange} selectionMode="Range">
+			<CalendarDateRange
+				startValue={
+					this.value?.operator === "DATERANGE"
+						? this.getOption(this.value.operator)?.format(this.value)?.split("-")[0] || undefined
+						: undefined
+				}
+				endValue={
+					this.value?.operator === "DATERANGE"
+						? this.getOption(this.value.operator)?.format(this.value)?.split("-")[1] || undefined
+						: undefined
+				}
+			></CalendarDateRange>
+		</Calendar>
+	);
+}

package/src/dynamic-date-range-options/SingleDateTemplate.tsx

@@ -0,0 +1,13 @@
+import type DynamicDateRange from "../DynamicDateRange.js";
+import Calendar from "../Calendar.js";
+import CalendarDate from "../CalendarDate.js";
+
+export default function SingleDateTemplate(this: DynamicDateRange) {
+	return (
+		<Calendar onSelectionChange={this.handleSelectionChange}>
+			<CalendarDate
+				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+			></CalendarDate>
+		</Calendar>
+	);
+}

package/src/features/InputSuggestionsTemplate.tsx

@@ -90,7 +90,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 						design="Transparent"
 						onClick={this._closePicker}
 					>
-						OK
+						{this._suggestionsOkButtonText}
 					</Button>
 				</div>
 			}

package/src/i18n/messagebundle.properties

@@ -252,6 +252,9 @@ INPUT_SUGGESTIONS_NO_HIT=No results
 #XACT: ARIA label for the Input clear icon
 INPUT_CLEAR_ICON_ACC_NAME=Clear
 
+#XBUT: Input's Dialog OK button on mobile devices
+INPUT_SUGGESTIONS_OK_BUTTON=OK
+
 #XFLD: Subtle link description label
 LINK_SUBTLE=Subtle
 
@@ -333,6 +336,9 @@ MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
+#XBUT: Combobox Dialog OK button on mobile devices
+COMBOBOX_DIALOG_OK_BUTTON=OK
+
 #XACT: ARIA announcement for suggestions popup
 INPUT_AVALIABLE_VALUES=Available Values
 
@@ -516,6 +522,12 @@ TOKENIZER_SHOW_ALL_ITEMS={0} Items
 #XFLD: Clear All link text in Tokenizer
 TOKENIZER_CLEAR_ALL=Clear All
 
+#XBUT: Tokenizer's Dialog Cancel button on mobile devices
+TOKENIZER_DIALOG_CANCEL_BUTTON=Cancel
+
+#XBUT: Tokenizer's Dialog OK button on mobile devices
+TOKENIZER_DIALOG_OK_BUTTON=OK
+
 #XACT: Label text for TreeListItem
 TREE_ITEM_ARIA_LABEL=Tree Item
 
@@ -570,6 +582,9 @@ MONTH_PICKER_DESCRIPTION = Month Picker
 #XACT: ARIA description for year picker
 YEAR_PICKER_DESCRIPTION = Year Picker
 
+#XACT: ARIA description for year picker
+YEAR_RANGE_PICKER_DESCRIPTION = Year Range Picker
+
 #XACT: ARIA description for slider tooltip input
 SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
 
@@ -652,5 +667,29 @@ TABLE_ROW_ACTIONS=Row Actions
 TABLE_NAVIGATION=Navigation
 #XTOL: Tooltip for the AI button in the column header to indicate that the column is generated by AI
 TABLE_GENERATED_BY_AI=Generated by AI
+
+#XFLD: Text for the "Yesterday" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_YESTERDAY_TEXT=Yesterday
+
+#XFLD: Text for the "Today" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_TODAY_TEXT=Today
+
+#XFLD: Text for the "Tomorrow" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_TOMORROW_TEXT=Tomorrow
+
+#XFLD: Text for the "Date" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_DATE_TEXT=Date
+
+#XFLD: Text for the "Date Range" option in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_DATERANGE_TEXT=From / To
+
+#XFLD: Text for the selected date in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_SELECTED_TEXT=Selected
+
+#FLD: Text for the selected date section when there's no value in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Choose Dates
+
+#XFLD: Text for icon that navigates back to the previous page in the DynamicDateRange component.
+DYNAMIC_DATE_RANGE_NAVIGATION_ICON_TOOLTIP=Navigate back
 #XACT: ARIA description for the column header row of the table
-TABLE_COLUMN_HEADER_ROW=Column Header Row
+TABLE_COLUMN_HEADER_ROW=Column Header Row

package/src/i18n/messagebundle_ar.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=مؤكد
 
 BUTTON_ARIA_TYPE_ATTENTION=تحذير
 
+BUTTON_BADGE_ONE_ITEM={0} بند
+
+BUTTON_BADGE_MANY_ITEMS={0} من البنود
+
 CAL_LEGEND_TODAY_TEXT=اليوم
 
 CAL_LEGEND_SELECTED_TEXT=اليوم المحدد
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=خيارات إضافية
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=القيم المتوفرة
 
+FORM_ACCESSIBLE_NAME=النموذج
+
 FORM_CHECKABLE_REQUIRED=يرجى وضع علامة على هذا المربع إذا كنت تريد المتابعة.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=يرجى ملء هذا الحقل أو تحديد بند في القائمة.

package/src/i18n/messagebundle_bg.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Подчертано
 
 BUTTON_ARIA_TYPE_ATTENTION=Предупреждение
 
+BUTTON_BADGE_ONE_ITEM={0} позиция
+
+BUTTON_BADGE_MANY_ITEMS={0} позиции
+
 CAL_LEGEND_TODAY_TEXT=Днес
 
 CAL_LEGEND_SELECTED_TEXT=Избран ден
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Допълнителни опции
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Налични стойности
 
+FORM_ACCESSIBLE_NAME=Формуляр
+
 FORM_CHECKABLE_REQUIRED=Моля, поставете отметка в това поле, ако искате да продължите.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Моля, попълнете това поле или изберете позиция от списъка.

package/src/i18n/messagebundle_ca.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Destacat
 
 BUTTON_ARIA_TYPE_ATTENTION=Advertència
 
+BUTTON_BADGE_ONE_ITEM={0} element
+
+BUTTON_BADGE_MANY_ITEMS={0} elements
+
 CAL_LEGEND_TODAY_TEXT=Avui
 
 CAL_LEGEND_SELECTED_TEXT=Dia seleccionat
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Opcions addicionals
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Valors disponibles
 
+FORM_ACCESSIBLE_NAME=Formulari
+
 FORM_CHECKABLE_REQUIRED=Marqueu aquest quadre si voleu continuar.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Empleneu aquest camp o seleccioneu un article de la llista.

package/src/i18n/messagebundle_cnr.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Naglašeno
 
 BUTTON_ARIA_TYPE_ATTENTION=Upozorenje
 
+BUTTON_BADGE_ONE_ITEM={0} stavka
+
+BUTTON_BADGE_MANY_ITEMS={0} stavke(i)
+
 CAL_LEGEND_TODAY_TEXT=Danas
 
 CAL_LEGEND_SELECTED_TEXT=Izabrani dan
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Dodatne opcije
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Dostupne vrijednosti
 
+FORM_ACCESSIBLE_NAME=Obrazac
+
 FORM_CHECKABLE_REQUIRED=Označite ovaj kvadratić ako želite da nastavite.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Popunite ovo polje ili odaberite stavku s liste.

package/src/i18n/messagebundle_cs.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Zvýrazněné
 
 BUTTON_ARIA_TYPE_ATTENTION=Upozornění
 
+BUTTON_BADGE_ONE_ITEM={0} položka
+
+BUTTON_BADGE_MANY_ITEMS={0} položky
+
 CAL_LEGEND_TODAY_TEXT=Dnes
 
 CAL_LEGEND_SELECTED_TEXT=Vybraný den
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Další možnosti
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Dostupné hodnoty
 
+FORM_ACCESSIBLE_NAME=Formulář
+
 FORM_CHECKABLE_REQUIRED=Chcete-li pokračovat, zaškrtněte toto pole.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Vyplňte toto pole nebo vyberte položku ze seznamu.

package/src/i18n/messagebundle_cy.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Wedi’i Bwysleisio
 
 BUTTON_ARIA_TYPE_ATTENTION=Rhybudd
 
+BUTTON_BADGE_ONE_ITEM={0} eitem
+
+BUTTON_BADGE_MANY_ITEMS={0} eitem
+
 CAL_LEGEND_TODAY_TEXT=Heddiw
 
 CAL_LEGEND_SELECTED_TEXT=Diwrnod Dewisedig
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Opsiynau Ychwanegol
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Gwerthoedd sydd ar gael
 
+FORM_ACCESSIBLE_NAME=Ffurf
+
 FORM_CHECKABLE_REQUIRED=Ticiwch y blwch hwn os ydych chi eisiau bwrw ymlaen.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Llenwch y maes hwn neu dewiswch eitem yn y rhestr.

package/src/i18n/messagebundle_da.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Fremhævet
 
 BUTTON_ARIA_TYPE_ATTENTION=Advarsel
 
+BUTTON_BADGE_ONE_ITEM={0} element
+
+BUTTON_BADGE_MANY_ITEMS={0} elementer
+
 CAL_LEGEND_TODAY_TEXT=I dag
 
 CAL_LEGEND_SELECTED_TEXT=Valgt dag
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Yderligere valgmuligheder
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Tilgængelige værdier
 
+FORM_ACCESSIBLE_NAME=Formular
+
 FORM_CHECKABLE_REQUIRED=Kryds dette felt af, hvis du vil fortsætte.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Udfyld dette felt, eller vælg et element på listen.

package/src/i18n/messagebundle_de.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Hervorgehoben
 
 BUTTON_ARIA_TYPE_ATTENTION=Warnung
 
+BUTTON_BADGE_ONE_ITEM={0} Element
+
+BUTTON_BADGE_MANY_ITEMS={0} Elemente
+
 CAL_LEGEND_TODAY_TEXT=Heute
 
 CAL_LEGEND_SELECTED_TEXT=Ausgewählter Tag
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Zusätzliche Optionen
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Verfügbare Werte
 
+FORM_ACCESSIBLE_NAME=Formular
+
 FORM_CHECKABLE_REQUIRED=Aktivieren Sie dieses Kontrollkästchen, wenn Sie fortfahren wollen.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Füllen Sie dieses Feld aus oder wählen Sie ein Element aus der Liste aus.
@@ -420,7 +426,7 @@ FORM_SELECTABLE_REQUIRED2=Wählen Sie eine dieser Optionen aus.
 FORM_TEXTFIELD_REQUIRED=Füllen Sie dieses Feld aus.
 
 TABLE_SELECTION=Auswahl
-TABLE_ROW_SELECTOR=Zeilenauswahl
+TABLE_ROW_SELECTOR=Zeilenauswahlfeld
 TABLE_NO_DATA=Keine Daten
 TABLE_ROW_POPIN=Zeilen-Popin
 TABLE_MORE=Weitere

package/src/i18n/messagebundle_el.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Τονισμένο
 
 BUTTON_ARIA_TYPE_ATTENTION=Προειδοποίηση
 
+BUTTON_BADGE_ONE_ITEM={0} είδος
+
+BUTTON_BADGE_MANY_ITEMS={0} είδη
+
 CAL_LEGEND_TODAY_TEXT=Σήμερα
 
 CAL_LEGEND_SELECTED_TEXT=Επιλεγμένη Ημέρα
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Πρόσθετες Επιλογές
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Διαθέσιμες Τιμές
 
+FORM_ACCESSIBLE_NAME=Φόρμα
+
 FORM_CHECKABLE_REQUIRED=Επιλέξτε αυτό το πλαίσιο αν θέλετε να συνεχίσετε.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Συμπληρώστε αυτό το πεδίο ή επιλέξετε ένα στοιχείο στη λίστα.