@ui5/webcomponents-fiori 2.19.2 → 2.20.0-rc.1

package/src/themes/ShellBarItem.css

@@ -0,0 +1,43 @@
+/* ============================================================================
+   ACTION BUTTON STYLING
+   ============================================================================ */
+
+.ui5-shellbar-action-button {
+	width: 2.25rem;
+	height: 2.25rem;
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button:hover {
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-action-button[active] {
+	color: var(--_ui5_shellbar_button_active_color);
+}
+
+[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: var(--sapFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+	pointer-events: none;
+}
+
+[ui5-li][data-count]:after {
+	content: attr(data-count);
+}

package/src/themes/ShellBarLegacy.css

@@ -0,0 +1,174 @@
+/* Legacy Features CSS - Logo, Titles, Menu */
+
+/* Logo */
+.ui5-shellbar-logo {
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.ui5-shellbar-logo-area,
+.ui5-shellbar-legacy-branding {
+	overflow: hidden;
+	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);
+	margin-inline-start: 0.125rem;
+}
+
+.ui5-shellbar-logo:focus,
+.ui5-shellbar-logo-area:focus {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-overflow-container > .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);
+}
+
+::slotted([slot="logo"]) {
+	max-height: 2rem;
+}
+
+::slotted([slot="logo"]):active {
+	pointer-events: none;
+}
+
+/* Title Area */
+.ui5-shellbar-headings {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	overflow: hidden;
+	margin-inline-start: 0.25rem;
+}
+
+.ui5-shellbar-primary-title,
+.ui5-shellbar-menu-button-title,
+.ui5-shellbar-title {
+	display: inline-block;
+	font-family: var(--sapFontSemiboldDuplexFamily);
+	margin: 0;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-secondary-title {
+	display: inline-block;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapShell_TextColor);
+	font-weight: normal;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-align: start;
+}
+
+/* Menu Button */
+.ui5-shellbar-menu-button {
+	white-space: nowrap;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 0.25rem 0.5rem;
+	cursor: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+	margin-inline-start: 0.5rem;
+	height: 2.25rem;
+	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+	background: var(--sapButton_Lite_Background);
+	outline-color: var(--_ui5_shellbar_logo_outline_color);
+	color: var(--sapShell_TextColor);
+	box-sizing: border-box;
+	border-radius: var(--_ui5_shellbar_button_border_radius);
+	position: relative;
+	font-weight: bold;
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: pointer;
+	background: var(--sapButton_Lite_Background);
+	border: var(--_ui5_shellbar_button_border);
+	color: var(--sapShell_TextColor);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_TextColor);
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
+	background: var(--sapShell_Active_Background);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
+	color: var(--_ui5_shellbar_button_active_color);
+	box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
+	color: var(--sapShell_Active_TextColor);
+}
+
+:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
+	outline: var(--_ui5_shellbar_logo_outline);
+	outline-offset: var(--_ui5_shellbar_outline_offset);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
+	border: none;
+}
+
+.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
+	box-shadow: none;
+}
+
+.ui5-shellbar-menu-button-arrow {
+	display: inline-block;
+	font-family: var(--sapFontSemiboldDuplexFamily);
+	margin: 0;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
+	color: var(--sapShell_SubBrand_TextColor);
+}
+
+.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
+	margin-inline-start: 0.375rem;
+}
+
+:host(:not([primary-title])) .ui5-shellbar-menu-button {
+	min-width: 2.25rem;
+	justify-content: center;
+}
+
+:host(:not([with-logo])) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
+	margin-inline-start: 0;
+}
+

package/src/themes/ShellBarSearchLegacy.css

