@openui5/sap.ui.webc.main 1.96.5 → 1.99.0

package/src/sap/ui/webc/main/thirdparty/SplitButton.js

@@ -0,0 +1,196 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './generated/templates/SplitButtonTemplate.lit', './types/ButtonDesign', './generated/i18n/i18n-defaults', './generated/themes/SplitButton.css'], function (UI5Element, Keys, i18nBundle, litRender, SplitButtonTemplate_lit, ButtonDesign, i18nDefaults, SplitButton_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+
+	const metadata = {
+		tag: "ui5-split-button",
+		managedSlots: true,
+		properties:  {
+			icon: {
+				type: String,
+			},
+			activeIcon: {
+				type: String,
+			},
+			design: {
+				type: ButtonDesign,
+				defaultValue: ButtonDesign.Default,
+			},
+			disabled: {
+				type: Boolean,
+			},
+			 accessibleName: {
+				type: String,
+				defaultValue: undefined,
+			},
+			 focused: {
+				type: Boolean,
+			},
+			_splitButtonAccInfo: {
+				type: Object,
+			},
+			_tabIndex: {
+				type: String,
+				defaultValue: "0",
+				noAttribute: true,
+			},
+			_spacePressed: {
+				type: Boolean,
+				noAttribute: true,
+			},
+			_shiftOrEscapePressed: {
+				type: Boolean,
+				noAttribute: true,
+			},
+			 _textButtonActive: {
+				type: Boolean,
+				noAttribute: true,
+			},
+			 _textButtonIcon: {
+				type: String,
+				noAttribute: true,
+			},
+			 _arrowButtonActive: {
+				type: Boolean,
+				noAttribute: true,
+			},
+		},
+		slots:  {
+			"default": {
+				type: Node,
+				propertyName: "text",
+			},
+		},
+		events:  {
+			"click": {},
+			"arrow-click": {},
+		 },
+	};
+	class SplitButton extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get styles() {
+			return SplitButton_css;
+		}
+		static get template() {
+			return SplitButtonTemplate_lit;
+		}
+		static async onDefine() {
+			SplitButton.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
+		onBeforeRendering() {
+			this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
+			if (this.disabled) {
+				this._tabIndex = "-1";
+			}
+		}
+		_onFocusOut(event) {
+			if (this.disabled || event.isMarked) {
+				return;
+			}
+			this._shiftOrEscapePressed = false;
+			this.focused = false;
+			this._setTabIndexValue();
+		}
+		_onFocusIn(event) {
+			if (this.disabled || event.isMarked) {
+				return;
+			}
+			this._shiftOrEscapePressed = false;
+			this.focused = true;
+		}
+		_onKeyDown(event) {
+			if (Keys.isDown(event) || Keys.isUp(event) || Keys.isDownAlt(event) || Keys.isUpAlt(event) || Keys.isF4(event)) {
+				event.preventDefault();
+				this._arrowButtonActive = true;
+				this._fireArrowClick();
+			} else if (Keys.isSpace(event) || Keys.isEnter(event)) {
+				event.preventDefault();
+				this._textButtonActive = true;
+				if (Keys.isEnter(event)) {
+					this._fireClick();
+				} else {
+					this._spacePressed = true;
+				}
+			}
+			if (this._spacePressed && (Keys.isEscape(event) || Keys.isShift(event))) {
+				this._shiftOrEscapePressed = true;
+				this._textButtonActive = false;
+			}
+			this._setTabIndexValue();
+		}
+		_onKeyUp(event) {
+			if (Keys.isDown(event) || Keys.isUp(event) || Keys.isDownAlt(event) || Keys.isUpAlt(event) || Keys.isF4(event)) {
+				this._arrowButtonActive = false;
+			} else if (Keys.isSpace(event) || Keys.isEnter(event)) {
+				this._textButtonActive = false;
+				if (Keys.isSpace(event)) {
+					event.preventDefault();
+					event.stopPropagation();
+					this._fireClick();
+					this._spacePressed = false;
+				}
+			}
+			this._setTabIndexValue();
+		}
+		_fireClick(event) {
+			event && event.stopPropagation();
+			if (!this._shiftOrEscapePressed) {
+				this.fireEvent("click");
+			}
+			this._shiftOrEscapePressed = false;
+		}
+		_fireArrowClick(event) {
+			event && event.stopPropagation();
+			this.fireEvent("arrow-click");
+		}
+		_textButtonRelease() {
+			this._textButtonActive = false;
+			this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
+			this._setTabIndexValue();
+		}
+		_textButtonPress() {
+			this._textButtonActive = true;
+			this.focused = false;
+			this._setTabIndexValue();
+		}
+		_setTabIndexValue() {
+			const textButton = this.textButton,
+				arrowButton = this.arrowButton,
+				buttonsAction = (textButton && (textButton.focused || textButton.active))
+							 || (arrowButton && (arrowButton.focused || arrowButton.active));
+			this._tabIndex = this.disabled || buttonsAction ? "-1" : "0";
+		}
+		get textButtonAccText() {
+			return this.textContent;
+		}
+		get textButton() {
+			return this.getDomRef() && this.getDomRef().querySelector(".ui5-split-text-button");
+		}
+		get arrowButton() {
+			return this.getDomRef() && this.getDomRef().querySelector(".ui5-split-arrow-button");
+		}
+		get accessibilityInfo() {
+			return {
+				ariaExpanded: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaExpanded,
+				ariaHaspopup: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaHaspopup,
+				description: SplitButton.i18nBundle.getText(i18nDefaults.SPLIT_BUTTON_DESCRIPTION),
+				keyboardHint: SplitButton.i18nBundle.getText(i18nDefaults.SPLIT_BUTTON_KEYBOARD_HINT),
+			};
+		}
+		get ariaLabelText() {
+			return [SplitButton.i18nBundle.getText(i18nDefaults.SPLIT_BUTTON_DESCRIPTION), SplitButton.i18nBundle.getText(i18nDefaults.SPLIT_BUTTON_KEYBOARD_HINT)].join(" ");
+		}
+	}
+	SplitButton.define();
+
+	return SplitButton;
+
+});

