@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-35e2c9666

package/dist/ProgressIndicator.js

@@ -0,0 +1,240 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+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 Icon from "./Icon.js";
+import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
+import {
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	VALUE_STATE_SUCCESS,
+	VALUE_STATE_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-progress-indicator",
+	properties: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
+		/**
+		 * Defines whether component is in disabled state.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+		/**
+		 * Defines whether the component value is shown.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hideValue: {
+			type: Boolean,
+		},
+		/**
+		 * Specifies the numerical value in percent for the length of the component.
+		 *
+		 * <b>Note:</b>
+		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
+		 * @type {Integer}
+		 * @defaultvalue 0
+		 * @public
+		 */
+		value: {
+			type: Integer,
+			defaultValue: 0,
+		},
+		/**
+		 * Specifies the text value to be displayed in the bar.
+		 *
+		 * <b>Note:</b>
+		 * <ul>
+		 * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+		 * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+		 * </ul>
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		displayValue: {
+			type: String,
+		},
+		/**
+		 * Defines the value state of the component.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>Error</code></li>
+		 * <li><code>Warning</code></li>
+		 * <li><code>Success</code></li>
+		 * <li><code>Information</code></li>
+		 * </ul>
+		 *
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 */
+		valueState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
+		//
+	},
+	events: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * Shows the progress of a process in a graphical way. To indicate the progress,
+ * the inside of the component is filled with a color.
+ *
+ * <h3>Responsive Behavior</h3>
+ * You can change the size of the Progress Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ProgressIndicator.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ProgressIndicator
+ * @extends UI5Element
+ * @tagname ui5-progress-indicator
+ * @public
+ * @since 1.0.0-rc.8
+ */
+class ProgressIndicator extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ProgressIndicatorCss;
+	}
+
+	static get template() {
+		return ProgressIndicatorTemplate;
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+
+	constructor() {
+		super();
+
+		this._previousValue = 0;
+		this._transitionDuration = 0;
+	}
+
+	onBeforeRendering() {
+		this._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20;
+		this._previousValue = this.validatedValue;
+	}
+
+	valueStateTextMappings() {
+		return {
+			"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),
+		};
+	}
+
+	valueStateIconMappings() {
+		return {
+			"Error": "status-negative",
+			"Warning": "status-critical",
+			"Success": "status-positive",
+			"Information": "hint",
+		};
+	}
+
+	get styles() {
+		return {
+			bar: {
+				"width": `${this.validatedValue}%`,
+				"transition-duration": this.shouldAnimate ? `${this._transitionDuration}ms` : "none",
+			},
+		};
+	}
+
+	get classes() {
+		return {
+			root: {
+				"ui5-progress-indicator-max-value": this.validatedValue === 100,
+				"ui5-progress-indicator-min-value": this.validatedValue === 0,
+			},
+		};
+	}
+
+	get validatedValue() {
+		if (this.value < 0) {
+			return 0;
+		}
+
+		if (this.value > 100) {
+			return 100;
+		}
+
+		return this.value;
+	}
+
+	get showValueInRemainingBar() {
+		return this.value <= 50;
+	}
+
+	get shouldAnimate() {
+		return getAnimationMode() !== AnimationMode.None;
+	}
+
+	get valueStateText() {
+		const percentValue = `${this.validatedValue}%`;
+		const valueText = this.valueStateTextMappings()[this.valueState];
+
+		return valueText ? `${percentValue} ${valueText}` : percentValue;
+	}
+
+	get showIcon() {
+		return this.valueState !== ValueState.None;
+	}
+
+	get valueStateIcon() {
+		return this.valueStateIconMappings()[this.valueState];
+	}
+
+	get _ariaDisabled() {
+		return this.disabled || undefined;
+	}
+
+	static async onDefine() {
+		ProgressIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+}
+
+ProgressIndicator.define();
+
+export default ProgressIndicator;

package/dist/RadioButton.js

@@ -1,10 +1,10 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import {
 	isSpace,
 	isEnter,
@@ -12,9 +12,10 @@ import {
 	isLeft,
 	isUp,
 	isRight,
-} from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Label from "./Label.js";
 import RadioButtonGroup from "./RadioButtonGroup.js";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
@@ -25,17 +26,22 @@ import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-de
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
 
+let isGlobalHandlerAttached = false;
+let activeRadio = null;
+
 /**
  * @public
  */
 const metadata = {
-	tag: "ui5-radiobutton",
-	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */  {
+	tag: "ui5-radio-button",
+	altTag: "ui5-radiobutton",
+	languageAware: true,
+	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is disabled.
+		 * Defines whether the component is disabled.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-radiobutton</code> is completely noninteractive.
+		 * <b>Note:</b> A disabled component is completely noninteractive.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -46,9 +52,9 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is read-only.
+		 * Defines whether the component is read-only.
 		 * <br><br>
-		 * <b>Note:</b> A read-only <code>ui5-radiobutton</code> is not editable,
+		 * <b>Note:</b> A read-only component is not editable,
 		 * but still provides visual feedback upon user interaction.
 		 *
 		 * @type {boolean}
@@ -60,24 +66,26 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-radiobutton</code> is selected or not.
+		 * Defines whether the component is checked or not.
 		 * <br><br>
 		 * <b>Note:</b> The property value can be changed with user interaction,
-		 * either by cliking/tapping on the <code>ui5-radiobutton</code>,
+		 * either by clicking/tapping on the component,
 		 * or by using the Space or Enter key.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		selected: {
+		checked: {
 			type: Boolean,
 		},
 
 		/**
-		 * Defines the text of the <code>ui5-radiobutton</code>.
+		 * Defines the text of the component.
 		 *
 		 * @type  {string}
+		 * @defaultvalue ""
 		 * @public
 		 */
 		text: {
@@ -85,14 +93,16 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-radiobutton</code>.
-		 * Available options are <code>Warning</code>, <code>Error</code>, and
-		 * <code>None</code> (by default).
+		 * Defines the value state of the component.
 		 * <br><br>
-		 * <b>Note:</b> Using the value states affects the visual appearance of
-		 * the <code>ui5-radiobutton</code>.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>Error</code></li>
+		 * <li><code>Warning</code></li>
+		 * </ul>
 		 *
-		 * @type {string}
+		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -102,22 +112,28 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the <code>ui5-radiobutton</code>.
+		 * Defines the name of the component.
 		 * Radio buttons with the same <code>name</code> will form a radio button group.
-		 * <br><b>Note:</b>
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
 		 * The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radio buttons in same group.
-		 * <br><b>Note:</b>
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
 		 * Only one radio button can be selected per group.
-		 * <br>
+		 *
+		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
+		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-radiobutton</code> so that it can be submitted as
+		 * will be created inside the component so that it can be submitted as
 		 * part of an HTML form.
 		 *
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		name: {
@@ -125,7 +141,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the form value of the <code>ui5-radiobutton</code>.
+		 * Defines the form value of the component.
 		 * When a form with a radio button group is submitted, the group's value
 		 * will be the value of the currently selected radio button.
 		 * <br>
@@ -133,7 +149,7 @@ const metadata = {
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * @type {string}
-		 * @defaultvalue: ""
+		 * @defaultvalue ""
 		 * @public
 		 */
 		value: {
@@ -141,27 +157,83 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space.
+		 * Defines whether the component text wraps when there is not enough space.
 		 * <br><br>
-		 * <b>Note:</b> By default, the text truncates when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
+
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
+			noAttribute: true,
+		},
+
+		/**
+		 * Defines the active state (pressed or not) of the component.
+		 * @private
+		 */
+		 active: {
 			type: Boolean,
 		},
 	},
+	slots: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
+		/**
+		 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
+		 * when <code>name</code> property is set.
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @private
+		 */
+		formSupport: {
+			type: HTMLElement,
+		},
+	},
 	events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-radiobutton</code> selected state changes.
+		 * Fired when the component checked state changes.
 		 *
 		 * @event
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		select: {},
+		change: {},
 	},
 };
 
@@ -170,17 +242,17 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-radibutton</code> component enables users to select a single option from a set of options.
- * When a <code>ui5-radiobutton</code> is selected by the user, the
- * <code>select</code> event is fired.
- * When a <code>ui5-radiobutton</code> that is within a group is selected, the one
+ * The <code>ui5-radio-button</code> component enables users to select a single option from a set of options.
+ * When a <code>ui5-radio-button</code> is selected by the user, the
+ * <code>change</code> event is fired.
+ * When a <code>ui5-radio-button</code> that is within a group is selected, the one
  * that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
  * <br>
- * <b>Note:</b> If <code>ui5-radiobutton</code> is not part of a group, it can be selected once, but can not be deselected back.
+ * <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.
  *
  * <h3>Keyboard Handling</h3>
  *
- * Once the <code>ui5-radiobutton</code> is on focus, it might be selected by pressing the Space and Enter keys.
+ * Once the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys.
  * <br>
  * The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
  * while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
@@ -195,14 +267,23 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RadioButton
  * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-radiobutton
+ * @tagname ui5-radio-button
  * @public
  */
 class RadioButton extends UI5Element {
 	constructor() {
 		super();
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._deactivate = () => {
+			if (activeRadio) {
+				activeRadio.active = false;
+			}
+		};
+
+		if (!isGlobalHandlerAttached) {
+			document.addEventListener("mouseup", this._deactivate);
+			isGlobalHandlerAttached = true;
+		}
 	}
 
 	static get metadata() {
@@ -221,11 +302,12 @@ class RadioButton extends UI5Element {
 		return radioButtonCss;
 	}
 
+	static get dependencies() {
+		return [Label];
+	}
+
 	static async onDefine() {
-		await Promise.all([
-			Label.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		RadioButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -237,6 +319,8 @@ class RadioButton extends UI5Element {
 	syncGroup() {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
+		const oldChecked = this._checked;
+		const currentChecked = this.checked;
 
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
@@ -252,15 +336,20 @@ class RadioButton extends UI5Element {
 			RadioButtonGroup.enforceSingleSelection(this, currentGroup);
 		}
 
+		if (this.name && currentChecked !== oldChecked) {
+			RadioButtonGroup.updateTabOrder(this.name);
+		}
+
 		this._name = this.name;
+		this._checked = this.checked;
 	}
 
 	_enableFormSupport() {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.selected;
-				nativeInput.value = element.selected ? element.value : "";
+				nativeInput.disabled = element.disabled || !element.checked;
+				nativeInput.value = element.checked ? element.value : "";
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -295,10 +384,12 @@ class RadioButton extends UI5Element {
 
 	_onkeydown(event) {
 		if (isSpace(event)) {
+			this.active = true;
 			return event.preventDefault();
 		}
 
 		if (isEnter(event)) {
+			this.active = true;
 			return this.toggle();
 		}
 
@@ -315,6 +406,21 @@ class RadioButton extends UI5Element {
 		if (isSpace(event)) {
 			this.toggle();
 		}
+
+		this.active = false;
+	}
+
+	_onmousedown() {
+		this.active = true;
+		activeRadio = this; // eslint-disable-line
+	}
+
+	_onmouseup() {
+		this.active = false;
+	}
+
+	_onfocusout() {
+		this.active = false;
 	}
 
 	toggle() {
@@ -323,8 +429,8 @@ class RadioButton extends UI5Element {
 		}
 
 		if (!this.name) {
-			this.selected = !this.selected;
-			this.fireEvent("select");
+			this.checked = !this.checked;
+			this.fireEvent("change");
 			return this;
 		}
 
@@ -333,20 +439,19 @@ class RadioButton extends UI5Element {
 	}
 
 	canToggle() {
-		return !(this.disabled || this.readonly || this.selected);
+		return !(this.disabled || this.readonly || this.checked);
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
 	get classes() {
 		return {
+			main: {},
 			inner: {
 				"ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			},
@@ -361,8 +466,8 @@ class RadioButton extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+	get ariaLabelText() {
+		return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {
@@ -385,7 +490,7 @@ class RadioButton extends UI5Element {
 		}
 
 		if (this.name) {
-			return this.selected ? "0" : "-1";
+			return this._tabIndex;
 		}
 
 		return tabindex || "0";
@@ -394,10 +499,6 @@ class RadioButton extends UI5Element {
 	get strokeWidth() {
 		return this.valueState === "None" ? "1" : "2";
 	}
-
-	get rtl() {
-		return getRTL() ? "rtl" : undefined;
-	}
 }
 
 RadioButton.define();