npm - @ui5/webcomponents - Versions diffs - 1.15.1 → 1.16.0-rc.1 - Mend

@ui5/webcomponents 1.15.1 → 1.16.0-rc.1

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

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

@@ -0,0 +1,189 @@
+<!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>StepInput test page</title>
+	<script>
+		// delete Document.prototype.adoptedStyleSheets;
+	</script>
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"formatSettings": {
+                "firstDayOfWeek": 0
+            }
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.common.e3533330.js"></script>
+  <link rel="stylesheet" href="/assets/StepInput.5c7e8966.css">
+</head>
+<body class="stepinput1auto">
+	<h3> StepInput</h3>
+	<ui5-label id="myLabelChange">Event [change] :: N/A</ui5-label><br/>
+	<div>
+		<h3>StepInput in Cozy</h3>
+		<ui5-step-input id="stepInputCozy"
+			placeholder="Enter number"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div class="sapUiSizeCompact">
+		<h3>StepInput in Compact</h3>
+		<ui5-step-input id="stepInputCompact"
+			placeholder="Enter number"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput in with min=0, max=10 and step=1</h3>
+		<ui5-step-input id="stepInputMinMax"
+			placeholder="Enter number"
+			min="0"
+			max="10"
+			step="1"
+			class="stepinput2auto"
+		>
+			<div slot="valueStateMessage" class="stepinput3auto">Wrong Value</div>
+		</ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput in with min=0, max=10, step=0.05 and valuePrecision=2</h3>
+		<ui5-step-input id="stepInputPrecision"
+			placeholder="Enter number"
+			min="0"
+			max="10"
+			step="0.05"
+			value-precision="2"
+			class="stepinput4auto"
+			>
+			<div slot="valueStateMessage" class="stepinput3auto">Wrong Value</div>
+		</ui5-step-input>
+	</div>
+	<div>
+		<h3>Disabled StepInput</h3>
+		<ui5-step-input id="stepInputDisabled"
+			placeholder="Enter number"
+			class="stepinput2auto"
+			disabled
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>Readonly StepInput</h3>
+		<ui5-step-input id="stepInputReadOnly"
+			placeholder="Enter number"
+			class="stepinput2auto"
+			readonly
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput with valueState=None</h3>
+		<ui5-step-input id="stepInputNone"
+			placeholder="Enter number"
+			value-state="None"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput with valueState=Success</h3>
+		<ui5-step-input id="stepInputSuccess"
+			placeholder="Enter number"
+			value-state="Success"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput with valueState=Information</h3>
+		<ui5-step-input id="stepInputInformation"
+			placeholder="Enter number"
+			value-state="Information"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput with valueState=Warning</h3>
+		<ui5-step-input id="stepInputWarning"
+			placeholder="Enter number"
+			value-state="Warning"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput with valueState=Error</h3>
+		<ui5-step-input id="stepInputError"
+			placeholder="Enter number"
+			value-state="Error"
+			class="stepinput2auto"
+		></ui5-step-input>
+	</div>
+	<div>
+		<h3>StepInput change event test</h3>
+		<ui5-step-input id="stepInputChange1"
+			class="stepinput2auto"
+			value="1"
+			min="1"
+			step="1000"
+		></ui5-step-input>
+		<ui5-step-input id="stepInputChange2"
+			class="stepinput2auto"
+			value="1000"
+			min="1"
+			step="1000"
+		></ui5-step-input>
+	</div>
+	<h3> 'change' event result</h3>
+	<ui5-input id="changeResult"></ui5-input>
+	<script>
+		var labelChange = document.getElementById('myLabelChange');
+		var siCozy = document.getElementById('stepInputCozy');
+		var siCompact = document.getElementById('stepInputCompact');
+		var siMinMax = document.getElementById('stepInputMinMax');
+		var siPrecision = document.getElementById('stepInputPrecision');
+		var changeResult = document.getElementById('changeResult');
+		var changeCount = 0;
+		var displayChange = function (event) {
+			labelChange.innerHTML = "Event [change] :: [" + event.target.id + " ] :: " + event.detail.value;
+			changeCount++;
+			changeResult.value = changeCount;
+		}
+		siCozy.addEventListener('ui5-change', displayChange);
+		siCompact.addEventListener('ui5-change', displayChange);
+		siMinMax.addEventListener('ui5-change', displayChange);
+		siPrecision.addEventListener('ui5-change', displayChange);
+		stepInputChange1.addEventListener('ui5-change', function(e) {
+			const val = Number.parseInt(e.target.value, 10);
+			stepInputChange2.value = val + 999;
+			displayChange(e);
+		});
+		stepInputChange2.addEventListener('ui5-change', displayChange);
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,97 @@
+<!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>ui5-switch</title>
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+  <script type="module" crossorigin src="/assets/bundle.common.e3533330.js"></script>
+  <link rel="stylesheet" href="/assets/Switch.ab07b3d6.css">
+</head>
+<body class="switch1auto">
+	<h3>Default Switch</h3>
+	<div class="switch2auto">
+		<ui5-switch class="switch3auto" text-on="On" text-off="Off"></ui5-switch>
+	</div>
+	<div class="switch2auto">
+		<ui5-switch id="switchTooltip" tooltip="Use GPS location" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
+		<ui5-switch id="switchAccName" accessible-name="Geographical location" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
+		<ui5-label id="descriptionText">Use GPS location</ui5-label>
+		<ui5-switch id="switchAccNameRef" accessible-name-ref="descriptionText" class="switch3auto" text-on="Yes" text-off="No"></ui5-switch>
+	</div>
+	<h3>No Label</h3>
+	<div class="switch2auto">
+		<ui5-switch id="noLabel"></ui5-switch>
+		<ui5-switch checked></ui5-switch>
+	</div>
+	<h3>Default Switch</h3>
+	<div class="switch2auto">
+		<ui5-switch id="sw" text-on="On" text-off="Off"></ui5-switch>
+		<ui5-switch id="sw2" checked text-on="Yes" text-off="No"></ui5-switch>
+		<ui5-switch disabled text-on="On" text-off="Off"></ui5-switch>
+		<ui5-switch checked disabled text-on="Yes" text-off="No"></ui5-switch>
+	</div>
+	<ui5-label id="lbl"></ui5-label>
+	<h3>Change prevented Switch</h3>
+	<div class="switch2auto">
+		<ui5-switch id="switchprevented" text-on="On" text-off="Off"></ui5-switch>
+	</div>
+	<h3>Graphical Switch</h3>
+	<div class="switch2auto">
+		<ui5-switch design="Graphical" text-on="On" text-off="Off"></ui5-switch>
+		<ui5-switch design="Graphical" checked text-on="Yes" text-off="No"></ui5-switch>
+		<ui5-switch design="Graphical" text-on="On" text-off="Off" disabled></ui5-switch>
+		<ui5-switch design="Graphical" checked text-on="Yes" text-off="No" disabled></ui5-switch>
+	</div>
+	<h3>Custom Switch</h3>
+	<div class="switch2auto">
+		<ui5-switch text-on="Accept" text-off="Reject" class="switch4auto"></ui5-switch>
+		<ui5-switch checked  text-on="Turned On" text-off="Turned Off" class="switch5auto"></ui5-switch>
+		<ui5-switch text-on="Enabled" text-off="disabled" class="switch6auto"></ui5-switch>
+		<ui5-switch checked  text-on="Allowed" text-off="Prohibitted" class="switch7auto"></ui5-switch>
+	</div>
+    <h3>Switch styled with shadow parts</h3>
+    <div class="switch2auto">
+        <ui5-switch id="styled1" text-on="On" text-off="Off"></ui5-switch>
+        <ui5-switch class="styled2" checked text-on="Yes" text-off="No"></ui5-switch>
+    </div>
+	<ui5-input id="field"></ui5-input>
+	<h3>sap_horizon</h3>
+    <div class="switch2auto">
+        <ui5-switch disabled></ui5-switch>
+        <ui5-switch disabled checked></ui5-switch>
+        <ui5-switch></ui5-switch>
+		<ui5-switch checked></ui5-switch>
+    </div>
+</body>
+<script>
+	var counter = 0;
+	sw.addEventListener("ui5-change", function(e) {
+		lbl.innerHTML = e.target.checked + " : " + (++counter);
+		field.value = counter;
+	});
+	switchprevented.addEventListener("ui5-change", function(e) {
+		e.preventDefault();
+	});
+</script>
+</html>