@openui5/sap.ui.webc.fiori 1.93.3 → 1.96.2

package/src/sap/ui/webc/fiori/thirdparty/FlexibleColumnLayout.js

@@ -112,6 +112,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		onExitDOM() {
 			ResizeHandler__default.deregister(this, this._handleResize);
+			["start", "mid", "end"].forEach(column => {
+				this[`${column}ColumnDOM`].removeEventListener("transitionend", this.columnResizeHandler);
+			});
 		}
 		onAfterRendering() {
 			if (this.initialRendering) {
@@ -177,16 +180,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			if (currentlyHidden) {
 				columnDOM.style.width = columnWidth;
-				setTimeout(() => {
-					columnDOM.classList.add("ui5-fcl-column--hidden");
-				}, FlexibleColumnLayout.ANIMATION_DURATION);
+				columnDOM.addEventListener("transitionend", this.columnResizeHandler);
 				return;
 			}
 			if (previouslyHidden) {
+				columnDOM.removeEventListener("transitionend", this.columnResizeHandler);
 				columnDOM.classList.remove("ui5-fcl-column--hidden");
 				columnDOM.style.width = columnWidth;
 			}
 		}
+		columnResizeHandler(event) {
+			event.target.classList.add("ui5-fcl-column--hidden");
+		}
 		nextLayout(layout, arrowsInfo = {}) {
 			if (arrowsInfo.start) {
 				return FCLLayout$1.getNextLayoutByStartArrow()[layout];

package/src/sap/ui/webc/fiori/thirdparty/IllustratedMessage.js

@@ -0,0 +1,138 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/asset-registries/Illustrations', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './generated/templates/IllustratedMessageTemplate.lit', './types/IllustrationMessageType', './illustrations/BeforeSearch', './generated/themes/IllustratedMessage.css'], function (UI5Element, ResizeHandler, Illustrations, i18nBundle, litRender, IllustratedMessageTemplate_lit, IllustrationMessageType, BeforeSearch, IllustratedMessage_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+
+	const ILLUSTRATION_NOT_FOUND = "ILLUSTRATION_NOT_FOUND";
+	const metadata = {
+		tag: "ui5-illustrated-message",
+		managedSlots: true,
+		properties:  {
+			titleText: {
+				type: String,
+			},
+			subtitleText: {
+				type: String,
+			},
+			media: {
+				type: String,
+			},
+			invalid: {
+				type: Boolean,
+			},
+			name: {
+				type: IllustrationMessageType,
+				defaultValue: IllustrationMessageType.BeforeSearch,
+			},
+		},
+		slots:  {
+			"default": {
+				propertyName: "actions",
+				type: HTMLElement,
+			},
+			subtitle: {
+				type: HTMLElement,
+			},
+		},
+		events:  {
+		},
+	};
+	class IllustratedMessage extends UI5Element__default {
+		constructor() {
+			super();
+			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
+			this._handleResize = this.handleResize.bind(this);
+		}
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get styles() {
+			return IllustratedMessage_css;
+		}
+		static get template() {
+			return IllustratedMessageTemplate_lit;
+		}
+		static async onDefine() {
+			await i18nBundle.fetchI18nBundle("@ui5/webcomponents-fiori");
+		}
+		static get BREAKPOINTS() {
+			return {
+				DIALOG: 679,
+				SPOT: 319,
+				BASE: 259,
+			};
+		}
+		static get MEDIA() {
+			return {
+				BASE: "base",
+				SPOT: "spot",
+				DIALOG: "dialog",
+				SCENE: "scene",
+			};
+		}
+		onBeforeRendering() {
+			const illustrationData = Illustrations.getIllustrationDataSync(this.name);
+			if (illustrationData === ILLUSTRATION_NOT_FOUND) {
+				this.invalid = true;
+				return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${this.name}.js".`);
+			}
+			this.invalid = false;
+			this.spotSvg = illustrationData.spotSvg;
+			this.dialogSvg = illustrationData.dialogSvg;
+			this.sceneSvg = illustrationData.sceneSvg;
+			this.illustrationTitle = this.i18nBundle.getText(illustrationData.title);
+			this.illustrationSubtitle = this.i18nBundle.getText(illustrationData.subtitle);
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._handleResize);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._handleResize);
+		}
+		handleResize() {
+			if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.BASE) {
+				this.media = IllustratedMessage.MEDIA.BASE;
+			} else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.SPOT) {
+				this.media = IllustratedMessage.MEDIA.SPOT;
+			} else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.DIALOG) {
+				this.media = IllustratedMessage.MEDIA.DIALOG;
+			} else {
+				this.media = IllustratedMessage.MEDIA.SCENE;
+			}
+		}
+		get effectiveIllustration() {
+			switch (this.media) {
+			case IllustratedMessage.MEDIA.SPOT:
+				return this.spotSvg;
+			case IllustratedMessage.MEDIA.DIALOG:
+				return this.dialogSvg;
+			case IllustratedMessage.MEDIA.SCENE:
+				return this.sceneSvg;
+			default:
+				return "";
+			}
+		}
+		get hasFormattedSubtitle() {
+			return !!this.subtitle.length;
+		}
+		get effectiveTitleText() {
+			return this.titleText ? this.titleText : this.illustrationTitle;
+		}
+		get effectiveSubitleText() {
+			return this.subtitleText ? this.subtitleText : this.illustrationSubtitle;
+		}
+		get hasActions() {
+			return !!this.actions.length && this.media !== IllustratedMessage.MEDIA.BASE;
+		}
+	}
+	IllustratedMessage.define();
+
+	return IllustratedMessage;
+
+});

