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

@ui5/webcomponents 1.13.0-rc.2 → 1.13.0-rc.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 (633) hide show

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

@@ -1,131 +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>Popups</title>
-	<script>
-		// delete Document.prototype.adoptedStyleSheets
-	</script>
-	<script data-ui5-config type="application/json">
-		{
-			"language": "EN"
-		}
-	</script>
-  <script type="module" crossorigin src="/assets/test/pages/Popups.html.11aeb74f.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/bundle.common.c871410e.js">
-  <link rel="stylesheet" href="/assets/Popups.134655f2.css">
-</head>
-<body class="popups1auto">
-	<div class="popups2auto">
-		<content id="popover"></content>
-	</div>
-	<ui5-popover placement-type="Bottom" horizontal-align="Stretch" hide-arrow initial-focus="input1" class="wcPopoverWithList">
-		<ui5-list id="myList" indent separators="Inner" mode="MultiSelect" footer-text="Copyright" no-data-text="No data">
-			<!-- Header -->
-			<div class="popups3auto" slot="header">
-				<ui5-title>Countries:</ui5-title>
-				<ui5-button design="Accept">OK</ui5-button>
-			</div>
-			<!-- Items -->
-			<ui5-li>Argentina</ui5-li>
-			<ui5-li>Bulgaria</ui5-li>
-			<ui5-li-custom><ui5-label>China</ui5-label><ui5-checkbox text="Checkbox"></ui5-checkbox></ui5-li-custom>
-			<ui5-li-custom><ui5-button>Click me</ui5-button></ui5-li-custom>
-		</ui5-list>
-	</ui5-popover>
-	<header class="header">
-		<h2 class="header-title">Popups</h2>
-	</header>
-	<!-- Input with Popover -->
-	<section class="group_colored">
-		<h3 class="group-title">Popover</h3>
-		<h5>JS Components</h5>
-		<!--<content id="input1"></content>-->
-		<!--<content id="inputPopover"></content>-->
-		<h5>Web Component</h5>
-	</section>
-	<!-- Dialog -->
-	<section class="group">
-		<h3 class="group-title">Dialog</h3>
-		<h5>JS Components</h5>
-		<!--<content id="btnOpenDialog"></content>-->
-		<!--<content id="dialog"></content>-->
-		<h5>Web Component</h5>
-		<ui5-button class="wcBtnOpenDialog">Open Dialog</ui5-button>
-			<ui5-dialog class="wcDialog" initial-focus="focusButton" header-text="Web Component Dialog">
-				<div slot="header" id="head1" class="popups4auto">
-					<div class="popups5auto">Custom Header</div>
-					<ui5-button icon="decline"></ui5-button>
-				</div>
-				<div slot="footer" class="popups4auto">
-					<div class="popups5auto">Custom Footer</div>
-					<ui5-button id="focusButton">Accept</ui5-button>
-				</div>
-				<ui5-date-picker></ui5-date-picker>
-				<ui5-button class="wcBtnOpenNewDialog">Open New Dialog</ui5-button>
-				<ui5-button class="wcBtnCloseDialog">Close Dialog</ui5-button>
-				<ui5-popover placement-type="Right" class="wcNewDialogPopover" header-text="Second Popover">
-					<ui5-button class="wcBtnOpenNewPopoverDialog1">Open New Popover </ui5-button>
-					<ui5-button class="wcBtnClosePopoverDialog1">Popover Button</ui5-button>
-				</ui5-popover>
-				<ui5-button class="wcBtnOpenNewDialogPopover">Open New Popover</ui5-button>
-				<ui5-dialog class="wcNewDialog" header-text="Second Dialog">
-					<ui5-button class="wcNewDialog1">Open New Dialog</ui5-button>
-					<ui5-button class="wcBtnCloseDialog1">Dialog Button</ui5-button>
-				</ui5-dialog>
-			</ui5-dialog>
-	</section>
-	<!-- Popover -->
-	<section class="group group_colored">
-		<h3 class="group-title">Popover</h3>
-		<h5>JS Components</h5>
-		<!--<div class="popups6auto">-->
-			<!--<content class="popups7auto" id="btnOpenPopover"></content>-->
-		<!--</div>-->
-		<h5>Web Component</h5>
-		<ui5-button class="wcBtnOpenPopover">Open Popover</ui5-button>
-		<ui5-popover placement-type="Top" class="wcPopover" header-text="Web Component Popover">
-			<div slot="header" class="popups4auto">
-				<div class="popups5auto">Custom Header</div>
-				<ui5-button icon="decline"></ui5-button>
-			</div>
-			<div slot="footer" class="popups4auto">
-				<div class="popups5auto">Custom Footer</div>
-				<ui5-button>Accept</ui5-button>
-			</div>
-			<ui5-date-picker></ui5-date-picker>
-			<ui5-popover placement-type="Right" class="wcNewPopover" header-text="Second Popover">
-				<ui5-button class="wcBtnOpenNewPopover1">Open New Popover </ui5-button>
-				<ui5-button class="wcBtnClosePopover1">Popover Button</ui5-button>
-			</ui5-popover>
-			<ui5-button class="wcBtnOpenNewPopover">Open New Popover </ui5-button>
-			<ui5-button class="wcBtnClosePopover">Close Popover</ui5-button>
-			<ui5-button class="wcBtnOpenNewPopoverDialog11">Open New Dialog</ui5-button>
-			<ui5-dialog class="wcNewPopoverDialog11" header-text="Second Dialog">
-				<ui5-button class="wcNewPopoverDialog1">Open New Dialog</ui5-button>
-				<ui5-button class="wcBtnClosePopoverDialog1">Dialog Button</ui5-button>
-			</ui5-dialog>
-		</ui5-popover>
-	</section>
-</body>
-</html>

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

