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

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

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

@@ -0,0 +1,199 @@
+<!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.esm-6134bfc5.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">DateTimePicker with no format pattern & min-max dates in ISO format</ui5-title><br>
+		<ui5-datetime-picker
+				id="dtMinMaxDatesISO"
+				min-date="2023-05-01"
+				max-date="2023-05-31"
+		></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.esm-6134bfc5.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.esm-6134bfc5.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>