npm - @ui5/webcomponents-fiori - Versions diffs - 1.9.3 → 1.9.4 - Mend

@ui5/webcomponents-fiori 1.9.3 → 1.9.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 (139) hide show

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

@@ -0,0 +1,277 @@
+<!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>NotificationListItem</title>
+  <script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/NotificationListItem.html.01df347d.css">
+</head>
+<body class="notificationlistitem1auto">
+	<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
+	</ui5-shellbar>
+	<ui5-list id="notificationList" header-text="Notifications titleText and content 'truncates'">
+		<ui5-li-notification
+			busy
+			show-close
+			title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+		>
+			And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+			<ui5-avatar size="XS" slot="avatar">
+				<img src="/assets/man_avatar_1.ffaff72e.png" />
+			</ui5-avatar>
+			<span slot="footnotes">John Doe</span>
+			<span slot="footnotes">2 Days</span>
+			<span slot="footnotes">Other stuff</span>
+			<ui5-notification-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+			<ui5-notification-action
+				id="rejectBtn"
+				icon="message-error"
+				text="Reject"
+				slot="actions"
+				design="Negative"
+			></ui5-notification-action>
+		</ui5-li-notification>
+		<ui5-li-notification
+			show-close
+			title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+			priority="High"
+		>
+			And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+			<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+			<span slot="footnotes">Office Notifications</span>
+			<span slot="footnotes">3 Days</span>
+			<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+		</ui5-li-notification>
+		<ui5-li-notification
+			title-text="New order (#2565) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+			priority="Medium"
+			>
+				Short description
+			<ui5-avatar initials="JS" size="XS" slot="avatar"></ui5-avatar>
+			<span slot="footnotes">Patricia Clarck</span>
+			<span slot="footnotes">3 Days</span>
+			<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
+			<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
+			<ui5-notification-action icon="decline" design="Negative" text="Reject More" slot="actions"></ui5-notification-action>
+		</ui5-li-notification>
+		<ui5-li-notification title-text="New order (#2523)">
+			<div>And with a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
+			<span slot="footnotes">John SMith</span>
+			<span slot="footnotes">3 Days</span>
+			<ui5-notification-action
+				icon="message-error"
+				design="Negative"
+				text="Reject"
+				slot="actions">
+			</ui5-notification-action>
+			<ui5-notification-action icon="decline" disabled design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
+		</ui5-li-notification>
+	</ui5-list>
+	<br><br>
+	<ui5-list id="notificationList2">
+		<ui5-li-notification
+			show-close
+			wrapping-type="Normal"
+			title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+		>
+			And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+			<ui5-avatar size="XS" slot="avatar">
+				<img src="/assets/man_avatar_1.ffaff72e.png" />
+			</ui5-avatar>
+			<span slot="footnotes">John Doe</span>
+			<span slot="footnotes">2 Days</span>
+			<span slot="footnotes">Other stuff</span>
+		</ui5-li-notification>
+		<ui5-li-notification
+			show-close
+			wrapping-type="Normal"
+			title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+			priority="High"
+		>
+			And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+			<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+			<span slot="footnotes">Office Notifications</span>
+			<span slot="footnotes">3 Days</span>
+		</ui5-li-notification>
+		<ui5-li-notification
+			wrapping-type="Normal"
+			title-text="New order (#2522)"
+			priority="Low"
+		>
+			And short description
+			<ui5-avatar initials="PS" size="XS" slot="avatar"></ui5-avatar>
+			<span slot="footnotes">John Doe</span>
+			<span slot="footnotes">3 Days</span>
+		</ui5-li-notification>
+		<ui5-li-notification
+			title-text="New order (#2523)"
+			wrapping-type="Normal"
+		>
+			<div>With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
+			<span slot="footnotes">John SMith</span>
+			<span slot="footnotes">3 Days</span>
+		</ui5-li-notification>
+	</ui5-list>
+	<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
+	<ui5-popover id="notificationsPopover" class="notificationlistitem2auto" placement-type="Bottom" horizontal-align="Right">
+		<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
+			<ui5-li-notification
+				show-close
+				title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+			>
+				And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+				<ui5-avatar size="XS" slot="avatar">
+					<img src="/assets/man_avatar_1.ffaff72e.png" />
+				</ui5-avatar>
+				<span slot="footnotes">John Doe</span>
+				<span slot="footnotes">2 Days</span>
+				<span slot="footnotes">Other stuff</span>
+				<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				<ui5-notification-action
+					id="rejectBtnInPopover"
+					icon="message-error"
+					text="Reject"
+					design="Negative"
+					slot="actions">
+				</ui5-notification-action>
+			</ui5-li-notification>
+			<ui5-li-notification
+				show-close
+				title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+				priority="High"
+			>
+				And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+				<span slot="footnotes">Office Notifications</span>
+				<span slot="footnotes">3 Days</span>
+				<ui5-notification-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+			</ui5-li-notification>
+			<ui5-li-notification
+				title-text="New order (#2565) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
+				priority="Medium"
+			>
+					Short description
+				<ui5-avatar initials="JS" size="XS" slot="avatar"></ui5-avatar>
+				<span slot="footnotes">Patricia Clarck</span>
+				<span slot="footnotes">3 Days</span>
+				<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
+				<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
+			</ui5-li-notification>
+			<ui5-li-notification title-text="New order (#2523)">
+				<div>. With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
+				<span slot="footnotes">John SMith</span>
+				<span slot="footnotes">3 Days</span>
+				<ui5-notification-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-action>
+			</ui5-li-notification>
+		</ui5-list>
+	</ui5-popover>
+	<div class="notificationlistitem3auto">
+		<ui5-button id="openNotifications" design="Transparent" icon="bell"></ui5-button>
+	</div>
+	<script>
+		notificationList.addEventListener("item-click", function(event) {
+			wcToastBS.textContent = event.detail.item.titleText;
+			wcToastBS.show();
+		});
+		notificationList.addEventListener("item-close", function(event) {
+			wcToastBS.textContent = event.detail.item.titleText;
+			wcToastBS.show();
+		});
+		notificationList2.addEventListener("item-click", function(event) {
+			var item = event.detail.item;
+			setTimeout(function() {
+				item.busy = false;
+				item.read = true;
+			}, 1000);
+			item.busy = true;
+			wcToastBS.textContent = item.titleText;
+			wcToastBS.show();
+		});
+		notificationList2.addEventListener("item-close", function(event) {
+			wcToastBS.textContent = event.detail.item.titleText;
+			wcToastBS.show();
+		});
+		acceptBtn.addEventListener("click", function(event) {
+			wcToastBS.textContent = "Accept btn clicked";
+			wcToastBS.show();
+		});
+		acceptBtnInPopover.addEventListener("click", function(event) {
+			wcToastBS.textContent = "Accept btn In popover btn clicked";
+			wcToastBS.show();
+		});
+		rejectBtn.addEventListener("click", function(event) {
+			wcToastBS.textContent = "Reject btn clicked";
+			wcToastBS.show();
+		});
+		rejectBtnInPopover.addEventListener("click", function(event) {
+			wcToastBS.textContent = "Reject btn In popover btn clicked";
+			wcToastBS.show();
+		});
+		openNotifications.addEventListener("click", function(event) {
+			notificationsPopover.showAt(openNotifications);
+		});
+		shellbar.addEventListener("ui5-notifications-click", function(event) {
+			event.preventDefault();
+			notificationsPopover.showAt(event.detail.targetRef);
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,195 @@
+<!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>NotificationListItem and NotificationListGroupItem</title>
+	<script>// delete Document.prototype.adoptedStyleSheets;</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/NotificationList_test_page.html.883d5b51.css">
+</head>
+<body class="notificationlist_test_page1auto">
+	<ui5-title>Test NotificationListItem and NotificationListGroupItem</ui5-title>
+	<div class="test-section">
+		<ui5-label>itemClick event:</ui5-label>
+		<ui5-input id="clickInput">
+		</ui5-input>
+	</div>
+	<div class="test-section">
+		<ui5-label>itemClose event:</ui5-label>
+		<ui5-input id="closeInput">
+		</ui5-input>
+	</div>
+	<div class="test-section">
+		<ui5-label>itemToggle event:</ui5-label>
+		<ui5-input id="toggleInput">
+		</ui5-input>
+	</div>
+	<div class="test-section">
+		<ui5-label>custom action click:</ui5-label>
+		<ui5-input id="customActionInput">
+		</ui5-input>
+	</div>
+	<div class="test-section">
+		<ui5-list id="notificationList" class="notificationlist_test_page2auto" header-text="Notifications grouped">
+			<ui5-li-notification-group
+				id="nlgi1"
+				show-close
+				show-counter
+				title-text="Orders"
+				priority="High"
+			>
+				<ui5-li-notification
+					id="nli1"
+					show-close
+					title-text="New order #2201"
+					priority="High"
+				>
+					And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+					<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+					<span slot="footnotes">Office Notifications</span>
+					<span slot="footnotes">3 Days</span>
+					<ui5-notification-action id="acceptBtnInOverflow" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+					<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
+				</ui5-li-notification>
+				<ui5-li-notification
+					id="nli2"
+					show-close
+					title-text="New order #2202"
+					priority="High"
+				>
+					And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+					<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+					<span slot="footnotes">Office Notifications</span>
+					<span slot="footnotes">3 Days</span>
+					<ui5-notification-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				</ui5-li-notification>
+				<ui5-notification-action id="acceptBtnInOverflow2" icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
+				<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
+			</ui5-li-notification-group>
+			<ui5-li-notification-group
+				show-close
+				show-counter
+				title-text="Payments"
+				priority="High"
+			>
+				<ui5-li-notification
+					id="nli3"
+					show-close
+					wrapping-type="Normal"
+					title-text="New payment #2900"
+					priority="High"
+				>
+					And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+					<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+					<span slot="footnotes">Office Notifications</span>
+					<span slot="footnotes">3 Days</span>
+					<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+					<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
+				</ui5-li-notification>
+				<ui5-li-notification
+					id="nli4"
+					busy
+					wrapping-type="Normal"
+					show-close
+					title-text="New payment #2901"
+					priority="High"
+				>
+					And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+					<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+					<span slot="footnotes">Office Notifications</span>
+					<span slot="footnotes">3 Days</span>
+					<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				</ui5-li-notification>
+			</ui5-li-notification-group>
+			<ui5-li-notification-group
+				id="nlgi3"
+				show-close
+				show-counter
+				title-text="Collapsed"
+				priority="High"
+				collapsed
+			>
+			<ui5-li-notification
+				id="nli5"
+				wrapping-type="Normal"
+				show-close
+				title-text="New payment #2900"
+				priority="High"
+			>
+				And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+				<span slot="footnotes">Office Notifications</span>
+				<span slot="footnotes">3 Days</span>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
+			</ui5-li-notification>
+			<ui5-notification-action icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
+			<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
+		</ui5-li-notification-group>
+		</ui5-list>
+	</div>
+	<script>
+		notificationList.addEventListener("ui5-itemClick", function(event) {
+			clickInput.value = event.detail.item.titleText;
+		});
+		notificationList.addEventListener("ui5-itemClose", function(event) {
+			closeInput.value = event.detail.item.titleText;
+		});
+		notificationList.addEventListener("ui5-itemToggle", function(event) {
+			toggleInput.value = event.detail.item.titleText;
+		});
+		var counter = 0;
+		acceptBtn.addEventListener("ui5-click", function(event) {
+			customActionInput.value = ++counter;
+		});
+		acceptBtnInOverflow.addEventListener("ui5-click", function(event) {
+			customActionInput.value = ++counter;
+		});
+		acceptBtnInOverflow2.addEventListener("ui5-click", function(event) {
+			customActionInput.value = ++counter;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Page.html.b165889d.css">
+</head>
+<body class="page1auto">
+	<ui5-page id="page" background-design="List" show-footer>
+		<ui5-bar id="header" design="Header" slot="header">
+			<ui5-button icon="home" tooltip="Go home" slot="startContent"></ui5-button>
+			<ui5-label>Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
+		<div id="content">
+			<div class="page2auto">
+				<ui5-button id="toggleVisibility">Toggle visibility</ui5-button>
+				<ui5-button id="toggleFloating">Toggle floating footer</ui5-button>
+				<ui5-button id="toggleScrolling">Toggle scrolling</ui5-button>
+			</div>
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+			</span>
+		</div>
+		<ui5-bar id="footer" slot="footer" 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>
+	</ui5-page>
+	<script>
+		var page = document.getElementById("page");
+		var footer = document.getElementById("footer");
+		document.getElementById("toggleVisibility").addEventListener("click", function(){
+			page.hideFooter = !page.hideFooter;
+		});
+		document.getElementById("toggleFloating").addEventListener("click", function(){
+			page.floatingFooter = !page.floatingFooter;
+			page.floatingFooter ? footer.design = "FloatingFooter" : footer.design = "Footer";
+		});
+		document.getElementById("toggleScrolling").addEventListener("click", function(){
+			page.disableScrolling = !page.disableScrolling;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class="productswitch1auto">
+<head>
+	<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>ui5-product-switch</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.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/ProductSwitch.html.6253dac2.css">
+</head>
+<body class="productswitch2auto">
+	<ui5-product-switch id="productSwitchThreeColumn">
+		<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
+	</ui5-product-switch>
+	<ui5-product-switch id="productSwitchFourColumn">
+		<ui5-product-switch-item id="firstItem" title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
+		<ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
+	</ui5-product-switch>
+	<ui5-input id="eventTest"></ui5-input>
+	<script>
+		var oProductSwitch = document.getElementById("firstItem");
+		var oInput = document.getElementById("eventTest");
+		var pressCount = 0;
+		oProductSwitch.addEventListener("click", function (oEvent) {
+			pressCount += 1;
+			oInput.value = pressCount;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="productswitchitem1auto">
+<head>
+	<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>ui5-product-switch-item</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.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/ProductSwitchItem.html.51a96d28.css">
+</head>
+<body class="productswitchitem2auto">
+	<ui5-product-switch-item id="productSwitchItem" title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
+</body>
+</html>