@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/TabInOverflow.hbs

@@ -1,10 +1,9 @@
 <ui5-li-custom
-	id="{{this._id}}"
+	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
 	._realTab="{{this}}"
 	style="{{this._style}}"
 >
@@ -13,15 +12,18 @@
 			{{#if this.semanticIconName}}
 				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
 			{{/if}}
-
 			{{#if this.icon}}
 				<ui5-icon name="{{this.icon}}"></ui5-icon>
 			{{/if}}
 			{{this.text}}
-
 			{{#if this.additionalText}}
 				({{this.additionalText}})
 			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
 		</div>
 	</div>
 </ui5-li-custom>

package/src/TabInStrip.hbs

@@ -1,6 +1,6 @@
 <div id="{{this._id}}"
 	class="{{this.stripClasses}}"
-	tabindex="{{this._tabIndex}}"
+	tabindex="-1"
 	role="tab"
 	aria-posinset="{{this._posinset}}"
 	aria-setsize="{{this._setsize}}"
@@ -14,7 +14,13 @@
 >
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
-			<ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+			<ui5-icon id="{{this._id}}-icon" name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+		</div>
+	{{/if}}
+
+	{{#if this._designDescription}}
+		<div id="{{this._id}}-designDescription" class="ui5-tab-strip-design-description">
+			{{this._designDescription}}
 		</div>
 	{{/if}}
 
@@ -47,7 +53,8 @@
 				design="Transparent"
 				tabindex="-1"
 				?disabled="{{disabled}}"
-				aria-haspopup="true">
+				tooltip="{{expandButtonTitle}}"
+				aria-haspopup="Menu">
 			</ui5-button>
 		</div>
 	{{/if}}

package/src/TabSeparator.js

@@ -25,10 +25,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TabSeparator
- * @extends UI5Element
+ * @alias sap.ui.webc.main.TabSeparator
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tab-separator
- * @implements sap.ui.webcomponents.main.ITab
+ * @implements sap.ui.webc.main.ITab
  * @public
  */
 class TabSeparator extends UI5Element {
@@ -58,8 +58,15 @@ class TabSeparator extends UI5Element {
 		return true;
 	}
 
+	/**
+	 * Returns the DOM reference of the separator that is placed in the header.
+	 * <b>Note:</b> Tabs and separators, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return <code>null</code>.
+	 *
+	 * @function
+	 * @public
+	 */
 	getTabInStripDomRef() {
-		return this._tabInStripDomRef;
+		return this._getElementInStrip();
 	}
 
 	get stableDomRef() {

package/src/Table.hbs

@@ -9,7 +9,6 @@
 		<thead>
 			<tr
 				id="{{_columnHeader.id}}"
-				role="row"
 				class="ui5-table-header-row"
 				aria-label="{{ariaLabelText}}"
 				tabindex="{{_columnHeader._tabIndex}}"
@@ -34,6 +33,7 @@
 				{{#each visibleColumns}}
 					<slot name="{{this._individualSlot}}"></slot>
 				{{/each}}
+				<th class="ui5-table-header-row-navigated" aria-hidden="true"></th>
 			</tr>
 		</thead>
 
@@ -44,7 +44,7 @@
 
 			{{#unless rows.length}}
 				{{#unless hideNoData}}
-					<tr class="ui5-table-no-data-row-root" role="row">
+					<tr class="ui5-table-no-data-row-root">
 						<td colspan="{{visibleColumnsCount}}" role="cell">
 
 							<div class="ui5-table-no-data-row">

package/src/Table.js

@@ -35,7 +35,7 @@ import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being us
 import {
 	LOAD_MORE_TEXT,
 	ARIA_LABEL_SELECT_ALL_CHECKBOX,
-	TABLE_HEADER_ROW_TEXT,
+	TABLE_HEADER_ROW_INFORMATION,
 	TABLE_ROW_POSITION,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -56,14 +56,14 @@ const metadata = {
 	tag: "ui5-table",
 	managedSlots: true,
 	fastNavigation: true,
-	slots: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Table.prototype */ {
 
 		/**
 		 * Defines the component rows.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-table-row</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITableRow[]}
+		 * @type {sap.ui.webc.main.ITableRow[]}
 		 * @slot rows
 		 * @public
 		 */
@@ -79,7 +79,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-table-column</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITableColumn[]}
+		 * @type {sap.ui.webc.main.ITableColumn[]}
 		 * @slot
 		 * @public
 		 */
@@ -92,7 +92,7 @@ const metadata = {
 			},
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Table.prototype */ {
 
 		/**
 		 * Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present.
@@ -166,7 +166,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * and the component will fallback to <code>growing="Button"</code>.
-		 * @type {TableGrowingMode}
+		 * @type {sap.ui.webc.main.types.TableGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.12
 		 * @public
@@ -194,7 +194,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -242,7 +242,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>None</code></li>
 		 * <ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webc.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.15
 		 * @public
@@ -322,11 +322,11 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+	events: /** @lends sap.ui.webc.main.Table.prototype */ {
 		/**
 		 * Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed.
 		 *
-		 * @event sap.ui.webcomponents.main.Table#row-click
+		 * @event sap.ui.webc.main.Table#row-click
 		 * @param {HTMLElement} row the activated row.
 		 * @public
 		 */
@@ -339,7 +339,7 @@ const metadata = {
 		/**
 		 * Fired when <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
 		 *
-		 * @event sap.ui.webcomponents.main.Table#popin-change
+		 * @event sap.ui.webc.main.Table#popin-change
 		 * @param {Array} poppedColumns popped-in columns.
 		 * @since 1.0.0-rc.6
 		 * @public
@@ -355,7 +355,7 @@ const metadata = {
 		 * <br><br>
 		 *
 		 * <b>Note:</b> The event will be fired if <code>growing</code> is set to <code>Button</code> or <code>Scroll</code>.
-		 * @event sap.ui.webcomponents.main.Table#load-more
+		 * @event sap.ui.webc.main.Table#load-more
 		 * @public
 		 * @since 1.0.0-rc.11
 		 */
@@ -365,7 +365,7 @@ const metadata = {
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
 		 *
-		 * @event sap.ui.webcomponents.main.Table#selection-change
+		 * @event sap.ui.webc.main.Table#selection-change
 		 * @param {Array} selectedRows An array of the selected rows.
 		 * @param {Array} previouslySelectedRows An array of the previously selected rows.
 		 * @public
@@ -444,8 +444,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Table
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Table
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-table
  * @appenddocs TableColumn TableRow TableGroupRow TableCell
  * @public
@@ -516,7 +516,7 @@ class Table extends UI5Element {
 	onBeforeRendering() {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
-		const rowsCount = this.rows.length;
+		const rowsCount = this.rows.length + 1;
 		const selectedRows = this.selectedRows;
 
 		this.rows.forEach((row, index) => {
@@ -525,7 +525,7 @@ class Table extends UI5Element {
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
-			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 2, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -1068,8 +1068,10 @@ class Table extends UI5Element {
 			this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
 		}
 
+		const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+
 		// invalidate only if hidden columns count has changed
-		if (this._hiddenColumns.length !== hiddenColumns.length) {
+		if (hiddenColumnsChange) {
 			this._hiddenColumns = hiddenColumns;
 			if (hiddenColumns.length) {
 				this.fireEvent("popin-change", {
@@ -1093,6 +1095,7 @@ class Table extends UI5Element {
 				demandPopin: column.demandPopin,
 				text: column.textContent,
 				popinText: column.popinText,
+				popinDisplay: column.popinDisplay,
 				visible: !this._hiddenColumns[index],
 			};
 		}, this);
@@ -1131,7 +1134,8 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const rowsCount = this.rows.length + 1;
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_INFORMATION, rowsCount);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");

package/src/TableCell.js

@@ -10,7 +10,7 @@ import styles from "./generated/themes/TableCell.css.js";
  */
 const metadata = {
 	tag: "ui5-table-cell",
-	slots: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TableCell.prototype */ {
 		/**
 		 * Specifies the content of the component.
 		 *
@@ -22,7 +22,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TableCell.prototype */ {
 		/**
 		 * @private
 		 */
@@ -36,8 +36,16 @@ const metadata = {
 		popined: {
 			type: Boolean,
 		},
+
+		/**
+		 * @private
+		 */
+		 _popinedInline: {
+			type: Boolean,
+		},
+
 	},
-	events: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
+	events: /** @lends sap.ui.webc.main.TableCell.prototype */ {
 	},
 };
 
@@ -59,10 +67,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TableCell
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TableCell
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-table-cell
- * @implements sap.ui.webcomponents.main.ITableCell
+ * @implements sap.ui.webc.main.ITableCell
  * @public
  */
 class TableCell extends UI5Element {

package/src/TableColumn.ts

@@ -0,0 +1,135 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import TableColumnTemplate from "./generated/templates/TableColumnTemplate.lit.js";
+import TableColumnPopinDisplay from "./types/TableColumnPopinDisplay.js";
+
+// Styles
+import styles from "./generated/themes/TableColumn.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-table-column</code> component allows to define column specific properties that are applied
+ * when rendering the <code>ui5-table</code> component.
+ *
+ * <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-table-column</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>column - Used to style the native <code>th</code> element</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TableColumn
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-table-column
+ * @implements sap.ui.webc.main.ITableColumn
+ * @public
+ */
+@customElement("ui5-table-column")
+class TableColumn extends UI5Element {
+	/**
+	 * Defines the minimum table width required to display this column. By default it is always displayed.
+	 * <br><br>
+	 * The responsive behavior of the <code>ui5-table</code> is determined by this property. As an example, by setting
+	 * <code>minWidth</code> property to <code>400</code> sets the minimum width to 400 pixels, and	shows this column on tablet (and desktop) but hides it on mobile.
+	 * <br>
+	 * For further responsive design options, see <code>demandPopin</code> property.
+	 *
+	 * @type {sap.ui.webc.base.types.Integer}
+	 * @name sap.ui.webc.main.TableColumn.prototype.minWidth
+	 * @defaultvalue Infinity
+	 * @public
+	 */
+	@property({ validator: Integer, defaultValue: Infinity })
+	minWidth!: number;
+
+	/**
+	 * The text for the column when it pops in.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.TableColumn.prototype.popinText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	popinText!: string;
+
+	/**
+	 * According to your <code>minWidth</code> settings, the component can be hidden
+	 * in different screen sizes.
+	 * <br><br>
+	 * Setting this property to <code>true</code>, shows this column as pop-in instead of hiding it.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.TableColumn.prototype.demandPopin
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	demandPopin!: boolean;
+
+	/**
+	 * Defines how the popin row is displayed.
+	 *
+	 * <br><br>
+	 * <b>The available values are:</b>
+	 *
+	 * <ul>
+	 * <li><code>Block</code></li>
+	 * <li><code>Inline</code></li>
+	 * </ul>
+	 *
+	 * @type {TableColumnPopinDisplay}
+	 * @name sap.ui.webc.main.TableColumn.prototype.popinDisplay
+	 * @defaultvalue "Block"
+	 * @public
+	 */
+	@property({ type: TableColumnPopinDisplay, defaultValue: TableColumnPopinDisplay.Block })
+	popinDisplay!: TableColumnPopinDisplay;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	first!: boolean;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	last!: boolean;
+
+	/**
+	 * Defines the content of the column header.
+	 *
+	 * @type {Node[]}
+	 * @slot
+	 * @name sap.ui.webc.main.TableColumn.prototype.default
+	 * @public
+	 */
+
+	static get styles() {
+		return styles;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return TableColumnTemplate;
+	}
+}
+
+TableColumn.define();
+
+export default TableColumn;

package/src/TableGroupRow.hbs

@@ -1,7 +1,6 @@
 <tr
 	class="ui5-table-group-row-root"
 	part="group-row"
-	role="row"
 	aria-label={{ariaLabelText}}
 	tabindex="{{_tabIndex}}"
 	@focusin="{{_onfocusin}}"

package/src/TableGroupRow.js

@@ -18,7 +18,7 @@ import styles from "./generated/themes/TableGroupRow.css.js";
  */
 const metadata = {
 	tag: "ui5-table-group-row",
-	slots: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TableGroupRow.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br>
@@ -32,7 +32,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TableGroupRow.prototype */ {
 		/**
 		 * Defines the mode of the row
 		 *
@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>SingleSelect</code></li>
 		 * <li><code>MultiSelect</code></li>
 		 * </ul>
-		 * @type {TableMode}
+		 * @type {sap.ui.webc.main.types.TableMode}
 		 * @defaultvalue "None"
 		 * @private
 		 */
@@ -69,7 +69,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
+	events: /** @lends sap.ui.webc.main.TableGroupRow.prototype */ {
 		_focused: {},
 	},
 };
@@ -92,11 +92,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TableGroupRow
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.TableGroupRow
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-table-group-row
  * @since 1.0.0-rc.15
- * @implements sap.ui.webcomponents.main.ITableRow
+ * @implements sap.ui.webc.main.ITableRow
  * @public
  */
 class TableGroupRow extends UI5Element {

package/src/TableRow.hbs

@@ -11,15 +11,16 @@
 	@touchend="{{_ontouchend}}"
 	aria-label="{{ariaLabelText}}"
 	aria-selected="{{this.selected}}"
+	aria-current="{{_ariaCurrent}}"
 	data-sap-focus-ref
 	part="row"
-	role="row"
+	data-ui5-dir="{{effectiveDir}}"
 >
 
 	{{#if isMultiSelect}}
-		<td 
-			class="ui5-table-multi-select-cell" 
-			aria-hidden="true" 
+		<td
+			class="ui5-table-multi-select-cell"
+			aria-hidden="true"
 			role="presentation"
 		>
 			<ui5-checkbox
@@ -42,22 +43,44 @@
 			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	{{/if}}
+
+	<td class="ui5-table-row-navigated" aria-hidden="true">
+		<div class="ui5-table-div-navigated"></div>
+	</td>
 </tr>
 
 {{#if shouldPopin}}
 	{{#each popinCells}}
-		<tr part="popin-row" role="row" class="{{this.classes}}"
+		<tr part="popin-row" class="{{this.classes}}"
 			@click="{{../_onrowclick}}"
 			@keydown="{{../_onkeydown}}"
 			@keyup="{{../_onkeyup}}">
 			<td colspan="{{../visibleCellsCount}}" role="cell">
-				{{#if this.popinText}}
-					<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+				{{#if popinDisplayInline}}
+					<div class="ui5-table-display-inline-container">
+						{{#if this.popinText}}
+							<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+						{{/if}}
+						<span class="ui5-table-cell-display-inline">
+							<slot name="{{this.cell._individualSlot}}"></slot>
+						</span>
+					</div>
+				{{else}}
+					{{#if this.popinText}}
+						<span class="ui5-table-row-popin-title">{{this.popinText}}:</span>
+					{{/if}}
+					<div>
+						<slot name="{{this.cell._individualSlot}}"></slot>
+					</div>
 				{{/if}}
-				<div>
-					<slot name="{{this.cell._individualSlot}}"></slot>
-				</div>
+			</td>
+
+			<td class="ui5-table-row-navigated" aria-hidden="true">
+				<div class="ui5-table-div-navigated"></div>
 			</td>
 		</tr>
 	{{/each}}
 {{/if}}
+
+
+