@openui5/sap.ui.webc.main 1.97.1 → 1.100.0

package/src/sap/ui/webc/main/Switch.js

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/Switch"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	var SwitchDesign = library.SwitchDesign;
@@ -42,21 +43,32 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.main.Switch
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Switch = WebComponent.extend("sap.ui.webc.main.Switch", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-switch-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
+				/**
+				 * Sets the accessible aria name of the component.
+				 */
+				accessibleName: {
+					type: "string"
+				},
+
 				/**
 				 * Defines if the component is checked. <br>
 				 * <br>
@@ -78,13 +90,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Defines whether the component is disabled. <br>
-				 * <br>
-				 * <b>Note:</b> A disabled component is noninteractive.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -107,6 +122,30 @@ sap.ui.define([
 				textOn: {
 					type: "string",
 					defaultValue: ""
+				},
+
+				/**
+				 * Defines the width of the control
+				 */
+				width: {
+					type: "sap.ui.core.CSSSize",
+					defaultValue: null,
+					mapping: "style"
+				}
+			},
+			associations: {
+
+				/**
+				 * Receives id(or many ids) of the controls that label this control.
+				 */
+				ariaLabelledBy: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					mapping: {
+						type: "property",
+						to: "accessibleNameRef",
+						formatter: "_getAriaLabelledByForRendering"
+					}
 				}
 			},
 			events: {
@@ -121,5 +160,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(Switch.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Switch;
 });

package/src/sap/ui/webc/main/Tab.js

