npm - @ui5/webcomponents-fiori - Versions diffs - 1.10.0 → 1.10.2 - Mend

@ui5/webcomponents-fiori 1.10.0 → 1.10.2

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 (181) hide show

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

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Wizard Scrolling</title>
+	<script data-ui5-config type="application/json">
+		{
+			"theme": "sap_fiori_3",
+			"language": "EN"
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/Wizard.220f7df3.css">
+</head>
+<body class="wizard1auto">
+    <ui5-wizard id="wizScroll" style="height: 100%;">
+        <ui5-wizard-step id="step1" title-text="Step 1" selected>
+            <div>
+                <ui5-title>Step 1</ui5-title>
+                <div style="height: 4440px;"></div>
+                <ui5-button id="toStep2">Step 2</ui5-button>
+            </div>
+        </ui5-wizard-step>
+        <ui5-wizard-step id="step2" title-text="Step 2" disabled>
+            <div>
+                <ui5-title>Step 2</ui5-title>
+            </div>
+        </ui5-wizard-step>
+    </ui5-wizard>
+	<script>
+		const btn = document.getElementById("toStep2");
+		btn.addEventListener("click", () => {
+            const step1 = document.getElementById("step1");
+            const step2 = document.getElementById("step2");
+            step1.selected = false;
+            step2.selected = true;
+            step2.disabled = false;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Wizard Test Page</title>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Wizard_test.html.3d4fc1a9.css">
+</head>
+<body class="wizard_test1auto">
+	<div class="stretch">
+		<ui5-wizard id="wizTest">
+			<ui5-wizard-step id="st1" icon="sap-icon://product" selected title-text="Product type">
+				<div class="wizard_test2auto">
+					<ui5-title>1. Product Type</ui5-title><br>
+					<ui5-message-strip>
+						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+					</ui5-message-strip><br>
+					<ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
+					</ui5-label>
+					<ui5-input id="inpStepChangeCounter"></ui5-input>
+					<ui5-button id="btnOpenDialog" class="wizard_test3auto">Open Wizard Dialog</ui5-button>
+					<div class="wizard_test4auto">
+						<ui5-label>Configure step-switch-threshold</ui5-label>
+						<ui5-segmented-button id="setting">
+							<ui5-toggle-button threshold="0.3">0.5</ui5-toggle-button>
+							<ui5-toggle-button threshold="0.7" pressed>default (0.7)</ui5-toggle-button>
+							<ui5-toggle-button threshold="1">1</ui5-toggle-button>
+						</ui5-segmented-button>
+					</div>
+				</div>
+				<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
+			</ui5-wizard-step>
+			<ui5-wizard-step  id="st2" title-text="Product Information" disabled>
+				<div class="wizard_test5auto">
+					<ui5-title>2. Product Information</ui5-title><br>
+					<ui5-label wrapping-type="Normal">
+						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+					</ui5-label>
+					<ui5-input id="inpStepChangeCause" placeholder="step changed via click"></ui5-input>
+					<div class="wizard_test6auto">
+						<div class="wizard_test7auto">
+							<ui5-label>Name</ui5-label>
+							<ui5-input placeholder="product name..."></ui5-input>
+						</div>
+						<div class="wizard_test4auto">
+							<ui5-label>Weight</ui5-label>
+							<ui5-input value="3.65"></ui5-input>
+						</div>
+						<div class="wizard_test4auto">
+							<ui5-label>Manifacturer</ui5-label>
+							<ui5-select>
+								<ui5-option selected>Apple</ui5-option>
+								<ui5-option>Samsung</ui5-option>
+								<ui5-option>Huawei</ui5-option>
+							</ui5-select>
+						</div>
+						<div class="wizard_test4auto">
+							<ui5-label>5 years guarantee included</ui5-label>
+							<ui5-switch id="sw"></ui5-switch>
+						</div>
+						<span id="scrollMarkerSt2"></span>
+						<div id="pureContent" class="wizard_test8auto">
+						</div>
+					</div>
+				</div>
+				<ui5-button id="toStep3" design="Emphasized">Step 3</ui5-button>
+			</ui5-wizard-step>
+			<ui5-wizard-step  id="st3" title-text="Options" disabled>
+				<div class="wizard_test6auto">
+					<ui5-title>3. Options</ui5-title><br>
+					<ui5-label wrapping-type="Normal">
+						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+					</ui5-label>
+					<ui5-message-strip>
+						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+					</ui5-message-strip><br>
+					<div class="wizard_test6auto">
+						<div class="wizard_test7auto">
+							<ui5-label>Manifacture date</ui5-label>
+							<ui5-date-picker></ui5-date-picker>
+						</div>
+						<div class="wizard_test7auto">
+							<ui5-label>Availability</ui5-label>
+							<ui5-segmented-button id="segButton1">
+								<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
+								<ui5-toggle-button>In depot</ui5-toggle-button>
+								<ui5-toggle-button>Damaged</ui5-toggle-button>
+								<ui5-toggle-button>Out of stock</ui5-toggle-button>
+							</ui5-segmented-button>
+						</div>
+						<div class="wizard_test7auto">
+							<ui5-label>Size</ui5-label>
+							<ui5-segmented-button id="sb">
+								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
+								<ui5-toggle-button>Medium</ui5-toggle-button>
+								<ui5-toggle-button>Largr</ui5-toggle-button>
+							</ui5-segmented-button>
+						</div>
+					</div>
+				</div>
+				<span id="scrollMarkerSt3"></span>
+				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
+				<ui5-button id="toStep4" design="Emphasized">Step 4</ui5-button>
+			</ui5-wizard-step>
+			<ui5-wizard-step  id="st4" title-text="Pricing" disabled>
+				<div class="wizard_test6auto">
+					<ui5-title>4. Pricing</ui5-title><br>
+					<ui5-label wrapping-type="Normal">
+						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+					</ui5-label>
+					<ui5-message-strip>
+						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+					</ui5-message-strip><br>
+					<div class="wizard_test6auto">
+						<div class="wizard_test7auto">
+							<ui5-label>Price</ui5-label>
+							<ui5-input placeholder="product price..."></ui5-input>
+						</div>
+						<div class="wizard_test7auto">
+							<ui5-label>Quantity</ui5-label>
+							<ui5-input placeholder="product quantity..."></ui5-input>
+						</div>
+						<div class="wizard_test4auto">
+							<ui5-label>Vat included</ui5-label>
+							<ui5-switch checked></ui5-switch>
+						</div>
+					</div>
+				</div>
+				<ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
+			</ui5-wizard-step>
+		</ui5-wizard>
+		<ui5-dialog id="dialog" stretch header-heading="Wizard">
+				<ui5-wizard id="wizInDialog">
+					<ui5-wizard-step icon="sap-icon://product" selected title-text="Product type">
+						<div class="wizard_test2auto">
+							<ui5-title>1. Product Type</ui5-title><br>
+							<ui5-message-strip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-message-strip><br>
+							<ui5-label wrapping-type="Normal">Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
+							</ui5-label>
+							<ui5-input></ui5-input>
+						</div>
+						<ui5-button id="toStep2InDialog" design="Emphasized">Step 2</ui5-button>
+					</ui5-wizard-step>
+					<ui5-wizard-step title-text="Product Information">
+						<div class="wizard_test5auto">
+							<ui5-title>2. Product Information</ui5-title><br>
+							<ui5-label wrapping-type="Normal">
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+							<div class="wizard_test6auto">
+								<div class="wizard_test7auto">
+									<ui5-label>Name</ui5-label>
+									<ui5-input placeholder="product name..."></ui5-input>
+								</div>
+								<div class="wizard_test4auto">
+									<ui5-label>Weight</ui5-label>
+									<ui5-input value="3.65"></ui5-input>
+								</div>
+								<div class="wizard_test4auto">
+									<ui5-label>Manifacturer</ui5-label>
+									<ui5-select>
+										<ui5-option selected>Apple</ui5-option>
+										<ui5-option>Samsung</ui5-option>
+										<ui5-option>Huawei</ui5-option>
+									</ui5-select>
+								</div>
+								<div class="wizard_test4auto">
+									<ui5-label>5 years guarantee included</ui5-label>
+									<ui5-switch id="sw2"></ui5-switch>
+								</div>
+								<div id="pureContent2" class="wizard_test8auto">
+								</div>
+							</div>
+						</div>
+						<ui5-button id="toStep3InDialog" design="Emphasized">Step 3</ui5-button>
+					</ui5-wizard-step>
+					<ui5-wizard-step title-text="Options">
+						<div class="wizard_test6auto">
+							<ui5-title>3. Options</ui5-title><br>
+							<ui5-label wrapping-type="Normal">
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+							<ui5-message-strip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-message-strip><br>
+							<div class="wizard_test6auto">
+								<div class="wizard_test7auto">
+									<ui5-label>Manifacture date</ui5-label>
+									<ui5-date-picker></ui5-date-picker>
+								</div>
+								<div class="wizard_test7auto">
+									<ui5-label>Availability</ui5-label>
+									<ui5-segmented-button>
+										<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
+										<ui5-toggle-button>In depot</ui5-toggle-button>
+										<ui5-toggle-button>Damaged</ui5-toggle-button>
+										<ui5-toggle-button>Out of stock</ui5-toggle-button>
+									</ui5-segmented-button>
+								</div>
+								<div class="wizard_test7auto">
+									<ui5-label>Size</ui5-label>
+									<ui5-segmented-button>
+										<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
+										<ui5-toggle-button>Medium</ui5-toggle-button>
+										<ui5-toggle-button>Largr</ui5-toggle-button>
+									</ui5-segmented-button>
+								</div>
+							</div>
+						</div>
+						<ui5-button id="toStep4InDialog" design="Emphasized">Step 4</ui5-button>
+					</ui5-wizard-step>
+					<ui5-wizard-step title-text="Pricing">
+						<div class="wizard_test6auto">
+							<ui5-title>4. Pricing</ui5-title><br>
+							<ui5-label wrapping-type="Normal">
+								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+							</ui5-label>
+							<ui5-message-strip>
+								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+							</ui5-message-strip><br>
+							<div class="wizard_test6auto">
+								<div class="wizard_test7auto">
+									<ui5-label>Price</ui5-label>
+									<ui5-input placeholder="product price..."></ui5-input>
+								</div>
+								<div class="wizard_test7auto">
+									<ui5-label>Quantity</ui5-label>
+									<ui5-input placeholder="product quantity..."></ui5-input>
+								</div>
+								<div class="wizard_test4auto">
+									<ui5-label>Vat included</ui5-label>
+									<ui5-switch checked></ui5-switch>
+								</div>
+							</div>
+						</div>
+						<ui5-button design="Emphasized">Finalize</ui5-button>
+					</ui5-wizard-step>
+				</ui5-wizard>
+		</ui5-dialog>
+	</div>
+	<script>
+		var wiz = document.getElementById("wizTest");
+		var wizInDialog = document.getElementById("wizInDialog");
+		var counter = 0;
+		wiz.addEventListener("ui5-step-change", function (event) {
+			console.log(event.detail.step);
+			inpStepChangeCounter.value = ++counter;
+			inpStepChangeCause.value = event.detail.changeWithClick;
+		});
+		toStep2.addEventListener("click", function () {
+			deselectAll(wiz);
+			setStep(1, wiz);
+		});
+		toStep22.addEventListener("click", function () {
+			deselectAll(wiz);
+			setStep(1, wiz);
+		});
+		toStep3.addEventListener("click", function () {
+			deselectAll(wiz);
+			setStep(2, wiz);
+		});
+		toStep4.addEventListener("click", function () {
+			deselectAll(wiz);
+			setStep(3, wiz);
+		});
+		toStep2InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(1, wizInDialog);
+		});
+		toStep3InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(2, wizInDialog);
+		});
+		toStep4InDialog.addEventListener("click", function () {
+			deselectAll(wizInDialog);
+			setStep(3, wizInDialog);
+		});
+		function deselectAll(wiz) {
+			Array.from(wiz.children).forEach(function(step) {
+				step.selected = false;
+			});
+		}
+		function setStep(idx, wiz) {
+			const step = getStep(idx, wiz);
+			step.selected = true;
+			step.disabled = false;
+		}
+		function getStep(idx, wiz) {
+			return Array.from(wiz.children)[idx];
+		}
+		sw.addEventListener("ui5-change", function () {
+			pureContent.style.display = "block";
+		});
+		sw2.addEventListener("ui5-change", function () {
+			pureContent2.style.display = "block";
+		});
+		btnOpenDialog.addEventListener("click", function () {
+			dialog.show();
+		});
+		setting.addEventListener("step-change", function (event) {
+			wiz.setAttribute("step-switch-threshold", event.detail.selectedButton.getAttribute("threshold"));
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Wizard Test Page - small widths</title>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Wizard_test_mobile.html.9216347a.css">
+</head>
+<body class="wizard_test_mobile1auto">
+	<div class="stretch wizard_test_mobile2auto" >
+		<div class="wizard_test_mobile3auto">
+			<ui5-wizard id="wizTest">
+				<ui5-wizard-step icon="sap-icon://product" title-text="Product type">
+					<div class="wizard_test_mobile4auto">
+						<ui5-title>1. Product Type</ui5-title><br>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+					</div>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Product Information">
+					<div class="wizard_test_mobile5auto">
+						<ui5-title>2. Product Information</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+					</div>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Options">
+						<ui5-title>3. Options</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Pricing" selected>
+						<ui5-title>4. Pricing</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+				</ui5-wizard-step>
+			</ui5-wizard>
+			<ui5-wizard id="wizTest2">
+				<ui5-wizard-step icon="sap-icon://product" title-text="Product type" disabled>
+					<div class="wizard_test_mobile4auto">
+						<ui5-title>1. Product Type</ui5-title><br>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+					</div>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Product Information" disabled>
+					<div class="wizard_test_mobile5auto">
+						<ui5-title>2. Product Information</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+					</div>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Options" disabled>
+						<ui5-title>3. Options</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+				</ui5-wizard-step>
+				<ui5-wizard-step title-text="Pricing" selected>
+						<ui5-title>4. Pricing</ui5-title><br>
+						<ui5-label wrapping-type="Normal">
+							Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
+						</ui5-label>
+						<ui5-message-strip>
+							The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
+						</ui5-message-strip><br>
+				</ui5-wizard-step>
+			</ui5-wizard>
+		</div>
+	</div>
+</body>
+</html>

package/global.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
-import "@ui5/webcomponents-base/global";
-import { TemplateFunction } from "@ui5/webcomponents-base/src/renderer/executeTemplate.js";
+import "@ui5/webcomponents-base/dist/global";
+import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -40,14 +40,15 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.10.0",
-    "@ui5/webcomponents-base": "1.10.0",
-    "@ui5/webcomponents-icons": "1.10.0",
-    "@ui5/webcomponents-theming": "1.10.0",
+    "@ui5/webcomponents": "^1.10.1",
+    "@ui5/webcomponents-base": "^1.10.1",
+    "@ui5/webcomponents-icons": "^1.10.1",
+    "@ui5/webcomponents-theming": "^1.10.1",
     "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.10.0",
-    "chromedriver": "108.0.0"
-  }
-}
+    "@ui5/webcomponents-tools": "^1.10.1",
+    "chromedriver": "109.0.0"
+  },
+  "gitHead": "389fdb3fd2e90389567a1291716eb2ee0c42bfdd"
+}

package/src/MediaGallery.js CHANGED Viewed

@@ -256,7 +256,7 @@ const metadata = {
  * @alias sap.ui.webc.fiori.MediaGallery
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-media-gallery
- * @appenddocs MediaGalleryItem
+ * @appenddocs sap.ui.webc.fiori.MediaGalleryItem
  * @public
  * @since 1.1.0
  */

package/src/NotificationListGroupItem.js CHANGED Viewed

@@ -128,7 +128,7 @@ const metadata = {
  * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationAction
+ * @appenddocs sap.ui.webc.fiori.NotificationAction
  * @implements sap.ui.webc.main.IListItem
  * @public
  */

package/src/NotificationListItem.js CHANGED Viewed

@@ -170,7 +170,7 @@ const metadata = {
  * @alias sap.ui.webc.fiori.NotificationListItem
  * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification
- * @appenddocs NotificationAction
+ * @appenddocs sap.ui.webc.fiori.NotificationAction
  * @since 1.0.0-rc.8
  * @implements sap.ui.webc.fiori.INotificationListItem, sap.ui.webc.main.IListItem
  * @public

package/src/NotificationListItemBase.js CHANGED Viewed

@@ -151,7 +151,7 @@ const metadata = {
  * @extends sap.ui.webc.main.ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationAction
+ * @appenddocs sap.ui.webc.fiori.NotificationAction
  * @public
  */
 class NotificationListItemBase extends ListItemBase {

package/src/ProductSwitch.ts CHANGED Viewed

@@ -56,7 +56,7 @@ import type ProductSwitchItem from "./ProductSwitchItem.js";
  * @alias sap.ui.webc.fiori.ProductSwitch
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-product-switch
- * @appenddocs ProductSwitchItem
+ * @appenddocs sap.ui.webc.fiori.ProductSwitchItem
  * @public
  * @since 1.0.0-rc.5
  */

package/src/ShellBar.js CHANGED Viewed

@@ -455,7 +455,7 @@ const metadata = {
  * @alias sap.ui.webc.fiori.ShellBar
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar
- * @appenddocs ShellBarItem
+ * @appenddocs sap.ui.webc.fiori.ShellBarItem
  * @public
  * @since 0.8.0
  */

package/src/SideNavigation.js CHANGED Viewed

@@ -152,7 +152,7 @@ const metadata = {
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation
  * @since 1.0.0-rc.8
- * @appenddocs SideNavigationItem SideNavigationSubItem
+ * @appenddocs sap.ui.webc.fiori.SideNavigationItem sap.ui.webc.fiori.SideNavigationSubItem
  * @public
  */
 class SideNavigation extends UI5Element {

package/src/Timeline.ts CHANGED Viewed

@@ -39,7 +39,7 @@ const LARGE_LINE_WIDTH = "LargeLineWidth";
  * @alias sap.ui.webc.fiori.Timeline
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-timeline
- * @appenddocs TimelineItem
+ * @appenddocs sap.ui.webc.fiori.TimelineItem
  * @public
  * @since 0.8.0
  */