refactor(ui5-tabcontainer): refactor the component

packages/main/src/Tab.js

@@ -1,9 +1,8 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
 import URI from "@ui5/webcomponents-base/src/types/URI";
-import Integer from "@ui5/webcomponents-base/src/types/Integer";
+import Function from "@ui5/webcomponents-base/src/types/Function";
 import TabBase from "./TabBase";
 import TabTemplateContext from "./TabTemplateContext";
-import TabDesignMode from "./types/TabDesignMode";
 import IconColor from "./types/IconColor";
 import Icon from "./Icon";
 import TabRenderer from "./build/compiled/TabRenderer.lit";
@@ -47,14 +46,15 @@ const metadata = {
 		 */
 		disabled: {
 			type: Boolean,
+			defaultValue: false,
 		},
 
 		/**
-		 * Represents the "count" text, which is displayed in the tab filter.
+		 * Represents the "additionalText" text, which is displayed in the tab filter.
 		 * @type {String}
 		 * @public
 		 */
-		count: {
+		additionalText: {
 			type: String,
 			defaultValue: "",
 		},
@@ -85,27 +85,19 @@ const metadata = {
 			defaultValue: IconColor.Default,
 		},
 
-		/**
-		 * Specifies whether the icon and the texts are placed vertically or horizontally.
-		 * @type {TabDesignMode}
-		 * @public
-		 */
-		design: {
-			type: TabDesignMode,
-			defaultValue: TabDesignMode.Vertical,
+		selected: {
+			type: Boolean,
+			defaultValue: false,
+		},
+
+		_tabIndex: {
+			type: String,
+			defaultValue: "-1",
 		},
 
-		_showAll: { type: Boolean },
-		_isSelected: { type: Boolean, defaultValue: false },
-		_isInline: { type: Boolean },
-		_isNoIcon: { type: Boolean },
-		_isNoText: { type: Boolean },
-		_tabIndex: { type: String, defaultValue: "-1" },
-		_posinset: { type: Integer },
-		_setsize: { type: Integer },
-		_contentId: { type: String, defaultValue: " " },
-		_labelledbyControls: { type: String, defaultValue: " " },
-		_isIconColorRead: { type: Boolean },
+		_getTabContainerHeaderItemCallback: {
+			type: Function,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 
@@ -143,6 +135,16 @@ class Tab extends TabBase {
 
 		super.define(...params);
 	}
+
+	getFocusDomRef() {
+		let focusedDomRef = super.getFocusDomRef();
+
+		if (this._getTabContainerHeaderItemCallback) {
+			focusedDomRef = this._getTabContainerHeaderItemCallback();
+		}
+
+		return focusedDomRef;
+	}
 }
 
 Bootstrap.boot().then(_ => {

packages/main/src/TabBase.js

@@ -24,6 +24,10 @@ class TabBase extends WebComponent {
 	static get metadata() {
 		return metadata;
 	}
+
+	isSeparator() {
+		return false;
+	}
 }
 
 export default TabBase;

packages/main/src/TabContainer.hbs

@@ -1,155 +1,146 @@
 <div {{> controlData}} class="{{classes.main}}">
-	<div role='tablist' class="{{classes.tablist}}">
-		<ui5-icon
-			src="sap-icon://slim-arrow-left"
-			class="{{ctr._leftArrow.classes}}"
-			tabindex="-1"></ui5-icon>
-		<div id="{{ctr._id}}-scrollContainer" class="sapMITBScrollContainer">
-			<div id="{{ctr._id}}-head" tabindex="-1" class="{{classes.head}}">
-				{{#each ctr._headerItems}}
-					{{#if isSeparator}}
-						{{> renderTabSeparator}}
-					{{else}}
-						{{> renderTab}}
+	<div class="{{classes.header}}" id="{{ctr._id}}-header">
+		<ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
+
+		<!-- tab items -->
+		<div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer">
+			<ul role="tablist" class="{{classes.headerList}}">
+				{{#each renderItems}}
+					{{#unless this.isSeparator}}
+						<li class="{{this.headerItemClasses}}"
+							id="{{this.item._id}}"
+							tabindex="{{this.item._tabIndex}}"
+							@click="{{../ctr._headerItem.click}}"
+							@keydown="{{../ctr._headerItem.keydown}}"
+							@keyup="{{../ctr._headerItem.keyup}}"
+							role="tab"
+							aria-posinset="{{this.position}}"
+							aria-setsize="{{../renderItems.length}}"
+							aria-controls="ui5-tc-contentItem-{{this.position}}"
+							aria-selected="{{this.selected}}"
+							aria-disabled="{{this.disabled}}"
+							disabled="{{this.disabled}}"
+							aria-labelledby="{{this.ariaLabelledBy}}"
+						>
+							{{#if this.isTextOnlyTab}}
+								{{> textOnlyTab}}
+							{{/if}}
+
+							{{#if this.isIconTab}}
+								{{> iconTab}}
+							{{/if}}
+
+							{{#if this.isMixedModeTab}}
+								{{> mixedModeTab}}
+							{{/if}}
+						</li>
+					{{/unless}}
+					{{#if this.isSeparator}}
+						<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
 					{{/if}}
 				{{/each}}
-			</div>
+			</ul>
 		</div>
-		<ui5-icon
-			src="sap-icon://slim-arrow-right"
-			class="{{ctr._rightArrow.classes}}"
-			tabindex="-1"></ui5-icon>
+
+		<ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
+
+		<!-- overflow button -->
 		{{#if ctr.showOverflow}}
-			<ui5-button ._customAttributes="{{ctr._overflowButton._customAttributes}}"
-						id="{{ctr._id}}-overflow-button"
-						class="{{ctr._overflowButton.classes}}"
-						@press="{{ctr._overflowButton.onPress}}"
-						icon="sap-icon://slim-arrow-down" type="Transparent"></ui5-button>
+			<ui5-button
+				@press="{{ctr._overflowButton.click}}"
+				class="{{classes.overflowButton}}"
+				icon="sap-icon://slim-arrow-down"
+				type="Transparent"
+			></ui5-button>
 		{{/if}}
 	</div>
-	<div id="{{ctr._id}}-containerContent" class="{{classes.content}}">
-		<div id="{{ctr._id}}-content" class="sapMITBContent" role="tabpanel">
-			{{#each ctr._selectedContent}}
-				<slot name="{{this._slot}}"></slot>
-			{{/each}}
-		</div>
+
+	<!-- content area -->
+	<div class="{{classes.content}}">
+		{{#each renderItems}}
+			{{#unless this.isSeparator}}
+				<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}">
+					<slot name="{{this.item._slot}}"></slot>
+				</div>
+			{{/unless}}
+		{{/each}}
 	</div>
-	{{#if ctr.showOverflow}}
-		<ui5-popover id="{{ctr._id}}-popover"
-					 hide-arrow
-					 hide-header
-					 placement-type="Bottom"
-					 horizontal-align="Right">
-			<ui5-list @itemPress="{{ctr._overflowList.onItemPress}}">
-				{{#each ctr._overflowList.items}}
-					<ui5-li-custom id="{{this.id}}"
-								   type="{{this.type}}"
-								   selected="{{this.selected}}"
-								   class="{{this.classes}}">
-						<div class="{{this.innerClasses}}">
-							{{#if this.content.icon}}
-								<ui5-icon src="{{this.content.icon}}" class="sapMITBSelectItemIcon"></ui5-icon>
+
+	<!-- overflow menu -->
+	<ui5-popover
+		id="{{ctr._id}}-overflowMenu"
+		hide-arrow
+		hide-header
+		placement-type="Bottom"
+		horizontal-align="Right">
+		<ui5-list @itemPress="{{ctr._overflowList.click}}">
+			{{#each renderItems}}
+				{{#unless this.isSeparator}}
+					<ui5-li-custom id="{{this.item._id}}"
+						class="{{this.overflowItemClasses}}"
+						type="{{this.overflowItemState}}"
+						selected="{{this.selected}}"
+						disabled="{{this.disabled}}"
+					>
+						<div class="{{this.overflowItemContentClasses}}">
+							{{#if this.item.icon}}
+								<ui5-icon src="{{this.item.icon}}"></ui5-icon>
 							{{/if}}
-							{{#unless this.content._isNoText}}
-								<span class="sapMITBText sapMText sapMTextNoWrap">{{this.content.displayText}}</span>
-							{{/unless}}
-							{{#if this.content.isIconColorRead}}
-								<div id="{{this.content._id}}-iconColor" style="display: none;">{{this.content.iconColor}}</div>
+
+							{{this.item.text}}
+
+							{{#if this.item.additionalText}}
+								({{this.item.additionalText}})
 							{{/if}}
 						</div>
 					</ui5-li-custom>
-				{{/each}}
-			</ui5-list>
-		</ui5-popover>
-	{{/if}}
+				{{/unless}}s
+			{{/each}}
+		</ui5-list>
+	</ui5-popover>
 </div>
 
-{{#*inline "renderTab"}}
-	<div id="{{id}}"
-			tabindex="{{_tabIndex}}"
-			class="{{classes.main}}"
-			role="tab"
-			aria-selected="{{isSelected}}"
-			aria-disabled="{{isDisabled}}"
-			aria-posinset="{{posinset}}"
-			aria-setsize="{{setsize}}"
-			aria-controls="{{contentId}}"
-			aria-labelledby="{{labelledbyControls}}">
-		{{#if showAll}}
-			<div id="{{id}}-tab" class="sapMITBTab">
-		<span id="{{id}}-count" class="sapMITBCount">
-			{{count}}
+{{#*inline "textOnlyTab"}}
+	<div class="{{this.headerItemContentClasses}}">
+		<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+			<span class="{{this.headerItemSemanticIconClasses}}"></span>
+			{{this.item.text}}
 		</span>
-			</div>
-			{{#if displayText}}
-				<div id="{{id}}-text" class="sapMITBText">
-					{{displayText}}
-				</div>
-			{{/if}}
-		{{else if isHorizontalDesign}}
-			<div id="{{id}}-tab" class="sapMITBTab">
-				{{#if isIconColorRead}}
-					<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
-				{{/if}}
-				{{#if icon}}
-					<ui5-icon src="{{icon}}" class="sapMITBFilterIcon  sapMITBFilter{{iconColor}}"></ui5-icon>
-				{{/if}}
-			</div>
-			<div class="sapMITBHorizontalWrapper">
-			<span id="{{id}}-count" class="sapMITBCount">
-				{{count}}
-			</span>
-				<div id="{{id}}-text" class="sapMITBText">
-					{{displayText}}
-				</div>
-			</div>
-		{{else if isInline}}
-			<div id="{{id}}-text" class="sapMITBText">
-				{{displayText}}
-			</div>
-		{{else if isNoIcon}}
-			<div id="{{id}}-tab" class="sapMITBTab">
-			<span id="{{id}}-count" class="sapMITBCount">
-				{{count}}
+
+		{{#if this.item.additionalText}}
+			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span>
+		{{/if}}
+	</div>
+{{/inline}}
+
+{{#*inline "iconTab"}}
+	<ui5-icon src="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
+
+	<div class="{{this.headerItemContentClasses}}">
+		{{#if this.item.additionalText}}
+			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
+		{{/if}}
+
+		{{#if this.item.text}}
+			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+				<span class="{{this.headerItemSemanticIconClasses}}"></span>
+				{{this.item.text}}
 			</span>
-			</div>
-			{{#if displayText}}
-				<div id="{{id}}-text" class="sapMITBText">
-					{{displayText}}
-				</div>
-			{{/if}}
-		{{else if isNoText}}
-			<div id="{{id}}-tab" class="sapMITBTab">
-				{{#if isIconColorRead}}
-					<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
-				{{/if}}
-				{{#if icon}}
-					<ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon>
-				{{/if}}
-				<span id="{{id}}-count" class="sapMITBCount">
-					{{count}}
-				</span>
-			</div>
-		{{else}}
-			<div id="{{id}}-tab" class="sapMITBTab">
-				{{#if isIconColorRead}}
-					<div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div>
-				{{/if}}
-				{{#if icon}}
-					<ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon>
-				{{/if}}
-				<span id="{{id}}-count" class="sapMITBCount">
-					{{count}}
-				</span>
-			</div>
-			<div id="{{id}}-text" class="sapMITBText">
-				{{displayText}}
-			</div>
 		{{/if}}
-		<div class="sapMITBContentArrow"></div>
 	</div>
 {{/inline}}
 
-{{#*inline "renderTabSeparator"}}
-	<div role="separator" class="sapMITBItem sapMITBSep sapMITBSepLine"></div>
-{{/inline}}
+{{#*inline "mixedModeTab"}}
+	<div class="{{this.headerItemContentClasses}}">
+		{{#if this.item.additionalText}}
+			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
+		{{/if}}
+
+		{{#if this.item.text}}
+			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+				<span class="{{this.headerItemSemanticIconClasses}}"></span>
+				{{this.item.text}}
+			</span>
+		{{/if}}
+	</div>
+{{/inline}}