@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/StandardListItem.ts

@@ -0,0 +1,217 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ListItem from "./ListItem.js";
+import type { IAccessibleListItem } from "./ListItem.js";
+import Icon from "./Icon.js";
+// @ts-ignore
+import Avatar from "./Avatar.js";
+import WrappingType from "./types/WrappingType.js";
+import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
+
+/**
+ * @class
+ * The <code>ui5-li</code> represents the simplest type of item for a <code>ui5-list</code>.
+ *
+ * This is a list item,
+ * 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.webc.main.StandardListItem
+ * @extends sap.ui.webc.main.ListItem
+ * @tagname ui5-li
+ * @implements sap.ui.webc.main.IListItem
+ * @public
+ */
+@customElement("ui5-li")
+class StandardListItem extends ListItem implements IAccessibleListItem {
+	/**
+	 * Defines the description displayed right under the item text, if such is present.
+	 * @type {string}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.description
+	 * @defaultvalue: ""
+	 * @public
+	 * @since 0.8.0
+	 */
+	@property()
+	description!: string;
+
+	/**
+	 * Defines the <code>icon</code> source URI.
+	 * <br><br>
+	 * <b>Note:</b>
+	 * 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}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.icon
+	 * @public
+	 */
+	@property()
+	icon!: string;
+
+	/**
+	 * Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end.
+	 * <br><br>
+	 * <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.iconEnd
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	iconEnd!: boolean;
+
+	/**
+	 * Defines the <code>image</code> source URI.
+	 * <br><br>
+	 * <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.image
+	 * @public
+	 */
+	@property()
+	image!: string;
+
+	/**
+	 * Defines the <code>additionalText</code>, displayed in the end of the list item.
+	 * @type {string}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.additionalText
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	additionalText!: string;
+
+	/**
+	 * 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>"Error"</code>.
+	 * @type {sap.ui.webc.base.types.ValueState}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.additionalTextState
+	 * @defaultvalue "None"
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	additionalTextState!: ValueState;
+
+	/**
+	 * Defines the text alternative of the component.
+	 * Note: If not provided a default text alternative will be set, if present.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.accessibleName
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Defines if the text of the component should wrap, they truncate by default.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
+	 * @type {sap.ui.webc.main.types.WrappingType}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.wrappingType
+	 * @defaultvalue "None"
+	 * @private
+	 * @since 1.5.0
+	 */
+	@property({ type: WrappingType, defaultValue: WrappingType.None })
+	wrappingType!: WrappingType;
+
+	/**
+	 * Indicates if the list item has text content.
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.hasTitle
+	 * @private
+	 */
+	@property({ type: Boolean })
+	hasTitle!: boolean;
+
+	@property({ type: Boolean })
+	_hasImageContent!: boolean;
+
+	/**
+	 * Defines the text of the component.
+	 * <br><br>
+	 * <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[]}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	/**
+	 * <b>Note:</b> While the slot allows option for setting custom avatar, to match the
+	 * design guidelines, please use the <code>ui5-avatar</code> with it`s default size - S.
+	 * <b>Note:</b> If bigger <code>ui5-avatar</code> needs to be used, then the size of the
+	 * <code>ui5-li</code> should be customized in order to fit.
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.main.StandardListItem.prototype.imageContent
+	 * @since 1.10.0
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	imageContent!: Array<HTMLElement>;
+
+	static get template() {
+		return StandardListItemTemplate;
+	}
+
+	onBeforeRendering() {
+		super.onBeforeRendering();
+		this.hasTitle = !!this.textContent;
+		this._hasImageContent = this.hasImageContent;
+	}
+
+	get displayImage(): boolean {
+		return !!this.image;
+	}
+
+	get displayIconBegin(): boolean {
+		return !!(this.icon && !this.iconEnd);
+	}
+
+	get displayIconEnd(): boolean {
+		return !!(this.icon && this.iconEnd);
+	}
+
+	get hasImageContent(): boolean {
+		return !!this.imageContent.length;
+	}
+
+	static get dependencies() {
+		return [
+			...ListItem.dependencies,
+			Icon,
+			Avatar,
+		];
+	}
+}
+
+StandardListItem.define();
+
+export default StandardListItem;

package/src/StepInput.js

@@ -38,11 +38,11 @@ import StepInputCss from "./generated/themes/StepInput.css.js";
 const metadata = {
 	tag: "ui5-step-input",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
+	properties: /** @lends sap.ui.webc.main.StepInput.prototype */ {
 		/**
 		 * Defines a value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -54,7 +54,7 @@ const metadata = {
 		/**
 		 * Defines a minimum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @public
 		 */
 		min: {
@@ -64,7 +64,7 @@ const metadata = {
 		/**
 		 * Defines a maximum value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @public
 		 */
 		max: {
@@ -74,7 +74,7 @@ const metadata = {
 		/**
 		 * Defines a step of increasing/decreasing the value of the component.
 		 *
-		 * @type {Float}
+		 * @type {sap.ui.webc.base.types.Float}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -177,7 +177,7 @@ const metadata = {
 		/**
 		 * Determines the number of digits after the decimal point of the component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -269,7 +269,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
+	slots: /** @lends sap.ui.webc.main.StepInput.prototype */ {
 		/**
 		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
@@ -297,7 +297,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.StepInput.prototype */ {
+	events: /** @lends sap.ui.webc.main.StepInput.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -355,8 +355,8 @@ const INITIAL_SPEED = 120; // milliseconds
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.StepInput
- * @extends UI5Element
+ * @alias sap.ui.webc.main.StepInput
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-step-input
  * @since 1.0.0-rc.13
  * @public

package/src/SuggestionGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-group-item",
-	properties: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.SuggestionGroupItem.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
 		 *
@@ -18,9 +18,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.SuggestionGroupItem.prototype */ {
 	},
-	events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.main.SuggestionGroupItem.prototype */ {
 	},
 };
 
@@ -31,10 +31,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SuggestionGroupItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.SuggestionGroupItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-suggestion-group-item
- * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @implements sap.ui.webc.main.IInputSuggestionItem
  * @public
  * @since 1.0.0-rc.15
  */

package/src/SuggestionItem.js

@@ -9,7 +9,7 @@ import ListItemType from "./types/ListItemType.js";
  */
 const metadata = {
 	tag: "ui5-suggestion-item",
-	properties: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.SuggestionItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
 		 * while when <code>Inactive</code> or <code>Detail</code> - will not.
 		 *
-		 * @type {ListItemType}
+		 * @type {sap.ui.webc.main.types.ListItemType}
 		 * @defaultvalue "Active"
 		 * @public
 		 * @since 1.0.0-rc.8
@@ -53,7 +53,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * 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>.
+		 * <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
@@ -101,7 +101,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br><br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -111,9 +111,9 @@ const metadata = {
 			defaultValue: ValueState.None,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.SuggestionItem.prototype */ {
 	},
-	events: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	events: /** @lends sap.ui.webc.main.SuggestionItem.prototype */ {
 	},
 };
 
@@ -123,10 +123,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SuggestionItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.SuggestionItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-suggestion-item
- * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @implements sap.ui.webc.main.IInputSuggestionItem
  * @public
  */
 class SuggestionItem extends UI5Element {

package/src/SuggestionListItem.js

@@ -7,7 +7,7 @@ import SuggestionListItemTemplate from "./generated/templates/SuggestionListItem
 const metadata = {
 	tag: "ui5-li-suggestion-item",
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.SuggestionListItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.SuggestionListItem.prototype */ {
 		/**
 		 * Defines a description that can contain HTML.
 		 * <b>Note:</b> If not specified, the <code>description</code> property will be used.
@@ -21,6 +21,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 		"default": {
+			type: Node,
 			propertyName: "titleText",
 		},
 	},
@@ -44,8 +45,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends StandardListItem
+ * @alias sap.ui.webc.main.SuggestionListItem
+ * @extends sap.ui.webc.main.StandardListItem
  * @tagname ui5-li-suggestion-item
  */
 class SuggestionListItem extends StandardListItem {

package/src/Switch.hbs

@@ -3,12 +3,13 @@
 	role="switch"
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">