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

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_it.properties

@@ -35,7 +35,7 @@ BREADCRUMB_ITEM_POS={0} di {1}
 
 BREADCRUMBS_ARIA_LABEL=Percorso di navigazione
 
-BREADCRUMBS_OVERFLOW_ARIA_LABEL=Di più
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Mostra di più
 
 BREADCRUMBS_CANCEL_BUTTON=Annulla
 
@@ -258,7 +258,7 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Pulsante segmentato
 
 SLIDER_ARIA_DESCRIPTION=Cursore dello slider
 
-LOAD_MORE_TEXT=Di più
+LOAD_MORE_TEXT=Mostra di più
 
 TABLE_HEADER_ROW_INFORMATION=Riga testata 1 di {0}
 
@@ -288,7 +288,7 @@ TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Indietro
 
 TABCONTAINER_OVERFLOW_MENU_TITLE=Menu overflow
 
-TABCONTAINER_END_OVERFLOW=Di più
+TABCONTAINER_END_OVERFLOW=Mostra di più
 
 TABCONTAINER_POPOVER_CANCEL_BUTTON=Annulla
 
@@ -429,7 +429,7 @@ TABLE_SELECTION=Selezione
 TABLE_ROW_SELECTOR=Selettore riga
 TABLE_NO_DATA=Nessun dato
 TABLE_ROW_POPIN=Popin nella riga
-TABLE_MORE=Di più
+TABLE_MORE=Mostra di più
 TABLE_MORE_DESCRIPTION=Per caricare più righe premere Invio o Spazio
 TABLE_ROW_ACTIONS=Azioni riga
 TABLE_NAVIGATION=Navigazione

package/src/themes/AvatarGroup.css

@@ -22,6 +22,7 @@
 
 .ui5-avatar-group-root {
 	display: flex;
+	padding: var(--_ui5_avatar_group_padding);
 }
 
 .ui5-avatar-group-items {

package/src/themes/CalendarHeader.css

@@ -131,13 +131,3 @@
 .ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
-
-/* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled {
-	pointer-events: none;
-}
-
-/* Todo: Remove with introduction of YearRangePicker */
-.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active .ui5-calheader-btn-sectext {
-	color: var(--sapNeutralElementColor);
-}

package/src/themes/DatePicker.css

@@ -41,7 +41,6 @@
 
 :host .ui5-date-picker-input {
 	width: 100%;
-	min-width: 12.5625rem;
 	color: inherit;
 	background-color: inherit;
 	border-radius: inherit;

package/src/themes/DynamicDateRange.css

@@ -0,0 +1,7 @@
+@import "./InputIcon.css";
+@import "./InputSharedStyles.css";
+
+:host {
+    width: var(--_ui5_input_width, 12.5625rem);
+    display: inline-block;
+}

package/src/themes/DynamicDateRangePopover.css

@@ -0,0 +1,89 @@
+[ui5-responsive-popover]::part(content) {
+    padding: 0;
+}
+
+[ui5-responsive-popover] {
+    width: 320px;
+    height: 512px;
+}
+
+[ui5-responsive-popover]::part(content) {
+    width: 320px;
+    height: 512px;
+}
+
+.ui5-dynamic-date-range-option-container {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: space-around;
+    height: 100%;
+    width: 100%;
+}
+
+.ui5-ddr-current-value {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 50px;
+    font-size: .875rem;
+    font-family: var(--sapFontFamily);
+    font-weight: normal;
+    color: var(--sapContentLabelColor);
+    background-color: lightgray;
+    padding-inline-start: 10px;
+    font-style: italic;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+[ui5-responsive-popover]::part(footer) {
+    display: flex;
+    justify-content: end;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+}
+
+.ui5-ddr-arrow-back-btn {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: var(--_ui5_calendar_header_arrow_button_width);
+	background-color: var(--sapButton_Lite_Background);
+	color: var(--sapButton_Lite_TextColor);
+	cursor: pointer;
+	overflow: hidden;
+	white-space: nowrap;
+	padding: 0;
+	font-size: var(--sapFontSize);
+	user-select: none;
+}
+
+.ui5-ddr-arrow-back-btn {
+	border: var(--_ui5_calendar_header_arrow_button_border);
+	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	display:flex;
+	background-color: var(--sapButton_Lite_Background);
+	border-color: var(--sapButton_Lite_BorderColor);
+}
+
+.ui5-ddr-arrow-back-btn-arrow-icon {
+	color: currentColor;
+	pointer-events: none;
+}
+
+[ui5-responsive-popover]::part(header) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    height: 2.5rem;
+}
+
+.ui5-ddr-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    height: 2.5rem;
+}

package/src/themes/Toolbar.css

@@ -43,13 +43,6 @@ Last element is: overflow button or tb-item when overflow button is hidden */
 	margin-inline-start: 0;
 }
 