package/src/sap/ui/webc/main/thirdparty/StepInput.js

@@ -65,9 +65,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: Boolean,
 				noAttribute: true,
 			},
-			_focused: {
+			focused: {
 				type: Boolean,
-				noAttribute: true,
 			},
 			_inputFocused: {
 				type: Boolean,
@@ -122,7 +121,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	class StepInput extends UI5Element__default {
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		static get metadata() {
 			return metadata;
@@ -143,19 +141,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			StepInput.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get type() {
 			return InputType.Number;
 		}
 		get decIconTitle() {
-			return this.i18nBundle.getText(i18nDefaults.STEPINPUT_DEC_ICON_TITLE);
+			return StepInput.i18nBundle.getText(i18nDefaults.STEPINPUT_DEC_ICON_TITLE);
 		}
 		get decIconName() {
 			return "less";
 		}
 		get incIconTitle() {
-			return this.i18nBundle.getText(i18nDefaults.STEPINPUT_INC_ICON_TITLE);
+			return StepInput.i18nBundle.getText(i18nDefaults.STEPINPUT_INC_ICON_TITLE);
 		}
 		get incIconName() {
 			return "add";
@@ -167,7 +165,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return !this._incIconDisabled && !this.readonly && !this.disabled;
 		}
 		get _isFocused() {
-			return this._focused;
+			return this.focused;
 		}
 		get _valuePrecisioned() {
 			return this.value.toFixed(this.valuePrecision);
@@ -254,7 +252,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.value = value;
 				this._validate();
 				this._setButtonState();
-				this._focused = true;
+				this.focused = true;
 				this.inputOuter.setAttribute("focused", "");
 				if (fireChangeEvent) {
 					this._fireChangeEvent();
@@ -288,10 +286,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 		}
 		_onfocusin() {
-			this._focused = true;
+			this.focused = true;
 		}
 		_onfocusout() {
-			this._focused = false;
+			this.focused = false;
 		}
 		_onkeydown(event) {
 			let preventDefault = true;

package/src/sap/ui/webc/main/thirdparty/Switch.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/accept', 'sap/ui/webc/common/thirdparty/icons/decline', './Icon', './types/SwitchDesign', './generated/i18n/i18n-defaults', './generated/templates/SwitchTemplate.lit', './generated/themes/Switch.css'], function (UI5Element, litRender, Keys, Device, i18nBundle, accept, decline, Icon, SwitchDesign, i18nDefaults, SwitchTemplate_lit, Switch_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/icons/accept', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/icons/less', './Icon', './types/SwitchDesign', './generated/i18n/i18n-defaults', './generated/templates/SwitchTemplate.lit', './generated/themes/Switch.css'], function (UI5Element, litRender, Keys, Device, i18nBundle, AriaLabelHelper, accept, decline, less, Icon, SwitchDesign, i18nDefaults, SwitchTemplate_lit, Switch_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -25,6 +25,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			textOff: {
 				type: String,
 			},
+			 accessibleNameRef: {
+				type: String,
+				defaultValue: "",
+			},
 		},
 		events:  {
 			change: {},
@@ -43,9 +47,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get template() {
 			return SwitchTemplate_lit;
 		}
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
+		get sapNextIcon() {
+			return this.checked ? "accept" : "less";
 		}
 		_onclick(event) {
 			this.toggle();
@@ -73,6 +76,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get graphical() {
 			return this.design === SwitchDesign.Graphical;
 		}
+		get hasNoLabel() {
+			return !(this.graphical || this.textOn || this.textOff);
+		}
 		get _textOn() {
 			return this.graphical ? "" : this.textOn;
 		}
@@ -98,19 +104,22 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.disabled ? "true" : undefined;
 		}
 		get accessibilityOnText() {
-			return this._textOn || this.i18nBundle.getText(i18nDefaults.SWITCH_ON);
+			return this._textOn || Switch.i18nBundle.getText(i18nDefaults.SWITCH_ON);
 		}
 		get accessibilityOffText() {
-			return this._textOff || this.i18nBundle.getText(i18nDefaults.SWITCH_OFF);
+			return this._textOff || Switch.i18nBundle.getText(i18nDefaults.SWITCH_OFF);
 		}
 		get hiddenText() {
 			return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
 		}
+		get ariaLabelText() {
+			return AriaLabelHelper.getEffectiveAriaLabelText(this);
+		}
 		static get dependencies() {
 			return [Icon];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Switch.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	Switch.define();

package/src/sap/ui/webc/main/thirdparty/Tab.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/renderer/executeTemplate', './types/SemanticColor', './types/TabLayout', './TabContainer', './Icon', './CustomListItem', './generated/templates/TabTemplate.lit', './generated/templates/TabInStripTemplate.lit', './generated/templates/TabInOverflowTemplate.lit', './generated/themes/Tab.css', './generated/themes/TabInStrip.css', './generated/themes/TabInOverflow.css'], function (UI5Element, litRender, executeTemplate, SemanticColor, TabLayout, TabContainer, Icon, CustomListItem, TabTemplate_lit, TabInStripTemplate_lit, TabInOverflowTemplate_lit, Tab_css, TabInStrip_css, TabInOverflow_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/renderer/executeTemplate', './types/SemanticColor', './TabContainer', './Icon', './CustomListItem', './generated/templates/TabTemplate.lit', './generated/templates/TabInStripTemplate.lit', './generated/templates/TabInOverflowTemplate.lit', './generated/themes/Tab.css', './generated/themes/TabInStrip.css', './generated/themes/TabInOverflow.css'], function (UI5Element, litRender, executeTemplate, SemanticColor, TabContainer, Icon, CustomListItem, TabTemplate_lit, TabInStripTemplate_lit, TabInOverflowTemplate_lit, Tab_css, TabInStrip_css, TabInOverflow_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -30,9 +30,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: SemanticColor,
 				defaultValue: SemanticColor.Default,
 			},
-			stableDomRef: {
-				type: String,
-			},
 			selected: {
 				type: Boolean,
 			},
@@ -41,6 +38,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				defaultValue: "-1",
 				noAttribute: true,
 			},
+			_selected: {
+				type: Boolean,
+			},
 		},
 		events:  {
 		},
@@ -70,6 +70,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				CustomListItem,
 			];
 		}
+		get displayText() {
+			let text = this.text;
+			if (this._isInline && this.additionalText) {
+				text += ` (${this.additionalText})`;
+			}
+			return text;
+		}
 		get isSeparator() {
 			return false;
 		}
@@ -79,6 +86,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get overflowPresentation() {
 			return executeTemplate__default(this.constructor.overflowTemplate, this);
 		}
+		get stableDomRef() {
+			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+		}
+		getTabInStripDomRef() {
+			return this._getTabInStripDomRef;
+		}
 		getFocusDomRef() {
 			let focusedDomRef = super.getFocusDomRef();
 			if (this._getTabContainerHeaderItemCallback) {
@@ -99,10 +112,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.disabled || undefined;
 		}
 		get effectiveSelected() {
-			return this.selected || false;
+			return this.selected || this._selected;
 		}
 		get effectiveHidden() {
-			return !this.selected;
+			return !this.effectiveSelected;
 		}
 		get ariaLabelledBy() {
 			const labels = [];
@@ -117,17 +130,20 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			return labels.join(" ");
 		}
-		get headerClasses() {
+		get stripClasses() {
 			const classes = ["ui5-tab-strip-item"];
-			if (this.selected) {
+			if (this.effectiveSelected) {
 				classes.push("ui5-tab-strip-item--selected");
 			}
 			if (this.disabled) {
 				classes.push("ui5-tab-strip-item--disabled");
 			}
-			if (this.tabLayout === TabLayout.Inline) {
+			if (this._isInline) {
 				classes.push("ui5-tab-strip-item--inline");
 			}
+			if (this.additionalText) {
+				classes.push("ui5-tab-strip-item--withAddionalText");
+			}
 			if (!this.icon && !this._mixedMode) {
 				classes.push("ui5-tab-strip-item--textOnly");
 			}