@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b053ad005

package/src/StandardListItem.hbs

@@ -7,8 +7,8 @@
 			<div class="ui5-li-description-info-wrapper">
 				<span part="description" class="ui5-li-desc">{{description}}</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}}
@@ -17,15 +17,17 @@
 		{{/unless}}
 	</div>
 	{{#unless description}}
-		{{#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}}
 
 {{#*inline "imageBegin"}}
 	{{#if displayImage}}
-		<ui5-avatar image="{{image}}" image-fit-type="Contain" shape="Square" class="ui5-li-img"></ui5-avatar>
+		<ui5-avatar shape="Square" class="ui5-li-img">
+			<img src="{{image}}" class="ui5-li-img-inner" />
+		</ui5-avatar>
 	{{/if}}
 {{/inline}}
 

package/src/StandardListItem.js

@@ -26,7 +26,7 @@ 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
+		 * SAP-icons font provides numerous built-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>.
 		 *
 		 * @type {string}
@@ -62,29 +62,42 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the list item.
+		 * Defines the <code>additionalText</code>, displayed in the end of the list item.
 		 * @type {string}
 		 * @public
-		 * @since 0.13.0
+		 * @since 1.0.0-rc.15
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.
 		 * @type {ValueState}
 		 * @defaultvalue "None"
 		 * @public
-		 * @since 0.13.0
+		 * @since 1.0.0-rc.15
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
 
+		/**
+		 * Defines the text alternative of the component.
+		 * Note: If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Indicates if the list item has text content.
 		 * @type {boolean}
@@ -96,9 +109,9 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-li</code>.
+		 * Defines the text of the component.
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -118,11 +131,24 @@ const metadata = {
  * providing the most common use cases such as <code>text</code>,
  * <code>image</code> and <code>icon</code>.
  *
+ * <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</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the list item</li>
+ * <li>description - Used to style the description of the list item</li>
+ * <li>additional-text - Used to style the additionalText of the list item</li>
+ * <li>icon - Used to style the icon of the list item</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.StandardListItem
  * @extends ListItem
  * @tagname ui5-li
+ * @implements sap.ui.webcomponents.main.IListItem
  * @public
  */
 class StandardListItem extends ListItem {

package/src/StepInput.hbs

@@ -0,0 +1,77 @@
+<div
+	id="{{_id}}"
+	class="ui5-step-input-root"
+	@keydown="{{_onkeydown}}"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+>
+	<!-- Decrement Icon -->
+	<div
+		class="ui5-step-icon ui5-step-dec"
+		title="{{decIconTitle}}"
+	>
+		<ui5-icon
+			id="{{_id}}-dec"
+			name="{{decIconName}}"
+			tabindex="-1"
+			accessible-name="{{decIconTitle}}"
+			@click="{{_decValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_decSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_decIconClickable}}"
+		></ui5-icon>
+	</div>
+
+	<!-- INPUT -->
+	<ui5-input
+			id="{{_id}}-inner"
+			class="ui5-step-input-input"
+			placeholder="{{placeholder}}"
+			type="{{type}}"
+			value="{{_valuePrecisioned}}"
+			?disabled="{{disabled}}"
+			?required="{{required}}"
+			?readonly="{{readonly}}"
+			value-state="{{valueState}}"
+			data-sap-focus-ref
+			._inputAccInfo ="{{accInfo}}"
+			._nativeInputAttributes="{{inputAttributes}}"
+			@ui5-change="{{_onInputChange}}"
+			@focusout="{{_onInputFocusOut}}"
+			@focusin="{{_onInputFocusIn}}"
+	>
+
+		{{#if valueStateMessage.length}}
+			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+		{{/if}}
+
+	</ui5-input>
+
+	<!-- Increment Icon -->
+	<div
+		class="ui5-step-icon ui5-step-inc"
+		title="{{incIconTitle}}"
+	>
+		<ui5-icon
+			id="{{_id}}-inc"
+			name="{{incIconName}}"
+			tabindex="-1"
+			accessible-name="{{incIconTitle}}"
+			@click="{{_incValue}}"
+			@focusout="{{_onButtonFocusOut}}"
+			@mousedown="{{_incSpin}}"
+			@mouseup="{{_resetSpin}}"
+			@mouseout="{{_resetSpinOut}}"
+			input-icon
+			show-tooltip
+			?clickable="{{_incIconClickable}}"
+		></ui5-icon>
+	</div>
+
+	<slot name="formSupport"></slot>
+
+</div>