@ui5/webcomponents-fiori 2.21.0 → 2.22.0-rc.1

package/src/TimelineHeaderBarTemplate.tsx

@@ -0,0 +1,104 @@
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import ToolbarSpacer from "@ui5/webcomponents/dist/ToolbarSpacer.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import Bar from "@ui5/webcomponents/dist/Bar.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import type TimelineHeaderBar from "./TimelineHeaderBar.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import sortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import addFilter from "@ui5/webcomponents-icons/dist/add-filter.js";
+
+export default function TimelineHeaderBarTemplate(this: TimelineHeaderBar) {
+	return (<>
+		<Toolbar
+			class="ui5-timeline-header-bar-toolbar"
+			accessibleName={this._headerBarAccessibleName}
+		>
+			{/* Spacer pushes all controls to the end */}
+			<ToolbarSpacer />
+
+			{/* Search Input */}
+			{this.showSearch && (
+				<Input
+					class="ui5-timeline-header-bar-search"
+					placeholder={this._searchPlaceholder}
+					value={this.searchValue}
+					showClearIcon={true}
+					accessibleName={this._searchAccessibleName}
+					onInput={this._onSearchInput}
+				>
+					<Icon slot="icon" name={searchIcon} />
+				</Input>
+			)}
+
+			{/* Sort Button */}
+			{this.showSort && (
+				<ToolbarButton
+					icon={sortDescending}
+					design="Transparent"
+					tooltip={this._sortTooltip}
+					accessibleName={this._sortAccessibleName}
+					onClick={this._onSortClick}
+				/>
+			)}
+
+			{/* Filter Button */}
+			{this.showFilter && (
+				<ToolbarButton
+					icon={addFilter}
+					design="Transparent"
+					tooltip={this._filterAccessibleName}
+					accessibleName={this._filterAccessibleName}
+					onClick={this._onFilterClick}
+				/>
+			)}
+		</Toolbar>
+
+		{/* Filter Dialog */}
+		{this.showFilter && (
+			<Dialog
+				class="ui5-timeline-filter-dialog"
+				headerText={this._filterDialogTitle}
+				open={this._filterDialogOpen}
+				onClose={this._onFilterDialogClose}
+			>
+				<List
+					selectionMode="Multiple"
+					class="ui5-timeline-filter-list"
+				>
+					{this.filterOptions.map(option => (
+						<ListItemStandard
+							key={option.text}
+							selected={option.selected}
+							data-filter-text={option.text}
+						>
+							{option.text}
+						</ListItemStandard>
+					))}
+				</List>
+
+				<Bar slot="footer" design="Footer">
+					<Button
+						slot="endContent"
+						design="Emphasized"
+						onClick={this._onFilterDialogConfirm}
+					>
+						{this._filterDialogOkText}
+					</Button>
+					<Button
+						slot="endContent"
+						design="Transparent"
+						onClick={this._onFilterDialogCancel}
+					>
+						{this._filterDialogCancelText}
+					</Button>
+				</Bar>
+			</Dialog>
+		)}
+	</>);
+}

package/src/TimelineTemplate.tsx

@@ -14,6 +14,13 @@ export default function TimelineTemplate(this: Timeline) {
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
 		>
+			{/* Header Bar Slot */}
+			{this._hasHeaderBar && (
+				<div class="ui5-timeline-header-bar-wrapper">
+					<slot name="headerBar"></slot>
+				</div>
+			)}
+
 			<BusyIndicator
 				id={`${this._id}-busyIndicator`}
 				delay={this.loadingDelay}

package/src/ViewSettingsDialogCustomTabTemplate.tsx

@@ -0,0 +1,5 @@
+import type ViewSettingsDialogCustomTab from "./ViewSettingsDialogCustomTab.js";
+
+export default function ViewSettingsDialogCustomTabTemplate(this: ViewSettingsDialogCustomTab) {
+	return <slot></slot>;
+}

package/src/ViewSettingsDialogTemplate.tsx

@@ -92,6 +92,19 @@ function _getSplitButtonItems(this: ViewSettingsDialog) {
 		);
 	}
 
+	if (this.shouldBuildCustomTabs) {
+		this._renderableCustomTabs.forEach(customTab => {
+			buttonItems.push(
+				<SegmentedButtonItem
+					selected={this.isCurrentCustomTabMode(customTab)}
+					data-mode={this._customTabMode(customTab)}
+					tooltip={customTab.tooltip}
+					icon={customTab.icon}
+				/>
+			);
+		});
+	}
+
 	return buttonItems;
 }
 
@@ -115,6 +128,24 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 				ViewSettingsDialogSortAndGroupTemplate.call(this, false)
 			)}
 
