@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/TableTemplate.tsx

@@ -0,0 +1,77 @@
+import type Table from "./Table.js";
+import TableRow from "./TableRow.js";
+import TableCell from "./TableCell.js";
+import DropIndicator from "./DropIndicator.js";
+import BusyIndicator from "./BusyIndicator.js";
+
+export default function TableTemplate(this: Table) {
+	return (
+		<>
+			<div id="before" role="none" tabindex={0} ui5-table-dummy-focus-area></div>
+
+			<div id="table" role="grid"
+				style={this.styles.table}
+				aria-label={this._ariaLabel}
+				aria-rowcount={this._ariaRowCount}
+				aria-multiselectable={this._ariaMultiSelectable}
+			>
+				<slot name="headerRow"></slot>
+
+				<div id="rows">
+					<div id="spacer" style={this.styles.spacer}>
+						<slot></slot>
+					</div>
+				</div>
+
+				{ this.rows.length === 0 &&
+					<TableRow id="no-data-row">
+						<TableCell id="no-data-cell" data-excluded-from-navigation horizontal-align="Center">
+							{ this.noData.length > 0 ?
+								<slot name="noData"></slot>
+								:
+								this._effectiveNoDataText
+							}
+						</TableCell>
+					</TableRow>
+				}
+
+				{ this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&
+					<div id="footer" role="rowgroup">
+						{ growingRow.call(this) }
+					</div>
+				}
+
+				<DropIndicator
+					orientation="Horizontal"
+					ownerReference={this}
+				></DropIndicator>
+
+				<div aria-hidden="true" id="table-end-row">
+					<div id="table-end-cell">
+						<div id="table-end" aria-hidden="true" tabindex={-1}></div>
+					</div>
+				</div>
+
+				{ this.loading &&
+					<BusyIndicator id="loading"
+						delay={this.loadingDelay}
+						active={true}
+						data-sap-focus-ref
+					></BusyIndicator>
+				}
+			</div>
+
+			<div id="after" role="none" tabindex={0} ui5-table-dummy-focus-area></div>
+		</>
+	);
+}
+
+function growingRow(this: Table) {
+	return (
+		<TableRow id="growing-row" ui5-growing-row>
+			<TableCell id="growing-cell">
+				<slot name={this._getGrowing()?._individualSlot}></slot>
+			</TableCell>
+		</TableRow>
+	);
+}

package/src/TagTemplate.tsx

@@ -12,11 +12,12 @@ export default function TagTemplate(this: Tag) {
 						aria-roledescription={this._roleDescription}
 						aria-description={this._valueState}
 						onClick={this._onclick}
+						part="root"
 					>
 						{ content.call(this) }
 					</button>
 					:
-					<div class="ui5-tag-root" title={this._title}>
+					<div class="ui5-tag-root" title={this._title} part="root">
 						{ content.call(this) }
 					</div>
 			}

package/src/TimePickerClockTemplate.tsx

