feat(ui5-tabcontainer): implement overflow functionality (#4403)

Part of #2540

Co-authored-by: Teodor Taushanov <teodor.taushanov@sap.com>

Author: kskondov

packages/fiori/test/pages/FCL.html

@@ -603,7 +603,7 @@
 			</div>
 			<br><br>
 
-			<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow>
+			<ui5-tabcontainer id="tabContainer1" fixed collapsed>
 				<ui5-tab text="Products" additional-text="125">
 				</ui5-tab>
 				<ui5-tab-separator></ui5-tab-separator>

packages/fiori/test/pages/FCLApp.html

@@ -64,7 +64,7 @@
 		<div class="separator"></div>
 		<ui5-button design="Transparent" icon="decline"></ui5-button>
 	</div>
-	<ui5-tabcontainer show-overflow>
+	<ui5-tabcontainer>
 		<ui5-tab text="Product info" additional-text="200EUR">
 			This is the best product
 		</ui5-tab>

packages/fiori/test/samples/FlexibleColumnLayout.sample.html

@@ -167,7 +167,7 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
 				</div>
 				<br><br>
 
-				<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow>
+				<ui5-tabcontainer id="tabContainer1" fixed collapsed>
 					<ui5-tab text="Products" additional-text="125">
 					</ui5-tab>
 					<ui5-tab-separator></ui5-tab-separator>

packages/main/src/Tab.js

@@ -118,6 +118,25 @@ const metadata = {
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
+		hideInStartOverflow: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
+		hideInEndOverflow: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
+		isInEndOverflow: {
+			type: Boolean,
+			noAttribute: true,
+		},
+
+		_selected: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 	},
@@ -234,11 +253,11 @@ class Tab extends UI5Element {
 	}
 
 	get effectiveSelected() {
-		return this.selected || false;
+		return this.selected || this._selected;
 	}
 
 	get effectiveHidden() {
-		return !this.selected;
+		return !this.effectiveSelected;
 	}
 
 	get ariaLabelledBy() {
@@ -262,7 +281,7 @@ class Tab extends UI5Element {
 	get headerClasses() {
 		const classes = ["ui5-tab-strip-item"];
 
-		if (this.selected) {
+		if (this.effectiveSelected) {
 			classes.push("ui5-tab-strip-item--selected");
 		}
 
@@ -324,6 +343,14 @@ class Tab extends UI5Element {
 	get overflowState() {
 		return this.disabled ? "Inactive" : "Active";
 	}
+
+	get hideInOverflow() {
+		if (this.isInEndOverflow) {
+			return this.hideInEndOverflow;
+		}
+
+		return this.hideInStartOverflow;
+	}
 }
 
 Tab.define();

packages/main/src/TabContainer.hbs

@@ -7,17 +7,26 @@
 	{{/if}}
 
 	<div class="{{classes.header}}" id="{{_id}}-header">
+		<div
+			class="ui5-tc__overflowButton ui5-tc__startOverflowButton"
+			@click="{{_onOverflowButtonClick}}"
+			hidden
+		>
+			{{#if startOverflowButton.length}}
+				<slot name="startOverflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="tabs-overflow-start"
+					tabindex="-1"
+					title="{{overflowMenuTitle}}"
+					aria-haspopup="true"
+					icon-end>{{this._startOverflowText}}</ui5-button>
+			{{/if}}
+		</div>
 		<div class="{{classes.headerInnerContainer}}">
-			<div class="{{classes.headerBackArrow}}">
-				<ui5-button @click="{{_onHeaderBackArrowClick}}"
-							icon="slim-arrow-left"
-							data-ui5-stable="tabs-left"
-							design="Transparent"
-							tabindex="-1"
-							title="{{previousIconACCName}}"></ui5-button>
-			</div>
 			<!-- tab items -->
-			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
+			<div class="{{classes.tabsInStripContainer}}" id="{{_id}}-tabsInStripContainer">
 				<ul
 					role="tablist"
 					@focusin={{_onTablistFocusin}}
@@ -41,34 +50,24 @@
 					{{/each}}
 				</ul>
 			</div>
-			<div class="{{classes.headerForwardArrow}}">
-			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
-						icon="slim-arrow-right"
-						data-ui5-stable="tabs-right"
-						design="Transparent"
-						tabindex="-1"
-						title="{{nextIconACCName}}"></ui5-button>
 		</div>
+		<div
+			class="ui5-tc__overflowButton ui5-tc__endOverflowButton"
+			@click="{{_onOverflowButtonClick}}"
+			hidden
+		>
+			{{#if overflowButton.length}}
+				<slot name="overflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="tabs-overflow-end"
+					tabindex="-1"
+					title="{{overflowMenuTitle}}"
+					aria-haspopup="true"
+					icon-end>{{this._endOverflowText}}</ui5-button>
+			{{/if}}
 		</div>
-		<!-- overflow button -->
-		{{#if shouldShowOverflow}}
-			<div
-				class="ui-tc__overflowButton"
-				@click="{{_onOverflowButtonClick}}"
-			>
-				{{#if overflowButton.length}}
-					<slot name="overflowButton"></slot>
-				{{else}}
-					<ui5-button
-						icon="{{overflowMenuIcon}}"
-						data-ui5-stable="tabs-overflow"
-						design="Transparent"
-						tabindex="-1"
-						title="{{overflowMenuTitle}}"
-						aria-haspopup="true"></ui5-button>
-				{{/if}}
-			</div>
-		{{/if}}
 	</div>
 
 	{{#unless tabsAtTheBottom}}