@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/src/TabContainerPopover.hbs

@@ -3,16 +3,20 @@
 	horizontal-align="Right"
 	placement-type="Bottom"
 	content-only-on-desktop
-	with-padding
-	no-arrow
+	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
-	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
+	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
+		{{#if _endOverflowItems.length}}
+			{{#each _endOverflowItems}}
 				{{this.overflowPresentation}}
-			{{/unless}}
-		{{/each}}
+			{{/each}}
+		{{else}}
+			{{#each _startOverflowItems}}
+				{{this.overflowPresentation}}
+			{{/each}}
+		{{/if}}
 	</ui5-list>
 	<div slot="footer" class="ui5-responsive-popover-footer">
 		<ui5-button

package/src/TabInOverflow.hbs

@@ -2,7 +2,6 @@
 	id="{{this._id}}"
 	class="{{this.overflowClasses}}"
 	type="{{this.overflowState}}"
-	?selected="{{this.effectiveSelected}}"
 	?disabled="{{this.effectiveDisabled}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"

package/src/TabInStrip.hbs

@@ -1,5 +1,5 @@
-<li id="{{this._id}}"
-	class="{{this.headerClasses}}"
+<div id="{{this._id}}"
+	class="{{this.stripClasses}}"
 	tabindex="{{this._tabIndex}}"
 	role="tab"
 	aria-posinset="{{this._posinset}}"
@@ -10,9 +10,7 @@
 	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
 	data-ui5-stable="{{this.stableDomRef}}"
-	style="list-style-type: none;"
 >
-
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
 			<ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
@@ -20,7 +18,6 @@
 	{{/if}}
 
 	<div class="ui5-tab-strip-itemContent">
-
 		{{#unless this._isInline}}
 			{{> additionalText}}
 		{{/unless}}
@@ -28,19 +25,12 @@
 		{{#if this.text}}
 			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
 				<span class="{{this.headerSemanticIconClasses}}"></span>
-				{{this.text}}
+				{{this.displayText}}
 			</span>
 		{{/if}}
-
-		{{#if this._isInline}}
-			{{> additionalText}}
-		{{/if}}
-
 	</div>
+</div>
 
-</li>
-
-<!-- Additional text -->
 {{#*inline additionalText}}
 	{{#if this.additionalText}}
 		<span class="ui5-tab-strip-itemAdditionalText" id="{{this._id}}-additionalText">{{this.additionalText}}</span>

package/src/TabSeparator.js

@@ -1,6 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import TabSeparatorTemplate from "./generated/templates/TabSeparatorTemplate.lit.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+
+import TabContainer from "./TabContainer.js";
+
+// Templates
+import TabSeparatorInStripTemplate from "./generated/templates/TabSeparatorInStripTemplate.lit.js";
+import TabSeparatorInOverflowTemplate from "./generated/templates/TabSeparatorInOverflowTemplate.lit.js";
+
+// Styles
+import stripCss from "./generated/themes/TabSeparatorInStrip.css.js";
+import overflowCss from "./generated/themes/TabSeparatorInOverflow.css.js";
 
 /**
  * @public
@@ -30,15 +40,44 @@ class TabSeparator extends UI5Element {
 		return litRender;
 	}
 
-	static get template() {
-		return TabSeparatorTemplate;
+	static get stripTemplate() {
+		return TabSeparatorInStripTemplate;
+	}
+
+	static get overflowTemplate() {
+		return TabSeparatorInOverflowTemplate;
+	}
+
+	get classes() {
+		return {
+			"ui5-tc__separator": true,
+		};
 	}
 
 	get isSeparator() {
 		return true;
 	}
+
+	getTabInStripDomRef() {
+		return this._getTabInStripDomRef;
+	}
+
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
+
+	get stripPresentation() {
+		return executeTemplate(this.constructor.stripTemplate, this);
+	}
+
+	get overflowPresentation() {
+		return executeTemplate(this.constructor.overflowTemplate, this);
+	}
 }
 
 TabSeparator.define();
 
+TabContainer.registerTabStyles(stripCss);
+TabContainer.registerStaticAreaTabStyles(overflowCss);
+
 export default TabSeparator;

package/src/TabSeparatorInOverflow.hbs

@@ -0,0 +1,8 @@
+<ui5-li-custom
+	id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	role="separator"
+	class="{{classes}}"
+	disabled
+>
+</ui5-li-custom>

package/src/TabSeparatorInStrip.hbs

@@ -0,0 +1,6 @@
+<div
+	id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	role="separator"
+	class="{{classes}}"
+></div>

package/src/Table.hbs

@@ -5,7 +5,7 @@
 
 	<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}" role="table">
 		<thead>
-			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" style="height: 48px" @click="{{_onColumnHeaderClick}}">
+			<tr id="{{_columnHeader.id}}" role="row" class="ui5-table-header-row" aria-label="{{ariaLabelText}}" tabindex="{{_columnHeader._tabIndex}}" @click="{{_onColumnHeaderClick}}">
 				{{#if isMultiSelect}}
 					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
 						<ui5-checkbox class="ui5-table-select-all-checkbox"
@@ -29,7 +29,7 @@
 			{{/each}}
 
 			{{#unless rows.length}}
-				{{#if showNoData}}
+				{{#unless hideNoData}}
 					<tr class="ui5-table-no-data-row-root" role="row">
 						<td colspan="{{visibleColumnsCount}}" role="cell">
 
@@ -38,7 +38,7 @@
 							</div>
 						</td>
 					</tr>
-				{{/if}}
+				{{/unless}}
 			{{/unless}}
 
 			{{#if growsWithButton}}
@@ -55,8 +55,8 @@
 {{#*inline "moreRow"}}
 <tr>
 	<td colspan="{{visibleColumnsCount}}">
-		<div load-more>
-			<div 
+		<div growing-button>
+			<div
 				tabindex="0"
 				role="button"
 				aria-labelledby="{{loadMoreAriaLabelledBy}}"
@@ -64,12 +64,12 @@
 				@click="{{_onLoadMoreClick}}"
 				@keydown="{{_onLoadMoreKeydown}}"
 				@keyup="{{_onLoadMoreKeyup}}"
-				load-more-inner
+				growing-button-inner
 			>
-				<span id="{{_id}}-showMore-text" load-more-text>{{_moreText}}</span>
+				<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
 
-				{{#if moreSubtext}}
-					<span id="{{_id}}-showMore-desc" load-more-subtext>{{moreSubtext}}</span>
+				{{#if growingButtonSubtext}}
+					<span id="{{_id}}-growingButton-subtext" growing-button-subtext>{{growingButtonSubtext}}</span>
 				{{/if}}
 			</div>
 		</div>
@@ -87,11 +87,13 @@
 
 {{#*inline "busyRow"}}
 	<div tabindex="-1" class="ui5-table-busy-row">
-		<ui5-busyindicator
+		<ui5-busy-indicator
+			delay="{{busyDelay}}"
 			class="ui5-table-busy-ind"
 			style="{{styles.busy}}"
 			active
 			size="Medium"
-		></ui5-busyindicator>
+			data-sap-focus-ref
+		></ui5-busy-indicator>
 	</div>
-{{/inline}}
+{{/inline}}

package/src/Table.js

@@ -2,21 +2,24 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import BusyIndicator from "./BusyIndicator.js";
 import TableMode from "./types/TableMode.js";
+import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being used in the renderer
 
 // Texts
 import {
 	LOAD_MORE_TEXT,
 	ARIA_LABEL_SELECT_ALL_CHECKBOX,
 	TABLE_HEADER_ROW_TEXT,
+	TABLE_ROW_POSITION,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -33,10 +36,11 @@ const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
 const metadata = {
 	tag: "ui5-table",
 	managedSlots: true,
+	fastNavigation: true,
 	slots: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
 
 		/**
-		 * Defines the <code>ui5-table</code> rows.
+		 * Defines the component rows.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-table-row</code> for the intended design.
 		 *
@@ -48,10 +52,11 @@ const metadata = {
 			propertyName: "rows",
 			type: HTMLElement,
 			individualSlots: true,
+			invalidateOnChildChange: true,
 		},
 
 		/**
-		 * Defines the configuration for the columns of the <code>ui5-table</code>.
+		 * Defines the configuration for the columns of the component.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-table-column</code> for the intended design.
 		 *
@@ -71,7 +76,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
 
 		/**
-		 * Defines the text that will be displayed when there is no data and <code>showNoData</code> is present.
+		 * Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -82,7 +87,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text that will be displayed inside the <code>More</code> button at the bottom of the table,
+		 * Defines the text that will be displayed inside the growing button at the bottom of the table,
 		 * meant for loading more rows upon press.
 		 *
 		 * <br><br>
@@ -92,25 +97,25 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @since 1.0.0-rc.11
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		moreText: {
+		growingButtonText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the subtext that will be displayed under the <code>moreText</code>.
+		 * Defines the subtext that will be displayed under the <code>growingButtonText</code>.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @since 1.0.0-rc.11
+		 * @since 1.0.0-rc.15
 		 * @public
 		 */
-		moreSubtext: {
+		 growingButtonSubtext: {
 			type: String,
 		},
 
@@ -120,8 +125,9 @@ const metadata = {
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		showNoData: {
+		hideNoData: {
 			type: Boolean,
 		},
 
@@ -139,7 +145,7 @@ const metadata = {
 		 * <code>None</code> (default) - The growing is off.
 		 * <br><br>
 		 *
-		 * <b>Limitations:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
+		 * <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}
 		 * @defaultvalue "None"
@@ -166,11 +172,23 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
+
 		/**
 		 * 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>
@@ -197,7 +215,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the mode of the <code>ui5-table</code>.
+		 * Defines the mode of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -274,7 +292,7 @@ const metadata = {
 		},
 
 		/**
-		 * Fired when the <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
+		 * 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
 		 * @param {Array} poppedColumns popped-in columns.
@@ -332,6 +350,30 @@ const metadata = {
  * On tablets, special consideration should be given to the number of visible columns
  * and rows due to the limited performance of some devices.
  *
+ * <h3>Selection</h3>
+ * To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes:
+ * <code>SingleSelect</code> and <code>MultiSelect</code>.
+ * <br>
+ * In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between
+ * <code>Active</code> or <code>Inactive</code>.
+ * <br><br>
+ * In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or
+ * by pressing the <code>Space</code> or <code>Enter</code> keys.
+ * <br>
+ * In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the
+ * <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row.
+ * In order to select all the available rows at once, you can use the selection checkbox presented in the table's header.
+ * <br><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>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Table.js";</code>
@@ -347,7 +389,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.Table
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-table
- * @appenddocs TableColumn TableRow TableCell
+ * @appenddocs TableColumn TableRow TableGroupRow TableCell
  * @public
  */
 class Table extends UI5Element {
@@ -368,11 +410,11 @@ class Table extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [BusyIndicator];
+		return [BusyIndicator, CheckBox];
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Table.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
@@ -394,8 +436,6 @@ class Table extends UI5Element {
 
 		this._handleResize = this.popinContent.bind(this);
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-
 		this.tableEndObserved = false;
 		this.addEventListener("ui5-selection-requested", this._handleSelect.bind(this));
 	}
@@ -403,13 +443,16 @@ class Table extends UI5Element {
 	onBeforeRendering() {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
+		const rowsCount = this.rows.length;
+		const selectedRows = this.selectedRows;
 
-		this.rows.forEach(row => {
+		this.rows.forEach((row, index) => {
 			if (row._columnsInfoString !== columnSettingsString) {
 				row._columnsInfo = columnSettings;
 				row._columnsInfoString = JSON.stringify(row._columnsInfo);
 			}
 
+			row._ariaPosition = Table.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
 			row._busy = this.busy;
 			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
 			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
@@ -421,8 +464,10 @@ class Table extends UI5Element {
 			return !this._hiddenColumns[index];
 		});
 
-		this._noDataDisplayed = !this.rows.length && this.showNoData;
+		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
+
+		this._allRowsSelected = selectedRows.length === this.rows.length;
 	}
 
 	onAfterRendering() {
@@ -675,12 +720,12 @@ class Table extends UI5Element {
 		return !isIE() && this.growing === TableGrowingMode.Scroll;
 	}
 
-	get _moreText() {
-		return this.moreText || this.i18nBundle.getText(LOAD_MORE_TEXT);
+	get _growingButtonText() {
+		return this.growingButtonText || Table.i18nBundle.getText(LOAD_MORE_TEXT);
 	}
 
 	get ariaLabelText() {
-		const headerRowText = this.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
+		const headerRowText = Table.i18nBundle.getText(TABLE_HEADER_ROW_TEXT);
 		const columnsTitle = this.columns.map(column => {
 			return column.textContent.trim();
 		}).join(" ");
@@ -689,15 +734,15 @@ class Table extends UI5Element {
 	}
 
 	get ariaLabelSelectAllText() {
-		return this.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
+		return Table.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
 	}
 
 	get loadMoreAriaLabelledBy() {
 		if (this.moreDataText) {
-			return `${this._id}-showMore-text ${this._id}-showMore-desc`;
+			return `${this._id}-growingButton-text ${this._id}-growingButton-subtext`;
 		}
 
-		return `${this._id}-showMore-text`;
+		return `${this._id}-growingButton-text`;
 	}
 
 	get tableEndDOM() {

package/src/TableCell.js

@@ -12,7 +12,7 @@ const metadata = {
 	tag: "ui5-table-cell",
 	slots: /** @lends sap.ui.webcomponents.main.TableCell.prototype */ {
 		/**
-		 * Specifies the content of the <code>ui5-table-cell</code>.
+		 * Specifies the content of the component.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -48,6 +48,15 @@ const metadata = {
  *
  * The <code>ui5-table-cell</code> component defines the structure of the data in a single <code>ui5-table</code> cell.
  *
+ * <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-cell</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>cell - Used to style the native <code>td</code> element</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TableCell

package/src/TableColumn.js

@@ -27,7 +27,7 @@ const metadata = {
 		 * 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>40em</code> shows this column on tablet (and desktop) but hides it on mobile.
+		 * <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.
 		 *
@@ -52,7 +52,7 @@ const metadata = {
 		},
 
 		/**
-		 * According to your <code>minWidth</code> settings, the <code>ui5-table-column</code> can be hidden
+		 * 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.
@@ -96,6 +96,15 @@ const metadata = {
  * 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.webcomponents.main.TableColumn

package/src/TableGroupRow.hbs

@@ -0,0 +1,12 @@
+<tr
+	class="ui5-table-group-row-root"
+	part="group-row"
+	role="row"
+	aria-label={{ariaLabelText}}
+	tabindex="{{_tabIndex}}"
+	dir="{{effectiveDir}}"
+>
+	<td colspan={{colSpan}}>
+		<slot></slot>
+	</td>
+</tr>