@openui5/sap.ui.webc.fiori 1.97.1 → 1.99.1

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

@@ -0,0 +1,293 @@
+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/ResizeHandler', './types/SideContentPosition', './types/SideContentVisibility', './types/SideContentFallDown', './generated/templates/DynamicSideContentTemplate.lit', './generated/themes/DynamicSideContent.css', './generated/i18n/i18n-defaults'], function (UI5Element, i18nBundle, litRender, ResizeHandler, SideContentPosition, SideContentVisibility, SideContentFallDown, DynamicSideContentTemplate_lit, DynamicSideContent_css, i18nDefaults) { '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);
+
+	const S_M_BREAKPOINT = 720,
+		M_L_BREAKPOINT = 1024,
+		L_XL_BREAKPOINT = 1440,
+		MINIMUM_WIDTH_BREAKPOINT = 960;
+	const metadata = {
+		tag: "ui5-dynamic-side-content",
+		managedSlots: true,
+		properties:  {
+			 hideMainContent: {
+				type: Boolean,
+			},
+			hideSideContent: {
+				type: Boolean,
+			},
+			 sideContentPosition: {
+				type: SideContentPosition,
+				defaultValue: SideContentPosition.End,
+			},
+			sideContentVisibility: {
+				type: SideContentVisibility,
+				defaultValue: SideContentVisibility.ShowAboveS,
+			},
+			sideContentFallDown: {
+				type: SideContentFallDown,
+				defaultValue: SideContentFallDown.OnMinimumWidth,
+			},
+			equalSplit: {
+				type: Boolean,
+			},
+			_mcSpan: {
+				type: String,
+				defaultValue: "0",
+				noAttribute: true,
+			},
+			 _scSpan: {
+				type: String,
+				defaultValue: "0",
+				noAttribute: true,
+			},
+			 _toggled: {
+				type: Boolean,
+				noAttribute: true,
+			},
+			 _currentBreakpoint: {
+				type: String,
+				noAttribute: true,
+			},
+		},
+		slots:  {
+			"default": {
+				type: HTMLElement,
+			},
+			 "sideContent": {
+				type: HTMLElement,
+			},
+		},
+		events:  {
+			"layout-change": {
+				details: {
+					currentBreakpoint: {
+						type: String,
+					},
+					previousBreakpoint: {
+						type: String,
+					},
+					mainContentVisible: {
+						type: Boolean,
+					},
+					sideContentVisible: {
+						type: Boolean,
+					},
+				},
+			},
+		},
+	};
+	class DynamicSideContent extends UI5Element__default {
+		constructor() {
+			super();
+			this._handleResizeBound = this.handleResize.bind(this);
+		}
+		static get metadata() {
+			return metadata;
+		}
+		static get styles() {
+			return DynamicSideContent_css;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get template() {
+			return DynamicSideContentTemplate_lit;
+		}
+		static async onDefine() {
+			DynamicSideContent.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
+		}
+		onAfterRendering() {
+			this._resizeContents();
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._handleResizeBound);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._handleResizeBound);
+		}
+		 toggleContents() {
+			if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {
+				this._toggled = !this._toggled;
+			}
+		}
+		get classes() {
+			const gridPrefix = "ui5-dsc-span",
+				mcSpan = this._toggled ? this._scSpan : this._mcSpan,
+				scSpan = this._toggled ? this._mcSpan : this._scSpan,
+				classes = {
+					main: {
+						"ui5-dsc-main": true,
+					},
+					side: {
+						"ui5-dsc-side": true,
+					},
+				};
+			classes.main[`${gridPrefix}-${mcSpan}`] = true;
+			classes.side[`${gridPrefix}-${scSpan}`] = true;
+			return classes;
+		}
+		get styles() {
+			const isToggled = this.breakpoint === this.sizeS && this._toggled,
+				mcSpan = isToggled ? this._scSpan : this._mcSpan,
+				scSpan = isToggled ? this._mcSpan : this._scSpan,
+				contentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? "100%" : "auto";
+			return {
+				root: {
+					"flex-wrap": this._mcSpan === "12" ? "wrap" : "nowrap",
+				},
+				main: {
+					"height": mcSpan === this.span12 ? contentHeight : "100%",
+					"order": this.sideContentPosition === SideContentPosition.Start ? 2 : 1,
+				},
+				side: {
+					"height": scSpan === this.span12 ? contentHeight : "100%",
+					"order": this.sideContentPosition === SideContentPosition.Start ? 1 : 2,
+				},
+			};
+		}
+		get accInfo() {
+			return {
+				"label": DynamicSideContent.i18nBundle.getText(i18nDefaults.DSC_SIDE_ARIA_LABEL),
+			};
+		}
+		get sizeS() {
+			return "S";
+		}
+		get sizeM() {
+			return "M";
+		}
+		get sizeL() {
+			return "L";
+		}
+		get sizeXL() {
+			return "XL";
+		}
+		get span0() {
+			return "0";
+		}
+		get span3() {
+			return "3";
+		}
+		get span4() {
+			return "4";
+		}
+		get span6() {
+			return "6";
+		}
+		get span8() {
+			return "8";
+		}
+		get span9() {
+			return "9";
+		}
+		get span12() {
+			return "12";
+		}
+		get spanFixed() {
+			return "fixed";
+		}
+		get containerWidth() {
+			return this.parentElement.clientWidth;
+		}
+		get breakpoint() {
+			let size;
+			if (this.containerWidth <= S_M_BREAKPOINT) {
+				size = this.sizeS;
+			} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {
+				size = this.sizeM;
+			} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {
+				size = this.sizeL;
+			} else {
+				size = this.sizeXL;
+			}
+			return size;
+		}
+		handleResize() {
+			this._resizeContents();
+		}
+		_resizeContents() {
+			let mainSize,
+				sideSize,
+				sideVisible;
+			switch (this.breakpoint) {
+			case this.sizeS:
+				mainSize = this.span12;
+				sideSize = this.span12;
+				break;
+			case this.sizeM:
+				if (this.sideContentFallDown === SideContentFallDown.BelowXL
+					|| this.sideContentFallDown === SideContentFallDown.BelowL
+					|| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {
+					mainSize = this.span12;
+					sideSize = this.span12;
+				} else {
+					mainSize = this.equalSplit ? this.span6 : this.spanFixed;
+					sideSize = this.equalSplit ? this.span6 : this.spanFixed;
+				}
+				sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+					|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+				break;
+			case this.sizeL:
+				if (this.sideContentFallDown === SideContentFallDown.BelowXL) {
+					mainSize = this.span12;
+					sideSize = this.span12;
+				} else {
+					mainSize = this.equalSplit ? this.span6 : this.span8;
+					sideSize = this.equalSplit ? this.span6 : this.span4;
+				}
+				sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+					|| this.sideContentVisibility === SideContentVisibility.ShowAboveM
+					|| this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+				break;
+			case this.sizeXL:
+				mainSize = this.equalSplit ? this.span6 : this.span9;
+				sideSize = this.equalSplit ? this.span6 : this.span3;
+				sideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;
+			}
+			if (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {
+				sideVisible = true;
+			}
+			if (this.hideSideContent) {
+				mainSize = this.hideMainContent ? this.span0 : this.span12;
+				sideSize = this.span0;
+				sideVisible = false;
+			}
+			if (this.hideMainContent) {
+				mainSize = this.span0;
+				sideSize = this.hideSideContent ? this.span0 : this.span12;
+				sideVisible = true;
+			}
+			if (!sideVisible) {
+				mainSize = this.span12;
+				sideSize = this.span0;
+			}
+			if (this._currentBreakpoint !== this.breakpoint) {
+				const eventParams = {
+					currentBreakpoint: this.breakpoint,
+					previousBreakpoint: this._currentBreakpoint,
+					mainContentVisible: mainSize !== this.span0,
+					sideContentVisible: sideSize !== this.span0,
+				};
+				this.fireEvent("layout-change", eventParams);
+				this._currentBreakpoint = this.breakpoint;
+			}
+			this._setSpanSizes(mainSize, sideSize);
+		}
+		_setSpanSizes(mainSize, sideSize) {
+			this._mcSpan = mainSize;
+			this._scSpan = sideSize;
+			if (this.breakpoint !== this.sizeS) {
+				this._toggled = false;
+			}
+		}
+	}
+	DynamicSideContent.define();
+
+	return DynamicSideContent;
+
+});

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

