@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/TabContainer.hbs

@@ -7,40 +7,64 @@
 	{{/if}}
 
 	<div class="{{classes.header}}" id="{{_id}}-header">
-		<ui5-icon @click="{{_onHeaderBackArrowClick}}" class="{{classes.headerBackArrow}}" name="slim-arrow-left" tabindex="-1" accessible-name="{{previousIconACCName}}" show-tooltip></ui5-icon>
-
-		<!-- tab items -->
-		<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-			<ul
-				role="tablist"
-				class="{{classes.headerList}}"
-				@click="{{_onHeaderClick}}"
-				@keydown="{{_onHeaderKeyDown}}"
-				@keyup="{{_onHeaderKeyUp}}"
-			>
-				{{#each items}}
-					{{#unless this.isSeparator}}
-						{{this.stripPresentation}}
-					{{/unless}}
-					{{#if this.isSeparator}}
-						<li id="{{this._id}}" role="separator" class="{{../classes.separator}}" style="list-style-type: none;"></li>
-					{{/if}}
-				{{/each}}
-			</ul>
+		<div class="{{classes.headerInnerContainer}}">
+			<div class="{{classes.headerBackArrow}}">
+				<ui5-button @click="{{_onHeaderBackArrowClick}}"
+							icon="slim-arrow-left"
+							design="Transparent"
+							tabindex="-1"
+							title="{{previousIconACCName}}"></ui5-button>
+			</div>
+			<!-- tab items -->
+			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
+				<ul
+					role="tablist"
+					@focusin={{_onTablistFocusin}}
+					class="{{classes.headerList}}"
+					@click="{{_onHeaderClick}}"
+					@keydown="{{_onHeaderKeyDown}}"
+					@keyup="{{_onHeaderKeyUp}}"
+				>
+					{{#each items}}
+						{{#unless this.isSeparator}}
+							{{this.stripPresentation}}
+						{{/unless}}
+						{{#if this.isSeparator}}
+							<li
+								id="{{this._id}}"
+								data-ui5-stable="{{this.stableDomRef}}"
+								role="separator"
+								class="{{../classes.separator}}"
+							></li>
+						{{/if}}
+					{{/each}}
+				</ul>
+			</div>
+			<div class="{{classes.headerForwardArrow}}">
+			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
+						icon="slim-arrow-right"
+						design="Transparent"
+						tabindex="-1"
+						title="{{nextIconACCName}}"></ui5-button>
+		</div>
 		</div>
-
-		<ui5-icon @click="{{_onHeaderForwardArrowClick}}" class="{{classes.headerForwardArrow}}" name="slim-arrow-right" tabindex="-1" accessible-name="{{nextIconACCName}}" show-tooltip></ui5-icon>
-
 		<!-- overflow button -->
-		{{#if showOverflow}}
-			<ui5-button
+		{{#if shouldShowOverflow}}
+			<div
+				class="ui-tc__overflowButton"
 				@click="{{_onOverflowButtonClick}}"
-				class="{{classes.overflowButton}}"
-				icon="{{overflowMenuIcon}}"
-				design="Transparent"
-				aria-label="{{overflowMenuTitle}}"
-				aria-haspopup="true"
-			></ui5-button>
+			>
+				{{#if overflowButton.length}}
+					<slot name="overflowButton"></slot>
+				{{else}}
+					<ui5-button
+						icon="{{overflowMenuIcon}}"
+						design="Transparent"
+						tabindex="-1"
+						title="{{overflowMenuTitle}}"
+						aria-haspopup="true"></ui5-button>
+				{{/if}}
+			</div>
 		{{/if}}
 	</div>
 

package/src/TabContainer.js

@@ -8,11 +8,12 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-up.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
-import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
@@ -47,15 +48,30 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.ITab[]}
 		 * @public
-		 * @slot
+		 * @slot items
 		 */
 		"default": {
 			propertyName: "items",
 			type: HTMLElement,
 			individualSlots: true,
-			listenFor: { include: ["*"] },
+			invalidateOnChildChange: {
+				properties: true,
+				slots: false,
+			},
+		},
+
+		/**
+		 * Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.
+		 *
+		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @public
+		 * @slot
+		 * @since 1.0.0-rc.9
+		 */
+		overflowButton: {
+			type: HTMLElement,
 		},
 	},
 	properties: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
@@ -86,13 +102,20 @@ const metadata = {
 		 * Defines the placement of the tab strip (tab buttons area) relative to the actual tabs' content.
 		 * <br><br>
 		 * <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended
-		 * layout for most scenarios. Set to <code>Bottom</code> only when the <code>ui5-tabcontainer</code> is at the
+		 * layout for most scenarios. Set to <code>Bottom</code> only when the component is at the
 		 * bottom of the page and you want the tab strip to act as a menu.
 		 *
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Top</code></li>
+		 * <li><code>Bottom</code></li>
+		 * </ul>
+		 *
 		 * @type {TabContainerTabsPlacement}
 		 * @defaultvalue "Top"
 		 * @since 1.0.0-rc.7
-		 * @public
+		 * @private
 		 */
 		tabsPlacement: {
 			type: TabContainerTabsPlacement,
@@ -114,11 +137,11 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.
+		 * Defines the alignment of the content and the <code>additionalText</code> of a tab.
 		 *
 		 * <br><br>
 		 * <b>Note:</b>
-		 * The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt,
+		 * The content and the <code>additionalText</code> would be displayed vertically by defualt,
 		 * but when set to <code>Inline</code>, they would be displayed horizontally.
 		 *
 		 * <br><br>
@@ -126,7 +149,7 @@ const metadata = {
 		 * <ul>
 		 * <li><code>Standard</code></li>
 		 * <li><code>Inline</code></li>
-		 * <ul>
+		 * </ul>
 		 *
 		 * @type {TabLayout}
 		 * @defaultvalue "Standard"
@@ -137,6 +160,16 @@ const metadata = {
 			defaultValue: TabLayout.Standard,
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -173,12 +206,14 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.TabContainer#tab-select
 		 * @param {HTMLElement} tab The selected <code>tab</code>.
-		 * @param {Number} tabIndex The selected <code>tab</code> index.
+		 * @param {Integer} tabIndex The selected <code>tab</code> index.
 		 * @public
 		 */
 		"tab-select": {
-			tab: { type: HTMLElement },
-			tabIndex: { type: Number },
+			detail: {
+				tab: { type: HTMLElement },
+				tabIndex: { type: Number },
+			},
 		},
 	},
 };
@@ -200,7 +235,7 @@ const metadata = {
  * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
  * </ul>
  *
- * <h3>ES6 import</h3>
+ * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
  * <br>
@@ -222,11 +257,11 @@ class TabContainer extends UI5Element {
 	}
 
 	static get styles() {
-		return [...tabStyles, tabContainerCss];
+		return [tabStyles, tabContainerCss];
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ...staticAreaTabStyles];
+		return [ResponsivePopoverCommonCss, staticAreaTabStyles];
 	}
 
 	static get render() {
@@ -252,29 +287,30 @@ class TabContainer extends UI5Element {
 	constructor() {
 		super();
 
-		this._handleHeaderResize = this._handleHeaderResize.bind(this);
+		this._handleResize = this._handleResize.bind(this);
 
 		// Init ScrollEnablement
 		this._scrollEnablement = new ScrollEnablement(this);
 		this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this));
 
 		// Init ItemNavigation
-		this._initItemNavigation();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._itemNavigation = new ItemNavigation(this, {
+			getItemsCallback: () => this._getTabs(),
+		});
 	}
 
 	onBeforeRendering() {
 		// Set external properties to items
-		this.items.forEach((item, index) => {
+		this.items.filter(item => !item.isSeparator).forEach((item, index, arr) => {
 			item._isInline = this.tabLayout === TabLayout.Inline;
 			item._mixedMode = this.mixedMode;
 			item._posinset = index + 1;
-			item._setsize = this.items.length;
+			item._setsize = arr.length;
 			item._getTabContainerHeaderItemCallback = _ => {
 				return this.getDomRef().querySelector(`#${item._id}`);
 			};
 			item._itemSelectCallback = this._onItemSelect.bind(this);
+			item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
 		if (!this._animationRunning) {
@@ -285,14 +321,38 @@ class TabContainer extends UI5Element {
 	onAfterRendering() {
 		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
 		this._updateScrolling();
+
+		this.items.forEach(item => {
+			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+		});
 	}
 
 	onEnterDOM() {
-		ResizeHandler.register(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.register(this._getHeader(), this._handleResize);
 	}
 
 	onExitDOM() {
-		ResizeHandler.deregister(this._getHeader(), this._handleHeaderResize);
+		ResizeHandler.deregister(this._getHeader(), this._handleResize);
+	}
+
+	_onTablistFocusin(event) {
+		const target = event.target;
+
+		if (!this._scrollable || !target.classList.contains("ui5-tab-strip-item")) {
+			return;
+		}
+
+		const headerScrollContainer = this._getHeaderScrollContainer();
+		const leftArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowLeft").offsetWidth;
+		const rightArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowRight").offsetWidth;
+
+		if (this._scrollableBack && (target.offsetLeft - leftArrowWidth < headerScrollContainer.scrollLeft)) {
+			this._scrollEnablement.move(target.offsetLeft - leftArrowWidth - headerScrollContainer.scrollLeft, 0, true);
+			this._updateScrolling();
+		} else if (this._scrollableForward && (target.offsetLeft + target.offsetWidth > headerScrollContainer.scrollLeft + headerScrollContainer.offsetWidth - rightArrowWidth)) {
+			this._scrollEnablement.move(target.offsetLeft + target.offsetWidth - headerScrollContainer.scrollLeft - headerScrollContainer.offsetWidth + rightArrowWidth, 0, true);
+			this._updateScrolling();
+		}
 	}
 
 	_onHeaderClick(event) {
@@ -331,11 +391,6 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	_initItemNavigation() {
-		this._itemNavigation = new ItemNavigation(this);
-		this._itemNavigation.getItemsCallback = () => this._getTabs();
-	}
-
 	_onHeaderItemSelect(tab) {
 		if (!tab.hasAttribute("disabled")) {
 			this._onItemSelect(tab);
@@ -360,7 +415,7 @@ class TabContainer extends UI5Element {
 				item.selected = selected;
 
 				if (selected) {
-					this._itemNavigation.current = selectedTabIndex;
+					this._itemNavigation.setCurrentItem(item);
 				}
 			}
 		}, this);
@@ -427,9 +482,18 @@ class TabContainer extends UI5Element {
 	}
 
 	async _onOverflowButtonClick(event) {
+		const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]");
+
+		if (event.target !== button) {
+			return;
+		}
+
 		this.responsivePopover = await this._respPopover();
-		this.updateStaticAreaItemContentDensity();
-		this.responsivePopover.open(this.getDomRef().querySelector(".ui-tc__overflowButton"));
+		if (this.responsivePopover.opened) {
+			this.responsivePopover.close();
+		} else {
+			this.responsivePopover.showAt(button);
+		}
 	}
 
 	_onHeaderBackArrowClick() {
@@ -442,8 +506,9 @@ class TabContainer extends UI5Element {
 			.then(_ => this._updateScrolling());
 	}
 
-	_handleHeaderResize() {
+	_handleResize() {
 		this._updateScrolling();
+		this._updateMediaRange();
 	}
 
 	async _closeRespPopover() {
@@ -463,6 +528,10 @@ class TabContainer extends UI5Element {
 		}
 	}
 
+	_updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	_getHeader() {
 		return this.shadowRoot.querySelector(`#${this._id}-header`);
 	}
@@ -480,16 +549,25 @@ class TabContainer extends UI5Element {
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
 	}
 
+	get shouldShowOverflow() {
+		return this.showOverflow && this._scrollable;
+	}
+
 	get classes() {
 		return {
 			root: {
 				"ui5-tc-root": true,
 				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--withAdditonalText": this.withAdditonalText,
+				"ui5-tc--standardTabLayout": this.standardTabLayout,
 			},
 			header: {
 				"ui5-tc__header": true,
 				"ui5-tc__header--scrollable": this._scrollable,
 			},
+			headerInnerContainer: {
+				"ui5-tc__headerInnerContainer": true,
+			},
 			headerScrollContainer: {
 				"ui-tc__headerScrollContainer": true,
 			},
@@ -509,10 +587,6 @@ class TabContainer extends UI5Element {
 				"ui5-tc__headerArrowRight": true,
 				"ui5-tc__headerArrow--visible": this._scrollableForward,
 			},
-			overflowButton: {
-				"ui-tc__overflowButton": true,
-				"ui-tc__overflowButton--visible": this._scrollable,
-			},
 			content: {
 				"ui5-tc__content": true,
 				"ui5-tc__content--collapsed": this._contentCollapsed,
@@ -528,16 +602,24 @@ class TabContainer extends UI5Element {
 		return this.items.every(item => !item.icon);
 	}
 
+	get withAdditonalText() {
+		return this.items.some(item => !!item.additionalText);
+	}
+
+	get standardTabLayout() {
+		return this.tabLayout === TabLayout.Standard;
+	}
+
 	get previousIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
 	}
 
 	get nextIconACCName() {
-		return this.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_NEXT_ICON_ACC_NAME);
 	}
 
 	get overflowMenuTitle() {
-		return this.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
+		return TabContainer.i18nBundle.getText(TABCONTAINER_OVERFLOW_MENU_TITLE);
 	}
 
 	get tabsAtTheBottom() {
@@ -552,14 +634,17 @@ class TabContainer extends UI5Element {
 		return getAnimationMode() !== AnimationMode.None;
 	}
 
+	static get dependencies() {
+		return [
+			Button,
+			Icon,
+			List,
+			ResponsivePopover,
+		];
+	}
+
 	static async onDefine() {
-		await Promise.all([
-			Button.define(),
-			Icon.define(),
-			List.define(),
-			ResponsivePopover.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/TabContainerPopover.hbs

@@ -4,8 +4,9 @@
 	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}}

package/src/TabInOverflow.hbs

@@ -4,6 +4,9 @@
 	type="{{this.overflowState}}"
 	?selected="{{this.effectiveSelected}}"
 	?disabled="{{this.effectiveDisabled}}"
+	aria-disabled="{{this.effectiveDisabled}}"
+	aria-selected="{{this.effectiveSelected}}"
+	aria-labelledby="{{this.ariaLabelledBy}}"
 >
 	<div class="ui5-tab-overflow-itemContent">
 		{{#if this.icon}}

package/src/TabInStrip.hbs

@@ -6,11 +6,10 @@
 	aria-setsize="{{this._setsize}}"
 	aria-controls="ui5-tc-contentItem-{{this._posinset}}"
 	aria-selected="{{this.effectiveSelected}}"
-	?aria-disabled="{{this.effectiveDisabled}}"
+	aria-disabled="{{this.effectiveDisabled}}"
 	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
 	data-ui5-stable="{{this.stableDomRef}}"
-	style="list-style-type: none;"
 >
 
 	{{#if this.icon}}
@@ -28,14 +27,10 @@
 		{{#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>
 
 </li>

package/src/TabSeparator.hbs

@@ -1 +1 @@
-<li id="{{_id}}" role="separator" style="list-style-type: none;"></li>
+<li id="{{_id}}" role="separator"></li>

package/src/TabSeparator.js

@@ -18,6 +18,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.TabSeparator
  * @extends UI5Element
  * @tagname ui5-tab-separator
+ * @implements sap.ui.webcomponents.main.ITab
  * @public
  */
 class TabSeparator extends UI5Element {

package/src/Table.hbs

@@ -1,29 +1,99 @@
-<table border="0" cellspacing="0" cellpadding="0" @keydown="{{_onkeydown}}">
+<div class="ui5-table-root">
+	{{#if busy}}
+		{{> busyRow}}
+	{{/if}}
 
-	<thead>
-		<tr id="{{_id}}-columnHeader" class="ui5-table-header-row" tabindex="0" style="height: 48px" @click="{{_onColumnHeaderClick}}">
-			{{#each visibleColumns}}
+	<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="{{styles.table}}" @click="{{_onColumnHeaderClick}}">
+				{{#if isMultiSelect}}
+					<th class="ui5-table-select-all-column" role="presentation" aria-hidden="true">
+						<ui5-checkbox class="ui5-table-select-all-checkbox"
+							?checked="{{_allRowsSelected}}"
+							@ui5-change="{{_selectAll}}"
+							aria-label="{{ariaLabelSelectAllText}}"
+						>
+						</ui5-checkbox>
+					</th>
+				{{/if}}
+
+				{{#each visibleColumns}}
+					<slot name="{{this._individualSlot}}"></slot>
+				{{/each}}
+			</tr>
+		</thead>
+
+		<tbody>
+			{{#each rows}}
 				<slot name="{{this._individualSlot}}"></slot>
 			{{/each}}
-		</tr>
-	</thead>
-
-	<tbody>
-		{{#each rows}}
-			<slot name="{{this._individualSlot}}"></slot>
-		{{/each}}
-
-		{{#unless rows.length}}
-			{{#if showNoData}}
-				<tr class="ui5-table-no-data-row-root">
-					<td colspan="{{visibleColumnsCount}}">
-
-						<div class="ui5-table-no-data-row">
-							<span>{{noDataText}}</span>
-						</div>
-					</td>
-				</tr>
+
+			{{#unless rows.length}}
+				{{#unless hideNoData}}
+					<tr class="ui5-table-no-data-row-root" role="row">
+						<td colspan="{{visibleColumnsCount}}" role="cell">
+
+							<div class="ui5-table-no-data-row">
+								<span>{{noDataText}}</span>
+							</div>
+						</td>
+					</tr>
+				{{/unless}}
+			{{/unless}}
+
+			{{#if growsWithButton}}
+				{{> moreRow}}
 			{{/if}}
-		{{/unless}}
-	</tbody>
-</table>
+
+			{{#if growsOnScroll}}
+				{{> tableEndRow}}
+			{{/if}}
+		</tbody>
+	</table>
+</div>
+
+{{#*inline "moreRow"}}
+<tr>
+	<td colspan="{{visibleColumnsCount}}">
+		<div growing-button>
+			<div
+				tabindex="0"
+				role="button"
+				aria-labelledby="{{loadMoreAriaLabelledBy}}"
+				?active="{{_loadMoreActive}}"
+				@click="{{_onLoadMoreClick}}"
+				@keydown="{{_onLoadMoreKeydown}}"
+				@keyup="{{_onLoadMoreKeyup}}"
+				growing-button-inner
+			>
+				<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
+
+				{{#if growingButtonSubtext}}
+					<span id="{{_id}}-growingButton-subtext" growing-button-subtext>{{growingButtonSubtext}}</span>
+				{{/if}}
+			</div>
+		</div>
+	</td>
+</tr>
+{{/inline}}
+
+{{#*inline "tableEndRow"}}
+	<tr tabindex="-1" class="ui5-table-end-row">
+		<td tabindex="-1">
+			<span tabindex="-1" aria-hidden="true" class="ui5-table-end-marker"></span>
+		</td>
+	</tr>
+{{/inline}}
+
+{{#*inline "busyRow"}}
+	<div tabindex="-1" class="ui5-table-busy-row">
+		<ui5-busy-indicator
+			delay="{{busyDelay}}"
+			class="ui5-table-busy-ind"
+			style="{{styles.busy}}"
+			active
+			size="Medium"
+			data-sap-focus-ref
+		></ui5-busy-indicator>
+	</div>
+{{/inline}}