+			{this.isModeCustom && this._selectedCustomTab && (
+				<div class="ui5-vsd-custom-tab-content">
+					{this._selectedCustomTab.title && (
+						<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.title}</div>
+					)}
+					<slot class="ui5-vsd-custom-tab-slot" name={this._selectedCustomTab._individualSlot}></slot>
+				</div>
+			)}
+
+			{/* Hidden slots for non-active custom tabs to prevent content leaking */}
+			<div class="ui5-vsd-hidden-tabs">
+				{this.customTabs
+					.filter(tab => tab !== this._selectedCustomTab)
+					.map(tab => (
+						<slot name={tab._individualSlot}></slot>
+					))}
+			</div>
+
 		</div>
 	);
 }

package/src/i18n/messagebundle.properties

@@ -116,6 +116,36 @@ TIMELINE_ITEM_POSITIVE_STATE_TEXT=Positive State
 TIMELINE_ITEM_NEGATIVE_STATE_TEXT=Negative State
 TIMELINE_ITEM_CRITICAL_STATE_TEXT=Critical State
 
+#XACT: Accessible name for timeline header bar
+TIMELINE_HEADER_BAR_ACCESSIBLE_NAME=Timeline actions
+
+#XFLD: Placeholder for timeline search input
+TIMELINE_SEARCH_PLACEHOLDER=Search
+
+#XACT: Accessible name for timeline search input
+TIMELINE_SEARCH_ACCESSIBLE_NAME=Search timeline items
+
+#XACT: Accessible name for timeline filter dropdown
+TIMELINE_FILTER_ACCESSIBLE_NAME=Filter timeline items
+
+#XTOL: Tooltip for sort ascending button
+TIMELINE_SORT_ASCENDING_TOOLTIP=Sort ascending
+
+#XTOL: Tooltip for sort descending button
+TIMELINE_SORT_DESCENDING_TOOLTIP=Sort descending
+
+#XACT: Accessible name for sort button
+TIMELINE_SORT_ACCESSIBLE_NAME=Sort timeline items
+
+#XTIT: Title for timeline filter dialog
+TIMELINE_FILTER_DIALOG_TITLE=Filter By
+
+#XBUT: OK button text for timeline filter dialog
+TIMELINE_FILTER_DIALOG_OK=OK
+
+#XBUT: Cancel button text for timeline filter dialog
+TIMELINE_FILTER_DIALOG_CANCEL=Cancel
+
 #XBUT: Button text for cancel button in the UploadCollectionItem
 UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT=Cancel
 

package/src/themes/Timeline.css

@@ -2,10 +2,10 @@
 	display: block;
 }
 
-.ui5-timeline-root {
-	padding: var(--_ui5_tl_padding);
-	box-sizing: border-box;
-	overflow: hidden;
+/* Header bar wrapper - slotted content */
+.ui5-timeline-header-bar-wrapper {
+	flex-shrink: 0;
+	margin-block-end: 1rem;
 }
 
 .ui5-timeline-list {
@@ -69,20 +69,34 @@
 	display: none;
 }
 
-.ui5-timeline-root,
-.ui5-timeline-busy-indicator {
+.ui5-timeline-root {
 	width: 100%;
 	height: 100%;
 	position: relative;
 	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	padding: var(--_ui5_tl_padding);
+	overflow: hidden;
+}
+
+.ui5-timeline-busy-indicator {
+	display: block;
+	width: 100%;
+	flex: 1;
+	min-height: 0;
+	position: relative;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 :host([layout="Vertical"]) .ui5-timeline-scroll-container {
 	height: 100%;
 	width: 100%;
+	overflow: auto;
 }
 
 :host([growing="Scroll"]) .ui5-timeline-end-marker {
 	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
 	display: inline-block;
-}
+}

package/src/themes/TimelineHeaderBar.css

@@ -0,0 +1,17 @@
+:host {
+	display: block;
+	--_ui5_timeline_header_bar_search_max_width: 16rem;
+	--_ui5_timeline_filter_dialog_min_width: 20rem;
+}
+
+.ui5-timeline-header-bar-search {
+	max-width: var(--_ui5_timeline_header_bar_search_max_width);
+}
+
+.ui5-timeline-filter-dialog {
+	min-width: var(--_ui5_timeline_filter_dialog_min_width);
+}
+
+.ui5-timeline-filter-list {
+	width: 100%;
+}

package/src/themes/ViewSettingsDialog.css

@@ -65,6 +65,39 @@
 	height: 100%;
 }
 
+.ui5-vsd-custom-tab-content {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 0.5rem 1rem;
+	overflow: auto;
+	min-width: 0;
+}
+
+.ui5-vsd-custom-tab-title {
+	color: var(--sapList_TableGroupHeaderTextColor);
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader6Size);
+	font-weight: bold;
+	line-height: 2rem;
+	min-height: 2rem;
+	margin: 0;
+}
+
+.ui5-vsd-custom-tab-slot::slotted([ui5-view-settings-custom-tab]) {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	min-width: 0;
+	box-sizing: border-box;
+	font-family: var(--sapFontFamily);
+	color: var(--sapTextColor);
+}
+
+.ui5-vsd-hidden-tabs {
+	display: none;
+}
+
 [ui5-li-group]::part(header) {
 	overflow: hidden;
 }