@@ -12,6 +12,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 
 	const metadata = {
 		tag: "ui5-flexible-column-layout",
+		fastNavigation: true,
 		properties:  {
 			layout: {
 				type: FCLLayout,
@@ -23,6 +24,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			accessibilityTexts: {
 				type: Object,
 			},
+			accessibilityRoles: {
+				type: Object,
+			},
 			_width: {
 				type: Float__default,
 				defaultValue: 0,
@@ -354,6 +358,27 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get accEndColumnText() {
 			return this.accessibilityTexts.endColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(i18nDefaults.FCL_END_COLUMN_TXT);
 		}
+		get accStartArrowContainerText() {
+			return this.accessibilityTexts.startArrowContainerAccessibleName || undefined;
+		}
+		get accEndArrowContainerText() {
+			return this.accessibilityTexts.endArrowContainerAccessibleName || undefined;
+		}
+		get accStartColumnRole() {
+			return this.accessibilityRoles.startColumnRole || "region";
+		}
+		get accMiddleColumnRole() {
+			return this.accessibilityRoles.midColumnRole || "region";
+		}
+		get accEndColumnRole() {
+			return this.accessibilityRoles.endColumnRole || "region";
+		}
+		get accStartArrowContainerRole() {
+			return this.accessibilityRoles.startArrowContainerRole || undefined;
+		}
+		get accEndArrowContainerRole() {
+			return this.accessibilityRoles.endArrowContainerRole || undefined;
+		}
 		get _effectiveLayoutsByMedia() {
 			return this._layoutsConfiguration || FCLLayout$1.getLayoutsByMedia();
 		}

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

@@ -83,7 +83,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			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".`);
+				const illustrationPath = this.name.includes("Tnt") ? `tnt/${this.name.replace("Tnt", "")}` : this.name;
+				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/${illustrationPath}.js".`);
 			}
 			this.invalid = false;
 			this.spotSvg = illustrationData.spotSvg;

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

@@ -1,7 +1,9 @@
 sap.ui.define(['exports'], function (exports) { 'use strict';
 
+	const IBar = "sap.ui.webcomponents.fiori.IBar";
 	const IFilterItem = "sap.ui.webcomponents.fiori.IFilterItem";
 	const IFilterItemOption = "sap.ui.webcomponents.fiori.IFilterItemOption";
+	const IMediaGalleryItem = "sap.ui.webcomponents.fiori.IMediaGalleryItem";
 	const INotificationAction = "sap.ui.webcomponents.fiori.INotificationAction";
 	const INotificationListItem = "sap.ui.webcomponents.fiori.INotificationListItem";
 	const IProductSwitchItem = "sap.ui.webcomponents.fiori.IProductSwitchItem";
@@ -13,8 +15,10 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const IUploadCollectionItem = "sap.ui.webcomponents.fiori.IUploadCollectionItem";
 	const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
 
+	exports.IBar = IBar;
 	exports.IFilterItem = IFilterItem;
 	exports.IFilterItemOption = IFilterItemOption;
+	exports.IMediaGalleryItem = IMediaGalleryItem;
 	exports.INotificationAction = INotificationAction;
 	exports.INotificationListItem = INotificationListItem;
 	exports.IProductSwitchItem = IProductSwitchItem;

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

@@ -0,0 +1,339 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/MediaRange', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/main/thirdparty/Button', 'sap/ui/webc/main/thirdparty/Carousel', './MediaGalleryItem', './types/MediaGalleryItemLayout', './types/MediaGalleryLayout', './types/MediaGalleryMenuHorizontalAlign', './types/MediaGalleryMenuVerticalAlign', './generated/templates/MediaGalleryTemplate.lit', './generated/themes/MediaGallery.css'], function (ItemNavigation, ResizeHandler, Device, MediaRange, litRender, Integer, NavigationMode, UI5Element, Button, Carousel, MediaGalleryItem, MediaGalleryItemLayout, MediaGalleryLayout, MediaGalleryMenuHorizontalAlign, MediaGalleryMenuVerticalAlign, MediaGalleryTemplate_lit, MediaGallery_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var MediaRange__default = /*#__PURE__*/_interopDefaultLegacy(MediaRange);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
+	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+	var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+	var Carousel__default = /*#__PURE__*/_interopDefaultLegacy(Carousel);
+
+	const COLUMNS_COUNT = {
+		"S": 1,
+		"M": 2,
+		"L": 3,
+		"XL": 4,
+	};
+	const metadata = {
+		tag: "ui5-media-gallery",
+		managedSlots: true,
+		slots:  {
+			"default": {
+				propertyName: "items",
+				type: HTMLElement,
+				individualSlots: true,
+				invalidateOnChildChange: true,
+			},
+		},
+		properties:  {
+			showAllThumbnails: {
+				type: Boolean,
+			},
+			interactiveDisplayArea: {
+				type: Boolean,
+			},
+			layout: {
+				type: MediaGalleryLayout,
+				defaultValue: "Auto",
+			},
+			menuHorizontalAlign: {
+				type: MediaGalleryMenuHorizontalAlign,
+				defaultValue: MediaGalleryMenuHorizontalAlign.Left,
+			},
+			menuVerticalAlign: {
+				type: MediaGalleryMenuVerticalAlign,
+				defaultValue: MediaGalleryMenuVerticalAlign.Bottom,
+			},
+			effectiveLayout: {
+				type: MediaGalleryLayout,
+				defaultValue: "Vertical",
+			},
+			mediaRange: {
+				type: String,
+			},
+			_overflowSize: {
+				type: Integer__default,
+				noAttribute: true,
+				defaultValue: 0,
+			},
+		},
+		events:  {
+			 "selection-change": {
+				detail: {
+					item: { type: HTMLElement },
+				},
+			},
+			"overflow-click": {},
+			"display-area-click": {},
+		},
+	};
+	class MediaGallery extends UI5Element__default {
+		constructor() {
+			super();
+			this._onResize = this._updateLayout.bind(this);
+			this._selectedItem = null;
+			this._initItemNavigation();
+		}
+		onEnterDOM() {
+			!Device.isPhone() && ResizeHandler__default.register(this, this._onResize);
+		}
+		onExitDOM() {
+			!Device.isPhone() && ResizeHandler__default.deregister(this, this._onResize);
+		}
+		onAfterRendering() {
+			this._updateLayout();
+			this._updateSelection();
+		}
+		_initItemNavigation() {
+			if (!this._itemNavigation) {
+				this._itemNavigation = new ItemNavigation__default(this, {
+					navigationMode: NavigationMode__default.Auto,
+					getItemsCallback: () => this._getFocusableItems(),
+				});
+			}
+		}
+		_updateSelection() {
+			let itemToSelect = this.items.find(item => item.selected);
+			if (!itemToSelect || !this._isSelectableItem(itemToSelect)) {
+				itemToSelect = this._findSelectableItem();
+			}
+			if (itemToSelect && itemToSelect !== this._selectedItem) {
+				this._selectItem(itemToSelect);
+			}
+		}
+		_isSelectableItem(item) {
+			return !item.disabled && !item.hidden;
+		}
+		_findSelectableItem() {
+			return this.items.find(this._isSelectableItem);
+		}
+		_updateMediaRange(width) {
+			this.mediaRange = MediaRange__default.getCurrentRange(MediaRange__default.RANGESETS.RANGE_4STEPS, width);
+		}
+		_updateLayout() {
+			const rootNode = this.getDomRef(),
+				height = rootNode.offsetHeight,
+				width = rootNode.offsetWidth;
+			if (!width || !height || Device.isPhone()) {
+				return;
+			}
+			this._updateMediaRange(width);
+			this.effectiveLayout = this._infereffectiveLayout();
+			this._overflowSize = this._calculateOverflowSize(width, height);
+			this._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);
+			this._toggleMainItem9x16size(this._shouldHaveWideDisplay);
+		}
+		_calculateOverflowSize(width, height) {
+			const marginSize = MediaGallery.THUMBNAIL_MARGIN;
+			let columnHeight,
+				columnsCount;
+			if (this.showAllThumbnails) {
+				return 0;
+			}
+			if (this.effectiveLayout === MediaGalleryLayout.Horizontal) {
+				columnHeight = height - marginSize;
+				columnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;
+			} else {
+				columnHeight = width - (marginSize * 2);
+				columnsCount = 1;
+			}
+			return this._getOverflowSize(columnHeight, columnsCount);
+		}
+		_toggleDisplaySquareSize(enable) {
+			this._display.style.width = "";
+			if (enable) {
+				const marginSize = MediaGallery.THUMBNAIL_MARGIN,
+					width = this._display.offsetWidth;
+				let availableHeight = this.getDomRef().offsetHeight - (2 * marginSize);
+				if (this.effectiveLayout === MediaGalleryLayout.Vertical) {
+					availableHeight -= (MediaGallery.THUMBNAIL_HEIGHT + marginSize);
+				}
+				if (width > availableHeight) {
+					this._display.style.width = `${availableHeight}px`;
+				}
+			}
+		}
+		_toggleMainItem9x16size(enable) {
+			if (!this._mainItem) {
+				return;
+			}
+			const width = this._mainItem.offsetWidth,
+				contentHeight = enable ? `${(width / 16) * 9}px` : "";
+			this._mainItem.contentHeight = contentHeight;
+		}
+		_infereffectiveLayout() {
+			if (this.layout === MediaGalleryLayout.Auto) {
+				return (this._isPhoneSize) ? MediaGalleryLayout.Vertical
+					: MediaGalleryLayout.Horizontal;
+			}
+			return this.layout;
+		}
+		_getMaxAllowedThumbnailsInColumn(columnHeight) {
+			let maxAllowedItems = Math.floor(columnHeight / MediaGallery.THUMBNAIL_HEIGHT);
+			if (!this.showAllThumbnails) {
+				maxAllowedItems = Math.min(maxAllowedItems, 5);
+			}
+			return maxAllowedItems;
+		}
+		_getOverflowSize(columnHeight, columnsCount) {
+			const maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),
+				overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
+			return (overflowSize > 0) ? overflowSize + 1 : 0;
+		}
+		_getFocusableItems() {
+			if (!this._showThumbnails) {
+				return [];
+			}
+			const items = this._visibleItems.filter(item => !item.disabled);
+			if (this._overflowBtn) {
+				items.push(this._overflowBtn);
+			}
+			return items;
+		}
+		_selectItem(item, userInteraction) {
+			if (item === this._selectedItem) {
+				return;
+			}
+			this._selectedItem = item;
+			this._updateSelectedFlag(item);
+			this._itemNavigation.setCurrentItem(item);
+			if (userInteraction) {
+				this.fireEvent("selection-change", { item });
+			}
+			if (Device.isPhone()) {
+				this._selectItemOnPhone(item);
+			} else {
+				this._displayContent(item);
+			}
+		}
+		_updateSelectedFlag(itemToSelect) {
+			this.items.forEach(next => { next.selected = false; });
+			itemToSelect.selected = true;
+		}
+		_selectItemOnPhone(item) {
+			const selectableItemIndex = this._selectableItems.indexOf(item),
+				carousel = this._carousel;
+			carousel && carousel.navigateTo(selectableItemIndex);
+		}
+		_displayContent(item) {
+			let clone;
+			const mainItem = this._mainItem,
+				oldContent = mainItem._content,
+				newContent = item._content;
+			mainItem._thumbnailDesign = false;
+			oldContent && oldContent.remove();
+			if (newContent) {
+				clone = newContent.cloneNode(true);
+				mainItem.layout = item.layout;
+				mainItem.appendChild(clone);
+			}
+		}
+		_onThumbnailClick(event) {
+			const item = event.target.closest("ui5-media-gallery-item");
+			if (item.disabled) {
+				return;
+			}
+			if (item !== this._selectedItem) {
+				this._selectItem(item, true );
+			}
+		}
+		_onOverflowBtnClick() {
+			this.fireEvent("overflow-click");
+		}
+		_onDisplayAreaClick(event) {
+			if (!this.interactiveDisplayArea) {
+				return;
+			}
+			this.fireEvent("display-area-click");
+		}
+		_onCarouselNavigate(event) {
+			const selectedIndex = event.detail.selectedIndex,
+				item = this._selectableItems[selectedIndex];
+			this.fireEvent("selection-change", { item });
+		}
+		get _mainItemTabIndex() {
+			return this.interactiveDisplayArea ? 0 : undefined;
+		}
+		get _selectableItems() {
+			return this.items.filter(this._isSelectableItem);
+		}
+		get _carousel() {
+			return this.shadowRoot.querySelector("[ui5-carousel]");
+		}
+		get _display() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-display");
+		}
+		get _mainItem() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-display [ui5-media-gallery-item]");
+		}
+		get _overflowBtn() {
+			return this.shadowRoot.querySelector(".ui5-media-gallery-overflow [ui5-button]");
+		}
+		get _visibleItems() {
+			const visibleItemsCount = this.items.length - this._overflowSize;
+			return this.items.slice(0, visibleItemsCount);
+		}
+		get _isPhonePlatform() {
+			return Device.isPhone();
+		}
+		get _showThumbnails() {
+			return !Device.isPhone();
+		}
+		get _showOverflowBtn() {
+			return this._overflowSize > 0;
+		}
+		get _isPhoneSize() {
+			return this.mediaRange === "S";
+		}
+		get _mainItemHasWideLayout() {
+			return this._mainItem && (this._mainItem.layout === MediaGalleryItemLayout.Wide);
+		}
+		get _shouldHaveWideDisplay() {
+			return this._mainItemHasWideLayout
+				&& this.showAllThumbnails
+				&& (this.effectiveLayout === MediaGalleryLayout.Horizontal);
+		}
+		get _shouldHaveSquareDisplay() {
+			return !this._shouldHaveWideDisplay;
+		}
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get template() {
+			return MediaGalleryTemplate_lit;
+		}
+		static get staticAreaTemplate() {
+			return MediaGalleryTemplate_lit;
+		}
+		static get styles() {
+			return [MediaGallery_css];
+		}
+		static get staticAreaStyles() {
+			return null;
+		}
+		static get dependencies() {
+			return [
+				MediaGalleryItem,
+				Button__default,
+				Carousel__default,
+			];
+		}
+		static get THUMBNAIL_HEIGHT() {
+			return 80;
+		}
+		static get THUMBNAIL_MARGIN() {
+			return 16;
+		}
+	}
+	MediaGallery.define();
+
+	return MediaGallery;
+
+});