package/src/sap/ui/webc/fiori/thirdparty/NotificationListGroupItem.js

@@ -109,8 +109,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/mai
 		get ariaLabelledBy() {
 			const id = this._id;
 			const ids = [];
-			if (this.hasHeading) {
-				ids.push(`${id}-heading`);
+			if (this.hasTitleText) {
+				ids.push(`${id}-title-text`);
 			}
 			ids.push(`${id}-invisibleText`);
 			return ids.join(" ");

package/src/sap/ui/webc/fiori/thirdparty/NotificationListItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/main/thirdparty/types/Priority', 'sap/ui/webc/main/thirdparty/Button', 'sap/ui/webc/main/thirdparty/BusyIndicator', 'sap/ui/webc/main/thirdparty/Link', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Popover', './NotificationListItemBase', './generated/i18n/i18n-defaults', './generated/templates/NotificationListItemTemplate.lit', './generated/themes/NotificationListItem.css'], function (Keys, i18nBundle, ResizeHandler, Device, Priority, Button, BusyIndicator, Link, Icon, Popover, NotificationListItemBase, i18nDefaults, NotificationListItemTemplate_lit, NotificationListItem_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/main/thirdparty/types/Priority', 'sap/ui/webc/main/thirdparty/Button', 'sap/ui/webc/main/thirdparty/BusyIndicator', 'sap/ui/webc/main/thirdparty/Link', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Popover', 'sap/ui/webc/main/thirdparty/types/WrappingType', './NotificationListItemBase', './generated/i18n/i18n-defaults', './generated/templates/NotificationListItemTemplate.lit', './generated/themes/NotificationListItem.css'], function (Keys, i18nBundle, ResizeHandler, Device, Priority, Button, BusyIndicator, Link, Icon, Popover, WrappingType, NotificationListItemBase, i18nDefaults, NotificationListItemTemplate_lit, NotificationListItem_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -9,6 +9,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 	var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 	var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 	var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
+	var WrappingType__default = /*#__PURE__*/_interopDefaultLegacy(WrappingType);
 
 	const MAX_WRAP_HEIGHT = 32;
 	const metadata = {
@@ -16,8 +17,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 		languageAware: true,
 		managedSlots: true,
 		properties:  {
-			wrap: {
-				type: Boolean,
+			wrappingType: {
+				type: WrappingType__default,
+				defaultValue: WrappingType__default.None,
 			},
 			_showMorePressed: {
 				type: Boolean,
@@ -47,7 +49,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 	class NotificationListItem extends NotificationListItemBase {
 		constructor() {
 			super();
-			this._headingOverflowHeight = 0;
+			this._titleTextOverflowHeight = 0;
 			this._descOverflowHeight = 0;
 			this.onResizeBind = this.onResize.bind(this);
 		}
@@ -97,7 +99,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 			return this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 		}
 		get hideShowMore() {
-			if (!this.wrap && this._showMore) {
+			if (this.wrappingType === WrappingType__default.None && this._showMore) {
 				return undefined;
 			}
 			return true;
@@ -105,24 +107,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 		get descriptionDOM() {
 			return this.shadowRoot.querySelector(".ui5-nli-description");
 		}
-		get headingDOM() {
-			return this.shadowRoot.querySelector(".ui5-nli-heading");
+		get titleTextDOM() {
+			return this.shadowRoot.querySelector(".ui5-nli-title-text");
 		}
-		get headingHeight() {
-			return this.headingDOM.offsetHeight;
+		get titleTextHeight() {
+			return this.titleTextDOM.offsetHeight;
 		}
 		get descriptionHeight() {
 			return this.descriptionDOM.offsetHeight;
 		}
-		get headingOverflows() {
-			const heading = this.headingDOM;
-			if (!heading) {
+		get titleTextOverflows() {
+			const titleText = this.titleTextDOM;
+			if (!titleText) {
 				return false;
 			}
 			if (Device.isIE()) {
-				return heading.scrollHeight > MAX_WRAP_HEIGHT;
+				return titleText.scrollHeight > MAX_WRAP_HEIGHT;
 			}
-			return heading.offsetHeight < heading.scrollHeight;
+			return titleText.offsetHeight < titleText.scrollHeight;
 		}
 		get descriptionOverflows() {
 			const description = this.descriptionDOM;
@@ -145,8 +147,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 		get ariaLabelledBy() {
 			const id = this._id;
 			const ids = [];
-			if (this.hasHeading) {
-				ids.push(`${id}-heading`);
+			if (this.hasTitleText) {
+				ids.push(`${id}-title-text`);
 			}
 			if (this.hasDesc) {
 				ids.push(`${id}-description`);
@@ -170,10 +172,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 			return "";
 		}
 		get accInvisibleText() {
-			const notifcationTxt = this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_TXT);
-			const readTxt = this.read ? this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_READ) : this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_UNREAD);
+			const notificationText = this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_TXT);
+			const readText = this.read ? this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_READ) : this.i18nFioriBundle.getText(i18nDefaults.NOTIFICATION_LIST_ITEM_UNREAD);
 			const priorityText = this.priorityText;
-			return `${notifcationTxt} ${readTxt} ${priorityText}`;
+			return `${notificationText} ${readText} ${priorityText}`;
 		}
 		get classes() {
 			return {
@@ -213,19 +215,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 			this.fireEvent("_press", { item: this });
 		}
 		onResize() {
-			if (this.wrap) {
+			if (this.wrappingType === WrappingType__default.Normal) {
 				this._showMore = false;
 				return;
 			}
-			const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
+			const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
 			const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
-			const overflows = headingWouldOverflow || descWouldOverflow;
+			const overflows = titleTextWouldOverflow || descWouldOverflow;
 			if (this._showMorePressed && overflows) {
 				this._showMore = true;
 				return;
 			}
-			if (this.headingOverflows || this.descriptionOverflows) {
-				this._headingOverflowHeight = this.headingHeight;
+			if (this.titleTextOverflows || this.descriptionOverflows) {
+				this._titleTextOverflowHeight = this.titleTextHeight;
 				this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 				this._showMore = true;
 				return;

package/src/sap/ui/webc/fiori/thirdparty/NotificationListItemBase.js

@@ -1,14 +1,15 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/main/thirdparty/ListItemBase', 'sap/ui/webc/main/thirdparty/types/Priority', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/icons/message-success', 'sap/ui/webc/common/thirdparty/icons/message-error', 'sap/ui/webc/common/thirdparty/icons/message-warning', 'sap/ui/webc/common/thirdparty/icons/overflow', './generated/templates/NotifactionOverflowActionsPopoverTemplate.lit', './generated/themes/NotifactionOverflowActionsPopover.css'], function (Keys, i18nBundle, ListItemBase, Priority, decline, messageSuccess, messageError, messageWarning, overflow, NotifactionOverflowActionsPopoverTemplate_lit, NotifactionOverflowActionsPopover_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/main/thirdparty/ListItemBase', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/main/thirdparty/types/Priority', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/icons/message-success', 'sap/ui/webc/common/thirdparty/icons/message-error', 'sap/ui/webc/common/thirdparty/icons/message-warning', 'sap/ui/webc/common/thirdparty/icons/overflow', './generated/templates/NotifactionOverflowActionsPopoverTemplate.lit', './generated/themes/NotifactionOverflowActionsPopover.css'], function (Keys, i18nBundle, ListItemBase, Integer, Priority, decline, messageSuccess, messageError, messageWarning, overflow, NotifactionOverflowActionsPopoverTemplate_lit, NotifactionOverflowActionsPopover_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var ListItemBase__default = /*#__PURE__*/_interopDefaultLegacy(ListItemBase);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
 	var Priority__default = /*#__PURE__*/_interopDefaultLegacy(Priority);
 
 	const metadata = {
 		managedSlots: true,
 		properties:  {
-			heading: {
+			titleText: {
 				type: String,
 			},
 			priority: {
@@ -24,6 +25,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 			busy: {
 				type: Boolean,
 			},
+			busyDelay: {
+				type: Integer__default,
+				defaultValue: 1000,
+			},
 		},
 		slots:  {
 			actions: {
@@ -55,8 +60,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 				"Low": "message-success",
 			};
 		}
-		get hasHeading() {
-			return !!this.heading.length;
+		get hasTitleText() {
+			return !!this.titleText.length;
 		}
 		get hasPriority() {
 			return this.priority !== Priority__default.None;
@@ -123,7 +128,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/th
 		}
 		async openOverflow() {
 			const overflowPopover = await this.getOverflowPopover();
-			overflowPopover.openBy(this.overflowButtonDOM);
+			overflowPopover.showAt(this.overflowButtonDOM);
 		}
 		async closeOverflow() {
 			const overflowPopover = await this.getOverflowPopover();

package/src/sap/ui/webc/fiori/thirdparty/Page.js

@@ -1,9 +1,11 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', './types/PageBackgroundDesign', './generated/templates/PageTemplate.lit', './generated/themes/Page.css'], function (UI5Element, litRender, PageBackgroundDesign, PageTemplate_lit, Page_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/MediaRange', './types/PageBackgroundDesign', './generated/templates/PageTemplate.lit', './generated/themes/Page.css'], function (UI5Element, litRender, ResizeHandler, MediaRange, PageBackgroundDesign, PageTemplate_lit, Page_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
 
 	const metadata = {
 		tag: "ui5-page",
@@ -23,6 +25,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			hideFooter: {
 				type: Boolean,
 			},
+			mediaRange: {
+				type: String,
+			},
 		},
 		slots:  {
 			header: {
@@ -52,6 +57,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static get template() {
 			return PageTemplate_lit;
 		}
+		constructor() {
+			super();
+			this._updateMediaRange = this.updateMediaRange.bind(this);
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._updateMediaRange);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._updateMediaRange);
+		}
+		updateMediaRange() {
+			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+		}
 		get _contentBottom() {
 			return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
 		}
@@ -68,6 +86,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					"bottom": this.footer.length && this._contentBottom,
 					"top": this._contentTop,
 				},
+				footer: {},
 			};
 		}
 	}

package/src/sap/ui/webc/fiori/thirdparty/ShellBar.js

@@ -11,6 +11,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 	var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 
+	const HANDLE_RESIZE_DEBOUNCE_RATE = 200;
 	const metadata = {
 		tag: "ui5-shellbar",
 		languageAware: true,
@@ -183,17 +184,26 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					this._updateClonedMenuItems();
 					if (this.hasMenuItems) {
 						const menuPopover = await this._getMenuPopover();
-						menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+						menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 					}
 				},
 			};
 			this._handleResize = async event => {
-				await this._getResponsivePopover();
-				this.overflowPopover.close();
-				this._overflowActions();
+				this._debounce(async () => {
+					await this._getResponsivePopover();
+					this.overflowPopover.close();
+					this._overflowActions();
+				}, HANDLE_RESIZE_DEBOUNCE_RATE);
 			};
 			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
 		}
+		_debounce(fn, delay) {
+			clearTimeout(this._debounceInterval);
+			this._debounceInterval = setTimeout(() => {
+				this._debounceInterval = null;
+				fn();
+			}, delay);
+		}
 		_menuItemPress(event) {
 			this.menuPopover.close();
 			this.fireEvent("menu-item-click", {
@@ -348,7 +358,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		_toggleActionPopover() {
 			const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-			this.overflowPopover.openBy(overflowButton);
+			this.overflowPopover.showAt(overflowButton);
 		}
 		onEnterDOM() {
 			ResizeHandler__default.register(this, this._handleResize);
@@ -356,6 +366,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		onExitDOM() {
 			this.menuItemsObserver.disconnect();
 			ResizeHandler__default.deregister(this, this._handleResize);
+			clearTimeout(this._debounceInterval);
+			this._debounceInterval = null;
 		}
 		_handleSearchIconPress(event) {
 			this.showSearchField = !this.showSearchField;
@@ -536,6 +548,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
 					"ui5-shellbar-menu-button": true,
 				},
+				title: {},
 				items: {
 					notification: {
 						"ui5-shellbar-hidden-button": this.isIconHidden("bell"),

package/src/sap/ui/webc/fiori/thirdparty/SideNavigation.js

@@ -120,6 +120,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		handleListItemClick(event) {
 			const listItem = event.detail.item;
 			const item = listItem.associatedItem;
+			item.fireEvent("click");
 			if (item.selected) {
 				return;
 			}
@@ -131,7 +132,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		async openPicker(opener) {
 			const responsivePopover = await this.getPicker();
-			responsivePopover.open(opener);
+			responsivePopover.showAt(opener);
 		}
 		async closePicker(opener) {
 			const responsivePopover = await this.getPicker();

package/src/sap/ui/webc/fiori/thirdparty/Timeline.js

@@ -1,15 +1,24 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', './generated/templates/TimelineTemplate.lit', './generated/i18n/i18n-defaults', './TimelineItem', './generated/themes/Timeline.css'], function (UI5Element, i18nBundle, litRender, ItemNavigation, TimelineTemplate_lit, i18nDefaults, TimelineItem, Timeline_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', './generated/templates/TimelineTemplate.lit', './generated/i18n/i18n-defaults', './TimelineItem', './generated/themes/Timeline.css', './types/TimelineLayout'], function (UI5Element, i18nBundle, litRender, Keys, ItemNavigation, NavigationMode, TimelineTemplate_lit, i18nDefaults, TimelineItem, Timeline_css, TimelineLayout) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
 	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
+	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
 
+	const SHORT_LINE_WIDTH = "ShortLineWidth";
+	const LARGE_LINE_WIDTH = "LargeLineWidth";
 	const metadata = {
 		tag: "ui5-timeline",
 		languageAware: true,
 		managedSlots: true,
+		properties:  {
+			layout: {
+				type: TimelineLayout,
+				defaultValue: TimelineLayout.Vertical,
+			},
+		},
 		slots:  {
 			"default": {
 				propertyName: "items",
@@ -51,6 +60,41 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const target = event.target;
 			this._itemNavigation.setCurrentItem(target);
 		}
+		onBeforeRendering() {
+			this._itemNavigation.navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode__default.Horizontal : NavigationMode__default.Vertical;
+			for (let i = 0; i < this.items.length; i++) {
+				this.items[i].layout = this.layout;
+				if (this.items[i + 1] && !!this.items[i + 1].icon) {
+					this.items[i]._lineWidth = SHORT_LINE_WIDTH;
+				} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {
+					this.items[i]._lineWidth = LARGE_LINE_WIDTH;
+				}
+			}
+		}
+		_onkeydown(event) {
+			if (Keys.isTabNext(event)) {
+				if (!event.target.nameClickable || event.isMarked === "link") {
+					this._handleTabNextOrPrevious(event, Keys.isTabNext(event));
+				}
+			} else if (Keys.isTabPrevious(event)) {
+				this._handleTabNextOrPrevious(event);
+			}
+		}
+		_handleTabNextOrPrevious(event, isNext) {
+			const nextTargetIndex = isNext ? this.items.indexOf(event.target) + 1 : this.items.indexOf(event.target) - 1;
+			const nextTarget = this.items[nextTargetIndex];
+			if (!nextTarget) {
+				return;
+			}
+			if (nextTarget.nameClickable && !isNext) {
+				event.preventDefault();
+				nextTarget.shadowRoot.querySelector("[ui5-link]").focus();
+				return;
+			}
+			event.preventDefault();
+			nextTarget.focus();
+			this._itemNavigation.setCurrentItem(nextTarget);
+		}
 	}
 	Timeline.define();
 

package/src/sap/ui/webc/fiori/thirdparty/TimelineItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Link', './generated/templates/TimelineItemTemplate.lit', './generated/themes/TimelineItem.css'], function (UI5Element, litRender, Icon, Link, TimelineItemTemplate_lit, TimelineItem_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/main/thirdparty/Icon', 'sap/ui/webc/main/thirdparty/Link', './generated/templates/TimelineItemTemplate.lit', './types/TimelineLayout', './generated/themes/TimelineItem.css'], function (UI5Element, litRender, Icon, Link, TimelineItemTemplate_lit, TimelineLayout, TimelineItem_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -7,6 +7,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 	var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 
+	const SHORT_LINE_WIDTH = "ShortLineWidth";
+	const LARGE_LINE_WIDTH = "LargeLineWidth";
 	const metadata = {
 		tag: "ui5-timeline-item",
 		slots:  {
@@ -18,10 +20,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			icon: {
 				type: String,
 			},
-			itemName: {
+			name: {
 				type: String,
 			},
-			itemNameClickable: {
+			nameClickable: {
 				type: Boolean,
 			},
 			titleText: {
@@ -35,9 +37,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				defaultValue: "-1",
 				noAttribute: true,
 			},
+			layout: {
+				type: TimelineLayout,
+				defaultvalue: TimelineLayout.Vertical,
+			},
+			_lineWidth: {
+				type: String,
+			},
 		},
 		events:  {
-			"item-name-click": {},
+			"name-click": {},
 		},
 	};
 	class TimelineItem extends UI5Element__default {
@@ -56,8 +65,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		constructor() {
 			super();
 		}
-		onItemNamePress() {
-			this.fireEvent("item-name-click", {});
+		onNamePress() {
+			this.fireEvent("name-click", {});
 		}
 		static get dependencies() {
 			return [
@@ -65,6 +74,20 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				Link__default,
 			];
 		}
+		get classes() {
+			return {
+				indicator: {
+					"ui5-tli-indicator": true,
+					"ui5-tli-indicator-short-line": this._lineWidth === SHORT_LINE_WIDTH,
+					"ui5-tli-indicator-large-line": this._lineWidth === LARGE_LINE_WIDTH,
+				},
+				bubbleArrowPosition: {
+					"ui5-tli-bubble-arrow": true,
+					"ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
+					"ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
+				},
+			};
+		}
 	}
 	TimelineItem.define();
 

package/src/sap/ui/webc/fiori/thirdparty/UploadCollection.js

@@ -44,7 +44,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		},
 		events:  {
 			drop: {},
-			"file-deleted": {
+			"item-delete": {
 				detail: {
 					item: { type: HTMLElement },
 				},
@@ -132,7 +132,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._dndOverlayMode = UploadCollectionDnDMode.Drag;
 		}
 		_onItemDelete(event) {
-			this.fireEvent("file-deleted", { item: event.detail.item });
+			this.fireEvent("item-delete", { item: event.detail.item });
 		}
 		_onSelectionChange(event) {
 			this.fireEvent("selection-change", { selectedItems: event.detail.selectedItems });