@ui5/webcomponents-fiori 2.7.0-rc.0 → 2.7.0-rc.1

package/src/themes/DynamicPageHeader.css

@@ -6,6 +6,4 @@
 
 .ui5-dynamic-page-header-root {
     background: inherit;
-    padding-top: var(--_ui5_dynamic_page_header_padding_top);
-    padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
 }

package/src/themes/FlexibleColumnLayout.css

@@ -33,7 +33,7 @@
 	display: none;
 }
 
-/* arrow */
+/* separator */
 .ui5-fcl-separator {
 	display: flex;
 	align-items: center;
@@ -59,7 +59,19 @@
 	padding-bottom: 0.3125rem;
 }
 
-/* arrow decoration */
+.ui5-fcl-arrow {
+	position: absolute;
+    top: 1rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	min-width: 1.5rem;
+	will-change: transform;
+	overflow: visible;
+	z-index: 10;
+	cursor: pointer;
+}
+
+/* grip decoration */
 .ui5-fcl-grip:before {
 	background-image: var(--_ui5_fcl_decoration_top);
 	bottom: calc(50% + 1rem);
@@ -88,6 +100,11 @@
 	height: calc(50% - 1rem);
 }
 
+/* Only apply shorter height when arrow is visible */
+.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before  {
+	height: calc(40% - 1rem);
+}
+
 [aria-hidden] ::slotted([slot="startColumn"]),
 [aria-hidden] ::slotted([slot="midColumn"]),
 [aria-hidden] ::slotted([slot="endColumn"]){

package/src/themes/Page.css

@@ -47,7 +47,7 @@
 }
 /*** Responsive paddings ***/
 
-::slotted([ui5-bar][design="FloatingFooter"]) {
+::slotted([ui5-bar][slot="footer"][design="FloatingFooter"]) {
 	margin: auto;
 	padding: 0;
 }

package/src/themes/ShellBar.css

@@ -3,6 +3,7 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	max-width: 100%;
 	background: var(--sapShellColor);
 	box-sizing: border-box;
 }
@@ -26,6 +27,7 @@
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	box-sizing: border-box;
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor);
 }
 
 .ui5-shellbar-menu-button,
