@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a7032d86e

package/dist/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 */  {
+	properties: /** @lends sap.ui.webc.main.SegmentedButton.prototype */  {
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -40,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>.
@@ -48,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
 		 */
@@ -57,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
 		 */
@@ -91,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
@@ -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;
 		});
 	}
 
@@ -199,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;
 		}
 
@@ -216,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) {
@@ -238,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
@@ -282,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/dist/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 {ButtonDesign}
+		 * @type {sap.ui.webc.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>
@@ -85,10 +85,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SegmentedButtonItem
- * @extends 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/dist/Select.js

@@ -30,8 +30,13 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -59,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.
@@ -70,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
 		 */
@@ -108,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.
@@ -156,7 +161,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -178,7 +183,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @since 1.0.0-rc.9
@@ -232,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.
 		 *
@@ -274,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
@@ -353,9 +358,9 @@ class Select extends UI5Element {
 	}
 
 	/**
-	 * Currently selected option.
+	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
-	 * @type { sap.ui.webcomponents.main.ISelectOption }
+	 * @type {sap.ui.webc.main.ISelectOption}
 	 * @public
 	 */
 	get selectedOption() {
@@ -407,6 +412,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
@@ -502,7 +508,7 @@ class Select extends UI5Element {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._getSelectedItemIndex(itemToSelect);
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -545,7 +551,7 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
@@ -665,17 +671,42 @@ class Select extends UI5Element {
 
 	get valueStateTextMappings() {
 		return {
-			"Success": Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": Select.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": Select.i18nBundle.getText(VALUE_STATE_WARNING),
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_WARNING),
+		};
+	}
+
+	get valueStateTypeMappings() {
+		return {
+			[ValueState.Success]: Select.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			[ValueState.Information]: Select.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			[ValueState.Error]: Select.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			[ValueState.Warning]: Select.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
 		};
 	}
 
 	get valueStateText() {
+		let valueStateText;
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			valueStateText = this.valueStateDefaultText;
+		} else {
+			valueStateText = this.valueStateMessageText.map(el => el.textContent).join(" ");
+		}
+
+		return `${this.valueStateTypeText} ${valueStateText}`;
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
+	get valueStateTypeText() {
+		return this.valueStateTypeMappings[this.valueState];
+	}
+
 	get hasValueState() {
 		return this.valueState !== ValueState.None;
 	}
@@ -744,6 +775,9 @@ class Select extends UI5Element {
 				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
 			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
+			},
 		};
 	}
 
@@ -768,6 +802,10 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/dist/Slider.d.ts

@@ -0,0 +1,163 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The Slider component represents a numerical range and a handle (grip).
+ * The purpose of the component is to enable visual selection of a value in
+ * a continuous numerical range by moving an adjustable handle.
+ *
+ * <h3>Structure</h3>
+ * The most important properties of the Slider are:
+ * <ul>
+ * <li>min - The minimum value of the slider range.</li>
+ * <li>max - The maximum value of the slider range.</li>
+ * <li>value - The current value of the slider range.</li>
+ * <li>step - Determines the increments in which the slider will move.</li>
+ * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>
+ * <li>showTickmarks - Displays a visual divider between the step values.</li>
+ * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>
+ * </ul>
+ *
+ * <h3>Usage</h3>
+ * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
+ *
+ * <h3>Responsive Behavior</h3>
+ * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and
+ * resizing the width of the control. You can move the slider handle in several different ways:
+ * <ul>
+ * <li>Drag and drop the handle to the desired value.</li>
+ * <li>Click/tap on the range bar to move the handle to that location.</li>
+ * </ul>
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
+ * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
+ * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <ul>
+ * <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li>
+ * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>
+ * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li>
+ * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li>
+ * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>
+ * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>
+ * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>
+ * <li><code>End</code> - Moves the handle to the end of the range;</li>
+ * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>
+ * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>
+ * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Slider";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Slider
+ * @extends sap.ui.webc.main.SliderBase
+ * @tagname ui5-slider
+ * @since 1.0.0-rc.11
+ * @public
+ */
+declare class Slider extends SliderBase {
+    /**
+     * 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
+     */
+    value: number;
+    _valueInitial?: number;
+    _valueOnInteractionStart?: number;
+    _progressPercentage: number;
+    _handlePositionFromStart: number;
+    static i18nBundle: I18nBundle;
+    static get template(): import("@ui5/webcomponents-base/src/renderer/executeTemplate.js").TemplateFunction;
+    constructor();
+    static get dependencies(): (typeof Icon)[];
+    /**
+     *
+     * Check if the previously saved state is outdated. That would mean
+     * either it is the initial rendering or that a property has been changed
+     * programmatically - because the previous state is always updated in
+     * the interaction handlers.
+     *
+     * Normalize current properties, update the previously stored state.
+     * Update the visual UI representation of the Slider.
+     *
+     */
+    onBeforeRendering(): void;
+    syncUIAndState(): void;
+    /**
+     * Called when the user starts interacting with the slider
+     *
+     * @private
+     */
+    _onmousedown(e: TouchEvent | MouseEvent): void;
+    _onfocusin(): void;
+    _onfocusout(): void;
+    /**
+     * Called when the user moves the slider
+     *
+     * @private
+     */
+    _handleMove(e: TouchEvent | MouseEvent): void;
+    /** Called when the user finish interacting with the slider
+     *
+     * @private
+     */
+    _handleUp(): void;
+    /** Determines if the press is over the handle
+     *
+     * @private
+     */
+    _isHandlePressed(clientX: number): boolean;
+    /** Updates the UI representation of the progress bar and handle position
+     *
+     * @private
+     */
+    _updateHandleAndProgress(newValue: number): void;
+    _handleActionKeyPress(e: KeyboardEvent): void;
+    get styles(): {
+        progress: {
+            transform: string;
+            "transform-origin": string;
+        };
+        handle: {
+            [x: string]: string;
+        };
+        label: {
+            width: string;
+        };
+        labelContainer: {
+            [x: string]: string;
+            width: string;
+        };
+        tooltip: {
+            visibility: string;
+        };
+    };
+    get _sliderHandle(): Element;
+    get tooltipValue(): string;
+    get _ariaDisabled(): true | undefined;
+    get _ariaLabelledByText(): string;
+    static onDefine(): Promise<void>;
+    get tickmarksObject(): boolean[];
+}
+export default Slider;