npm - @ui5/webcomponents-fiori - Versions diffs - 1.10.0 → 1.10.2 - Mend

@ui5/webcomponents-fiori 1.10.0 → 1.10.2

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

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

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Bar test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Bar.html.a5046c13.css">
+</head>
+<body class="bar1auto">
+	<section>
+		<ui5-bar design="Header">
+		<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
+		<ui5-label>Title</ui5-label>
+		<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+	</section>
+	 <section>
+		<ui5-title level="3">Header design</ui5-title>
+		<ui5-bar design="Header">
+			<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
+			<ui5-label>Title</ui5-label>
+			<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+		<br>
+		<ui5-title level="3">Subheader design</ui5-title>
+		<br>
+		<ui5-bar design="Subheader">
+			<div slot="startContent" class="bar2auto">
+				<ui5-button>Start Button</ui5-button>
+				<ui5-label>Basic Label</ui5-label>
+			</div>
+			<ui5-button>Middle1 Button</ui5-button>
+			<ui5-button>Middle2 Button</ui5-button>
+			<ui5-label slot="endContent">Basic Label</ui5-label>
+			<ui5-button slot="endContent">End Button</ui5-button>
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<br>
+		<ui5-title level="3">Footer design</ui5-title>
+		<ui5-bar design="Footer">
+			<ui5-icon name="home" slot="startContent"></ui5-icon>
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+		<br>
+		<ui5-title level="3">FloatingFooter design</ui5-title>
+		<ui5-bar design="FloatingFooter">
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
+		</ui5-bar>
+	</section>
+	<section>
+		<ui5-bar>
+			<ui5-title id="titleElementWithLongText" slot="startContent">...</ui5-title>
+		  </ui5-bar>
+		<ui5-button id="loadButton">Change Title</ui5-button>
+		<script>
+			const loadButton = document.getElementById("loadButton");
+			const titleElementWithLongText = document.getElementById("titleElementWithLongText");
+			loadButton.addEventListener("click", () => {
+				titleElementWithLongText.innerHTML = "a very long text message which would get cut off";
+			});
+		</script>
+	</section>
+</body>
+</html>

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

