chore(playground): use radio buttons for theme switcher (#2941)

src/app/app.component.ts

@@ -18,7 +18,7 @@ import { ComponentLink, PLAYGROUND_COMPONENTS } from './playground-components';
     <div class="options-bar" dir="ltr">
       <ng-container *ngIf="optionsVisible">
         <nb-layout-direction-toggle></nb-layout-direction-toggle>
-        <nb-layout-theme-toggle></nb-layout-theme-toggle>
+        <npg-layout-theme-toggle></npg-layout-theme-toggle>
         <button (click)="showComponentsOverlay()">Components (c)</button>
         <nb-components-overlay *ngIf="optionsVisible && componentsListVisible" (closeClicked)="hideComponentsOverlay()">
           <nb-components-list [components]="components"></nb-components-list>

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NbThemeModule } from '@nebular/theme';
@@ -16,21 +17,25 @@ import { AppComponent } from './app.component';
 import { LayoutDirectionToggleComponent } from './layout-direction-toggle/layout-direction-toggle.component';
 import { LayoutThemeToggleComponent } from './layout-theme-toggle/layout-theme-toggle.component';
 import { ComponentsOverlayComponent } from './components-list/components-overlay.component';
-import { ComponentsListComponent} from './components-list/components-list.component';
+import { ComponentsListComponent } from './components-list/components-list.component';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    CommonModule,
     FormsModule,
     HttpClientModule,
-    RouterModule.forRoot([
-      {
-        path: '',
-        loadChildren: () => import('../playground/playground.module').then(m => m.PlaygroundModule),
-      },
-    ], { useHash: true, relativeLinkResolution: 'legacy' }),
+    RouterModule.forRoot(
+      [
+        {
+          path: '',
+          loadChildren: () => import('../playground/playground.module').then((m) => m.PlaygroundModule),
+        },
+      ],
+      { useHash: true, relativeLinkResolution: 'legacy' },
+    ),
     NbThemeModule.forRoot(),
     NbEvaIconsModule,
   ],
@@ -41,6 +46,6 @@ import { NbEvaIconsModule } from '@nebular/eva-icons';
     ComponentsOverlayComponent,
     ComponentsListComponent,
   ],
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/layout-theme-toggle/layout-theme-toggle.component.scss

@@ -1,13 +1,13 @@
 :host {
   display: block;
   padding: 0.5em;
+}
 
-  button {
-    margin-right: 0.25rem;
-  }
-
-  label {
-    margin: 0;
-  }
+.theme-radio-label {
+  margin-right: 0.25rem;
+}
 
+.theme-radio {
+  margin: 0.125rem 0.125rem 0 0;
+  vertical-align: top;
 }

src/app/layout-theme-toggle/layout-theme-toggle.component.ts

@@ -2,21 +2,29 @@ import { Component } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
 @Component({
-  selector: 'nb-layout-theme-toggle',
+  selector: 'npg-layout-theme-toggle',
   styleUrls: ['./layout-theme-toggle.component.scss'],
   template: `
     <div dir="ltr">
-      <button (click)="enable('default')">Default</button>
-      <button (click)="enable('dark')">Dark</button>
-      <button (click)="enable('cosmic')">Cosmic</button>
-      <button (click)="enable('corporate')">Corporate</button>
+      <label *ngFor="let theme of themeList; index as i" class="theme-radio-label">
+        <input
+          type="radio"
+          [value]="theme"
+          name="theme"
+          [attr.checked]="i === 0 || null"
+          (change)="handleChange(theme)"
+          class="theme-radio"
+        />{{ theme | titlecase }}
+      </label>
     </div>
   `,
 })
 export class LayoutThemeToggleComponent {
+  readonly themeList = ['default', 'dark', 'cosmic', 'corporate'];
+
   constructor(private themeService: NbThemeService) {}
 
-  enable(theme: string) {
+  handleChange(theme: string): void {
     this.themeService.changeTheme(theme);
   }
 }