[FIX] TypeScript Typings + Fix SASS version number, see twbs/bootstra…

…p#37425

package.json

@@ -29,6 +29,7 @@
     },
     "devDependencies": {
         "esbuild": "^0.15.13",
-        "esbuild-sass-plugin": "^2.4.0"
+        "esbuild-sass-plugin": "^2.4.0",
+        "sass": ">1.40 <1.56"
     }
 }

resources/ts/components/bootstrap.ts

@@ -11,7 +11,7 @@ function invokeBootstrapDropdown(element)
         if (element === event.target || element.contains(event.target)) {
             event.preventDefault();
 
-            let instance = Bootstrap.Dropdown.getOrCreateInstance(element, {
+            let instance = window['Bootstrap'].Dropdown.getOrCreateInstance(element, {
                 autoClose: true
             });
 
@@ -22,7 +22,7 @@ function invokeBootstrapDropdown(element)
             // Toggle Dropdown
             instance.toggle();
         } else {
-            let instance = Bootstrap.Dropdown.getInstance(element, {
+            let instance = window['Bootstrap'].Dropdown.getInstance(element, {
                 autoClose: true
             });
 
@@ -42,7 +42,7 @@ function invokeBootstrapTooltip(element)
     if (element.hasAttribute('data-rat-init')) {
         return;
     }
-    new Bootstrap.Tooltip(element);
+    new window['Bootstrap'].Tooltip(element);
     element.dataset.ratInit = '1';
 }
 
@@ -55,7 +55,7 @@ function invokeBootstrapPopover(element)
     if (element.hasAttribute('data-rat-init')) {
         return;
     }
-    new Bootstrap.Popover(element);
+    new window['Bootstrap'].Popover(element);
     element.dataset.ratInit = '1';
 }
 

resources/ts/components/color-picker.ts

@@ -7,10 +7,10 @@ import ready from '../utilities/ready';
  */
 function invokeColorPicker(element)
 {
-    const defaultScheme = window.newshub.defaultScheme;
+    const defaultScheme = window['newshub'].defaultScheme;
 
     function onLoad() {
-        query('[data-newshub-toggle="color-picker"]').map(el => {
+        query('[data-newshub-toggle="color-picker"]').map((el: HTMLInputElement) => {
             let style = localStorage.getItem('newshub-color-scheme') || defaultScheme;
             if(style === 'light') {
                 el.checked = false;

resources/ts/components/lightbox.ts

@@ -1,6 +1,12 @@
 import query from '../utilities/query';
 import ready from '../utilities/ready';
 
+
+/**
+ * @todo To be replaced
+ */
+
+
 /**
  * Invoke Scroll-To-Top Button
  * @param {*} element 

resources/ts/components/navbar.ts

@@ -135,10 +135,10 @@ class Navbar {
         }
 
         // Subnav Toggler
-        Array.from(this.root.querySelectorAll('.navbar-subnav-toggler')).map(el => {
+        Array.from(this.root.querySelectorAll('.navbar-subnav-toggler')).map((el: HTMLElement) => {
             el.addEventListener('click', this.toggleSubMenu.bind(this, el));
         });
-        Array.from(this.root.querySelectorAll('.nav-title')).map(el => {
+        Array.from(this.root.querySelectorAll('.nav-title')).map((el: HTMLElement) => {
             let toggler = el.parentElement.querySelector('.navbar-subnav-toggler');
             if (toggler) {
                 el.addEventListener('click', this.toggleSubMenu.bind(this, toggler));
@@ -289,13 +289,13 @@ class Navbar {
     onResize(event) {
 
         // Close SubMenus
-        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map(el => {
+        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map((el: HTMLElement) => {
             this.closeSubMenu(el, el.querySelector('.navbar-subnav-toggler'));
         });
 
         // Close Menu
         if (this.root.classList.contains('header-menu-active')) {
-            this.toggleMenu();
+            this.toggleMenu(null);
         }
     }
 
@@ -322,13 +322,13 @@ class Navbar {
         }
 
         // Close SubMenus
-        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map(el => {
+        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map((el: HTMLElement) => {
             this.closeSubMenu(el, el.querySelector('.navbar-subnav-toggler'));
         });
 
         // Close Menu
         if (this.root.classList.contains('header-menu-active')) {
-            this.toggleMenu();
+            this.toggleMenu(null);
         }
     }
 
@@ -387,13 +387,13 @@ class Navbar {
      */
     closeMenu() {
         if (this.style === 'sticky') {
-            setTimeout(() => { this.stickyNavbar(); }, 250); // Check Sticky Navbar Position after menu has been closed.
+            setTimeout(() => { this.stickyNavbar(null); }, 250); // Check Sticky Navbar Position after menu has been closed.
         } else if (this.style === 'slide') {
             this.root.style.removeProperty('height');
         }
 
         // Close SubMenus
-        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map(el => {
+        Array.from(this.root.querySelectorAll('.nav-item.item-open')).map((el: HTMLElement) => {
             this.closeSubMenu(el, el.querySelector('.navbar-subnav-toggler'));
         });
 
@@ -467,7 +467,7 @@ class Navbar {
      */
     closeSubMenu(item, button) {
         if (item.classList.contains('master-menu') && this.style === 'sticky') {
-            setTimeout(() => { this.stickyNavbar(); }, 250); // Check Sticky Navbar Position after menu has been closed.
+            setTimeout(() => { this.stickyNavbar(null); }, 250); // Check Sticky Navbar Position after menu has been closed.
         }
 
         const subnav = item.querySelector('.navbar-subnav,.navbar-subnav-master');
@@ -485,7 +485,7 @@ class Navbar {
         }
 
         if (document.activeElement === button || document.activeElement === item) {
-            document.activeElement.blur();
+            (document.activeElement as HTMLButtonElement).blur();
         }
     }