@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/ProgressIndicator.js

@@ -48,7 +48,7 @@ const metadata = {
 		 *
 		 * <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}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -83,7 +83,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -117,7 +117,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ProgressIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-progress-indicator
  * @public
  * @since 1.0.0-rc.8

package/src/RadioButton.hbs

@@ -1,12 +1,10 @@
 <div class="ui5-radio-root {{classes.main}}"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
+	aria-label="{{ariaLabelText}}"
 	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
@@ -20,7 +18,7 @@
 			<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' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{ariaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
@@ -30,4 +28,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RadioButton.js

@@ -39,7 +39,6 @@ let activeRadio = null;
  */
 const metadata = {
 	tag: "ui5-radio-button",
-	altTag: "ui5-radiobutton",
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
@@ -70,6 +69,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.9.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the component is checked or not.
 		 * <br><br>
@@ -79,6 +90,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -109,7 +122,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,7 +185,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -182,12 +195,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.16
+		 * @public
+		 * @since 1.6.0
 		 */
 		accessibleName: {
 			type: String,
@@ -323,12 +336,20 @@ class RadioButton extends UI5Element {
 		this._enableFormSupport();
 	}
 
-	syncGroup() {
+	onExitDOM() {
+		this.syncGroup(true);
+	}
+
+	syncGroup(forceRemove) {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
 		const oldChecked = this._checked;
 		const currentChecked = this.checked;
 
+		if (forceRemove) {
+			RadioButtonGroup.removeFromGroup(this, oldGroup);
+		}
+
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
 				// remove the control from the previous group
@@ -355,8 +376,9 @@ class RadioButton extends UI5Element {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? element.value : "";
+				nativeInput.value = element.value;
+				nativeInput.type = "radio";
+				nativeInput.checked = element.checked;
 			});
 		} 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
@@ -400,11 +422,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}
@@ -467,10 +491,6 @@ class RadioButton extends UI5Element {
 		};
 	}
 
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}

package/src/RangeSlider.hbs

@@ -17,7 +17,7 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_id}}-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
@@ -34,10 +34,10 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_id}}-startHandleDesc"
+		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -56,10 +56,10 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_id}}-endHandleDesc"
+		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">

package/src/RangeSlider.js