@@ -1,151 +0,0 @@
-<!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>Progress Indicator</title>
-	<script>
-		// delete Document.prototype.adoptedStyleSheets
-	</script>
-  <script type="module" crossorigin src="/assets/bundle.common.c871410e.js"></script>
-  <link rel="stylesheet" href="/assets/ProgressIndicator.bce2138a.css">
-</head>
-<body class="progressindicator1auto">
-	<br />
-	Value is 0
-	<br />
-	<ui5-progress-indicator value="0"></ui5-progress-indicator>
-	<br />
-	Value is 100
-	<br />
-	<ui5-progress-indicator value="100"></ui5-progress-indicator>
-	<br />
-	Value less than 50
-	<br />
-	<ui5-progress-indicator value="25"></ui5-progress-indicator>
-	<br />
-	Value greater than 50
-	<br />
-	<ui5-progress-indicator value="75"></ui5-progress-indicator>
-	<br />
-	Value less than 50 without value
-	<br />
-	<ui5-progress-indicator value="25" hide-value></ui5-progress-indicator>
-	<br />
-	Value greater than 50 without value
-	<br />
-	<ui5-progress-indicator value="75" hide-value></ui5-progress-indicator>
-	<br />
-	ValueState.None
-	<br />
-	<ui5-progress-indicator value-state="None" value="25"></ui5-progress-indicator>
-	<br />
-	ValueState.Error
-	<br />
-	<ui5-progress-indicator value-state="Error" value="25"></ui5-progress-indicator>
-	<br />
-	ValueState.Warning
-	<br />
-	<ui5-progress-indicator value-state="Warning" value="25"></ui5-progress-indicator>
-	<br />
-	ValueState.Success
-	<br />
-	<ui5-progress-indicator value-state="Success" value="25"></ui5-progress-indicator>
-	<br />
-	ValueState.Information
-	<br />
-	<ui5-progress-indicator value-state="Information" value="25"></ui5-progress-indicator>
-	<br />
-	Disabled
-	<br />
-	<ui5-progress-indicator disabled value="25"></ui5-progress-indicator>
-	<br />
-	ValueState.None
-	<br />
-	<ui5-progress-indicator value-state="None" value="60"></ui5-progress-indicator>
-	<br />
-	ValueState.Error
-	<br />
-	<ui5-progress-indicator value-state="Error" value="60"></ui5-progress-indicator>
-	<br />
-	ValueState.Warning
-	<br />
-	<ui5-progress-indicator value-state="Warning" value="60"></ui5-progress-indicator>
-	<br />
-	ValueState.Success
-	<br />
-	<ui5-progress-indicator value-state="Success" value="60"></ui5-progress-indicator>
-	<br />
-	ValueState.Information
-	<br />
-	<ui5-progress-indicator value-state="Information" value="60"></ui5-progress-indicator>
-	<br />
-	Disabled
-	<br />
-	<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
-	<br />
-	Custom Display Value
-	<br />
-	<ui5-progress-indicator value="25" display-value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."></ui5-progress-indicator>
-	<br />
-	Custom Size 1
-	<br />
-	<ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
-	<br />
-	Custom Size 2
-	<br />
-	<ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
-	<br />
-	Test progress indicator
-	<br />
-	<ui5-progress-indicator id="test-progress-indicator"></ui5-progress-indicator>
-	<ui5-button id="firstBtn">Set 0 value</ui5-button>
-	<ui5-button id="secondBtn">Set 25 value</ui5-button>
-	<ui5-button id="thirdBtn">Set 50 value</ui5-button>
-	<ui5-button id="fourthBtn">Set 75 value</ui5-button>
-	<ui5-button id="fifthBtn">Set 100 value</ui5-button>
-	<ui5-button id="sixthBtn">Set negative value</ui5-button>
-	<ui5-button id="seventhBtn">Set larger than 100 value</ui5-button>
-	<script>
-		var progressIndicator = document.getElementById("test-progress-indicator");
-		var button1 = document.getElementById("firstBtn");
-		var button2 = document.getElementById("secondBtn");
-		var button3 = document.getElementById("thirdBtn");
-		var button4 = document.getElementById("fourthBtn");
-		var button5 = document.getElementById("fifthBtn");
-		var button6 = document.getElementById("sixthBtn");
-		var button7 = document.getElementById("seventhBtn");
-		button1.addEventListener("click", function (event) {
-			progressIndicator.value = 0;
-		});
-		button2.addEventListener("click", function (event) {
-			progressIndicator.value = 25;
-		});
-		button3.addEventListener("click", function (event) {
-			progressIndicator.value = 50;
-		});
-		button4.addEventListener("click", function (event) {
-			progressIndicator.value = 75;
-		});
-		button5.addEventListener("click", function (event) {
-			progressIndicator.value = 100;
-		});
-		button6.addEventListener("click", function (event) {
-			progressIndicator.value = -10;
-		});
-		button7.addEventListener("click", function (event) {
-			progressIndicator.value = 110;
-		});
-	</script>
-</body>
-</html>

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