@@ -9,66 +9,65 @@ export default function TimePickerClockTemplate(this: TimePickerClock) {
 			aria-hidden="true"
 			class={{
 				"ui5-tp-clock": true,
-				"ui5-tp-clock-inner": this.showInnerCircle,
 				"ui5-tp-clock-active": this.active,
 			}}
 		>
 
 			<div data-label={this.label} class="ui5-tp-clock-dial"></div>
 
-			<div>
+			<div class="ui5-tp-clock-items">
 				{this._items.map((item, i) => (
-					<div class="ui5-tp-clock-item" style={{ transform: `translate(-50%) rotate(${(i + 1) * 6}deg` }}>
-						{
-							item.item &&
-						<>
-							<span class="ui5-tp-clock-dot"></span>
-							<span id={`${this._id}-${item.item}`}
-								class="ui5-tp-clock-number"
-								style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
-							>
-								{item.item}
-							</span>
-							{
-								item.innerItem &&
-									<span
-										id={`${this._id}-${item.innerItem}`}
-										class="ui5-tp-clock-number"
-										style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
-									>
-										{item.innerItem}
-									</span>
-							}
-						</>
-						}
-
-						{ !item.item && !this.hideFractions
-						&& <span class="ui5-tp-clock-mid-dot"></span>
+					<div class="ui5-tp-clock-item" style={{ transform: `translate(-50%) rotate(${(i + 1) * this._angleStep}deg` }}>
+						{ item.item ?
+							<>
+								<span class="ui5-tp-clock-dot"></span>
+								<span id={`${this._id}-${item.item}`}
+									class="ui5-tp-clock-number"
+									style={{ transform: `rotate(-${(i + 1) * this._angleStep}deg)` }}
+								>
+									{item.item}
+								</span>
+							</>
+							:
+							<span class="ui5-tp-clock-mid-dot"></span>
 						}
 					</div>
 				))}
+			</div>
 
+			<div class="ui5-tp-clock-markers">
 				{this._selectedItem.showMarker &&
 				<div
-					class="ui5-tp-clock-item ui5-tp-clock-item-with-marker"
+					class="ui5-tp-clock-item"
 					style={{ transform: `translate(-50%) rotate(${this._selectedItem.angle || 0}deg)` }}
 				>
-					<div class="ui5-tp-clock-marker"></div>
+					<div class="ui5-tp-clock-select-marker"></div>
 					<div
 						class={this._selectedItem.itemClasses}
 						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
 					>{this._selectedItem.item}</div>
+				</div>
+				}
 
-					<div id={`${this._id}-selected`}
-						class={this._selectedItem.innerItemClasses}
-						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
-					>{this._selectedItem.innerItem}</div>
+				{this._hoveredItem.showMarker &&
+				<div
+					class="ui5-tp-clock-item"
+					style={{ transform: `translate(-50%) rotate(${this._hoveredItem.angle || 0}deg)` }}
+				>
+					<div class="ui5-tp-clock-hover-marker"></div>
+					<div
+						class={this._hoveredItem.itemClasses}
+						style={{ transform: `rotate(-${this._hoveredItem.angle || 0}deg)` }}
+					>{this._hoveredItem.item}</div>
 				</div>
 				}
 			</div>
 
 			<div
-				class="ui5-tp-clock-cover"
+				class={{
+					"ui5-tp-clock-cover": true,
+					"ui5-tp-clock-pointer": this._hoveredItem.showMarker,
+				}}
 				onTouchStart={this._onTouchStart}
 				onTouchMove={this._onTouchMove}
 				onTouchEnd={this._onTouchEnd}
@@ -76,7 +75,7 @@ export default function TimePickerClockTemplate(this: TimePickerClock) {
 				onMouseMove={this._onTouchMove}
 				onMouseUp={this._onTouchEnd}
 				onMouseOut={this._onMouseOut}
-				ref={this._captureClockRef.bind(this)}
+				onWheel={this._onMouseWheel}
 			></div>
 		</div>);
 }

package/src/TimePickerPopoverTemplate.tsx

@@ -1,9 +1,15 @@
 import type TimePicker from "./TimePicker.js";
 import Button from "./Button.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 export default function TimePickerPopoverTemplate(this: TimePicker) {
 	return (
@@ -16,14 +22,17 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={true}
+				_hideHeader={!this.hasValueStateText}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
+				onBeforeOpen={this.onResponsivePopoverBeforeOpen}
 				onOpen={this.onResponsivePopoverAfterOpen}
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
+
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}
 					value={this._timeSelectionValue}
@@ -52,6 +61,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
+					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+
 					<div class="popover-content">
 						<TimeSelectionInputs
 							id={`${this._id}-time-sel-inputs`}
@@ -71,3 +82,45 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 		</>
 	);
 }
+
+function valueStateMessage(this: TimePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot="header"
+			class={{
+				"ui5-popover-header": true,
+				"ui5-valuestatemessage-header": true,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			}}
+			style={style}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: TimePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}

package/src/TimePickerTemplate.tsx

@@ -1,13 +1,14 @@
 import type TimePicker from "./TimePicker.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
+import DateTimeInput from "./DateTimeInput.js";
 import TimePickerPopoverTemplate from "./TimePickerPopoverTemplate.js";
