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

package/src/Option.ts

@@ -0,0 +1,119 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { IOption } from "./Select.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Option
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-option
+ * @implements sap.ui.webc.main.ISelectOption
+ * @public
+ */
+@customElement("ui5-option")
+class Option extends UI5Element implements IOption {
+	/**
+	 * Defines the selected state of the component.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.Option.selected
+	 * @public
+	 */
+	@property({ type: Boolean })
+	selected!: boolean;
+
+	/**
+	 * Defines whether the component is in disabled state.
+	 * <br><br>
+	 * <b>Note:</b> A disabled component is hidden.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @name sap.ui.webc.main.Option.disabled
+	 * @public
+	 * @since 1.0.0-rc.12
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Defines the tooltip of the component.
+	 * @type {string}
+	 * @defaultvalue ""
+	 * @private
+	 * @since 1.1.0
+	 */
+	@property()
+	title!: string;
+
+	/**
+	 * Defines the <code>icon</code> source URI.
+	 * <br><br>
+	 * <b>Note:</b>
+	 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
+	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Option.icon
+	 * @public
+	 */
+	@property({ defaultValue: null })
+	icon?: string;
+
+	/**
+	 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
+	 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Option.value
+	 * @public
+	 */
+	@property()
+	value!: string;
+
+	/**
+	 * Defines the additional text displayed at the end of the option element.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Option.additionalText
+	 * @public
+	 * @since 1.3.0
+	 */
+	@property()
+	additionalText!: string;
+
+	/**
+	 * Defines the focused state of the component.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @since 1.0.0-rc.13
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_focused!: boolean;
+
+	/**
+	 * Defines the text of the component.
+	 * <br><br>
+	 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+	 *
+	 * @type {Node[]}
+	 * @name sap.ui.webc.main.Option.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+}
+
+Option.define();
+
+export default Option;

package/src/Panel.ts

@@ -13,7 +13,6 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.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 "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
@@ -21,7 +20,6 @@ import TitleLevel from "./types/TitleLevel.js";
 import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
 
-// @ts-ignore
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -362,7 +360,7 @@ class Panel extends UI5Element {
 	}
 
 	get toggleButtonTitle() {
-		return Panel.i18nBundle.getText(PANEL_ICON as I18nText);
+		return Panel.i18nBundle.getText(PANEL_ICON);
 	}
 
 	get expanded() {

package/src/Popover.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
@@ -291,7 +292,7 @@ class Popover extends Popup {
 		super();
 	}
 
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return [browserScrollbarCSS, PopupsCommonCss, PopoverCss];
 	}
 
@@ -324,8 +325,8 @@ class Popover extends Popup {
 		}
 	}
 
-	isOpenerClicked(event: MouseEvent) {
-		const target = event.target as HTMLElement;
+	isOpenerClicked(e: MouseEvent) {
+		const target = e.target as HTMLElement;
 		if (target === this._opener) {
 			return true;
 		}
@@ -336,16 +337,18 @@ class Popover extends Popup {
 			return true;
 		}
 
-		return event.composedPath().indexOf(this._opener as EventTarget) > -1;
+		return e.composedPath().indexOf(this._opener as EventTarget) > -1;
 	}
 
 	/**
 	 * Shows the popover.
 	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popover
+	 * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
 	 * @public
 	 * @async
+	 * @method
 	 * @name sap.ui.webc.main.Popover#showAt
+	 * @async
 	 * @returns {Promise} Resolved when the popover is open
 	 */
 	async showAt(opener: HTMLElement, preventInitialFocus = false) {
@@ -802,10 +805,6 @@ class Popover extends Popup {
 		return undefined;
 	}
 
-	get _ariaModal() {
-		return "true";
-	}
-
 	get styles() {
 		return {
 			...super.styles,
@@ -830,7 +829,7 @@ class Popover extends Popup {
 	 * Hook for descendants to hide header.
 	 */
 	get _displayHeader() {
-		return this.header.length || this.headerText;
+		return !!(this.header.length || this.headerText);
 	}
 
 	/**

package/src/Popup.ts

@@ -16,6 +16,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
+import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
 import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 
 // Styles
@@ -33,12 +34,12 @@ createBlockingStyle();
 
 const pageScrollingBlockers = new Set<Popup>();
 
-type ScrollEventDetail = {
+type PopupScrollEventDetail = {
 	scrollTop: number;
 	targetRef: HTMLElement;
 }
 
-type BeforeCloseEventDetail = {
+type PopupBeforeCloseEventDetail = {
 	escPressed: boolean;
 }
 
@@ -188,6 +189,22 @@ abstract class Popup extends UI5Element {
 	@property({ defaultValue: "" })
 	accessibleNameRef!: string;
 
+	/**
+	 * Allows setting a custom role. Available options are:
+	 * <ul>
+	 * <li><code>Dialog</code></li>
+	 * <li><code>None</code></li>
+	 * <li><code>AlertDialog</code></li>
+	 * </ul>
+	 * @type {sap.ui.webc.main.types.PopupAccessibleRole}
+	 * @name sap.ui.webc.main.Popup.prototype.accessibleRole
+	 * @defaultvalue "Dialog"
+	 * @public
+	 * @since 1.10.0
+	 */
+	@property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+	accessibleRole!: PopupAccessibleRole;
+
 	/**
 	 * Defines the current media query size.
 	 *
@@ -320,7 +337,7 @@ abstract class Popup extends UI5Element {
 	}
 
 	_scroll(e: Event) {
-		this.fireEvent<ScrollEventDetail>("scroll", {
+		this.fireEvent<PopupScrollEventDetail>("scroll", {
 			scrollTop: (e.target as HTMLElement).scrollTop,
 			targetRef: e.target as HTMLElement,
 		});
@@ -405,6 +422,7 @@ abstract class Popup extends UI5Element {
 	 * Focuses the element denoted by <code>initialFocus</code>, if provided,
 	 * or the first focusable element otherwise.
 	 * @public
+	 * @method
 	 * @name sap.ui.webc.main.Popup#applyFocus
 	 * @async
 	 * @returns {Promise} Promise that resolves when the focus is applied
@@ -428,6 +446,7 @@ abstract class Popup extends UI5Element {
 	/**
 	 * Tells if the component is opened
 	 * @public
+	 * @method
 	 * @name sap.ui.webc.main.Popup#isOpen
 	 * @returns {boolean}
 	 */
@@ -485,8 +504,9 @@ abstract class Popup extends UI5Element {
 	}
 
 	/**
-	 * Hides the block layer (for modal popups only)
+	 * Closes the popup.
 	 * @public
+	 * @method
 	 * @name sap.ui.webc.main.Popup#close
 	 * @returns {void}
 	 */
@@ -495,7 +515,7 @@ abstract class Popup extends UI5Element {
 			return;
 		}
 
-		const prevented = !this.fireEvent<BeforeCloseEventDetail>("before-close", { escPressed }, true, false);
+		const prevented = !this.fireEvent<PopupBeforeCloseEventDetail>("before-close", { escPressed }, true, false);
 		if (prevented) {
 			return;
 		}
@@ -584,18 +604,9 @@ abstract class Popup extends UI5Element {
 	 */
 	abstract get _ariaLabelledBy(): string | undefined
 
-	/**
-	 * Return the value for aria-modal for this popup
-	 *
-	 * @protected
-	 * @abstract
-	 * @returns {string}
-	 */
-	abstract get _ariaModal(): string
-
 	/**
 	 * Ensures ariaLabel is never null or empty string
-	 * @returns {string|undefined}
+	 * @returns {string | undefined}
 	 * @protected
 	 */
 	get _ariaLabel() {
@@ -606,8 +617,12 @@ abstract class Popup extends UI5Element {
 		return this.shadowRoot!.querySelector(".ui5-popup-root")!;
 	}
 
-	get _role() {
-		return "dialog";
+	get _role(): string | undefined {
+		return (this.accessibleRole === PopupAccessibleRole.None) ? undefined : this.accessibleRole.toLowerCase();
+	}
+
+	get _ariaModal(): string | undefined {
+		return this.accessibleRole === PopupAccessibleRole.None ? undefined : "true";
 	}
 
 	get contentDOM(): HTMLElement {
@@ -640,6 +655,6 @@ abstract class Popup extends UI5Element {
 export default Popup;
 
 export type {
-	ScrollEventDetail,
-	BeforeCloseEventDetail,
+	PopupScrollEventDetail,
+	PopupBeforeCloseEventDetail,
 };

package/src/ProgressIndicator.ts

@@ -8,14 +8,12 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.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 Icon from "./Icon.js";
 import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_INFORMATION,
-// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -153,10 +151,10 @@ class ProgressIndicator extends UI5Element {
 
 	valueStateTextMappings(): Record<string, string> {
 		return {
-			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR as I18nText),
-			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING as I18nText),
-			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS as I18nText),
-			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION as I18nText),
+			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 

package/src/RadioButton.hbs

@@ -1,10 +1,10 @@
-<div class="ui5-radio-root {{classes.main}}"
+<div class="ui5-radio-root"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-describedby="{{ariaDescribedBy}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-describedby="{{effectiveAriaDescribedBy}}"
 	aria-label="{{ariaLabelText}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
@@ -12,13 +12,12 @@
 	@mouseup="{{_onmouseup}}"
 	@focusout="{{_onfocusout}}"
 >
-
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
-		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{ariaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}