@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf50976ce

package/src/StepInput.js

@@ -13,7 +13,7 @@ import {
 	isEscape,
 	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.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 { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
@@ -40,7 +40,7 @@ const metadata = {
 	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
 		/**
-		 * Defines a value of the <code>ui5-step-input</code>.
+		 * Defines a value of the component.
 		 *
 		 * @type {Float}
 		 * @defaultvalue 0
@@ -52,7 +52,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines a minimum value of the <code>ui5-step-input</code>.
+		 * Defines a minimum value of the component.
 		 *
 		 * @type {Float}
 		 * @public
@@ -62,7 +62,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines a maximum value of the <code>ui5-step-input</code>.
+		 * Defines a maximum value of the component.
 		 *
 		 * @type {Float}
 		 * @public
@@ -72,7 +72,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines a step of increasing/decreasing the value of the <code>ui5-step-input</code>.
+		 * Defines a step of increasing/decreasing the value of the component.
 		 *
 		 * @type {Float}
 		 * @defaultvalue 1
@@ -84,7 +84,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-step-input</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -105,7 +105,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-step-input</code> is required.
+		 * Defines whether the component is required.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -116,7 +116,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-step-input</code> is displayed as disabled.
+		 * Determines whether the component is displayed as disabled.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -127,7 +127,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-step-input</code> is displayed as read-only.
+		 * Determines whether the component is displayed as read-only.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -139,11 +139,11 @@ const metadata = {
 
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-step-input</code> has no value.
+		 * component has no value.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-step-input</code> appear empty - without placeholder or format pattern.
+		 * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -155,7 +155,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the name with which the <code>ui5-step-input</code> will be submitted in an HTML form.
+		 * Determines the name with which the component will be submitted in an HTML form.
 		 *
 		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
@@ -163,7 +163,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-step-input</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. Do not use this property unless you need to submit a form.
 		 *
 		 * @type {string}
@@ -175,7 +175,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the number of digits after the decimal point of the <code>ui5-step-input</code>.
+		 * Determines the number of digits after the decimal point of the component.
 		 *
 		 * @type {Integer}
 		 * @defaultvalue 0
@@ -187,24 +187,25 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the <code>ui5-step-input</code>.
+		 * Defines the accessible ARIA name of the component.
 		 *
-		 * @type {String}
-		 * @private
-		 * @defaultvalue ""
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-step-input</code>.
+		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -219,9 +220,12 @@ const metadata = {
 			noAttribute: true,
 		},
 
-		_focused: {
+		/**
+		 * @type {boolean}
+		 * @private
+		 */
+		focused: {
 			type: Boolean,
-			noAttribute: true,
 		},
 
 		_inputFocused: {
@@ -267,13 +271,13 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-step-input</code>.
+		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-step-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement}
 		 * @slot
 		 * @public
@@ -330,13 +334,13 @@ const INITIAL_SPEED = 120; // milliseconds
  * The increase/decrease button and the up/down keyboard navigation become disabled when
  * the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.
  * <br><br>
- * <i>When to use</i>
+ * <h4>When to use:</h4>
  * <ul>
  * <li>To adjust amounts, quantities, or other values quickly.</li>
  * <li>To adjust values for a specific step.</li>
  * </ul>
  *
- * <i>When not to use</i>
+ * <h4>When not to use:</h4>
  * <ul>
  * <li>To enter a static number (for example, postal code, phone number, or ID). In this case,
  * use the regular <code>ui5-input</code> instead.</li>
@@ -347,7 +351,7 @@ const INITIAL_SPEED = 120; // milliseconds
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/StepInput.js";</code>
+ * <code>import "@ui5/webcomponents/dist/StepInput.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -360,7 +364,6 @@ const INITIAL_SPEED = 120; // milliseconds
 class StepInput extends UI5Element {
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -387,7 +390,7 @@ class StepInput extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		StepInput.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get type() {
@@ -397,7 +400,7 @@ class StepInput extends UI5Element {
 	// icons-related
 
 	get decIconTitle() {
-		return this.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
+		return StepInput.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE);
 	}
 
 	get decIconName() {
@@ -405,7 +408,7 @@ class StepInput extends UI5Element {
 	}
 
 	get incIconTitle() {
-		return this.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
+		return StepInput.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE);
 	}
 
 	get incIconName() {
@@ -421,7 +424,7 @@ class StepInput extends UI5Element {
 	}
 
 	get _isFocused() {
-		return this._focused;
+		return this.focused;
 	}
 
 	get _valuePrecisioned() {
@@ -502,8 +505,10 @@ class StepInput extends UI5Element {
 	}
 
 	_fireChangeEvent() {
-		this._previousValue = this.value;
-		this.fireEvent("change", { value: this.value });
+		if (this._previousValue !== this.value) {
+			this._previousValue = this.value;
+			this.fireEvent("change", { value: this.value });
+		}
 	}
 
 	/**
@@ -528,7 +533,7 @@ class StepInput extends UI5Element {
 			this.value = value;
 			this._validate();
 			this._setButtonState();
-			this._focused = true;
+			this.focused = true;
 			this.inputOuter.setAttribute("focused", "");
 			if (fireChangeEvent) {
 				this._fireChangeEvent();
@@ -553,6 +558,9 @@ class StepInput extends UI5Element {
 	}
 
 	_onInputChange(event) {
+		if (this.input.value === "") {
+			this.input.value = this.min || 0;
+		}
 		const inputValue = this._preciseValue(parseFloat(this.input.value));
 		if (this.value !== this._previousValue || this.value !== inputValue) {
 			this.value = inputValue;
@@ -563,11 +571,11 @@ class StepInput extends UI5Element {
 	}
 
 	_onfocusin() {
-		this._focused = true;
+		this.focused = true;
 	}
 
 	_onfocusout() {
-		this._focused = false;
+		this.focused = false;
 	}
 
 	_onkeydown(event) {

package/src/SuggestionGroupItem.js

@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-suggestion-group-item",
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+		/**
+		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+	events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-suggestion-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-input</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionGroupItem
+ * @extends UI5Element
+ * @tagname ui5-suggestion-group-item
+ * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @public
+ * @since 1.0.0-rc.15
+ */
+class SuggestionItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Indicates the "grouping" nature of the component
+	 * to avoid tag name checks tag name to diferenciate from the standard suggestion item.
+	 * @protected
+	 */
+	get groupItem() {
+		return true;
+	}
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;

package/src/SuggestionItem.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import SuggestionListItem from "./SuggestionListItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import ListItemType from "./types/ListItemType.js";
 
 /**
@@ -10,9 +9,9 @@ import ListItemType from "./types/ListItemType.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-item",
-	properties: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-suggestion-item</code>.
+		 * Defines the text of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -53,8 +52,8 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * 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}
 		 * @public
@@ -89,44 +88,32 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the item.
+		 * Defines the <code>additionalText</code>, displayed in the end of the item.
 		 * @type {string}
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
-		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
 		 * @type {ValueState}
-         * @defaultvalue "None"
+		 * @defaultvalue "None"
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
-
-		/**
-		 * Defines the item to be displayed as a group item.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted
-		 * and only the <code>text</code> will be displayed.
-		 * @type {boolean}
-         * @defaultvalue false
-		 * @public
-		 */
-		group: {
-			type: Boolean,
-		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
 };
 
@@ -150,7 +137,6 @@ class SuggestionItem extends UI5Element {
 	static get dependencies() {
 		return [
 			SuggestionListItem,
-			GroupHeaderListItem,
 		];
 	}
 }

package/src/SuggestionListItem.hbs

@@ -15,8 +15,8 @@
 					{{/if}}
 				</span>
 
-				{{#if info}}
-					<span part="info" class="ui5-li-info">{{info}}</span>
+				{{#if additionalText}}
+					<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
 				{{/if}}
 			</div>
 		{{/if}}
@@ -25,8 +25,8 @@
 		{{/unless}}
 	</div>
 	{{#unless hasDescription}}
-		{{#if info}}
-			<span part="info" class="ui5-li-info">{{info}}</span>
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
 		{{/if}}
 	{{/unless}}
 {{/inline}}

package/src/SuggestionListItem.js

@@ -21,7 +21,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 		"default": {
-			propertyName: "title",
+			propertyName: "titleText",
 		},
 	},
 };
@@ -31,6 +31,17 @@ const metadata = {
  * The <code>ui5-li-suggestion-item</code> represents the suggestion item in the <code>ui5-input</code>
  * suggestion popover.
  *
+ * <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-li-suggestion-item</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the suggestion list item</li>
+ * <li>description - Used to style the description of the suggestion list item</li>
+ * <li>info - Used to style the info of the suggestion list item</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionListItem
@@ -48,11 +59,11 @@ class SuggestionListItem extends StandardListItem {
 
 	onBeforeRendering(...params) {
 		super.onBeforeRendering(...params);
-		this.hasTitle = !!this.title.length;
+		this.hasTitle = !!this.titleText.length;
 	}
 
 	get effectiveTitle() {
-		return this.title.map(el => el.textContent).join("");
+		return this.titleText.filter(node => node.nodeType !== Node.COMMENT_NODE).map(el => el.textContent).join("");
 	}
 
 	get hasDescription() {

package/src/Switch.hbs

@@ -1,9 +1,9 @@
 <div
 	class="ui5-switch-root {{classes.main}}"
-	role="checkbox"
+	role="switch"
+	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
@@ -15,20 +15,35 @@
 			<div class="ui5-switch-slider">
 				{{#if graphical}}
 					<span class="ui5-switch-text ui5-switch-text--on">
-						<ui5-icon name="accept" dir="ltr" class="ui5-switch-icon-on"></ui5-icon>
+						<ui5-icon name="accept" class="ui5-switch-icon-on"></ui5-icon>
 					</span>
 					<span class="ui5-switch-text ui5-switch-text--off">
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
-				<span class="ui5-switch-handle" part="handle"></span>
+				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
+					<ui5-icon
+						name="{{sapNextIcon}}"
+						class="ui5-switch-handle-icon"
+					></ui5-icon>
+				</span>
 			</div>
 		</div>
 	</div>
+
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
 </div>