@@ -0,0 +1,44 @@
+/* Legacy Search Styles - ONLY for ui5-input and custom div search fields */
+
+/* CSS variable overrides for ui5-input component */
+::slotted([ui5-input]) {
+	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
+	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
+	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
+	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
+	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
+	--_ui5_input_margin_top_bottom: 0;
+}
+
+/* ui5-input specific styles */
+::slotted([ui5-input]) {
+	background: var(--_ui5_shellbar_search_field_background);
+	border: var(--_ui5_shellbar_search_field_border);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
+	color: var(--_ui5_shellbar_search_field_color);
+	height: 2.25rem;
+	width: 100%;
+	min-width: var(--_ui5_shellbar_search_field_width);
+}
+
+/* ui5-input breakpoint adjustments */
+: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;
+}
+
+/* ui5-input hover */
+::slotted([ui5-input]:hover) {
+	background: var(--_ui5_shellbar_search_field_background_hover);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
+/* ui5-input focus */
+::slotted([ui5-input][focused]) {
+	outline: var(--_ui5_shellbar_search_field_outline_focused);
+}
+

package/dist/ShellBarPopoverTemplate.d.ts

@@ -1,2 +0,0 @@
-import type ShellBar from "./ShellBar.js";
-export default function PopoversTemplate(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ShellBarPopoverTemplate.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
-import Popover from "@ui5/webcomponents/dist/Popover.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
-import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
-export default function PopoversTemplate() {
-    return (_jsxs(_Fragment, { children: [_jsx(Popover, { class: "ui5-shellbar-menu-popover", hideArrow: true, placement: "Bottom", preventInitialFocus: true, onBeforeOpen: this._menuPopoverBeforeOpen, onClose: this._menuPopoverAfterClose, children: _jsx(List, { separators: "None", selectionMode: "Single", onItemClick: this._menuItemPress, children: _jsx("slot", { name: "menuItems" }) }) }), _jsx(Popover, { class: "ui5-shellbar-overflow-popover", placement: "Bottom", preventInitialFocus: true, horizontalAlign: PopoverHorizontalAlign.End, hideArrow: true, onBeforeOpen: this._overflowPopoverBeforeOpen, onClose: this._overflowPopoverAfterClose, children: _jsx(List, { separators: "None", onItemClick: this._handleActionListClick, children: this._hiddenIcons.map((icon, index) => (_jsx(ListItemStandard, { "data-count": icon.count, "data-ui5-external-action-item-id": icon.refItemid, "data-ui5-stable": icon.stableDomRef, icon: icon.icon ? icon.icon : "", type: "Active", "onui5-_press": icon.press, tooltip: icon.tooltip, accessibilityAttributes: this.accInfo.search.accessibilityAttributes, children: icon.text }, index))) }) })] }));
-}
-//# sourceMappingURL=ShellBarPopoverTemplate.js.map

package/dist/ShellBarPopoverTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShellBarPopoverTemplate.js","sourceRoot":"","sources":["../src/ShellBarPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAG3E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,8BACC,KAAC,OAAO,IAAC,KAAK,EAAC,2BAA2B,EACzC,SAAS,EAAE,IAAI,EACf,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,YAAY,EAAE,IAAI,CAAC,sBAAsB,EACzC,OAAO,EAAE,IAAI,CAAC,sBAAsB,YAEpC,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,cAAc,YAC9E,eAAM,IAAI,EAAC,WAAW,GAAQ,GACxB,GACE,EAEV,KAAC,OAAO,IAAC,KAAK,EAAC,+BAA+B,EAC7C,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,eAAe,EAAE,sBAAsB,CAAC,GAAG,EAC3C,SAAS,EAAE,IAAI,EACf,YAAY,EAAE,IAAI,CAAC,0BAA0B,EAC7C,OAAO,EAAE,IAAI,CAAC,0BAA0B,YAExC,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAE,IAAI,CAAC,sBAAsB,YAC9D,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,KAAC,gBAAgB,kBAEJ,IAAI,CAAC,KAAK,sCACY,IAAI,CAAC,SAAS,qBAC/B,IAAI,CAAC,YAAY,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAChC,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,YAEnE,IAAI,CAAC,IAAI,IAVL,KAAK,CAWQ,CACnB,CAAC,GACI,GACE,IACR,CACH,CAAC;AACH,CAAC","sourcesContent":["import Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport type ShellBar from \"./ShellBar.js\";\n\nexport default function PopoversTemplate(this: ShellBar) {\n\treturn (\n\t\t<>\n\t\t\t<Popover class=\"ui5-shellbar-menu-popover\"\n\t\t\t\thideArrow={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tonBeforeOpen={this._menuPopoverBeforeOpen}\n\t\t\t\tonClose={this._menuPopoverAfterClose}\n\t\t\t>\n\t\t\t\t<List separators=\"None\" selectionMode=\"Single\" onItemClick={this._menuItemPress}>\n\t\t\t\t\t<slot name=\"menuItems\"></slot>\n\t\t\t\t</List>\n\t\t\t</Popover>\n\n\t\t\t<Popover class=\"ui5-shellbar-overflow-popover\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\thorizontalAlign={PopoverHorizontalAlign.End}\n\t\t\t\thideArrow={true}\n\t\t\t\tonBeforeOpen={this._overflowPopoverBeforeOpen}\n\t\t\t\tonClose={this._overflowPopoverAfterClose}\n\t\t\t>\n\t\t\t\t<List separators=\"None\" onItemClick={this._handleActionListClick}>\n\t\t\t\t\t{this._hiddenIcons.map((icon, index) => (\n\t\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tdata-count={icon.count}\n\t\t\t\t\t\t\tdata-ui5-external-action-item-id={icon.refItemid}\n\t\t\t\t\t\t\tdata-ui5-stable={icon.stableDomRef}\n\t\t\t\t\t\t\ticon={icon.icon ? icon.icon : \"\"}\n\t\t\t\t\t\t\ttype=\"Active\"\n\t\t\t\t\t\t\tonui5-_press={icon.press}\n\t\t\t\t\t\t\ttooltip={icon.tooltip}\n\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.search.accessibilityAttributes}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{icon.text}\n\t\t\t\t\t\t</ListItemStandard>\n\t\t\t\t\t))}\n\t\t\t\t</List>\n\t\t\t</Popover>\n\t\t</>\n\t);\n}\n"]}