+import timeEntryRequest from "@ui5/webcomponents-icons/dist/time-entry-request.js";
 
 export default function TimePickerTemplate(this: TimePicker) {
 	return (
 		<>
 			<div id={this._id} class="ui5-time-picker-root">
-				<Input
+				<DateTimeInput
 					data-sap-focus-ref
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
@@ -17,6 +18,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					readonly={this.readonly}
 					required={this.required}
 					valueState={this.valueState}
+					_shouldOpenValueStatePopover={!this.open}
 					_inputAccInfo={this.accInfo}
 					onClick={this._handleInputClick}
 					onChange={this._handleInputChange}
@@ -24,7 +26,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					onFocusIn={this._onfocusin}
 					onKeyDown={this._onkeydown}
 				>
-					{this.valueStateMessage.length > 0 &&
+					{this.shouldDisplayValueStateMessageOnDesktop &&
 						<slot
 							name="valueStateMessage"
 							slot="valueStateMessage"
@@ -34,7 +36,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					{!this.readonly &&
 						<Icon
 							slot="icon"
-							name={this.openIconName}
+							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
 							onClick={this._togglePicker}
@@ -45,7 +47,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							}}
 						/>
 					}
-				</Input>
+				</DateTimeInput>
 			</div>
 
 			{ TimePickerPopoverTemplate.call(this) }

package/src/TimeSelectionClocksTemplate.tsx

@@ -66,8 +66,9 @@ export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
 						displayStep={entity.displayStep}
 						valueStep={entity.attributes && entity.attributes.step}
 						lastItemReplacement={entity.lastItemReplacement}
-						showInnerCircle={entity.showInnerCircle}
+						hideFractions={entity.hideFractions}
 						prependZero={entity.prependZero}
+						_skipAnimation={entity.skipAnimation}
 						onChange={this._clockChange}
 					>
 					</TimePickerClock>

package/src/ToastTemplate.tsx

@@ -2,9 +2,11 @@ import type Toast from "./Toast.js";
 
 export default function ToastTemplate(this: Toast) {
 	return <>
-		this.open &&
-		<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
-			<bdi><slot></slot></bdi>
-		</div>
+		{
+			this.open &&
+				<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
+					<bdi><slot></slot></bdi>
+				</div>
+		}
 	</>;
 }

package/src/TokenTemplate.tsx

@@ -28,6 +28,7 @@ export default function TokenTemplate(this: Token) {
 							accessibleName={this.tokenDeletableText}
 							showTooltip={true}
 							onClick={this._delete}
+							onMouseDown={this._onmousedown}
 						/>
 					}
 				</div>

package/src/TokenizerPopoverTemplate.tsx

@@ -42,7 +42,6 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 				onItemDelete={this.itemDelete}
 			>
 				{this._tokens
-					.filter(token => token._isVisible)
 					.map(token => <ListItemStandard key={String(token._id)} data-ui5-token-ref-id={token._id} wrappingType="Normal">{token.text}</ListItemStandard>)}
 			</List>
 

package/src/ToolbarButtonTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			hidden={this.hidden}
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
+			onClick={(...args) => this.onClick(...args)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverButtonTemplate.tsx

@@ -16,6 +16,7 @@ export default function ToolbarPopoverButtonTemplate(this: ToolbarButton) {
 			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)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverSelectTemplate.tsx

@@ -11,6 +11,10 @@ export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) {
 			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)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarPopoverTemplate.tsx

@@ -9,6 +9,7 @@ export default function ToolbarPopoverTemplate(this: Toolbar) {
 			horizontalAlign="End"
 			onClose={this.onOverflowPopoverClosed}
 			onOpen={this.onOverflowPopoverOpened}
+			accessibleName={this.accInfo.popover.accessibleName}
 			hideArrow={true}
 		>
 			<div class={{

package/src/ToolbarSelectTemplate.tsx

@@ -12,6 +12,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			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)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarTemplate(this: Toolbar) {
 				aria-hidden={this.hideOverflowButton}
 				icon={overflowIcon}
 				design="Transparent"
+				onClick={this.toggleOverflow}
 				class={{
 					"ui5-tb-item": true,
 					"ui5-tb-overflow-btn": true,

package/src/TreeItemBaseTemplate.tsx

@@ -54,7 +54,13 @@ function listItemPostContent(this: TreeItemBase) {
 }
 
 function listItemContent() { }
-function imageBegin() { }
+function imageBegin(this: TreeItemBase) {
+	if (this.hasImage) {
+		return <div class="ui5-tree-item-image">
+			<slot name="image"></slot>
+		</div>;
+	}
+}
 function iconBegin(this: TreeItemBase) {
 	return this.icon ? <Icon part="icon" name={this.icon} class="ui5-li-icon" /> : <></>;
 }

package/src/TreeItemTemplate.tsx

@@ -15,7 +15,7 @@ export default function TreeItemTemplate(this: TreeItem, hooks?: Partial<ListIte
 function listItemContent(this: TreeItem) {
 	return <>
 		<div class="ui5-li-text-wrapper">
-			{this._showTitle &&
+			{!!this._showTitle &&
 				<div part="title" class="ui5-li-title"> {this.text}</div>
 			}
 		</div>

package/src/YearPickerTemplate.tsx

@@ -30,7 +30,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 						</span>
 						{
 							year.yearInSecType &&
-							<span class="ui5-yp-year-sec-type">
+							<span class="ui5-yp-item-sec-type">
 								{year.yearInSecType}
 							</span>
 						}

package/src/features/ColorPaletteMoreColorsTemplate.tsx

@@ -5,9 +5,9 @@ import ColorPicker from "../ColorPicker.js";
 
 export default function ColorPaletteMoreColorsTemplate(this: ColorPalette) {
 	return (
-		<Dialog headerText={this.colorPaletteDialogTitle}>
+		<Dialog open={this.dialogOpen} headerText={this.colorPaletteDialogTitle} onClose={this._closeDialog}>
 			<div class="ui5-cp-dialog-content">
-				<ColorPicker />
+				<ColorPicker value={this.colorPickerValue} onChange={this.onColorPickerChange} />
 			</div>
 
 			<div slot="footer" class="ui5-cp-dialog-footer">

package/src/features/InputSuggestionsTemplate.tsx

@@ -6,8 +6,13 @@ import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
+import ListAccessibleRole from "../types/ListAccessibleRole.js";
+
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	const valueStateMessage = hooks?.valueStateMessage;
+	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
 
-export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {
 	return (
 		<ResponsivePopover
 			class={this.classes.popover}
@@ -55,8 +60,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 
 					{this.hasValueStateMessage &&
 					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 					}
 				</>
@@ -72,8 +77,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 						}}
 						style={this.styles.suggestionPopoverHeader}
 					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 			}
 
@@ -93,9 +98,10 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 	);
 }
 
-function suggestionsList(this: Input) {
+function defaultSuggestionsList(this: Input) {
 	return (
 		<List
+			accessibleRole={ListAccessibleRole.ListBox}
 			separators={this.suggestionSeparators}
 			selectionMode="Single"
 			onMouseDown={this.onItemMouseDown}

package/src/features/ListItemStandardExpandableTextTemplate.tsx

@@ -0,0 +1,31 @@
+import ExpandableText from "../ExpandableText.js";
+import type ListItemStandard from "../ListItemStandard.js";
+import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTemplateParams.js";
+
+/**
+ * Provides a template for rendering text with the ExpandableText component
+ * when wrappingType is set to "Normal".
+ *
+ * @param {object} injectedProps - The configuration options for the expandable text
+ * @returns {JSX.Element} The rendered ExpandableText component
+ */
+export default function ListItemStandardExpandableTextTemplate(
+	this: ListItemStandard,
+	injectedProps: ExpandableTextTemplateParams
+): JSX.Element {
+	const {
+		className,
+		text,
+		maxCharacters,
+		part
+	} = injectedProps;
+
+	return (
+		<ExpandableText
+			part={part}
+			class={className}
+			text={text}
+			maxCharacters={maxCharacters}
+		/>
+	);
+}