@@ -35,7 +37,7 @@
 ::slotted([ui5-button]){
 	height: 2.25rem;
 	padding: 0;
-	margin-inline-start: 0.5rem;
+	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
 	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
 	background: var(--sapButton_Lite_Background);
 	outline-color: var(--_ui5_shellbar_logo_outline_color);
@@ -44,7 +46,6 @@
 	cursor: pointer;
 	border-radius: var(--_ui5_shellbar_button_border_radius);
 	position: relative;
-	font-size: 0.75rem;
 	font-weight: bold;
 	white-space: initial;
 	overflow: initial;
@@ -62,7 +63,8 @@
 ::slotted([ui5-button]:hover),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
 .ui5-shellbar-button:hover,
-.ui5-shellbar-image-button:hover {
+.ui5-shellbar-image-button:hover,
+::slotted([ui5-button][slot="midContent"]:hover) {
 	background: var(--sapShell_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
 	color: var(--sapShell_TextColor);
@@ -94,11 +96,11 @@ slot[name="profile"] {
 }
 
 ::slotted([ui5-avatar][slot="profile"]) {
-	min-width: 0;
+	display: block;
 	width: 2rem;
 	height: 2rem;
+	min-width: 0;
 	min-height: 2rem;
-	padding: .25rem;
 	pointer-events: none;
 }
 
@@ -110,13 +112,13 @@ slot[name="profile"] {
 .ui5-shellbar-menu-button-title,
 .ui5-shellbar-title {
 	display: inline-block;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontSemiboldFamily);
 	margin: 0;
 	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: var(--sapShell_TextColor);
+	color: var(--sapShell_SubBrand_TextColor);
 }
 
 :host(:not([primary-title])) .ui5-shellbar-menu-button {
@@ -128,11 +130,21 @@ slot[name="profile"] {
 	display: inline-block;
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapShell_TextColor);
-	line-height: 1rem;
 	font-weight: normal;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
+	margin: 0;
+	text-align: start;
+}
+
+.ui5-shellbar-headings {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	overflow: hidden;
+	margin-left: 0.25rem;
 }
 
 .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
@@ -148,7 +160,7 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-middle {
-	align-self: center;
+	align-self: flex-start;
 	height: var(--_ui5_shellbar_overflow_container_middle_height);
 	width: 0;
 	flex-shrink: 0;
@@ -156,24 +168,8 @@ slot[name="profile"] {
 
 .ui5-shellbar-mid-content {
 	height: var(--_ui5_shellbar_overflow_container_middle_height);
-	width: 33.4%;
 }
 
-.ui5-shellbar-overflow-container-left:has(+ .ui5-shellbar-mid-content) {
-	width: 33.3%;
-}
-
-.ui5-shellbar-mid-content + .ui5-shellbar-overflow-container-right {
-	width: 33.3%;
-}
-
-:host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-middle {
-	width: 35rem;
-}
-
-:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-left {
-	flex-shrink: 0;
-}
 
 :host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
 	margin-inline-start: 0;
@@ -209,22 +205,46 @@ slot[name="profile"] {
 
 .ui5-shellbar-logo {
 	cursor: pointer;
-	padding: .25rem;
 	max-height: 2rem;
+	padding: .25rem;
 }
 
-:host([desktop]) .ui5-shellbar-logo:focus,
-.ui5-shellbar-logo:focus-visible {
+.ui5-shellbar-logo-area {
+	display: flex;
+	align-items: center;
+	padding: .25rem .5rem .25rem .25rem;
+	box-sizing: border-box;
+	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
+	border: 1px solid var(--sapButton_Lite_BorderColor);
+	color: var(--sapShell_TextColor);
+	/* fix cutting of the focus outline */
+	margin-inline-start: 0.125rem;
+}
+
+.ui5-shellbar-logo-area .ui5-shellbar-logo {
+	padding: 0;
+}
+
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
+	overflow: hidden;
 	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_logo_outline_offset);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
-.ui5-shellbar-logo:hover {
+.ui5-shellbar-logo:hover,
+.ui5-shellbar-logo-area:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
+.ui5-shellbar-logo-area:active:focus {
+	background: var(--sapShell_Active_Background);
+	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
+	color: var(--sapShell_Active_TextColor);
+}
+
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 }
@@ -245,6 +265,7 @@ slot[name="profile"] {
 .ui5-shellbar-button {
 	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
 	width: 2.5rem;
+	box-sizing: border-box;
 }
 
 .ui5-shellbar-search-button {
@@ -255,41 +276,31 @@ slot[name="profile"] {
 	min-width: var(--_ui5_shellbar_search_button_size);
 }
 
-.ui5-shellbar-image-buttonImage {
-	border-radius: 50%;
-	width: 1.75rem;
-	height: 1.75rem;
-	display: flex;
-	background-size: cover;
-}
-
 .ui5-shellbar-image-button {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	min-width: 2.25rem;
-	height: 2.25rem;
-	display: inline-flex;
-	padding: 0;
+	min-width: auto;
+	height: 2.5rem;
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
+	border-radius: var(--_ui5_shellbar_image_button_border_radius);
 }
 
 .ui5-shellbar-overflow-container-left {
-	padding: 0 0.125rem;
+	padding: 0;
 	justify-content: flex-start;
-	margin-inline-end: 0.5rem;
 	max-width: 75%;
-	flex-shrink: 1;
-	flex-grow: 0;
+	flex-shrink: 0;
 }
 
 .ui5-shellbar-overflow-container-left > :nth-child(n) {
 	margin-inline-end: 0.5rem;
 }
 
-:host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
+/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 18.25rem);
-}
+} */
 
 .ui5-shellbar-menu-button {
 	white-space: nowrap;
@@ -318,17 +329,8 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-right {
-	padding: 0 0.125rem;
-	display: block;
-	overflow: hidden;
-	box-sizing: border-box;
-	white-space: nowrap;
-	flex: 1 1 auto;
-	max-width: 100%;
-}
-
-:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 8rem;
+	flex-grow: 1;
+	justify-content: flex-end;
 }
 
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
@@ -338,41 +340,59 @@ slot[name="profile"] {
 	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+ .ui5-shellbar-overflow-button)::before {
-	inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
+.ui5-shellbar-overflow-container-additional-content {
+	align-items: center;
+	display: flex;
+	overflow: hidden;
+	flex-grow: 1;
 }
 
-.ui5-shellbar-overflow-button {
-	display: none;
+.ui5-shellbar-spacer {
+	flex-grow: 1;
+	height: 1px;
+	flex-basis: 1rem;
+	flex-shrink: 1;
 }
 
-:host([breakpoint-size="M"]) .ui5-shellbar-secondary-title {
-	display: none;
+.ui5-shellbar-separator {
+	flex-grow: 0;
+	flex-shrink: 0;
+	height: 1rem;
+	width: 1px;
+	background-color: var(--sapToolbar_SeparatorColor);
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-secondary-title {
-	display: none;
+.ui5-shellbar-separator-start {
+	margin-inline-end: 0.5rem;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 0;
+.ui5-shellbar-separator-end {
+	margin-inline-start: 0.5rem;
+	margin-inline-end: 0.5rem;
 }
 
-.ui5-shellbar-overflow-button-shown {
-	display: inline-block;
+.ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+ .ui5-shellbar-overflow-button)::before {
+	inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
 }
 
-.ui5-shellbar-hidden-button,
-.ui5-shellbar-invisible-button {
+
+:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
+	padding-inline-start: 0;
+}
+
+::slotted([hidden]) {
 	visibility: hidden;
+	order: -1;
+	position: absolute;
 }
 
-:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 1rem;
+.ui5-shellbar-additional-content-item {
+	flex-shrink: 0;
+ 	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
 }
 
-:host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	padding-inline-start: 1rem;
+.ui5-shellbar-additional-content-item:first-child {
+	padding-inline-start: 0;
 }
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
@@ -410,6 +430,11 @@ slot[name="profile"] {
 	content: attr(data-count);
 }
 
+.ui5-shellbar-button[data-count=" "]::before {
+	height: 0.75rem;
+	min-width: 0.75rem;
+}
+
 .ui5-shellbar-menu-button {
 	margin-inline-start: 0.5rem;
 }
@@ -417,9 +442,16 @@ slot[name="profile"] {
 .ui5-shellbar-search-field {
 	align-items: center;
 	flex-grow: 1;
-	min-width: 240px;
 	margin-inline-start: 0.5rem;
-	max-width: 25rem;
+}
+
+.ui5-shellbar-overflow-container-right-child > :first-child,
+.ui5-shellbar-search-field:first-child + .ui5-shellbar-button:not(.ui5-shellbar-search-button) {
+	margin-inline-start: 0;
+}
+
+.ui5-shellbar-with-full-searchfield .ui5-shellbar-overflow-container-additional-content {
+	max-width: 0px;
 }
 
 .ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
@@ -451,6 +483,16 @@ slot[name="profile"] {
 	color: var(--_ui5_shellbar_search_field_color);
 	height: 2.25rem;
 	width: 100%;
+	min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+:host([breakpoint-size="M"]) ::slotted([ui5-input]),
+:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
+	min-width: 1rem;
+}
+
+:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
+	flex-grow: 1;
 }
 
 ::slotted([ui5-input]:hover) {
@@ -465,6 +507,7 @@ slot[name="profile"] {
 ::slotted([slot="logo"]) {
 	max-height: 2rem;
 	pointer-events: none;
+	padding: 0 0.25rem;
 }
 
 .ui5-shellbar-co-pilot-placeholder {
@@ -483,6 +526,22 @@ slot[name="profile"] {
 	align-items: center;
 }
 
-::slotted([ui5-button][profile-btn]) {
+::slotted([ui5-button][data-profile-btn]) {
 	width: auto;
 }
+
+/* if class contains ui5-shellbar-hidden-button */
+::slotted(.ui5-shellbar-hidden-button),
+::slotted(.ui5-shellbar-force-hidden-button),
+.ui5-shellbar-hidden-button,
+.ui5-shellbar-invisible-button {
+	visibility: hidden;
+	order: -1;
+	opacity: 0;
+	min-width: 0;
+	width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	margin-inline-start: 0;
+}

package/src/themes/ShellBarPopover.css

@@ -6,3 +6,33 @@
 .ui5-shellbar-overflow-popover [ui5-li]::part(icon) {
 	color: var(--sapList_TextColor);
 }
+
+.ui5-shellbar-overflow-popover [ui5-li]::part(title) {
+	font-size: var(--sapFontSize);
+}
+
+.ui5-shellbar-overflow-popover [ui5-li]:after {
+	position: relative;
+	width: fit-content;
+	height: 1rem;
+	min-width: 1rem;
+	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
+	color: var(--sapContent_BadgeTextColor);
+	bottom: calc(100% + 0.0625rem);
+	left: 1.25rem;
+	padding: 0 0.3125rem;
+	border-radius: 0.5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontSmallSize);
+	font-family: "72override", var(--sapFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+.ui5-shellbar-overflow-popover [ui5-li][data-count]:after {
+	content: attr(data-count);
+}

package/src/themes/TimelineItem.css

@@ -33,6 +33,22 @@
 	inset-inline-start: 50%;
 }
 
+:host([state="Positive"]) .ui5-tli-icon {
+	color: var(--sapPositiveElementColor);
+}
+
+:host([state="Negative"]) .ui5-tli-icon {
+	color: var(--sapNegativeElementColor);
+}
+
+:host([state="Critical"]) .ui5-tli-icon {
+	color: var(--sapCriticalElementColor);
+}
+
+:host([state="Information"]) .ui5-tli-icon {
+	color: var(--sapInformativeElementColor);
+}
+
 :host(:not([icon])[layout="Vertical"]) .ui5-tli-indicator::before {
 	inset-block-start: 1.75rem;
 }

package/src/themes/Wizard.css

@@ -5,30 +5,43 @@
 	height: 100%;
 	width: 100%;
 	overflow: auto;
-}
-
-:host([_breakpoint="S"])::part(navigator),
-:host([_breakpoint="S"])::part(step-content) {
-	padding-left: 1rem;
-	padding-right: 1rem;
-}
-
-:host([_breakpoint="M"])::part(navigator),
-:host([_breakpoint="M"])::part(step-content) {
-	padding-left: 2rem;
-	padding-right: 2rem;
-}
-
-:host([_breakpoint="L"])::part(navigator),
-:host([_breakpoint="L"])::part(step-content) {
-	padding-left: 2rem;
-	padding-right: 2rem;
-}
-
-:host([_breakpoint="XL"])::part(navigator),
-:host([_breakpoint="XL"])::part(step-content) {
-	padding-left: 3rem;
-	padding-right: 3rem;
+	container-type: inline-size;
+}
+
+/* S Size */
+@container (max-width: 599px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+}
+
+/* M Size */
+@container (min-width: 600px) and (max-width: 1023px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+/* L Size */
+@container (min-width: 1024px) and (max-width: 1439px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+/* XL Size */
+@container (min-width: 1440px) {
+	:host::part(navigator),
+	:host::part(step-content) {
+		padding-left: 3rem;
+		padding-right: 3rem;
+	}
 }
 
 .ui5-wiz-root {

package/src/themes/base/DynamicPageHeader-parameters.css

@@ -1,7 +1,4 @@
 :root {
-	--_ui5_dynamic_page_header_padding_top: 1rem;
-    --_ui5_dynamic_page_header_padding_bottom: 1rem;
-
     --_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);
     --_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);
     --_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);

package/src/themes/base/ShellBar-parameters.css

@@ -19,7 +19,11 @@
 	--_ui5_shellbar_search_field_box_shadow: none;
 	--_ui5_shellbar_search_field_color: var(--sapShell_TextColor);
 	--_ui5_shellbar_search_field_outline_focused: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
+	--_ui5_shellbar_search_field_width: 25rem;
 	--_ui5_shellbar_input_focus_outline_color: inherit;
 	--_ui5_shellbar_overflow_container_middle_height: 2.5rem;
 	--_ui5_shellbar_menu_button_title_font_size: 0.75rem;
+	--_ui5_shellbar_image_button_border_radius: 50%;
+	--_ui5-shellbar-content-margin-start: 1rem;
+	--_ui5-shellbar-overflow-button-margin: 0.5rem;
 }

package/src/themes/sap_horizon/parameters-bundle.css

@@ -6,6 +6,7 @@
 @import "../base/Page-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
+@import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";

package/src/themes/sap_horizon_dark/parameters-bundle.css

@@ -6,6 +6,7 @@
 @import "../base/Page-parameters.css";
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
+@import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "./SideNavigation-parameters.css";

package/src/themes/sap_horizon_hcb/parameters-bundle.css

@@ -5,6 +5,7 @@
 @import "./NotificationListItem-parameters.css";
 @import "./Page-parameters.css";
 @import "./ProductSwitchItem-parameters.css";
+@import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "./SideNavigation-parameters.css";
 @import "./TimelineItem-parameters.css";

package/src/themes/sap_horizon_hcw/parameters-bundle.css

@@ -12,6 +12,7 @@
 @import "../base/ViewSettingsDialog-parameters.css";
 @import "./Wizard-parameters.css";
 @import "./WizardTab-parameters.css";
+@import "../base/ShellBar-parameters.css";
 @import "./ShellBar-parameters.css";
 @import "../base/DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";

package/dist/generated/templates/ShellBarPopoverTemplate.lit.d.ts

@@ -1,3 +0,0 @@
-type ShellBarPopover = any;
-declare function template(this: ShellBarPopover): import("lit-html").TemplateResult;
-export default template;

package/dist/generated/templates/ShellBarPopoverTemplate.lit.js

@@ -1,9 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
-function block0(context, tags, suffix) { return suffix ? html `<${scopeTag("ui5-popover", tags, suffix)} class="ui5-shellbar-menu-popover" hide-arrow placement="Bottom" prevent-initial-focus @ui5-before-open=${ifDefined(this._menuPopoverBeforeOpen)} @ui5-close=${ifDefined(this._menuPopoverAfterClose)}><${scopeTag("ui5-list", tags, suffix)} separators="None" selection-mode="Single" @ui5-selection-change=${ifDefined(this._menuItemPress)}>${repeat(this._menuPopoverItems, (item, index) => item._id || index, (item, index) => block1.call(this, context, tags, suffix, item, index))}</${scopeTag("ui5-list", tags, suffix)}></${scopeTag("ui5-popover", tags, suffix)}><${scopeTag("ui5-popover", tags, suffix)} class="ui5-shellbar-overflow-popover" placement="Bottom" prevent-initial-focus horizontal-align="${ifDefined(this.popoverHorizontalAlign)}" hide-arrow @ui5-before-open=${ifDefined(this._overflowPopoverBeforeOpen)} @ui5-close=${ifDefined(this._overflowPopoverAfterClose)}><${scopeTag("ui5-list", tags, suffix)} separators="None" @ui5-item-click="${ifDefined(this._handleActionListClick)}">${repeat(this._hiddenIcons, (item, index) => item._id || index, (item, index) => block2.call(this, context, tags, suffix, item, index))}</${scopeTag("ui5-list", tags, suffix)}></${scopeTag("ui5-popover", tags, suffix)}>` : html `<ui5-popover class="ui5-shellbar-menu-popover" hide-arrow placement="Bottom" prevent-initial-focus @ui5-before-open=${ifDefined(this._menuPopoverBeforeOpen)} @ui5-close=${ifDefined(this._menuPopoverAfterClose)}><ui5-list separators="None" selection-mode="Single" @ui5-selection-change=${ifDefined(this._menuItemPress)}>${repeat(this._menuPopoverItems, (item, index) => item._id || index, (item, index) => block1.call(this, context, tags, suffix, item, index))}</ui5-list></ui5-popover><ui5-popover class="ui5-shellbar-overflow-popover" placement="Bottom" prevent-initial-focus horizontal-align="${ifDefined(this.popoverHorizontalAlign)}" hide-arrow @ui5-before-open=${ifDefined(this._overflowPopoverBeforeOpen)} @ui5-close=${ifDefined(this._overflowPopoverAfterClose)}><ui5-list separators="None" @ui5-item-click="${ifDefined(this._handleActionListClick)}">${repeat(this._hiddenIcons, (item, index) => item._id || index, (item, index) => block2.call(this, context, tags, suffix, item, index))}</ui5-list></ui5-popover>`; }
-function block1(context, tags, suffix, item, index) { return html `${ifDefined(item)}`; }
-function block2(context, tags, suffix, item, index) { return suffix ? html `<${scopeTag("ui5-li", tags, suffix)} data-ui5-external-action-item-id="${ifDefined(item.refItemid)}" icon="${ifDefined(item.icon)}" type="Active" @ui5-_press="${ifDefined(item.press)}" tooltip="${ifDefined(item.text)}">${ifDefined(item.text)}</${scopeTag("ui5-li", tags, suffix)}>` : html `<ui5-li data-ui5-external-action-item-id="${ifDefined(item.refItemid)}" icon="${ifDefined(item.icon)}" type="Active" @ui5-_press="${ifDefined(item.press)}" tooltip="${ifDefined(item.text)}">${ifDefined(item.text)}</ui5-li>`; }
-function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }
-export default template;
-//# sourceMappingURL=ShellBarPopoverTemplate.lit.js.map