npm - @ui5/webcomponents-fiori - Versions diffs - 1.14.3 → 1.14.4 - Mend

@ui5/webcomponents-fiori 1.14.3 → 1.14.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 (122) hide show

package/dist/test/pages/F6TestPage.html DELETED Viewed

@@ -1,475 +0,0 @@
-<!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>F6 Navigation</title>
-	<script>
-		// delete Document.prototype.adoptedStyleSheets
-	</script>
-  <script type="module" crossorigin src="/assets/bundle.esm.c3c08cd8.js"></script>
-</head>
-<body>
-	<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"></ui5-shellbar-item>
-		<ui5-shellbar-item icon="accept" text="Hello World!" title="Approve"></ui5-shellbar-item>
-		<ui5-shellbar-item 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>
-	<div data-sap-ui-fastnavgroup="true">
-		<ui5-button id="div-button">1</ui5-button>
-		<ui5-button>2</ui5-button>
-		<ui5-button>3</ui5-button>
-		<ui5-button>4</ui5-button>
-	</div>
-	<div>
-		Ensure that typing inside ui5-input works when F6 navigation is enabled
-		<br />
-		<ui5-input id="testInput"></ui5-input>
-	</div>
-	<ui5-panel id="panel-expandable" accessible-role="Complementary" header-text="Both expandable and expanded"
-		header-level="H4">
-		<!-- Content -->
-		<ui5-title>Lorem ipsum!</ui5-title>
-		<ui5-button id="panel-button">1</ui5-button>
-		<ui5-button>2</ui5-button>
-		<ui5-button>3</ui5-button>
-		<ui5-button>4</ui5-button>
-		<ui5-button>5</ui5-button>
-		<ui5-label wrapping-type="Normal">
-			<span>
-				Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui
-				illud zril
-				nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal
-				dolorum ut.
-				Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora
-				rationibus,
-				soluta incorrupte ex his.
-				Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere
-				iracundia
-				democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea,
-				est velit
-				elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te
-				ius.
-				Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco
-				epicurei
-				no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim
-				stet
-				dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in,
-				regione
-				persecuti cotidieque id eos, id ius omnesque vituperata.
-				Pri ex impedit percipit consulatu. Ius iudico feugiat instructior an. Iusto putant eum eu, ubique
-				splendide pri ad,
-				cu qui salutandi assentior percipitur. At esse ceteros salutandi ius. Te dicam reprehendunt nec, ea
-				discere ponderum
-				sensibus duo.
-				Vis cu commodo definiebas, postea dissentias ne vim. Modo homero eos ad. Ut vix equidem temporibus. At
-				duo audire
-				volumus, id volumus rationibus vim. Sit ne diam volumus. Augue labitur mel cu, an eam omnis causae
-				hendrerit.
-			</span>
-		</ui5-label>
-	</ui5-panel>
-	<br><br>
-	<ui5-table class="demo-table" id="testRowClick">
-		<ui5-table-column id="column-1" slot="columns">
-			<ui5-label>City</ui5-label>
-		</ui5-table-column>
-		<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier">
-			<ui5-label>Supplier</ui5-label>
-		</ui5-table-column>
-		<ui5-table-column id="column-3" slot="columns" min-width="500" popin-text="Country" demand-popin>
-			<div class="column-content">
-				<ui5-label>Country</ui5-label>
-			</div>
-		</ui5-table-column>
-		<ui5-table-row data-city="Dublin">
-			<ui5-table-cell><span id="testRowClickCell1">Dublin</span></ui5-table-cell>
-			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
-			<ui5-table-cell><span>USA</span></ui5-table-cell>
-		</ui5-table-row>
-		<ui5-table-row data-city="Sofia">
-			<ui5-table-cell>
-				<ui5-label for="myInput">Sofia</ui5-label>
-			</ui5-table-cell>
-			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
-			<ui5-table-cell><span>USA</span></ui5-table-cell>
-		</ui5-table-row>
-		<ui5-table-row data-city="London">
-			<ui5-table-cell>
-				<div id="testRowClickCell2">London</div>
-			</ui5-table-cell>
-			<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
-			<ui5-table-cell><span>USA</span></ui5-table-cell>
-		</ui5-table-row>
-	</ui5-table>
-	<br><br>
-	<ui5-list header-text="API: ListItem type='Active/Inactive/Detail'" mode="SingleSelect">
-		<ui5-li id="list-item">Active item - press</ui5-li>
-		<ui5-li>Active item - press</ui5-li>
-		<ui5-li selected type="Inactive">Inactive item</ui5-li>
-		<ui5-li type="Inactive">Inactive item</ui5-li>
-		<ui5-li type="Detail">Detail item</ui5-li>
-	</ui5-list>
-	<br><br>
-	<ui5-tabcontainer>
-		<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125" id="tab">
-		</ui5-tab>
-		<ui5-tab-separator></ui5-tab-separator>
-		<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
-		</ui5-tab>
-		<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
-		</ui5-tab>
-		<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
-		</ui5-tab>
-		<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
-		</ui5-tab>
-		<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
-		</ui5-tab>
-		<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
-		</ui5-tab>
-	</ui5-tabcontainer>
-	<ui5-flexible-column-layout id="fcl" style="height: 600px;">
-			<!-- start column -->
-			<div class="col" slot="startColumn">
-				<ui5-list id="col1list" header-text="Products (13)" mode="SingleSelect">
-					<ui5-li id="fcl-li" description=HT-2001 icon='slim-arrow-right' icon-end additional-text="47.00 EUR">10 inch Portable DVD</ui5-li>
-					<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="249.00 EUR">7 inch WidescreenPortable DVD Player w MP3</ui5-li>
-					<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="947.00 EUR">Astro Laptop 1516</ui5-li>
-					<ui5-li description=HT-1251 icon='slim-arrow-right' icon-end additional-text="647.00 EUR">Astro Phone 6</ui5-li>
-					<ui5-li description=HT-1252 icon='slim-arrow-right' icon-end additional-text="27.99 EUR">Audio/Video Cable Kit - 4m</ui5-li>
-					<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="447.90 EUR">Beam Breaker B-1</ui5-li>
-					<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="647.50 EUR">Beam Breaker B-2</ui5-li>
-					<ui5-li description=HT-6001 icon='slim-arrow-right' icon-end additional-text="847.80 EUR">Beam Breaker B-3</ui5-li>
-					<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="1,250.00 EUR">Beam Breaker B-4</ui5-li>
-					<ui5-li description=HT-8001 icon='slim-arrow-right' icon-end additional-text="1,288.00 EUR">Camcorder View</ui5-li>
-					<ui5-li description=HT-2001 icon='slim-arrow-right' icon-end additional-text="996.00 EUR">Benda Laptop 1408</ui5-li>
-					<ui5-li description=HT-0003 icon='slim-arrow-right' icon-end additional-text="147.00 EUR">Cepat Tablet 10.5</ui5-li>
-					<ui5-li description=HT-1001 icon='slim-arrow-right' icon-end additional-text="87.90 EUR">Gladiator MX</ui5-li>
-				</ui5-list>
-			</div>
-			<!-- mid column -->
-			<div class="col" slot="midColumn">
-				<div class="colHeader">
-					<ui5-title id="col2title" level="H2" style="min-width: 1px;"></ui5-title>
-					<div class="colSubHeader">
-						<ui5-button design="Emphasized">Edit</ui5-button>
-						<ui5-button design="Transparent" icon="add"></ui5-button>
-						<ui5-button id="fullscreenMidColumn" design="Transparent" icon="full-screen"></ui5-button>
-						<ui5-button id="closeMidColumn" icon="decline" design="Transparent"></ui5-button>
-					</div>
-				</div>
-				<br>
-				<section style="padding: 1rem 1rem;">
-					<ui5-title level="H3">General Information</ui5-title>
-					<br>
-					<div style="display:flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap">
-						<div style="display:flex; flex-direction: row; align-items: center;">
-							<ui5-avatar id="avatar" icon="laptop" color-scheme="Accent5" size="XL" style="margin: 0 1rem; min-width: 7rem;">
-							</ui5-avatar>
-							<div>
-								<div class="productInfo">
-									<ui5-title level="H5">Product:</ui5-title>
-									<ui5-title level="H5" id="lblName"></ui5-title>
-								</div>
-								<br>
-								<div class="productInfo">
-									<ui5-title level="H5">Description:</ui5-title>
-									<ui5-title level="H5" id="lblDesc"></ui5-title>
-								</div>
-								<br>
-								<div class="productInfo">
-									<ui5-title level="H5">Supplier:</ui5-title>
-									<ui5-title level="H5" id="lblSupplier"><b>Titanium</b></ui5-title>
-								</div>
-							</div>
-						</div>
-						<div class="productInfo" style="align-self: start">
-							<ui5-title level="H5">Rating:</ui5-title>
-							<ui5-rating-indicator
-								id="productRating"
-								accessible-name="Hello World"
-								value="3.5"
-							></ui5-rating-indicator>
-						</div>
-						<span></span>
-					</div>
-					<br><br><br>
-					<ui5-title level="H3">Suppliers</ui5-title>
-					<br>
-					<ui5-list id="col2list">
-						<ui5-li icon='slim-arrow-right' icon-end>Titanium</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Technocom</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end> Red Point Stores</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end> Very Best Screens</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Smartcards</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Alpha Printers</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Printer for All</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Oxynum</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Fasttech</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Ultrasonic United</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Speaker Experts</ui5-li>
-						<ui5-li icon='slim-arrow-right' icon-end>Brainsoft</ui5-li>
-					</ui5-list>
-				</section>
-			</div>
-			<!-- end column -->
-			<div class="col" slot="endColumn">
-				<div class="colHeader">
-					<ui5-title id="col3title" style="min-width: 1px;"></ui5-title>
-					<div class="colSubHeader">
-						<ui5-button design="Emphasized">Edit</ui5-button>
-						<ui5-button design="Transparent" icon="add"></ui5-button>
-						<ui5-button id="fullscreenEndColumn" design="Transparent" icon="full-screen"></ui5-button>
-						<ui5-button id="closeEndColumn" icon="decline" design="Transparent"></ui5-button>
-					</div>
-				</div>
-				<br><br>
-				<ui5-tabcontainer id="tabContainer1" fixed collapsed>
-					<ui5-tab text="Products" additional-text="125">
-					</ui5-tab>
-					<ui5-tab-separator></ui5-tab-separator>
-					<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">
-					</ui5-tab>
-					<ui5-tab icon="sap-icon://menu" text="Monitors" selected design="Critical" additional-text="45">
-					</ui5-tab>
-					<ui5-tab icon="sap-icon://menu2" text="Keyboards" design="Negative" additional-text="15">
-					</ui5-tab>
-					<ui5-tab icon="sap-icon://menu2" disabled text="Disabled" design="Negative" additional-text="40">
-					</ui5-tab>
-					<ui5-tab icon="sap-icon://menu2" text="Neutral" design="Neutral" additional-text="40">
-					</ui5-tab>
-					<ui5-tab icon="sap-icon://menu2" text="Default" additional-text="40">
-					</ui5-tab>
-				</ui5-tabcontainer>
-				<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
-					<p>
-						<ui5-title level="H5" wrapping-type="Normal">"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.
-						</ui5-title>
-					</p>
-					<p>
-						<ui5-title level="H5" wrapping-type="Normal">"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.
-						</ui5-title>
-					</p>
-					<p>
-						<ui5-title level="H5" wrapping-type="Normal">"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.
-						</ui5-title>
-					</p>
-				</section>
-			</div>
-		</ui5-flexible-column-layout>
-		<script>
-			var midFullScreen = false;
-			var endFullScreen = false;
-			var avatars = [
-				"camera",
-				"laptop",
-				"desktop-mobile",
-				"responsive",
-				"print",
-				"iphone",
-				"ipad",
-			];
-			var avatarsBG = [
-				"Accent1",
-				"Accent2",
-				"Accent3",
-				"Accent4",
-				"Accent5",
-				"Accent6",
-				"Accent7",
-				"Accent8",
-				"Accent9",
-				"Accent10",
-			];
-			var suppliers = [
-				"Titanium", "Technocom", " Red Point Stores", " Very Best Screens", "Smartcards", "Alpha Printers",
-				"Printer for All", "Oxynum", "Fasttech", "Ultrasonic United", "Speaker Experts", "Brainsoft"
-			];
-			function updateProductInfo(item) {
-				avatar.icon = avatars[getRandomInt(6)];
-				avatar.backgroundColor = avatarsBG[getRandomInt(9) + 1];
-				productRating.value = getRandomInt(4) + 1;
-				col2title.textContent = item.textContent;
-				lblName.innerHTML = "<b>" + item.textContent + "</b>";
-				lblDesc.innerHTML = "<b>" + item.description + "</b>";
-				lblSupplier.innerHTML = "<b>" + suppliers[getRandomInt(11)] + "</b>";
-			}
-			function updateDetailInfo(item) {
-				col3title.textContent = item.textContent;
-			}
-			function nextLayout(target) {
-				var layout = fcl.layout;
-				if (target === "col1") {
-					exitFullScreen()
-					return "TwoColumnsMidExpanded";
-				}
-				if (target === "col2") {
-					if (midFullScreen) {
-						enterFullScreen();
-						return "EndColumnFullScreen";
-					}
-					exitFullScreen();
-					return "ThreeColumnsMidExpanded";
-				}
-				if (target === "col2close") {
-					if (midFullScreen) {
-						enterFullScreen();
-					} else {
-						exitFullScreen();
-					}
-					return "OneColumn";
-				}
-				if (target === "col3close") {
-					if (fcl.media === "phone") {
-						endFullScreen = true;
-					}
-					if (endFullScreen) {
-						enterFullScreen();
-						return "MidColumnFullScreen";
-					}
-					exitFullScreen()
-					return "ThreeColumnsMidExpandedEndHidden";
-				}
-				if (target === "col2fullscreen") {
-					if (!midFullScreen) {
-						enterFullScreen();
-						return "MidColumnFullScreen";
-					}
-					exitFullScreen();
-					return "ThreeColumnsMidExpandedEndHidden";
-				}
-				if (target === "col3fullscreen") {
-					if (!endFullScreen) {
-						enterFullScreen();
-						return "EndColumnFullScreen";
-					}
-					exitFullScreen();
-					return "ThreeColumnsEndExpanded";
-				}
-			}
-			function getRandomInt(max) {
-				return Math.floor(Math.random() * Math.floor(max));
-			}
-			function enterFullScreen() {
-				endFullScreen = true;
-				midFullScreen = true;
-				fullscreenMidColumn.icon = "exit-full-screen";
-				fullscreenEndColumn.icon = "exit-full-screen";
-			}
-			function exitFullScreen() {
-				endFullScreen = false;
-				midFullScreen = false;
-				fullscreenMidColumn.icon = "full-screen";
-				fullscreenEndColumn.icon = "full-screen";
-			}
-			// Event handlers
-			col1list.addEventListener("ui5-item-click", function (e) {
-				updateProductInfo(e.detail.item);
-				fcl.layout = nextLayout("col1");
-			});
-			col2list.addEventListener("ui5-item-click", function (e) {
-				updateDetailInfo(e.detail.item);
-				fcl.layout = nextLayout("col2");
-			});
-			closeMidColumn.addEventListener("click", function (e) {
-				fcl.layout = nextLayout("col2close");
-			});
-			closeEndColumn.addEventListener("click", function (e) {
-				fcl.layout = nextLayout("col3close");
-			});
-			fullscreenMidColumn.addEventListener("click", function (e) {
-				fcl.layout = nextLayout("col2fullscreen");
-			});
-			fullscreenEndColumn.addEventListener("click", function (e) {
-				fcl.layout = nextLayout("col3fullscreen");
-			});
-		</script>
-		<div data-sap-ui-fastnavgroup="true">
-			<ui5-button id="div-end-button">1</ui5-button>
-			<ui5-button>2</ui5-button>
-			<ui5-button>3</ui5-button>
-			<ui5-button>4</ui5-button>
-		</div>
-	<ui5-button id="reset-focus">Reset Focus</ui5-button>
-</body>
-</html>

package/dist/test/pages/F6TestPage_2.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!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>F6 Navigation</title>
-	<script>
-		// delete Document.prototype.adoptedStyleSheets
-	</script>
-  <script type="module" crossorigin src="/assets/bundle.esm.c3c08cd8.js"></script>
-</head>
-<body>
-	<ui5-button id="insert_btn">Click me before testing</ui5-button>
-	<ui5-panel id="panel">
-		<ui5-button id="content-btn" data-sap-ui-fastnavgroup="true">Content button</ui5-button>
-		<ui5-button id="header-btn" data-sap-ui-fastnavgroup="true" slot="header">Header button</ui5-button>
-	</ui5-panel>
-	<script>
-		const insertBtn = document.getElementById("insert_btn");
-		const panel = document.getElementById("panel");
-		insertBtn.addEventListener("click", () => {
-			const btn = document.createElement("button");
-			const headerSlot = panel.shadowRoot.querySelector("slot[name='header']");
-			btn.setAttribute("data-sap-ui-fastnavgroup", "true");
-			btn.id = "template-btn";
-			btn.innerText = "Native button";
-			headerSlot.after(btn);
-		});
-	</script>
-</body>
-</html>