@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/src/ShellBar.hbs

@@ -1,6 +1,5 @@
 <div
 	class="{{classes.wrapper}}"
-	dir="{{effectiveDir}}"
 	role="banner"
 	aria-label="{{_shellbarText}}"
 	part="root"
@@ -32,6 +31,7 @@
 				@click="{{_header.press}}"
 				aria-haspopup="{{menuBtnHasPopup}}"
 				aria-expanded="{{menuPopoverExpanded}}"
+				data-ui5-stable="menu"
 			>
 				{{#if hasNonFocusableLogo}}
 					<span
@@ -45,7 +45,7 @@
 
 				{{#if primaryTitle}}
 					<h1 class="ui5-shellbar-menu-button-title">
-						<bdi class="{{classes.title}}">{{primaryTitle}}</bdi>
+						<bdi>{{primaryTitle}}</bdi>
 					</h1>
 				{{/if}}
 
@@ -53,7 +53,9 @@
 			</button>
 		{{/if}}
 
-		<h2 class="ui5-shellbar-secondary-title">{{secondaryTitle}}</h2>
+		{{#if secondaryTitle}}
+			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
+		{{/if}}
 	</div>
 
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
@@ -61,6 +63,7 @@
 			<div class="ui5-shellbar-copilot-wrapper"
 				tabindex="0"
 				aria-label="{{_copilotText}}"
+				role="button"
 				title="{{_copilotText}}"
 				@keydown="{{_coPilotKeydown}}"
 				@keyup="{{_coPilotKeyup}}"
@@ -74,42 +77,53 @@
 		{{/if}}
 	</div>
 
-	<div id="{{_id}}-searchfield-wrapper"
-		class="ui5-shellbar-search-field"
-		style="{{styles.searchField}}"
-	>
-		{{#if searchField.length}}
-			<slot name="searchField"></slot>
-		{{/if}}
-	</div>
-
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-
 		<div class="ui5-shellbar-overflow-container-right-child">
 
 			{{#if hasSearchField}}
+				{{#if _fullWidthSearch}}
+					<div class="ui5-shellbar-search-full-width-wrapper" style="{{styles.searchField}}">
+						<div class="ui5-shellbar-search-full-field">
+							<slot name="searchField"></slot>
+						</div>
+						<ui5-button
+							@click={{_handleCancelButtonPress}}
+							class="ui5-shellbar-button"
+							data-ui5-stable="cancel-search"
+						>
+							Cancel
+						</ui5-button>
+					</div>
+				{{/if}}
+
+				<div class="ui5-shellbar-search-field" style="{{styles.searchField}}">
+					{{#unless _fullWidthSearch}}
+							<slot name="searchField"></slot>
+					{{/unless}}
+				</div>
+
 				<ui5-button
 					id="{{this._id}}-item-1"
 					class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
 					icon="sap-icon://search"
 					data-ui5-text="Search"
-					data-ui5-notification-count="{{notificationCount}}"
+					data-ui5-notifications-count="{{notificationsCount}}"
+					data-ui5-stable="toggle-search"
 					@click={{_handleSearchIconPress}}
-					aria-label="{{_searchText}}"
-					title="{{_searchText}}"
-					._buttonAccInfo="{{accInfo.search}}"
+					tooltip="{{_searchText}}"
+					.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
 				></ui5-button>
 			{{/if}}
 
 			{{#each customItemsInfo}}
 				<ui5-button
 					id="{{this.id}}"
-					style="{{this.style}}"
+					style="{{this.styles}}"
 					class="{{this.classes}}"
 					icon="{{this.icon}}"
-					title="{{this.title}}"
+					tooltip="{{this.title}}"
 					data-count="{{this.count}}"
-					data-ui5-notification-count="{{../notificationCount}}"
+					data-ui5-notifications-count="{{../notificationsCount}}"
 					data-ui5-external-action-item-id="{{this.refItemid}}"
 					data-ui5-stable="{{stableDomRef}}"
 					@click={{this.press}}
@@ -123,11 +137,9 @@
 				class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
 				icon="sap-icon://bell"
 				data-ui5-text="Notifications"
-				data-ui5-notification-count="{{notificationCount}}"
+				data-ui5-notifications-count="{{notificationsCount}}"
 				@click={{_handleNotificationsPress}}
-				aria-label="{{_notificationsText}}"
-				title="{{_notificationsText}}"
-				._buttonAccInfo="{{accInfo.notifications}}"
+				tooltip="{{_notificationsText}}"
 				data-ui5-stable="notifications"
 			></ui5-button>
 			{{/if}}
@@ -138,28 +150,13 @@
 				class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
 				icon="sap-icon://overflow"
 				@click="{{_handleOverflowPress}}"
-				aria-label="{{_overflowText}}"
-				title="{{_overflowText}}"
-				._buttonAccInfo="{{accInfo.overflow}}"
+				tooltip="{{_overflowText}}"
+				.accessibilityAttributes={{accInfo.overflow.accessibilityAttributes}}
 				data-ui5-stable="overflow"
 			></ui5-button>
 
 			{{#if hasProfile}}
-				<ui5-button
-					profile-btn
-					id="{{this._id}}-item-3"
-					@click={{_handleProfilePress}}
-					style="{{styles.items.profile}}"
-					aria-label="{{_profileText}}"
-					title="{{_profileText}}"
-					._buttonAccInfo="{{accInfo.profile}}"
-					class="ui5-shellbar-button ui5-shellbar-image-button"
-					data-ui5-stable="profile"
-				>
-					<slot
-						name="profile"
-					></slot>
-				</ui5-button>
+				{{> profileButton}}
 			{{/if}}
 
 			{{#if showProductSwitch}}
@@ -170,9 +167,7 @@
 				icon="sap-icon://grid"
 				data-ui5-text="Product Switch"
 				@click={{_handleProductSwitchPress}}
-				aria-label="{{_productsText}}"
-				title="{{_productsText}}"
-				._buttonAccInfo="{{accInfo.products}}"
+				tooltip="{{_productsText}}"
 				data-ui5-stable="product-switch"
 			></ui5-button>
 			{{/if}}
@@ -180,12 +175,26 @@
 	</div>
 </div>
 
+{{#*inline "profileButton"}}
+	<ui5-button
+		profile-btn
+		id="{{this._id}}-item-3"
+		@click={{_handleProfilePress}}
+		style="{{styles.items.profile}}"
+		tooltip="{{_profileText}}"
+		class="ui5-shellbar-button ui5-shellbar-image-button"
+		data-ui5-stable="profile"
+	>
+		<slot name="profile"></slot>
+	</ui5-button>
+{{/inline}}
+
 {{#*inline "coPilot"}}
-	<svg @click="{{_coPilotClick}}" focusable="false" width="44" role="presentation" aria-hidden="true" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
+	<svg @click="{{_coPilotClick}}" focusable="false" width="48" role="presentation" aria-hidden="true" height="48" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
 		<defs>
-			<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#c0d9f2" stop-opacity=".87"/><stop offset="80%" stop-color="#fff" stop-opacity=".87"/></linearGradient>
-			<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".16"/><stop offset="80%" stop-color="#fff" stop-opacity=".16"/></linearGradient>
-			<linearGradient id="c" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" stop-color="#b4d2ff" stop-opacity=".1"/><stop offset="80%" stop-color="#fff" stop-opacity=".1"/></linearGradient>
+			<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty7"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty7"/></linearGradient>
+			<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty36"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty36"/></linearGradient>
+			<linearGradient id="c" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty2"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty2"/></linearGradient>
 			<path id="d" d="M98.158 0c.158 17.395-9.107 31.335-18.609 45.928-9.21 14.153-18.933 25.29-33.377 34.045C31.427 88.918 17.25 94.39 0 94.273c-17.155-.115-30.823-6.582-45.798-14.949-15.216-8.497-27.76-16.77-37.253-31.375C-92.668 33.158-98.487 17.571-97.179 0c1.233-16.978 12.691-29.086 21.044-43.957 8.456-15.059 12.272-32.152 26.873-41.367 14.76-9.322 31.83-7.68 49.262-6.77 16.897.88 31.86 3.06 46.42 11.693 14.452 8.568 23.18 20.866 32.26 34.976C88.05-30.91 98.014-17.277 98.157 0z">
 				<animate attributeName="d" values="{{coPilot.animationValues}}" dur="30s" repeatCount="indefinite"/>
 				<animateTransform attributeName="transform" type="scale" values="1;1.05;1.05;1.02;1" dur="0.15s" begin="a.mousedown" repeatCount="1" additive="sum"/>