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/DatePicker.html ADDED Viewed

@@ -0,0 +1,205 @@
+<!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>DatePicker test page</title>
+	<script>
+		// delete Document.prototype.adoptedStyleSheets;
+	</script>
+	<script
+	src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+	integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+	crossorigin="anonymous"></script>
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"formatSettings": {
+                "firstDayOfWeek": 0
+            }
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.common.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DatePicker.975133a2.css">
+</head>
+<body class="datepicker1auto">
+	<div style='width:500px;'>
+		<ui5-date-picker id='ui5-datepicker--startDate'
+			placeholder='Delivery Date...'>
+		</ui5-date-picker>
+		<ui5-date-picker id='ui5-datepicker-value-state-message'
+		placeholder='Delivery Date...'
+		value-state="Error">
+			<div slot="valueStateMessage">Information message. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+			<div slot="valueStateMessage">Information message 2. This is a <a href="#">Link</a>. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.</div>
+		</ui5-date-picker>
+		<h3>placeholder + events</h3>
+		<ui5-date-picker id='dp5'
+			placeholder='Delivery Date...'>
+		</ui5-date-picker>
+		<ui5-label id="lblChange">change: N/A</ui5-label><br/>
+		<ui5-label id="lblLiveChange">input: N/A</ui5-label><br/>
+		<h3>placeholder + prevented default events</h3>
+		<ui5-date-picker id='dpPrevent'
+			placeholder='Delivery Date...'>
+		</ui5-date-picker>
+		<ui5-label id="lblChangePrevent">change: N/A</ui5-label><br/>
+		<ui5-label id="lblChangePreventTargetValue">target value on event fire : N/A</ui5-label><br/>
+		<ui5-label id="lblLiveChangePrevent">input: N/A</ui5-label><br/>
+		<h3>format-pattern - 'short'</h3>
+		<ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
+		<h3>format-pattern - 'long'</h3>
+		<ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
+		<h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
+		<ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>
+		<h3>format-pattern - 'EEE, M/d/yyyy'</h3>
+		<ui5-date-picker id='dp9' format-pattern='EEE, M/d/yyyy'></ui5-date-picker>
+		<h3>Try the value - 'today'</h3>
+		<ui5-date-picker id='dp10'></ui5-date-picker>
+		<h3>Value is set using Java Script Date object</h3>
+		<ui5-date-picker id="dp11" value="11/11/2018" format-pattern="long"></ui5-date-picker>
+		<ui5-button id="b1" design="Default">Set date</ui5-button>
+		<h3>disabled</h3>
+		<ui5-date-picker id='dp2' value='11/11/2018' disabled></ui5-date-picker>
+		<h3>readonly</h3>
+		<ui5-date-picker id='dp3' placeholder='Delivery Date...' readonly></ui5-date-picker>
+		<h3>islamic calendar type</h3>
+		<ui5-date-picker primary-calendar-type='Islamic'></ui5-date-picker>
+		<h3>buddhist calendar type</h3>
+		<ui5-date-picker primary-calendar-type='Buddhist'></ui5-date-picker>
+		<h3>japanese calendar type</h3>
+		<ui5-date-picker primary-calendar-type='Japanese'></ui5-date-picker>
+		<h3>Date picker with primary and secondary calendar type</h3>
+		<ui5-date-picker primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></ui5-date-picker>
+		<h3>explicitly set empty placeholder</h3>
+		<ui5-date-picker placeholder=""></ui5-date-picker>
+		<h3>Date picker with min and max date 9/1/2019 - 11/1/2019</h3>
+		<ui5-date-picker id="dp33" min-date="9/1/2019" max-date="11/1/2019" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>Date picker with only min date 1/1/2000</h3>
+		<ui5-date-picker id="dp34" min-date="1/1/2000" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>Date picker with only max date date 1/1/2100</h3>
+		<ui5-date-picker id="dp35" max-date="1/1/2100" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>1 months range</h3>
+		<ui5-date-picker id="minMax1" min-date="6/1/2020" max-date="25/1/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>2 months range</h3>
+		<ui5-date-picker id="minMax2" min-date="6/1/2020" max-date="25/3/2020" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>3 months range</h3>
+		<ui5-date-picker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-date-picker>
+		<h3>1 year range</h3>
+		<ui5-date-picker id="minMax4" value="Feb 5, 2020" min-date="Jan 5, 2020" max-date="Jan 5, 2021"></ui5-date-picker>
+		<section>
+			<h3>Test accessibleName and accessibleNameRef</h3>
+			<ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
+			<br>
+			<ui5-label id="infoText">info text</ui5-label>
+			<ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
+		</section>
+		<section class="ui5-content-density-compact">
+			<h3>DatePicker in Compact</h3>
+			<div>
+				<ui5-date-picker></ui5-date-picker>
+			</div>
+		</section>
+		<section>
+			<h3>DatePicker with properties given in the wrong format</h3>
+			<ui5-date-picker min-date="1/1/2021" max-date="31/1/2021" value="5/1/2021"></ui5-date-picker>
+		</section>
+		<h3>DatePicker with format `yyyy, dd/MM` should open picker on days</h3>
+		<ui5-date-picker id="dpCalendarModeDays" format-pattern="yyyy, dd/MM"></ui5-date-picker>
+		<h3>DatePicker with format `MMM y` should open picker on months</h3>
+		<ui5-date-picker id="dpCalendarModeMonths" format-pattern="MMM y"></ui5-date-picker>
+		<h3>DatePicker with format `yyyy` should open picker on years</h3>
+		<ui5-date-picker id="dpCalendarModeYears" format-pattern="yyyy"></ui5-date-picker>
+	</div>
+	<script>
+		var dp = document.getElementById('dp5');
+		var labelChange = document.getElementById('lblChange');
+		var labelLiveChange = document.getElementById('lblLiveChange');
+		dp.addEventListener('click', function() { console.log('click')});
+		dp.addEventListener('focus', function() {console.log('focus')});
+		dp.addEventListener('dblclick', function() { console.log('dblclick')});
+		dp.addEventListener('keydown', function() { console.log('keydown')});
+		dp.addEventListener('blur', function() { console.log('blur')});
+		dp.addEventListener('ui5-change', function(e) {
+			console.log('change: ', e.detail);
+			labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
+		});
+		dp.addEventListener('ui5-input', function(e) {
+			console.log('input: ', e.detail);
+			labelLiveChange.innerHTML = 'input: ' + JSON.stringify(e.detail);
+		});
+		var dpPrevent = document.getElementById('dpPrevent');
+		var labelChangePrevent = document.getElementById('lblChangePrevent');
+		var labelChangePreventTargetValue = document.getElementById('lblChangePreventTargetValue');
+		var labelLiveChangePrevent = document.getElementById('lblLiveChangePrevent');
+		dpPrevent.addEventListener('ui5-change', function(e) {
+			e.preventDefault();
+			console.log('change: ', e.detail);
+			labelChangePreventTargetValue.innerHTML = 'target value on event fire: ' + e.target.value;
+			labelChangePrevent.innerHTML = 'change: ' + JSON.stringify(e.detail);
+		});
+		dpPrevent.addEventListener('ui5-input', function(e) {
+			console.log('input: ', e.detail);
+			labelLiveChangePrevent.innerHTML = 'input: ' + JSON.stringify(e.detail);
+		});
+		$('#ui5-datepicker--startDate').on('ui5-input change', (function(e) {
+			var dp = $('#ui5-datepicker--startDate')[0];
+			dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error');
+			$('#startDate').val($('#ui5-datepicker--startDate').val());
+			$('#startDate').trigger('change');
+		}));
+		var dp11 = document.getElementById('dp11');
+		document.getElementById('b1').addEventListener("click", function(e) {
+			dp11.setAttribute("value", dp11.formatValue(new Date(2018, 11, 11)));
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,106 @@
+<!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">
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.common.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DatePicker_test_page.3de901b4.css">
+</head>
+<body class="datepicker_test_page1auto">
+	<ui5-date-picker id="dp12"></ui5-date-picker>
+	<ui5-date-picker id="dp"></ui5-date-picker>
+	<ui5-date-picker id="dp1" value="11/11/11"></ui5-date-picker>
+	<ui5-date-picker id="dp2" format-pattern="yyyy, dd/MM"></ui5-date-picker>
+	<ui5-date-picker id="dp3"></ui5-date-picker>
+	<ui5-date-picker id="dp4" value="Jan 29, 2019" format-pattern="MMM d, y"></ui5-date-picker>
+	<ui5-date-picker id="dp5"></ui5-date-picker>
+	<ui5-date-picker id="dp6"></ui5-date-picker>
+	<ui5-date-picker id="dp7" format-pattern="MMM d, y" value="Jan 1, 2019"></ui5-date-picker>
+	<ui5-date-picker id="dp7_1" format-pattern="MMM d, y"></ui5-date-picker>
+	<ui5-date-picker id="dp7_2" format-pattern="MMM d, y"></ui5-date-picker>
+	<ui5-date-picker id="dp8" value="Jan 6, 2015"></ui5-date-picker>
+	<ui5-date-picker id="dp9" value="today"></ui5-date-picker>
+	<ui5-date-picker id="dp10" disabled></ui5-date-picker>
+	<ui5-date-picker id='dp-required' required></ui5-date-picker>
+	<ui5-date-picker id="dp11"></ui5-date-picker>
+	<ui5-date-picker id="dp13"></ui5-date-picker>
+	<ui5-date-picker id="dp16" format-pattern="long"></ui5-date-picker>
+	<ui5-date-picker value="Invalid value" id="dp20"></ui5-date-picker>
+	<ui5-button id="b1" design="Default">Set date</ui5-button>
+	<label id='lbl'>0</label>
+	<button id="downThere" class="datepicker_test_page2auto"></button>
+	<label id='lblTomorrow'>0</label>
+	<label id='lblTomorrowDate'></label>
+	<h3> Minimum and Maximum Date</h3>
+	<ui5-date-picker id="dp33" format-pattern="MMM d, y" min-date="Jan 1, 2000" max-date="Jan 8, 2100" ></ui5-date-picker>
+	<h3> Minimum and Maximum Date In Smaller Range</h3>
+	<ui5-date-picker id="dp34" format-pattern="MMM d, y" min-date="Jan 12, 2020" max-date="Jan 20, 2020" ></ui5-date-picker>
+	<h3>Test placeholder</h3>
+	<ui5-date-picker id="dp14" format-pattern="MMM d, y"></ui5-date-picker>
+	<ui5-date-picker id="dp15" format-pattern="MMM d, y" placeholder="Delivery date"></ui5-date-picker>
+	<h3>DatePicker with valueStateMessage</h3>
+	<ui5-date-picker id="dp17" value-state="Error">
+		<div slot="valueStateMessage" id="coolValueStateMessage">
+			This date is wrong
+		</div>
+	</ui5-date-picker>
+	<h3>DatePicker with hide-week-numbers=true/false</h3>
+	<ui5-date-picker id="dp18"></ui5-date-picker>
+	<ui5-date-picker id="dp19" hide-week-numbers></ui5-date-picker>
+	<h3>DatePicker with format `yyyy, dd/MM` should open picker on days</h3>
+	<ui5-date-picker id="dpCalendarModeDays" format-pattern="yyyy, dd/MM"></ui5-date-picker>
+	<h3>DatePicker with format `MMM y` should open picker on months</h3>
+	<ui5-date-picker id="dpCalendarModeMonths" format-pattern="MMM y"></ui5-date-picker>
+	<h3>DatePicker with format `yyyy` should open picker on years</h3>
+	<ui5-date-picker id="dpCalendarModeYears" format-pattern="yyyy"></ui5-date-picker>
+	<section>
+		<h3>Test accessibleName and accessibleNameRef</h3>
+		<ui5-date-picker id="dpAriaLabel" accessible-name="Hello World"></ui5-date-picker>
+		<br>
+		<ui5-label id="infoText">info text</ui5-label>
+		<ui5-date-picker id="dpAriaLabelledBy" accessible-name-ref="infoText"></ui5-date-picker>
+	</section>
+	<script>
+		var counter = 0;
+		var counterTomorrow = 0;
+		function increaseCounter() {
+			document.querySelector('#lbl').innerHTML = ++counter;
+		}
+		document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
+		document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
+		document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
+			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
+			document.querySelector('#lblTomorrowDate').innerHTML = e.target.liveValue;
+		});
+		var dp16 = document.getElementById('dp16');
+		document.getElementById('b1').addEventListener("click", function(e) {
+			dp16.setAttribute("value", dp16.formatValue(new Date(2018, 11, 11)));
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,64 @@
+<!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>DateRangePicker 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.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DateRangePicker.0e44d4a3.css">
+</head>
+<body class="daterangepicker1auto">
+	<div style='width:500px;'>
+		<div>
+			<label id='labelChange'>0</label>
+			<label id='labelDate'></label>
+		</div>
+		<ui5-daterange-picker id="daterange-picker1"></ui5-daterange-picker>
+		<h3>daterange-picker with delimiter @</h3>
+		<ui5-daterange-picker id="daterange-picker2" delimiter="@"></ui5-daterange-picker>
+		<h3>daterange-picker with format pattern dd/MM/yyyy</h3>
+		<ui5-daterange-picker id="daterange-picker3" format-pattern="dd/MM/yyyy"></ui5-daterange-picker>
+		<h3>daterange-picker with minDate 01/09/2019 and maxDate 01/11/2019</h3>
+		<ui5-daterange-picker id="daterange-picker4" format-pattern="dd/MM/yyyy" min-date="01/09/2019" max-date="01/11/2019"></ui5-daterange-picker>
+		<section class="ui5-content-density-compact">
+			<h3>daterange-picker in Compact</h3>
+			<div>
+				<ui5-daterange-picker id="daterange-picker5" delimiter="@"></ui5-daterange-picker>
+			</div>
+		</section>
+		<h3>daterange-picker with format pattern yyyy-MM-ddy</h3>
+		<ui5-daterange-picker id="daterange-picker6" format-pattern="yyyy-MM-dd"></ui5-daterange-picker>
+		<h3>DateRange Picker with one date selected as first & last</h3>
+		<ui5-daterange-picker id="daterange-picker7" value="Aug 20, 2020 - Aug 20, 2020"></ui5-daterange-picker>
+	</div>
+	<script>
+		document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {
+			document.getElementById("labelChange").innerHTML = Number(document.getElementById("labelChange").innerHTML) + 1;
+		});
+		document.getElementById('daterange-picker4').addEventListener('ui5-change', function(e) {
+			document.getElementById("labelDate").innerHTML = e.detail.value;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,190 @@
+<!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>DateTimePicker Test Page</title>
+    <script>
+		// delete Document.prototype.adoptedStyleSheets;
+    </script>
+  <script type="module" crossorigin src="/assets/bundle.common.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DateTimePicker.81c1bacc.css">
+</head>
+<body class="datetimepicker1auto">
+	<section>
+		<ui5-title wrapping-type="Normal">DateTimePicker</ui5-title><br>
+		<ui5-datetime-picker id="dt"></ui5-datetime-picker>
+	</section>
+	<section>
+		<ui5-title wrapping-type="Normal">DateTimePicker format pattern</ui5-title>
+		<br><ui5-label>Default format pattern</ui5-label><br>
+		<ui5-datetime-picker
+			id="defaultPattern"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+		<ui5-button id="setButton" design="Default">Set date</ui5-button>
+		<br>
+		<br><ui5-label>d/MM/yyyy, hh:mm aa</ui5-label><br>
+		<ui5-datetime-picker
+			id="dtMinutes"
+			format-pattern="dd/MM/yyyy, hh:mm aa"
+			value="13/04/2020, 09:16 AM"
+		></ui5-datetime-picker>
+		<br>
+		<br><ui5-label>d/MM/yyyy, hh:mm:ss aa</ui5-label><br>
+		<ui5-datetime-picker
+			id="dtSeconds"
+			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+		<br>
+		<br><ui5-label>yyyy-MM-dd-hh:mm:ss aa</ui5-label><br>
+		<ui5-datetime-picker
+			id="dtPreventDefault"
+			format-pattern="yyyy-MM-dd-hh:mm:ss aa"
+		></ui5-datetime-picker>
+		<br>
+		<br><ui5-label>d/MM/yyyy, HH:mm:ss (24 hour format)</ui5-label><br>
+		<ui5-datetime-picker
+			format-pattern="dd/MM/yyyy, HH:mm:ss"
+			value="13/04/2020, 19:16:16"
+		></ui5-datetime-picker>
+		<br>
+		<br><ui5-label>d/MM/yyyy, H</ui5-label><br>
+		<ui5-datetime-picker
+			format-pattern="dd/MM/yyyy, H"
+			value="13/04/2020, 19"
+		></ui5-datetime-picker>
+		<br>
+		<br><ui5-label>d/MM/yyyy - no timeset</ui5-label><br>
+		<ui5-datetime-picker
+			format-pattern="dd/MM/yyyy"
+			value="Apr 10, 2020"
+		></ui5-datetime-picker>
+	</section>
+	<section>
+		<ui5-title wrapping-type="Normal">Test DateTimePicker change event on submit</ui5-title>
+		<br>
+		<ui5-datetime-picker id="dt1"></ui5-datetime-picker><br>
+		<br><ui5-label>Change counter</ui5-label><br>
+		<ui5-input
+			id="input1"
+			class="datetimepicker2auto">
+		</ui5-input>
+		<br><ui5-label>Changed value</ui5-label><br>
+		<ui5-input
+			id="input2"
+			class="datetimepicker2auto">
+		</ui5-input>
+	</section>
+	<section>
+		<ui5-title wrapping-type="Normal">Test DateTimePicker change event on cancel</ui5-title>
+		<br/>
+		<ui5-datetime-picker id="dt2"></ui5-datetime-picker><br>
+		<br><ui5-label>Change counter</ui5-label><br>
+		<ui5-input id="input3" class="datetimepicker2auto"></ui5-input>
+		<br><ui5-label>Changed value</ui5-label><br>
+		<ui5-input id="input4" class="datetimepicker2auto"></ui5-input>
+	</section>
+	<section>
+	<ui5-datetime-picker
+			id="dtTest12AM"
+			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+	</section>
+	<ui5-datetime-picker
+			id="dtTest12PM"
+			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			value="13/04/2020, 03:16:16 AM">
+		</ui5-datetime-picker>
+	<section>
+		<ui5-title wrapping-type="Normal">DateTimePicker states</ui5-title>
+		<ui5-datetime-picker value-state="Error"></ui5-datetime-picker>
+		<ui5-datetime-picker value-state="Warning"></ui5-datetime-picker>
+		<ui5-datetime-picker value-state="Information"></ui5-datetime-picker>
+		<ui5-datetime-picker value-state="Success"></ui5-datetime-picker>
+		<br><br>
+		<ui5-datetime-picker readonly></ui5-datetime-picker>
+		<ui5-datetime-picker disabled></ui5-datetime-picker>
+	</section>
+	<section class="sapUiSizeCompact">
+		<ui5-title wrapping-type="Normal">DateTimePicker compact size</ui5-title>
+		<ui5-datetime-picker
+		></ui5-datetime-picker>
+		<br>
+		<ui5-datetime-picker
+			format-pattern="yyyy-MM-dd-hh:mm:ss aa"
+			value="2020-04-13-04:16:16 AM"
+		></ui5-datetime-picker>
+	</section>
+	<section>
+		<ui5-title wrapping-type="Normal">DateTimePicker with secondary calendar type</ui5-title>
+		<ui5-datetime-picker
+			id="secondaryCalendar"
+			value="Sha. 24, 1443 AH, 10:27:26 AM"
+			primary-calendar-type="Islamic"
+			secondary-calendar-type="Gregorian"
+		></ui5-datetime-picker>
+	</section>
+	<script>
+		var counter = 0;
+		dt1.addEventListener("ui5-change", function(event) {
+			input1.value = ++counter;
+			input2.value = "{ value: " + event.detail.value + " , valid: " + event.detail.valid + " }";
+		});
+		dtPreventDefault.addEventListener("ui5-change", function(event) {
+			event.preventDefault();
+		});
+		var counter2 = 0;
+		dt2.addEventListener("ui5-change", function(event) {
+			input3.value = ++counter2;
+			input4.value = "{ value: " + dt2.value + " , valid: " + event.detail.valid + " }";
+		});
+		var dtp = document.getElementById('defaultPattern');
+		document.getElementById('setButton').addEventListener("click", function(e) {
+			dtp.setAttribute("value", dtp.formatValue(new Date(2020, 3, 13, 3, 16, 16)));
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,72 @@
+<!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>DateTimePicker Test Page</title>
+	<!-- <script id="sap-ui-bootstrap"
+		src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
+		data-sap-ui-theme="sap_horizon_dark"
+	></script> -->
+  <script type="module" crossorigin src="/assets/bundle.common.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DateTimePicker.81c1bacc.css">
+</head>
+<body class="datetimepicker1auto">
+		<ui5-title>Local time</ui5-title><ui5-label id="localTime"></ui5-label>
+		<ui5-title>Timezones</ui5-title>
+		<div style="display: flex; align-items: center;">
+			<ui5-select id="sel" style="width: 300px">
+				<ui5-option data-timezone="Pacific/Honolulu">Pacific/Honolulu [-10:00]</ui5-option>
+				<ui5-option data-timezone="America/Los_Angeles">America/Los_Angeles [-8:00]</ui5-option>
+				<ui5-option data-timezone="America/New_York">America/New_York [-5:00]</ui5-option>
+				<ui5-option data-timezone="Europe/London">Europe/London [00:00]</ui5-option>
+				<ui5-option data-timezone="Europe/Sofia" selected>Europe/Sofia [02:00]</ui5-option>
+				<ui5-option data-timezone="Asia/Dubai">Asia/Dubai [04:00]</ui5-option>
+				<ui5-option data-timezone="Asia/Bishkek">Asia/Bishkek [06:00]</ui5-option>
+				<ui5-option data-timezone="Australia/Sydney">Australia/Sydney [10:00]</ui5-option>
+			</ui5-select>
+			<ui5-datetime-picker id="dtp" format-pattern="dd/MM/yyyy, HH:mm:ss" value="today"></ui5-datetime-picker>
+			<ui5-time-picker id="tp" format-pattern="HH:mm:ss"></ui5-time-picker>
+		</div>
+		<script>
+			sel.addEventListener("change", async (e) => {
+				const config = window['sap-ui-webcomponents-bundle'].configuration;
+				await config.setTimezone(e.detail.selectedOption.getAttribute("data-timezone"));
+				dtp.value = "today";
+			});
+			localTime.textContent = new Date();
+			document.addEventListener("DOMContentLoaded", function(event) {
+				const Configuration = window["sap-ui-webcomponents-bundle"].configuration;
+				const configTimezone = Configuration.getTimezone();
+				if (configTimezone) {
+					setTimeout(() => {
+						const option = document.querySelector(`ui5-option[data-timezone="${configTimezone}"]`);
+						const selectedOption = document.querySelector(`ui5-option[selected]`);
+						if (selectedOption) {
+							selectedOption.selected = false;
+						}
+						if (option) {
+							option.selected = true;
+							console.log(option)
+						}
+					})
+				}
+			})
+		</script>
+</body>
+</html>

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

@@ -0,0 +1,37 @@
+<!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">
+	<script>
+		// delete Document.prototype.adoptedStyleSheets;
+	</script>
+	<script
+	src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+	integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+	crossorigin="anonymous"></script>
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"formatSettings": {
+                "firstDayOfWeek": 0
+            }
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.common.6844d7ac.js"></script>
+  <link rel="stylesheet" href="/assets/DayPicker.9d37213d.css">
+</head>
+<body class="daypicker1auto">
+	<ui5-daypicker id="daypicker"></ui5-daypicker>
+	<ui5-daypicker id="daypicker1"></ui5-daypicker>
+</body>
+</html>