@ui5/webcomponents 2.26.0 → 2.27.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +43 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Avatar.d.ts +7 -0
- package/dist/Avatar.js +18 -5
- package/dist/Avatar.js.map +1 -1
- package/dist/ComboBoxItemGroup.d.ts +2 -0
- package/dist/ComboBoxItemGroup.js +2 -0
- package/dist/ComboBoxItemGroup.js.map +1 -1
- package/dist/DatePicker.d.ts +14 -0
- package/dist/DatePicker.js +14 -0
- package/dist/DatePicker.js.map +1 -1
- package/dist/DayPicker.d.ts +1 -0
- package/dist/DayPicker.js +4 -1
- package/dist/DayPicker.js.map +1 -1
- package/dist/DayPickerTemplate.js +1 -1
- package/dist/DayPickerTemplate.js.map +1 -1
- package/dist/Icon.js +3 -0
- package/dist/Icon.js.map +1 -1
- package/dist/List.js +1 -1
- package/dist/List.js.map +1 -1
- package/dist/ListBoxItemGroupTemplate.js +1 -1
- package/dist/ListBoxItemGroupTemplate.js.map +1 -1
- package/dist/ListItem.d.ts +4 -2
- package/dist/ListItem.js +5 -9
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemBaseTemplate.d.ts +2 -0
- package/dist/ListItemBaseTemplate.js +1 -1
- package/dist/ListItemBaseTemplate.js.map +1 -1
- package/dist/ListItemGroup.d.ts +7 -23
- package/dist/ListItemGroup.js +4 -21
- package/dist/ListItemGroup.js.map +1 -1
- package/dist/ListItemGroupBase.d.ts +41 -0
- package/dist/ListItemGroupBase.js +54 -0
- package/dist/ListItemGroupBase.js.map +1 -0
- package/dist/ListItemStandardTemplate.js +1 -1
- package/dist/ListItemStandardTemplate.js.map +1 -1
- package/dist/MultiComboBoxItemGroup.d.ts +2 -0
- package/dist/MultiComboBoxItemGroup.js +2 -0
- package/dist/MultiComboBoxItemGroup.js.map +1 -1
- package/dist/NumberInput.d.ts +271 -0
- package/dist/NumberInput.js +719 -0
- package/dist/NumberInput.js.map +1 -0
- package/dist/NumberInputTemplate.d.ts +2 -0
- package/dist/NumberInputTemplate.js +18 -0
- package/dist/NumberInputTemplate.js.map +1 -0
- package/dist/Option.d.ts +10 -0
- package/dist/Option.js +6 -0
- package/dist/Option.js.map +1 -1
- package/dist/OptionGroup.d.ts +34 -0
- package/dist/OptionGroup.js +61 -0
- package/dist/OptionGroup.js.map +1 -0
- package/dist/OptionGroupTemplate.d.ts +2 -0
- package/dist/OptionGroupTemplate.js +6 -0
- package/dist/OptionGroupTemplate.js.map +1 -0
- package/dist/OptionTemplate.js +6 -1
- package/dist/OptionTemplate.js.map +1 -1
- package/dist/Popover.js +5 -3
- package/dist/Popover.js.map +1 -1
- package/dist/Select.d.ts +19 -2
- package/dist/Select.js +79 -28
- package/dist/Select.js.map +1 -1
- package/dist/SelectPopoverTemplate.js +1 -1
- package/dist/SelectPopoverTemplate.js.map +1 -1
- package/dist/SelectTemplate.js +2 -1
- package/dist/SelectTemplate.js.map +1 -1
- package/dist/SplitButton.d.ts +7 -3
- package/dist/SplitButton.js +4 -4
- package/dist/SplitButton.js.map +1 -1
- package/dist/SplitButtonTemplate.js +1 -1
- package/dist/SplitButtonTemplate.js.map +1 -1
- package/dist/StepInput.d.ts +14 -127
- package/dist/StepInput.js +40 -472
- package/dist/StepInput.js.map +1 -1
- package/dist/StepInputTemplate.js +4 -15
- package/dist/StepInputTemplate.js.map +1 -1
- package/dist/SuggestionItemGroup.d.ts +2 -0
- package/dist/SuggestionItemGroup.js +2 -0
- package/dist/SuggestionItemGroup.js.map +1 -1
- package/dist/ToolbarButton.d.ts +18 -0
- package/dist/ToolbarButton.js +16 -0
- package/dist/ToolbarButton.js.map +1 -1
- package/dist/ToolbarButtonTemplate.js +1 -1
- package/dist/ToolbarButtonTemplate.js.map +1 -1
- package/dist/bundle.esm.js +2 -0
- package/dist/bundle.esm.js.map +1 -1
- package/dist/css/themes/NumberInput.css +1 -0
- package/dist/css/themes/OptionGroup.css +1 -0
- package/dist/css/themes/StepInput.css +1 -1
- package/dist/css/themes/TimePickerClock.css +1 -1
- package/dist/css/themes/TimeSelectionClocks.css +1 -1
- package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +30 -22
- package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +31 -24
- package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
- package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
- package/dist/custom-elements-internal.json +719 -156
- package/dist/custom-elements.json +658 -162
- package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
- package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +8 -6
- package/dist/generated/i18n/i18n-defaults.js +8 -6
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/generated/themes/NumberInput.css.d.ts +2 -0
- package/dist/generated/themes/NumberInput.css.js +8 -0
- package/dist/generated/themes/NumberInput.css.js.map +1 -0
- package/dist/generated/themes/OptionGroup.css.d.ts +2 -0
- package/dist/generated/themes/OptionGroup.css.js +8 -0
- package/dist/generated/themes/OptionGroup.css.js.map +1 -0
- package/dist/generated/themes/StepInput.css.d.ts +1 -1
- package/dist/generated/themes/StepInput.css.js +1 -1
- package/dist/generated/themes/StepInput.css.js.map +1 -1
- package/dist/generated/themes/TimePickerClock.css.d.ts +1 -1
- package/dist/generated/themes/TimePickerClock.css.js +1 -1
- package/dist/generated/themes/TimePickerClock.css.js.map +1 -1
- package/dist/generated/themes/TimeSelectionClocks.css.d.ts +1 -1
- package/dist/generated/themes/TimeSelectionClocks.css.js +1 -1
- package/dist/generated/themes/TimeSelectionClocks.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +30 -22
- package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +31 -24
- package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
- package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +117 -17
- package/dist/web-types.json +266 -34
- package/package.json +9 -9
- package/src/DayPickerTemplate.tsx +1 -1
- package/src/ListBoxItemGroupTemplate.tsx +1 -1
- package/src/ListItemBaseTemplate.tsx +4 -0
- package/src/ListItemStandardTemplate.tsx +1 -1
- package/src/NumberInputTemplate.tsx +95 -0
- package/src/OptionGroupTemplate.tsx +20 -0
- package/src/OptionTemplate.tsx +6 -1
- package/src/SelectPopoverTemplate.tsx +1 -1
- package/src/SelectTemplate.tsx +6 -0
- package/src/SplitButtonTemplate.tsx +1 -2
- package/src/StepInputTemplate.tsx +23 -86
- package/src/ToolbarButtonTemplate.tsx +2 -0
- package/src/i18n/messagebundle.properties +13 -8
- package/src/i18n/messagebundle_de.properties +2 -2
- package/src/i18n/messagebundle_en.properties +2 -0
- package/src/i18n/messagebundle_en_US_saprigi.properties +7 -6
- package/src/i18n/messagebundle_pl.properties +1 -1
- package/src/i18n/messagebundle_ru.properties +1 -1
- package/src/themes/NumberInput.css +321 -0
- package/src/themes/OptionGroup.css +28 -0
- package/src/themes/StepInput.css +0 -276
- package/src/themes/TimePickerClock.css +1 -1
- package/src/themes/TimeSelectionClocks.css +1 -1
- package/src/themes/base/NumberInput-parameters.css +31 -0
- package/src/themes/base/sizes-parameters.css +3 -3
- package/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
- package/src/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
- package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
- package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
- package/src/themes/sap_horizon/NumberInput-parameters.css +26 -0
- package/src/themes/sap_horizon/parameters-bundle.css +1 -1
- package/src/themes/sap_horizon_dark/NumberInput-parameters.css +26 -0
- package/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
- package/src/themes/sap_horizon_hcb/NumberInput-parameters.css +14 -0
- package/src/themes/sap_horizon_hcb/parameters-bundle.css +2 -1
- package/src/themes/sap_horizon_hcw/NumberInput-parameters.css +14 -0
- package/src/themes/sap_horizon_hcw/parameters-bundle.css +2 -1
- package/src/themes/base/StepInput-parameters.css +0 -25
- package/src/themes/sap_horizon/StepInput-parameters.css +0 -25
- package/src/themes/sap_horizon_dark/StepInput-parameters.css +0 -25
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.27.0-rc.1",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.main",
|
|
5
5
|
"ui5": {
|
|
6
6
|
"webComponentsPackage": true
|
|
@@ -56,22 +56,22 @@
|
|
|
56
56
|
"directory": "packages/main"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@ui5/webcomponents-base": "2.
|
|
60
|
-
"@ui5/webcomponents-icons": "2.
|
|
61
|
-
"@ui5/webcomponents-icons-business-suite": "2.
|
|
62
|
-
"@ui5/webcomponents-icons-tnt": "2.
|
|
63
|
-
"@ui5/webcomponents-localization": "2.
|
|
64
|
-
"@ui5/webcomponents-theming": "2.
|
|
59
|
+
"@ui5/webcomponents-base": "2.27.0-rc.1",
|
|
60
|
+
"@ui5/webcomponents-icons": "2.27.0-rc.1",
|
|
61
|
+
"@ui5/webcomponents-icons-business-suite": "2.27.0-rc.1",
|
|
62
|
+
"@ui5/webcomponents-icons-tnt": "2.27.0-rc.1",
|
|
63
|
+
"@ui5/webcomponents-localization": "2.27.0-rc.1",
|
|
64
|
+
"@ui5/webcomponents-theming": "2.27.0-rc.1"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@custom-elements-manifest/analyzer": "^0.10.10",
|
|
68
68
|
"@ui5/cypress-internal": "0.1.0",
|
|
69
|
-
"@ui5/webcomponents-tools": "2.
|
|
69
|
+
"@ui5/webcomponents-tools": "2.27.0-rc.1",
|
|
70
70
|
"cypress": "15.18.1",
|
|
71
71
|
"jsdom": "^26.0.0",
|
|
72
72
|
"lit": "^2.0.0",
|
|
73
73
|
"vite": "5.4.21",
|
|
74
74
|
"vitest": "^3.2.7"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "349a62be7949ed8f50de4d88352f2557f0a4d7c1"
|
|
77
77
|
}
|
|
@@ -67,7 +67,7 @@ export default function DayPickerTemplate(this: DayPicker) {
|
|
|
67
67
|
<div
|
|
68
68
|
className="ui5-dp-weekname-container"
|
|
69
69
|
role="rowheader"
|
|
70
|
-
aria-label={
|
|
70
|
+
aria-label={this._getCalendarWeekLabel(day.weekNum)}
|
|
71
71
|
>
|
|
72
72
|
<span className="ui5-dp-weekname">{day.weekNum}</span>
|
|
73
73
|
</div>
|
|
@@ -15,7 +15,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
|
|
|
15
15
|
onDragLeave={this._ondragleave}
|
|
16
16
|
>
|
|
17
17
|
{this.hasHeader &&
|
|
18
|
-
<ListItemGroupHeader focused={this.focused} part="header" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
|
|
18
|
+
<ListItemGroupHeader focused={this.focused} part="header" exportparts="title" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
|
|
19
19
|
{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
|
|
20
20
|
</ListItemGroupHeader>
|
|
21
21
|
}
|
|
@@ -4,6 +4,8 @@ import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
|
|
|
4
4
|
export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
|
|
5
5
|
role?: AriaRole,
|
|
6
6
|
title?: string,
|
|
7
|
+
ariaSetsize?: number,
|
|
8
|
+
ariaPosinset?: number,
|
|
7
9
|
}) {
|
|
8
10
|
const listItemContent = hooks?.listItemContent || defaultListItemContent;
|
|
9
11
|
|
|
@@ -17,6 +19,8 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
|
|
|
17
19
|
role={injectedProps?.role}
|
|
18
20
|
title={injectedProps?.title}
|
|
19
21
|
aria-selected={injectedProps?.role === "option" ? this.selected : undefined}
|
|
22
|
+
{...(injectedProps?.ariaSetsize !== undefined && { "aria-setsize": injectedProps.ariaSetsize })}
|
|
23
|
+
{...(injectedProps?.ariaPosinset !== undefined && { "aria-posinset": injectedProps.ariaPosinset })}
|
|
20
24
|
onFocusIn={this._onfocusin}
|
|
21
25
|
onKeyUp={this._onkeyup}
|
|
22
26
|
onKeyDown={this._onkeydown}
|
|
@@ -23,7 +23,7 @@ function listItemContent(this: ListItemStandard) {
|
|
|
23
23
|
{renderTitle.call(this)}
|
|
24
24
|
{renderDescription.call(this)}
|
|
25
25
|
|
|
26
|
-
{!this.typeActive && <span class="ui5-hidden-text">{this.type}</span>}
|
|
26
|
+
{!this.typeActive && !this.isInactiveSelectable && <span class="ui5-hidden-text">{this.type}</span>}
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
{!this.description && renderAdditionalText.call(this)}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import type NumberInput from "./NumberInput.js";
|
|
2
|
+
import Icon from "./Icon.js";
|
|
3
|
+
import Input from "./Input.js";
|
|
4
|
+
|
|
5
|
+
import less from "@ui5/webcomponents-icons/dist/less.js";
|
|
6
|
+
import add from "@ui5/webcomponents-icons/dist/add.js";
|
|
7
|
+
|
|
8
|
+
export default function NumberInputTemplate(this: NumberInput) {
|
|
9
|
+
return (
|
|
10
|
+
<div
|
|
11
|
+
id={`${this._id}`}
|
|
12
|
+
class={{ "ui5-number-input-root": true, "ui5-number-input-root--with-buttons": this._showStepButtons && !this.readonly }}
|
|
13
|
+
onKeyDown={this._onkeydown}
|
|
14
|
+
onFocusIn={this._onfocusin}
|
|
15
|
+
onFocusOut={this._onfocusout}
|
|
16
|
+
onWheel={this._onMouseWheel}
|
|
17
|
+
>
|
|
18
|
+
{/* Decrement Icon */}
|
|
19
|
+
{this._showStepButtons && !this.readonly &&
|
|
20
|
+
<div
|
|
21
|
+
class="ui5-step-icon ui5-step-dec"
|
|
22
|
+
title={this.decIconTitle}
|
|
23
|
+
onMouseDown={this._decSpin}
|
|
24
|
+
onMouseUp={this._resetSpin}
|
|
25
|
+
onMouseOut={this._resetSpinOut}
|
|
26
|
+
>
|
|
27
|
+
<Icon
|
|
28
|
+
id={`${this._id}-dec`}
|
|
29
|
+
name={less}
|
|
30
|
+
tabindex={-1}
|
|
31
|
+
accessibleName={this.decIconTitle}
|
|
32
|
+
onClick={this._decValue}
|
|
33
|
+
onFocusOut={this._onButtonFocusOut}
|
|
34
|
+
class={{
|
|
35
|
+
"inputIcon": true,
|
|
36
|
+
"ui5-number-input-icon--clickable": this._decIconClickable,
|
|
37
|
+
}}
|
|
38
|
+
showTooltip={true}
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
{/* INPUT */}
|
|
44
|
+
<Input
|
|
45
|
+
id={`${this._id}-inner`}
|
|
46
|
+
data-sap-focus-ref
|
|
47
|
+
class="ui5-number-input-input"
|
|
48
|
+
placeholder={this.placeholder}
|
|
49
|
+
type={this.type}
|
|
50
|
+
value={this._inputValue ?? this._displayValue}
|
|
51
|
+
disabled={this.disabled}
|
|
52
|
+
required={this.required}
|
|
53
|
+
readonly={this.readonly}
|
|
54
|
+
focused={this.focused}
|
|
55
|
+
onui5-_request-submit={this._onInputRequestSubmit}
|
|
56
|
+
valueState={this.valueState}
|
|
57
|
+
_inputAccInfo={this.accInfo}
|
|
58
|
+
_nativeInputAttributes={this.inputAttributes}
|
|
59
|
+
onChange={this._onInputChange}
|
|
60
|
+
onFocusOut={this._onInputFocusOut}
|
|
61
|
+
onFocusIn={this._onInputFocusIn}
|
|
62
|
+
onInput={this._onInput}
|
|
63
|
+
>
|
|
64
|
+
{this.valueStateMessage.length > 0 &&
|
|
65
|
+
<slot name="valueStateMessage" slot="valueStateMessage"></slot>
|
|
66
|
+
}
|
|
67
|
+
</Input>
|
|
68
|
+
|
|
69
|
+
{/* Increment Icon */}
|
|
70
|
+
{this._showStepButtons && !this.readonly &&
|
|
71
|
+
<div
|
|
72
|
+
class="ui5-step-icon ui5-step-inc"
|
|
73
|
+
title={this.incIconTitle}
|
|
74
|
+
onMouseDown={this._incSpin}
|
|
75
|
+
onMouseUp={this._resetSpin}
|
|
76
|
+
onMouseOut={this._resetSpinOut}
|
|
77
|
+
>
|
|
78
|
+
<Icon
|
|
79
|
+
id={`${this._id}-inc`}
|
|
80
|
+
class={{
|
|
81
|
+
"inputIcon": true,
|
|
82
|
+
"ui5-number-input-icon--clickable": this._incIconClickable,
|
|
83
|
+
}}
|
|
84
|
+
name={add}
|
|
85
|
+
tabindex={-1}
|
|
86
|
+
accessibleName={this.incIconTitle}
|
|
87
|
+
onClick={this._incValue}
|
|
88
|
+
onFocusOut={this._onButtonFocusOut}
|
|
89
|
+
showTooltip={true}
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
}
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type OptionGroup from "./OptionGroup.js";
|
|
2
|
+
import type Option from "./Option.js";
|
|
3
|
+
|
|
4
|
+
export default function OptionGroupTemplate(this: OptionGroup) {
|
|
5
|
+
return (
|
|
6
|
+
<div
|
|
7
|
+
class="ui5-option-group-root"
|
|
8
|
+
role="group"
|
|
9
|
+
aria-label={this.headerText || undefined}
|
|
10
|
+
aria-roledescription={this._groupHeaderRoleDescription}
|
|
11
|
+
>
|
|
12
|
+
{this.headerText &&
|
|
13
|
+
<div class="ui5-option-group-header" aria-hidden="true">
|
|
14
|
+
{this.headerText}
|
|
15
|
+
</div>
|
|
16
|
+
}
|
|
17
|
+
{this.items.map((item: Option) => <slot name={item._individualSlot}></slot>)}
|
|
18
|
+
</div>
|
|
19
|
+
);
|
|
20
|
+
}
|
package/src/OptionTemplate.tsx
CHANGED
|
@@ -3,7 +3,12 @@ import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
|
|
|
3
3
|
import type Option from "./Option.js";
|
|
4
4
|
|
|
5
5
|
export default function OptionTemplate(this: Option) {
|
|
6
|
-
return ListItemBaseTemplate.call(this, { listItemContent }, {
|
|
6
|
+
return ListItemBaseTemplate.call(this, { listItemContent }, {
|
|
7
|
+
role: "option",
|
|
8
|
+
title: this.tooltip,
|
|
9
|
+
ariaSetsize: this._forcedSetsize,
|
|
10
|
+
ariaPosinset: this._forcedPosinset,
|
|
11
|
+
});
|
|
7
12
|
}
|
|
8
13
|
|
|
9
14
|
function listItemContent(this: Option) {
|
package/src/SelectTemplate.tsx
CHANGED
|
@@ -91,6 +91,12 @@ export default function SelectTemplate(this: Select) {
|
|
|
91
91
|
{this.ariaDescriptionText}
|
|
92
92
|
</span>
|
|
93
93
|
}
|
|
94
|
+
|
|
95
|
+
{this.hasGroups &&
|
|
96
|
+
<span id={this._groupCountMessageId} class="ui5-hidden-text">
|
|
97
|
+
{this._groupCountText}
|
|
98
|
+
</span>
|
|
99
|
+
}
|
|
94
100
|
</div>
|
|
95
101
|
{SelectPopoverTemplate.call(this)}
|
|
96
102
|
</>
|
|
@@ -10,7 +10,6 @@ export default function SplitButtonTemplate(this: SplitButton) {
|
|
|
10
10
|
tabindex={this._tabIndex}
|
|
11
11
|
aria-labelledby={!this._hideArrowButton ? `${this._id}-invisibleTextDefault ${this._id}-invisibleText` : undefined}
|
|
12
12
|
aria-haspopup={this._computedAccessibilityAttributes?.root?.hasPopup}
|
|
13
|
-
aria-roledescription={this._computedAccessibilityAttributes?.root?.roleDescription}
|
|
14
13
|
aria-label={this._computedAccessibilityAttributes?.root?.title}
|
|
15
14
|
aria-keyshortcuts={this._computedAccessibilityAttributes?.root?.ariaKeyShortcuts}
|
|
16
15
|
onFocusOut={this._onFocusOut}
|
|
@@ -56,7 +55,7 @@ export default function SplitButtonTemplate(this: SplitButton) {
|
|
|
56
55
|
onActiveStateChange={this._onArrowButtonActiveStateChange}
|
|
57
56
|
>
|
|
58
57
|
</Button>
|
|
59
|
-
<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.
|
|
58
|
+
<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accessibleName} {this.accInfo.description} {this.accInfo.keyboardHint}</span>
|
|
60
59
|
<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.buttonTextContent}</span>
|
|
61
60
|
</>
|
|
62
61
|
)}
|
|
@@ -1,94 +1,31 @@
|
|
|
1
1
|
import type StepInput from "./StepInput.js";
|
|
2
|
-
import
|
|
3
|
-
import Input from "./Input.js";
|
|
4
|
-
|
|
5
|
-
import less from "@ui5/webcomponents-icons/dist/less.js";
|
|
6
|
-
import add from "@ui5/webcomponents-icons/dist/add.js";
|
|
2
|
+
import NumberInput from "./NumberInput.js";
|
|
7
3
|
|
|
8
4
|
export default function StepInputTemplate(this: StepInput) {
|
|
9
5
|
return (
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
<NumberInput
|
|
7
|
+
_showStepButtons={true}
|
|
8
|
+
_externalAriaLabel={this._associatedLabelText}
|
|
9
|
+
value={this.value}
|
|
10
|
+
min={this.min}
|
|
11
|
+
max={this.max}
|
|
12
|
+
step={this.step}
|
|
13
|
+
valueState={this.valueState}
|
|
14
|
+
required={this.required}
|
|
15
|
+
disabled={this.disabled}
|
|
16
|
+
readonly={this.readonly}
|
|
17
|
+
placeholder={this.placeholder}
|
|
18
|
+
valuePrecision={this.valuePrecision}
|
|
19
|
+
accessibleName={this.accessibleName}
|
|
20
|
+
accessibleNameRef={this.accessibleNameRef}
|
|
21
|
+
onChange={this._onNumberInputChange}
|
|
22
|
+
onInput={this._onNumberInputInput}
|
|
23
|
+
onValueStateChange={this._onNumberInputValueStateChange}
|
|
24
|
+
onui5-_request-submit={this._onRequestSubmit}
|
|
17
25
|
>
|
|
18
|
-
{
|
|
19
|
-
|
|
20
|
-
<div
|
|
21
|
-
class="ui5-step-icon ui5-step-dec"
|
|
22
|
-
title={this.decIconTitle}
|
|
23
|
-
>
|
|
24
|
-
<Icon
|
|
25
|
-
id={`${this._id}-dec`}
|
|
26
|
-
name={less}
|
|
27
|
-
tabindex={-1}
|
|
28
|
-
accessibleName={this.decIconTitle}
|
|
29
|
-
onClick={this._decValue}
|
|
30
|
-
onFocusOut={this._onButtonFocusOut}
|
|
31
|
-
onMouseDown={this._decSpin}
|
|
32
|
-
onMouseUp={this._resetSpin}
|
|
33
|
-
onMouseOut={this._resetSpinOut}
|
|
34
|
-
class={{
|
|
35
|
-
"inputIcon": true,
|
|
36
|
-
"ui5-step-input-icon--clickable": this._decIconClickable,
|
|
37
|
-
}}
|
|
38
|
-
showTooltip={true}
|
|
39
|
-
/>
|
|
40
|
-
</div>
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
{/* INPUT */}
|
|
44
|
-
<Input
|
|
45
|
-
id={`${this._id}-inner`}
|
|
46
|
-
data-sap-focus-ref
|
|
47
|
-
class="ui5-step-input-input"
|
|
48
|
-
placeholder={this.placeholder}
|
|
49
|
-
type={this.type}
|
|
50
|
-
value={this._displayValue}
|
|
51
|
-
disabled={this.disabled}
|
|
52
|
-
required={this.required}
|
|
53
|
-
readonly={this.readonly}
|
|
54
|
-
onui5-_request-submit={this._onInputRequestSubmit}
|
|
55
|
-
valueState={this.valueState}
|
|
56
|
-
_inputAccInfo={this.accInfo}
|
|
57
|
-
_nativeInputAttributes={this.inputAttributes}
|
|
58
|
-
onChange={this._onInputChange}
|
|
59
|
-
onFocusOut={this._onInputFocusOut}
|
|
60
|
-
onFocusIn={this._onInputFocusIn}
|
|
61
|
-
onInput={this._onInput}
|
|
62
|
-
>
|
|
63
|
-
{this.valueStateMessage.length > 0 &&
|
|
64
|
-
<slot name="valueStateMessage" slot="valueStateMessage"></slot>
|
|
65
|
-
}
|
|
66
|
-
</Input>
|
|
67
|
-
|
|
68
|
-
{/* Increment Icon */}
|
|
69
|
-
{!this.readonly &&
|
|
70
|
-
<div
|
|
71
|
-
class="ui5-step-icon ui5-step-inc"
|
|
72
|
-
title={this.incIconTitle}
|
|
73
|
-
>
|
|
74
|
-
<Icon
|
|
75
|
-
id={`${this._id}-inc`}
|
|
76
|
-
class={{
|
|
77
|
-
"inputIcon": true,
|
|
78
|
-
"ui5-step-input-icon--clickable": this._incIconClickable,
|
|
79
|
-
}}
|
|
80
|
-
name={add}
|
|
81
|
-
tabindex={-1}
|
|
82
|
-
accessibleName={this.incIconTitle}
|
|
83
|
-
onClick={this._incValue}
|
|
84
|
-
onFocusOut={this._onButtonFocusOut}
|
|
85
|
-
onMouseDown={this._incSpin}
|
|
86
|
-
onMouseUp={this._resetSpin}
|
|
87
|
-
onMouseOut={this._resetSpinOut}
|
|
88
|
-
showTooltip={true}
|
|
89
|
-
/>
|
|
90
|
-
</div>
|
|
26
|
+
{this.valueStateMessage.length > 0 &&
|
|
27
|
+
<slot name="valueStateMessage" slot="valueStateMessage"></slot>
|
|
91
28
|
}
|
|
92
|
-
</
|
|
29
|
+
</NumberInput>
|
|
93
30
|
);
|
|
94
31
|
}
|
|
@@ -14,6 +14,8 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
|
|
|
14
14
|
tooltip={this.tooltip}
|
|
15
15
|
accessibleName={this.accessibleName}
|
|
16
16
|
accessibleNameRef={this.accessibleNameRef}
|
|
17
|
+
accessibleDescription={this.accessibleDescription}
|
|
18
|
+
accessibleRole={this.accessibleRole}
|
|
17
19
|
accessibilityAttributes={this.accessibilityAttributes}
|
|
18
20
|
design={this.design}
|
|
19
21
|
disabled={this.disabled}
|
|
@@ -321,6 +321,9 @@ SELECT_ROLE_DESCRIPTION=Listbox
|
|
|
321
321
|
#XTXT: MultiComboBox and ComboBox icon accessible name
|
|
322
322
|
SELECT_OPTIONS=Select Options
|
|
323
323
|
|
|
324
|
+
#XTXT: Announced by screen reader when Select with grouped options is opened; {0} is the option count, {1} is the group count
|
|
325
|
+
SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
|
|
326
|
+
|
|
324
327
|
#XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
|
|
325
328
|
SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
|
|
326
329
|
|
|
@@ -772,6 +775,9 @@ DAY_PICKER_SELECTED_RANGE_END = {0} Last date of range
|
|
|
772
775
|
#XBUT: Text for 'Week number' in the DayPicker
|
|
773
776
|
DAY_PICKER_WEEK_NUMBER_TEXT = Week number
|
|
774
777
|
|
|
778
|
+
#XBUT,{0}: Week number aria-label in the DayPicker, {0} is the week number
|
|
779
|
+
DAY_PICKER_CALENDAR_WEEK = Calendar Week {0}
|
|
780
|
+
|
|
775
781
|
#XBUT: Text for 'Non-Working Day' in the DayPicker
|
|
776
782
|
DAY_PICKER_NON_WORKING_DAY = Non-Working Day
|
|
777
783
|
|
|
@@ -793,18 +799,17 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
|
|
|
793
799
|
#XACT: ARIA label for slider tooltip input
|
|
794
800
|
SLIDER_TOOLTIP_INPUT_LABEL = Current Value
|
|
795
801
|
|
|
796
|
-
#XTOL: tooltip for decrease button of the
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
#XTOL: tooltip for increase button of the StepInput
|
|
800
|
-
STEPINPUT_INC_ICON_TITLE=Increase
|
|
802
|
+
#XTOL: tooltip for decrease button of the NumberInput
|
|
803
|
+
NUMBERINPUT_DEC_ICON_TITLE=Decrease
|
|
801
804
|
|
|
802
|
-
|
|
805
|
+
#XTOL: tooltip for increase button of the NumberInput
|
|
806
|
+
NUMBERINPUT_INC_ICON_TITLE=Increase
|
|
803
807
|
|
|
804
|
-
|
|
808
|
+
NUMBERINPUT_PATTERN_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
|
|
805
809
|
|
|
806
|
-
|
|
810
|
+
NUMBERINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of {0}.
|
|
807
811
|
|
|
812
|
+
NUMBERINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of {0}.
|
|
808
813
|
#XACT: Aria information for the Split Button
|
|
809
814
|
SPLIT_BUTTON_DESCRIPTION=Split Button
|
|
810
815
|
|
|
@@ -222,11 +222,11 @@ SELECT_ROLE_DESCRIPTION=Listenfeld
|
|
|
222
222
|
|
|
223
223
|
SELECT_OPTIONS=Auswahloptionen
|
|
224
224
|
|
|
225
|
-
SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=
|
|
225
|
+
SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Markieren:
|
|
226
226
|
|
|
227
227
|
SELECT_LISTBOX_LABEL=Alle Elemente
|
|
228
228
|
|
|
229
|
-
SHOW_SELECTED_BUTTON=Nur
|
|
229
|
+
SHOW_SELECTED_BUTTON=Nur markierte Elemente einblenden
|
|
230
230
|
|
|
231
231
|
INPUT_SUGGESTIONS=Es sind Vorschläge verfügbar
|
|
232
232
|
|
|
@@ -222,6 +222,8 @@ SELECT_ROLE_DESCRIPTION=
|
|
|
222
222
|
|
|
223
223
|
SELECT_OPTIONS=Select Options
|
|
224
224
|
|
|
225
|
+
SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
|
|
226
|
+
|
|
225
227
|
SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
|
|
226
228
|
|
|
227
229
|
SELECT_LISTBOX_LABEL=All Items
|
|
@@ -538,16 +540,15 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION=
|
|
|
538
540
|
|
|
539
541
|
SLIDER_TOOLTIP_INPUT_LABEL=Current Value
|
|
540
542
|
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
STEPINPUT_INC_ICON_TITLE=Increase
|
|
543
|
+
NUMBERINPUT_DEC_ICON_TITLE=Decrease
|
|
544
544
|
|
|
545
|
-
|
|
545
|
+
NUMBERINPUT_INC_ICON_TITLE=Increase
|
|
546
546
|
|
|
547
|
-
|
|
547
|
+
NUMBERINPUT_PATTERN_MISSMATCH=This format is not supported. Enter a number with {0} decimal places.
|
|
548
548
|
|
|
549
|
-
|
|
549
|
+
NUMBERINPUT_RANGEOVERFLOW=Enter a number lower than the maximum value of {0}.
|
|
550
550
|
|
|
551
|
+
NUMBERINPUT_RANGEUNDERFLOW=Enter a number higher than the minimum value of {0}.
|
|
551
552
|
SPLIT_BUTTON_DESCRIPTION=Split Button
|
|
552
553
|
|
|
553
554
|
SPLIT_BUTTON_KEYBOARD_HINT=Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
|
|
@@ -643,7 +643,7 @@ TABLE_MORE_DESCRIPTION=Нажмите Enter или пробел, чтобы за
|
|
|
643
643
|
TABLE_ROW_ACTIONS=Действия со строкой
|
|
644
644
|
TABLE_ROW_SINGLE_ACTION=Доступно действий со строкой: 1
|
|
645
645
|
TABLE_ROW_MULTIPLE_ACTIONS=Доступно действий со строкой: {0}
|
|
646
|
-
TABLE_ROW_OVERFLOW_BUTTON=Другие
|
|
646
|
+
TABLE_ROW_OVERFLOW_BUTTON=Другие действия
|
|
647
647
|
TABLE_NAVIGATION=Навигация
|
|
648
648
|
TABLE_GENERATED_BY_AI=Сгенерировано с помощью ИИ
|
|
649
649
|
TABLE_SELECT_ALL_ROWS=Выбрать все строки
|