fix(framework): remove white spaces from hbs parser (#1613)

Author: fifoosid

packages/main/test/pages/Kitchen.html

@@ -328,7 +328,17 @@
 
 		<section style="display: flex;flex-direction: row; justify-content: space-around">
 			<ui5-datepicker style="width:40%" id="myDatepicker" value="Jun 06, 2018" popover-horizontal-align="Left"></ui5-datepicker>
-			<ui5-datepicker style="width:40%" id="myDatepicker"></ui5-datepicker>
+			<ui5-datepicker style="width:40%" id="myDatepicker1"></ui5-datepicker>
+		</section>
+
+		<section style="display: flex;flex-direction: row; justify-content: space-around">
+			<ui5-datetime-picker style="width:40%" id="myDateTimepicker" value="Jun 06, 2018" popover-horizontal-align="Left"></ui5-datetime-picker>
+			<ui5-datetime-picker style="width:40%" id="myDateTimepicker1"></ui5-datetime-picker>
+		</section>
+
+		<section style="display: flex;flex-direction: row; justify-content: space-around">
+			<ui5-duration-picker value="05:10:02" seconds-step="5" id="duration-picker6"></ui5-duration-picker> 
+			<ui5-timepicker></ui5-timepicker>
 		</section>
 
 		<section class="row">
@@ -381,6 +391,51 @@
 						<ui5-button>Gravity</ui5-button>
 					</ui5-tab>
 				</ui5-tabcontainer>
+
+
+				<ui5-tree id="tree" no-data-text="No data" mode="MultiSelect" style="margin-top: 5rem;">
+					<div slot="header" style="margin: .25rem; display: flex; align-items: center; justify-content: space-around;">
+						<ui5-title>My tree</ui5-title>
+						<div class="spacer"></div>
+						<ui5-select id="modeSelect">
+							<ui5-option>None</ui5-option>
+							<ui5-option>SingleSelect</ui5-option>
+							<ui5-option>SingleSelectBegin</ui5-option>
+							<ui5-option>SingleSelectEnd</ui5-option>
+							<ui5-option selected>MultiSelect</ui5-option>
+			
+							<ui5-option>Delete</ui5-option>
+						</ui5-select>
+						<ui5-button id="expandLevel1" icon="expand">Expand Level 1</ui5-button>
+						<ui5-button id="expandLevel2" icon="expand">Expand Level 2</ui5-button>
+						<ui5-button id="expandAll" icon="expand-all">Expand All</ui5-button>
+						<ui5-button id="collapseAll" icon="collapse-all">Collapse All</ui5-button>
+					</div>
+			
+					<ui5-tree-item expanded text="Tree 1" icon="paste" selected>
+						<ui5-tree-item expanded text="Tree 1.1" selected>
+							<ui5-tree-item text="Tree 1.1.1"></ui5-tree-item>
+							<ui5-tree-item text="Tree 1.1.2"></ui5-tree-item>
+						</ui5-tree-item>
+					</ui5-tree-item>
+			
+					<ui5-tree-item text="Tree 2" icon="copy">
+						<ui5-tree-item text="Tree 2.1">
+							<ui5-tree-item text="Tree 2.1.1"></ui5-tree-item>
+							<ui5-tree-item text="Tree 2.1.2">
+								<ui5-tree-item text="Tree 2.1.2.1"></ui5-tree-item>
+								<ui5-tree-item text="Tree 2.1.2.2"></ui5-tree-item>
+								<ui5-tree-item text="Tree 2.1.2.3"></ui5-tree-item>
+								<ui5-tree-item text="Tree 2.1.2.5"></ui5-tree-item>
+							</ui5-tree-item>
+						</ui5-tree-item>
+						<ui5-tree-item text="Tree 2.2"></ui5-tree-item>
+					</ui5-tree-item>
+			
+					<ui5-tree-item expanded text="Tree 3 (no icon)">
+					</ui5-tree-item>
+			
+				</ui5-tree>
 		</section>
 
 		<section class="row">

packages/main/test/pages/kitchen-scripts.js

@@ -182,4 +182,59 @@ document.addEventListener("DOMContentLoaded", function(event) {
 			input.appendChild(li);
 		});
 	});
+
+
+	// Tree
+	document.getElementById("tree").addEventListener("itemClick", function(event) {
+		console.log("Item clicked: ", event.detail.item);
+	});
+
+	document.getElementById("tree").addEventListener("itemToggle", function(event) {
+		console.log("Item toggled: ", event.detail.item);
+	});
+
+	document.getElementById("tree").addEventListener("itemDelete", function(event) {
+		console.log("Item delete button pressed: ", event.detail.item);
+		var node = event.detail.item;
+		node.parentElement.removeChild(node);
+	});
+
+	document.getElementById("tree").addEventListener("selectionChange", function(event) {
+		console.log("Selection changed from: ", event.detail.previouslySelectedItems, "to: ", event.detail.selectedItems);
+	});
+
+	document.getElementById("modeSelect").addEventListener("change", function(event) {
+		var newMode = event.detail.selectedOption.textContent;
+		var tree = document.getElementById("tree");
+		tree.mode = newMode;
+	});
+
+	document.getElementById("expandAll").addEventListener("click", function(event) {
+		var trees = Array.prototype.slice.call(document.getElementsByTagName("ui5-tree"));
+		var tree = document.getElementById("tree");
+		tree.walk(function(node) {
+			node.expanded = true;
+		});
+	});
+
+	document.getElementById("collapseAll").addEventListener("click", function(event) {
+		var tree = document.getElementById("tree");
+		tree.walk(function(node) {
+			node.expanded = false;
+		});
+	});
+
+	document.getElementById("expandLevel1").addEventListener("click", function(event) {
+		var tree = document.getElementById("tree");
+		tree.walk(function(node, level) {
+			node.expanded = (level === 1);
+		});
+	});
+
+	document.getElementById("expandLevel2").addEventListener("click", function(event) {
+		var tree = document.getElementById("tree");
+		tree.walk(function(node, level) {
+			node.expanded = (level <= 2);
+		});
+	});
 });

packages/tools/lib/hbs2lit/src/compiler.js

@@ -5,7 +5,7 @@ const includesReplacer = require("./includesReplacer");
 const svgProcessor = require("./svgProcessor");
 
 const removeWhiteSpaces = (source) => {
-	return source.replace(/\n+/g, "").replace(/\s+</g, "<").replace(/}}\s+{{/g, "}}{{");
+	return source.replace(/\n+/g, "").replace(/\s+</g, "<").replace(/}}\s+{{/g, "}}{{").replace(/\t+/g, " ");
 };
 
 const compileString = async (sInput, config) => {