@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/global.d.ts

@@ -0,0 +1,12 @@
+import type { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
+
+export {};
+
+declare global {
+	interface Window {
+		ZXing: {
+			BrowserMultiFormatReader: typeof BrowserMultiFormatReader;
+			NotFoundException: typeof NotFoundException;
+		};
+	}
+}

package/package-scripts.cjs

@@ -0,0 +1,85 @@
+const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
+
+const filterOut = [
+	"sapIllus-Dot",
+	"sapIllus-Dialog",
+	"sapIllus-Scene",
+	"sapIllus-Spot",
+	"tnt-Dot",
+	"tnt-Dialog",
+	"tnt-Scene",
+	"tnt-Spot",
+	"AllIllustrations",
+];
+
+const options = {
+	port: 8081,
+	portStep: 2,
+	dev: true,
+	fioriPackage: true,
+	noWatchTS: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
+	illustrationsData: [
+		{
+			path: "src/illustrations",
+			defaultText: true,
+			illustrationsPrefix: "sapIllus",
+			set: "fiori",
+			collection: "V4",
+			destinationPath: "dist/illustrations",
+			dynamicImports: {
+				outputFile: "src/generated/js-imports/Illustrations.ts",
+				location: '../../illustrations',
+				filterOut
+			}
+		},
+		{
+			path: "src/illustrations/tnt",
+			defaultText: false,
+			illustrationsPrefix: "tnt",
+			set: "tnt",
+			collection: "V4",
+			destinationPath: "dist/illustrations/tnt",
+			dynamicImports: {
+				outputFile: "src/generated/js-imports/IllustrationsTNT.ts",
+				location: '../../illustrations/tnt',
+				filterOut
+			}
+		},
+		{
+			path: "src/illustrations-v5/tnt",
+			defaultText: false,
+			illustrationsPrefix: "tnt",
+			set: "tnt",
+			collection: "V5",
+			destinationPath: "dist/illustrations-v5/tnt",
+			dynamicImports: {
+				outputFile: "src/generated/js-imports/IllustrationsV5TNT.ts",
+				location: '../../illustrations-v5/tnt',
+				filterOut
+			}
+		},
+		{
+			path: "src/illustrations-v5/tnt/hc",
+			defaultText: false,
+			illustrationsPrefix: "tnt",
+			set: "tnt",
+			collection: "V5/HC",
+			destinationPath: "dist/illustrations-v5/tnt/hc",
+			dynamicImports: {
+				outputFile: "src/generated/js-imports/IllustrationsV5TNTHC.ts",
+				location: '../../illustrations-v5/tnt/hc',
+				filterOut
+			}
+		},
+	]
+};
+
+const scripts = getScripts(options);
+
+module.exports = {
+	scripts
+};

package/package.json

@@ -1,28 +1,52 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "0.0.0-e7dd012d7",
+  "version": "0.0.0-ebd9a4db3",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
   },
+  "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
     "ui5"
   ],
