npm - @ui5/webcomponents-fiori - Versions diffs - 1.9.3 → 1.9.5 - Mend

@ui5/webcomponents-fiori 1.9.3 → 1.9.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/dist/test/pages/FCLApp.html ADDED Viewed

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Flexible Column Layout</title>
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/FCLApp.html.4d2da1a7.css">
+</head>
+<body class="fclapp1auto">
+<!-- COMPANIES LIST -->
+<template id="companiesTemplate">
+	<div class="header">
+		<ui5-title>Companies list</ui5-title>
+	</div>
+	<ui5-list>
+		<ui5-li data-cid="1">Company 1</ui5-li>
+		<ui5-li data-cid="2">Company 2</ui5-li>
+		<ui5-li data-cid="3">Company 3</ui5-li>
+		<ui5-li data-cid="4">Company 4</ui5-li>
+		<ui5-li data-cid="5">Company 5</ui5-li>
+		<ui5-li data-cid="6">Company 6</ui5-li>
+		<ui5-li data-cid="7">Company 7</ui5-li>
+		<ui5-li data-cid="8">Company 8</ui5-li>
+		<ui5-li data-cid="9">Company 9</ui5-li>
+		<ui5-li data-cid="10">Company 10</ui5-li>
+	</ui5-list>
+</template>
+<!-- PROD LIST -->
+<template id="productsTemplate">
+	<div class="header">
+		<ui5-title></ui5-title>
+		<div class="separator"></div>
+		<ui5-button design="Transparent" icon="decline"></ui5-button>
+	</div>
+	<ui5-list>
+		<ui5-li data-pid="1">Product 1</ui5-li>
+		<ui5-li data-pid="2">Product 2</ui5-li>
+		<ui5-li data-pid="3">Product 3</ui5-li>
+		<ui5-li data-pid="4">Product 4</ui5-li>
+		<ui5-li data-pid="5">Product 5</ui5-li>
+		<ui5-li data-pid="6">Product 6</ui5-li>
+		<ui5-li data-pid="7">Product 7</ui5-li>
+		<ui5-li data-pid="8">Product 8</ui5-li>
+		<ui5-li data-pid="9">Product 9</ui5-li>
+		<ui5-li data-pid="10">Product 10</ui5-li>
+	</ui5-list>
+</template>
+<!-- PROD INFO -->
+<template id="productTemplate">
+	<div class="header">
+		<ui5-title></ui5-title>
+		<div class="separator"></div>
+		<ui5-button design="Transparent" icon="decline"></ui5-button>
+	</div>
+	<ui5-tabcontainer>
+		<ui5-tab text="Product info" additional-text="200EUR">
+			This is the best product
+		</ui5-tab>
+		<ui5-tab-separator></ui5-tab-separator>
+		<ui5-tab icon="sap-icon://menu2" text="Specification" design="Positive" additional-text="25">
+			Width: 100cm
+			<br>
+			Height: 200cm
+			<br>
+			Length: 500cm
+		</ui5-tab>
+		<ui5-tab icon="sap-icon://menu" text="User manual" selected design="Critical" additional-text="45">
+			Read the manual
+		</ui5-tab>
+		<ui5-tab icon="sap-icon://menu2" text="Reviews" design="Negative" additional-text="15">
+			<ui5-rating-indicator class="fclapp2auto"></ui5-rating-indicator>
+		</ui5-tab>
+		<ui5-tab icon="sap-icon://menu2" disabled text="Buy (Not available)" design="Negative" additional-text="40">
+		</ui5-tab>
+		<ui5-tab icon="sap-icon://menu2" text="Comments" design="Neutral" additional-text="40">
+			<ui5-taxtarea></ui5-taxtarea>
+		</ui5-tab>
+		<ui5-tab icon="sap-icon://menu2" text="Related products" additional-text="3">
+			See more
+		</ui5-tab>
+	</ui5-tabcontainer>
+</template>
+<template id="emptyPage">
+	<div class="ui5-message-page">
+		<ui5-icon class="ui5-message-page-icon" name="filter"></ui5-icon>
+		<div class="ui5-message-page-title">No matching items found.</div>
+		<div class="ui5-message-page-description">Check the filter settings.</div>
+	</div>
+</template>
+<!-- SHELLBAR -->
+<ui5-shellbar
+		class="shellbar-example"
+		primary-title="Custom Actions"
+		secondary-title="Second Title"
+		id="shellbarwithitems"
+>
+	<ui5-avatar initials="GG" slot="logo" size="M"></ui5-avatar>
+	<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
+	<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
+</ui5-shellbar>
+<!--- FLEXIBLE COLUMN LAYOUT -->
+<ui5-flexible-column-layout
+	id="fcl"
+>
+	<div class="column" id="startColumn" slot="startColumn">
+		<ui5-busy-indicator id="startBusy">
+			<div class="ui5-message-page">
+				<ui5-icon class="ui5-message-page-icon" name="filter"></ui5-icon>
+				<div class="ui5-message-page-title">Loading companies.</div>
+				<div class="ui5-message-page-description">Please wait...</div>
+			</div>
+		</ui5-busy-indicator>
+	</div>
+	<div class="column" id="midColumn" slot="midColumn"></div>
+	<div class="column" id="endColumn" slot="endColumn"></div>
+</ui5-flexible-column-layout>
+<script>
+	var companiesLoaded = false;
+	var currentCid;
+	var currentPid;
+	window.addEventListener("hashchange", function(){
+		routing();
+	});
+	function $(sel) {
+		return document.getElementById(sel);
+	}
+	function loadCompanies() {
+		$("startBusy").active = true;
+		setTimeout(function() {
+			var companies = $("companiesTemplate").content.cloneNode(true);
+			$("startColumn").appendChild(companies);
+			$("startColumn").querySelector("ui5-list").addEventListener("item-click", function(e) {
+				window.location = "#" + e.detail.item.getAttribute("data-cid");
+			});
+			$("startBusy").active = false;
+			$("startBusy").style.display = "none";
+		}, 1000);
+	}
+	function loadCompany(cid) {
+		setTimeout(function() {
+			var products = $("productsTemplate").content.cloneNode(true);
+			products.querySelector("ui5-title").textContent = "Company " + cid + " products";
+			Array.prototype.slice.call($("midColumn").children).forEach(function(child) {
+				$("midColumn").removeChild(child);
+			});
+			$("midColumn").appendChild(products);
+			$("midColumn").querySelector("ui5-list").addEventListener("item-click", function(e) {
+				window.location = "#" + cid + "-" + e.detail.item.getAttribute("data-pid");
+			});
+			$("midColumn").querySelector("ui5-button").addEventListener("click", function(e) {
+				window.location = "#";
+			});
+		}, 1000);
+	}
+	function loadProduct(cid, pid) {
+		setTimeout(function() {
+			var product = $("productTemplate").content.cloneNode(true);
+			product.querySelector("ui5-title").textContent = "Company " + cid + " product " + pid;
+			Array.prototype.slice.call($("endColumn").children).forEach(function(child) {
+				$("endColumn").removeChild(child);
+			});
+			$("endColumn").appendChild(product);
+			$("endColumn").querySelector("ui5-button").addEventListener("click", function(e) {
+				window.location = "#" + cid;
+			});
+		}, 1000);
+	}
+	function routing() {
+		var val = window.location.hash.substr(1);
+		var arr = val.split("-");
+		var cid = arr[0];
+		var pid = arr[1];
+		if (!companiesLoaded) {
+			loadCompanies();
+			companiesLoaded = true;
+		}
+		if (!cid) {
+			$("fcl").layout = "OneColumn";
+		} else {
+			if (cid !== currentCid) {
+				loadCompany(cid);
+				$("fcl").layout = "TwoColumnsMidExpanded";
+				currentCid = cid;
+			}
+			if (!pid) {
+				$("fcl").layout = "TwoColumnsMidExpanded";
+			} else {
+				if (pid !== currentPid) {
+					loadProduct(cid, pid);
+					$("fcl").layout = "ThreeColumnsEndExpanded";
+					currentPid = pid;
+				}
+			}
+		}
+	}
+	routing();
+</script>
+</body>
+</html>

