@ui5/webcomponents 2.26.0 → 2.27.0-rc.0

package/src/StepInputTemplate.tsx

@@ -1,94 +1,31 @@
 import type StepInput from "./StepInput.js";
-import Icon from "./Icon.js";
-import Input from "./Input.js";
-
-import less from "@ui5/webcomponents-icons/dist/less.js";
-import add from "@ui5/webcomponents-icons/dist/add.js";
+import NumberInput from "./NumberInput.js";
 
 export default function StepInputTemplate(this: StepInput) {
 	return (
-		<div
-			id={`${this._id}`}
-			class="ui5-step-input-root"
-			onKeyDown={this._onkeydown}
-			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
-			onWheel={this._onMouseWheel}
+		<NumberInput
+			_showStepButtons={true}
+			_externalAriaLabel={this._associatedLabelText}
+			value={this.value}
+			min={this.min}
+			max={this.max}
+			step={this.step}
+			valueState={this.valueState}
+			required={this.required}
+			disabled={this.disabled}
+			readonly={this.readonly}
+			placeholder={this.placeholder}
+			valuePrecision={this.valuePrecision}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			onChange={this._onNumberInputChange}
+			onInput={this._onNumberInputInput}
+			onValueStateChange={this._onNumberInputValueStateChange}
+			onui5-_request-submit={this._onRequestSubmit}
 		>
-			{/* Decrement Icon */}
-			{!this.readonly &&
-			<div
-				class="ui5-step-icon ui5-step-dec"
-				title={this.decIconTitle}
-			>
-				<Icon
-					id={`${this._id}-dec`}
-					name={less}
-					tabindex={-1}
-					accessibleName={this.decIconTitle}
-					onClick={this._decValue}
-					onFocusOut={this._onButtonFocusOut}
-					onMouseDown={this._decSpin}
-					onMouseUp={this._resetSpin}
-					onMouseOut={this._resetSpinOut}
-					class={{
-						"inputIcon": true,
-						"ui5-step-input-icon--clickable": this._decIconClickable,
-					}}
-					showTooltip={true}
-				/>
-			</div>
-			}
-
-			{/* INPUT */}
-			<Input
-				id={`${this._id}-inner`}
-				data-sap-focus-ref
-				class="ui5-step-input-input"
-				placeholder={this.placeholder}
-				type={this.type}
-				value={this._displayValue}
-				disabled={this.disabled}
-				required={this.required}
-				readonly={this.readonly}
-				onui5-_request-submit={this._onInputRequestSubmit}
-				valueState={this.valueState}
-				_inputAccInfo={this.accInfo}
-				_nativeInputAttributes={this.inputAttributes}
-				onChange={this._onInputChange}
-				onFocusOut={this._onInputFocusOut}
-				onFocusIn={this._onInputFocusIn}
-				onInput={this._onInput}
-			>
-				{this.valueStateMessage.length > 0 &&
-					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
-				}
-			</Input>
-
-			{/* Increment Icon */}
-			{!this.readonly &&
-				<div
-					class="ui5-step-icon ui5-step-inc"
-					title={this.incIconTitle}
-				>
-					<Icon
-						id={`${this._id}-inc`}
-						class={{
-							"inputIcon": true,
-							"ui5-step-input-icon--clickable": this._incIconClickable,
-						}}
-						name={add}
-						tabindex={-1}
-						accessibleName={this.incIconTitle}
-						onClick={this._incValue}
-						onFocusOut={this._onButtonFocusOut}
-						onMouseDown={this._incSpin}
-						onMouseUp={this._resetSpin}
-						onMouseOut={this._resetSpinOut}
-						showTooltip={true}
-					/>
-				</div>
+			{this.valueStateMessage.length > 0 &&
+				<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 			}
-		</div>
+		</NumberInput>
 	);
 }

package/src/i18n/messagebundle.properties

@@ -321,6 +321,9 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XTXT: Announced by screen reader when Select with grouped options is opened; {0} is the option count, {1} is the group count
+SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
+
 #XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
 SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
 
@@ -793,18 +796,17 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
 #XACT: ARIA label for slider tooltip input
 SLIDER_TOOLTIP_INPUT_LABEL = Current Value
 
-#XTOL: tooltip for decrease button of the StepInput
-STEPINPUT_DEC_ICON_TITLE=Decrease
-
-#XTOL: tooltip for increase button of the StepInput
-STEPINPUT_INC_ICON_TITLE=Increase
+#XTOL: tooltip for decrease button of the NumberInput
+NUMBERINPUT_DEC_ICON_TITLE=Decrease
 
-STEPINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
+#XTOL: tooltip for increase button of the NumberInput
+NUMBERINPUT_INC_ICON_TITLE=Increase
 
-STEPINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of  {0}.
+NUMBERINPUT_PATTERN_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
 
-STEPINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of  {0}.
+NUMBERINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of  {0}.
 
+NUMBERINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of  {0}.
 #XACT: Aria information for the Split Button
 SPLIT_BUTTON_DESCRIPTION=Split Button
 

package/src/i18n/messagebundle_de.properties

@@ -222,11 +222,11 @@ SELECT_ROLE_DESCRIPTION=Listenfeld
 
 SELECT_OPTIONS=Auswahloptionen
 
-SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Auswählen:
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Markieren:
 
 SELECT_LISTBOX_LABEL=Alle Elemente
 
-SHOW_SELECTED_BUTTON=Nur ausgewählte Elemente einblenden
+SHOW_SELECTED_BUTTON=Nur markierte Elemente einblenden
 
 INPUT_SUGGESTIONS=Es sind Vorschläge verfügbar
 

package/src/i18n/messagebundle_pl.properties

@@ -222,7 +222,7 @@ SELECT_ROLE_DESCRIPTION=Pole listy
 
 SELECT_OPTIONS=Wybierz opcje
 
-SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybierz:
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybór:
 
 SELECT_LISTBOX_LABEL=Wszystkie pozycje
 

package/src/i18n/messagebundle_ru.properties

@@ -643,7 +643,7 @@ TABLE_MORE_DESCRIPTION=Нажмите Enter или пробел, чтобы за
 TABLE_ROW_ACTIONS=Действия со строкой
 TABLE_ROW_SINGLE_ACTION=Доступно действий со строкой: 1
 TABLE_ROW_MULTIPLE_ACTIONS=Доступно действий со строкой: {0}
-TABLE_ROW_OVERFLOW_BUTTON=Другие операции
+TABLE_ROW_OVERFLOW_BUTTON=Другие действия
 TABLE_NAVIGATION=Навигация
 TABLE_GENERATED_BY_AI=Сгенерировано с помощью ИИ
 TABLE_SELECT_ALL_ROWS=Выбрать все строки

package/src/themes/NumberInput.css

@@ -0,0 +1,321 @@
+@import "./FormComponents.css";
+@import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
+@import "./InputSharedStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
+}
+
+:host([disabled]) {
+    opacity: var(--_ui5_input_disabled_opacity);
+    cursor: default;
+    pointer-events: none;
+    background-color: var(--_ui5-input_disabled_background);
+    border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host {
+	color: var(--sapField_TextColor);
+	background-color: var(--sapField_Background);
+	border: var(--_ui5_number_input_border_style);
+	border-radius: var(--sapField_BorderCornerRadius);
+	box-sizing: border-box;
+	height: var(--_ui5_input_height);
+	position: relative;
+	isolation: isolate;
+	overflow: hidden;
+	margin: var(--_ui5_input_margin_top_bottom) 0;
+	min-width: var(--_ui5_number_input_min_width);
+	text-align: right;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+[ui5-input] {
+	--ui5_input_focus_pseudo_element_content: none;
+}
+
+:host .ui5-number-input-input {
+	text-align: inherit;
+	height: inherit;
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])){
+	box-shadow: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([readonly]:not([disabled])) {
+	border-width: var(--sapElement_BorderWidth);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	border-style: var(--_ui5_number_input_error_warning_information_border_style);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_number_input_border_color_hover);
+	border: var(--_ui5_number_input_border_hover);
+}
+:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover),
+:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	border: var(--_ui5_number_input_border_style_hover);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_SuccessShadow);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_InformationShadow);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_WarningShadow);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):not([focused]):hover) {
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Critical"]:not([readonly]):not([disabled]):hover) {
+	background-color: var(--_ui5_number_input_button_state_hover_background_color);
+}
+
+:host(:not([value-state]):not([readonly]):not([disabled])[focused]),
+:host([value-state="None"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Positive"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
+:host([value-state="Critical"]:not([readonly]):not([disabled])[focused]){
+	background-color: var(--sapField_Focus_Background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]) {
+	background-color: var(--_ui5_number_input_error_focused_background);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled])[focused]:hover) {
+	background-color: var(--_ui5_number_input_error_hover_background);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after,
+:host([value-state="None"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after,
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+	position: absolute;
+	content: "";
+	top: -1px;
+	right: -1px;
+	bottom: -1px;
+	left: -1px;
+	outline: none;
+	pointer-events: none;
+	border-radius: var(--sapField_BorderCornerRadius);
+	border-style: var(--_ui5_number_input_after_border_style);
+	z-index: 0;
+	border-width: 0px;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InformationColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_WarningColor);
+	border-width: 2px;
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_SuccessColor);
+	border-width: 1px;
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled]))::after {
+	border-color: var(--sapField_InvalidColor);
+	border-width: var(--_ui5_input_information_border_width);
+}
+
+:host([value-state])::after {
+	border-width: var(--_ui5_input_state_border_width);
+}
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input {
+	background-color: var(--_ui5_number_input_error_background_color);
+}
+
+:host([value-state]:not([value-state="None"]) .ui5-number-input-input[focused]) {
+		outline: none;
+}
+
+:host .ui5-number-input-input {
+	width: 100%;
+	color: inherit;
+	background-color: inherit;
+	border: var(--_ui5_number_input_input_border);
+	box-sizing: border-box;
+	vertical-align: top;
+	margin-top: var(--_ui5_number_input_input_margin_top);
+	min-width: var(--_ui5_number_input_min_width);
+	position: relative;
+	outline: none;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
+:host .ui5-number-input-root.ui5-number-input-root--with-buttons .ui5-number-input-input {
+	padding-inline-start: var(--_ui5_number_input_padding_with_step_buttons);
+	padding-inline-end: var(--_ui5_number_input_padding_with_step_buttons);
+}
+
+:host .ui5-number-input-input[readonly] {
+	padding: 0;
+}
+
+:host .ui5-number-input-input:hover,
+:host .ui5-number-input-input[focused]{
+	box-shadow: none;
+}
+
+:host .ui5-number-input-root {
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	height: inherit;
+}
+
+:host .ui5-number-input-input::part(input) {
+	white-space: nowrap;
+}
+
+:host .ui5-number-input-input[text-align=left]::part(input) {
+	text-align: left;
+}
+
+:host .ui5-number-input-input[text-align=center]::part(input) {
+	text-align: center;
+}
+
+:host .ui5-number-input-input[text-align=right]::part(input) {
+	text-align: right;
+}
+
+::slotted([slot="valueStateMessage"]) {
+	text-align: left;
+}
+
+:host .ui5-step-icon {
+	position: absolute;
+	display: var(--_ui5_number_input_button_display);
+	height: 2rem;
+	height: 100%;
+	background-color: var(--_ui5_number_input_button_background_color);
+	z-index: 0;
+}
+
+:host .ui5-step-icon[focused] {
+	border: none;
+	outline: none;
+}
+
+:host .ui5-step-icon.ui5-step-dec {
+	left: var(--_ui5_number_input_button_left);
+	z-index: 1;
+}
+
+:host .ui5-step-icon.ui5-step-inc {
+	right: var(--_ui5_number_input_button_right);
+}
+
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable),
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):active,
+:host .ui5-step-icon *:not(.ui5-number-input-icon--clickable):hover {
+	opacity: 0.5;
+	background-color: transparent;
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:hover,
+:host .ui5-step-icon :not(.ui5-number-input-icon--clickable) *:active {
+	background-color: var(--sapField_Background);
+	color: var(--sapContent_IconColor);
+}
+
+:host .ui5-number-input-input[focused]::after {
+	position: absolute;
+	content: "";
+	border: var(--_ui5_number_input_input_border_focused_after);
+	top: var(--_ui5_number_input_input_border_top_bottom_focused_after);
+	right: 0px;
+	bottom: var(--_ui5_number_input_input_border_bottom_focused_after);
+	border-radius: var(--_ui5_number_input_input_border_radius_focused_after);
+	left: 0px;
+	outline: none;
+	pointer-events: none;
+	z-index: 1;
+}
+
+:host([readonly]) .ui5-number-input-input[focused]::after{
+	top: var(--_ui5_input_readonly_focus_offset);
+    bottom: var(--_ui5_input_readonly_focus_offset);
+    left: var(--_ui5_input_readonly_focus_offset);
+    right: var(--_ui5_input_readonly_focus_offset);
+    border-radius: var(--_ui5_input_readonly_focus_border_radius);
+	border-color: var(--sapContent_FocusColor);
+}
+
+:host .ui5-number-input-input[focused] {
+	outline: none;
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_information_border_color_focused_after);
+	top: var(--_ui5_number_input_input_border_top_information_focused_after);
+	bottom: var(--_ui5_number_input_input_border_bottom_information_focused_after);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_warning_border_color_focused_after);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_success_border_color_focused_after);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-number-input-input[focused]::after {
+	border-color: var(--_ui5_number_input_input_error_border_color_focused_after);
+}
+
+/* Disable spin buttons in Chrome, Safari, Edge, Opera */
+:host .ui5-number-input-input::-webkit-outer-spin-button,
+:host .ui5-number-input-input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+:host([disabled]) .ui5-step-icon {
+	background-color: var(--_ui5_number_input_disabled_button_background);
+}
+
+:host([disabled]) .ui5-step-icon [ui5-icon] {
+	color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/OptionGroup.css

@@ -0,0 +1,28 @@
+:host {
+	display: block;
+}
+
+.ui5-option-group-root {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+
+.ui5-option-group-header {
+	display: flex;
+	align-items: flex-end;
+	padding: 1.25rem 1rem 0.5rem;
+	box-sizing: border-box;
+	border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor);
+	background: var(--sapList_GroupHeaderBackground);
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader6Size);
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+	user-select: none;
+}