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

@ui5/webcomponents-fiori 1.9.2 → 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 (142) hide show

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

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Shell Bar</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/ShellBar.html.a08df365.css">
+</head>
+<body class="shellbar1auto">
+	<ui5-shellbar
+		class="shellbar-example"
+		primary-title="Product Title"
+		secondary-title="Second Title"
+	>
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+	</ui5-shellbar>
+	<ui5-shellbar
+		class="shellbar-example"
+		primary-title="Product Title"
+		secondary-title="Second Title"
+		show-co-pilot
+	>
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+	</ui5-shellbar>
+	<ui5-shellbar
+			class="shellbar-example"
+			primary-title="Product Title"
+			secondary-title="Second Title"
+			show-notifications
+			show-product-switch
+	>
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+	</ui5-shellbar>
+	<ui5-shellbar
+			class="shellbar-example"
+			primary-title="Custom Actions"
+			secondary-title="Second Title"
+			id="shellbarwithitems"
+	>
+		<ui5-shellbar-item icon="accelerated" text="Hello World!" title="Schedule" stable-dom-ref="schedule"></ui5-shellbar-item>
+		<ui5-shellbar-item id="accept" icon="accept" text="Hello World!" title="Approve" stable-dom-ref="accept"></ui5-shellbar-item>
+		<ui5-shellbar-item id="warning" icon="alert" text="Hello World!" title="Warning"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="discussion" text="Hello World!" count="42" title="42 Messages"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="error" text="Hello World!" title="Attention"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents" title="hello world"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents" title="Laptop"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents" title="Apple"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents" title="Sound"></ui5-shellbar-item>
+	</ui5-shellbar>
+	<ui5-input id="press-input3" class="shellbar3auto"></ui5-input>
+	<ui5-shellbar
+			class="shellbar-example"
+			secondary-title="No primary title"
+	></ui5-shellbar>
+	<ui5-shellbar
+		id="shellbarWithLogoClick"
+		class="shellbar-example"
+		data-ui5-static-stable="shellbarWithLogoClickStatic"
+		primary-title="SAP Labs Bulgaria"
+		show-notifications
+		show-product-switch
+	>
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+		<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+		<ui5-input slot="searchField" value-state="Error"></ui5-input>
+	</ui5-shellbar>
+	<ui5-shellbar
+			class="shellbar-example"
+			id="shellbar"
+			primary-title="Product Title"
+			secondary-title="Second title"
+			second-title="Second Title"
+			notifications-count="99+"
+			show-notifications
+			show-product-switch
+			show-co-pilot
+	>
+		<ui5-avatar slot="profile">
+			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+		</ui5-avatar>
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+		<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+		<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
+		<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+		<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+			<div slot="valueStateMessage">Instructions</div>
+		</ui5-input>
+		<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
+		<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
+		<ui5-li slot="menuItems" data-key="key3">Application 3</ui5-li>
+		<ui5-li slot="menuItems" data-key="key4">Application 4</ui5-li>
+		<ui5-li slot="menuItems" data-key="key5">Application 5</ui5-li>
+	</ui5-shellbar>
+	<section class="ui5-content-density-compact">
+		<h3>ShellBar in Compact</h3>
+		<div>
+			<ui5-shellbar id="shelbarCompact" primary-title="Product Title" show-notifications show-product-switch>
+				<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+				<ui5-shellbar-item icon="disconnected" text="Disconnect"></ui5-shellbar-item>
+				<ui5-shellbar-item icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+				<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
+				<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
+				<ui5-li slot="menuItems">Application 3</ui5-li>
+				<ui5-li slot="menuItems">Application 4</ui5-li>
+				<ui5-li slot="menuItems">Application 5</ui5-li>
+			</ui5-shellbar>
+		</div>
+	</section>
+	<ui5-popover id="popover" placement-type="Bottom">
+		<div class="popover-header">
+			<ui5-title class="shellbar2auto">John Doe</ui5-title>
+		</div>
+		<div class="popover-content">
+			<ui5-list separators="None" >
+				<ui5-li icon="sys-find">App Finder</ui5-li>
+				<ui5-li icon="settings">Settings</ui5-li>
+				<ui5-li icon="edit">Edit Home Page</ui5-li>
+				<ui5-li icon="sys-help">Help</ui5-li>
+				<ui5-li icon="log">Sign out</ui5-li>
+			</ui5-list>
+		</div>
+	</ui5-popover>
+	<ui5-popover id="app-list-popover" placement-type="Bottom">
+		<ui5-list separators="None">
+			<ui5-li>Application 1</ui5-li>
+			<ui5-li>Application 2</ui5-li>
+			<ui5-li>Application 3</ui5-li>
+			<ui5-li>Application 4</ui5-li>
+			<ui5-li>Application 5</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+	<ui5-popover id="custom-item-popover" placement-type="Bottom">
+		<ui5-list separators="None">
+			<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
+			<ui5-li type="Active">Custom Popover Item 2</ui5-li>
+		</ui5-list>
+	</ui5-popover>
+	<ui5-input id="press-input" class="shellbar3auto"></ui5-input>
+	<ui5-input id="press-data" class="shellbar3auto"></ui5-input>
+	<ui5-input id="press-input2" class="shellbar3auto"></ui5-input>
+	<ui5-shellbar>
+		<ui5-input id="mySearch" slot="searchField" show-suggestions value-state="Information">
+			<div slot="valueStateMessage">Instructions</div>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">1</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">2</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">3</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">4</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">5</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">6</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">7</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">8</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">9</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">10</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">11</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">12</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">13</ui5-li>
+			<ui5-li icon="world" description="travel the world" additional-text="explore" additional-text-state="Success">14</ui5-li>
+		</ui5-input>
+	</ui5-shellbar>
+	<ui5-title>Menu Items</ui5-title>
+	<ui5-label>value</ui5-label><ui5-input id="result-value"></ui5-input><br>
+	<ui5-label>key</ui5-label><ui5-input id="result-key"></ui5-input>
+	<ui5-shellbar
+			id="menuItemsSB"
+			primary-title="Menu Items"
+	>
+		<ui5-li id="mi-1" slot="menuItems" data-key="key1">App 1</ui5-li>
+		<ui5-li id="mi-2" slot="menuItems" data-key="key2">App 2</ui5-li>
+		<ui5-li id="mi-3" slot="menuItems" data-key="key3">App 3</ui5-li>
+		<ui5-li id="mi-4" slot="menuItems" data-key="key4">App 4</ui5-li>
+	</ui5-shellbar>
+	<ui5-shellbar primary-title="UI5 Web Components" id="test-invalidation">
+		<ui5-shellbar-item icon="discussion" count="2" id="test-invalidation-item"/>
+	</ui5-shellbar>
+	<ui5-toast id="wcToastTC">Custom Action Fired</ui5-toast>
+	<ui5-shellbar id="sbAcc">
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+	</ui5-shellbar>
+	<ui5-shellbar id="sbAccRoles">
+		<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+	</ui5-shellbar>
+	<script>
+		mySearch.addEventListener("suggestionItemSelect", function (event) {
+			console.log(event);
+		});
+		shellbar.addEventListener("ui5-profileClick", function(event) {
+			popover.showAt(event.detail.targetRef);
+			window["press-input"].value = "Profile";
+		});
+		shellbar.addEventListener("ui5-notificationsClick", function(event) {
+			window["press-input"].value = "Notifications";
+			event.preventDefault();
+			popover.showAt(event.detail.targetRef);
+		});
+		shellbar.addEventListener("ui5-productSwitchClick", function(event) {
+			event.preventDefault();
+			window["press-input"].value = "Product Switch";
+		});
+		shellbar.addEventListener("ui5-logoClick", function(event) {
+			window["press-input"].value = "Logo";
+		});
+		shellbarWithLogoClick.addEventListener("ui5-logoClick", function(event) {
+			window["press-input2"].value = shellbarWithLogoClick.primaryTitle.replace(/\s/g, "");
+		});
+		shellbar.addEventListener("ui5-coPilotClick", function(event) {
+			window["press-input"].value = "CoPilot";
+		});
+		shellbar.addEventListener("ui5-menuItemClick", function(event) {
+			var item = event.detail.item;
+			window["press-input"].value = item.textContent;
+			window["press-data"].value = item.getAttribute("data-key");
+		});
+		shelbarCompact.addEventListener("ui5-notificationsClick", function(event) {
+			event.preventDefault();
+			popover.showAt(event.detail.targetRef);
+		});
+		shelbarCompact.addEventListener("ui5-productSwitchClick", function(event) {
+			event.preventDefault();
+			popover.showAt(event.detail.targetRef);
+		});
+		menuItemsSB.addEventListener("ui5-menuItemClick", function(event) {
+			var item = event.detail.item;
+			window["result-value"].value = item.textContent;
+			window["result-key"].value = item.getAttribute("data-key");
+		});
+		Array.from(document.querySelectorAll("ui5-shellbar-item")).forEach(function(item) {
+			item.addEventListener("ui5-click", function(event) {
+				wcToastTC.show();
+			});
+		});
+		["disc", "call"].forEach(function(id) {
+			var currenItem = window[id][0] || window[id];
+			currenItem.addEventListener("ui5-click", function(event) {
+				event.preventDefault();
+				window["press-input"].value = event.target.id;
+				window["custom-item-popover"].showAt(event.detail.targetRef);
+			});
+		});
+		["accept", "warning"].forEach(function(id) {
+			var currenItem = window[id][0] || window[id];
+			currenItem.addEventListener("ui5-click", function(event) {
+				event.preventDefault();
+				window["press-input3"].value = event.target.id;
+			});
+		});
+		sbAcc.accessibilityTexts = {
+			profileButtonTitle: "John Dow",
+			logoTitle: "Custom logo title",
+		};
+		sbAccRoles.accessibilityRoles = {
+			logoRole: "link"
+		};
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Side Navigation</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/SideNavigation.html.835d71ad.css">
+</head>
+<body class="sidenavigation1auto">
+	<ui5-shellbar
+		primary-title="UI5 Web Components"
+		secondary-title="The Best Run SAP"
+		show-co-pilot
+	>
+		<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
+	</ui5-shellbar>
+	<div class="content">
+		<ui5-side-navigation id="sn1">
+			<!-- Header -->
+			<div slot="header" class="header">
+				<ui5-avatar size="L">
+					<img src="/assets/man_avatar_1.ffaff72e.png" />
+				</ui5-avatar>
+				<br>
+				<ui5-title>Willam Brown</ui5-title>
+				<ui5-label>UX expert</ui5-label>
+			</div>
+			<!-- Items -->
+			<ui5-side-navigation-item text="Home" icon="home" title="Home tooltip"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="People" expanded icon="group">
+				<ui5-side-navigation-sub-item text="From My Team" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Events.............................................................." icon="calendar" whole-item-toggleable>
+				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
+			<!-- Fixed Items -->
+			<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
+				<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
+			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
+		</ui5-side-navigation>
+		<div class="inner-content">
+			<div>
+				<ui5-label>selection-change event</ui5-label>
+				<ui5-input id="counter" value="0"></ui5-input>
+			</div>
+			<div>
+				<ui5-label>click event</ui5-label>
+				<ui5-input id="click-counter" value="0"></ui5-input>
+			</div>
+			<div>
+				<ui5-label>prevent selection-change event</ui5-label>
+				<ui5-checkbox id="prevent-selection"></ui5-checkbox>
+			</div>
+		</div>
+	</div>
+	<script>
+		var sideNavigation = document.querySelector("ui5-side-navigation"),
+			input = document.querySelector("#counter"),
+			clickInput = document.querySelector("#click-counter"),
+			preventDefaultCb = document.querySelector("#prevent-selection"),
+			preventSelectionChange = false,
+			counter = 0,
+			clickCounter = 0;
+		document.querySelector("#startButton").addEventListener("click", function (event) {
+			sideNavigation.collapsed = !sideNavigation.collapsed;
+		});
+		document.querySelectorAll("ui5-side-navigation-item").forEach(function (item) {
+			item.addEventListener("ui5-click", function (event) {
+				clickInput.value = ++clickCounter;
+			});
+		});
+		preventDefaultCb.addEventListener("ui5-change", function (event) {
+			preventSelectionChange = event.target.checked;
+		});
+		sideNavigation.addEventListener("ui5-selection-change", function (event) {
+			if (preventSelectionChange) {
+				event.preventDefault();
+				return;
+			}
+			input.value = ++counter;
+		});
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Timeline</title>
+	<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">
+		{
+			"theme": "sap_fiori_3",
+			"language": "EN"
+		}
+	</script>
+  <script type="module" crossorigin src="/assets/bundle.esm.6bf68e9d.js"></script>
+  <link rel="stylesheet" href="/assets/test/pages/Timeline.html.aa1e8833.css">
+</head>
+<body class="timeline1auto">
+<header class="header">
+	<h1 class="header-title">ui5-timeline</h1>
+</header>
+<section class="main">
+	<div class="samples">
+		<h2>Timeline within Card Vertical</h2>
+		<div class="sample">
+			<ui5-card>
+				<ui5-card-header slot="header" title-text="Upcoming Activities" subtitle-text="For Today">
+				</ui5-card-header>
+				<ui5-timeline layout="Vertical" accessible-name="vertical" id="timelineAccName">
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>
+					<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
+						<ui5-label>MR SOF02 2.43</ui5-label>
+					</ui5-timeline-item>
+					<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+						Online meeting
+					</ui5-timeline-item>
+				</ui5-timeline>
+			</ui5-card>
+		</div>
+		<h2>Timeline within Card Horizontal</h2>
+		<div class="sample">
+			<ui5-card>
+				<ui5-card-header slot="header" title-text="Upcoming Activities" subtitle-text="For Today">
+				</ui5-card-header>
+				<ui5-timeline layout="Horizontal">
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>
+					<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
+						<ui5-label>MR SOF02 2.43</ui5-label>
+					</ui5-timeline-item>
+					<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+						Online meeting
+					</ui5-timeline-item>
+				</ui5-timeline>
+			</ui5-card>
+		</div>
+	</div>
+	<div class="result">
+		<h2>Result</h2>
+		<span id="result"></span>
+	</div>
+</section>
+<section>
+	<h2>Basic Timeline - Vertical</h2>
+		<ui5-timeline layout="Vertical">
+			<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
+			<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
+				<ui5-label>MR SOF02 2.43</ui5-label>
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+		</ui5-timeline>
+</section>
+<section>
+	<h2>Basic Timeline - Horizontal</h2>
+		<ui5-timeline layout="Horizontal">
+			<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="calendar" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
+			<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
+				<ui5-label>MR SOF02 2.43</ui5-label>
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)"  name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)"  name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)"  name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
+				Online meeting
+			</ui5-timeline-item>
+		</ui5-timeline>
+</section>
+<script>
+	var result = document.getElementById("result");
+	document.getElementById("test-item").addEventListener("ui5-name-click", function (event) {
+		result.innerHTML = event.target.getAttribute("name");
+	});
+</script>
+</body>
+</html>