package/src/ShellBarPopoverTemplate.tsx

@@ -1,50 +0,0 @@
-import Popover from "@ui5/webcomponents/dist/Popover.js";
-import List from "@ui5/webcomponents/dist/List.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
-import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
-import type ShellBar from "./ShellBar.js";
-
-export default function PopoversTemplate(this: ShellBar) {
-	return (
-		<>
-			<Popover class="ui5-shellbar-menu-popover"
-				hideArrow={true}
-				placement="Bottom"
-				preventInitialFocus={true}
-				onBeforeOpen={this._menuPopoverBeforeOpen}
-				onClose={this._menuPopoverAfterClose}
-			>
-				<List separators="None" selectionMode="Single" onItemClick={this._menuItemPress}>
-					<slot name="menuItems"></slot>
-				</List>
-			</Popover>
-
-			<Popover class="ui5-shellbar-overflow-popover"
-				placement="Bottom"
-				preventInitialFocus={true}
-				horizontalAlign={PopoverHorizontalAlign.End}
-				hideArrow={true}
-				onBeforeOpen={this._overflowPopoverBeforeOpen}
-				onClose={this._overflowPopoverAfterClose}
-			>
-				<List separators="None" onItemClick={this._handleActionListClick}>
-					{this._hiddenIcons.map((icon, index) => (
-						<ListItemStandard
-							key={index}
-							data-count={icon.count}
-							data-ui5-external-action-item-id={icon.refItemid}
-							data-ui5-stable={icon.stableDomRef}
-							icon={icon.icon ? icon.icon : ""}
-							type="Active"
-							onui5-_press={icon.press}
-							tooltip={icon.tooltip}
-							accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
-						>
-							{icon.text}
-						</ListItemStandard>
-					))}
-				</List>
-			</Popover>
-		</>
-	);
-}