+  "exports": {
+    "./dist/ssr-zxing.js": {
+      "browser": "./dist/ssr-zxing.js",
+      "node": "./dist/ssr-zxing-shim.js",
+      "default": "./dist/ssr-zxing.js"
+    },
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./*": "./dist/*"
+  },
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
+    "lint:scope": "nps scope.lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
     "build": "wc-dev build",
+    "generate": "nps generate",
+    "generateAPI": "nps generateAPI",
+    "bundle": "nps build.bundle",
     "test": "wc-dev test",
+    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
+    "test:cypress": "nps test-cy-ci",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
+    "test:cypress:open": "nps test-cy-open",
     "create-ui5-element": "wc-create-ui5-element",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "tsc -b"
   },
   "repository": {
     "type": "git",
@@ -30,13 +54,16 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-base": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-icons": "0.0.0-e7dd012d7",
-    "@ui5/webcomponents-theme-base": "0.0.0-e7dd012d7"
+    "@ui5/webcomponents": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-base": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-icons": "0.0.0-ebd9a4db3",
+    "@ui5/webcomponents-theming": "0.0.0-ebd9a4db3",
+    "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-e7dd012d7",
-    "chromedriver": "latest"
+    "@ui5/cypress-internal": "0.0.0",
+    "@ui5/webcomponents-tools": "0.0.0-ebd9a4db3",
+    "chromedriver": "^135.0.0",
+    "lit": "^2.0.0"
   }
 }

package/src/BarcodeScannerDialogTemplate.tsx

@@ -0,0 +1,38 @@
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import type BarcodeScannerDialog from "./BarcodeScannerDialog.js";
+
+export default function BarcodeScannerDialogTemplate(this: BarcodeScannerDialog) {
+	return (<>
+		<Dialog
+			stretch={true}
+			class="ui5-barcode-scanner-dialog-root"
+			open={this._open}
+			onClose={this._closeDialog}
+		>
+			<slot name="header"></slot>
+			<div class="ui5-barcode-scanner-dialog-video-wrapper">
+				<video
+					autoplay={true}
+					playsinline={true}
+					muted={true}
+					class="ui5-barcode-scanner-dialog-video"
+				></video>
+				<canvas class="ui5-barcode-scanner-dialog-overlay"></canvas>
+			</div>
+			<slot name="footer" class="ui5-barcode-scanner-dialog-footer">
+				<Button
+					design="Transparent"
+					onClick={this._closeDialog}
+				>{this._cancelButtonText}</Button>
+			</slot>
+		</Dialog>
+		<BusyIndicator
+			class="ui5-barcode-scanner-dialog-busy"
+			active={this.loading}
+			size="L"
+			text={this._busyIndicatorText}
+		/>
+	</>);
+}

package/src/DynamicPageHeaderActionsTemplate.tsx

@@ -0,0 +1,33 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
+import type DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+
+export default function DynamicPageHeaderActionsTemplate(this: DynamicPageHeaderActions) {
+	return (
+		<div class="ui5-dynamic-page-header-actions-root">
+			<div class="ui5-dynamic-page-header-actions--wrapper">
+				<Button
+					class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand"
+					onClick={this.onExpandClick}
+					icon={this.arrowButtonIcon}
+					accessibleName={this.expandLabel}
+					accessibilityAttributes={this.accessibilityAttributes}
+					tooltip={this.expandLabel}
+					onMouseOver={this.onExpandHoverIn}
+					onMouseOut={this.onExpandHoverOut}
+				/>
+				{this.showPinButton &&
+					<ToggleButton
+						class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin"
+						onClick={this.onPinClick}
+						icon={this.pinButtonIcon}
+						pressed={this.pinned}
+						accessibilityAttributes={this.accessibilityAttributes}
+						accessibleName={this.pinLabel}
+						tooltip={this.pinLabel}
+					/>
+				}
+			</div>
+		</div>
+	);
+}

package/src/DynamicPageHeaderTemplate.tsx

@@ -0,0 +1,9 @@
+import type DynamicPageHeader from "./DynamicPageHeader.js";
+
+export default function DynamicPageHeaderTemplate(this: DynamicPageHeader) {
+	return (
+		<div class="ui5-dynamic-page-header-root" role="region">
+			<slot></slot>
+		</div>
+	);
+}

package/src/DynamicPageTemplate.tsx

@@ -0,0 +1,68 @@
+import type DynamicPage from "./DynamicPage.js";
+import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
+
+export default function DynamicPageTemplate(this: DynamicPage) {
+	return (
+		<div class="ui5-dynamic-page-root">
+			<div class="ui5-dynamic-page-scroll-container"
+				onScroll={this.snapOnScroll}
+			>
+				<header
+					class="ui5-dynamic-page-title-header-wrapper"
+					id={`${this._id}-header`}
+					aria-label={this._headerLabel}
+					aria-expanded={this._headerExpanded}
+					onui5-toggle-title={this.onToggleTitle}
+				>
+					<slot name="titleArea"></slot>
+					{this.headerInTitle &&
+						<slot tabIndex={this.headerTabIndex}
+							aria-hidden={this.headerAriaHidden}
+							name="headerArea"
+						></slot>
+					}
+
+					{this.actionsInTitle && headerActions.call(this)}
+				</header>
+
+				{this.headerInContent &&
+					<slot tabIndex={this.headerTabIndex}
+						aria-hidden={this.headerAriaHidden}
+						name="headerArea"
+					></slot>
+				}
+
+				{!this.actionsInTitle && headerActions.call(this)}
+
+				<div class="ui5-dynamic-page-content" part="content">
+					<div class="ui5-dynamic-page-fit-content" part="fit-content">
+						<slot></slot>
+						{this.showFooter &&
+							<div class="ui5-dynamic-page-spacer"></div>
+						}
+					</div>
+				</div>
+			</div>
+
+			<div class="ui5-dynamic-page-footer" part="footer">
+				<slot name="footerArea"></slot>
+			</div>
+		</div>
+	);
+}
+
+function headerActions(this: DynamicPage) {
+	if (!this.hasSnappedTitleOnMobile && this.hasHeading) {
+		return (
+			<DynamicPageHeaderActions
+				snapped={this.headerSnapped}
+				pinned={this.headerPinned}
+				hidePinButton={this.hidePinButton}
+				onui5-expand-button-click={this.onExpandClick}
+				onui5-pin-button-click={this.onPinClick}
+				onui5-expand-button-hover-in={this.onExpandHoverIn}
+				onui5-expand-button-hover-out={this.onExpandHoverOut}
+			/>
+		);
+	}
+}

package/src/DynamicPageTitleTemplate.tsx

@@ -0,0 +1,77 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type DynamicPageTitle from "./DynamicPageTitle.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+export default function DynamicPageTitleTemplate(this: DynamicPageTitle) {
+	return (
+		<div class="ui5-dynamic-page-title-root">
+			<span class="ui5-dynamic-page-title-focus-area"
+				data-sap-focus-ref
+				tabIndex={this._tabIndex}
+				onKeyDown={this._onkeydown}
+				onClick={this.onTitleClick}
+				role="button"
+				aria-expanded={this._headerExpanded}
+				aria-labelledby={this._ariaLabelledBy}
+				aria-describedby={`${this._id}-toggle-description`}
+			></span>
+
+			{this.hasSnappedTitleOnMobile ?
+				<div id={`${this._id}-heading`}
+					 class="ui5-dynamic-page--snapped-title-on-mobile"
+				>
+					<slot name="snappedTitleOnMobile"></slot>
+					<Icon name={slimArrowDownIcon} mode="Decorative" />
+				</div>
+				: <>
+					<div class="ui5-dynamic-page-title--top-area">
+						<slot name="breadcrumbs"></slot>
+
+						{this.mobileNavigationActions &&
+						<slot name="navigationBar"></slot>
+						}
+					</div>
+					<div class="ui5-dynamic-page-title--wrapper"
+						onui5-_min-content-width-change={this.onMinContentWidthChange}
+					>
+						<div id={`${this._id}-heading`}
+						 class="ui5-dynamic-page-title--heading"
+						>
+							<slot name={this.headingSlotName}></slot>
+						</div>
+
+						{this.hasContent &&
+						<div class="ui5-dynamic-page-title--content"
+							style={{
+								"min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
+							}}
+						>
+							<slot></slot>
+						</div>
+						}
+
+						<div class="ui5-dynamic-page-title--actions"
+							style={{
+								"min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
+							}}
+						>
+							<slot name="actionsBar"></slot>
+							{!this.mobileNavigationActions && <>
+								{this._needsSeparator &&
+								<div class="ui5-dynamic-page-title--actions-separator"></div>
+								}
+								<slot name="navigationBar"></slot>
+							</>}
+						</div>
+					</div>
+					<div class="ui5-dynamic-page-title--subheading">
+						<slot name={this.subheadingSlotName}></slot>
+					</div>
+				</>}
+
+			<span id={`${this._id}-toggle-description`}
+				class="ui5-hidden-text"
+			>{this._ariaDescribedbyText}</span>
+		</div>
+	);
+}

package/src/DynamicSideContentTemplate.tsx

@@ -0,0 +1,48 @@
+import type DynamicSideContent from "./DynamicSideContent.js";
+
+export default function DynamicSideContentTemplate(this: DynamicSideContent) {
+	return (
+		<div
+			class="ui5-dsc-root"
+			style={this.styles.root}
+		>
+			{this._isSideContentFirst ?
+				<>
+					{ sideContent.call(this) }
+					{ mainContent.call(this) }
+				</>
+				:
+				<>
+					{ mainContent.call(this) }
+					{ sideContent.call(this) }
+				</>
+			}
+		</div>
+	);
+}
+
+function mainContent(this: DynamicSideContent) {
+	return (
+		<div
+			role="main"
+			aria-label={this.accInfo.mainContent?.ariaLabel}
+			class={this.classes.main}
+			style={this.styles.main}
+		>
+			<slot></slot>
+		</div>
+	);
+}
+
+function sideContent(this: DynamicSideContent) {
+	return (
+		<aside
+			role="complementary"
+			aria-label={this.accInfo.sideContent?.ariaLabel}
+			class={this.classes.side}
+			style={this.styles.side}
+		>
+			<slot name="sideContent"></slot>
+		</aside>
+	);
+}

package/src/FlexibleColumnLayoutTemplate.tsx

@@ -0,0 +1,125 @@
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import verticalGripIcon from "@ui5/webcomponents-icons/dist/vertical-grip.js";
+import slimdArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import slimdArrowLefttIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import type FlexibleColumnLayout from "./FlexibleColumnLayout.js";
+
+export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) {
+	const hasAnimation = getAnimationMode() !== AnimationMode.None;
+
+	return (
+		<div class="ui5-fcl-root">
+			<div
+				role={this._accAttributes.columns.start.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--start": true,
+				}}
+				aria-hidden={this._accAttributes.columns.start.ariaHidden}
+				aria-labelledby={`${this._id}-startColumnText`}
+			>
+				<span id={`${this._id}-startColumnText`} class="ui5-hidden-text">{this.accStartColumnText}</span>
+				<slot name="startColumn" aria-hidden={this._accAttributes.columns.start.ariaHidden}></slot>
+			</div>
+
+			<div
+				role={this.accStartSeparatorRole}
+				title={this.accStartSeparatorText}
+				class="ui5-fcl-separator ui5-fcl-separator-start"
+				style={{ display: this.showStartSeparator ? "flex" : "none" }}
+				tabindex={this.startSeparatorTabIndex}
+				onMouseDown={this.onSeparatorPress}
+				onTouchStart={this.onSeparatorPress}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
+			>
+				{ this.showStartSeparatorArrow && arrowStart.call(this) }
+				{ gripStart.call(this) }
+			</div>
+
+			<div
+				role={this._accAttributes.columns.middle.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--middle": true,
+				}}
+				aria-hidden={this._accAttributes.columns.middle.ariaHidden}
+				aria-labelledby={`${this._id}-midColumnText`}
+			>
+				<span id={`${this._id}-midColumnText`} class="ui5-hidden-text">{this.accMiddleColumnText}</span>
+				<slot name="midColumn" aria-hidden={this._accAttributes.columns.middle.ariaHidden}></slot>
+			</div>
+
+			<div
+				role={this.accEndSeparatorRole}
+				title={this.accEndSeparatorText}
+				class="ui5-fcl-separator ui5-fcl-separator-end"
+				style={{ display: this.showEndSeparator ? "flex" : "none" }}
+				tabindex={this.endSeparatorTabIndex}
+				onMouseDown={this.onSeparatorPress}
+				onTouchStart={this.onSeparatorPress}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
+			>
+				{ gripEnd.call(this) }
+			</div>
+
+			<div
+				role={this._accAttributes.columns.end.role}
+				class={{
+					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
+					"ui5-fcl-column--end": true,
+				}}
+				aria-hidden={this._accAttributes.columns.end.ariaHidden}
+				aria-labelledby={`${this._id}-endColumnText`}
+			>
+				<span id={`${this._id}-endColumnText`} class="ui5-hidden-text">{this.accEndColumnText}</span>
+				<slot name="endColumn" aria-hidden={this._accAttributes.columns.end.ariaHidden}></slot>
+			</div>
+		</div>
+	);
+}
+
+function arrowStart(this: FlexibleColumnLayout) {
+	return (
+		<Button
+			icon={this.startArrowDirection === "backward" ? slimdArrowLefttIcon : slimdArrowRightIcon}
+			design="Transparent"
+			onClick={this.switchLayoutOnArrowPress}
+			onKeyDown={this._onArrowKeydown}
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+		/>
+	);
+}
+
+function gripStart(this: FlexibleColumnLayout) {
+	return (
+		<div
+			class="ui5-fcl-grip ui5-fcl-grip--start"
+			style={{ display: this.showStartSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
+	);
+}
+
+function gripEnd(this: FlexibleColumnLayout) {
+	return (
+		<div
+			class="ui5-fcl-grip ui5-fcl-grip--end"
+			style={{ display: this.showEndSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
+	);
+}

package/src/IllustratedMessageTemplate.tsx

@@ -0,0 +1,71 @@
+import Title from "@ui5/webcomponents/dist/Title.js";
+import type IllustratedMessage from "./IllustratedMessage.js";
+
+export default function IllustratedMessageTemplate(this: IllustratedMessage) {
+	return (
+		<div class="ui5-illustrated-message-root">
+			<div class="ui5-illustrated-message-inner">
+				<div class="ui5-illustrated-message-illustration" dangerouslySetInnerHTML={{ __html: this.effectiveIllustration || "" }}></div>
+				<div class="ui5-illustrated-message-text-and-actions-container">
+					{this.hasTitle &&
+						<div part="title" class="ui5-illustrated-message-title">
+							{this.hasFormattedTitle ?
+								<slot name="title"></slot>
+								:
+								<Title>{this.effectiveTitleText}</Title>
+							}
+						</div>
+					}
+
+					{this.hasSubtitle &&
+						<div part="subtitle" class="ui5-illustrated-message-subtitle">
+							{this.hasFormattedSubtitle ?
+								<slot name="subtitle"></slot>
+								:
+								this.effectiveSubitleText
+							}
+						</div>
+					}
+					{this.hasActions &&
+						<div class="ui5-illustrated-message-actions">
+							<slot></slot>
+						</div>
+					}
+				</div>
+			</div>
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="ui5-illustrated-message-util">
+				<defs>
+					<pattern id="sapIllus_PatternShadow" data-name="sapIllus_PatternShadow" width="3" height="5.5"
+						patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+						<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="5.5001"
+							r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="1.5"
+							cy="2.7501" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
+							cy="0.0001" r="0.5" />
+						<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="0.0001"
+							r="0.5" />
+					</pattern>
+					<pattern id="sapIllus_PatternHighlight" data-name="sapIllus_PatternHighlight" width="3" height="5.5"
+						patternTransform="translate(35.9059 309.6208)" patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
+						<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+							cy="5.5001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="1.5001"
+							cy="2.7501" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
+							cy="0.0001" r="0.5" />
+						<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
+							cy="0.0001" r="0.5" />
+					</pattern>
+				</defs>
+			</svg>
+		</div>
+	);
+}

package/src/MediaGalleryItemTemplate.tsx

@@ -0,0 +1,22 @@
+import type MediaGalleryItem from "./MediaGalleryItem.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import background from "@ui5/webcomponents-icons/dist/background.js";
+
+export default function MediaGalleryItemTemplate(this: MediaGalleryItem) {
+	return (
+		<div class="ui5-media-gallery-item-root"
+			tabindex={this.effectiveTabIndex}
+			data-sap-focus-ref
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			role={this._role}
+		>
+			<div class="ui5-media-gallery-item-mask-layer"></div>
+			<div class="ui5-media-gallery-item-wrapper" style={this.styles.wrapper}>
+				{this._showBackgroundIcon && <Icon name={background}/>}
+				{this._useContent && <slot />}
+				{this._useThumbnail && <slot name="thumbnail" />}
+			</div>
+		</div>
+	);
+}