bootstrap 5 WIP (#7891)

New standard theme that follows your chosen terminal colors, Bootstrap 5 & Angular 15 upgrade

app/src/app.module.ts

@@ -1,14 +1,12 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { NgModule } from '@angular/core'
+import { ApplicationRef, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
 
 export function getRootModule (plugins: any[]) {
     const imports = [
         BrowserModule,
         ...plugins,
-        NgbModule,
         ToastrModule.forRoot({
             positionClass: 'toast-bottom-center',
             toastClass: 'toast',
@@ -27,10 +25,12 @@ export function getRootModule (plugins: any[]) {
 
     @NgModule({
         imports,
-        bootstrap,
     }) class RootModule {
-        ngDoBootstrap () {
+        ngDoBootstrap (appRef: ApplicationRef) {
             (window as any)['requestAnimationFrame'] = window[window['Zone'].__symbol__('requestAnimationFrame')]
+
+            const componentDef = bootstrap[0]
+            appRef.bootstrap(componentDef)
         }
     }
 

app/src/entry.preload.ts

@@ -6,5 +6,4 @@ import '@fortawesome/fontawesome-free/css/solid.css'
 import '@fortawesome/fontawesome-free/css/brands.css'
 import '@fortawesome/fontawesome-free/css/regular.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
-import 'ngx-toastr/toastr.css'
 import './preload.scss'

app/src/entry.ts

@@ -39,8 +39,10 @@ async function bootstrap (bootstrapData: BootstrapData, plugins: PluginInfo[], s
     const pluginModules = await loadPlugins(plugins, (current, total) => {
         (document.querySelector('.progress .bar') as HTMLElement).style.width = `${100 * current / total}%` // eslint-disable-line
     })
+
+    window['pluginModules'] = pluginModules
+
     const module = getRootModule(pluginModules)
-    window['rootModule'] = module
     const moduleRef = await platformBrowserDynamic([
         { provide: BOOTSTRAP_DATA, useValue: bootstrapData },
     ]).bootstrapModule(module)

app/src/global.scss

@@ -13,10 +13,6 @@ body {
     user-select: text;
 }
 
-[ngbradiogroup] input[type="radio"] {
-    display: none;
-}
-
 a, button {
     &.btn {
         display: inline-flex;
@@ -53,6 +49,10 @@ a, button {
     &>.form-control, &>.input-group {
         width: 33%;
     }
+
+    &>.form-check {
+        display: flex;
+    }
 }
 
 input[type=range] {
@@ -175,19 +175,19 @@ ngb-typeahead-window {
 
 // Windows high contrast mode
 @media screen and (forced-colors: active) {
-    .custom-switch .custom-control-label::before {
+    .form-switch .form-check-label::before {
         background: buttonface;
     }
 
-    .custom-switch .custom-control-label::after {
+    .form-switch .form-check-label::after {
         background: buttontext;
     }
 
-    .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
+    .form-switch .form-check-input:checked ~ .form-check-label::before {
         background: activetext;
     }
 
-    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    .form-switch .form-check-input:checked ~ .form-check-label::after {
         background: canvas;
     }
 

app/src/root.component.ts

@@ -1,6 +0,0 @@
-import { Component } from '@angular/core'
-
-@Component({
-    template: '<app-root></app-root>',
-})
-export class RootComponent { } // eslint-disable-line @typescript-eslint/no-extraneous-class

app/src/toastr.scss

@@ -8,6 +8,8 @@
     box-shadow: 0 1px 0 rgba(0,0,0,.25);
     padding: 7px 12px;
     background-image: none;
+    display: block !important;
+    border: none !important;
     width: auto;
     flex-basis: auto;
     border-radius: 0.5rem;
@@ -15,10 +17,12 @@
 
     &.toast-error {
       background-color: #BD362F;
+      color: white !important;
     }
 
     &.toast-info {
       background-color: #555;
+      color: #eee !important;
     }
   }
 }