From 7df6af317da8b5b903172e94710ea3aa597eee3c Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 16 Apr 2020 15:50:22 +0300
Subject: [PATCH] POC: create custom tab

---
 packages/main/src/Tab.js                   | 11 +++++++++++
 packages/main/src/TabContainer.hbs         |  4 +++-
 packages/main/src/TabContainer.js          | 16 ++++++++++++++++
 packages/main/test/pages/TabContainer.html | 13 +++++++++----
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js
index 10cefe13e1d2..64943c93933d 100644
--- a/packages/main/src/Tab.js
+++ b/packages/main/src/Tab.js
@@ -26,6 +26,17 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 
+		/**
+		 * If set this HTML will be used to render the tab inside <code>ui5-tabcontainer</code>
+		 * @private
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.7
+		 */
+		customTabHtml: {
+			type: String,
+		},
+
 		/**
 		 * The text to be displayed for the item.
 		 * @type {string}
diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index 8409495aa86d..180d091c8d2c 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -25,7 +25,9 @@
 							?disabled="{{this.disabled}}"
 							aria-labelledby="{{this.ariaLabelledBy}}"
 						>
-							{{#if this.isInline}}
+							{{#if this.isCustom}}
+								{{{ this.customHtml }}}
+							{{else if this.isInline}}
 								{{> inlineTab}}
 							{{else}}
 								{{> standardTab}}
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
index 90f288db8c23..7fa9598bbe4f 100644
--- a/packages/main/src/TabContainer.js
+++ b/packages/main/src/TabContainer.js
@@ -253,6 +253,8 @@ class TabContainer extends UI5Element {
 
 			return {
 				item,
+				isCustom: item.customTabHtml.length > 0,
+				customHtml: this.getHTML(item.customTabHtml),
 				isInline: this.tabLayout === TabLayout.Inline,
 				isMixedModeTab: !item.icon && this.mixedMode,
 				isTextOnlyTab: !item.icon && !this.mixedMode,
@@ -276,6 +278,20 @@ class TabContainer extends UI5Element {
 		}, this);
 	}
 
+	getHTML(htmlToCreate) {
+		const parser = this.constructor.getParser();
+		const doc = parser.parseFromString(htmlToCreate, "text/html");
+		return doc.body;
+	}
+
+	static getParser() {
+		if (!this.parser) {
+			this.parser = new DOMParser();
+		}
+
+		return this.parser;
+	}
+
 	onAfterRendering() {
 		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
 		this._updateScrolling();
diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
index bcb2b53a1856..ef3381e722d1 100644
--- a/packages/main/test/pages/TabContainer.html
+++ b/packages/main/test/pages/TabContainer.html
@@ -58,9 +58,9 @@ <h2>Tab Container</h2>
 			<ui5-tab text="Products" additional-text="125">
 			</ui5-tab>
 			<ui5-tab-separator></ui5-tab-separator>
-			<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
+			<ui5-tab id="custom-tab" icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">
 			</ui5-tab>
-			<ui5-tab icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
+			<ui5-tab id="custom-tab1" icon="sap-icon://menu" text="Monitors" selected semantic-color="Critical" additional-text="45">
 			</ui5-tab>
 			<ui5-tab icon="sap-icon://menu2" text="Keyboards" semantic-color="Negative" additional-text="15">
 			</ui5-tab>
@@ -73,7 +73,12 @@ <h2>Tab Container</h2>
 		</ui5-tabcontainer>
 	</section>
 
-	<section>
+	<script>
+		document.getElementById("custom-tab").customTabHtml = "<div>custom tab here</div>";
+		document.getElementById("custom-tab1").customTabHtml = "<div>another custom tab</div>";
+	</script>
+
+	<!-- <section>
 		<h2>Icon only</h2>
 		<ui5-tabcontainer show-overflow="true" id="tabContainerIconOnly">
 			<ui5-tab icon="sap-icon://card" selected>
@@ -367,6 +372,6 @@ <h3>TabContainer in Compact</h3>
 			result.innerHTML = event.detail.tab.text;
 			resultIdx.innerHTML = event.detail.tabIndex;
 		});
-	</script>
+	</script> -->
 </body>
 </html>
\ No newline at end of file