@@ -1,118 +0,0 @@
-<!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>RTL and Language</title>
-	<script>
-		// delete Document.prototype.adoptedStyleSheets
-	</script>
-  <script type="module" crossorigin src="/assets/bundle.common.c871410e.js"></script>
-  <link rel="stylesheet" href="/assets/RTL.63030fdf.css">
-</head>
-<body class="rtl1auto">
-	<div class="rtl2auto">
-		<ui5-segmented-button id="tb">
-			<ui5-toggle-button pressed>EN</ui5-toggle-button>
-			<ui5-toggle-button>DE</ui5-toggle-button>
-			<ui5-toggle-button>BG</ui5-toggle-button>
-			<ui5-toggle-button>ES</ui5-toggle-button>
-			<ui5-toggle-button>HE</ui5-toggle-button>
-			<ui5-toggle-button>AR</ui5-toggle-button>
-		</ui5-segmented-button>
-		<div class="rtl3auto"></div>
-		<ui5-label class="rtl4auto">Manually switch RTL:</ui5-label>
-		<ui5-switch id="sw"></ui5-switch>
-	</div>
-	<section>
-		<ui5-textarea maxlength="20" show-exceeded-text class="rtl5auto"></ui5-textarea>
-	</section>
-	<section>
-		<ui5-title>This section does not define dir</ui5-title>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-	</section>
-	<section dir="ltr">
-		<ui5-title>This section defines dir=LTR</ui5-title>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="This checkbox however defines dir=rtl" dir="rtl"></ui5-checkbox>
-	</section>
-	<section dir="rtl">
-		<ui5-title>This section defines dir=RTL</ui5-title>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="Click me"></ui5-checkbox>
-		<br>
-		<ui5-checkbox text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
-	</section>
-	<ui5-date-picker></ui5-date-picker>
-	<script>
-		setTimeout(function() {
-			window['sap-ui-webcomponents-bundle'].attachDirectionChange(function() {
-				console.log("Direction changed");
-			});
-		}, 1000);
-		// Utility function to change RTL and apply the changes
-		function setDir(dir) {
-			document.body.dir = dir;
-			window['sap-ui-webcomponents-bundle'].applyDirection();
-		}
-		function setDirByLang(lang) {
-			if (lang === "he" || lang === "ar") {
-				setDir("rtl");
-			} else {
-				setDir("ltr");
-			}
-		}
-		function setLanguage(lang) {
-			return window['sap-ui-webcomponents-bundle'].configuration.setLanguage(lang);
-		}
-		document.getElementById("sw").addEventListener("ui5-click", function(e) {
-			if (e.target.checked) {
-				setDir("rtl");
-			} else {
-				setDir("ltr");
-			}
-		});
-		document.getElementById("tb").addEventListener("ui5-selection-change", function(e) {
-			var lang = e.detail.selectedButton.textContent.toLowerCase();
-			setLanguage(lang).then(function() {
-				setDirByLang(lang);
-			});
-		});
-	</script>
-</body>
-</html>

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