-.ui5-tb-separator {
-	height: var(--_ui5-toolbar-separator-height);
-	width: 0.0625rem;
-	background: var(--sapToolbar_SeparatorColor);
-	box-sizing: border-box;
-}
-
 .ui5-tb-overflow-btn-hidden {
 	visibility: hidden;
 	position: absolute;

package/src/themes/ToolbarPopover.css

@@ -13,6 +13,11 @@
 	width: 100%;
 }
 
+::slotted([slot^="default"])::part(button) {
+	width: 100%;
+	display: block;
+}
+
 .ui5-tb-popover-item:not(:last-child) {
 	margin-bottom: 0.25rem;
 }

package/src/themes/ToolbarSelect.css

@@ -1,8 +1,8 @@
 :host(:not([hidden])) {
-	width: 100%;
+    width: 100%;
 }
 
-:host [ui5-select] {
-	width: inherit;
+.ui5-tb-popover-item {
+    width: inherit;
 }
 

package/src/themes/ToolbarSeparator.css

@@ -0,0 +1,6 @@
+.ui5-tb-separator {
+	height: var(--_ui5-toolbar-separator-height);
+	width: 0.0625rem;
+	background: var(--sapToolbar_SeparatorColor);
+	box-sizing: border-box;
+}

package/src/themes/YearRangePicker.css

@@ -0,0 +1,118 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-yrp-root {
+	padding: 2rem 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-yrp-interval-container {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	width: 100%;
+}
+
+.ui5-yrp-item {
+	display: flex;
+	margin: var(--_ui5_yearpicker_item_margin);
+	width: calc(50% - 0.125rem);
+	height: var(--_ui5_year_picker_item_height);
+	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapButton_Lite_Background);
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: default;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_yearpicker_item_border);
+	border-radius: var(--_ui5_yearpicker_item_border_radius);
+}
+
+.ui5-yrp-item-secondary-type {
+	flex-direction: column;
+	width: calc(50% - 0.125rem);
+}
+
+.ui5-yrp-item-sec-type {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
+.ui5-yrp-item-one-column-view {
+	width: initial;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected,
+.ui5-yrp-item.ui5-yrp-item--selected-between {
+	background: var(--sapButton_Selected_Background);
+	border: var(--_ui5_yearpicker_item_selected_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between .ui5-yrp-item-sec-type {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item:hover {
+	background: var(--sapButton_Lite_Hover_Background);
+	border: var(--_ui5_yearpicker_item_hover_border);
+	color: var(--sapButton_Lite_Hover_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected:hover,
+.ui5-yrp-item.ui5-yrp-item--selected-between:hover {
+	background: var(--sapButton_Selected_Hover_Background);
+	border: var(--_ui5_yearpicker_item_selected_hover_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected:hover .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between:hover .ui5-yrp-item-sec-type {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item:active,
+.ui5-yrp-item.ui5-yrp-item--selected:active,
+.ui5-yrp-item.ui5-yrp-item--selected-between:active {
+	background: var(--sapButton_Active_Background);
+	border: var(--_ui5_monthpicker_item_active_border);
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-yrp-item:active .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected:active .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between:active .ui5-yrp-item-sec-type  {
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-yrp-item:focus::after {
+	content: "";
+	position: absolute;
+	inset: 0.0625rem;
+	border: var(--_ui5_button_focused_border);
+	border-radius: var(--_ui5_button_focused_border_radius);
+}

package/src/themes/base/AvatarGroup-parameters.css

@@ -1,3 +1,4 @@
 :root {
 	--_ui5_avatar_group_button_focus_border: none;
+	--_ui5_avatar_group_padding: 0.3rem;
 }

package/src/themes/base/DynamicDateRange-parameters.css

@@ -0,0 +1,3 @@
+:root{
+    
+}

package/src/themes/sap_horizon/parameters-bundle.css

@@ -18,6 +18,7 @@
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
 @import "./Dialog-parameters.css";
+@import "../base/DynamicDateRange-parameters.css";
 @import "./FileUploader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/Form-parameters.css";

package/dist/ToolbarPopoverButtonTemplate.d.ts

@@ -1,2 +0,0 @@
-import type ToolbarButton from "./ToolbarButton.js";
-export default function ToolbarPopoverButtonTemplate(this: ToolbarButton): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToolbarPopoverButtonTemplate.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
-import Button from "./Button.js";
-export default function ToolbarPopoverButtonTemplate() {
-    return (_jsx(Button, { icon: this.icon, endIcon: this.endIcon, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, accessibilityAttributes: this.accessibilityAttributes, tooltip: this.tooltip, design: this.design, disabled: this.disabled, hidden: this.hidden, class: "ui5-tb-popover-button ui5-tb-popover-item", "data-ui5-external-action-item-id": this._id, "data-ui5-stable": this.stableDomRef, onClick: (...args) => this.onClick(...args), children: this.text }));
-}
-//# sourceMappingURL=ToolbarPopoverButtonTemplate.js.map

package/dist/ToolbarPopoverButtonTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarPopoverButtonTemplate.js","sourceRoot":"","sources":["../src/ToolbarPopoverButtonTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,4BAA4B;IACnD,OAAO,CACN,KAAC,MAAM,IACN,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAC,2CAA2C,sCACf,IAAI,CAAC,GAAG,qBACzB,IAAI,CAAC,YAAY,EAClC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,YAE1C,IAAI,CAAC,IAAI,GACF,CACT,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarButton from \"./ToolbarButton.js\";\nimport Button from \"./Button.js\";\n\nexport default function ToolbarPopoverButtonTemplate(this: ToolbarButton) {\n\treturn (\n\t\t<Button\n\t\t\ticon={this.icon}\n\t\t\tendIcon={this.endIcon}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\ttooltip={this.tooltip}\n\t\t\tdesign={this.design}\n\t\t\tdisabled={this.disabled}\n\t\t\thidden={this.hidden}\n\t\t\tclass=\"ui5-tb-popover-button ui5-tb-popover-item\"\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tdata-ui5-stable={this.stableDomRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t>\n\t\t\t{this.text}\n\t\t</Button>\n\t);\n}\n"]}

package/dist/ToolbarPopoverSelectTemplate.d.ts

@@ -1,2 +0,0 @@
-import type ToolbarSelect from "./ToolbarSelect.js";
-export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToolbarPopoverSelectTemplate.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
-import Select from "./Select.js";
-import Option from "./Option.js";
-export default function ToolbarPopoverSelectTemplate() {
-    return (_jsx(Select, { class: "ui5-tb-popover-item", "data-ui5-external-action-item-id": this._id, valueState: this.valueState, disabled: this.disabled, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, onClick: (...args) => this.onClick(...args), onClose: (...args) => this.onClose(...args), onOpen: (...args) => this.onOpen(...args), onChange: (...args) => this.onChange(...args), children: this.options.map((option, index) => (_jsx(Option, { selected: option.selected, "data-ui5-external-action-item-index": index, children: option.textContent }))) }));
-}
-//# sourceMappingURL=ToolbarPopoverSelectTemplate.js.map

package/dist/ToolbarPopoverSelectTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarPopoverSelectTemplate.js","sourceRoot":"","sources":["../src/ToolbarPopoverSelectTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,4BAA4B;IACnD,OAAO,CACN,KAAC,MAAM,IACN,KAAK,EAAC,qBAAqB,sCACO,IAAI,CAAC,GAAG,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EACzC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,YAE5C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,MAAM,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,yCACY,KAAK,YAEzC,MAAM,CAAC,WAAW,GACX,CACT,CAAC,GACM,CACT,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarSelect from \"./ToolbarSelect.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\n\nexport default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) {\n\treturn (\n\t\t<Select\n\t\t\tclass=\"ui5-tb-popover-item\"\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tvalueState={this.valueState}\n\t\t\tdisabled={this.disabled}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t\tonClose={(...args) => this.onClose(...args)}\n\t\t\tonOpen={(...args) => this.onOpen(...args)}\n\t\t\tonChange={(...args) => this.onChange(...args)}\n\t\t>\n\t\t\t{this.options.map((option, index) => (\n\t\t\t\t<Option\n\t\t\t\t\tselected={option.selected}\n\t\t\t\t\tdata-ui5-external-action-item-index={index}\n\t\t\t\t>\n\t\t\t\t\t{option.textContent}\n\t\t\t\t</Option>\n\t\t\t))}\n\t\t</Select>\n\t);\n}\n"]}

package/dist/ToolbarPopoverSeparatorTemplate.d.ts

@@ -1,2 +0,0 @@
-import type ToolbarSeparator from "./ToolbarSeparator.js";
-export default function ToolbarPopoverSeparator(this: ToolbarSeparator): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToolbarPopoverSeparatorTemplate.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
-export default function ToolbarPopoverSeparator() {
-    return (_jsx("div", { class: "ui5-tb-separator-in-overflow ui5-tb-popover-item", "data-ui5-external-action-item-id": this._id }));
-}
-//# sourceMappingURL=ToolbarPopoverSeparatorTemplate.js.map

package/dist/ToolbarPopoverSeparatorTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarPopoverSeparatorTemplate.js","sourceRoot":"","sources":["../src/ToolbarPopoverSeparatorTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,cACC,KAAK,EAAC,kDAAkD,sCACtB,IAAI,CAAC,GAAG,GACpC,CACP,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarSeparator from \"./ToolbarSeparator.js\";\n\nexport default function ToolbarPopoverSeparator(this: ToolbarSeparator) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-tb-separator-in-overflow ui5-tb-popover-item\"\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t></div>\n\t);\n}\n"]}

package/dist/ToolbarPopoverTemplate.d.ts

@@ -1,2 +0,0 @@
-import type Toolbar from "./Toolbar.js";
-export default function ToolbarPopoverTemplate(this: Toolbar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToolbarPopoverTemplate.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
-import Popover from "./Popover.js";
-export default function ToolbarPopoverTemplate() {
-    return (_jsx(Popover, { class: "ui5-overflow-popover", placement: "Bottom", horizontalAlign: "End", onClose: this.onOverflowPopoverClosed, onOpen: this.onOverflowPopoverOpened, accessibleName: this.accInfo.popover.accessibleName, hideArrow: true, children: _jsx("div", { class: {
-                "ui5-overflow-list": true,
-                "ui5-overflow-list--alignleft": this.hasItemWithText,
-            }, children: this.overflowItems.map(item => (item.toolbarPopoverTemplate.call(item.context))) }) }));
-}
-//# sourceMappingURL=ToolbarPopoverTemplate.js.map

package/dist/ToolbarPopoverTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarPopoverTemplate.js","sourceRoot":"","sources":["../src/ToolbarPopoverTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CACN,KAAC,OAAO,IACP,KAAK,EAAC,sBAAsB,EAC5B,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,KAAK,EACrB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,MAAM,EAAE,IAAI,CAAC,uBAAuB,EACpC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,EACnD,SAAS,EAAE,IAAI,YAEf,cAAK,KAAK,EAAE;gBACX,mBAAmB,EAAE,IAAI;gBACzB,8BAA8B,EAAE,IAAI,CAAC,eAAe;aACpD,YACE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC9C,CAAC,GACG,GACG,CACV,CAAC;AACH,CAAC","sourcesContent":["import type Toolbar from \"./Toolbar.js\";\nimport Popover from \"./Popover.js\";\n\nexport default function ToolbarPopoverTemplate(this: Toolbar) {\n\treturn (\n\t\t<Popover\n\t\t\tclass=\"ui5-overflow-popover\"\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"End\"\n\t\t\tonClose={this.onOverflowPopoverClosed}\n\t\t\tonOpen={this.onOverflowPopoverOpened}\n\t\t\taccessibleName={this.accInfo.popover.accessibleName}\n\t\t\thideArrow={true}\n\t\t>\n\t\t\t<div class={{\n\t\t\t\t\"ui5-overflow-list\": true,\n\t\t\t\t\"ui5-overflow-list--alignleft\": this.hasItemWithText,\n\t\t\t}}>\n\t\t\t\t{ this.overflowItems.map(item => (\n\t\t\t\t\titem.toolbarPopoverTemplate.call(item.context)\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n"]}

package/dist/ToolbarRegistry.d.ts

@@ -1,5 +0,0 @@
-import type ToolbarItem from "./ToolbarItem.js";
-declare const registerToolbarItem: (ElementClass: typeof ToolbarItem) => void;
-declare const getRegisteredToolbarItem: (name: string) => typeof ToolbarItem | undefined;
-declare const getRegisteredStyles: () => import("@ui5/webcomponents-base/dist/types.js").ComponentStylesData[];
-export { registerToolbarItem, getRegisteredToolbarItem, getRegisteredStyles, };