npm - @ui5/webcomponents - Versions diffs - 1.13.0-rc.4 → 1.13.0 - Mend

@ui5/webcomponents 1.13.0-rc.4 → 1.13.0

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

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.6844d7ac.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>