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

@@ -0,0 +1,348 @@
+<!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>Card</title>
+  <script type="module" crossorigin src="/assets/bundle.esm-6134bfc5.js"></script>
+  <link rel="stylesheet" href="/assets/Card-7c4d9a54.css">
+</head>
+<body class="card1auto">
+	<ui5-card id="card" class="myCard">
+		<ui5-card-header
+			id="cardHeader"
+			slot="header"
+			status="4 of 10"
+			title-text="Quick Links"
+			subtitle-text="Quick links sub title"
+			interactive>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
+			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+			<ui5-li icon="line-charts">Marketing plans</ui5-li>
+		</ui5-list>
+		<ui5-input id="field" value="0" class="myInput"></ui5-input>
+	</ui5-card>
+	<ui5-card id="card2" class="myCard">
+		<ui5-card-header
+			id="cardHeader2"
+			slot="header"
+			status="4 of 10"
+			title-text="Quick Links"
+			subtitle-text="Quick Links">
+			<ui5-icon name="group" slot="avatar"></ui5-icon>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="None">
+			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
+			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card id="card2a" class="myCard">
+		<ui5-card-header
+			id="cardHeader2a"
+			slot="header"
+			class="myCardHeader--ar-he-ch"
+			title-text="مرحبًا שלום"
+			subtitle-text="Quick Links">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2b" class="myCard">
+		<ui5-card-header
+			id="cardHeader2b"
+			slot="header"
+			title-text="Quick Links"
+			subtitle-text="Quick Links">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+			<ui5-button slot="action" design="Transparent">Some Action</ui5-button>
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2c" class="myCard">
+		<ui5-card-header
+			id="cardHeader2c"
+			slot="header"
+			title-text="Quick Links"
+			subtitle-text="Long long long long long long long long subtitle">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+			<ui5-button slot="action" design="Transparent">Some Action</ui5-button>
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2d" class="myCard">
+		<ui5-card-header
+			id="cardHeader2d"
+			slot="header"
+			status="4 of 10"
+			title-text="Quick Links">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2e" class="myCard">
+		<ui5-card-header
+			id="cardHeader2e"
+			slot="header"
+			status="4 of 10"
+			title-text="Long Long Long Long Long Long Title">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2f" class="myCard">
+		<ui5-card-header
+			id="cardHeader2f"
+			slot="header"
+			status="4 of 10"
+			title-text="Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Title"
+			subtitle-text="Long long long long long long long long long long long long long subtitle">
+			<img src="/assets/John Miller-fc9d0d73.png" alt="John Miller" slot="avatar">
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2g" class="myCard">
+		<ui5-card-header
+			id="cardHeader2g"
+			slot="header"
+			status="4 of 10"
+			title-text="Quick Links">
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card2h" class="myCard">
+		<ui5-card-header
+			id="cardHeader2h"
+			slot="header"
+			status="4 of 10"
+			title-text="Quick Links"
+			subtitle-text="Subtitle">
+			<ui5-button slot="action" design="Transparent" icon="overflow"></ui5-button>
+		</ui5-card-header>
+		<div class="myTextContent">
+			<span>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel aliquam augue.
+			</span>
+		</div>
+	</ui5-card>
+	<ui5-card id="card3">
+		<ui5-card-header
+			id="cardHeader3"
+			slot="header"
+			title-text="Quick Links"
+			subtitle-text="Quick Links"
+			interactive>
+			<ui5-button slot="action">Act</ui5-button>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
+			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card class="myCard" id="actionCard">
+		<ui5-card-header
+			id="actionCardHeader"
+			slot="header"
+			title-text="Linked Activities (5)"
+			status="4 of 10">
+			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card class="myCard">
+		<ui5-card-header
+			slot="header"
+			title-text="Linked Activities (5)"
+			subtitle-text="Quick Links">
+			<ui5-icon name="group" slot="avatar"></ui5-icon>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
+			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card id="card4">
+		<ui5-card-header
+			id="cardHeader4"
+			slot="header"
+			title-text="Quick Links"
+			subtitle-text="Quick Links">
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
+			<ui5-li icon="opportunity">Segmentation Models</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card class="myCard" id="actionCard2">
+		<ui5-card-header
+			id="actionCardHeader2"
+			slot="header"
+			title-text="Linked Activities (5)"
+			status="4 of 10">
+			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card class="myCard">
+		<ui5-card-header
+			slot="header"
+			title-text="Linked activities (5)"
+			subtitle-text="Quick Links">
+			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card>
+		<ui5-card-header
+			slot="header"
+			title-text="Linked Activities (5)">
+			<ui5-icon name="group" slot="avatar"></ui5-icon>
+			<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
+		</ui5-card-header>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card id="textAreaAriaLabel" class="myCard">
+		<ui5-card-header
+			slot="header"
+			id="header"
+			status="4 of 10"
+			title-text="Linked Activities (5)"
+			subtitle-text="Quick Links">
+		</ui5-card-header>
+	</ui5-card>
+	<br>
+	<ui5-label id="infoText">info text</ui5-label>
+	<ui5-card id="textAreaAriaLabelledBy">
+		<ui5-card-header
+			slot="header"
+			id="header2"
+			title-text="New Jobs (5)"
+			subtitle-text="Find One">
+		</ui5-card-header>
+	</ui5-card>
+	<ui5-card id="textAreaAriaLabelledBy">
+		<div slot="header" id="header2" class="myHeader">
+			Test
+		</div>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card>
+		<ui5-list id="myList3" separators="Inner">
+			<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
+			<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
+		</ui5-list>
+	</ui5-card>
+	<ui5-card id="textCard" accessible-name="Internships">
+		<ui5-card-header
+			slot="header"
+			id="header4"
+			title-text="New Internships">
+		</ui5-card-header>
+	</ui5-card>
+	<ui5-card id="textCardRef" accessible-name="Internships" accessible-name-ref="cont">
+		<ui5-card-header
+			id="header5"
+			slot="header"
+			title-text="New Positions">
+		</ui5-card-header>
+		<div id="cont" class="myContent">I am the content</div>
+	</ui5-card>
+	<script>
+		function onClick(event) {
+			console.log(event);
+			field.value = parseInt(field.value) + 1;
+		}
+		[cardHeader, cardHeader2, cardHeader3].forEach(function (el) {
+			el.addEventListener("ui5-click", onClick);
+		});
+	</script>
+</body>
+</html>