From 41282164448b268ad5fc37675ca7a969df01d0e9 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Wed, 23 Sep 2020 13:54:14 +0300
Subject: [PATCH] feat(framework): Limited support for campact size on IE
 (#2230)

---
 packages/base/src/UI5Element.js              |  2 +-
 packages/base/src/theming/CSSVarsPonyfill.js | 24 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 165e9edbd827..2084c92b215a 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -45,6 +45,7 @@ const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
 class UI5Element extends HTMLElement {
 	constructor() {
 		super();
+		this._propertyChangeListeners = new Set();
 		this._initializeState();
 		this._upgradeAllProperties();
 		this._initializeContainers();
@@ -59,7 +60,6 @@ class UI5Element extends HTMLElement {
 		this._domRefReadyPromise._deferredResolve = deferredResolve;
 
 		this._monitoredChildProps = new Map();
-		this._propertyChangeListeners = new Set();
 		this._shouldInvalidateParent = false;
 	}
 
diff --git a/packages/base/src/theming/CSSVarsPonyfill.js b/packages/base/src/theming/CSSVarsPonyfill.js
index bfc86a293070..eba588f8d655 100644
--- a/packages/base/src/theming/CSSVarsPonyfill.js
+++ b/packages/base/src/theming/CSSVarsPonyfill.js
@@ -7,6 +7,7 @@ const runPonyfill = () => {
 
 	window.CSSVarsPonyfill.cssVars({
 		rootElement: document.head,
+		variables: isCompact() ? getCompactModeVars() : {},
 		silent: true,
 	});
 };
@@ -17,6 +18,29 @@ const schedulePonyfill = () => {
 	}
 };
 
+const isCompact = () => {
+	const b = document.body;
+	return b.hasAttribute("data-ui5-compact-size") || b.classList.contains("ui5-content-density-compact") || b.classList.contains("sapUiSizeCompact");
+};
+
+const getCompactModeVars = () => {
+	const compactVars = {};
+	[...document.querySelectorAll(`[data-ui5-theme-properties]`)].forEach(el => {
+		const cssContent = el.textContent.replace("\n", "");
+		let match;
+		const regExp = new RegExp("data-ui5-compact-size[^{]*{(.*?)}", "g");
+		while ((match = regExp.exec(cssContent)) !== null) { // eslint-disable-line
+			const compactCSS = match[1];
+			compactCSS.split(";").forEach(declaration => {
+				const pair = declaration.split(":");
+				compactVars[pair[0].trim()] = pair[1].trim();
+			});
+		}
+	});
+
+	return compactVars;
+};
+
 export {
 	ponyfillNeeded,
 	runPonyfill,