@ui5/webcomponents-fiori 2.22.0-rc.4 → 2.22.0

package/src/UserMenuItemTemplate.tsx

@@ -1,6 +1,24 @@
 import type UserMenuItem from "./UserMenuItem.js";
 import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 
 export default function UserMenuItemTemplate(this: UserMenuItem) {
-	return [MenuItemTemplate.call(this)];
+	const hooks: Partial<MenuItemHooks> = {};
+
+	if (this.showSelection) {
+		hooks.menuItemTextContent = userMenuItemTextContent;
+	}
+
+	return [MenuItemTemplate.call(this, hooks)];
+}
+
+function userMenuItemTextContent(this: UserMenuItem) {
+	return (
+		<div class="ui5-user-menu-item-text-wrapper">
+			{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
+			{this._selectedSubItemText &&
+				<div class="ui5-user-menu-item-selection-text">{this._selectedSubItemText}</div>
+			}
+		</div>
+	);
 }

package/src/ViewSettingsDialogTemplate.tsx

@@ -93,7 +93,7 @@ function _getSplitButtonItems(this: ViewSettingsDialog) {
 	}
 
 	if (this.shouldBuildCustomTabs) {
-		this._renderableCustomTabs.forEach(customTab => {
+		this.customTabs.forEach(customTab => {
 			buttonItems.push(
 				<SegmentedButtonItem
 					selected={this.isCurrentCustomTabMode(customTab)}
@@ -130,8 +130,8 @@ function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
 
 			{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>
+					{this._selectedCustomTab.titleText && (
+						<div class="ui5-vsd-custom-tab-title">{this._selectedCustomTab.titleText}</div>
 					)}
 					<slot class="ui5-vsd-custom-tab-slot" name={this._selectedCustomTab._individualSlot}></slot>
 				</div>

package/src/i18n/messagebundle.properties

@@ -116,36 +116,6 @@ 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
 
@@ -207,7 +177,7 @@ SHELLBAR_NOTIFICATIONS = {0} Notifications
 SHELLBAR_NOTIFICATIONS_NO_COUNT = Notifications
 
 #XACT: ARIA announcement for the profile button
-SHELLBAR_PROFILE = Profile
+SHELLBAR_PROFILE = User Menu
 
 #XACT: ARIA announcement for the products button
 SHELLBAR_PRODUCTS = Products

package/src/i18n/messagebundle_en.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} Notifications
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Notifications
 
-SHELLBAR_PROFILE=Profile
+SHELLBAR_PROFILE=User Menu
 
 SHELLBAR_PRODUCTS=Products
 

package/src/i18n/messagebundle_en_GB.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} Notifications
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Notifications
 
-SHELLBAR_PROFILE=Profile
+SHELLBAR_PROFILE=User Menu
 
 SHELLBAR_PRODUCTS=Products
 

package/src/themes/Timeline.css

@@ -2,10 +2,10 @@
 	display: block;
 }
 
-/* Header bar wrapper - slotted content */
-.ui5-timeline-header-bar-wrapper {
-	flex-shrink: 0;
-	margin-block-end: 1rem;
+.ui5-timeline-root {
+	padding: var(--_ui5_tl_padding);
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .ui5-timeline-list {
@@ -69,34 +69,20 @@
 	display: none;
 }
 
-.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-root,
 .ui5-timeline-busy-indicator {
-	display: block;
 	width: 100%;
-	flex: 1;
-	min-height: 0;
+	height: 100%;
 	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/UserMenuItem.css

@@ -1,12 +1,46 @@
 :host {
-    height: 40px;
+	height: 2.5rem;
+	min-height: 2.5rem;
 	border: none;
 }
 
+.ui5-li-root {
+	min-height: 2.5rem;
+}
+
 :host(:last-of-type) {
-    margin-bottom: 0;
+	margin-bottom: 0;
 }
 
 :host(:first-of-type) {
-    margin-top: 0;
+	margin-top: 0;
+}
+
+:host([show-selection]) {
+	height: 3.25rem;
+	min-height: 3.25rem;
+}
+
+:host([show-selection]) .ui5-li-root {
+	min-height: 3.25rem;
+	padding-block: 0.5rem;
+}
+
+.ui5-user-menu-item-text-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	overflow: hidden;
+	flex: 1;
+	min-width: 0;
+}
+
+.ui5-user-menu-item-selection-text {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+	color: var(--sapContent_LabelColor);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }

package/dist/TimelineFilterOption.d.ts

@@ -1,37 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-/**
- * @class
- *
- * ### Overview
- *
- * The `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.
- * It represents a single selectable option that users can choose to filter timeline items.
- *
- * ### Usage
- *
- * The `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.
- * Each option represents a specific value that can be used for filtering.
- *
- * ### ES6 Module Import
- *
- * `import "@ui5/webcomponents-fiori/dist/TimelineFilterOption.js";`
- * @constructor
- * @extends UI5Element
- * @since 2.22.0
- * @public
- */
-declare class TimelineFilterOption extends UI5Element {
-    /**
-     * Defines the text of the filter option.
-     * @default ""
-     * @public
-     */
-    text: string;
-    /**
-     * Defines if the filter option is selected.
-     * @default false
-     * @public
-     */
-    selected: boolean;
-}
-export default TimelineFilterOption;

package/dist/TimelineFilterOption.js

@@ -1,59 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-/**
- * @class
- *
- * ### Overview
- *
- * The `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.
- * It represents a single selectable option that users can choose to filter timeline items.
- *
- * ### Usage
- *
- * The `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.
- * Each option represents a specific value that can be used for filtering.
- *
- * ### ES6 Module Import
- *
- * `import "@ui5/webcomponents-fiori/dist/TimelineFilterOption.js";`
- * @constructor
- * @extends UI5Element
- * @since 2.22.0
- * @public
- */
-let TimelineFilterOption = class TimelineFilterOption extends UI5Element {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines the text of the filter option.
-         * @default ""
-         * @public
-         */
-        this.text = "";
-        /**
-         * Defines if the filter option is selected.
-         * @default false
-         * @public
-         */
-        this.selected = false;
-    }
-};
-__decorate([
-    property()
-], TimelineFilterOption.prototype, "text", void 0);
-__decorate([
-    property({ type: Boolean })
-], TimelineFilterOption.prototype, "selected", void 0);
-TimelineFilterOption = __decorate([
-    customElement("ui5-timeline-filter-option")
-], TimelineFilterOption);
-TimelineFilterOption.define();
-export default TimelineFilterOption;
-//# sourceMappingURL=TimelineFilterOption.js.map

package/dist/TimelineFilterOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineFilterOption.js","sourceRoot":"","sources":["../src/TimelineFilterOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QACC;;;;WAIG;QAEH,SAAI,GAAG,EAAE,CAAC;QAEV;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAClB,CAAC;CAAA,CAAA;AATA;IADC,QAAQ,EAAE;kDACD;AAQV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACX;AAfZ,oBAAoB;IADzB,aAAa,CAAC,4BAA4B,CAAC;GACtC,oBAAoB,CAgBzB;AAED,oBAAoB,CAAC,MAAM,EAAE,CAAC;AAE9B,eAAe,oBAAoB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.\n * It represents a single selectable option that users can choose to filter timeline items.\n *\n * ### Usage\n *\n * The `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.\n * Each option represents a specific value that can be used for filtering.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/TimelineFilterOption.js\";`\n * @constructor\n * @extends UI5Element\n * @since 2.22.0\n * @public\n */\n@customElement(\"ui5-timeline-filter-option\")\nclass TimelineFilterOption extends UI5Element {\n\t/**\n\t * Defines the text of the filter option.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext = \"\";\n\n\t/**\n\t * Defines if the filter option is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n}\n\nTimelineFilterOption.define();\n\nexport default TimelineFilterOption;\n"]}

package/dist/TimelineHeaderBar.d.ts

@@ -1,114 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type TimelineSortOrder from "./types/TimelineSortOrder.js";
-import type TimelineFilterOption from "./TimelineFilterOption.js";
-import "@ui5/webcomponents-icons/dist/sort-descending.js";
-import "@ui5/webcomponents-icons/dist/add-filter.js";
-type TimelineHeaderBarSearchEventDetail = {
-    value: string;
-};
-type TimelineHeaderBarFilterEventDetail = {
-    filterBy: string;
-    selectedOptions: string[];
-};
-type TimelineHeaderBarSortEventDetail = {
-    sortOrder: string;
-};
-/**
- * @class
- *
- * ### Overview
- *
- * The `ui5-timeline-header-bar` component provides search, filter, and sort functionality
- * for the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot
- * of the Timeline.
- *
- * ### Usage
- *
- * The component fires events (`search`, `filter`, `sort`) that the application should handle
- * to filter/sort the timeline items. The Timeline component itself does not perform any
- * filtering or sorting - this is the responsibility of the application.
- *
- * ### ES6 Module Import
- *
- * `import "@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js";`
- *
- * @constructor
- * @extends UI5Element
- * @public
- * @since 2.22.0
- */
-declare class TimelineHeaderBar extends UI5Element {
-    eventDetails: {
-        "search": TimelineHeaderBarSearchEventDetail;
-        "filter": TimelineHeaderBarFilterEventDetail;
-        "sort": TimelineHeaderBarSortEventDetail;
-    };
-    /**
-     * Shows the search input field.
-     * @default false
-     * @public
-     */
-    showSearch: boolean;
-    /**
-     * Shows the filter button.
-     * @default false
-     * @public
-     */
-    showFilter: boolean;
-    /**
-     * Shows the sort button.
-     * @default false
-     * @public
-     */
-    showSort: boolean;
-    /**
-     * The current filter category label.
-     * @default ""
-     * @public
-     */
-    filterBy: string;
-    /**
-     * The current search value.
-     * @default ""
-     * @public
-     */
-    searchValue: string;
-    /**
-     * The current sort order.
-     * @default "Ascending"
-     * @public
-     */
-    sortOrder: `${TimelineSortOrder}`;
-    /**
-     * Controls the filter dialog visibility.
-     * @private
-     */
-    _filterDialogOpen: boolean;
-    /**
-     * Filter options to display in the filter dialog.
-     * @public
-     */
-    filterOptions: Slot<TimelineFilterOption>;
-    static i18nBundle: I18nBundle;
-    get _headerBarAccessibleName(): string;
-    get _searchPlaceholder(): string;
-    get _searchAccessibleName(): string;
-    get _filterAccessibleName(): string;
-    get _sortAccessibleName(): string;
-    get _sortTooltip(): string;
-    get _sortIcon(): string;
-    get _filterIcon(): string;
-    get _filterDialogTitle(): string;
-    get _filterDialogOkText(): string;
-    get _filterDialogCancelText(): string;
-    _onSearchInput(e: CustomEvent): void;
-    _onFilterClick(): void;
-    _onFilterDialogConfirm(): void;
-    _onFilterDialogCancel(): void;
-    _onFilterDialogClose(): void;
-    _onSortClick(): void;
-}
-export default TimelineHeaderBar;
-export type { TimelineHeaderBarSearchEventDetail, TimelineHeaderBarFilterEventDetail, TimelineHeaderBarSortEventDetail, };