Configure material theme, add material button and input examples

src/app/@theme/styles/material/_material-dark.scss

@@ -4,8 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
- @import '~@nebular/theme/styles/core/functions';
+@import '~@nebular/theme/styles/core/functions';
- @import '~@nebular/theme/styles/core/mixins';
+@import '~@nebular/theme/styles/core/mixins';
 
 $theme: (
   color-primary-100: #fff2f7,

src/app/@theme/styles/material/_material.scss

@@ -1,9 +1,19 @@
-@import './ripple';
+@import '~@angular/material/theming';
 
 @include nb-install() {
-  @include ngx-ripple();
+  @include nb-for-theme(material-dark) {
+    $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
+    @include angular-material-theme($custom-dark-theme);
+  }
+
+  @include nb-for-theme(material-light) {
+    $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
+    @include angular-material-theme($custom-light-theme);
+  }
 
   @include nb-for-themes(material-dark, material-light) {
+    @include mat-core();
+
     nb-layout-header {
       box-shadow: nb-theme(header-shadow) !important;
       background-color: nb-theme(color-primary-default) !important;

src/app/@theme/styles/material/_ripple.scss

@@ -1,25 +0,0 @@
-@mixin ngx-ripple() {
-  .mat-ripple {
-    overflow: hidden;
-    position: relative;
-
-    &:not(:empty) {
-      transform: translateZ(0);
-    }
-
-    &.mat-ripple-unbounded{
-      overflow: visible;
-    }
-  }
-
-  .mat-ripple-element {
-    position: absolute;
-    border-radius: 50%;
-    pointer-events: none;
-    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
-    transform: scale(0);
-    // switch ripple color depending on selected theme
-    background-color: nb-theme(background-alternative-color-4);
-    opacity: .1;
-  }
-}

src/app/@theme/theme.module.ts

@@ -39,8 +39,8 @@ import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
 import { DARK_THEME } from './styles/theme.dark';
-import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light';
+import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
-import { MATERIAL_DARK_THEME } from './styles/theme.material-dark';
+import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
 
 const NB_MODULES = [
   NbLayoutModule,

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

@@ -119,5 +119,11 @@
         </nb-actions>
       </nb-card-body>
     </nb-card>
+
+    <nb-card *ngIf="materialThemeActivated">
+      <nb-card-body>
+        <ngx-material-buttons></ngx-material-buttons>
+      </nb-card-body>
+    </nb-card>
   </div>
 </div>

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
+import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-buttons',
@@ -7,7 +8,23 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
   templateUrl: './buttons.component.html',
 })
 export class ButtonsComponent {
-  statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
+  public constructor(private readonly themeService: NbThemeService) {}
-  shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
+
-  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+  private readonly subscription: Subscription = new Subscription();
+
+  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' ];
+  public materialThemeActivated: boolean = false;
+
+  public ngOnInit(): void {
+    this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
+      const themeName: string = theme?.name || '';
+      this.materialThemeActivated = themeName.startsWith('material');
+    }));
+  }
+
+  public ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }

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

@@ -0,0 +1,6 @@
+<button mat-button color="primary">Basic</button>
+<button mat-raised-button color="primary">Raised</button>
+<button mat-stroked-button color="primary">Stroked</button>
+<button mat-flat-button color="primary">Flat</button>
+<button mat-fab color="primary">FAB</button>
+<button mat-mini-fab color="primary">mini</button>

src/app/pages/forms/buttons/material-buttons/material-buttons.component.scss

@@ -0,0 +1,3 @@
+button {
+  margin: 0.5rem;
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-buttons',
+  templateUrl: './material-buttons.component.html',
+  styleUrls: ['./material-buttons.component.scss']
+})
+export class MaterialButtonsComponent {}

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

@@ -85,3 +85,8 @@
     </nb-card>
   </div>
 </div>
+<div *ngIf="materialThemeActivated" class="row">
+  <div class="col-lg-12">
+    <ngx-material-inputs></ngx-material-inputs>
+  </div>
+</div>

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

@@ -1,13 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-form-inputs',
   styleUrls: ['./form-inputs.component.scss'],
   templateUrl: './form-inputs.component.html',
 })
-export class FormInputsComponent {
+export class FormInputsComponent implements OnInit, OnDestroy {
+  public constructor(private readonly themeService: NbThemeService) {}
 
-  starRate = 2;
+  private readonly subscription: Subscription = new Subscription();
-  heartRate = 4;
+
-  radioGroupValue = 'This is value 2';
+  public materialThemeActivated: boolean = false;
+  public starRate: number = 2;
+  public heartRate: number = 4;
+  public radioGroupValue: string = 'This is value 2';
+
+  public ngOnInit(): void {
+    this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
+      const themeName: string = theme?.name || '';
+      this.materialThemeActivated = themeName.startsWith('material');
+    }));
+  }
+
+  public ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
 }

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

@@ -0,0 +1,58 @@
+<nb-card>
+  <nb-card-header>Angular Material</nb-card-header>
+  <nb-card-body>
+    <div class="row">
+      <div class="col-lg-6">
+        <mat-form-field class="input-example">
+          <mat-label>Input</mat-label>
+          <input matInput autocomplete="off">
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field class="input-example">
+          <mat-label>Select</mat-label>
+          <mat-select>
+            <mat-option value="1">Option 1</mat-option>
+            <mat-option value="2">Option 2</mat-option>
+            <mat-option value="3">Option 3</mat-option>
+          </mat-select>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+    
+        <mat-form-field class="input-example">
+          <mat-label>Datepicker</mat-label>
+          <input matInput autocomplete="off" [matDatepicker]="picker">
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-datepicker #picker></mat-datepicker>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6">
+        <mat-form-field class="input-example">
+          <mat-label>Textarea</mat-label>
+          <textarea matInput autocomplete="off"></textarea>
+          <mat-hint>hint</mat-hint>
+        </mat-form-field>
+
+        <div class="input-example">
+          <label>Checkbox</label>
+          <mat-checkbox color="primary" [checked]="true"></mat-checkbox>
+        </div>
+    
+        <div class="input-example">
+          <label>Toggle</label>
+          <mat-slide-toggle color="primary" [checked]="true"></mat-slide-toggle>
+        </div>
+    
+        <div class="input-example">
+          <label>Radio</label>
+          <mat-radio-group color="primary">
+            <mat-radio-button value="1" [checked]="true">Option 1</mat-radio-button>
+            <mat-radio-button value="2">Option 2</mat-radio-button>
+            <mat-radio-button value="3">Option 3</mat-radio-button>
+          </mat-radio-group>
+        </div>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>

src/app/pages/forms/form-inputs/material-inputs/material-inputs.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+}
+
+.input-example {
+  display: block;
+  margin-top: 1rem;
+
+  label, mat-radio-button {
+    margin-right: 1rem;
+  }
+
+  textarea {
+    min-height: 3rem;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-inputs',
+  templateUrl: './material-inputs.component.html',
+  styleUrls: ['./material-inputs.component.scss']
+})
+export class MaterialInputsComponent {}

src/app/pages/forms/forms.module.ts

@@ -15,11 +15,37 @@ import { ThemeModule } from '../../@theme/theme.module';
 import { FormsRoutingModule } from './forms-routing.module';
 import { FormsComponent } from './forms.component';
 import { FormInputsComponent } from './form-inputs/form-inputs.component';
+import { MaterialInputsComponent } from './form-inputs/material-inputs/material-inputs.component';
 import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
 import { DatepickerComponent } from './datepicker/datepicker.component';
 import { ButtonsComponent } from './buttons/buttons.component';
+import { MaterialButtonsComponent } from './buttons/material-buttons/material-buttons.component';
 import { FormsModule as ngFormsModule } from '@angular/forms';
 
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+
+const materialModules = [
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule,
+  MatNativeDateModule,
+  MatDatepickerModule,
+  MatCheckboxModule,
+  MatSlideToggleModule,
+  MatRadioModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+];
+
 @NgModule({
   imports: [
     ThemeModule,
@@ -35,6 +61,7 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
     NbSelectModule,
     NbIconModule,
     ngFormsModule,
+    ...materialModules,
   ],
   declarations: [
     FormsComponent,
@@ -42,6 +69,8 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
     FormInputsComponent,
     FormLayoutsComponent,
     DatepickerComponent,
+    MaterialInputsComponent,
+    MaterialButtonsComponent,
   ],
 })
 export class FormsModule { }