@ui5/webcomponents 1.9.3 → 1.10.0

package/src/SuggestionGroupItem.ts

@@ -0,0 +1,51 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @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.webc.main.SuggestionGroupItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-suggestion-group-item
+ * @implements sap.ui.webc.main.IInputSuggestionItem
+ * @public
+ * @since 1.0.0-rc.15
+ */
+@customElement("ui5-suggestion-group-item")
+class SuggestionGroupItem extends UI5Element {
+	/**
+	 * Defines the text of the <code>ui5-suggestion-group-item</code>.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.SuggestionGroupItem.prototype.text
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	text!: string;
+
+	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;
+	}
+}
+
+SuggestionGroupItem.define();
+
+export default SuggestionGroupItem;

package/src/SuggestionItem.ts

@@ -0,0 +1,134 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import SuggestionListItem from "./SuggestionListItem.js";
+import ListItemType from "./types/ListItemType.js";
+
+/**
+ * @class
+ * The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SuggestionItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-suggestion-item
+ * @implements sap.ui.webc.main.IInputSuggestionItem
+ * @public
+ */
+@customElement("ui5-suggestion-item")
+class SuggestionItem extends UI5Element {
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.text
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	text!: string
+
+	/**
+	 * Defines the visual indication and behavior of the item.
+	 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
+	 * <br><br>
+	 * <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 {sap.ui.webc.main.types.ListItemType}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.type
+	 * @defaultvalue "Active"
+	 * @public
+	 * @since 1.0.0-rc.8
+	*/
+	@property({ type: ListItemType, defaultValue: ListItemType.Active })
+	type!: ListItemType
+
+	/**
+	 * Defines the description displayed right under the item text, if such is present.
+	 * @type {string}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.description
+	 * @defaultvalue: ""
+	 * @public
+	 */
+	@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.SuggestionItem.prototype.icon
+	 * @public
+	 */
+	@property()
+	icon!: string
+
+	/**
+	 * Defines whether the <code>icon</code> should be displayed in the beginning of the 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.SuggestionItem.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 item.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.image
+	 * @public
+	 */
+	@property()
+	image!: string
+
+	/**
+	 * Defines the <code>additionalText</code>, displayed in the end of the item.
+	 * @type {string}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.additionalText
+	 * @since 1.0.0-rc.15
+	 * @public
+	 */
+	@property()
+	additionalText!: string
+
+	/**
+	 * 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 {sap.ui.webc.base.types.ValueState}
+	 * @name sap.ui.webc.main.SuggestionItem.prototype.additionalTextState
+	 * @defaultvalue "None"
+	 * @since 1.0.0-rc.15
+	 * @public
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	additionalTextState!: ValueState
+
+	static get dependencies() {
+		return [
+			SuggestionListItem,
+		];
+	}
+
+	get groupItem() {
+		return false;
+	}
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;

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

@@ -1,31 +1,8 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import StandardListItem from "./StandardListItem.js";
 import SuggestionListItemTemplate from "./generated/templates/SuggestionListItemTemplate.lit.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-li-suggestion-item",
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.SuggestionListItem.prototype */ {
-		/**
-		 * Defines a description that can contain HTML.
-		 * <b>Note:</b> If not specified, the <code>description</code> property will be used.
-		 * <br>
-		 * @type {HTMLElement}
-		 * @since 1.0.0-rc.8
-		 * @slot
-		 * @public
-		 */
-		richDescription: {
-			type: HTMLElement,
-		},
-		"default": {
-			propertyName: "titleText",
-		},
-	},
-};
-
 /**
  * @class
  * The <code>ui5-li-suggestion-item</code> represents the suggestion item in the <code>ui5-input</code>
@@ -44,21 +21,38 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends sap.ui.webcomponents.main.StandardListItem
+ * @alias sap.ui.webc.main.SuggestionListItem
+ * @extends sap.ui.webc.main.StandardListItem
  * @tagname ui5-li-suggestion-item
  */
+@customElement("ui5-li-suggestion-item")
 class SuggestionListItem extends StandardListItem {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Defines a description that can contain HTML.
+	 * <b>Note:</b> If not specified, the <code>description</code> property will be used.
+	 * <br>
+	 * @type {HTMLElement}
+	 * @name sap.ui.webc.main.SuggestionListItem.prototype.richDescription
+	 * @since 1.0.0-rc.8
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	richDescription!: Array<HTMLElement>
+
+	/**
+	 * @type {Node}
+	 * @name sap.ui.webc.main.SuggestionListItem.prototype.default
+	 */
+	@slot({ type: Node, "default": true })
+	titleText!: Array<Node>
 
 	static get template() {
 		return SuggestionListItemTemplate;
 	}
 
-	onBeforeRendering(...params) {
-		super.onBeforeRendering(...params);
+	onBeforeRendering() {
+		super.onBeforeRendering();
 		this.hasTitle = !!this.titleText.length;
 	}
 
@@ -69,6 +63,10 @@ class SuggestionListItem extends StandardListItem {
 	get hasDescription() {
 		return this.richDescription.length || this.description;
 	}
+
+	get groupItem() {
+		return false;
+	}
 }
 
 SuggestionListItem.define();

package/src/Switch.hbs

@@ -3,11 +3,11 @@
 	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}}"
 >

package/src/Switch.ts

@@ -0,0 +1,299 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/less.js";
+import Icon from "./Icon.js";
+import SwitchDesign from "./types/SwitchDesign.js";
+
+// Template
+import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
+
+// Styles
+import switchCss from "./generated/themes/Switch.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-switch</code> component is used for changing between binary states.
+ * <br>
+ * The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties,
+ * but texts longer than 3 letters will be cutted off.
+ * <br>
+ * However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style="width: 200px"></code>), and set widths, depending on the texts they would use.
+ * <br>
+ * Note: the component would not automatically stretch to fit the whole text width.
+ *
+ * <h3>Keyboard Handling</h3>
+ * The state can be changed by pressing the Space and Enter keys.
+ *
+ * <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-switch</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>slider - Used to style the track, where the handle is being slid</li>
+ * <li>text-on - Used to style the <code>textOn</code> property text</li>
+ * <li>text-off - Used to style the <code>textOff</code> property text</li>
+ * <li>handle - Used to style the handle of the switch</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Switch";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Switch
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-switch
+ * @public
+ * @since 0.8.0
+ */
+@customElement("ui5-switch")
+@languageAware
+
+/**
+ * Fired when the component checked state changes.
+ *
+ * @public
+ * @event sap.ui.webc.main.Switch#change
+ */
+@event("change")
+class Switch extends UI5Element {
+	/**
+	 * Defines the component design.
+	 * <br><br>
+	 * <b>Note:</b> If <code>Graphical</code> type is set,
+	 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
+	 *
+	 * @public
+	 * @type {sap.ui.webc.main.types.SwitchDesign}
+	 * @name sap.ui.webc.main.Switch.prototype.design
+	 * @defaultValue "Textual"
+	 */
+	@property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })
+	design!: SwitchDesign;
+
+	/**
+	 * Defines if the component is checked.
+	 * <br><br>
+	 * <b>Note:</b> The property can be changed with user interaction,
+	 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Switch.prototype.checked
+	 * @defaultvalue false
+	 * @formEvents change
+	 * @formProperty
+	 * @public
+	 */
+	@property({ type: Boolean })
+	checked!: boolean;
+
+	/**
+	 * Defines whether the component is disabled.
+	 * <br><br>
+	 * <b>Note:</b> A disabled component is noninteractive.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Switch.prototype.disabled
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean
+
+	/**
+	 * Defines the text, displayed when the component is checked.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+	 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Switch.prototype.textOn
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	textOn!: string
+
+	/**
+	 * Defines the text, displayed when the component is not checked.
+	 * <br><br>
+	 * <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).
+	 * <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Switch.prototype.textOff
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	textOff!: string
+
+	/**
+	 * Sets the accessible ARIA name of the component.
+	 *
+	 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+	 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Switch.prototype.accessibleName
+	 * @defaultvalue: ""
+	 * @public
+	 * @since 1.2.0
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 *
+	 * <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
+	 * Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.1.0
+	 */
+	@property({ defaultValue: "" })
+	accessibleNameRef!: string;
+
+	/**
+	 * Defines the tooltip of the component.
+	 * <br>
+	 * <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Switch.prototype.tooltip
+	 * @defaultvalue: ""
+	 * @public
+	 * @since 1.9.0
+	 */
+	@property()
+	tooltip!: string;
+
+	static i18nBundle: I18nBundle;
+
+	static get styles() {
+		return switchCss;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return SwitchTemplate;
+	}
+
+	get sapNextIcon() {
+		return this.checked ? "accept" : "less";
+	}
+
+	_onclick() {
+		this.toggle();
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+		}
+
+		if (isEnter(e)) {
+			this.toggle();
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this.toggle();
+		}
+	}
+
+	toggle() {
+		if (!this.disabled) {
+			this.checked = !this.checked;
+			this.fireEvent("change");
+			// Angular two way data binding;
+			this.fireEvent("value-changed");
+		}
+	}
+
+	get graphical() {
+		return this.design === SwitchDesign.Graphical;
+	}
+
+	get hasNoLabel() {
+		return !(this.graphical || this.textOn || this.textOff);
+	}
+
+	get _textOn() {
+		return this.graphical ? "" : this.textOn;
+	}
+
+	get _textOff() {
+		return this.graphical ? "" : this.textOff;
+	}
+
+	get effectiveTabIndex() {
+		return this.disabled ? undefined : "0";
+	}
+
+	get classes(): ClassMap {
+		const hasLabel = this.graphical || this.textOn || this.textOff;
+
+		return {
+			main: {
+				"ui5-switch-desktop": isDesktop(),
+				"ui5-switch--disabled": this.disabled,
+				"ui5-switch--checked": this.checked,
+				"ui5-switch--semantic": this.graphical,
+				"ui5-switch--no-label": !hasLabel,
+			},
+		};
+	}
+
+	get effectiveAriaDisabled() {
+		return this.disabled ? "true" : undefined;
+	}
+
+	get accessibilityOnText() {
+		return this._textOn;
+	}
+
+	get accessibilityOffText() {
+		return this._textOff;
+	}
+
+	get hiddenText() {
+		return this.checked ? this.accessibilityOnText : this.accessibilityOffText;
+	}
+
+	get ariaLabelText() {
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+
+	static async onDefine() {
+		Switch.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+}
+
+Switch.define();
+
+export default Switch;

package/src/Tab.js

@@ -7,6 +7,7 @@ import {
 	TAB_ARIA_DESIGN_NEGATIVE,
 	TAB_ARIA_DESIGN_CRITICAL,
 	TAB_ARIA_DESIGN_NEUTRAL,
+	TABCONTAINER_END_OVERFLOW,
 } from "./generated/i18n/i18n-defaults.js";
 
 import "@ui5/webcomponents-icons/dist/error.js";
@@ -43,7 +44,7 @@ const metadata = {
 	tag: "ui5-tab",
 	managedSlots: true,
 	languageAware: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tab.prototype */ {
 
 		/**
 		 * Holds the content associated with this tab.
@@ -66,7 +67,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITab[]}
+		 * @type {sap.ui.webc.main.ITab[]}
 		 * @public
 		 * @slot subTabs
 		 */
@@ -79,7 +80,7 @@ const metadata = {
 			},
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tab.prototype */ {
 
 		/**
 		 * The text to be displayed for the item.
@@ -139,7 +140,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> The design depends on the current theme.
-		 * @type {sap.ui.webcomponents.main.types.SemanticColor}
+		 * @type {sap.ui.webc.main.types.SemanticColor}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -171,7 +172,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tab.prototype */ {
 	},
 };
 
@@ -183,10 +184,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tab
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Tab
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tab
- * @implements sap.ui.webcomponents.main.ITab
+ * @implements sap.ui.webc.main.ITab
  * @public
  */
 class Tab extends UI5Element {
@@ -401,6 +402,10 @@ class Tab extends UI5Element {
 		return classes.join(" ");
 	}
 
+	get expandButtonTitle() {
+		return Tab.i18nBundle.getText(TABCONTAINER_END_OVERFLOW);
+	}
+
 	get semanticIconName() {
 		switch (this.design) {
 		case SemanticColor.Positive: