npm - @ui5/webcomponents-fiori - Versions diffs - 1.14.3 → 1.14.4 - Mend

@ui5/webcomponents-fiori 1.14.3 → 1.14.4

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

package/dist/test/pages/WizardPageMode_test.html DELETED Viewed

@@ -1,269 +0,0 @@
-<!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 Page Mode Test Page</title>
-  <script type="module" crossorigin src="/assets/bundle.esm.c3c08cd8.js"></script>
-  <link rel="stylesheet" href="/assets/Wizard_test.c1970af5.css">
-</head>
-<body class="wizard_test1auto">
-	<ui5-dialog id="dialog" stretch header-heading="Wizard">
-		<ui5-wizard id="wiz2" content-layout="SingleStep">
-			<ui5-wizard-step id="dialogStep1" icon="sap-icon://home" selectedtitle-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>
-				</div>
-			</ui5-wizard-step>
-			<ui5-wizard-step id="dialogStep2" 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>
-					<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>
-				</div>
-			</ui5-wizard-step>
-			<ui5-wizard-step id="dialogStep3" 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>
-								<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-wizard-step>
-			<ui5-wizard-step id="dialogStep4" 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-wizard-step>
-		</ui5-wizard>
-		<ui5-bar id="footer" slot="footer" design="Footer">
-            <ui5-button id="prevButton" design="Emphasized" slot="endContent">Previous Step</ui5-button>
-            <ui5-button id="nextButton" design="Emphasized" slot="endContent">Next step</ui5-button>
-			<ui5-button id="finalize2" design="Emphasized" slot="endContent">Finalize</ui5-button>
-			<ui5-button id="cancel" design="Transparent" slot="endContent">Cancel</ui5-button>
-		</ui5-bar>
-	</ui5-dialog>
-	<ui5-button style="display: inline-block" id="button">Open Dialog</ui5-button>
-	<script>
-		// WIZARD IN DIALOG
-		const btnOpenDialog = document.getElementById("button");
-		const dialog = document.getElementById("dialog");
-		const wiz2 = document.getElementById("wiz2");
-		const nextStepButton = document.getElementById("nextButton");
-		const previousStepButton = document.getElementById("prevButton");
-		const cancelButton = document.getElementById("cancel");
-		const finalizeButton = document.getElementById("finalize2");
-        const getStep = (wizard, idx) => Array.from(wizard.children)[idx];
-		const deselectAll = (wizard) => {
-			Array.from(wizard.children).forEach(step => {
-				step.selected = false;
-			});
-		}
-		const setStep = (wizard, idx) => {
-			const step = getStep(wizard, idx);
-			step.selected = true;
-			step.disabled = false;
-		}
-		const setNextStep = (wizard, currentStepIndex, nextStepIndex) => {
-			const nextStep = getStep(wizard, nextStepIndex);
-			const currentStep = getStep(wizard, currentStepIndex);
-			nextStep.selected = true;
-			currentStep.disabled = false;
-		}
-		const setPreviousStep = (wizard, currentStepIndex, previousStepIndex) => {
-			const previousStep = getStep(wizard, previousStepIndex);
-			const currentStep = getStep(wizard, currentStepIndex);
-			previousStep.selected = true;
-			currentStep.disabled = false;
-		}
-		const setButtonVisibility = (index, totalItems) => {
-			const nextButton = document.getElementById('nextButton');
-			const prevButton = document.getElementById('prevButton');
-			const finalizeButton = document.getElementById('finalize2');
-			if (index === 0) {
-				finalizeButton.style.display = 'none';
-				prevButton.style.display = 'none';
-				nextButton.style.display = 'block';
-			} else if (index === totalItems - 1) {
-				prevButton.style.display = 'block';
-				finalizeButton.style.display = 'block';
-				nextButton.style.display = 'none';
-			} else {
-				prevButton.style.display = 'block';
-				nextButton.style.display = 'block';
-			}
-		};
-		btnOpenDialog.addEventListener("click", () => {
-			dialog.show();
-			const index = wiz2.getSelectedStepIndex();
-			setButtonVisibility(index, wiz2.children.length);
-		});
-		wiz2.addEventListener("ui5-step-change", event => {
-			const index = wiz2.getSelectedStepIndex();
-			setButtonVisibility(index, wiz2.children.length)
-		});
-		nextStepButton.addEventListener("click", () => {
-			const index = wiz2.getSelectedStepIndex();
-			setNextStep(wiz2, index, index + 1);
-			setButtonVisibility(index + 1, wiz2.children.length)
-		});
-		previousStepButton.addEventListener("click", () => {
-			const index = wiz2.getSelectedStepIndex();
-			deselectAll(wiz2);
-			setPreviousStep(wiz2, index, index - 1);
-			setButtonVisibility(index - 1, wiz2.children.length)
-		});
-		cancelButton.addEventListener("click", () => {
-			dialog.close();
-		});
-		finalizeButton.addEventListener("click", () => {
-			alert("Finalize");
-			dialog.close();
-		});
-	</script>
-</body>
-</html>

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

@@ -1,52 +0,0 @@
-<!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.c3c08cd8.js"></script>
-  <link rel="stylesheet" href="/assets/Wizard.dcc2dbcb.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>