@ui5/webcomponents 1.0.2 → 1.1.0

package/src/TabContainer.hbs

@@ -5,67 +5,57 @@
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
-
 	<div class="{{classes.header}}" id="{{_id}}-header">
-		<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
+			class="ui5-tc__overflow ui5-tc__overflow--start"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if startOverflowButton.length}}
+				<slot name="startOverflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-start"
+					tabindex="-1"
+					title="{{overflowMenuTitle}}"
+					aria-haspopup="true"
+					icon-end>{{this._startOverflowText}}</ui5-button>
+			{{/if}}
 		</div>
+
+		<div
+			id="{{_id}}-tabStrip"
+			class="{{classes.tabStrip}}"
+			role="tablist"
+			@click="{{_onTabStripClick}}"
+			@keydown="{{_onTabStripKeyDown}}"
+			@keyup="{{_onTabStripKeyUp}}"
+		>
+			{{#each items}}
+				{{this.stripPresentation}}
+			{{/each}}
+		</div>
+
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--end"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if overflowButton.length}}
+				<slot name="overflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="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}}"
-						design="Transparent"
-						tabindex="-1"
-						title="{{overflowMenuTitle}}"
-						aria-haspopup="true"></ui5-button>
-				{{/if}}
-			</div>
-		{{/if}}
 	</div>
 
 	{{#unless tabsAtTheBottom}}