@@ -8,8 +8,9 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"./thirdparty/Tab"
-], function(WebComponent, library) {
+], function(WebComponent, library, EnabledPropagator) {
 	"use strict";
 
 	var SemanticColor = library.SemanticColor;
@@ -26,7 +27,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Tab</code> represents a selectable item inside a <code>sap.ui.webc.main.TabContainer</code>. It defines both the item in the tab strip (top part of the <code>sap.ui.webc.main.TabContainer</code>) and the content that is presented to the user once the tab is selected.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -46,7 +47,7 @@ sap.ui.define([
 			properties: {
 
 				/**
-				 * Represents the "additionalText" text, which is displayed in the tab filter.
+				 * Represents the "additionalText" text, which is displayed in the tab.
 				 */
 				additionalText: {
 					type: "string",
@@ -77,11 +78,16 @@ sap.ui.define([
 				},
 
 				/**
-				 * Enabled items can be selected.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -118,9 +124,22 @@ sap.ui.define([
 					type: "sap.ui.core.Control",
 					multiple: true
 				}
-			}
+			},
+			methods: ["getTabInStripDomRef"]
 		}
 	});
 
+	/**
+	 * Returns the DOM reference of the tab that is placed in the header. <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
+	 * @public
+	 * @name sap.ui.webc.main.Tab#getTabInStripDomRef
+	 * @function
+	 */
+
+	EnabledPropagator.call(Tab.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Tab;
 });

package/src/sap/ui/webc/main/TabContainer.js

@@ -13,6 +13,7 @@ sap.ui.define([
 	"use strict";
 
 	var TabLayout = library.TabLayout;
+	var TabsOverflowMode = library.TabsOverflowMode;
 
 	/**
 	 * Constructor for a new <code>TabContainer</code>.
@@ -35,17 +36,18 @@ sap.ui.define([
 	 *     <li><code>sap.ui.webc.main.TabSeparator</code> - used to separate tabs with a vertical line</li>
 	 * </ul>
 	 *
-	 * <h3>Stable DOM Refs</h3>
+	 * <h3>CSS Shadow Parts</h3>
 	 *
-	 * In the context of <code>sap.ui.webc.main.TabContainer</code>, you can provide a custom stable DOM refs for:
+	 * <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>sap.ui.webc.main.TabContainer</code> exposes the following CSS Shadow Parts:
 	 * <ul>
-	 *     <li>Each <code>sap.ui.webc.main.Tab</code> Example: <code>
-	 *             <ui5-tab stable-dom-ref="in-stock"></ui5-tab>
-	 *         </code></li>
+	 *     <li>content - Used to style the content of the component</li>
 	 * </ul>
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -88,7 +90,7 @@ sap.ui.define([
 				/**
 				 * Defines whether the overflow select list is displayed. <br>
 				 * <br>
-				 * The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.
+				 * The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab.
 				 */
 				showOverflow: {
 					type: "boolean",
@@ -115,6 +117,26 @@ sap.ui.define([
 					defaultValue: TabLayout.Standard
 				},
 
+				/**
+				 * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab "More".
+				 *
+				 * <br>
+				 * <br>
+				 * <b>Note:</b> Only one overflow at the end would be displayed by default, but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.
+				 *
+				 * <br>
+				 * <br>
+				 * Available options are:
+				 * <ul>
+				 *     <li><code>End</code></li>
+				 *     <li><code>StartAndEnd</code></li>
+				 * </ul>
+				 */
+				tabsOverflowMode: {
+					type: "sap.ui.webc.main.TabsOverflowMode",
+					defaultValue: TabsOverflowMode.End
+				},
+
 				/**
 				 * Defines the width of the control
 				 */
@@ -144,6 +166,15 @@ sap.ui.define([
 					type: "sap.ui.webc.main.IButton",
 					multiple: false,
 					slot: "overflowButton"
+				},
+
+				/**
+				 * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, the default button will be used.
+				 */
+				startOverflowButton: {
+					type: "sap.ui.webc.main.IButton",
+					multiple: false,
+					slot: "startOverflowButton"
 				}
 			},
 			events: {
@@ -172,5 +203,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TabContainer;
 });

package/src/sap/ui/webc/main/TabSeparator.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.TabSeparator</code> represents a vertical line to separate tabs inside a <code>sap.ui.webc.main.TabContainer</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -44,5 +44,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TabSeparator;
 });

package/src/sap/ui/webc/main/Table.js

@@ -40,8 +40,23 @@ sap.ui.define([
 	 * <br>
 	 * <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.
 	 *
+	 * <h3>Keyboard Handling</h3>
+	 *
+	 *
+	 *
+	 * <ul>
+	 *     <li>[F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.</li>
+	 *     <li>[CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.</li>
+	 *     <li>[HOME]/[END] - Focuses the first/last item.</li>
+	 *     <li>[PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).</li>
+	 *     <li>[ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.</li>
+	 *     <li>[SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).</li>
+	 *     <li>[SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.</li>
+	 *     <li>[CTRL]+[HOME]/[END] - Same behavior as HOME & END.</li> *
+	 * </ul>
+	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -87,7 +102,7 @@ sap.ui.define([
 				 * <br>
 				 *
 				 *
-				 * <b>Limitations:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing="Button"</code>.
+				 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing="Button"</code>.
 				 */
 				growing: {
 					type: "sap.ui.webc.main.TableGrowingMode",
@@ -162,7 +177,7 @@ sap.ui.define([
 				/**
 				 * Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br>
 				 * <br>
-				 * <b>Limitations:</b>
+				 * <b>Restrictions:</b>
 				 * <ul>
 				 *     <li>Browsers that do not support this feature:
 				 *         <ul>
@@ -277,9 +292,13 @@ sap.ui.define([
 						}
 					}
 				}
-			}
+			},
+			designtime: "sap/ui/webc/main/designtime/Table.designtime"
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Table;
 });

package/src/sap/ui/webc/main/TableCell.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -65,5 +65,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TableCell;
 });

package/src/sap/ui/webc/main/TableColumn.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,5 +96,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TableColumn;
 });

package/src/sap/ui/webc/main/TableGroupRow.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -65,5 +65,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TableGroupRow;
-});
+});

package/src/sap/ui/webc/main/TableRow.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -96,5 +96,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TableRow;
 });

package/src/sap/ui/webc/main/TextArea.js

@@ -8,9 +8,11 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
-	"./thirdparty/TextArea"
-], function(WebComponent, library, coreLibrary) {
+	"./thirdparty/TextArea",
+	"./thirdparty/features/InputElementsFormSupport"
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -39,44 +41,43 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.main.TextArea
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var TextArea = WebComponent.extend("sap.ui.webc.main.TextArea", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-textarea-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
-				 * Sets the accessible aria name of the component.
+				 * Defines the accessible aria name of the component.
 				 */
 				accessibleName: {
 					type: "string"
 				},
 
 				/**
-				 * Receives id(or many ids) of the elements that label the textarea.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				accessibleNameRef: {
-					type: "string",
-					defaultValue: ""
-				},
-
-				/**
-				 * Indicates whether the user can interact with the component or not. <br>
-				 * <br>
-				 * <b>Note:</b> A disabled component is completely noninteractive.
-				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -230,6 +231,21 @@ sap.ui.define([
 					mapping: "style"
 				}
 			},
+			associations: {
+
+				/**
+				 * Receives id(or many ids) of the controls that label this control.
+				 */
+				ariaLabelledBy: {
+					type: "sap.ui.core.Control",
+					multiple: true,
+					mapping: {
+						type: "property",
+						to: "accessibleNameRef",
+						formatter: "_getAriaLabelledByForRendering"
+					}
+				}
+			},
 			events: {
 
 				/**
@@ -249,5 +265,10 @@ sap.ui.define([
 		}
 	});
 
+	EnabledPropagator.call(TextArea.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TextArea;
 });

package/src/sap/ui/webc/main/TimePicker.js

@@ -8,9 +8,10 @@
 sap.ui.define([
 	"sap/ui/webc/common/WebComponent",
 	"./library",
+	"sap/ui/core/EnabledPropagator",
 	"sap/ui/core/library",
 	"./thirdparty/TimePicker"
-], function(WebComponent, library, coreLibrary) {
+], function(WebComponent, library, EnabledPropagator, coreLibrary) {
 	"use strict";
 
 	var ValueState = coreLibrary.ValueState;
@@ -62,27 +63,36 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0 This control is experimental and its API might change significantly.
 	 * @alias sap.ui.webc.main.TimePicker
+	 * @implements sap.ui.core.IFormContent
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var TimePicker = WebComponent.extend("sap.ui.webc.main.TimePicker", {
 		metadata: {
 			library: "sap.ui.webc.main",
 			tag: "ui5-time-picker-ui5",
+			interfaces: [
+				"sap.ui.core.IFormContent"
+			],
 			properties: {
 
 				/**
-				 * Determines whether the <code>sap.ui.webc.main.TimePicker</code> is displayed as disabled.
+				 * Defines whether the control is enabled. A disabled control can't be interacted with, and it is not in the tab chain.
 				 */
-				disabled: {
+				enabled: {
 					type: "boolean",
-					defaultValue: false
+					defaultValue: true,
+					mapping: {
+						type: "attribute",
+						to: "disabled",
+						formatter: "_mapEnabled"
+					}
 				},
 
 				/**
@@ -235,5 +245,10 @@ sap.ui.define([
 	 * @function
 	 */
 
+	EnabledPropagator.call(TimePicker.prototype);
+
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return TimePicker;
 });

package/src/sap/ui/webc/main/Title.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.main.Title</code> component is used to display titles inside a page. It is a simple, large-sized text with explicit header/title semantics.
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -85,5 +85,8 @@ sap.ui.define([
 		}
 	});
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Title;
 });

package/src/sap/ui/webc/main/Toast.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.97.1
+	 * @version 1.100.0
 	 *
 	 * @constructor
 	 * @public
@@ -128,5 +128,8 @@ sap.ui.define([
 	 * @function
 	 */
 
+	/* CUSTOM CODE START */
+	/* CUSTOM CODE END */
+
 	return Toast;
 });