wip

app/src/global.scss

@@ -13,10 +13,6 @@ body {
     user-select: text;
 }
 
-[ngbradiogroup] input[type="radio"] {
-    display: none;
-}
-
 a, button {
     &.btn {
         display: inline-flex;

tabby-core/src/components/base.component.ts

@@ -1,4 +1,3 @@
-import { Component } from '@angular/core'
 import { Observable, Subscription, Subject } from 'rxjs'
 
 interface CancellableEvent {
@@ -42,7 +41,6 @@ export class SubscriptionContainer {
     }
 }
 
-@Component({ template: '' })
 export class BaseComponent {
     protected get destroyed$ (): Observable<void> { return this._destroyed }
     private _destroyed = new Subject<void>()

tabby-core/src/components/selfPositioning.component.ts

@@ -1,7 +1,6 @@
-import { HostBinding, ElementRef, Component } from '@angular/core'
+import { HostBinding, ElementRef } from '@angular/core'
 import { BaseComponent } from './base.component'
 
-@Component({ template: '' })
 export abstract class SelfPositioningComponent extends BaseComponent {
     @HostBinding('style.left') cssLeft: string
     @HostBinding('style.top') cssTop: string

tabby-core/src/theme.paper.scss

@@ -313,7 +313,7 @@ hotkey-input-modal {
     }
 }
 
-[ngbradiogroup] > label.active {
+.btn-check:checked + label {
     background: $blue;
 }
 

tabby-core/src/theme.scss

@@ -213,7 +213,7 @@ hotkey-input-modal {
     margin-bottom: 2px;
 }
 
-[ngbradiogroup] > label.active {
+.btn-check:checked + label {
     background: $blue;
 }
 

tabby-local/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-// import { BrowserModule } from '@angular/platform-browser'
+import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
@@ -46,7 +46,7 @@ import { LocalProfilesService } from './profiles'
 /** @hidden */
 @NgModule({
     imports: [
-        // BrowserModule,
+        CommonModule,
         FormsModule,
         NgbModule,
         ToastrModule,

tabby-settings/src/components/settingsTab.component.ts

@@ -2,7 +2,7 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
 import * as yaml from 'js-yaml'
 import { debounce } from 'utils-decorators/dist/esm/debounce/debounce'
-import { Component, Inject, Input, HostBinding, NgZone, Injector } from '@angular/core'
+import { Component, Inject, Input, HostBinding, Injector } from '@angular/core'
 import {
     ConfigService,
     BaseTabComponent,
@@ -46,7 +46,6 @@ export class SettingsTabComponent extends BaseTabComponent {
         public hostWindow: HostWindowService,
         public homeBase: HomeBaseService,
         public platform: PlatformService,
-        public zone: NgZone,
         public locale: LocaleService,
         public updater: UpdaterService,
         private app: AppService,

tabby-settings/src/components/windowSettingsTab.component.pug

@@ -34,23 +34,29 @@ h3.mb-3(translate) Window
 .form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground')
     .header
         .title(translate) Background type
-    .btn-group(
+    .btn-group
+        input.btn-check(
+            type='radio',
+            name='vibracy',
             [(ngModel)]='config.store.appearance.vibrancyType',
             (ngModelChange)='saveConfiguration()',
-        ngbRadioGroup
+            id='vibrancyTypeBlur',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             [value]='"blur"'
+        )
+        label.btn.btn-secondary(
+            for='vibrancyTypeBlur'
         )
             span(translate) Blur
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='vibracy',
+            [(ngModel)]='config.store.appearance.vibrancyType',
+            (ngModelChange)='saveConfiguration()',
+            id='vibrancyTypeFluent',
             [value]='"fluent"'
+        )
+        label.btn.btn-secondary(
+            for='vibrancyTypeFluent'
         )
             span Fluent
 
@@ -71,31 +77,36 @@ h3.mb-3(translate) Window
         .title(translate) Window frame
         .description(translate) Whether a custom window or an OS native window should be used
 
-    .btn-group(
+    .btn-group
+        input.btn-check(
+            type='radio',
+            name='frame',
             [(ngModel)]='config.store.appearance.frame',
             (ngModelChange)='saveConfiguration(true)',
-        ngbRadioGroup
+            id='frameNative',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             [value]='"native"'
         )
+        label.btn.btn-secondary(for='frameNative')
             span(translate) Native
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='frame',
+            [(ngModel)]='config.store.appearance.frame',
+            (ngModelChange)='saveConfiguration(true)',
+            id='frameThin',
             [value]='"thin"'
         )
+        label.btn.btn-secondary(for='frameThin')
             span(translate) Thin
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='frame',
+            [(ngModel)]='config.store.appearance.frame',
+            (ngModelChange)='saveConfiguration(true)',
+            id='frameFull',
             [value]='"full"'
         )
+        label.btn.btn-secondary(for='frameFull')
             span(translate) Full
 
 h3.mt-4(translate) Docking
@@ -105,45 +116,56 @@ h3.mt-4(translate) Docking
         .title(translate) Dock the terminal
         .description(translate) Snaps the window to a side of the screen
 
-    .btn-group(
+    .btn-group
+        input.btn-check(
+            type='radio',
+            name='docking',
             [(ngModel)]='config.store.appearance.dock',
             (ngModelChange)='saveConfiguration(); docking.dock()',
-        ngbRadioGroup
+            id='dockingOff',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             [value]='"off"'
         )
+        label.btn.btn-secondary(for='dockingOff')
             span(translate) Off
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='docking',
+            [(ngModel)]='config.store.appearance.dock',
+            (ngModelChange)='saveConfiguration(); docking.dock()',
+            id='dockingTop',
             [value]='"top"'
         )
+        label.btn.btn-secondary(for='dockingTop')
             span(translate) Top
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='docking',
+            [(ngModel)]='config.store.appearance.dock',
+            (ngModelChange)='saveConfiguration(); docking.dock()',
+            id='dockingLeft',
             [value]='"left"'
         )
+        label.btn.btn-secondary(for='dockingLeft')
             span(translate) Left
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='docking',
+            [(ngModel)]='config.store.appearance.dock',
+            (ngModelChange)='saveConfiguration(); docking.dock()',
+            id='dockingRight',
             [value]='"right"'
         )
+        label.btn.btn-secondary(for='dockingRight')
             span(translate) Right
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='docking',
+            [(ngModel)]='config.store.appearance.dock',
+            (ngModelChange)='saveConfiguration(); docking.dock()',
+            id='dockingBottom',
             [value]='"bottom"'
         )
+        label.btn.btn-secondary(for='dockingBottom')
             span(translate) Bottom
 
 .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
@@ -151,24 +173,26 @@ h3.mt-4(translate) Docking
         .title(translate) Display on
         .description(translate) Snaps the window to a side of the screen
 
-    div(
+    div
+        input.btn-check(
+            type='radio',
+            name='dockScreen',
             [(ngModel)]='config.store.appearance.dockScreen',
             (ngModelChange)='saveConfiguration(); docking.dock()',
-        ngbRadioGroup
+            id='dockScreenCurrent',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             value='current'
         )
+        label.btn.btn-secondary(id='dockScreenCurrent')
             span(translate) Current
-        label.btn.btn-secondary(*ngFor='let screen of screens', ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='dockScreen',
+            [(ngModel)]='config.store.appearance.dockScreen',
+            (ngModelChange)='saveConfiguration(); docking.dock()',
+            id='dockScreen{{screen.id}}',
             [value]='screen.id'
         )
+        label.btn.btn-secondary(*ngFor='let screen of screens', for='dockScreen{{screen.id}}')
             | {{screen.name}}
 
 .ms-5.form-line(*ngIf='docking && config.store.appearance.dock != "off"')
@@ -220,61 +244,71 @@ h3.mt-4(translate) Tabs
 .form-line
     .header
         .title(translate) Tabs location
-    .btn-group(
+    .btn-group
+        input.btn-check(
+            type='radio',
+            name='tabsLocation',
             [(ngModel)]='config.store.appearance.tabsLocation',
             (ngModelChange)='saveConfiguration()',
-        ngbRadioGroup
+            id='tabsLocationTop',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             [value]='"top"'
         )
+        label.btn.btn-secondary(for='tabsLocationTop')
             span(translate) Top
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='tabsLocation',
+            [(ngModel)]='config.store.appearance.tabsLocation',
+            (ngModelChange)='saveConfiguration()',
+            id='tabsLocationBottom',
             [value]='"bottom"'
         )
+        label.btn.btn-secondary(for='tabsLocationBottom')
             span(translate) Bottom
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='tabsLocation',
+            [(ngModel)]='config.store.appearance.tabsLocation',
+            (ngModelChange)='saveConfiguration()',
+            id='tabsLocationLeft',
             [value]='"left"'
         )
+        label.btn.btn-secondary(for='tabsLocationLeft')
             span(translate) Left
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='tabsLocation',
+            [(ngModel)]='config.store.appearance.tabsLocation',
+            (ngModelChange)='saveConfiguration()',
+            id='tabsLocationRight',
             [value]='"right"'
         )
+        label.btn.btn-secondary(for='tabsLocationRight')
             span(translate) Right
 
 .form-line
     .header
         .title(translate) Tabs width
-    .btn-group(
+    .btn-group
+        input.btn-check(
+            type='radio',
+            name='flexTabs',
             [(ngModel)]='config.store.appearance.flexTabs',
             (ngModelChange)='saveConfiguration()',
-        ngbRadioGroup
+            id='flexTabsTrue',
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
             [value]='true'
         )
+        label.btn.btn-secondary(for='flexTabsTrue')
             span(translate, translateComment='[Dynamic] tab width') id.tab-width.dynamic
-        label.btn.btn-secondary(ngbButtonLabel)
+        input.btn-check(
-            input(
             type='radio',
-                ngbButton,
+            name='flexTabs',
+            [(ngModel)]='config.store.appearance.flexTabs',
+            (ngModelChange)='saveConfiguration()',
+            id='flexTabsFalse',
             [value]='false'
         )
+        label.btn.btn-secondary(for='flexTabsFalse')
             span(translate) Fixed
 
 .form-line

tabby-ssh/src/components/sshPortForwardingConfig.component.pug

@@ -40,31 +40,41 @@ h5(translate) Add a port forward
     input.form-control(type='text', placeholder='Description', [(ngModel)]='newForward.description')
 
 .d-flex
-    .btn-group.me-auto(
+    .btn-group.me-auto
-        [(ngModel)]='newForward.type',
+        input.btn-check(
-        ngbRadioGroup
-    )
-        label.btn.btn-secondary.m-0(ngbButtonLabel)
-            input(
             type='radio',
-                ngbButton,
+            [(ngModel)]='newForward.type',
+            id='newForwardTypeLocal',
+            name='newForwardType',
             [value]='PortForwardType.Local'
         )
-            span(translate) Local
+        label.btn.btn-secondary.m-0(
-        label.btn.btn-secondary.m-0(ngbButtonLabel)
+            for='newForwardTypeLocal',
-            input(
+            translate
+        ) Local
+        input.btn-check(
             type='radio',
-                ngbButton,
+            [(ngModel)]='newForward.type',
+            id='newForwardTypeRemote',
+            name='newForwardType',
             [value]='PortForwardType.Remote'
         )
-            span(translate) Remote
+        label.btn.btn-secondary.m-0(
-        label.btn.btn-secondary.m-0(ngbButtonLabel)
+            for='newForwardTypeRemote',
-            input(
+            translate
+        ) Remote
+        input.btn-check(
             type='radio',
-                ngbButton,
+            [(ngModel)]='newForward.type',
+            id='newForwardTypeDynamic',
+            name='newForwardType',
             [value]='PortForwardType.Dynamic'
         )
-            span(translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic
+        label.btn.btn-secondary.m-0(
+            for='newForwardTypeDynamic',
+            translate,
+            translateContext='[Dynamic] port forwarding'
+        ) id.port-forwarding.dynamic
 
     button.btn.btn-primary((click)='addForward()')
         i.fas.fa-check.me-2

tabby-ssh/src/components/sshProfileSettings.component.pug

@@ -107,28 +107,63 @@ ul.nav-tabs(ngbNav, #nav='ngbNav')
             .mb-3
                 label(translate) Authentication method
 
-                .btn-group.mt-1.w-100(
+                .btn-group.mt-1.w-100
+                    input.btn-check(
+                        type='radio',
+                        name='auth',
                         [(ngModel)]='profile.options.auth',
-                    ngbRadioGroup
+                        id='authAuto',
+                        [value]='null'
+                    )
+                    label.btn.btn-secondary(
+                        for='authAuto'
                     )
-                    label.btn.btn-secondary(ngbButtonLabel)
-                        input(type='radio', ngbButton, [value]='null')
                         i.far.fa-lightbulb
                         .m-0(translate) Auto
-                    label.btn.btn-secondary(ngbButtonLabel)
+                    input.btn-check(
-                        input(type='radio', ngbButton, [value]='"password"')
+                        type='radio',
+                        name='auth',
+                        [(ngModel)]='profile.options.auth',
+                        id='authPassword',
+                        [value]='"password"'
+                    )
+                    label.btn.btn-secondary(
+                        for='authPassword'
+                    )
                         i.fas.fa-font
                         .m-0(translate) Password
-                    label.btn.btn-secondary(ngbButtonLabel)
+                    input.btn-check(
-                        input(type='radio', ngbButton, [value]='"publicKey"')
+                        type='radio',
+                        name='auth',
+                        [(ngModel)]='profile.options.auth',
+                        id='authPublicKey',
+                        [value]='"publicKey"'
+                    )
+                    label.btn.btn-secondary(
+                        for='authPublicKey'
+                    )
                         i.fas.fa-key
                         .m-0(translate) Key
-                    label.btn.btn-secondary(ngbButtonLabel, ng:if='hostApp.platform !== Platform.Web')
+                    input.btn-check(
-                        input(type='radio', ngbButton, [value]='"agent"')
+                        type='radio',
+                        name='auth',
+                        [(ngModel)]='profile.options.auth',
+                        id='authAgent',
+                        [value]='"agent"'
+                    )
+                    label.btn.btn-secondary(
+                        for='authAgent'
+                    , ng:if='hostApp.platform !== Platform.Web')
                         i.fas.fa-user-secret
                         .m-0(translate) Agent
+                    input.btn-check(
+                        type='radio',
+                        name='auth',
+                        [(ngModel)]='profile.options.auth',
+                        id='auth"keyboardInteractive"'
+                        [value]='"keyboardInteractive"'
+                    )
                     label.btn.btn-secondary(ngbButtonLabel)
-                        input(type='radio', ngbButton, [value]='"keyboardInteractive"')
                         i.far.fa-keyboard
                         .m-0(translate) Interactive
 

tabby-terminal/src/components/appearanceSettingsTab.component.pug

@@ -59,23 +59,29 @@ h3.mb-3(translate) Appearance
         .header
             .title(translate) Terminal background
 
-        .btn-group(
+        .btn-group(role='group')
+            input.btn-check(
+                type='radio',
+                name='background',
                 [(ngModel)]='config.store.terminal.background',
                 (ngModelChange)='config.save()',
-            ngbRadioGroup
+                id='backgroundTheme',
-        )
-            label.btn.btn-secondary(ngbButtonLabel)
-                input(
-                    type='radio',
-                    ngbButton,
                 [value]='"theme"'
+            )
+            label.btn.btn-secondary(
+                for='backgroundTheme'
             )
                 span(translate) From theme
-            label.btn.btn-secondary(ngbButtonLabel)
+            input.btn-check(
-                input(
                 type='radio',
-                    ngbButton,
+                name='background',
+                [(ngModel)]='config.store.terminal.background',
+                (ngModelChange)='config.save()',
+                id='backgroundColorScheme',
                 [value]='"colorScheme"'
+            )
+            label.btn.btn-secondary(
+                for='backgroundColorScheme'
             )
                 span(translate) From color scheme
 
@@ -83,30 +89,41 @@ h3.mb-3(translate) Appearance
         .header
             .title(translate) Cursor shape
 
-        .btn-group(
+        .btn-group(role='group')
+            input.btn-check(
+                type='radio',
+                name='cursor',
                 [(ngModel)]='config.store.terminal.cursor',
                 (ngModelChange)='config.save()',
-            ngbRadioGroup
+                id='cursorBlock',
-        )
-            label.btn.btn-secondary(ngbButtonLabel)
-                input(
-                    type='radio',
-                    ngbButton,
                 [value]='"block"'
+            )
+            label.btn.btn-secondary(
+                for='cursorBlock'
             )
                 | █
-            label.btn.btn-secondary(ngbButtonLabel)
+            input.btn-check(
-                input(
                 type='radio',
-                    ngbButton,
+                name='cursor',
+                [(ngModel)]='config.store.terminal.cursor',
+                (ngModelChange)='config.save()',
+                id='cursorBeam',
                 [value]='"beam"'
+            )
+            label.btn.btn-secondary(
+                for='cursorBeam'
             )
                 | |
-            label.btn.btn-secondary(ngbButtonLabel)
+            input.btn-check(
-                input(
                 type='radio',
-                    ngbButton,
+                name='cursor',
+                [(ngModel)]='config.store.terminal.cursor',
+                (ngModelChange)='config.save()',
+                id='cursorUnderline',
                 [value]='"underline"'
+            )
+            label.btn.btn-secondary(
+                for='cursorUnderline'
             )
                 | ▁
 

tabby-terminal/src/components/terminalSettingsTab.component.pug

@@ -168,31 +168,36 @@ div.mt-4
     .form-line
         .header
             .title(translate) Terminal bell
-        .btn-group(
+        .btn-group
+            input.btn-check(
+                type='radio',
+                name='bell',
                 [(ngModel)]='config.store.terminal.bell',
                 (ngModelChange)='config.save()',
-            ngbRadioGroup
+                id='bellOff',
-        )
-            label.btn.btn-secondary(ngbButtonLabel)
-                input(
-                    type='radio',
-                    ngbButton,
                 [value]='"off"'
             )
+            label.btn.btn-secondary(for='bellOff')
                 span(translate) Off
-            label.btn.btn-secondary(ngbButtonLabel)
+            input.btn-check(
-                input(
                 type='radio',
-                    ngbButton,
+                name='bell',
+                [(ngModel)]='config.store.terminal.bell',
+                (ngModelChange)='config.save()',
+                id='bellVisual',
                 [value]='"visual"'
             )
+            label.btn.btn-secondary(for='bellVisual')
                 span(translate) Visual
-            label.btn.btn-secondary(ngbButtonLabel)
+            input.btn-check(
-                input(
                 type='radio',
-                    ngbButton,
+                name='bell',
+                [(ngModel)]='config.store.terminal.bell',
+                (ngModelChange)='config.save()',
+                id='bellAudible',
                 [value]='"audible"'
             )
+            label.btn.btn-secondary(for='bellAudible')
                 span(translate) Audible
 
     .alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.bell != "audible" && (config.store.terminal.profile || "").startsWith("wsl")')

tabby-terminal/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-// import { BrowserModule } from '@angular/platform-browser'
+import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { ToastrModule } from 'ngx-toastr'
@@ -37,7 +37,7 @@ import { TerminalCLIHandler } from './cli'
 /** @hidden */
 @NgModule({
     imports: [
-        // BrowserModule,
+        CommonModule,
         FormsModule,
         NgbModule,
         ToastrModule,