@ui5/webcomponents 2.6.3 → 2.7.0-rc.1

package/src/ColorPickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ColorPicker from "./ColorPicker.js";
 import Label from "./Label.js";
 import Slider from "./Slider.js";
 import Input from "./Input.js";
+import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
@@ -46,7 +47,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 						value={this._alpha}
 						accessibleName={this.alphaSliderLabel}
 						showTooltip={true}
-						onInput={this._handleAlphaInputFromSlider}
+						onInput={this._handleAlphaInput}
 					/>
 				}
 			</div>
@@ -57,7 +58,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<span class="ui5-color-picker-color">
 						<div
 							class="ui5-color-picker-color-inner"
-							style={{ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}
+							style={{ "background-color": this._colorValue.toRGBString() }}
 						></div>
 					</span>
 				</div>
@@ -66,7 +67,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<Label>Hex</Label>
 					<Input
 						class="ui5-color-picker-hex-input"
-						value={this.hex}
+						value={this.HEX}
 						onKeyDown={this._onkeydown}
 						accessibleName={this.hexInputLabel}
 						onChange={this._handleHEXChange}
@@ -77,50 +78,49 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 
 			{this._isDefaultPickerMode &&
 				<div
-					class="ui5-color-picker-rgb-wrapper"
-					onui5-change={this._handleRGBInputsChange}
+					class="ui5-color-channel-inputs-wrapper"
+					onui5-change={this._handleColorInputChange}
 				>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="red"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.redInputLabel}
-							value={String(this._value.r)}
-						/>
-						<Label>R</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="green"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.greenInputLabel}
-							value={String(this._value.g)}
-						/>
-						<Label>G</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="blue"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.blueInputLabel}
-							value={String(this._value.b)}
-						/>
-						<Label>B</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
+					{this.colorChannelInputs.map(input =>
+						<><div class="ui5-color-channel">
+							<Input
+								id={input.id}
+								class="ui5-color-channel-input"
+								disabled={this.inputsDisabled}
+								accessibleName={input.accessibleName}
+								value={String(input.value)} />
+							<Label>{input.label}</Label>
+						</div>
+						<div class="ui5-color-channel-percentage-label">
+							{input.showPercentSymbol &&
+								<Label>%</Label>
+							}
+						</div></>
+					)}
+
+					<div class="ui5-color-channel">
 						<Input
 							id="alpha"
 							disabled={this.inputsDisabled}
-							class="ui5-color-picker-rgb-input"
+							class="ui5-color-channel-input"
 							value={String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
+							onInput={this._handleAlphaInput}
 						/>
 						<Label>A</Label>
 					</div>
+
+					<div>
+						<Button
+							class="ui5-color-channel-toggle"
+							id="toggle-picker-mode"
+							icon="expand"
+							design="Transparent"
+							tooltip={this.toggleModeTooltip}
+							onClick={this._togglePickerMode}
+						/>
+					</div>
 				</div>
 			}
 		</section>

package/src/NavigationMenuTemplate.tsx