@@ -0,0 +1,51 @@
+<!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>Barcode Scanner</title>
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+	<script>// delete Document.prototype.adoptedStyleSheets</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/BarcodeScannerDialog.html.b8919118.css">
+</head>
+<body class="barcodescannerdialog1auto">
+	<ui5-barcode-scanner-dialog id="dlgScan"></ui5-barcode-scanner-dialog>
+	<ui5-button id="btnScan" icon="camera" tooltip="Start Camera">Scan</ui5-button>
+	<div>
+		<ui5-label id="scanResult"></ui5-label>
+		<ui5-label id="scanError"></ui5-label>
+	</div>
+	<script>
+		btnScan.addEventListener("click", function(event) {
+			dlgScan.show();
+		});
+		dlgScan.addEventListener("ui5-scan-success", function(event) {
+			scanResult.innerHTML = event.detail.text;
+			dlgScan.close();
+		});
+		dlgScan.addEventListener("ui5-scan-error", function(event) {
+			scanError.innerHTML = event.detail.message;
+			dlgScan.close();
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,29 @@
+<!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>Default values test page</title>
+    <script>// delete Document.prototype.adoptedStyleSheets</script>
+    <script data-ui5-config type="application/json">
+        {
+            "rtl": false
+        }
+    </script>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Components.html.b41617c5.css">
+</head>
+<body class="components1auto">
+	<ui5-shellbar id="shellbar2" hidden></ui5-shellbar>
+	<ui5-upload-collection id="uploadCollection" hidden></ui5-upload-collection>
+</body>
+</html>

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

@@ -0,0 +1,134 @@
+<!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>Dynamic Side Content</title>
+	<script>
+		delete Document.prototype.adoptedStyleSheets
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.b65feb20.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/DynamicSideContent.html.9b81aa24.css">
+</head>
+<body class="page1auto">
+	<ui5-page id="page" floating-footer show-footer>
+		<ui5-dynamic-side-content
+			id="dynamicSideContent"
+			class="content-padding">
+			<div>
+				<h1>Main Content</h1>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.</p>
+				<p>Sed mauris nunc, sollicitudin eget mi nec, tincidunt molestie diam. Aliquam orci dui, vestibulum quis blandit et, interdum vel arcu. Vestibulum sit amet quam ut sapien pulvinar consequat ac sed turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus quam diam, mattis vitae condimentum ac, ornare vel dui. Pellentesque orci tellus, tempor vel ex eget, luctus vehicula massa. Nullam laoreet, lacus ut vulputate maximus, quam sem molestie nunc, vitae convallis sem nisi nec magna.</p>
+				<p>Nullam a felis odio. Curabitur quis tellus nec risus suscipit dictum vitae eget augue. Maecenas faucibus felis a arcu ultricies, sed tempor ante pellentesque. Ut hendrerit ipsum sit amet ligula bibendum, sit amet vehicula lacus condimentum. Morbi lacinia nibh eu placerat sollicitudin. Praesent accumsan pulvinar massa, eget finibus odio lacinia ullamcorper. Integer neque quam, pretium sed accumsan id, euismod non nibh.</p>
+				<p>Quisque luctus non mi in mollis. Suspendisse id lectus felis. Aliquam elementum nibh nibh. Nullam eget condimentum dolor. Suspendisse id dui non lorem imperdiet iaculis. Pellentesque ex turpis, vehicula a arcu quis, mattis auctor tellus. In ornare, libero ac rhoncus eleifend, felis orci sagittis felis, ac molestie est lacus fermentum odio. Mauris et porta nibh. Integer tellus leo, laoreet nec odio non, rutrum bibendum magna.</p>
+			</div>
+			<div slot="sideContent">
+				<h1>Side Content</h1>
+				<p>Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.</p>
+				<p>Vivamus ut efficitur massa, ac porttitor dolor. Nullam nec elit quis urna convallis tincidunt. Suspendisse potenti. Phasellus dignissim eget mauris eu egestas. Phasellus accumsan pulvinar pharetra. Pellentesque egestas viverra ipsum. Maecenas a dapibus neque. Morbi tincidunt ultricies enim, ac vehicula elit dapibus sit amet. Donec vel felis at felis elementum sodales id id erat. Pellentesque rutrum placerat mollis. In hac habitasse platea dictumst. Sed eget quam aliquet, pretium ligula vitae, lobortis mauris. Aenean eget ipsum auctor, dapibus quam at, pharetra nunc.</p>
+			</div>
+		</ui5-dynamic-side-content>
+		<div slot="footer">
+			<ui5-bar design="FloatingFooter">
+				<ui5-badge class="breakpointBadge" id="breakpointS" color-scheme="5" slot="startContent">S</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointM" color-scheme="6" slot="startContent">M</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointL" color-scheme="7" slot="startContent">L</ui5-badge>
+				<ui5-badge class="breakpointBadge" id="breakpointXL" color-scheme="8" slot="startContent">XL</ui5-badge>
+				<ui5-switch id="hideMainContent" class="hide-on-S" text-on="M +" text-off="M -" title="MainContent" checked></ui5-switch>
+				<ui5-switch id="hideSideContent" class="hide-on-S" text-on="S +" text-off="S -" title="SideContent" checked></ui5-switch>
+				<ui5-switch id="equalSplit" class="hide-on-S" text-on="EQ" text-off="! EQ" title="equalSplit"></ui5-switch>
+				<ui5-switch id="sideContentPosition" class="hide-on-S" text-on="END" text-off="STA" title="sideContentPosition" checked></ui5-switch>
+				<ui5-select id="sideContentVisibility" class="hide-on-S smaller-select" title="sideContentVisibility">
+					<ui5-option>NeverShow</ui5-option>
+					<ui5-option selected>ShowAboveS</ui5-option>
+					<ui5-option>ShowAboveM</ui5-option>
+					<ui5-option>ShowAboveL</ui5-option>
+					<ui5-option>AlwaysShow</ui5-option>
+				</ui5-select>
+				<ui5-select id="sideContentFallDown" class="hide-on-S smaller-select" title="sideContentFallDown">
+					<ui5-option>BelowXL</ui5-option>
+					<ui5-option>BelowL</ui5-option>
+					<ui5-option>BelowM</ui5-option>
+					<ui5-option selected>OnMinimumWidth</ui5-option>
+				</ui5-select>
+				<ui5-button id="toggleButton" design="Positive" slot="endContent">Toggle</ui5-button>
+			</ui5-bar>
+		</div>
+	</ui5-page>
+	<ui5-input id="currentBreakpoint" class="invisible"></ui5-input>
+	<ui5-input id="previousBreakpoint" class="invisible"></ui5-input>
+	<ui5-input id="mainVisible" class="invisible"></ui5-input>
+	<ui5-input id="sideVisible" class="invisible"></ui5-input>
+	<script>
+		var toggleButton = document.getElementById("toggleButton"),
+			sideContentPosition = document.getElementById("sideContentPosition"),
+			sideContentVisibility = document.getElementById("sideContentVisibility"),
+			sideContentFallDown = document.getElementById("sideContentFallDown"),
+			equalSplit = document.getElementById("equalSplit"),
+			dynamnicSideContent = document.getElementById("dynamicSideContent"),
+			currentBreakpoint =  document.getElementById("currentBreakpoint"),
+			previousBreakpoint =  document.getElementById("previousBreakpoint"),
+			mainVisible =  document.getElementById("mainVisible"),
+			sideVisible =  document.getElementById("sideVisible");
+		toggleButton.addEventListener("click", function() {
+			dynamnicSideContent.toggleContents();
+		});
+		hideMainContent.addEventListener("change", function() {
+			dynamnicSideContent.hideMainContent = !hideMainContent.checked;
+		});
+		hideSideContent.addEventListener("change", function() {
+			dynamnicSideContent.hideSideContent = !hideSideContent.checked;
+		});
+		equalSplit.addEventListener("change", function() {
+			dynamnicSideContent.equalSplit = equalSplit.checked;
+		});
+		sideContentPosition.addEventListener("change", function() {
+			dynamnicSideContent.sideContentPosition = sideContentPosition.checked ? "End" : "Start";
+		});
+		sideContentVisibility.addEventListener("change", function(event) {
+			dynamnicSideContent.sideContentVisibility = event.detail.selectedOption.innerText;
+		});
+		sideContentFallDown.addEventListener("change", function(event) {
+			dynamnicSideContent.sideContentFallDown = event.detail.selectedOption.innerText;
+		});
+		dynamicSideContent.addEventListener("ui5-layout-change", function(event) {
+			var breakpoint = event.detail.currentBreakpoint,
+				disp = breakpoint === "S" ? "none" : "block";
+			document.querySelectorAll('.breakpointBadge').forEach(function(elem) { elem.style.display = "none"; });
+			document.querySelector("#breakpoint" + breakpoint).style.display="block";
+			document.querySelectorAll('.hide-on-S').forEach(function(elem) { elem.style.display = disp; });
+			toggleButton.style.display = breakpoint !== "S" || dynamicSideContent.sideContentVisibility === "AlwaysShow" ? "none" : "block";
+		});
+		dynamicSideContent.addEventListener("ui5-layout-change", function(event) {
+			currentBreakpoint.value = event.detail.currentBreakpoint;
+			previousBreakpoint.value = event.detail.previousBreakpoint;
+			mainVisible.value = event.detail.mainContentVisible ? 1 : 0;
+			sideVisible.value = event.detail.sideContentVisible ? 1 : 0;
+		});
+	</script>
+</body>
+</html>