@ui5/webcomponents 0.0.0-e0658a650 → 0.0.0-e55c2cec6

package/src/RatingIndicator.js

@@ -31,7 +31,7 @@ import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
 const metadata = {
 	tag: "ui5-rating-indicator",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	properties: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 
 		/**
 		 * The indicated value of the rating.
@@ -42,7 +42,7 @@ const metadata = {
 		 * <li>1.3 - 1.7 -> 1.5</li>
 		 * <li>1.8 - 1.9 -> 2</li>
 		 * <ul>
-		 * @type {sap.ui.webcomponents.base.types.Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 
 		/**
 		 * The number of displayed rating symbols.
-		 * @type {sap.ui.webcomponents.base.types.Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 5
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -118,10 +118,10 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	slots: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 		//
 	},
-	events: /** @lends sap.ui.webcomponents.main.RatingIndicator.prototype */ {
+	events: /** @lends sap.ui.webc.main.RatingIndicator.prototype */ {
 
 		/**
 		 * The event is fired when the value changes.
@@ -168,8 +168,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.RatingIndicator
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.RatingIndicator
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-rating-indicator
  * @public
  * @since 1.0.0-rc.8

package/src/ResponsivePopover.js

@@ -17,7 +17,7 @@ import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
  */
 const metadata = {
 	tag: "ui5-responsive-popover",
-	properties: /** @lends sap.ui.webcomponents.main.ResponsivePopover.prototype */ {
+	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.
@@ -73,8 +73,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ResponsivePopover
- * @extends sap.ui.webcomponents.main.Popover
+ * @alias sap.ui.webc.main.ResponsivePopover
+ * @extends sap.ui.webc.main.Popover
  * @tagname ui5-responsive-popover
  * @since 1.0.0-rc.6
  * @public
@@ -160,7 +160,7 @@ class ResponsivePopover extends Popover {
 	 * @returns {boolean}
 	 */
 	isOpen() {
-		return isPhone() ? this._dialog.isOpen() : super.isOpen();
+		return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
 	}
 
 	get _dialog() {
@@ -205,6 +205,14 @@ class ResponsivePopover extends Popover {
 		this.fireEvent(type, event.detail);
 	}
 
+	get isModal() {
+		if (!isPhone()) {
+			return super.isModal;
+		}
+
+		return this._dialog.isModal;
+	}
+
 	static async onDefine() {
 		ResponsivePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/src/SegmentedButton.hbs

@@ -1,5 +1,6 @@
 <ul
 	@click="{{_onclick}}"
+	@mousedown="{{_onmousedown}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"

package/src/SegmentedButton.js

@@ -23,7 +23,7 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
 const metadata = {
 	tag: "ui5-segmented-button",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
+	properties: /** @lends sap.ui.webc.main.SegmentedButton.prototype */  {
 		/**
 		 * Defines the accessible ARIA name of the component.
 		 *
@@ -38,7 +38,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+	slots: /** @lends sap.ui.webc.main.SegmentedButton.prototype */ {
 
 		/**
 		 * Defines the items of <code>ui5-segmented-button</code>.
@@ -46,7 +46,7 @@ const metadata = {
 		 * <b>Note:</b> Multiple items are allowed.
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.
-		 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem[]}
+		 * @type {sap.ui.webc.main.ISegmentedButtonItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -55,12 +55,12 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
+	events: /** @lends sap.ui.webc.main.SegmentedButton.prototype */ {
 
 		/**
 		 * Fired when the selected item changes.
 		 *
-		 * @event sap.ui.webcomponents.main.SegmentedButton#selection-change
+		 * @event sap.ui.webc.main.SegmentedButton#selection-change
 		 * @param {HTMLElement} selectedItem the pressed item.
 		 * @public
 		 */
@@ -89,8 +89,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SegmentedButton
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.SegmentedButton
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-segmented-button
  * @since 1.0.0-rc.6
  * @appenddocs SegmentedButtonItem
@@ -189,7 +189,9 @@ class SegmentedButton extends UI5Element {
 	}
 
 	_selectItem(event) {
-		if (event.target.disabled || event.target === this.getDomRef()) {
+		const isTargetSegmentedButtonItem = event.target.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+
+		if (event.target.disabled || event.target === this.getDomRef() || !isTargetSegmentedButtonItem) {
 			return;
 		}
 
@@ -206,12 +208,13 @@ class SegmentedButton extends UI5Element {
 		this._selectedItem.pressed = true;
 		this._itemNavigation.setCurrentItem(this._selectedItem);
 
+		this.selectedItem.focus();
+
 		return this;
 	}
 
 	_onclick(event) {
 		this._selectItem(event);
-		this.selectedItem.focus();
 	}
 
 	_onkeydown(event) {
@@ -228,6 +231,17 @@ class SegmentedButton extends UI5Element {
 		}
 	}
 
+	_onmousedown(event) {
+		const eventTarget = event.target;
+		const isTargetSegmentedButtonItem = eventTarget.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+
+		if (isTargetSegmentedButtonItem) {
+			eventTarget.focus();
+			this._itemNavigation.setCurrentItem(eventTarget);
+			this.hasPreviouslyFocusedItem = true;
+		}
+	}
+
 	_onfocusin(event) {
 		// If the component was previously focused,
 		// update the ItemNavigation to sync butons` tabindex values
@@ -272,7 +286,7 @@ class SegmentedButton extends UI5Element {
 	 * Currently selected item.
 	 *
 	 * @readonly
-	 * @type {sap.ui.webcomponents.main.ISegmentedButtonItem}
+	 * @type {sap.ui.webc.main.ISegmentedButtonItem}
 	 * @public
 	 */
 	get selectedItem() {

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.webc.main.SegmentedButtonItem.prototype */ {
 		/**
 		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
+		 * @type {sap.ui.webc.main.types.ButtonDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -85,10 +85,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends sap.ui.webcomponents.main.ToggleButton
+ * @alias sap.ui.webc.main.SegmentedButtonItem
+ * @extends sap.ui.webc.main.ToggleButton
  * @tagname ui5-segmented-button-item
- * @implements sap.ui.webcomponents.main.ISegmentedButtonItem
+ * @implements sap.ui.webc.main.ISegmentedButtonItem
  * @public
  */
 class SegmentedButtonItem extends ToggleButton {

package/src/Select.js

@@ -64,7 +64,7 @@ const metadata = {
 	tag: "ui5-select",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Select.prototype */ {
 
 		/**
 		 * Defines the component options.
@@ -75,7 +75,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.
-		 * @type {sap.ui.webcomponents.main.ISelectOption[]}
+		 * @type {sap.ui.webc.main.ISelectOption[]}
 		 * @slot options
 		 * @public
 		 */
@@ -113,7 +113,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Select.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Select.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -161,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -237,7 +237,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
+	events: /** @lends sap.ui.webc.main.Select.prototype */ {
 		/**
 		 * Fired when the selected option changes.
 		 *
@@ -279,8 +279,8 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Select
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Select
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-select
  * @appenddocs Option
  * @public
@@ -360,7 +360,7 @@ class Select extends UI5Element {
 	/**
 	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type {sap.ui.webcomponents.main.ISelectOption}
+	 * @type {sap.ui.webc.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {

package/src/Slider.hbs

@@ -22,7 +22,7 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
@@ -39,4 +39,4 @@
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

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

@@ -1,5 +1,10 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+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 { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 import Icon from "./Icon.js";
@@ -10,32 +15,9 @@ import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
 // Texts
 import {
 	SLIDER_ARIA_DESCRIPTION,
+	// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-slider",
-	languageAware: true,
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Slider.prototype */  {
-		/**
-		 * Current value of the slider
-		 *
-		 * @type {sap.ui.webcomponents.base.types.Float}
-		 * @defaultvalue 0
-		 * @formEvents change input
-		 * @formProperty
-		 * @public
-		 */
-		value: {
-			type: Float,
-			defaultValue: 0,
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -100,16 +82,34 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Slider
- * @extends sap.ui.webcomponents.main.SliderBase
+ * @alias sap.ui.webc.main.Slider
+ * @extends sap.ui.webc.main.SliderBase
  * @tagname ui5-slider
  * @since 1.0.0-rc.11
  * @public
  */
+@customElement("ui5-slider")
+@languageAware
 class Slider extends SliderBase {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Current value of the slider
+	 *
+	 * @type {sap.ui.webc.base.types.Float}
+	 * @name sap.ui.webc.main.Slider.prototype.value
+	 * @defaultvalue 0
+	 * @formEvents change input
+	 * @formProperty
+	 * @public
+	 */
+	@property({ validator: Float, defaultValue: 0 })
+	value!: number;
+
+	_valueInitial?: number;
+	_valueOnInteractionStart?: number;
+	_progressPercentage = 0;
+	_handlePositionFromStart = 0;
+
+	static i18nBundle: I18nBundle;
 
 	static get template() {
 		return SliderTemplate;
@@ -117,8 +117,7 @@ class Slider extends SliderBase {
 
 	constructor() {
 		super();
-		this._stateStorage.value = null;
-		this._setInitialValue("value", null);
+		this._stateStorage.value = undefined;
 	}
 
 	static get dependencies() {
@@ -142,43 +141,75 @@ class Slider extends SliderBase {
 		}
 
 		this.notResized = true;
-		this.syncUIAndState("value");
+		this.syncUIAndState();
 		this._updateHandleAndProgress(this.value);
 	}
 
+	syncUIAndState() {
+		// Validate step and update the stored state for the step property.
+		if (this.isPropertyUpdated("step")) {
+			this._validateStep(this.step);
+			this.storePropertyState("step");
+		}
+
+		// Recalculate the tickmarks and labels and update the stored state.
+		if (this.isPropertyUpdated("min", "max", "value")) {
+			this.storePropertyState("min", "max");
+
+			// Here the value props are changed programmatically (not by user interaction)
+			// and it won't be "stepified" (rounded to the nearest step). 'Clip' them within
+			// min and max bounderies and update the previous state reference.
+			this.value = SliderBase.clipValue(this.value, this._effectiveMin, this._effectiveMax);
+			this.updateStateStorageAndFireInputEvent("value");
+			this.storePropertyState("value");
+		}
+
+		// Labels must be updated if any of the min/max/step/labelInterval props are changed
+		if (this.labelInterval && this.showTickmarks) {
+			this._createLabels();
+		}
+
+		// Update the stored state for the labelInterval, if changed
+		if (this.isPropertyUpdated("labelInterval")) {
+			this.storePropertyState("labelInterval");
+		}
+	}
+
 	/**
 	 * Called when the user starts interacting with the slider
 	 *
 	 * @private
 	 */
-	_onmousedown(event) {
+	_onmousedown(e: TouchEvent | MouseEvent) {
 		// If step is 0 no interaction is available because there is no constant
 		// (equal for all user environments) quantitative representation of the value
 		if (this.disabled || this.step === 0) {
 			return;
 		}
 
-		const newValue = this.handleDownBase(event);
+		const newValue = this.handleDownBase(e);
 		this._valueOnInteractionStart = this.value;
 
 		// Set initial value if one is not set previously on focus in.
 		// It will be restored if ESC key is pressed.
-		if (this._getInitialValue("value") === null) {
-			this._setInitialValue("value", this.value);
+		if (this._valueInitial === undefined) {
+			this._valueInitial = this.value;
 		}
 
 		// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.
-		if (!this._isHandlePressed(this.constructor.getPageXValueFromEvent(event))) {
+		const ctor = this.constructor as typeof Slider;
+		if (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {
 			this._updateHandleAndProgress(newValue);
-			this.updateValue("value", newValue);
+			this.value = newValue;
+			this.updateStateStorageAndFireInputEvent("value");
 		}
 	}
 
-	_onfocusin(event) {
+	_onfocusin() {
 		// Set initial value if one is not set previously on focus in.
 		// It will be restored if ESC key is pressed.
-		if (this._getInitialValue("value") === null) {
-			this._setInitialValue("value", this.value);
+		if (this._valueInitial === undefined) {
+			this._valueInitial = this.value;
 		}
 
 		if (this.showTooltip) {
@@ -186,7 +217,7 @@ class Slider extends SliderBase {
 		}
 	}
 
-	_onfocusout(event) {
+	_onfocusout() {
 		// Prevent focusout when the focus is getting set within the slider internal
 		// element (on the handle), before the Slider' customElement itself is finished focusing
 		if (this._isFocusing()) {
@@ -196,7 +227,7 @@ class Slider extends SliderBase {
 
 		// Reset focus state and the stored Slider's initial
 		// value that was saved when it was first focused in
-		this._setInitialValue("value", null);
+		this._valueInitial = undefined;
 
 		if (this.showTooltip) {
 			this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
@@ -208,8 +239,8 @@ class Slider extends SliderBase {
 	 *
 	 * @private
 	 */
-	_handleMove(event) {
-		event.preventDefault();
+	_handleMove(e: TouchEvent | MouseEvent) {
+		e.preventDefault();
 
 		// If step is 0 no interaction is available because there is no constant
 		// (equal for all user environments) quantitative representation of the value
@@ -217,30 +248,32 @@ class Slider extends SliderBase {
 			return;
 		}
 
-		const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
+		const ctor = this.constructor as typeof Slider;
+		const newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
 
 		this._updateHandleAndProgress(newValue);
-		this.updateValue("value", newValue);
+		this.value = newValue;
+		this.updateStateStorageAndFireInputEvent("value");
 	}
 
 	/** Called when the user finish interacting with the slider
 	 *
 	 * @private
 	 */
-	_handleUp(event) {
+	_handleUp() {
 		if (this._valueOnInteractionStart !== this.value) {
 			this.fireEvent("change");
 		}
 
 		this.handleUpBase();
-		this._valueOnInteractionStart = null;
+		this._valueOnInteractionStart = undefined;
 	}
 
 	/** Determines if the press is over the handle
 	 *
 	 * @private
 	 */
-	_isHandlePressed(clientX) {
+	_isHandlePressed(clientX: number) {
 		const sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();
 		return clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;
 	}
@@ -249,7 +282,7 @@ class Slider extends SliderBase {
 	 *
 	 * @private
 	 */
-	_updateHandleAndProgress(newValue) {
+	_updateHandleAndProgress(newValue: number) {
 		const max = this._effectiveMax;
 		const min = this._effectiveMin;
 
@@ -259,15 +292,17 @@ class Slider extends SliderBase {
 		this._handlePositionFromStart = this._progressPercentage * 100;
 	}
 
-	_handleActionKeyPress(event) {
+	_handleActionKeyPress(e: KeyboardEvent) {
 		const min = this._effectiveMin;
 		const max = this._effectiveMax;
 		const currentValue = this.value;
-		const newValue = isEscape(event) ? this._getInitialValue("value") : this.constructor.clipValue(this._handleActionKeyPressBase(event, "value") + currentValue, min, max);
+		const ctor = this.constructor as typeof Slider;
+		const newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, "value") + currentValue, min, max);
 
 		if (newValue !== currentValue) {
-			this._updateHandleAndProgress(newValue);
-			this.updateValue("value", newValue);
+			this._updateHandleAndProgress(newValue!);
+			this.value = newValue!;
+			this.updateStateStorageAndFireInputEvent("value");
 		}
 	}
 
@@ -294,15 +329,12 @@ class Slider extends SliderBase {
 	}
 
 	get _sliderHandle() {
-		return this.shadowRoot.querySelector(".ui5-slider-handle");
-	}
-
-	get labelItems() {
-		return this._labelItems;
+		return this.shadowRoot!.querySelector(".ui5-slider-handle")!;
 	}
 
 	get tooltipValue() {
-		const stepPrecision = this.constructor._getDecimalPrecisionOfNumber(this._effectiveStep);
+		const ctor = this.constructor as typeof Slider;
+		const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
 		return this.value.toFixed(stepPrecision);
 	}
 
@@ -311,7 +343,7 @@ class Slider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION as I18nText);
 	}
 
 	static async onDefine() {