package/dist/test/pages/FCLCustom.html ADDED Viewed

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Flexible Column Layout</title>
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/FCLCustom.html.1af2df31.css">
+</head>
+<body class="fclcustom1auto">
+	<ui5-flexible-column-layout id="fcl3" layout="ThreeColumnsMidExpanded">
+		<!-- start column -->
+		<div class="fclcustom2auto" slot="startColumn">
+			<div class="fclcustom3auto">
+				<ui5-title>Column 1</ui5-title>
+			</div>
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+		<!-- mid column -->
+		<div class="fclcustom2auto" slot="midColumn">
+			<div class="fclcustom3auto">
+				<ui5-title>Column 2</ui5-title>
+			</div>
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+		<!-- end column -->
+		<div class="fclcustom2auto" slot="endColumn">
+			<div class="fclcustom3auto">
+				<ui5-title>Column 3</ui5-title>
+			</div>
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+	</ui5-flexible-column-layout>
+	<script>
+		var fcl = document.getElementById("fcl3");
+		fcl._layoutsConfiguration = {
+			desktop: {
+				"OneColumn": {
+					layout: ["100%", 0, 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsStartExpanded": {
+					layout: ["90%", "10%", 0],
+					arrows: [
+						{ visible: true, dir: "mirror" },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsMidExpanded": {
+					layout: ["10%", "90%", 0],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsStartExpanded": {
+					layout: ["15%", "70%", "15%"],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: true, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpanded": {
+					layout: ["15%", "70%", "15%"],
+					arrows:	[
+						{ visible: true, dir: null },
+						{ visible: true, dir: null },
+					],
+				},
+				"ThreeColumnsEndExpanded": {
+					layout: ["15%", "15%", "70%"],
+					arrows: [
+						{ visible: false, dir: null, separator: true },
+						{ visible: true, dir: "mirror" },
+					],
+				},
+				"ThreeColumnsStartExpandedEndHidden": {
+					layout: ["90%", "10%", 0],
+					arrows: [
+						{ visible: true, dir: "mirror" },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpandedEndHidden": {
+					layout: ["10%", "90%", 0],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: true, dir: null },
+					],
+				},
+				"MidColumnFullScreen": {
+					layout: [0, "100%", 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"EndColumnFullScreen": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+			},
+			tablet: {
+				"OneColumn": {
+					layout: ["100%", 0, 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsStartExpanded": {
+					layout: ["90%", "10%", 0],
+					arrows: [
+						{ visible: true, dir: "mirror" },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsMidExpanded": {
+					layout: ["10%", "90%", 0],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsStartExpanded": {
+					layout: ["90%", "10%", 0],
+					arrows: [
+						{ visible: true, dir: "mirror" },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpanded": {
+					layout: [0, "90%", "10%"],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: true, dir: null },
+					],
+				},
+				"ThreeColumnsEndExpanded": {
+					layout: [0, "10%", "90%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: true, dir: "mirror" },
+					],
+				},
+				"ThreeColumnsStartExpandedEndHidden": {
+					layout: ["90%", "10%", 0],
+					arrows: [
+						{ visible: true, dir: "mirror" },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpandedEndHidden": {
+					layout: ["10%", "90%", 0],
+					arrows: [
+						{ visible: true, dir: null },
+						{ visible: true, dir: null },
+					],
+				},
+				"MidColumnFullScreen": {
+					layout: [0, "100%", 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"EndColumnFullScreen": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+			},
+			phone: {
+				"OneColumn": {
+					layout: ["100%", 0, 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsStartExpanded": {
+					layout: [0, "100%", 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"TwoColumnsMidExpanded": {
+					layout: [0, "100%", 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsStartExpanded": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpanded": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsEndExpanded": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsStartExpandedEndHidden": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"ThreeColumnsMidExpandedEndHidden": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"MidColumnFullScreen": {
+					layout: [0, "100%", 0],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+				"EndColumnFullScreen": {
+					layout: [0, 0, "100%"],
+					arrows: [
+						{ visible: false, dir: null },
+						{ visible: false, dir: null },
+					],
+				},
+			},
+		};
+	</script>
+</body>
+</html>

package/dist/test/pages/IllustratedMessage.html ADDED Viewed

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>IllustratedMessage</title>
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.3729b7e6.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/IllustratedMessage.html.ebec5a1c.css">
+</head>
+<body class="illustratedmessage1auto">
+	Illustration:
+	<ui5-select id="illustrationSelect">
+		<ui5-option>AddColumn</ui5-option>
+		<ui5-option>AddPeople</ui5-option>
+		<ui5-option>BalloonSky</ui5-option>
+		<ui5-option>BeforeSearch</ui5-option>
+		<ui5-option>Connection</ui5-option>
+		<ui5-option>EmptyCalendar</ui5-option>
+		<ui5-option>EmptyList</ui5-option>
+		<ui5-option>EmptyPlanningCalendar</ui5-option>
+		<ui5-option>ErrorScreen</ui5-option>
+		<ui5-option>FilterTable</ui5-option>
+		<ui5-option>GroupTable</ui5-option>
+		<ui5-option>NoActivities</ui5-option>
+		<ui5-option>NoData</ui5-option>
+		<ui5-option>NoEntries</ui5-option>
+		<ui5-option>NoFilterResults</ui5-option>
+		<ui5-option>NoMail_v1</ui5-option>
+		<ui5-option>NoMail</ui5-option>
+		<ui5-option>NoNotifications</ui5-option>
+		<ui5-option>NoSavedItems_v1</ui5-option>
+		<ui5-option>NoSavedItems</ui5-option>
+		<ui5-option>NoSearchResults</ui5-option>
+		<ui5-option>NoTasks_v1</ui5-option>
+		<ui5-option>NoTasks</ui5-option>
+		<ui5-option>PageNotFound</ui5-option>
+		<ui5-option>ReloadScreen</ui5-option>
+		<ui5-option>ResizeColumn</ui5-option>
+		<ui5-option>SearchEarth</ui5-option>
+		<ui5-option>SearchFolder</ui5-option>
+		<ui5-option>SimpleBalloon</ui5-option>
+		<ui5-option>SimpleBell</ui5-option>
+		<ui5-option>SimpleCalendar</ui5-option>
+		<ui5-option>SimpleCheckMark</ui5-option>
+		<ui5-option>SimpleConnection</ui5-option>
+		<ui5-option>SimpleEmptyDoc</ui5-option>
+		<ui5-option>SimpleEmptyList</ui5-option>
+		<ui5-option>SimpleError</ui5-option>
+		<ui5-option>SimpleMagnifier</ui5-option>
+		<ui5-option>SimpleMail</ui5-option>
+		<ui5-option>SimpleNoSavedItems</ui5-option>
+		<ui5-option>SimpleNotFoundMagnifier</ui5-option>
+		<ui5-option>SimpleReload</ui5-option>
+		<ui5-option>SimpleTask</ui5-option>
+		<ui5-option>SleepingBell</ui5-option>
+		<ui5-option>SortColumn</ui5-option>
+		<ui5-option>SuccessBalloon</ui5-option>
+		<ui5-option>SuccessCheckMark</ui5-option>
+		<ui5-option>SuccessHighFive</ui5-option>
+		<ui5-option>SuccessScreen</ui5-option>
+		<ui5-option>Tent</ui5-option>
+		<ui5-option>UnableToLoad</ui5-option>
+		<ui5-option>UnableToLoadImage</ui5-option>
+		<ui5-option>UnableToUpload</ui5-option>
+		<ui5-option>UploadCollection</ui5-option>
+		<ui5-option>TntChartArea</ui5-option>
+		<ui5-option>TntChartArea2</ui5-option>
+		<ui5-option>TntChartBar</ui5-option>
+		<ui5-option>TntChartBPMNFlow</ui5-option>
+		<ui5-option>TntChartBullet</ui5-option>
+		<ui5-option>TntChartDoughnut</ui5-option>
+		<ui5-option>TntChartFlow</ui5-option>
+		<ui5-option>TntChartGantt</ui5-option>
+		<ui5-option>TntChartOrg</ui5-option>
+		<ui5-option>TntChartPie</ui5-option>
+		<ui5-option>TntCodePlaceholder</ui5-option>
+		<ui5-option>TntCompany</ui5-option>
+		<ui5-option>TntComponents</ui5-option>
+		<ui5-option>TntExternalLink</ui5-option>
+		<ui5-option>TntFaceID</ui5-option>
+		<ui5-option>TntFingerprint</ui5-option>
+		<ui5-option>TntLock</ui5-option>
+		<ui5-option>TntMission</ui5-option>
+		<ui5-option>TntNoApplications</ui5-option>
+		<ui5-option>TntNoFlows</ui5-option>
+		<ui5-option>TntNoUsers</ui5-option>
+		<ui5-option>TntRadar</ui5-option>
+		<ui5-option>TntSecrets</ui5-option>
+		<ui5-option>TntServices</ui5-option>
+		<ui5-option>TntSessionExpired</ui5-option>
+		<ui5-option>TntSessionExpiring</ui5-option>
+		<ui5-option>TntSuccess</ui5-option>
+		<ui5-option>TntSuccessfulAuth</ui5-option>
+		<ui5-option>TntSystems</ui5-option>
+		<ui5-option>TntTeams</ui5-option>
+		<ui5-option>TntTools</ui5-option>
+		<ui5-option>TntUnableToLoad</ui5-option>
+		<ui5-option>TntUnlock</ui5-option>
+		<ui5-option>TntUnsuccessfulAuth</ui5-option>
+		<ui5-option>TntUser2</ui5-option>
+	</ui5-select>
+	Size:
+	<ui5-select id="sizeSelect">
+		<ui5-option>base</ui5-option>
+		<ui5-option>spot</ui5-option>
+		<ui5-option>dialog</ui5-option>
+		<ui5-option selected>scene</ui5-option>
+	</ui5-select>
+	<ui5-illustrated-message id="illustratedMsg1" class="border">
+		<ui5-button>Action 1</ui5-button>
+	</ui5-illustrated-message>
+	<ui5-button id="openDialogButton">Open Dialog</ui5-button>
+	<ui5-dialog id="hello-dialog" header-text="Error" resizable>
+		<ui5-illustrated-message name="UnableToLoad"></ui5-illustrated-message>
+		<ui5-bar design="Footer" slot="footer">
+			<ui5-button id="closeDialogButton" design="Emphasized" slot="endContent">Close</ui5-button>
+		</ui5-bar>
+	</ui5-dialog>
+	<ui5-illustrated-message id="illustratedMsg2" name="UnableToUpload" title="Something went wrong..." accessible-name-ref="lbl">
+		<div slot="subtitle">Please try again or contact us at <ui5-link>example@example.com</ui5-link> <br><label id="lbl">Text from aria-labelledby</label></div>
+		<ui5-button icon="refresh">Try again</ui5-button>
+	</ui5-illustrated-message>
+	<ui5-illustrated-message id="illustratedMsg3" name="UnableToUpload">
+		<ui5-title slot="title" level="H1">This is a slotted title</ui5-title>
+	</ui5-illustrated-message>
+	<script>
+		const illustrationSelect = document.getElementById("illustrationSelect");
+		const sizeSelect = document.getElementById("sizeSelect");
+		const illustratedMessage = document.querySelector("ui5-illustrated-message");
+		const dialogOpener = document.getElementById("openDialogButton");
+		const dialog = document.getElementById("hello-dialog");
+		const dialogCloser = document.getElementById("closeDialogButton");
+		const sizes = {
+			base: 250,
+			spot: 300,
+			dialog: 650,
+			scene: 1100,
+		}
+		illustratedMessage.style.width = `${sizes.scene}px`;
+		illustrationSelect.addEventListener("change", (event) => {
+			illustratedMessage.setAttribute("name", event.detail.selectedOption.textContent);
+		});
+		sizeSelect.addEventListener("change", (event) => {
+			illustratedMessage.style.width = `${sizes[event.detail.selectedOption.textContent]}px`;
+		});
+		dialogOpener.addEventListener("click", () => {
+			dialog.show();
+		});
+		dialogCloser.addEventListener("click", () => {
+			dialog.close();
+		});
+	</script>
+</body>
+</html>