@@ -1,201 +0,0 @@
-<!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-radio-button</title>
-  <script type="module" crossorigin src="/assets/bundle.common.c871410e.js"></script>
-  <link rel="stylesheet" href="/assets/RadioButton.2216f159.css">
-</head>
-<body class="radiobutton1auto">
-	<ui5-radio-button name="simple" text="Option A"></ui5-radio-button>
-	<ui5-radio-button checked name="simple" text="Option B"></ui5-radio-button>
-	<ui5-radio-button name="simple" text="Option C"></ui5-radio-button>
-	<ui5-title level="H1">Radios within a group</ui5-title><br>
-	<div aria-labelledby="radioGroupTitle1" role="radiogroup" class="radio-section">
-		<ui5-title id="radioGroupTitle1">Group1 - None pre-selection</ui5-title>
-		<ui5-radio-button id="testRbtn" text="N/A" disabled name="test"></ui5-radio-button>
-		<ui5-radio-button id="testRbtn1" text="Male" name="test"></ui5-radio-button>
-		<ui5-radio-button id="testRbtn2" text="Female" name="test"></ui5-radio-button>
-	</div>
-	<div aria-labelledby="radioGroupTitle2" role="radiogroup" class="radio-section">
-		<ui5-title id="radioGroupTitle2">Group 2</ui5-title>
-		<ui5-radio-button id="testRbtn11" name="test2" checked text="Selected A"></ui5-radio-button>
-		<ui5-radio-button id="testRbtn12" name="test2" disabled text="Disabled B"></ui5-radio-button>
-		<ui5-radio-button id="testRbtn13" name="test2" text="Standard C"></ui5-radio-button>
-	</div>
-	<div aria-labelledby="radioGroupTitle3" role="radiogroup" class="radio-section">
-		<ui5-title id="radioGroupTitle3">Group 3</ui5-title>
-		<ui5-input id="tabField"></ui5-input>
-		<ui5-radio-button id="groupRb1" name="a" checked text="Option A long long should shrink long long text text text text text text text text"></ui5-radio-button>
-		<ui5-radio-button id="groupRb2" name="a" disabled text="Option C"></ui5-radio-button>
-		<ui5-radio-button id="groupRb3" name="a" text="Option D"></ui5-radio-button>
-		<ui5-radio-button id="groupRbReadOnly" name="a" readonly text="Option E"></ui5-radio-button>
-	</div>
-	<div aria-labelledby="radioGroupTitle4" role="radiogroup" class="radio-section">
-		<ui5-title id="radioGroupTitle4">Group 4</ui5-title>
-		<ui5-radio-button id="groupRb4" name="b" checked text="Option A long long should shrink long long text text text text text text text text"></ui5-radio-button>
-		<ui5-radio-button id="groupRb5" name="b" disabled text="Option C"></ui5-radio-button>
-		<ui5-radio-button id="groupRb6" name="b" text="Option D"></ui5-radio-button>
-	</div>
-	<div aria-labelledby="radioGroupTitle5" role="radiogroup" id="radioGroup" class="radio-section">
-		<ui5-title id="radioGroupTitle5">Group 5 - Value states</ui5-title>
-		<ui5-label id="lblRadioGroup">N/A</ui5-label>
-		<ui5-label id="lblEventCounter">0</ui5-label>
-		<ui5-radio-button id="groupRb7" text="None selected" value-state="None" name="GroupB"></ui5-radio-button>
-		<ui5-radio-button id="groupRb8" text="Warning" value-state="Warning" checked name="GroupB"></ui5-radio-button>
-		<ui5-radio-button id="groupRb9" text="Error" value-state="Error" checked name="GroupB"></ui5-radio-button>
-		<ui5-radio-button text="Success" value-state="Success" checked name="GroupB"></ui5-radio-button>
-		<ui5-radio-button text="Information" value-state="Information" checked name="GroupB"></ui5-radio-button>
-		<ui5-radio-button id="groupRb10" text="Default selected" value-state="None" checked name="GroupB"></ui5-radio-button>
-		<ui5-radio-button id="groupRb11" text="Radio From Another Group" value-state="None" checked name="GroupBB"></ui5-radio-button>
-	</div>
-	<ui5-title level="H1">Standalone Radios Not Grouped</ui5-title>
-	<div>
-		<ui5-radio-button id="myRb6" checked text="Default"></ui5-radio-button>
-		<ui5-radio-button id="myRb7" readonly text="read only"></ui5-radio-button>
-		<ui5-radio-button id="myRb8" disabled text="disabled"></ui5-radio-button>
-		<ui5-radio-button id="myRb9" readonly text="read only" checked></ui5-radio-button>
-		<ui5-radio-button id="myRb10" disabled text="disabled" checked></ui5-radio-button>
-		<ui5-radio-button id="myRb11" value-state="Warning" text="warning"></ui5-radio-button>
-		<ui5-radio-button id="myRb12" value-state="Error" text="error"></ui5-radio-button>
-		<ui5-radio-button id="myRb11" value-state="Success" text="success"></ui5-radio-button>
-		<ui5-radio-button id="myRb12" value-state="Information" text="information"></ui5-radio-button>
-		<ui5-radio-button id="myRb13" value-state="Warning" checked text="warning"></ui5-radio-button>
-		<ui5-radio-button id="myRb14" value-state="Error" checked text="error"></ui5-radio-button>
-		<ui5-radio-button id="myRb13" value-state="Success" checked text="success"></ui5-radio-button>
-		<ui5-radio-button id="myRb14" value-state="Information" checked text="information"></ui5-radio-button>
-	</div>
-	<div class="radio-section">
-		<ui5-radio-button id="rb1"></ui5-radio-button>
-		<ui5-radio-button id="rb2" text="Option B"></ui5-radio-button>
-		<ui5-radio-button id="rb3" wrapping-type="Normal" text="Option C"></ui5-radio-button>
-		<ui5-radio-button id="rb4" disabled text="Option D"></ui5-radio-button>
-		<ui5-radio-button id="truncatingRb" text="Long long long long long long long long long long text that should truncate at some point"></ui5-radio-button>
-		<br/>
-		<ui5-radio-button id="wrappingRb" wrapping-type="Normal" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." class="radiobutton2auto"></ui5-radio-button>
-		<ui5-input id="field"></ui5-input>
-	</div>
-	<ui5-title level="H2">accessibleName</ui5-title>
-	<div>
-		<ui5-radio-button id="rb-acc-name" accessible-name="Sample Label"></ui5-radio-button>
-		<ui5-radio-button id="rb-acc-name-text" text="Sample Text" accessible-name="Sample Label"></ui5-radio-button>
-	</div>
-	<ui5-title level="H2">accessibleNameRef</ui5-title>
-	<div>
-		<div class="radio-section-horizontal">
-			<ui5-label id="lbl-rb-acc-name-ref">Label for this radio button:</ui5-label>
-			<ui5-radio-button id="rb-acc-name-ref" accessible-name-ref="lbl-rb-acc-name-ref"></ui5-radio-button>
-		</div>
-		<div class="radio-section-horizontal">
-			<ui5-label id="lbl-rb-acc-name-ref-with-text">Label for this radio button:</ui5-label>
-			<ui5-radio-button id="rb-acc-name-ref-with-text" accessible-name-ref="lbl-rb-acc-name-ref-with-text" text="Sample Text"></ui5-radio-button>
-		</div>
-		<div class="radio-section-horizontal">
-			<ui5-list>
-				<ui5-li-custom>
-					<ui5-radio-button id="rb-acc-name-ref-wrapped" accessible-name-ref="lbl-rb-acc-name-ref"></ui5-radio-button>
-				</ui5-li-custom>
-			</ui5-list>
-		</div>
-	</div>
-	<p>*Params</p>
-	<p>
-		<ui5-label>- for compact add 'ui5-content-density-compact' class to any dom element</ui5-label>
-	</p>
-	<p>
-		<ui5-label>- for belize use 'sap-ui-theme=sap_belize'</ui5-label>
-	</p>
-	<ui5-title level="H2">Navigation in RTL</ui5-title><br>
-	<div dir="rtl">
-		<ui5-radio-button id="rtlOptionA" name="rtlGroup" text="Option A" checked></ui5-radio-button>
-		<ui5-radio-button id="rtlOptionB" name="rtlGroup" text="Option B"></ui5-radio-button>
-		<ui5-radio-button id="rtlOptionC" name="rtlGroup" text="Option C"></ui5-radio-button>
-	</div>
-	<ui5-label>add/remove radio buttons in DOM</ui5-label>
-	<ui5-switch id="rbGroupSwitch"></ui5-switch>
-	<div id="rbGroupContainer"></div>
-	<ui5-title level="H2">Form Support</ui5-title><br>
-	<form>
-		<div aria-labelledby="formRadioGroupTitle1" aria-required="true" role="radiogroup" class="radio-section">
-			<ui5-title id="formRadioGroupTitle1">Select:</ui5-title>
-			<ui5-radio-button id="formRadioBtnRequired" value="optionA" name="formGroup" text="Option A" required></ui5-radio-button>
-			<ui5-radio-button value="optionB" name="formGroup" text="Option B"></ui5-radio-button>
-			<ui5-radio-button value="optionC" name="formGroup" text="Option C"></ui5-radio-button>
-		</div>
-		<input type="submit">
-	</form>
-	<ui5-title level="H2">Form Support - native HTML</ui5-title><br>
-	<form>
-		Select:
-		<br/>
-		<label>
-			<input type="radio" name="nativeFormGroup" value="optionA" required>Option A
-		</label>
-		<br/>
-		<label>
-			<input type="radio" name="nativeFormGroup" value="optionB">Option B
-		</label>
-		<br/>
-		<label>
-			<input type="radio" name="nativeFormGroup" value="optionC">Option C
-		</label>
-		<br/>
-		<input type="submit">
-	</form>
-	<script>
-		var counter = 0;
-		var groupEventCounter = 0;
-		[window["rb1"], window["rb2"], window["rb3"], window["rb4"]].forEach(function (radio) {
-			radio.addEventListener("ui5-change", function (event) {
-				counter += 1;
-				window["field"].value = counter;
-			});
-		})
-		radioGroup.addEventListener("ui5-change", function (e) {
-			var radio = e.target;
-			lblRadioGroup.innerHTML = radio.text;
-			lblEventCounter.innerHTML = ++groupEventCounter;
-		});
-		var rbGroupSwitch = document.getElementById("rbGroupSwitch");
-		var rbGroupContainer = document.getElementById("rbGroupContainer");
-		rbGroupSwitch.addEventListener("ui5-change", function (e) {
-			rbGroupContainer.innerHTML = e.target.checked ? createRbGroup() : "";
-		});
-		function createRbGroup() {
-			return `
-				<ui5-radio-button name="sameGroup" text="A"></ui5-radio-button>
-				<ui5-radio-button name="sameGroup" text="B"></ui5-radio-button>
-				<ui5-radio-button name="sameGroup" text="C"></ui5-radio-button>
-			`;
-		}
-</script>
-</body>
-</html>