@@ -20,6 +20,7 @@ export default function NavigationMenuTemplate(this: NavigationMenu) {
 			onOpen={this._afterPopoverOpen}
 			onBeforeClose={this._beforePopoverClose}
 			onClose={this._afterPopoverClose}
+			hideArrow={true}
 		>
 			<span id={`${this._id}-navigationMenuPopoverText`} class="ui5-hidden-text">{this.accSideNavigationPopoverHiddenText}</span>
 			{this.isPhone &&

package/src/SelectPopoverTemplate.tsx

@@ -0,0 +1,106 @@
+import type Select from "./Select.js";
+import List from "./List.js";
+import Button from "./Button.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Popover from "./Popover.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function SelectPopoverTemplate(this: Select) {
+	return (
+		<>
+			{this.options.length > 0 &&
+				<ResponsivePopover
+					class={{
+						"ui5-select-popover": true,
+						...this.classes.popover
+					}}
+					part="popover"
+					style={this.styles.responsivePopover}
+					placement="Bottom"
+					horizontalAlign="Start"
+					hideArrow={true}
+					preventInitialFocus={true}
+					onOpen={this._afterOpen}
+					onBeforeOpen={this._beforeOpen}
+					onClose={this._afterClose}
+					onKeyDown={this._onkeydown}
+				>
+					{this._isPhone &&
+						<div slot="header" class="ui5-responsive-popover-header">
+							<div class="row">
+								<span>{this._headerTitleText}</span>
+								<Button
+									class="ui5-responsive-popover-close-btn"
+									icon={decline}
+									design="Transparent"
+									onClick={this._toggleRespPopover} />
+							</div>
+
+							{this.hasValueStateText &&
+								<div class={{
+									"row": true,
+									"ui5-select-value-state-dialog-header": true,
+									...this.classes.popoverValueState
+								}}>
+									{valueStateMessage.call(this)}
+								</div>
+							}
+						</div>
+					}
+
+					{!this._isPhone && this.hasValueStateText &&
+						<div
+							class={this.classes.popoverValueState}
+							style={this.styles.responsivePopoverHeader}>
+							<Icon
+								class="ui5-input-value-state-message-icon"
+								name={this._valueStateMessageInputIcon} />
+							{valueStateMessage.call(this)}
+						</div>
+					}
+
+					<List
+						separators="None"
+						onMouseDown={this._itemMousedown}
+						onItemClick={this._handleItemPress}
+					>
+						<slot></slot>
+					</List>
+				</ResponsivePopover>
+			}
+
+			{this.shouldOpenValueStateMessagePopover &&
+				<Popover
+					part="popover"
+					class="ui5-valuestatemessage-popover"
+					preventInitialFocus={true}
+					preventFocusRestore={true}
+					hideArrow={true}
+					placement="Bottom"
+					horizontalAlign="Start"
+				>
+					<div
+						class={this.classes.popoverValueState}
+						style={this.styles.popoverHeader}>
+						<Icon
+							class="ui5-input-value-state-message-icon"
+							name={this._valueStateMessageInputIcon} />
+						{valueStateMessage.call(this)}
+					</div>
+				</Popover>
+			}
+		</>
+	);
+}
+
+function valueStateMessage(this: Select) {
+	return (
+		<>
+			{this.shouldDisplayDefaultValueStateMessage
+				? this.valueStateText
+				: <slot name="valueStateMessage"></slot>
+			}
+		</>
+	);
+}

package/src/SelectTemplate.tsx

@@ -0,0 +1,68 @@
+import type Select from "./Select.js";
+import Icon from "./Icon.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import SelectPopoverTemplate from "./SelectPopoverTemplate.js";
+
+export default function SelectTemplate(this: Select) {
+	return (
+		<>
+			<div
+				class={{
+					"ui5-select-root": true,
+					"ui5-input-focusable-element": true,
+				}}
+				id={`${this._id}-select`}
+				onClick={this._onclick}
+			>
+				{this.selectedOptionIcon &&
+					<Icon
+						mode="Decorative"
+						class="ui5-select-option-icon"
+						name={this.selectedOptionIcon} />
+				}
+
+				<div
+					class="ui5-select-label-root"
+					data-sap-focus-ref
+					tabindex={this._effectiveTabIndex}
+					role="combobox"
+					aria-haspopup="listbox"
+					aria-label={this.ariaLabelText}
+					aria-describedby={this.valueStateTextId}
+					aria-disabled={this.isDisabled}
+					aria-required={this.required}
+					aria-readonly={this.readonly}
+					aria-expanded={this._isPickerOpen}
+					aria-roledescription={this._ariaRoleDescription}
+					onKeyDown={this._onkeydown}
+					onKeyPress={this._handleKeyboardNavigation}
+					onKeyUp={this._onkeyup}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+				>
+					{this.hasCustomLabel
+						? <slot name="label"></slot>
+						: this.text
+					}
+				</div>
+
+				{!this.readonly &&
+					<Icon
+						name={slimArrowDown}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{this.hasValueState &&
+					<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">
+						{this.valueStateText}
+					</span>
+				}
+			</div>
+
+			{SelectPopoverTemplate.call(this)}
+		</>
+	);
+}

package/src/SwitchTemplate.tsx

@@ -59,13 +59,7 @@ export default function SwitchTemplate(this: Switch) {
 							</>
 						}
 
-						<span class="ui5-switch-handle" part="handle">
-							{/*  this icon is used in the sap_horizon_exp theme */}
-							<Icon
-								name={this.sapNextIcon}
-								class="ui5-switch-handle-icon"
-							/>
-						</span>
+						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>
 			</div>

package/src/Table.hbs

@@ -14,7 +14,7 @@
     </div>
     {{#unless rows.length}}
         <ui5-table-row id="nodata-row">
-            <ui5-table-cell id="nodata-cell" excluded-from-navigation horizontal-align="center">
+            <ui5-table-cell id="nodata-cell" excluded-from-navigation horizontal-align="Center">
             {{#if nodata.length}}
                 <slot name="nodata"></slot>
             {{else}}

package/src/TableCell.hbs

@@ -1,9 +1,10 @@
 {{#if _popin}}
-	{{#if _popinHeader}}
-		<div class="popin-header-colon">
-			{{_popinHeader}}
-			<span class="popin-colon">{{_i18nPopinColon}}</span>
-		</div>
+	{{#if _popinText}}
+		{{_popinText}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
+	{{else if _popinHeader}}
+		{{_popinHeader}}
+		<span class="popin-colon">{{_i18nPopinColon}}</span>
 	{{/if}}
 	<slot></slot>
 {{else}}

package/src/TableHeaderRow.hbs

@@ -19,6 +19,10 @@
 	<slot name="{{_individualSlot}}"></slot>
 {{/each}}
 
+{{#if _hasRowActions}}
+    <ui5-table-header-cell id="actions-cell" aria-label="{{_i18nRowActions}}"></ui5-table-header-cell>
+{{/if}}
+
 {{#if _popinCells.length}}
     <ui5-table-header-cell id="popin-cell" aria-label="{{_i18nRowPopin}}" excluded-from-navigation></ui5-table-cell>
 {{/if}}

package/src/TableRow.hbs

@@ -21,12 +21,31 @@
     <slot name="{{_individualSlot}}"></slot>
 {{/each}}
 
-{{#if _renderNavigated}}
-    <ui5-table-cell id="navigated-cell" excluded-from-navigation>
-        <div id="navigated"></div>
+{{#if _hasRowActions}}
+    <ui5-table-cell id="actions-cell">
+        {{#each _flexibleActions}}
+            <slot name="{{_individualSlot}}"></slot>
+        {{/each}}
+        {{#if _hasOverflowActions}}
+            <ui5-button
+                id="overflow"
+                icon="overflow"
+                design="Transparent"
+                @click="{{_onOverflowButtonClick}}">
+            </ui5-button>
+        {{/if}}
+         {{#each _fixedActions}}
+            <slot name="{{_individualSlot}}"></slot>
+        {{/each}}
     </ui5-table-cell>
 {{/if}}
 
+{{#if _renderNavigated}}
+        <ui5-table-cell id="navigated-cell" excluded-from-navigation>
+            <div id="navigated"></div>
+        </ui5-table-cell>
+{{/if}}
+
 {{#if _popinCells.length}}
     <ui5-table-cell id="popin-cell">
         {{#each _popinCells}}

package/src/TableRowActionBase.hbs

@@ -0,0 +1,17 @@
+{{#if invisible}}
+    <div></div>
+{{else if _isInteractive}}
+    <ui5-button
+        icon="{{_icon}}"
+        text="{{_text}}"
+        tooltip="{{_text}}"
+        @click={{_onActionClick}}
+        design="Transparent">
+    </ui5-button>
+{{else}}
+    <ui5-icon
+        name="{{_icon}}"
+        tooltip="{{_text}}"
+        design="Transparent">
+    </ui5-icon>
+{{/if}}

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,7 +22,7 @@ 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}
@@ -24,6 +30,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{this.hasValueStateText && valueStateTextHeader.call(this)}
+
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}
 					value={this._timeSelectionValue}
@@ -52,6 +60,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 +81,40 @@ 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,
+				...this.classes.popoverValueState,
+			}}
+			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.valueStateMessage.length > 0 && !this.open &&
 						<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/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/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/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/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">