@@ -16,6 +16,9 @@ import {
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
+// Styles
+import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
+
 /**
  * @public
  */
@@ -28,8 +31,10 @@ const metadata = {
 		 * Defines start point of a selection - position of a first handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		startValue: {
@@ -40,14 +45,20 @@ const metadata = {
 		 * Defines end point of a selection - position of a second handle on the slider.
 		 * <br><br>
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 100
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		endValue: {
 			type: Float,
 			defaultValue: 100,
 		},
+
+		rangePressed: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -104,7 +115,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RangeSlider
- * @extends SliderBase
+ * @extends sap.ui.webcomponents.main.SliderBase
  * @tagname ui5-range-slider
  * @since 1.0.0-rc.11
  * @public
@@ -129,6 +140,10 @@ class RangeSlider extends SliderBase {
 		return [Icon];
 	}
 
+	static get styles() {
+		return [SliderBase.styles, rangeSliderStyles];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -172,7 +187,7 @@ class RangeSlider extends SliderBase {
 	/**
 	 * Check if the previously saved state is outdated. That would mean
 	 * either it is the initial rendering or that a property has been changed
-	 * programatically - because the previous state is always updated in
+	 * programmatically - because the previous state is always updated in
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.
@@ -356,6 +371,8 @@ class RangeSlider extends SliderBase {
 		// Determine the rest of the needed details from the start of the interaction.
 		this._saveInteractionStartData(event, newValue);
 
+		this.rangePressed = this._isPressInCurrentRange;
+
 		// Do not yet update the RangeSlider if press is in range or over a handle.
 		if (this._isPressInCurrentRange || this._handeIsPressed) {
 			this._handeIsPressed = false;
@@ -442,10 +459,6 @@ class RangeSlider extends SliderBase {
 	}
 
 	_handleUp() {
-		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
-			this.fireEvent("change");
-		}
-
 		this._swapValues();
 		this._setAffectedValueByFocusedElement();
 		this._setAffectedValue(null);
@@ -455,6 +468,12 @@ class RangeSlider extends SliderBase {
 		this._setIsPressInCurrentRange(false);
 
 		this.handleUpBase();
+
+		this.rangePressed = false;
+
+		if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
+			this.fireEvent("change");
+		}
 	}
 
 	/**
@@ -723,6 +742,24 @@ class RangeSlider extends SliderBase {
 		return this._reversedValues;
 	}
 
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [false, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			const isBiggerThanStartValue = this._effectiveMin + (i * this.step) >= this.startValue;
+			const isBiggerThanEndValue = this._effectiveMin + (i * this.step) <= this.endValue;
+
+			arr.push(isBiggerThanStartValue && isBiggerThanEndValue);
+		}
+
+		return arr;
+	}
+
 	get _startHandle() {
 		return this.shadowRoot.querySelector(".ui5-slider-handle--start");
 	}
@@ -735,6 +772,18 @@ class RangeSlider extends SliderBase {
 		return this.shadowRoot.querySelector(".ui5-slider-progress");
 	}
 
+	get _ariaLabelledByStartHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByEndHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByProgressBarRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
+
 	get styles() {
 		return {
 			progress: {

package/src/RatingIndicator.hbs

@@ -16,20 +16,34 @@
 	title="{{tooltip}}"
 	aria-label="{{accessibleName}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
+	<ul class="ui5-rating-indicator-list"
 		aria-hidden="true"
-	>
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>

package/src/RatingIndicator.js

@@ -18,6 +18,9 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -39,7 +42,7 @@ const metadata = {
 		 * <li>1.3 - 1.7 -> 1.5</li>
 		 * <li>1.8 - 1.9 -> 2</li>
 		 * <ul>
-		 * @type {Float}
+		 * @type {sap.ui.webcomponents.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -50,7 +53,7 @@ const metadata = {
 
 		/**
 		 * The number of displayed rating symbols.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 5
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -88,7 +91,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: undefined
@@ -166,7 +169,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.RatingIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8
@@ -192,6 +195,10 @@ class RatingIndicator extends UI5Element {
 		RatingIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 
@@ -231,7 +238,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

package/src/ResponsivePopover.js

@@ -74,7 +74,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ResponsivePopover
- * @extends Popover
+ * @extends sap.ui.webcomponents.main.Popover
  * @tagname ui5-responsive-popover
  * @since 1.0.0-rc.6
  * @public
@@ -167,6 +167,10 @@ class ResponsivePopover extends Popover {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/src/SegmentedButton.hbs

@@ -5,7 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}

package/src/SegmentedButton.js

@@ -4,7 +4,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isSpace,
 	isEnter,
@@ -23,11 +22,10 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
  */
 const metadata = {
 	tag: "ui5-segmented-button",
-	altTag: "ui5-segmentedbutton",
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -175,15 +173,7 @@ class SegmentedButton extends UI5Element {
 
 		this.widths = this.items.map(item => {
 			// +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px
-			let width = item.offsetWidth + 1;
-
-			if (isIE()) {
-				// in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the
-				// longest item is in the middle, it truncates
-				width += 1;
-			}
-
-			return width;
+			return item.offsetWidth + 1;
 		});
 	}
 
@@ -282,7 +272,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISegmentedButtonItem }
+	 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem}
 	 * @public
 	 */
 	get selectedItem() {

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}

package/src/SegmentedButtonItem.js

@@ -10,11 +10,11 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
  */
 const metadata = {
 	tag: "ui5-segmented-button-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -70,7 +70,7 @@ const metadata = {
 /**
  * @class
  *
- *<h3 class="comment-api-title">Overview</h3>
+ * <h3 class="comment-api-title">Overview</h3>
  *
  * Users can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>.
  * <br><br>
@@ -86,7 +86,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends ToggleButton
+ * @extends sap.ui.webcomponents.main.ToggleButton
  * @tagname ui5-segmented-button-item
  * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
  * @public

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
 	class="ui5-select-root ui5-input-focusable-element"
-	dir="{{effectiveDir}}"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -36,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}