@ui5/webcomponents 0.0.0-49cef2d02 → 0.0.0-4a28ecb24

package/src/{RadioButtonGroup.js → RadioButtonGroup.ts}

@@ -1,25 +1,32 @@
+import type RadioButton from "./RadioButton.js";
+
 class RadioButtonGroup {
-	static hasGroup(groupName) {
+	static _groups: Map<string, Array<RadioButton>>;
+	static _checkedRadios: Map<string, RadioButton | null>;
+
+	static hasGroup(groupName: string) {
 		return this.groups.has(groupName);
 	}
 
-	static getGroup(groupName) {
+	static getGroup(groupName: string) {
 		return this.groups.get(groupName);
 	}
 
-	static getCheckedRadioFromGroup(groupName) {
+	static getCheckedRadioFromGroup(groupName: string) {
 		return this.checkedRadios.get(groupName);
 	}
 
-	static removeGroup(groupName) {
+	static removeGroup(groupName: string) {
 		this.checkedRadios.delete(groupName);
 		return this.groups.delete(groupName);
 	}
 
-	static addToGroup(radioBtn, groupName) {
+	static addToGroup(radioBtn: RadioButton, groupName: string) {
 		if (this.hasGroup(groupName)) {
 			this.enforceSingleSelection(radioBtn, groupName);
-			this.getGroup(groupName).push(radioBtn);
+			if (this.getGroup(groupName)) {
+				this.getGroup(groupName)!.push(radioBtn);
+			}
 		} else {
 			this.createGroup(radioBtn, groupName);
 		}
@@ -27,12 +34,13 @@ class RadioButtonGroup {
 		this.updateTabOrder(groupName);
 	}
 
-	static removeFromGroup(radioBtn, groupName) {
-		if (!this.hasGroup(groupName)) {
+	static removeFromGroup(radioBtn: RadioButton, groupName: string) {
+		const group = this.getGroup(groupName);
+
+		if (!group) {
 			return;
 		}
 
-		const group = this.getGroup(groupName);
 		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
 		// Remove the radio button from the given group
@@ -54,7 +62,7 @@ class RadioButtonGroup {
 		this.updateTabOrder(groupName);
 	}
 
-	static createGroup(radioBtn, groupName) {
+	static createGroup(radioBtn: RadioButton, groupName: string) {
 		if (radioBtn.checked) {
 			this.checkedRadios.set(groupName, radioBtn);
 		}
@@ -62,9 +70,13 @@ class RadioButtonGroup {
 		this.groups.set(groupName, [radioBtn]);
 	}
 
-	static selectNextItem(item, groupName) {
-		const group = this.getGroup(groupName),
-			groupLength = group.length,
+	static selectNextItem(item: RadioButton, groupName: string) {
+		const group = this.getGroup(groupName);
+		if (!group) {
+			return;
+		}
+
+		const groupLength = group.length,
 			currentItemPosition = group.indexOf(item);
 
 		if (groupLength <= 1) {
@@ -72,16 +84,20 @@ class RadioButtonGroup {
 		}
 
 		const nextItemToSelect = this._nextSelectable(currentItemPosition, group);
+		if (!nextItemToSelect) {
+			return;
+		}
 
 		this.updateSelectionInGroup(nextItemToSelect, groupName);
 	}
 
-	static updateTabOrder(groupName) {
-		if (!this.hasGroup(groupName)) {
+	static updateTabOrder(groupName: string) {
+		const group = this.getGroup(groupName);
+
+		if (!group) {
 			return;
 		}
 
-		const group = this.getGroup(groupName);
 		const hasCheckedRadio = group.some(radioBtn => radioBtn.checked);
 
 		group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => {
@@ -93,9 +109,14 @@ class RadioButtonGroup {
 		});
 	}
 
-	static selectPreviousItem(item, groupName) {
-		const group = this.getGroup(groupName),
-			groupLength = group.length,
+	static selectPreviousItem(item: RadioButton, groupName: string) {
+		const group = this.getGroup(groupName);
+
+		if (!group) {
+			return;
+		}
+
+		const groupLength = group.length,
 			currentItemPosition = group.indexOf(item);
 
 		if (groupLength <= 1) {
@@ -103,39 +124,49 @@ class RadioButtonGroup {
 		}
 
 		const previousItemToSelect = this._previousSelectable(currentItemPosition, group);
+		if (!previousItemToSelect) {
+			return;
+		}
 
 		this.updateSelectionInGroup(previousItemToSelect, groupName);
 	}
 
-	static selectItem(item, groupName) {
+	static selectItem(item: RadioButton, groupName: string) {
 		this.updateSelectionInGroup(item, groupName);
 		this.updateTabOrder(groupName);
 	}
 
-	static updateSelectionInGroup(radioBtnToSelect, groupName) {
+	static updateSelectionInGroup(radioBtnToSelect: RadioButton, groupName: string) {
 		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
-		this._deselectRadio(checkedRadio);
+		if (checkedRadio) {
+			this._deselectRadio(checkedRadio);
+		}
+
 		this._selectRadio(radioBtnToSelect);
 		this.checkedRadios.set(groupName, radioBtnToSelect);
 	}
 
-	static _deselectRadio(radioBtn) {
+	static _deselectRadio(radioBtn: RadioButton) {
 		if (radioBtn) {
 			radioBtn.checked = false;
 		}
 	}
 
-	static _selectRadio(radioBtn) {
+	static _selectRadio(radioBtn: RadioButton) {
 		if (radioBtn) {
-			radioBtn.focus({ focusVisible: true });
+			radioBtn.focus({ focusVisible: true } as FocusOptions);
 			radioBtn.checked = true;
 			radioBtn._checked = true;
 			radioBtn.fireEvent("change");
 		}
 	}
 
-	static _nextSelectable(pos, group) {
+	static _nextSelectable(pos: number, group: RadioButton[]): RadioButton | null {
+		if (!group) {
+			return null;
+		}
+
 		const groupLength = group.length;
 		let nextRadioToSelect = null;
 
@@ -153,7 +184,7 @@ class RadioButtonGroup {
 		return nextRadioToSelect;
 	}
 
-	static _previousSelectable(pos, group) {
+	static _previousSelectable(pos: number, group: RadioButton[]): RadioButton | null {
 		const groupLength = group.length;
 		let previousRadioToSelect = null;
 		if (pos === 0) {
@@ -170,7 +201,7 @@ class RadioButtonGroup {
 		return previousRadioToSelect;
 	}
 
-	static enforceSingleSelection(radioBtn, groupName) {
+	static enforceSingleSelection(radioBtn: RadioButton, groupName: string) {
 		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
 		if (radioBtn.checked) {

package/src/RangeSlider.ts

@@ -4,7 +4,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import {
 	isEscape,
@@ -20,7 +19,6 @@ import {
 	RANGE_SLIDER_ARIA_DESCRIPTION,
 	RANGE_SLIDER_START_HANDLE_DESCRIPTION,
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
-	// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -187,7 +185,7 @@ class RangeSlider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return RangeSlider.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION as I18nText);
+		return RangeSlider.i18nBundle.getText(RANGE_SLIDER_ARIA_DESCRIPTION);
 	}
 
 	get _ariaHandlesText() {
@@ -196,11 +194,11 @@ class RangeSlider extends SliderBase {
 		const ariaHandlesText: AriaHandlesText = {};
 
 		if ((isRTL && !isReversed) || (!isRTL && isReversed)) {
-			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION as I18nText);
-			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION as I18nText);
+			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
+			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
 		} else {
-			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION as I18nText);
-			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION as I18nText);
+			ariaHandlesText.startHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_START_HANDLE_DESCRIPTION);
+			ariaHandlesText.endHandleText = RangeSlider.i18nBundle.getText(RANGE_SLIDER_END_HANDLE_DESCRIPTION);
 		}
 
 		return ariaHandlesText;

package/src/ResponsivePopover.hbs

@@ -2,6 +2,7 @@
 	<ui5-dialog
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
+		accessible-role={{accessibleRole}}
 		stretch
 		_disable-initial-focus
 		@ui5-before-open="{{_beforeDialogOpen}}"

package/src/{ResponsivePopover.js → ResponsivePopover.ts}

@@ -1,8 +1,15 @@
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+
 import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
+
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
+import type { PopupBeforeCloseEventDetail } from "./Popup.js";
 import Popover from "./Popover.js";
 import Dialog from "./Dialog.js";
 import Button from "./Button.js";
@@ -12,43 +19,7 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 // Styles
 import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-responsive-popover",
-	properties: /** @lends sap.ui.webc.main.ResponsivePopover.prototype */ {
-		/**
-		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
-		 * By default both the header and footer would be displayed.
-		 * @private
-		 */
-		contentOnlyOnDesktop: {
-			type: Boolean,
-		},
-
-		/**
-		 * Used internaly for controls which must not have header.
-		 * @private
-		 */
-		_hideHeader: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether a close button will be rendered in the header of the component
-		 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
-		 *
-		 * @private
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.16
-		 */
-		_hideCloseButton: {
-			type: Boolean,
-		},
-	},
-};
+type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
 
 /**
  * @class
@@ -79,16 +50,42 @@ const metadata = {
  * @since 1.0.0-rc.6
  * @public
  */
+@customElement("ui5-responsive-popover")
 class ResponsivePopover extends Popover {
+	/**
+	 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
+	 * By default both the header and footer would be displayed.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	contentOnlyOnDesktop!: boolean;
+
+	/**
+	 * Used internaly for controls which must not have header.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_hideHeader!: boolean;
+
+	/**
+	 * Defines whether a close button will be rendered in the header of the component
+	 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
+	 *
+	 * @private
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @since 1.0.0-rc.16
+	 */
+	@property({ type: Boolean })
+	_hideCloseButton!: boolean;
+
+	static i18nBundle: I18nBundle;
+
 	constructor() {
 		super();
 	}
 
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return [Popover.styles, ResponsivePopoverCss];
 	}
 
@@ -119,17 +116,24 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Shows popover on desktop and dialog on mobile.
 	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @param {boolean} preventInitialFocus Prevents applying the focus inside the popup
+	 * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup
 	 * @public
 	 * @async
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#showAt
 	 * @returns {Promise} Resolves when the responsive popover is open
 	 */
-	async showAt(opener, preventInitialFocus = false) {
+	async showAt(opener: HTMLElement, preventInitialFocus = false) {
 		if (!isPhone()) {
 			await super.showAt(opener, preventInitialFocus);
 		} else {
 			this.style.display = "contents";
-			this.style.zIndex = getNextZIndex();
+			const nextZIndex = getNextZIndex();
+			if (!nextZIndex) {
+				return;
+			}
+
+			this.style.zIndex = nextZIndex.toString();
 			await this._dialog.show(preventInitialFocus);
 		}
 	}
@@ -137,6 +141,9 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Closes the popover/dialog.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#close
+	 * @returns {void}
 	 */
 	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
 		if (!isPhone()) {
@@ -146,7 +153,7 @@ class ResponsivePopover extends Popover {
 		}
 	}
 
-	toggle(opener) {
+	toggle(opener: HTMLElement) {
 		if (this.isOpen()) {
 			return this.close();
 		}
@@ -155,8 +162,10 @@ class ResponsivePopover extends Popover {
 	}
 
 	/**
-	 * Tells if the responsive popover is open
+	 * Tells if the responsive popover is open.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#isOpen
 	 * @returns {boolean}
 	 */
 	isOpen() {
@@ -164,11 +173,11 @@ class ResponsivePopover extends Popover {
 	}
 
 	get _dialog() {
-		return this.shadowRoot.querySelector("[ui5-dialog]");
+		return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
 	}
 
 	get contentDOM() {
-		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+		return isPhone() ? this._dialog.contentDOM : super.contentDOM;
 	}
 
 	get _isPhone() {
@@ -176,33 +185,33 @@ class ResponsivePopover extends Popover {
 	}
 
 	get _displayHeader() {
-		return (this._isPhone || !this.contentOnlyOnDesktop) && super._displayHeader;
+		return (isPhone() || !this.contentOnlyOnDesktop) && super._displayHeader;
 	}
 
 	get _displayFooter() {
-		return this._isPhone || !this.contentOnlyOnDesktop;
+		return isPhone() || !this.contentOnlyOnDesktop;
 	}
 
 	get _closeDialogAriaLabel() {
 		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 	}
 
-	_beforeDialogOpen(event) {
+	_beforeDialogOpen(e: CustomEvent<PopupBeforeCloseEventDetail>) {
 		this.open = true;
 		this.opened = true;
-		this._propagateDialogEvent(event);
+		this._propagateDialogEvent(e);
 	}
 
-	_afterDialogClose(event) {
+	_afterDialogClose(e: CustomEvent) {
 		this.open = false;
 		this.opened = false;
-		this._propagateDialogEvent(event);
+		this._propagateDialogEvent(e);
 	}
 
-	_propagateDialogEvent(event) {
-		const type = event.type.replace("ui5-", "");
+	_propagateDialogEvent(e: CustomEvent) {
+		const type = e.type.replace("ui5-", "");
 
-		this.fireEvent(type, event.detail);
+		this.fireEvent(type, e.detail);
 	}
 
 	get isModal() {
@@ -221,3 +230,6 @@ class ResponsivePopover extends Popover {
 ResponsivePopover.define();
 
 export default ResponsivePopover;
+export type {
+	ResponsivePopoverBeforeCloseEventDetail,
+};

package/src/SegmentedButton.js

@@ -93,7 +93,7 @@ const metadata = {
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-segmented-button
  * @since 1.0.0-rc.6
- * @appenddocs SegmentedButtonItem
+ * @appenddocs sap.ui.webc.main.SegmentedButtonItem
  * @public
  */
 class SegmentedButton extends UI5Element {
@@ -189,7 +189,7 @@ class SegmentedButton extends UI5Element {
 	}
 
 	_selectItem(event) {
-		const isTargetSegmentedButtonItem = event.target.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = event.target.hasAttribute("ui5-segmented-button-item");
 
 		if (event.target.disabled || event.target === this.getDomRef() || !isTargetSegmentedButtonItem) {
 			return;
@@ -233,7 +233,7 @@ class SegmentedButton extends UI5Element {
 
 	_onmousedown(event) {
 		const eventTarget = event.target;
-		const isTargetSegmentedButtonItem = eventTarget.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = eventTarget.hasAttribute("ui5-segmented-button-item");
 
 		if (isTargetSegmentedButtonItem) {
 			eventTarget.focus();

package/src/SegmentedButtonItem.js

@@ -87,6 +87,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webc.main.SegmentedButtonItem
  * @extends sap.ui.webc.main.ToggleButton
+ * @abstract
  * @tagname ui5-segmented-button-item
  * @implements sap.ui.webc.main.ISegmentedButtonItem
  * @public

package/src/Select.hbs

@@ -12,7 +12,7 @@
 	{{/if}}
 	<div class="ui5-select-label-root"
 		data-sap-focus-ref
-		tabindex="{{tabIndex}}"
+		tabindex="{{_effectiveTabIndex}}"
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-label="{{ariaLabelText}}"