feat(core): try to guess bs version (#2580)

* feat(core): try to guess bs version

* chore(build): fix typings

* fix(core): fix version guess function

demo/src/index-bs4.html

@@ -38,8 +38,6 @@
   </script>
 
   <script src="assets/js/prettify.min.js"></script>
-  <!-- Enable bootstrap 4 theme -->
-  <script>window.__theme = 'bs4';</script>
   <!-- script files will be inserted by html-webpack-plugin -->
 </body>
 </html>

demo/src/index.html

@@ -18,7 +18,6 @@
   <!--<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">-->
 
   <!--link to bootstrap.css-->
-  <!--<script>window.__theme = 'bs4';</script>-->
   <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">-->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/style.css">

src/utils/ng2-bootstrap-config.ts

@@ -1,5 +1,38 @@
 import { window } from './facade/browser';
 
+let guessedVersion: 'bs3' | 'bs4';
+
+function _guessBsVersion(): 'bs3' | 'bs4' {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  const spanEl = document.createElement('span');
+  spanEl.innerText = 'test bs version';
+  document.body.appendChild(spanEl);
+  spanEl.classList.add('d-none');
+  const rect = spanEl.getBoundingClientRect();
+  document.body.removeChild(spanEl);
+  if (!rect) {
+    return 'bs3';
+  }
+
+  return rect.top === 0 ? 'bs4' : 'bs3';
+}
+
+// todo: in ngx-bootstrap, bs4 will became a default one
 export function isBs3(): boolean {
+  if (typeof window === 'undefined') {
+    return true;
+  }
+
+  if (typeof window.__theme === 'undefined') {
+    if (guessedVersion) {
+      return guessedVersion === 'bs3';
+    }
+    guessedVersion = _guessBsVersion();
+
+    return guessedVersion === 'bs3';
+  }
+
   return window.__theme !== 'bs4';
 }