@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

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.webcomponents.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.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
 	},
 };
 
@@ -32,7 +32,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionGroupItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-group-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

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.webcomponents.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.webcomponents.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
@@ -100,8 +100,8 @@ 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>"Erorr"</code>.
-		 * @type {ValueState}
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Information"</code>, <code>"Warning"</code> and <code>"Error"</code>.
+		 * @type {sap.ui.webcomponents.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.webcomponents.main.SuggestionItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
 };
 
@@ -124,7 +124,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-suggestion-item
  * @implements sap.ui.webcomponents.main.IInputSuggestionItem
  * @public

package/src/SuggestionListItem.js

@@ -45,7 +45,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.SuggestionListItem
- * @extends StandardListItem
+ * @extends sap.ui.webcomponents.main.StandardListItem
  * @tagname ui5-li-suggestion-item
  */
 class SuggestionListItem extends StandardListItem {

package/src/Switch.hbs

@@ -4,19 +4,19 @@
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
 	tabindex="{{tabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">
 			<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>
@@ -47,5 +47,4 @@
 	</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>

package/src/Switch.js

@@ -10,11 +10,6 @@ import "@ui5/webcomponents-icons/dist/less.js";
 import Icon from "./Icon.js";
 import SwitchDesign from "./types/SwitchDesign.js";
 
-import {
-	SWITCH_ON,
-	SWITCH_OFF,
-} from "./generated/i18n/i18n-defaults.js";
-
 // Template
 import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 
@@ -36,7 +31,7 @@ const metadata = {
 		 * positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
 		 *
 		 * @public
-		 * @type {SwitchDesign}
+		 * @type {sap.ui.webcomponents.main.types.SwitchDesign}
 		 * @defaultValue "Textual"
 		 */
 		design: {
@@ -51,6 +46,8 @@ const metadata = {
 		 * either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -98,8 +95,10 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * 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}
 		 * @defaultvalue: ""
 		 * @public
@@ -112,6 +111,8 @@ const metadata = {
 		/**
 		 * 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}
 		 * @defaultvalue ""
 		 * @public
@@ -121,6 +122,19 @@ const metadata = {
 			type: String,
 			defaultValue: "",
 		},
+
+		/**
+		 * 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}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.9.0
+		 */
+		 tooltip: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
 
@@ -263,11 +277,11 @@ class Switch extends UI5Element {
 	}
 
 	get accessibilityOnText() {
-		return this._textOn || Switch.i18nBundle.getText(SWITCH_ON);
+		return this._textOn;
 	}
 
 	get accessibilityOffText() {
-		return this._textOff || Switch.i18nBundle.getText(SWITCH_OFF);
+		return this._textOff;
 	}
 
 	get hiddenText() {
@@ -275,7 +289,7 @@ class Switch extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
+		return [getEffectiveAriaLabelText(this), this.hiddenText].join(" ").trim();
 	}
 
 	static get dependencies() {

package/src/Tab.js

@@ -1,9 +1,22 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+	TAB_ARIA_DESIGN_POSITIVE,
+	TAB_ARIA_DESIGN_NEGATIVE,
+	TAB_ARIA_DESIGN_CRITICAL,
+	TAB_ARIA_DESIGN_NEUTRAL,
+} from "./generated/i18n/i18n-defaults.js";
+
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import SemanticColor from "./types/SemanticColor.js";
+import ListItemType from "./types/ListItemType.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 import CustomListItem from "./CustomListItem.js";
 
 // Templates
@@ -16,6 +29,13 @@ import css from "./generated/themes/Tab.css.js";
 import stripCss from "./generated/themes/TabInStrip.css.js";
 import overflowCss from "./generated/themes/TabInOverflow.css.js";
 
+const DESIGN_DESCRIPTIONS = {
+	[SemanticColor.Positive]: TAB_ARIA_DESIGN_POSITIVE,
+	[SemanticColor.Negative]: TAB_ARIA_DESIGN_NEGATIVE,
+	[SemanticColor.Neutral]: TAB_ARIA_DESIGN_NEUTRAL,
+	[SemanticColor.Critical]: TAB_ARIA_DESIGN_CRITICAL,
+};
+
 /**
  * @public
  */
@@ -94,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the icon source URI to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous built-in icons.
-		 * See all the available icons in 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>.
+		 * See all the available icons in 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}
 		 * @defaultvalue ""
@@ -119,7 +139,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> The design depends on the current theme.
-		 * @type {SemanticColor}
+		 * @type {sap.ui.webcomponents.main.types.SemanticColor}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -139,12 +159,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-			noAttribute: true,
-		},
-
 		_selected: {
 			type: Boolean,
 		},
@@ -170,7 +184,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Tab
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-tab
  * @implements sap.ui.webcomponents.main.ITab
  * @public
@@ -200,9 +214,18 @@ class Tab extends UI5Element {
 		return css;
 	}
 
+	set _tabIndex(val) {
+		this.getTabInStripDomRef().setAttribute("tabindex", val);
+	}
+
+	get _tabIndex() {
+		return this.getTabInStripDomRef().getAttribute("tabindex");
+	}
+
 	static get dependencies() {
 		return [
 			Icon,
+			Button,
 			CustomListItem,
 		];
 	}
@@ -246,7 +269,7 @@ class Tab extends UI5Element {
 	}
 
 	get _effectiveSlotName() {
-		return this.isOnSelectedTabPath ? this._individualSlot : "disabled-slot";
+		return this.isOnSelectedTabPath ? this._individualSlot : `disabled-${this._individualSlot}`;
 	}
 
 	get _defaultSlotName() {
@@ -260,6 +283,7 @@ class Tab extends UI5Element {
 
 	/**
 	 * Returns the DOM reference of the tab that is placed in the header.
+	 * <b>Note:</b> Tabs, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs will return <code>null</code>.
 	 * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
 	 *
 	 * @function
@@ -267,14 +291,18 @@ class Tab extends UI5Element {
 	 * @since 1.0.0-rc.16
 	 */
 	getTabInStripDomRef() {
-		return this._getTabInStripDomRef;
+		if (this._getElementInStrip) {
+			return this._getElementInStrip();
+		}
+
+		return null;
 	}
 
 	getFocusDomRef() {
 		let focusedDomRef = super.getFocusDomRef();
 
-		if (this._getTabContainerHeaderItemCallback) {
-			focusedDomRef = this._getTabContainerHeaderItemCallback();
+		if (this._getElementInStrip) {
+			focusedDomRef = this._getElementInStrip();
 		}
 
 		return focusedDomRef;
@@ -324,6 +352,10 @@ class Tab extends UI5Element {
 			labels.push(`${this._id}-icon`);
 		}
 
+		if (this._designDescription) {
+			labels.push(`${this._id}-designDescription`);
+		}
+
 		return labels.join(" ");
 	}
 
@@ -369,11 +401,32 @@ class Tab extends UI5Element {
 		return classes.join(" ");
 	}
 
-	get headerSemanticIconClasses() {
-		const classes = ["ui5-tab-strip-item-semanticIcon"];
+	get semanticIconName() {
+		switch (this.design) {
+		case SemanticColor.Positive:
+			return "sys-enter-2";
+		case SemanticColor.Negative:
+			return "error";
+		case SemanticColor.Critical:
+			return "alert";
+		default:
+			return null;
+		}
+	}
 
-		if (this.design !== SemanticColor.Default) {
-			classes.push(`ui5-tab-strip-item-semanticIcon--${this.design.toLowerCase()}`);
+	get _designDescription() {
+		if (this.design === SemanticColor.Default) {
+			return null;
+		}
+
+		return Tab.i18nBundle.getText(DESIGN_DESCRIPTIONS[this.design]);
+	}
+
+	get semanticIconClasses() {
+		const classes = ["ui5-tab-semantic-icon"];
+
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
+			classes.push(`ui5-tab-semantic-icon--${this.design.toLowerCase()}`);
 		}
 
 		return classes.join(" ");
@@ -382,11 +435,11 @@ class Tab extends UI5Element {
 	get overflowClasses() {
 		const classes = ["ui5-tab-overflow-item"];
 
-		if (this.design !== SemanticColor.Default) {
+		if (this.design !== SemanticColor.Default && this.design !== SemanticColor.Neutral) {
 			classes.push(`ui5-tab-overflow-item--${this.design.toLowerCase()}`);
 		}
 
-		if (this.disabled) {
+		if (this.effectiveDisabled) {
 			classes.push("ui5-tab-overflow-item--disabled");
 		}
 
@@ -398,7 +451,11 @@ class Tab extends UI5Element {
 	}
 
 	get overflowState() {
-		return (this.disabled || this.isSingleClickArea) ? "Inactive" : "Active";
+		return (this.disabled || this.isSingleClickArea) ? ListItemType.Inactive : ListItemType.Active;
+	}
+
+	static async onDefine() {
+		Tab.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/TabContainer.hbs

@@ -1,11 +1,12 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
-	<div class="{{classes.header}}" id="{{_id}}-header">
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+	>
 		<div
 			class="ui5-tc__overflow ui5-tc__overflow--start"
 			@click="{{_onOverflowClick}}"