Revert "Remove non-material themes"

This reverts commit c2e319499f.

src/app/pages/dashboard/dashboard.component.ts

@@ -50,9 +50,34 @@ export class DashboardComponent implements OnDestroy {
   ];
 
   statusCardsByThemes: {
+    default: CardSettings[];
+    cosmic: CardSettings[];
+    corporate: CardSettings[];
+    dark: CardSettings[];
     'material-dark': CardSettings[];
     'material-light': CardSettings[];
   } = {
+    default: this.commonStatusCardsSet,
+    cosmic: this.commonStatusCardsSet,
+    corporate: [
+      {
+        ...this.lightCard,
+        type: 'warning',
+      },
+      {
+        ...this.rollerShadesCard,
+        type: 'primary',
+      },
+      {
+        ...this.wirelessAudioCard,
+        type: 'danger',
+      },
+      {
+        ...this.coffeeMakerCard,
+        type: 'info',
+      },
+    ],
+    dark: this.commonStatusCardsSet,
     'material-dark': this.commonStatusCardsSet,
     'material-light': this.commonStatusCardsSet,
   };

src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts

@@ -1,12 +1,19 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
 import { Location, LocationStrategy } from '@angular/common';
+import { NbThemeService } from '@nebular/theme';
+import { map, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'ngx-room-selector',
   templateUrl: './room-selector.component.html',
   styleUrls: ['./room-selector.component.scss'],
 })
-export class RoomSelectorComponent {
+export class RoomSelectorComponent implements OnInit, OnDestroy {
+
+  private destroy$ = new Subject<void>();
+  private hideGrid: boolean;
+
   @Output() select: EventEmitter<number> = new EventEmitter();
 
   selectedRoom = null;
@@ -59,10 +66,35 @@ export class RoomSelectorComponent {
     ],
   };
 
-  constructor(private location: Location, private locationStrategy: LocationStrategy) {
+  @HostBinding('style.background')
+  get background(): 'none' | null {
+    return this.hideGrid ? 'none' : null;
+  }
+
+  constructor(
+    private location: Location,
+    private locationStrategy: LocationStrategy,
+    private themeService: NbThemeService,
+  ) {
     this.selectRoom('2');
   }
 
+  ngOnInit() {
+    this.hideGrid = this.themeService.currentTheme === 'corporate';
+
+    this.themeService.onThemeChange()
+      .pipe(
+        map(({ name }) => name === 'corporate'),
+        takeUntil(this.destroy$),
+      )
+      .subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   private sortRooms() {
     this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
       if (a.id === this.selectedRoom) {

src/app/pages/dashboard/rooms/rooms.component.ts

@@ -40,7 +40,7 @@ export class RoomsComponent implements OnDestroy {
       });
 
     this.themeChangeSubscription = this.themeService.onThemeChange()
-      .pipe(map(({ name }) => name === 'material-dark'))
+      .pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
       .subscribe((isDark: boolean) => this.isDarkTheme = isDark);
   }
 

src/app/pages/forms/buttons/buttons.component.html

@@ -120,7 +120,7 @@
       </nb-card-body>
     </nb-card>
 
-    <nb-card>
+    <nb-card *ngIf="materialTheme$ | async">
       <nb-card-body>
         <ngx-material-buttons></ngx-material-buttons>
       </nb-card-body>

src/app/pages/forms/buttons/buttons.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
-import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
+import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-buttons',
@@ -7,7 +9,18 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
   templateUrl: './buttons.component.html',
 })
 export class ButtonsComponent {
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
+
+  public readonly materialTheme$: Observable<boolean>;
+
   public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
   public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
   public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+
 }

src/app/pages/forms/form-inputs/form-inputs.component.html

@@ -10,6 +10,10 @@
         </div>
         <input type="password" nbInput fullWidth placeholder="Password">
         <input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
+        <ng-container *ngIf="!(materialTheme$ | async)">
+          <input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
+          <input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
+        </ng-container>
         <input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
         <textarea rows="5" nbInput fullWidth shape="round"  placeholder="Text Area"></textarea>
         <input type="text" nbInput fullWidth fieldSize="small"  placeholder="Small Input">
@@ -83,7 +87,7 @@
     </nb-card>
   </div>
 </div>
-<div class="row">
+<div *ngIf="materialTheme$ | async" class="row">
   <div class="col-lg-12">
     <ngx-material-inputs></ngx-material-inputs>
   </div>

src/app/pages/forms/form-inputs/form-inputs.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-form-inputs',
@@ -6,6 +9,16 @@ import { Component } from '@angular/core';
   templateUrl: './form-inputs.component.html',
 })
 export class FormInputsComponent {
+  public constructor(private readonly themeService: NbThemeService) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
+
+  public readonly materialTheme$: Observable<boolean>;
+
   public starRate: number = 2;
   public heartRate: number = 4;
   public radioGroupValue: string = 'This is value 2';