Merge branch 'feat/material-theme' into feat/material-demo

README.md

@@ -2,7 +2,24 @@
 
 [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://hubs.ly/H0n4Sfq0) | [Installation Guidelines](https://hubs.ly/H0n4Svc0)
 
-# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
+# New! Material theme for ngx-admin
+
+### Material admin theme is based on the most popular Angular dashboard template - [ngx-admin](https://hubs.ly/H0nJG1G0)
+### Included: Angular 9+, [Nebular](https://hubs.ly/H0nJG5g0) and [Eva design system](https://hubs.ly/H0nJGdC0). Free for personal and commercial usage.
+### Get material ngx-admin integrated with backend technology of your choice. Check out our store.
+
+<a target="_blank" href="https://hubs.ly/H0nxM3b0"><img src="https://i.imgur.com/csP0aZ9.png"/></a>
+
+## Key features
+
+- The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies*.
+- Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
+- Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that.
+- ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!
+
+
+
+# Admin template based on Angular 9+ and <a href="https://github.com/akveo/nebular">Nebular</a>
 <a target="_blank" href="https://hubs.ly/H0n4Sw20"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
 
 ### Backend Integration Bundles
@@ -14,9 +31,14 @@ Easy way to integrate ngx-admin with backend (.NET, Node.js, Java etc.).
 
 [Check out our Store](https://hubs.ly/H0n4Zvy0) for ready to use Backend Bundles.
 
-### With 4 stunning visual themes
+### With 6 stunning visual themes
 
 
+#### Material Dark
+<a target="_blank" href="https://hubs.ly/H0nxM3b0"><img src="https://i.imgur.com/csP0aZ9.png"/></a>
+
+#### Material Light
+<a target="_blank" href="https://hubs.ly/H0nxNmv0"><img src="https://i.imgur.com/J5Rmgn4.png"/></a>
 
 #### Default
 <a target="_blank" href="https://hubs.ly/H0n4Tgv0"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
@@ -32,7 +54,7 @@ Easy way to integrate ngx-admin with backend (.NET, Node.js, Java etc.).
 
 ### What's included:
 
-- Angular 8+ & Typescript
+- Angular 9+ & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support

angular.json

@@ -11,6 +11,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "preserveSymlinks": true,
             "rebaseRootRelativeCssUrls": true,
             "outputPath": "dist",
@@ -37,7 +38,6 @@
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "node_modules/socicon/css/socicon.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
-              "node_modules/angular-tree-component/dist/angular-tree-component.css",
               "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
               "node_modules/leaflet/dist/leaflet.css",
               "src/app/@theme/styles/styles.scss"
@@ -56,6 +56,12 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -293,7 +299,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "ngx",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "ngx"

package.json

@@ -30,37 +30,36 @@
     "docs:serve": "npm start -- docs --port 4100",
     "docs:gh-pages": "npm run docs:build && npm run ngh -- --dir ./docs/dist",
     "prepush": "npm run lint:ci",
-    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
+    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
   },
   "dependencies": {
-    "@agm/core": "^1.0.0-beta.5",
+    "@akveo/ng2-completer": "^9.0.1",
-    "@angular/animations": "^8.0.0",
+    "@angular/animations": "^9.0.4",
-    "@angular/cdk": "^8.0.0",
+    "@angular/cdk": "^9.1.2",
-    "@angular/common": "^8.0.0",
+    "@angular/common": "^9.0.4",
-    "@angular/compiler": "^8.0.0",
+    "@angular/compiler": "^9.0.4",
-    "@angular/core": "^8.0.0",
+    "@angular/core": "^9.0.4",
-    "@angular/forms": "^8.0.0",
+    "@angular/forms": "^9.0.4",
-    "@angular/platform-browser": "^8.0.0",
+    "@angular/google-maps": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/material": "^9.1.0",
-    "@angular/router": "^8.0.0",
+    "@angular/platform-browser": "^9.0.4",
+    "@angular/platform-browser-dynamic": "^9.0.4",
+    "@angular/router": "^9.0.4",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "4.4.0",
+    "@nebular/auth": "5.0.0",
-    "@nebular/bootstrap": "4.4.0",
+    "@nebular/eva-icons": "5.0.0",
-    "@nebular/eva-icons": "4.4.0",
+    "@nebular/security": "5.0.0",
-    "@nebular/security": "4.4.0",
+    "@nebular/theme": "5.0.0",
-    "@nebular/theme": "4.4.0",
+    "@swimlane/ngx-charts": "^13.0.2",
-    "@swimlane/ngx-charts": "^10.0.0",
-    "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
-    "angular2-toaster": "^7.0.0",
     "bootstrap": "4.3.1",
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
     "echarts": "^4.0.2",
-    "eva-icons": "^1.1.0",
+    "eva-icons": "^1.1.3",
-    "highlight.js": "^9.13.1",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "leaflet": "1.2.0",
@@ -68,38 +67,37 @@
     "nebular-icons": "1.1.0",
     "ng-lazyload-image": "5.0.0",
     "ng2-ckeditor": "^1.2.2",
-    "ng2-completer": "2.0.8",
+    "ng2-smart-table": "^1.6.0",
-    "ng2-smart-table": "1.3.5",
+    "ngx-echarts": "^4.2.2",
-    "ngx-echarts": "^4.0.1",
-    "ngx-swiper-wrapper": "^7.1.1",
     "node-sass": "^4.12.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.5.4",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
+    "style-loader": "^1.1.3",
     "tinymce": "4.5.7",
-    "tslib": "^1.9.0",
+    "tslib": "^1.10.0",
     "typeface-exo": "0.0.22",
-    "web-animations-js": "github:angular/web-animations-js#release_pr208",
+    "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.2",
+    "@angular-devkit/build-angular": "~0.900.4",
-    "@angular/cli": "^8.0.2",
+    "@angular/cli": "^9.0.4",
-    "@angular/compiler-cli": "^8.0.0",
+    "@angular/compiler-cli": "^9.0.4",
-    "@angular/language-service": "8.0.0",
+    "@angular/language-service": "9.0.4",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.30.4",
+    "@types/googlemaps": "^3.39.3",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
-    "@types/node": "6.0.90",
+    "@types/node": "^12.11.1",
     "angular-cli-ghpages": "0.5.0",
-    "codelyzer": "^5.0.1",
+    "codelyzer": "^5.1.2",
     "conventional-changelog-cli": "1.3.4",
     "husky": "0.13.3",
     "jasmine-core": "2.6.4",
@@ -117,6 +115,6 @@
     "ts-node": "3.2.2",
     "tslint": "^5.7.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.4.5"
+    "typescript": "3.7.5"
   }
 }

src/app/@core/core.module.ts

@@ -1,5 +1,6 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
 import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
 import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
 import { of as observableOf } from 'rxjs';
@@ -51,6 +52,7 @@ import { CountryOrderService } from './mock/country-order.service';
 import { StatsProgressBarService } from './mock/stats-progress-bar.service';
 import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
 import { SecurityCamerasService } from './mock/security-cameras.service';
+import { RippleService } from './utils/ripple.service';
 import { MockDataModule } from './mock/mock-data.module';
 import { AbService } from './utils/ab.service';
 import {CurrentThemeService} from './utils/theme.service';
@@ -94,6 +96,7 @@ const DATA_SERVICES = [
   { provide: StatsProgressBarData, useClass: StatsProgressBarService },
   { provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
   { provide: SecurityCamerasData, useClass: SecurityCamerasService },
+  {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: RippleService},
 ];
 
 const GUARDS = [
@@ -169,8 +172,8 @@ export class CoreModule {
     throwIfAlreadyLoaded(parentModule, 'CoreModule');
   }
 
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<CoreModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: CoreModule,
       providers: [
         ...NB_CORE_PROVIDERS,

src/app/@core/mock/mock-data.module.ts

@@ -54,7 +54,7 @@ const SERVICES = [
   ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<MockDataModule> {
     return <ModuleWithProviders>{
       ngModule: MockDataModule,
       providers: [

src/app/@core/utils/index.ts

@@ -1,5 +1,13 @@
-export { LayoutService } from './layout.service';
+import { LayoutService } from './layout.service';
-export { AnalyticsService } from './analytics.service';
+import { AnalyticsService } from './analytics.service';
-export { PlayerService } from './player.service';
+import { PlayerService } from './player.service';
-export { StateService } from './state.service';
+import { StateService } from './state.service';
-export { SeoService } from './seo.service';
+import { SeoService } from './seo.service';
+
+export {
+  LayoutService,
+  AnalyticsService,
+  PlayerService,
+  SeoService,
+  StateService,
+};

src/app/@core/utils/ripple.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { RippleGlobalOptions } from '@angular/material/core';
+
+@Injectable({providedIn: 'root'})
+export class RippleService implements RippleGlobalOptions {
+  public disabled: boolean = false;
+
+  public toggle(enabled: boolean): void {
+    this.disabled = !enabled;
+  }
+}

src/app/@theme/components/header/header.component.html

@@ -1,12 +1,29 @@
 <div class="header-container">
   <div class="logo-container">
-    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+    <a
-      <nb-icon icon="menu-2-outline"></nb-icon>
+      href="#"
+      class="sidebar-toggle"
+      matRipple
+      [matRippleUnbounded]="true"
+      [matRippleCentered]="true"
+      (click)="toggleSidebar()"
+    >
+      <nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
   </div>
-  <nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary" class="theme-select">
+  <nb-select
-    <nb-option *ngFor="let theme of themes" [value]="theme.value">{{ theme.name }}</nb-option>
+    status="primary"
+    class="theme-select"
+    matRipple
+    [selected]="currentTheme"
+    (selectedChange)="changeTheme($event)"
+  >
+    <nb-option
+      *ngFor="let theme of themes"
+      [value]="theme.value"
+      matRipple
+    >{{ theme.name }}</nb-option>
   </nb-select>
 </div>
 
@@ -25,18 +42,18 @@
       <nb-icon icon="download"></nb-icon>
       <span class="subtitle number">470.000</span>
     </nb-action>
-    <nb-action class="control-item contact-us">
+    <nb-action class="control-item contact-us" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true">
       <a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
         <nb-icon icon="email-outline" pack="eva"></nb-icon>
         <span>contact@akveo.com</span>
       </a>
     </nb-action>
     <nb-action class="control-item search">
-      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+      <nb-search type="rotate-layout" (click)="startSearch()" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"></nb-search>
     </nb-action>
-    <nb-action class="control-item email" icon="email-outline"></nb-action>
+    <nb-action class="control-item email" icon="email-outline" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"></nb-action>
-    <nb-action class="control-item notifications" icon="bell-outline"></nb-action>
+    <nb-action class="control-item notifications" icon="bell-outline" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true"></nb-action>
-    <nb-action class="user-action" *nbIsGranted="['view', 'user']" >
+    <nb-action class="user-action" *nbIsGranted="['view', 'user']" matRipple [matRippleUnbounded]="true" [matRippleCentered]="true">
       <nb-user [nbContextMenu]="userMenu"
                [onlyPicture]="userPictureOnly"
                [name]="user?.name"

src/app/@theme/components/header/header.component.scss

@@ -53,8 +53,8 @@
     width: auto;
 
     .sidebar-toggle {
-      @include nb-ltr(padding-right, 1.25rem);
+      @include nb-ltr(margin-right, 1.25rem);
-      @include nb-rtl(padding-left, 1.25rem);
+      @include nb-rtl(margin-left, 1.25rem);
       text-decoration: none;
       color: nb-theme(text-hint-color);
       nb-icon {

src/app/@theme/components/header/header.component.ts

@@ -4,7 +4,8 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
 import { UserData } from '../../../@core/data/users';
 import { AnalyticsService, LayoutService } from '../../../@core/utils';
 import { map, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, Observable } from 'rxjs';
+import { RippleService } from '../../../@core/utils/ripple.service';
 
 @Component({
   selector: 'ngx-header',
@@ -14,6 +15,7 @@ import { Subject } from 'rxjs';
 export class HeaderComponent implements OnInit, OnDestroy {
 
   private destroy$: Subject<void> = new Subject<void>();
+  public readonly materialTheme$: Observable<boolean>;
   userPictureOnly: boolean = false;
   user: any;
 
@@ -34,20 +36,36 @@ export class HeaderComponent implements OnInit, OnDestroy {
       value: 'corporate',
       name: 'Corporate',
     },
+    {
+      value: 'material-light',
+      name: 'Material Light',
+    },
+    {
+      value: 'material-dark',
+      name: 'Material Dark',
+    },
   ];
 
   currentTheme = 'default';
 
   userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
 
-  constructor(private sidebarService: NbSidebarService,
+  public constructor(
+    private sidebarService: NbSidebarService,
     private menuService: NbMenuService,
     private themeService: NbThemeService,
     private userService: UserData,
     private layoutService: LayoutService,
     private breakpointService: NbMediaBreakpointsService,
     private analytics: AnalyticsService,
-  ) {}
+    private rippleService: RippleService,
+  ) {
+    this.materialTheme$ = this.themeService.onThemeChange()
+      .pipe(map(theme => {
+        const themeName: string = theme?.name || '';
+        return themeName.startsWith('material');
+      }));
+  }
 
   ngOnInit() {
     this.currentTheme = this.themeService.currentTheme;
@@ -69,7 +87,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
         map(({ name }) => name),
         takeUntil(this.destroy$),
       )
-      .subscribe(themeName => this.currentTheme = themeName);
+      .subscribe(themeName => {
+        this.currentTheme = themeName;
+        this.rippleService.toggle(themeName?.startsWith('material'));
+      });
   }
 
   ngOnDestroy() {

src/app/@theme/styles/_overrides.scss

@@ -8,4 +8,15 @@
       right: 0.41rem !important;
     }
   }
+
+  nb-card nb-list {
+    @include nb-scrollbars(
+      nb-theme(card-scrollbar-color),
+      nb-theme(card-scrollbar-background-color),
+      nb-theme(card-scrollbar-width));
+  }
+
+  .table {
+    color: nb-theme(text-basic-color) !important;
+  }
 }

src/app/@theme/styles/material/_angular-material.scss

@@ -0,0 +1,15 @@
+@import '~@angular/material/theming';
+
+@mixin angular-material() {
+  @include mat-core();
+
+  @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);
+  }
+}

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

@@ -0,0 +1,496 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * 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/mixins';
+
+$theme: (
+  color-primary-100: #fff2f7,
+  color-primary-200: #ffd4e3,
+  color-primary-300: #fc9abc,
+  color-primary-400: #f24681,
+  color-primary-500: #e91d63,
+  color-primary-600: #c71451,
+  color-primary-700: #a80d43,
+  color-primary-800: #870935,
+  color-primary-900: #70062a,
+
+  color-primary-transparent-100: rgba(233, 29, 99, 0.08),
+  color-primary-transparent-200: rgba(233, 29, 99, 0.16),
+  color-primary-transparent-300: rgba(233, 29, 99, 0.24),
+  color-primary-transparent-400: rgba(233, 29, 99, 0.32),
+  color-primary-transparent-500: rgba(233, 29, 99, 0.4),
+  color-primary-transparent-600: rgba(233, 29, 99, 0.48),
+
+  color-success-100: #edfbd1,
+  color-success-200: #d7f7a6,
+  color-success-300: #b4e775,
+  color-success-400: #8fcf50,
+  color-success-500: #60af20,
+  color-success-600: #499617,
+  color-success-700: #357d10,
+  color-success-800: #24650a,
+  color-success-900: #175306,
+
+  color-success-transparent-100: rgba(96, 175, 32, 0.08),
+  color-success-transparent-200: rgba(96, 175, 32, 0.16),
+  color-success-transparent-300: rgba(96, 175, 32, 0.24),
+  color-success-transparent-400: rgba(96, 175, 32, 0.32),
+  color-success-transparent-500: rgba(96, 175, 32, 0.4),
+  color-success-transparent-600: rgba(96, 175, 32, 0.48),
+
+  color-info-100: #ccf7fe,
+  color-info-200: #99e9fd,
+  color-info-300: #66d3f9,
+  color-info-400: #40bbf4,
+  color-info-500: #0495ee,
+  color-info-600: #0273cc,
+  color-info-700: #0256ab,
+  color-info-800: #013d8a,
+  color-info-900: #002b72,
+
+  color-info-transparent-100: rgba(4, 149, 238, 0.08),
+  color-info-transparent-200: rgba(4, 149, 238, 0.16),
+  color-info-transparent-300: rgba(4, 149, 238, 0.24),
+  color-info-transparent-400: rgba(4, 149, 238, 0.32),
+  color-info-transparent-500: rgba(4, 149, 238, 0.4),
+  color-info-transparent-600: rgba(4, 149, 238, 0.48),
+
+  color-warning-100: #fff3cd,
+  color-warning-200: #ffe49b,
+  color-warning-300: #ffd169,
+  color-warning-400: #ffbe43,
+  color-warning-500: #ff9f05,
+  color-warning-600: #db8003,
+  color-warning-700: #b76302,
+  color-warning-800: #934a01,
+  color-warning-900: #7a3800,
+
+  color-warning-transparent-100: rgba(255, 159, 5, 0.08),
+  color-warning-transparent-200: rgba(255, 159, 5, 0.16),
+  color-warning-transparent-300: rgba(255, 159, 5, 0.24),
+  color-warning-transparent-400: rgba(255, 159, 5, 0.32),
+  color-warning-transparent-500: rgba(255, 159, 5, 0.4),
+  color-warning-transparent-600: rgba(255, 159, 5, 0.48),
+
+  color-danger-100: #fbd2c8,
+  color-danger-200: #f79e94,
+  color-danger-300: #e75d5c,
+  color-danger-400: #cf3341,
+  color-danger-500: #b00020,
+  color-danger-600: #970029,
+  color-danger-700: #7e002e,
+  color-danger-800: #66002f,
+  color-danger-900: #54002f,
+
+  color-danger-transparent-100: rgba(176, 0, 32, 0.08),
+  color-danger-transparent-200: rgba(176, 0, 32, 0.16),
+  color-danger-transparent-300: rgba(176, 0, 32, 0.24),
+  color-danger-transparent-400: rgba(176, 0, 32, 0.32),
+  color-danger-transparent-500: rgba(176, 0, 32, 0.4),
+  color-danger-transparent-600: rgba(176, 0, 32, 0.48),
+
+  color-basic-100: #ffffff,
+  color-basic-200: #f5f5f5,
+  color-basic-300: #f5f5f5,
+  color-basic-400: #d4d4d4,
+  color-basic-500: #b3b3b3,
+  color-basic-600: #808080,
+  color-basic-700: #404040,
+  color-basic-800: #353535,
+  color-basic-900: #303030,
+  color-basic-1000: #1f1f1f,
+  color-basic-1100: #141414,
+
+  color-basic-transparent-100: rgba(128, 128, 128, 0.08),
+  color-basic-transparent-200: rgba(128, 128, 128, 0.16),
+  color-basic-transparent-300: rgba(128, 128, 128, 0.24),
+  color-basic-transparent-400: rgba(128, 128, 128, 0.32),
+  color-basic-transparent-500: rgba(128, 128, 128, 0.4),
+  color-basic-transparent-600: rgba(128, 128, 128, 0.48),
+
+  color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
+  color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
+  color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
+  color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
+  color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
+  color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
+
+  color-basic-focus: color-basic-400,
+  color-basic-hover: color-basic-200,
+  color-basic-default: color-basic-300,
+  color-basic-active: color-basic-400,
+  color-basic-disabled: color-basic-transparent-300,
+  color-basic-focus-border: color-basic-500,
+  color-basic-hover-border: color-basic-hover,
+  color-basic-default-border: color-basic-default,
+  color-basic-active-border: color-basic-active,
+  color-basic-disabled-border: color-basic-disabled,
+
+  color-basic-transparent-focus: color-basic-transparent-300,
+  color-basic-transparent-hover: color-basic-transparent-200,
+  color-basic-transparent-default: color-basic-transparent-100,
+  color-basic-transparent-active: color-basic-transparent-300,
+  color-basic-transparent-disabled: color-basic-transparent-200,
+  color-basic-transparent-focus-border: color-basic-500,
+  color-basic-transparent-hover-border: color-basic-500,
+  color-basic-transparent-default-border: color-basic-500,
+  color-basic-transparent-active-border: color-basic-500,
+  color-basic-transparent-disabled-border: color-basic-transparent-300,
+
+  color-primary-focus: color-primary-600,
+  color-primary-hover: color-primary-400,
+  color-primary-default: color-primary-500,
+  color-primary-active: color-primary-600,
+  color-primary-disabled: color-basic-transparent-300,
+  color-primary-focus-border: color-primary-700,
+  color-primary-hover-border: color-primary-hover,
+  color-primary-default-border: color-primary-default,
+  color-primary-active-border: color-primary-active,
+  color-primary-disabled-border: color-primary-disabled,
+
+  color-primary-transparent-focus: color-primary-transparent-300,
+  color-primary-transparent-hover: color-primary-transparent-200,
+  color-primary-transparent-default: color-primary-transparent-100,
+  color-primary-transparent-active: color-primary-transparent-300,
+  color-primary-transparent-disabled: color-basic-transparent-200,
+  color-primary-transparent-focus-border: color-primary-500,
+  color-primary-transparent-hover-border: color-primary-500,
+  color-primary-transparent-default-border: color-primary-500,
+  color-primary-transparent-active-border: color-primary-500,
+  color-primary-transparent-disabled-border: color-basic-transparent-300,
+
+  color-success-focus: color-success-600,
+  color-success-hover: color-success-400,
+  color-success-default: color-success-500,
+  color-success-active: color-success-600,
+  color-success-disabled: color-basic-transparent-300,
+  color-success-focus-border: color-success-700,
+  color-success-hover-border: color-success-hover,
+  color-success-default-border: color-success-default,
+  color-success-active-border: color-success-active,
+  color-success-disabled-border: color-success-disabled,
+
+  color-success-transparent-focus: color-success-transparent-300,
+  color-success-transparent-hover: color-success-transparent-200,
+  color-success-transparent-default: color-success-transparent-100,
+  color-success-transparent-active: color-success-transparent-300,
+  color-success-transparent-disabled: color-basic-transparent-200,
+  color-success-transparent-focus-border: color-success-500,
+  color-success-transparent-hover-border: color-success-500,
+  color-success-transparent-default-border: color-success-500,
+  color-success-transparent-active-border: color-success-500,
+  color-success-transparent-disabled-border: color-basic-transparent-300,
+
+  color-info-focus: color-info-600,
+  color-info-hover: color-info-400,
+  color-info-default: color-info-500,
+  color-info-active: color-info-600,
+  color-info-disabled: color-basic-transparent-300,
+  color-info-focus-border: color-info-700,
+  color-info-hover-border: color-info-hover,
+  color-info-default-border: color-info-default,
+  color-info-active-border: color-info-active,
+  color-info-disabled-border: color-info-disabled,
+
+  color-info-transparent-focus: color-info-transparent-300,
+  color-info-transparent-hover: color-info-transparent-200,
+  color-info-transparent-default: color-info-transparent-100,
+  color-info-transparent-active: color-info-transparent-300,
+  color-info-transparent-disabled: color-basic-transparent-200,
+  color-info-transparent-focus-border: color-info-500,
+  color-info-transparent-hover-border: color-info-500,
+  color-info-transparent-default-border: color-info-500,
+  color-info-transparent-active-border: color-info-500,
+  color-info-transparent-disabled-border: color-basic-transparent-300,
+
+  color-warning-focus: color-warning-600,
+  color-warning-hover: color-warning-400,
+  color-warning-default: color-warning-500,
+  color-warning-active: color-warning-600,
+  color-warning-disabled: color-basic-transparent-300,
+  color-warning-focus-border: color-warning-700,
+  color-warning-hover-border: color-warning-hover,
+  color-warning-default-border: color-warning-default,
+  color-warning-active-border: color-warning-active,
+  color-warning-disabled-border: color-warning-disabled,
+
+  color-warning-transparent-focus: color-warning-transparent-300,
+  color-warning-transparent-hover: color-warning-transparent-200,
+  color-warning-transparent-default: color-warning-transparent-100,
+  color-warning-transparent-active: color-warning-transparent-300,
+  color-warning-transparent-disabled: color-basic-transparent-200,
+  color-warning-transparent-focus-border: color-warning-500,
+  color-warning-transparent-hover-border: color-warning-500,
+  color-warning-transparent-default-border: color-warning-500,
+  color-warning-transparent-active-border: color-warning-500,
+  color-warning-transparent-disabled-border: color-basic-transparent-300,
+
+  color-danger-focus: color-danger-600,
+  color-danger-hover: color-danger-400,
+  color-danger-default: color-danger-500,
+  color-danger-active: color-danger-600,
+  color-danger-disabled: color-basic-transparent-300,
+  color-danger-focus-border: color-danger-700,
+  color-danger-hover-border: color-danger-hover,
+  color-danger-default-border: color-danger-default,
+  color-danger-active-border: color-danger-active,
+  color-danger-disabled-border: color-danger-disabled,
+
+  color-danger-transparent-focus: color-danger-transparent-300,
+  color-danger-transparent-hover: color-danger-transparent-200,
+  color-danger-transparent-default: color-danger-transparent-100,
+  color-danger-transparent-active: color-danger-transparent-300,
+  color-danger-transparent-disabled: color-basic-transparent-200,
+  color-danger-transparent-focus-border: color-danger-500,
+  color-danger-transparent-hover-border: color-danger-500,
+  color-danger-transparent-default-border: color-danger-500,
+  color-danger-transparent-active-border: color-danger-500,
+  color-danger-transparent-disabled-border: color-basic-transparent-300,
+
+  color-control-focus: color-basic-300,
+  color-control-hover: color-basic-200,
+  color-control-default: color-basic-100,
+  color-control-active: color-basic-300,
+  color-control-disabled: color-basic-transparent-300,
+  color-control-focus-border: color-basic-500,
+  color-control-hover-border: color-control-hover,
+  color-control-default-border: color-control-default,
+  color-control-active-border: color-control-active,
+  color-control-disabled-border: color-control-disabled,
+
+  color-control-transparent-focus: color-basic-control-transparent-300,
+  color-control-transparent-hover: color-basic-control-transparent-200,
+  color-control-transparent-default: color-basic-control-transparent-100,
+  color-control-transparent-active: color-basic-control-transparent-300,
+  color-control-transparent-disabled: color-basic-transparent-200,
+  color-control-transparent-focus-border: color-basic-100,
+  color-control-transparent-hover-border: color-basic-100,
+  color-control-transparent-default-border: color-basic-100,
+  color-control-transparent-active-border: color-basic-100,
+  color-control-transparent-disabled-border: color-basic-transparent-300,
+
+  background-basic-color-1: color-basic-1000,
+  background-basic-color-2: color-basic-1000,
+  background-basic-color-3: color-basic-900,
+  background-basic-color-4: color-basic-1100,
+
+  background-alternative-color-1: color-basic-100,
+  background-alternative-color-2: color-basic-200,
+  background-alternative-color-3: color-basic-300,
+  background-alternative-color-4: color-basic-400,
+
+  border-basic-color-1: color-basic-800,
+  border-basic-color-2: color-basic-900,
+  border-basic-color-3: color-basic-1000,
+  border-basic-color-4: color-basic-1100,
+  border-basic-color-5: color-basic-1100,
+
+  border-alternative-color-1: color-basic-100,
+  border-alternative-color-2: color-basic-200,
+  border-alternative-color-3: color-basic-300,
+  border-alternative-color-4: color-basic-400,
+  border-alternative-color-5: color-basic-500,
+
+  border-primary-color-1: color-primary-500,
+  border-primary-color-2: color-primary-600,
+  border-primary-color-3: color-primary-700,
+  border-primary-color-4: color-primary-800,
+  border-primary-color-5: color-primary-900,
+
+  border-success-color-1: color-success-500,
+  border-success-color-2: color-success-600,
+  border-success-color-3: color-success-700,
+  border-success-color-4: color-success-800,
+  border-success-color-5: color-success-900,
+
+  border-info-color-1: color-info-500,
+  border-info-color-2: color-info-600,
+  border-info-color-3: color-info-700,
+  border-info-color-4: color-info-800,
+  border-info-color-5: color-info-900,
+
+  border-warning-color-1: color-warning-500,
+  border-warning-color-2: color-warning-600,
+  border-warning-color-3: color-warning-700,
+  border-warning-color-4: color-warning-800,
+  border-warning-color-5: color-warning-900,
+
+  border-danger-color-1: color-danger-500,
+  border-danger-color-2: color-danger-600,
+  border-danger-color-3: color-danger-700,
+  border-danger-color-4: color-danger-800,
+  border-danger-color-5: color-danger-900,
+
+  text-basic-color: color-basic-100,
+  text-alternate-color: color-basic-900,
+  text-control-color: color-basic-100,
+  text-disabled-color: color-basic-transparent-600,
+  text-hint-color: color-basic-600,
+
+  text-primary-color: color-primary-default,
+  text-primary-focus-color: color-primary-focus,
+  text-primary-hover-color: color-primary-hover,
+  text-primary-active-color: color-primary-active,
+  text-primary-disabled-color: color-primary-400,
+
+  text-success-color: color-success-default,
+  text-success-focus-color: color-success-focus,
+  text-success-hover-color: color-success-hover,
+  text-success-active-color: color-success-active,
+  text-success-disabled-color: color-success-400,
+
+  text-info-color: color-info-default,
+  text-info-focus-color: color-info-focus,
+  text-info-hover-color: color-info-hover,
+  text-info-active-color: color-info-active,
+  text-info-disabled-color: color-info-400,
+
+  text-warning-color: color-warning-default,
+  text-warning-focus-color: color-warning-focus,
+  text-warning-hover-color: color-warning-hover,
+  text-warning-active-color: color-warning-active,
+  text-warning-disabled-color: color-warning-400,
+
+  text-danger-color: color-danger-default,
+  text-danger-focus-color: color-danger-focus,
+  text-danger-hover-color: color-danger-hover,
+  text-danger-active-color: color-danger-active,
+  text-danger-disabled-color: color-danger-400,
+
+  font-family-primary: unquote('Roboto, sans-serif'),
+
+  shadow: unquote(
+    '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
+    ),
+  card-shadow: shadow,
+  header-shadow: unquote(
+    '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)'
+  ),
+
+  header-background-color: color-primary-default,
+  footer-background-color: color-primary-default,
+  header-text-color: text-basic-color,
+  footer-text-color: text-basic-color,
+  footer-text-highlight-color: footer-text-color,
+  sidebar-background-color: background-basic-color-2,
+
+  material-regular-font-weight: 400,
+  menu-text-font-weight: material-regular-font-weight,
+  menu-text-color: rgba(255, 255, 255, 0.7),
+  menu-item-hover-text-color: rgba(255, 255, 255, 0.7),
+  menu-item-hover-background-color: rgba(255, 255, 255, 0.04),
+  menu-item-active-background-color: rgba(0, 0, 0, 0.25),
+
+  menu-item-icon-color: rgba(255, 255, 255, 0.7),
+  menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
+
+  menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
+  menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
+  menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.25),
+
+  card-border-style: none,
+  card-background-color: color-basic-800,
+  card-divider-color: color-basic-700,
+
+  input-border-width: 0 0 1px 0,
+  input-basic-border-color: rgba(255, 255, 255, 0.7),
+  input-basic-focus-border-color: color-primary-focus,
+  input-basic-disabled-border-color: input-basic-border-color,
+  input-basic-hover-border-color: input-basic-border-color,
+  input-basic-background-color: transparent,
+  input-basic-focus-background-color: transparent,
+  input-basic-disabled-background-color: transparent,
+  input-basic-hover-background-color: transparent,
+  input-rectangle-border-radius: 0,
+  input-semi-round-border-radius: 0,
+  input-round-border-radius: 0,
+  input-primary-background-color: input-basic-background-color,
+  input-primary-focus-background-color: input-basic-focus-background-color,
+  input-primary-disabled-background-color: input-basic-disabled-background-color,
+  input-primary-hover-background-color: input-basic-hover-background-color,
+  input-info-background-color: input-basic-background-color,
+  input-info-focus-background-color: input-basic-focus-background-color,
+  input-info-disabled-background-color: input-basic-disabled-background-color,
+  input-info-hover-background-color: input-basic-hover-background-color,
+  input-success-background-color: input-basic-background-color,
+  input-success-focus-background-color: input-basic-focus-background-color,
+  input-success-disabled-background-color: input-basic-disabled-background-color,
+  input-success-hover-background-color: input-basic-hover-background-color,
+  input-warning-background-color: input-basic-background-color,
+  input-warning-focus-background-color: input-basic-focus-background-color,
+  input-warning-disabled-background-color: input-basic-disabled-background-color,
+  input-warning-hover-background-color: input-basic-hover-background-color,
+  input-danger-background-color: input-basic-background-color,
+  input-danger-focus-background-color: input-basic-focus-background-color,
+  input-danger-disabled-background-color: input-basic-disabled-background-color,
+  input-danger-hover-background-color: input-basic-hover-background-color,
+  input-control-background-color: input-basic-background-color,
+  input-control-focus-background-color: input-basic-focus-background-color,
+  input-control-disabled-background-color: input-basic-disabled-background-color,
+  input-control-hover-background-color: input-basic-hover-background-color,
+
+  select-tiny-text-font-weight: material-regular-font-weight,
+  select-small-text-font-weight: material-regular-font-weight,
+  select-medium-text-font-weight: material-regular-font-weight,
+  select-large-text-font-weight: material-regular-font-weight,
+  select-giant-text-font-weight: material-regular-font-weight,
+  select-rectangle-border-radius: 0,
+  select-semi-round-border-radius: 0,
+  select-round-border-radius: 0,
+  select-outline-border-width: 0 0 1px 0,
+  select-outline-basic-border-color: rgba(255, 255, 255, 0.7),
+  select-outline-basic-focus-border-color: color-primary-focus,
+  select-outline-basic-hover-border-color: select-outline-basic-border-color,
+  select-outline-basic-disabled-border-color: select-outline-basic-border-color,
+  select-outline-basic-background-color: transparent,
+  select-outline-basic-focus-background-color: transparent,
+  select-outline-basic-hover-background-color: transparent,
+  select-outline-basic-disabled-background-color: transparent,
+  select-outline-primary-background-color: select-outline-basic-background-color,
+  select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-success-background-color: select-outline-basic-background-color,
+  select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-info-background-color: select-outline-basic-background-color,
+  select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-warning-background-color: select-outline-basic-background-color,
+  select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-danger-background-color: select-outline-basic-background-color,
+  select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-control-background-color: select-outline-basic-background-color,
+  select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
+  option-list-shadow: shadow,
+  option-list-border-style: none,
+  option-list-adjacent-border-style: none,
+  option-background-color: color-basic-700,
+  option-hover-background-color: #4a4a4a,
+  option-focus-background-color: option-hover-background-color,
+  option-selected-background-color: #525252,
+  option-selected-hover-background-color: option-selected-background-color,
+  option-selected-focus-background-color: option-selected-background-color,
+  option-selected-text-color: text-primary-color,
+  option-selected-hover-text-color: text-primary-color,
+  option-selected-focus-text-color: text-primary-color,
+  option-tiny-text-font-weight: material-regular-font-weight,
+  option-small-text-font-weight: material-regular-font-weight,
+  option-medium-text-font-weight: material-regular-font-weight,
+  option-large-text-font-weight: material-regular-font-weight,
+  option-giant-text-font-weight: material-regular-font-weight
+);
+
+$nb-themes: nb-register-theme($theme, material-dark, dark);

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

@@ -0,0 +1,492 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * 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/mixins';
+
+$theme: (
+  color-primary-100: #e8cbfe,
+  color-primary-200: #ce97fd,
+  color-primary-300: #ae63f9,
+  color-primary-400: #903df4,
+  color-primary-500: #6200ee,
+  color-primary-600: #4b00cc,
+  color-primary-700: #3800ab,
+  color-primary-800: #27008a,
+  color-primary-900: #1b0072,
+
+  color-primary-transparent-100: rgba(98, 0, 238, 0.08),
+  color-primary-transparent-200: rgba(98, 0, 238, 0.16),
+  color-primary-transparent-300: rgba(98, 0, 238, 0.24),
+  color-primary-transparent-400: rgba(98, 0, 238, 0.32),
+  color-primary-transparent-500: rgba(98, 0, 238, 0.4),
+  color-primary-transparent-600: rgba(98, 0, 238, 0.48),
+
+  color-success-100: #edfbd1,
+  color-success-200: #d7f7a6,
+  color-success-300: #b4e775,
+  color-success-400: #8fcf50,
+  color-success-500: #60af20,
+  color-success-600: #499617,
+  color-success-700: #357d10,
+  color-success-800: #24650a,
+  color-success-900: #175306,
+
+  color-success-transparent-100: rgba(96, 175, 32, 0.08),
+  color-success-transparent-200: rgba(96, 175, 32, 0.16),
+  color-success-transparent-300: rgba(96, 175, 32, 0.24),
+  color-success-transparent-400: rgba(96, 175, 32, 0.32),
+  color-success-transparent-500: rgba(96, 175, 32, 0.4),
+  color-success-transparent-600: rgba(96, 175, 32, 0.48),
+
+  color-info-100: #ccf7fe,
+  color-info-200: #99e9fd,
+  color-info-300: #66d3f9,
+  color-info-400: #40bbf4,
+  color-info-500: #0495ee,
+  color-info-600: #0273cc,
+  color-info-700: #0256ab,
+  color-info-800: #013d8a,
+  color-info-900: #002b72,
+
+  color-info-transparent-100: rgba(4, 149, 238, 0.08),
+  color-info-transparent-200: rgba(4, 149, 238, 0.16),
+  color-info-transparent-300: rgba(4, 149, 238, 0.24),
+  color-info-transparent-400: rgba(4, 149, 238, 0.32),
+  color-info-transparent-500: rgba(4, 149, 238, 0.4),
+  color-info-transparent-600: rgba(4, 149, 238, 0.48),
+
+  color-warning-100: #fff3cd,
+  color-warning-200: #ffe49b,
+  color-warning-300: #ffd169,
+  color-warning-400: #ffbe43,
+  color-warning-500: #ff9f05,
+  color-warning-600: #db8003,
+  color-warning-700: #b76302,
+  color-warning-800: #934a01,
+  color-warning-900: #7a3800,
+
+  color-warning-transparent-100: rgba(255, 159, 5, 0.08),
+  color-warning-transparent-200: rgba(255, 159, 5, 0.16),
+  color-warning-transparent-300: rgba(255, 159, 5, 0.24),
+  color-warning-transparent-400: rgba(255, 159, 5, 0.32),
+  color-warning-transparent-500: rgba(255, 159, 5, 0.4),
+  color-warning-transparent-600: rgba(255, 159, 5, 0.48),
+
+  color-danger-100: #fbd2c8,
+  color-danger-200: #f79e94,
+  color-danger-300: #e75d5c,
+  color-danger-400: #cf3341,
+  color-danger-500: #b00020,
+  color-danger-600: #970029,
+  color-danger-700: #7e002e,
+  color-danger-800: #66002f,
+  color-danger-900: #54002f,
+
+  color-danger-transparent-100: rgba(176, 0, 32, 0.08),
+  color-danger-transparent-200: rgba(176, 0, 32, 0.16),
+  color-danger-transparent-300: rgba(176, 0, 32, 0.24),
+  color-danger-transparent-400: rgba(176, 0, 32, 0.32),
+  color-danger-transparent-500: rgba(176, 0, 32, 0.4),
+  color-danger-transparent-600: rgba(176, 0, 32, 0.48),
+
+  color-basic-100: #ffffff,
+  color-basic-200: #f5f5f5,
+  color-basic-300: #ebebeb,
+  color-basic-400: #e0e0e0,
+  color-basic-500: #b3b3b3,
+  color-basic-600: #838383,
+  color-basic-700: #636363,
+  color-basic-800: #424242,
+  color-basic-900: #242424,
+  color-basic-1000: #1b1b1b,
+  color-basic-1100: #000000,
+
+  color-basic-transparent-100: rgba(131, 131, 131, 0.08),
+  color-basic-transparent-200: rgba(131, 131, 131, 0.16),
+  color-basic-transparent-300: rgba(131, 131, 131, 0.24),
+  color-basic-transparent-400: rgba(131, 131, 131, 0.32),
+  color-basic-transparent-500: rgba(131, 131, 131, 0.4),
+  color-basic-transparent-600: rgba(131, 131, 131, 0.48),
+
+  color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
+  color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
+  color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
+  color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
+  color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
+  color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
+
+  color-basic-focus: color-basic-400,
+  color-basic-hover: color-basic-200,
+  color-basic-default: color-basic-300,
+  color-basic-active: color-basic-400,
+  color-basic-disabled: color-basic-transparent-300,
+  color-basic-focus-border: color-basic-500,
+  color-basic-hover-border: color-basic-hover,
+  color-basic-default-border: color-basic-default,
+  color-basic-active-border: color-basic-active,
+  color-basic-disabled-border: color-basic-disabled,
+
+  color-basic-transparent-focus: color-basic-transparent-300,
+  color-basic-transparent-hover: color-basic-transparent-200,
+  color-basic-transparent-default: color-basic-transparent-100,
+  color-basic-transparent-active: color-basic-transparent-300,
+  color-basic-transparent-disabled: color-basic-transparent-200,
+  color-basic-transparent-focus-border: color-basic-500,
+  color-basic-transparent-hover-border: color-basic-500,
+  color-basic-transparent-default-border: color-basic-500,
+  color-basic-transparent-active-border: color-basic-500,
+  color-basic-transparent-disabled-border: color-basic-transparent-300,
+
+  color-primary-focus: color-primary-600,
+  color-primary-hover: color-primary-400,
+  color-primary-default: color-primary-500,
+  color-primary-active: color-primary-600,
+  color-primary-disabled: color-basic-transparent-300,
+  color-primary-focus-border: color-primary-700,
+  color-primary-hover-border: color-primary-hover,
+  color-primary-default-border: color-primary-default,
+  color-primary-active-border: color-primary-active,
+  color-primary-disabled-border: color-primary-disabled,
+
+  color-primary-transparent-focus: color-primary-transparent-300,
+  color-primary-transparent-hover: color-primary-transparent-200,
+  color-primary-transparent-default: color-primary-transparent-100,
+  color-primary-transparent-active: color-primary-transparent-300,
+  color-primary-transparent-disabled: color-basic-transparent-200,
+  color-primary-transparent-focus-border: color-primary-500,
+  color-primary-transparent-hover-border: color-primary-500,
+  color-primary-transparent-default-border: color-primary-500,
+  color-primary-transparent-active-border: color-primary-500,
+  color-primary-transparent-disabled-border: color-basic-transparent-300,
+
+  color-success-focus: color-success-600,
+  color-success-hover: color-success-400,
+  color-success-default: color-success-500,
+  color-success-active: color-success-600,
+  color-success-disabled: color-basic-transparent-300,
+  color-success-focus-border: color-success-700,
+  color-success-hover-border: color-success-hover,
+  color-success-default-border: color-success-default,
+  color-success-active-border: color-success-active,
+  color-success-disabled-border: color-success-disabled,
+
+  color-success-transparent-focus: color-success-transparent-300,
+  color-success-transparent-hover: color-success-transparent-200,
+  color-success-transparent-default: color-success-transparent-100,
+  color-success-transparent-active: color-success-transparent-300,
+  color-success-transparent-disabled: color-basic-transparent-200,
+  color-success-transparent-focus-border: color-success-500,
+  color-success-transparent-hover-border: color-success-500,
+  color-success-transparent-default-border: color-success-500,
+  color-success-transparent-active-border: color-success-500,
+  color-success-transparent-disabled-border: color-basic-transparent-300,
+
+  color-info-focus: color-info-600,
+  color-info-hover: color-info-400,
+  color-info-default: color-info-500,
+  color-info-active: color-info-600,
+  color-info-disabled: color-basic-transparent-300,
+  color-info-focus-border: color-info-700,
+  color-info-hover-border: color-info-hover,
+  color-info-default-border: color-info-default,
+  color-info-active-border: color-info-active,
+  color-info-disabled-border: color-info-disabled,
+
+  color-info-transparent-focus: color-info-transparent-300,
+  color-info-transparent-hover: color-info-transparent-200,
+  color-info-transparent-default: color-info-transparent-100,
+  color-info-transparent-active: color-info-transparent-300,
+  color-info-transparent-disabled: color-basic-transparent-200,
+  color-info-transparent-focus-border: color-info-500,
+  color-info-transparent-hover-border: color-info-500,
+  color-info-transparent-default-border: color-info-500,
+  color-info-transparent-active-border: color-info-500,
+  color-info-transparent-disabled-border: color-basic-transparent-300,
+
+  color-warning-focus: color-warning-600,
+  color-warning-hover: color-warning-400,
+  color-warning-default: color-warning-500,
+  color-warning-active: color-warning-600,
+  color-warning-disabled: color-basic-transparent-300,
+  color-warning-focus-border: color-warning-700,
+  color-warning-hover-border: color-warning-hover,
+  color-warning-default-border: color-warning-default,
+  color-warning-active-border: color-warning-active,
+  color-warning-disabled-border: color-warning-disabled,
+
+  color-warning-transparent-focus: color-warning-transparent-300,
+  color-warning-transparent-hover: color-warning-transparent-200,
+  color-warning-transparent-default: color-warning-transparent-100,
+  color-warning-transparent-active: color-warning-transparent-300,
+  color-warning-transparent-disabled: color-basic-transparent-200,
+  color-warning-transparent-focus-border: color-warning-500,
+  color-warning-transparent-hover-border: color-warning-500,
+  color-warning-transparent-default-border: color-warning-500,
+  color-warning-transparent-active-border: color-warning-500,
+  color-warning-transparent-disabled-border: color-basic-transparent-300,
+
+  color-danger-focus: color-danger-600,
+  color-danger-hover: color-danger-400,
+  color-danger-default: color-danger-500,
+  color-danger-active: color-danger-600,
+  color-danger-disabled: color-basic-transparent-300,
+  color-danger-focus-border: color-danger-700,
+  color-danger-hover-border: color-danger-hover,
+  color-danger-default-border: color-danger-default,
+  color-danger-active-border: color-danger-active,
+  color-danger-disabled-border: color-danger-disabled,
+
+  color-danger-transparent-focus: color-danger-transparent-300,
+  color-danger-transparent-hover: color-danger-transparent-200,
+  color-danger-transparent-default: color-danger-transparent-100,
+  color-danger-transparent-active: color-danger-transparent-300,
+  color-danger-transparent-disabled: color-basic-transparent-200,
+  color-danger-transparent-focus-border: color-danger-500,
+  color-danger-transparent-hover-border: color-danger-500,
+  color-danger-transparent-default-border: color-danger-500,
+  color-danger-transparent-active-border: color-danger-500,
+  color-danger-transparent-disabled-border: color-basic-transparent-300,
+
+  color-control-focus: color-basic-300,
+  color-control-hover: color-basic-200,
+  color-control-default: color-basic-100,
+  color-control-active: color-basic-300,
+  color-control-disabled: color-basic-transparent-300,
+  color-control-focus-border: color-basic-500,
+  color-control-hover-border: color-control-hover,
+  color-control-default-border: color-control-default,
+  color-control-active-border: color-control-active,
+  color-control-disabled-border: color-control-disabled,
+
+  color-control-transparent-focus: color-basic-control-transparent-300,
+  color-control-transparent-hover: color-basic-control-transparent-200,
+  color-control-transparent-default: color-basic-control-transparent-100,
+  color-control-transparent-active: color-basic-control-transparent-300,
+  color-control-transparent-disabled: color-basic-transparent-200,
+  color-control-transparent-focus-border: color-basic-100,
+  color-control-transparent-hover-border: color-basic-100,
+  color-control-transparent-default-border: color-basic-100,
+  color-control-transparent-active-border: color-basic-100,
+  color-control-transparent-disabled-border: color-basic-transparent-300,
+
+  background-basic-color-1: color-basic-100,
+  background-basic-color-2: color-basic-300,
+  background-basic-color-3: #fafafa,
+  background-basic-color-4: color-basic-400,
+
+  background-alternative-color-1: color-basic-800,
+  background-alternative-color-2: color-basic-900,
+  background-alternative-color-3: color-basic-1000,
+  background-alternative-color-4: color-basic-1100,
+
+  border-basic-color-1: color-basic-100,
+  border-basic-color-2: color-basic-200,
+  border-basic-color-3: color-basic-300,
+  border-basic-color-4: color-basic-400,
+  border-basic-color-5: color-basic-500,
+
+  border-alternative-color-1: color-basic-800,
+  border-alternative-color-2: color-basic-900,
+  border-alternative-color-3: color-basic-1000,
+  border-alternative-color-4: color-basic-1100,
+  border-alternative-color-5: color-basic-1100,
+
+  border-primary-color-1: color-primary-500,
+  border-primary-color-2: color-primary-600,
+  border-primary-color-3: color-primary-700,
+  border-primary-color-4: color-primary-800,
+  border-primary-color-5: color-primary-900,
+
+  border-success-color-1: color-success-500,
+  border-success-color-2: color-success-600,
+  border-success-color-3: color-success-700,
+  border-success-color-4: color-success-800,
+  border-success-color-5: color-success-900,
+
+  border-info-color-1: color-info-500,
+  border-info-color-2: color-info-600,
+  border-info-color-3: color-info-700,
+  border-info-color-4: color-info-800,
+  border-info-color-5: color-info-900,
+
+  border-warning-color-1: color-warning-500,
+  border-warning-color-2: color-warning-600,
+  border-warning-color-3: color-warning-700,
+  border-warning-color-4: color-warning-800,
+  border-warning-color-5: color-warning-900,
+
+  border-danger-color-1: color-danger-500,
+  border-danger-color-2: color-danger-600,
+  border-danger-color-3: color-danger-700,
+  border-danger-color-4: color-danger-800,
+  border-danger-color-5: color-danger-900,
+
+  text-basic-color: color-basic-800,
+  text-alternate-color: color-basic-100,
+  text-control-color: color-basic-100,
+  text-disabled-color: color-basic-transparent-600,
+  text-hint-color: color-basic-600,
+
+  text-primary-color: color-primary-default,
+  text-primary-focus-color: color-primary-focus,
+  text-primary-hover-color: color-primary-hover,
+  text-primary-active-color: color-primary-active,
+  text-primary-disabled-color: color-primary-400,
+
+  text-success-color: color-success-default,
+  text-success-focus-color: color-success-focus,
+  text-success-hover-color: color-success-hover,
+  text-success-active-color: color-success-active,
+  text-success-disabled-color: color-success-400,
+
+  text-info-color: color-info-default,
+  text-info-focus-color: color-info-focus,
+  text-info-hover-color: color-info-hover,
+  text-info-active-color: color-info-active,
+  text-info-disabled-color: color-info-400,
+
+  text-warning-color: color-warning-default,
+  text-warning-focus-color: color-warning-focus,
+  text-warning-hover-color: color-warning-hover,
+  text-warning-active-color: color-warning-active,
+  text-warning-disabled-color: color-warning-400,
+
+  text-danger-color: color-danger-default,
+  text-danger-focus-color: color-danger-focus,
+  text-danger-hover-color: color-danger-hover,
+  text-danger-active-color: color-danger-active,
+  text-danger-disabled-color: color-danger-400,
+
+  font-family-primary: unquote('Roboto, sans-serif'),
+
+  shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
+  card-shadow: shadow,
+  header-shadow: unquote(
+    '0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
+  ),
+
+  header-background-color: color-primary-default,
+  footer-background-color: color-primary-default,
+  header-text-color: text-alternate-color,
+  footer-text-color: text-alternate-color,
+  footer-text-highlight-color: footer-text-color,
+  sidebar-background-color: background-basic-color-2,
+
+  menu-text-font-weight: 400,
+  menu-text-color: rgba(0, 0, 0, 0.87),
+  menu-item-hover-text-color: rgba(0, 0, 0, 0.87),
+  menu-item-hover-background-color: rgba(0, 0, 0, 0.04),
+  menu-item-active-background-color: rgba(0, 0, 0, 0.08),
+
+  menu-item-icon-color: rgba(0, 0, 0, 0.87),
+  menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
+
+  menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
+  menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
+  menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08),
+
+  card-border-style: none,
+  card-divider-color: color-basic-200,
+
+  input-border-width: 0 0 1px 0,
+  input-basic-border-color: rgba(0, 0, 0, 0.42),
+  input-basic-focus-border-color: color-primary-focus,
+  input-basic-disabled-border-color: rgba(0, 0, 0, 0.42),
+  input-basic-hover-border-color: rgba(0, 0, 0, 0.42),
+  input-basic-background-color: transparent,
+  input-basic-focus-background-color: transparent,
+  input-basic-disabled-background-color: transparent,
+  input-basic-hover-background-color: transparent,
+  input-rectangle-border-radius: 0,
+  input-semi-round-border-radius: 0,
+  input-round-border-radius: 0,
+  input-primary-background-color: input-basic-background-color,
+  input-primary-focus-background-color: input-basic-focus-background-color,
+  input-primary-disabled-background-color: input-basic-disabled-background-color,
+  input-primary-hover-background-color: input-basic-hover-background-color,
+  input-info-background-color: input-basic-background-color,
+  input-info-focus-background-color: input-basic-focus-background-color,
+  input-info-disabled-background-color: input-basic-disabled-background-color,
+  input-info-hover-background-color: input-basic-hover-background-color,
+  input-success-background-color: input-basic-background-color,
+  input-success-focus-background-color: input-basic-focus-background-color,
+  input-success-disabled-background-color: input-basic-disabled-background-color,
+  input-success-hover-background-color: input-basic-hover-background-color,
+  input-warning-background-color: input-basic-background-color,
+  input-warning-focus-background-color: input-basic-focus-background-color,
+  input-warning-disabled-background-color: input-basic-disabled-background-color,
+  input-warning-hover-background-color: input-basic-hover-background-color,
+  input-danger-background-color: input-basic-background-color,
+  input-danger-focus-background-color: input-basic-focus-background-color,
+  input-danger-disabled-background-color: input-basic-disabled-background-color,
+  input-danger-hover-background-color: input-basic-hover-background-color,
+  input-control-background-color: input-basic-background-color,
+  input-control-focus-background-color: input-basic-focus-background-color,
+  input-control-disabled-background-color: input-basic-disabled-background-color,
+  input-control-hover-background-color: input-basic-hover-background-color,
+
+  select-tiny-text-font-weight: material-regular-font-weight,
+  select-small-text-font-weight: material-regular-font-weight,
+  select-medium-text-font-weight: material-regular-font-weight,
+  select-large-text-font-weight: material-regular-font-weight,
+  select-giant-text-font-weight: material-regular-font-weight,
+  select-rectangle-border-radius: 0,
+  select-semi-round-border-radius: 0,
+  select-round-border-radius: 0,
+  select-outline-border-width: 0 0 1px 0,
+  select-outline-basic-border-color: rgba(0, 0, 0, 0.42),
+  select-outline-basic-focus-border-color: color-primary-focus,
+  select-outline-basic-hover-border-color: select-outline-basic-border-color,
+  select-outline-basic-disabled-border-color: select-outline-basic-border-color,
+  select-outline-basic-background-color: transparent,
+  select-outline-basic-focus-background-color: transparent,
+  select-outline-basic-hover-background-color: transparent,
+  select-outline-basic-disabled-background-color: transparent,
+  select-outline-primary-background-color: select-outline-basic-background-color,
+  select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-success-background-color: select-outline-basic-background-color,
+  select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-info-background-color: select-outline-basic-background-color,
+  select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-warning-background-color: select-outline-basic-background-color,
+  select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-danger-background-color: select-outline-basic-background-color,
+  select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
+  select-outline-control-background-color: select-outline-basic-background-color,
+  select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
+  select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
+  select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
+  option-list-shadow: shadow,
+  option-list-border-style: none,
+  option-list-adjacent-border-style: none,
+  option-background-color: color-basic-100,
+  option-hover-background-color: color-basic-200,
+  option-focus-background-color: option-hover-background-color,
+  option-selected-background-color: color-basic-300,
+  option-selected-hover-background-color: option-selected-background-color,
+  option-selected-focus-background-color: option-selected-background-color,
+  option-selected-text-color: text-primary-color,
+  option-selected-hover-text-color: text-primary-color,
+  option-selected-focus-text-color: text-primary-color,
+  option-tiny-text-font-weight: material-regular-font-weight,
+  option-small-text-font-weight: material-regular-font-weight,
+  option-medium-text-font-weight: material-regular-font-weight,
+  option-large-text-font-weight: material-regular-font-weight,
+  option-giant-text-font-weight: material-regular-font-weight
+);
+
+$nb-themes: nb-register-theme($theme, material-light, default);

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

@@ -0,0 +1,44 @@
+@mixin material-overrides() {
+  @include nb-for-themes(material-dark, material-light) {
+    nb-layout-header {
+      nb-actions, .logo-container {
+        nb-icon, .user-name {
+          color: nb-theme(color-basic-100) !important;
+        }
+      }
+  
+      .select-button {
+        background-color: nb-theme(background-basic-color-3) !important;
+      }
+    }
+
+    nb-sidebar {
+      transition: width 0.3s;
+
+      .main-container {
+        transition: width 0.3s;
+      }
+    }
+
+    nb-card {
+      border-bottom-left-radius: 0.125rem;
+      border-bottom-right-radius: 0.125rem;
+
+      nb-card-header, .tabset {
+        background-color: nb-theme(card-divider-color);
+      }
+    }
+
+    [nbinput] {
+      font-weight: 400;
+
+      &.status-basic:focus:hover {
+        border-color: nb-theme(color-primary-focus) !important;
+      }
+    }
+
+    [nbbutton] {
+      box-shadow: none !important;
+    }
+  }
+}

src/app/@theme/styles/material/theme.material-dark.ts

@@ -0,0 +1,361 @@
+import { NbJSThemeOptions } from '@nebular/theme';
+
+const palette = {
+  primary: '#e91d63',
+  success: '#60af20',
+  info: '#0495ee',
+  warning: '#ff9f05',
+  danger: '#b00020',
+};
+
+export const baseTheme: NbJSThemeOptions = {
+  name: 'material-dark',
+  base: 'dark',
+  variables: {
+    fontMain: 'Roboto, sans-serif',
+    fontSecondary: 'Roboto, sans-serif',
+
+    bg: '#383838',
+    bg2: '#292929',
+    bg3: '#1f1f1f',
+    bg4: '#141414',
+
+    border: '#383838',
+    border2: '#292929',
+    border3: '#1f1f1f',
+    border4: '#141414',
+    border5: '#141414',
+
+    fg: '#808080',
+    fgHeading: '#ffffff',
+    fgText: '#ffffff',
+    fgHighlight: palette.primary,
+    layoutBg: '#1f1f1f',
+    separator: '#1f1f1f',
+
+    primary: palette.primary,
+    success: palette.success,
+    info: palette.info,
+    warning: palette.warning,
+    danger: palette.danger,
+
+    primaryLight: '#f24681',
+    successLight: '#8fcf50',
+    infoLight: '#40bbf4',
+    warningLight: '#ffbe43',
+    dangerLight: '#cf3341',
+  },
+};
+
+const baseThemeVariables = baseTheme.variables;
+
+export const MATERIAL_DARK_THEME = {
+  name: 'material-dark',
+  base: 'default',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

src/app/@theme/styles/material/theme.material-light.ts

@@ -0,0 +1,361 @@
+import { NbJSThemeOptions } from '@nebular/theme';
+
+const palette = {
+  primary: '#6200ee',
+  success: '#60af20',
+  info: '#0495ee',
+  warning: '#ff9f05',
+  danger: '#b00020',
+};
+
+export const baseTheme: NbJSThemeOptions = {
+  name: 'material-light',
+  base: 'default',
+  variables: {
+    fontMain: 'Roboto, sans-serif',
+    fontSecondary: 'Roboto, sans-serif',
+
+    bg: '#ffffff',
+    bg2: '#f5f5f5',
+    bg3: '#ebebeb',
+    bg4: '#e0e0e0',
+
+    border: '#ffffff',
+    border2: '#f5f5f5',
+    border3: '#ebebeb',
+    border4: '#e0e0e0',
+    border5: '#b3b3b3',
+
+    fg: '#838383',
+    fgHeading: '#1a2138',
+    fgText: '#1a2138',
+    fgHighlight: palette.primary,
+    layoutBg: '#ebebeb',
+    separator: '#ebebeb',
+
+    primary: palette.primary,
+    success: palette.success,
+    info: palette.info,
+    warning: palette.warning,
+    danger: palette.danger,
+
+    primaryLight: '#903df4',
+    successLight: '#8fcf50',
+    infoLight: '#40bbf4',
+    warningLight: '#ffbe43',
+    dangerLight: '#cf3341',
+  },
+};
+
+const baseThemeVariables = baseTheme.variables;
+
+export const MATERIAL_LIGHT_THEME = {
+  name: 'material-light',
+  base: 'default',
+  variables: {
+    temperature: {
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
+    },
+
+    solar: {
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      secondSeriesFill: baseThemeVariables.bg2,
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      lineBg: baseThemeVariables.border4,
+      lineShadowBlur: '1',
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
+    },
+
+    electricity: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: baseThemeVariables.fgText,
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
+    },
+
+    profitBarAnimationEchart: {
+      textColor: baseThemeVariables.fgText,
+
+      firstAnimationBarColor: baseThemeVariables.primary,
+      secondAnimationBarColor: baseThemeVariables.success,
+
+      splitLineStyleOpacity: '1',
+      splitLineStyleWidth: '1',
+      splitLineStyleColor: baseThemeVariables.separator,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+
+    trafficBarEchart: {
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
+      shadowBlur: '0',
+
+      axisTextColor: baseThemeVariables.fgText,
+      axisFontSize: '12',
+
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+    },
+
+    countryOrders: {
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
+      countryBorderWidth: '1',
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
+      hoveredCountryBorderWidth: '1',
+
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
+      chartAxisFontSize: '16',
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
+
+      chartLineBottomShadowColor: baseThemeVariables.primary,
+
+      chartInnerLineColor: baseThemeVariables.bg2,
+    },
+
+    echarts: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: baseThemeVariables.primary,
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: baseThemeVariables.separator,
+      textColor: baseThemeVariables.fgText,
+    },
+
+    orders: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'solid',
+      lineWidth: '4',
+
+      // first line
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
+      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // second line
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+
+      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
+      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
+      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+      // third line
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+
+      thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
+      thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
+      thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    profit: {
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
+      areaOpacity: '1',
+
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+
+      // first bar
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
+      firstLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // second bar
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
+      secondLineShadow: 'rgba(0, 0, 0, 0)',
+
+      // third bar
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
+      thirdLineShadow: 'rgba(0, 0, 0, 0)',
+    },
+
+    orderProfitLegend: {
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      thirdItem: baseThemeVariables.bg3,
+    },
+
+    visitors: {
+      tooltipBg: baseThemeVariables.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
+
+      axisLineColor: baseThemeVariables.border4,
+      axisFontSize: '16',
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,
+
+      itemBorderColor: baseThemeVariables.primary,
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,
+
+      innerLineStyle: 'solid',
+      innerLineWidth: '1',
+
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
+    },
+
+    visitorsLegend: {
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
+    },
+
+    visitorsPie: {
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+      firstPieRadius: ['70%', '90%'],
+
+      secondPieGradientLeft: baseThemeVariables.warning,
+      secondPieGradientRight: baseThemeVariables.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+      secondPieRadius: ['60%', '97%'],
+      shadowOffsetX: '0',
+      shadowOffsetY: '0',
+    },
+
+    visitorsPieLegend: {
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
+    },
+
+    earningPie: {
+      radius: ['65%', '100%'],
+      center: ['50%', '50%'],
+
+      fontSize: '22',
+
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
+      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+    },
+
+    earningLine: {
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,
+
+      tooltipTextColor: baseThemeVariables.fgText,
+      tooltipFontWeight: 'normal',
+      tooltipFontSize: '16',
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
+      tooltipBorderWidth: '1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+    },
+  },
+} as NbJSThemeOptions;

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

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800&display=swap');
 
 // themes - our custom or/and out of the box themes
 @import 'themes';
@@ -12,11 +13,14 @@
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/grid';
 
+@import './material/angular-material';
+
 // loading progress bar theme
 @import './pace.theme';
 
 @import './layout';
 @import './overrides';
+@import './material/material-overrides';
 
 // install the framework and custom global styles
 @include nb-install() {
@@ -29,5 +33,8 @@
   // loading progress bar
   @include ngx-pace-theme();
 
+  @include angular-material();
+
   @include nb-overrides();
+  @include material-overrides();
 };

src/app/@theme/styles/themes.scss

@@ -2,6 +2,9 @@
 @import '~@nebular/theme/styles/theming';
 // @nebular out of the box themes
 @import '~@nebular/theme/styles/themes';
+// material themes
+@import './material/material-dark';
+@import './material/material-light';
 
 $nb-themes: nb-register-theme((
   layout-padding-top: 2.25rem,
@@ -86,3 +89,45 @@ $nb-themes: nb-register-theme((
   slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), dark, dark);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
+), material-light, material-light);
+
+$nb-themes: nb-register-theme((
+  layout-padding-top: 2.25rem,
+
+  menu-item-icon-margin: 0 0.5rem 0 0,
+
+  card-height-tiny: 13.5rem,
+  card-height-small: 21.1875rem,
+  card-height-medium: 28.875rem,
+  card-height-large: 36.5625rem,
+  card-height-giant: 44.25rem,
+  card-margin-bottom: 1.875rem,
+  card-header-with-select-padding-top: 0.5rem,
+  card-header-with-select-padding-bottom: 0.5rem,
+
+  select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #292929,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
+), material-dark, material-dark);

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

@@ -1,5 +1,6 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatRippleModule } from '@angular/material/core';
 import {
   NbActionsModule,
   NbLayoutModule,
@@ -45,6 +46,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/material/theme.material-light';
+import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
 
 const NB_MODULES = [
   NbLayoutModule,
@@ -85,20 +88,20 @@ const PIPES = [
 ];
 
 @NgModule({
-  imports: [CommonModule, ...NB_MODULES],
+  imports: [CommonModule, MatRippleModule, ...NB_MODULES],
-  exports: [CommonModule, ...PIPES, ...COMPONENTS],
+  exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<ThemeModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(
           {
             name: 'default',
           },
-          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
         ).providers,
       ],
     };

src/app/app-routing.module.ts

@@ -10,11 +10,11 @@ import {
 } from '@nebular/auth';
 import {ThemeGuard} from './@core/guard/theme.guard';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'pages',
     canActivate: [ThemeGuard],
-    loadChildren: () => import('app/pages/pages.module')
+    loadChildren: () => import('./pages/pages.module')
       .then(m => m.PagesModule),
   },
   {

src/app/app.module.ts

@@ -28,9 +28,6 @@ import {
     BrowserAnimationsModule,
     HttpClientModule,
     AppRoutingModule,
-
-    ThemeModule.forRoot(),
-
     NbSidebarModule.forRoot(),
     NbMenuModule.forRoot(),
     NbDatepickerModule.forRoot(),
@@ -41,6 +38,7 @@ import {
       messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
     }),
     CoreModule.forRoot(),
+    ThemeModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/dashboard/contacts/contacts.component.html

@@ -3,7 +3,7 @@
 
     <nb-tab tabTitle="Contacts">
       <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of contacts">
+        <nb-list-item matRipple class="contact" *ngFor="let c of contacts">
           <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
           <nb-icon icon="phone-outline" pack="eva"></nb-icon>
         </nb-list-item>
@@ -12,7 +12,7 @@
 
     <nb-tab tabTitle="Recent">
       <nb-list>
-        <nb-list-item class="contact" *ngFor="let c of recent">
+        <nb-list-item matRipple class="contact" *ngFor="let c of recent">
           <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
           <span class="caption">{{ c.time | date: 'shortTime' }}</span>
         </nb-list-item>

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

@@ -56,6 +56,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
     cosmic: CardSettings[];
     corporate: CardSettings[];
     dark: CardSettings[];
+    'material-dark': CardSettings[];
+    'material-light': CardSettings[];
   } = {
     default: this.commonStatusCardsSet,
     cosmic: this.commonStatusCardsSet,
@@ -78,6 +80,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
       },
     ],
     dark: this.commonStatusCardsSet,
+    'material-dark': this.commonStatusCardsSet,
+    'material-light': this.commonStatusCardsSet,
   };
 
   constructor(private themeService: NbThemeService,

src/app/pages/dashboard/electricity/electricity.component.html

@@ -37,8 +37,8 @@
         <span>291 <span class="caption">USD</span></span>
       </span>
 
-      <nb-select [(selected)]="type" class="type-select">
+      <nb-select matRipple [(selected)]="type" class="type-select">
-        <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+        <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
       </nb-select>
     </nb-card-header>
 

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

@@ -7,6 +7,7 @@
     border-width: 0;
     box-shadow: none;
     margin: 0;
+    height: 100%;
   }
 
   nb-card-header {

src/app/pages/dashboard/security-cameras/security-cameras.component.html

@@ -22,7 +22,7 @@
   <div class="grid-container">
 
     <div class="single-view" *ngIf="isSingleView">
-      <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
+      <div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
         <span class="camera-name">{{ selectedCamera.title }}</span>
       </div>
     </div>
@@ -40,19 +40,19 @@
 
   <nb-card-footer>
     <nb-actions [size]="actionSize" fullWidth>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
         Pause
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="list-outline" pack="eva"></nb-icon>
         Logs
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="search-outline" pack="eva"></nb-icon>
         Search
       </nb-action>
-      <nb-action>
+      <nb-action matRipple>
         <nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
         Setup
       </nb-action>

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -13,7 +13,7 @@
 
   .single-view-button {
     .nb-square {
-      font-size: 1.25rem;
+      font-size: 1rem;
     }
 
     @include nb-ltr {
@@ -72,6 +72,10 @@
     background-size: cover;
     position: relative;
 
+    &:not(.single) {
+      cursor: pointer;
+    }
+
     &::before {
       background-color: rgba(255, 255, 255, 0.1);
       content: '';
@@ -96,6 +100,9 @@
   }
 
   nb-action {
+    cursor: pointer;
+    border-radius: 2px;
+
     nb-icon {
       @include nb-ltr(margin-right, 0.5rem);
       @include nb-rtl(margin-left, 0.5rem);

src/app/pages/dashboard/status-card/status-card.component.scss

@@ -5,7 +5,7 @@
     flex-direction: row;
     align-items: center;
     height: 6rem;
-    overflow: visible;
+    cursor: pointer;
 
     .icon-container {
       height: 100%;

src/app/pages/dashboard/status-card/status-card.component.ts

@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
   selector: 'ngx-status-card',
   styleUrls: ['./status-card.component.scss'],
   template: `
-    <nb-card (click)="on = !on" [ngClass]="{'off': !on}">
+    <nb-card matRipple (click)="on = !on" [ngClass]="{'off': !on}">
       <div class="icon-container">
         <div class="icon status-{{ type }}">
           <ng-content></ng-content>

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html

@@ -42,6 +42,6 @@
   <ng-content></ng-content>
 </div>
 
-<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
+<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
   <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
 </button>

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss

@@ -39,25 +39,27 @@
     position: absolute;
     width: 5.25rem;
     height: 5.25rem;
-    background-color: nb-theme(card-background-color);
+    background-color: nb-theme(card-background-color) !important;
     border-radius: 50%;
     bottom: 2%;
     left: 50%;
     transform: translate(-50%, 50%);
     z-index: 2;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
     cursor: pointer;
     border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
 
     &.on {
-      color: nb-theme(text-hint-color);
+      color: nb-theme(color-primary-default);
     }
   }
 
   .power-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.625rem;
+    left: 50%;
+    margin-left: -0.625rem;
     font-size: 3rem;
   }
 }

src/app/pages/dashboard/temperature/temperature.component.html

@@ -20,16 +20,16 @@
       </div>
 
       <nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
-        <nb-radio value="cool">
+        <nb-radio matRipple value="cool">
           <i class="nb-snowy-circled"></i>
         </nb-radio>
-        <nb-radio value="warm">
+        <nb-radio matRipple value="warm">
           <i class="nb-sunny-circled"></i>
         </nb-radio>
-        <nb-radio value="heat">
+        <nb-radio matRipple value="heat">
           <i class="nb-flame-circled"></i>
         </nb-radio>
-        <nb-radio value="fan">
+        <nb-radio matRipple value="fan">
           <i class="nb-loop-circled"></i>
         </nb-radio>
       </nb-radio-group>
@@ -51,16 +51,16 @@
       </div>
 
       <nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
-        <nb-radio value="cool">
+        <nb-radio matRipple value="cool">
           <i class="nb-snowy-circled"></i>
         </nb-radio>
-        <nb-radio value="warm">
+        <nb-radio matRipple value="warm">
           <i class="nb-sunny-circled"></i>
         </nb-radio>
-        <nb-radio value="heat">
+        <nb-radio matRipple value="heat">
           <i class="nb-flame-circled"></i>
         </nb-radio>
-        <nb-radio value="fan">
+        <nb-radio matRipple value="fan">
           <i class="nb-loop-circled"></i>
         </nb-radio>
       </nb-radio-group>

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

@@ -12,8 +12,8 @@ import { TrafficChartData } from '../../../@core/data/traffic-chart';
       <nb-card-header>
         <span>Traffic Consumption</span>
 
-        <nb-select [(selected)]="type">
+        <nb-select matRipple [(selected)]="type">
-          <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+          <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
         </nb-select>
       </nb-card-header>
 

src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html

@@ -1,7 +1,7 @@
 <ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
 
-<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
+<nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
-  <nb-option *ngFor="let period of types" [value]="period">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">
     {{ period }}
   </nb-option>
 </nb-select>

src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss

@@ -11,9 +11,9 @@
 
   ngx-legend-chart,
   .period-select {
-    padding-top: 1rem;
+    margin-top: 1rem;
-    @include nb-ltr(padding-left, 0.5rem);
+    @include nb-ltr(margin-left, 0.5rem);
-    @include nb-rtl(padding-right, 0.5rem);
+    @include nb-rtl(margin-right, 0.5rem);
   }
 
   @include media-breakpoint-up(md) {

src/app/pages/e-commerce/charts-panel/charts-panel.component.scss

@@ -6,6 +6,10 @@ $legend-canceled-color: #3f4fda;
 
 @include nb-install-component() {
 
+  nb-card {
+    overflow: hidden;
+  }
+
   nb-tabset {
     display: flex;
     flex-direction: column;

src/app/pages/e-commerce/country-orders/country-orders.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 import { CountryOrderData } from '../../../@core/data/country-order';
@@ -22,7 +22,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
     </nb-card>
   `,
 })
-export class CountryOrdersComponent implements OnDestroy {
+export class CountryOrdersComponent implements OnInit, OnDestroy {
 
   private alive = true;
 
@@ -36,6 +36,9 @@ export class CountryOrdersComponent implements OnDestroy {
               private breakpointService: NbMediaBreakpointsService,
               private countryOrderService: CountryOrderData) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();
+  }
+
+  ngOnInit() {
     this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
       .subscribe(([oldValue, newValue]) => {

src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html

@@ -1,6 +1,6 @@
 <nb-card-header>
-  <nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
+  <nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
-    <nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
+    <nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
   </nb-select>
 </nb-card-header>
 <nb-card-body>

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html

@@ -1,6 +1,5 @@
-<nb-card-body>
+<ngx-traffic-bar-chart
-  <ngx-traffic-bar-chart [data]="trafficBarData.data"
+  [data]="trafficBarData.data"
   [labels]="trafficBarData.labels"
-                         [formatter]="trafficBarData.formatter">
+  [formatter]="trafficBarData.formatter"
-  </ngx-traffic-bar-chart>
+></ngx-traffic-bar-chart>
-</nb-card-body>

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss

@@ -1,19 +1,7 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
   ngx-traffic-bar-chart {
-    flex: 1;
     position: relative;
 
     ::ng-deep {

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss

@@ -3,7 +3,11 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  overflow: auto;
+  overflow: hidden;
+
+  nb-list {
+    height: 100%;
+  }
 
   .item {
     display: flex;

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html

@@ -1,6 +1,4 @@
-<nb-card-header>
+<span>Traffic</span>
-  <span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
-  <nb-select [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-    <nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+</nb-select>
-  </nb-select>
-</nb-card-header>

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss

@@ -1,14 +1,5 @@
-@import '../../../../@theme/styles/themes';
+:host {
-
-@include nb-install-component() {
-  nb-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-
-    @include nb-ltr(padding-right, 4rem);
-    @include nb-rtl(padding-left, 4rem);
-  }
 }

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html

@@ -1,15 +1,23 @@
 <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
   <nb-card-front>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
       <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
       <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
         <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
       <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss

@@ -9,4 +9,11 @@
     @include nb-rtl(left, 1.25rem);
     cursor: pointer;
   }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
 }

src/app/pages/e-commerce/user-activity/user-activity.component.html

@@ -2,8 +2,8 @@
 
   <nb-card-header>
     <span>User Activity</span>
-    <nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
+    <nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
-      <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+      <nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
     </nb-select>
   </nb-card-header>
 

src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss

@@ -5,10 +5,10 @@
 @include nb-install-component() {
   position: relative;
   display: block;
-  overflow: hidden;
 
   nb-card {
     position: relative;
+    overflow: hidden;
   }
 
   nb-card-header {

src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html

@@ -3,33 +3,33 @@
   <nb-card-body>
     <div class="row">
       <div class="col-md-12 col-lg-12 col-xxxl-12">
-        <button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
+        <button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
                 [nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
           Download
         </button>
       </div>
       <div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
-        <button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
           Download
         </button>
 
-        <button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
+        <button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
                 [nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
           Download
         </button>

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

@@ -4,10 +4,10 @@
       <nb-card-header>Hero Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" hero>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
             {{ status }}
           </button>
-          <button disabled nbButton hero>
+          <button disabled nbButton matRipple hero>
             disabled
           </button>
         </div>
@@ -18,10 +18,10 @@
       <nb-card-header>Default Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status">
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status">
             {{ status }}
           </button>
-          <button disabled nbButton>
+          <button disabled nbButton matRipple>
             disabled
           </button>
         </div>
@@ -32,10 +32,10 @@
       <nb-card-header>Outline Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" outline>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
             {{ status }}
           </button>
-          <button disabled nbButton outline>
+          <button disabled nbButton matRipple outline>
             disabled
           </button>
         </div>
@@ -46,10 +46,10 @@
       <nb-card-header>Ghost Buttons</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let status of statuses" nbButton [status]="status" ghost>
+          <button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
             {{ status }}
           </button>
-          <button disabled nbButton outline>
+          <button disabled nbButton matRipple outline>
             disabled
           </button>
         </div>
@@ -62,7 +62,7 @@
       <nb-card-header>Button shapes</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let shape of shapes" nbButton [shape]="shape">
+          <button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
             {{ shape }}
           </button>
         </div>
@@ -73,7 +73,7 @@
       <nb-card-header>Button sizes</nb-card-header>
       <nb-card-body>
         <div class="buttons-row">
-          <button *ngFor="let size of sizes" nbButton [size]="size">
+          <button *ngFor="let size of sizes" nbButton matRipple [size]="size">
             {{ size }}
           </button>
         </div>
@@ -86,13 +86,13 @@
       <nb-card-header>Action Groups</nb-card-header>
       <nb-card-body>
         <nb-actions size="medium">
-          <nb-action icon="menu-outline"></nb-action>
+          <nb-action matRipple icon="menu-outline"></nb-action>
-          <nb-action icon="search-outline"></nb-action>
+          <nb-action matRipple icon="search-outline"></nb-action>
-          <nb-action icon="email-outline"></nb-action>
+          <nb-action matRipple icon="email-outline"></nb-action>
           <nb-action disabled icon="bell-outline"></nb-action><nb-action>
-          <nb-user name="Han Solo"></nb-user>
+          <nb-user matRipple name="Han Solo"></nb-user>
         </nb-action>
-          <nb-action icon="settings-2-outline"></nb-action>
+          <nb-action matRipple icon="settings-2-outline"></nb-action>
         </nb-actions>
       </nb-card-body>
     </nb-card>
@@ -100,24 +100,30 @@
     <nb-card>
       <nb-card-body>
         <nb-actions size="medium" fullWidth>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
             <span>Pause</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="list-outline"></nb-icon>
             <span>Logs</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="search-outline"></nb-icon>
             <span>Search</span>
           </nb-action>
-          <nb-action>
+          <nb-action matRipple>
             <nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
             <span>Setup</span>
           </nb-action>
         </nb-actions>
       </nb-card-body>
     </nb-card>
+
+    <nb-card *ngIf="materialTheme$ | async">
+      <nb-card-body>
+        <ngx-material-buttons></ngx-material-buttons>
+      </nb-card-body>
+    </nb-card>
   </div>
 </div>

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

@@ -17,4 +17,9 @@
   .actions-card {
     height: 8rem;
   }
+
+  nb-action {
+    border-radius: 2px;
+    cursor: pointer;
+  }
 }

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 {
-  statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
+  public constructor(private readonly themeService: NbThemeService) {
-  shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
+    this.materialTheme$ = this.themeService.onThemeChange()
-  sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
+      .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/buttons/material-buttons/material-buttons.component.html

@@ -0,0 +1,9 @@
+<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>
+<mat-button-toggle-group>
+  <mat-button-toggle value="left" [checked]="true">Toggle left</mat-button-toggle>
+  <mat-button-toggle value="right">Toggle right</mat-button-toggle>
+</mat-button-toggle-group>

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

@@ -0,0 +1,3 @@
+button, mat-button-toggle-group {
+  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

@@ -10,8 +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">
@@ -26,9 +28,9 @@
     <nb-card>
       <nb-card-header>Select</nb-card-header>
       <nb-card-body>
-        <nb-select selected="1">
+        <nb-select matRipple selected="1">
-          <nb-option value="1">Option 1</nb-option>
+          <nb-option matRipple value="1">Option 1</nb-option>
-          <nb-option value="2">Option 2</nb-option>
+          <nb-option matRipple value="2">Option 2</nb-option>
         </nb-select>
       </nb-card-body>
     </nb-card>
@@ -85,3 +87,8 @@
     </nb-card>
   </div>
 </div>
+<div *ngIf="materialTheme$ | async" 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,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,8 +9,17 @@ 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');
+      }));
+  }
 
-  starRate = 2;
+  public readonly materialTheme$: Observable<boolean>;
-  heartRate = 4;
+
-  radioGroupValue = 'This is value 2';
+  public starRate: number = 2;
+  public heartRate: number = 4;
+  public radioGroupValue: string = 'This is value 2';
 }

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 { }

src/app/pages/layout/accordion/accordion.component.html

@@ -3,13 +3,13 @@
     <nb-card>
       <nb-card-header>Toggle Accordion By Button</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="toggle()">Toggle First Item</button>
+        <button nbButton matRipple (click)="toggle()">Toggle First Item</button>
       </nb-card-body>
     </nb-card>
 
     <nb-accordion>
       <nb-accordion-item #item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Product Details
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -20,7 +20,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Reviews
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -31,7 +31,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Edit
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -46,7 +46,7 @@
   <div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
     <nb-accordion multi>
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Product Details
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -57,7 +57,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Reviews
         </nb-accordion-item-header>
         <nb-accordion-item-body>
@@ -68,7 +68,7 @@
       </nb-accordion-item>
 
       <nb-accordion-item>
-        <nb-accordion-item-header>
+        <nb-accordion-item-header matRipple>
           Edit
         </nb-accordion-item-header>
         <nb-accordion-item-body>

src/app/pages/layout/list/list.component.html

@@ -15,12 +15,14 @@
   <div class="col-md-12 col-lg-6 col-xxxl-6">
     <nb-card class="list-card" size="small">
       <nb-card-header>Users</nb-card-header>
+      <nb-card-body>
         <nb-list>
           <nb-list-item *ngFor="let user of users">
             <nb-user [name]="user.name" [title]="user.title">
             </nb-user>
           </nb-list-item>
         </nb-list>
+      </nb-card-body>
     </nb-card>
   </div>
 </div>

src/app/pages/layout/stepper/stepper.component.html

@@ -4,25 +4,25 @@
       <nb-step [label]="labelOne">
         <ng-template #labelOne>First step</ng-template>
         <h3>Step content #1</h3>
-        <button nbButton disabled nbStepperNext>prev</button>
+        <button nbButton matRipple disabled nbStepperNext>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelTwo">
         <ng-template #labelTwo>Second step</ng-template>
         <h3>Step content #2</h3>
-        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Third step">
         <h3>Step content #3</h3>
-        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
-        <button nbButton nbStepperNext>next</button>
+        <button nbButton matRipple nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelFour">
         <ng-template #labelFour>Fourth step</ng-template>
         <h3>Step content #4</h3>
-        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton matRipple nbStepperPrevious>prev</button>
-        <button nbButton disabled nbStepperNext>next</button>
+        <button nbButton matRipple disabled nbStepperNext>next</button>
       </nb-step>
     </nb-stepper>
   </nb-card-body>
@@ -43,7 +43,7 @@
                 <input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
                        [ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
               </div>
-              <button nbButton nbStepperNext>next</button>
+              <button nbButton matRipple nbStepperNext>next</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="secondForm" label="Second step">
@@ -57,8 +57,8 @@
                 <input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
                        [ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
               </div>
-              <button nbButton nbStepperPrevious>prev</button>
+              <button nbButton matRipple nbStepperPrevious>prev</button>
-              <button nbButton nbStepperNext>next</button>
+              <button nbButton matRipple nbStepperNext>next</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="thirdForm" label="Third step">
@@ -70,14 +70,14 @@
                 <input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
                        [ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
               </div>
-              <button nbButton nbStepperPrevious>prev</button>
+              <button nbButton matRipple nbStepperPrevious>prev</button>
-              <button nbButton nbStepperNext>Confirm</button>
+              <button nbButton matRipple nbStepperNext>Confirm</button>
             </form>
           </nb-step>
           <nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
             <div class="step-container">
               <h3>Wizard completed!</h3>
-              <button nbButton (click)="stepper.reset()">Try again</button>
+              <button nbButton matRipple (click)="stepper.reset()">Try again</button>
             </div>
           </nb-step>
         </nb-stepper>
@@ -97,8 +97,8 @@
               viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
               placerat quis, lobortis in ligula.
             </p>
-            <button nbButton disabled nbStepperNext>prev</button>
+            <button nbButton matRipple disabled nbStepperNext>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Second step">
             <h3>Step content #2</h3>
@@ -107,8 +107,8 @@
               sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
               eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Third step">
             <h3>Step content #3</h3>
@@ -123,8 +123,8 @@
               sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
               eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
-            <button nbButton nbStepperNext>next</button>
+            <button nbButton matRipple nbStepperNext>next</button>
           </nb-step>
           <nb-step label="Fourth step">
             <h3>Step content #4</h3>
@@ -133,8 +133,8 @@
               sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
               viverra ex.
             </p>
-            <button nbButton nbStepperPrevious>prev</button>
+            <button nbButton matRipple nbStepperPrevious>prev</button>
-            <button nbButton disabled nbStepperNext>next</button>
+            <button nbButton matRipple disabled nbStepperNext>next</button>
           </nb-step>
         </nb-stepper>
       </nb-card-body>

src/app/pages/maps/gmaps/gmaps.component.html

@@ -0,0 +1,8 @@
+<nb-card>
+  <nb-card-header>Google Maps</nb-card-header>
+  <nb-card-body>
+    <google-map [center]="position" [zoom]="8" width="100%" height="36.5625rem">
+      <map-marker [position]="position"></map-marker>
+    </google-map>
+  </nb-card-body>
+</nb-card>

src/app/pages/maps/gmaps/gmaps.component.ts

@@ -3,19 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-gmaps',
   styleUrls: ['./gmaps.component.scss'],
-  template: `
+  templateUrl: './gmaps.component.html',
-    <nb-card>
-      <nb-card-header>Google Maps</nb-card-header>
-      <nb-card-body>
-        <agm-map [latitude]="lat" [longitude]="lng">
-          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-        </agm-map>
-      </nb-card-body>
-    </nb-card>
-  `,
 })
 export class GmapsComponent {
-
+  public readonly position = { lat: 51.678418, lng: 7.809007 };
-  lat = 51.678418;
-  lng = 7.809007;
 }

src/app/pages/maps/maps.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { AgmCoreModule } from '@agm/core';
+import { GoogleMapsModule } from '@angular/google-maps';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NbCardModule } from '@nebular/theme';
@@ -10,10 +10,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
 @NgModule({
   imports: [
     ThemeModule,
-    AgmCoreModule.forRoot({
+    GoogleMapsModule,
-      apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
-      libraries: ['places'],
-    }),
     LeafletModule.forRoot(),
     MapsRoutingModule,
     NgxEchartsModule,

src/app/pages/maps/search-map/entity/Location.ts

@@ -1,4 +0,0 @@
-export class Location {
-  constructor(public latitude: number = 53.9, public longitude: number = 27.5667) {
-  }
-}

src/app/pages/maps/search-map/entity/position.model.ts

@@ -0,0 +1,6 @@
+export class PositionModel {
+  public constructor(
+    public lat: number = 53.9,
+    public lng: number = 27.5667,
+  ) {}
+}

src/app/pages/maps/search-map/map/map.component.html

@@ -1,7 +1,3 @@
-<agm-map [latitude]="latitude"
+<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
-         [longitude]="longitude"
+  <map-marker [position]="position"></map-marker>
-         [scrollwheel]="false"
+</google-map>
-         [zoom]="zoom">
-  <agm-marker [latitude]="latitude"
-              [longitude]="longitude"></agm-marker>
-</agm-map>

src/app/pages/maps/search-map/map/map.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Location } from '../entity/Location';
+import { PositionModel } from '../entity/position.model';
 
 @Component({
   selector: 'ngx-map',
@@ -7,23 +7,25 @@ import { Location } from '../entity/Location';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnInit {
-  latitude: number;
+  public position: PositionModel = null;
-  longitude: number;
+  public zoom: number = 1;
-  zoom: number;
 
   @Input()
-  public set searchedLocation(searchedLocation: Location) {
+  public set searchedPosition(position: PositionModel) {
-    this.latitude = searchedLocation.latitude;
+    if (!position) return;
-    this.longitude = searchedLocation.longitude;
+
+    console.dir(position);
+    this.position = position;
     this.zoom = 12;
   }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     // set up current location
     if ('geolocation' in navigator) {
       navigator.geolocation.getCurrentPosition((position) => {
-        this.searchedLocation = new Location(
+        this.searchedPosition = new PositionModel(
-          position.coords.latitude, position.coords.longitude,
+          position.coords.latitude,
+          position.coords.longitude,
         );
       });
     }

src/app/pages/maps/search-map/search-map.component.html

@@ -1,7 +1,7 @@
 <nb-card>
   <nb-card-header>Google Maps with search</nb-card-header>
   <nb-card-body>
-    <ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
+    <ngx-search (positionChanged)="setPosition($event)"></ngx-search>
-    <ngx-map [searchedLocation]="searchedLocation"></ngx-map>
+    <ngx-map [searchedPosition]="searchedPosition"></ngx-map>
   </nb-card-body>
 </nb-card>

src/app/pages/maps/search-map/search-map.component.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
-import { Location } from './entity/Location';
+import { PositionModel } from './entity/position.model';
 
 @Component({
   selector: 'ngx-search-map',
   templateUrl: './search-map.component.html',
 })
 export class SearchMapComponent {
+  public searchedPosition: PositionModel = new PositionModel();
 
-  searchedLocation: Location = new Location();
+  public setPosition(position: PositionModel): void {
-
+    this.searchedPosition = position;
-  updateLocation(event: Location) {
-    this.searchedLocation = new Location(event.latitude, event.longitude);
   }
 }

src/app/pages/maps/search-map/search/search.component.ts

@@ -1,7 +1,5 @@
 import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core';
-import { MapsAPILoader } from '@agm/core';
+import { PositionModel } from '../entity/position.model';
-import { Location } from '../entity/Location';
-
 
 @Component({
   selector: 'ngx-search',
@@ -9,21 +7,19 @@ import { Location } from '../entity/Location';
 })
 export class SearchComponent implements OnInit {
 
-  @Output() positionChanged = new EventEmitter<Location>();
+  @Output()
+  public readonly positionChanged: EventEmitter<PositionModel> = new EventEmitter<PositionModel>();
 
   @ViewChild('search', { static: true })
   public searchElementRef: ElementRef;
 
-  constructor(private mapsAPILoader: MapsAPILoader,
+  constructor(private readonly ngZone: NgZone) {}
-              private ngZone: NgZone) {
-  }
 
   ngOnInit() {
-    // load Places Autocomplete
+    const autocomplete = new google.maps.places.Autocomplete(
-    this.mapsAPILoader.load().then(() => {
+      this.searchElementRef.nativeElement, { types: ['address'] },
-      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
+    );
-        types: ['address'],
+
-      });
     autocomplete.addListener('place_changed', () => {
       this.ngZone.run(() => {
         // get the place result
@@ -34,10 +30,10 @@ export class SearchComponent implements OnInit {
           return;
         }
 
-          this.positionChanged.emit(
+        this.positionChanged.emit(new PositionModel(
-            new Location(place.geometry.location.lat(),
+          place.geometry.location.lat(),
-              place.geometry.location.lng()));
+          place.geometry.location.lng(),
-        });
+        ));
       });
     });
   }

src/app/pages/miscellaneous/not-found/not-found.component.html

@@ -5,7 +5,7 @@
         <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
           <h2 class="title">404 Page Not Found</h2>
           <small class="sub-title">The page you were looking for doesn't exist</small>
-          <button nbButton fullWidth (click)="goToHome()" type="button" class="home-button">
+          <button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
             Take me home
           </button>
         </div>

src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html

@@ -4,7 +4,7 @@
     <input #name nbInput placeholder="Name">
   </nb-card-body>
   <nb-card-footer>
-    <button class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
+    <button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
-    <button nbButton status="success" (click)="submit(name.value)">Submit</button>
+    <button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
   </nb-card-footer>
 </nb-card>

src/app/pages/modal-overlays/dialog/dialog.component.html

@@ -3,9 +3,9 @@
     <nb-card>
       <nb-card-header>Open Dialog</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with component</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with component</button>
 
-        <button nbButton (click)="open2(dialog)">Open Dialog with template</button>
+        <button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -14,9 +14,9 @@
     <nb-card>
       <nb-card-header>Open Without Backdrop</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with backdrop</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
 
-        <button nbButton (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
+        <button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,9 +25,9 @@
     <nb-card>
       <nb-card-header>Open Without Esc Close</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with esc close</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
 
-        <button nbButton (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
+        <button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -36,9 +36,9 @@
     <nb-card>
       <nb-card-header>Open Without Backdrop Click</nb-card-header>
       <nb-card-body>
-        <button nbButton (click)="open()">Open Dialog with backdrop click</button>
+        <button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
 
-        <button nbButton (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
+        <button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -47,7 +47,7 @@
     <nb-card class="form-input-card">
       <nb-card-header>Return Result From Dialog</nb-card-header>
       <nb-card-body class="result-from-dialog">
-        <button nbButton (click)="open3()">Enter Name</button>
+        <button nbButton matRipple (click)="open3()">Enter Name</button>
         <br>
         <h3 class="title">Names:</h3>
         <ul>
@@ -63,7 +63,7 @@
     <nb-card-header>Template Dialog</nb-card-header>
     <nb-card-body>{{ data }}</nb-card-body>
     <nb-card-footer>
-      <button nbButton (click)="ref.close()">Close Dialog</button>
+      <button nbButton matRipple (click)="ref.close()">Close Dialog</button>
     </nb-card-footer>
   </nb-card>
 </ng-template>

src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html

@@ -9,6 +9,6 @@
     in aliquet massa aliquet et.
   </nb-card-body>
   <nb-card-footer>
-    <button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
+    <button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
   </nb-card-footer>
 </nb-card>

src/app/pages/modal-overlays/popovers/popover-examples.component.ts

@@ -34,7 +34,7 @@ export class NgxPopoverTabsComponent {
         <div class="form-group">
           <textarea class="form-control" placeholder="Message"></textarea>
         </div>
-        <button type="submit" class="btn btn-primary w-100">Send</button>
+        <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
       </form>
     </div>
   `,

src/app/pages/modal-overlays/popovers/popovers.component.html

@@ -4,10 +4,10 @@
       <nb-card-header>Popover Position</nb-card-header>
       <nb-card-body>
         <p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
-        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
-        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
-        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
-        <button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
+        <button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -17,9 +17,9 @@
       <nb-card-header>Simple Popovers</nb-card-header>
       <nb-card-body>
         <p>In a simples form popover can take a string of text to render.</p>
-        <button nbButton status="success" nbPopover="Hello, how are you today?">on click</button>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
-        <button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
-        <button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
+        <button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -55,7 +55,7 @@
           <div class="form-group">
             <textarea class="form-control" placeholder="Message"></textarea>
           </div>
-          <button type="submit" class="btn btn-primary w-100">Send</button>
+          <button matRipple type="submit" class="btn btn-primary w-100">Send</button>
         </form>
       </div>
     </ng-template>
@@ -76,9 +76,9 @@
       <nb-card-header>Template Popovers</nb-card-header>
       <nb-card-body>
         <p>You can pass a refference to `ng-template` to be rendered.</p>
-        <button nbButton status="warning" [nbPopover]="tabs">With tabs</button>
+        <button nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
-        <button nbButton status="warning" [nbPopover]="form">With form</button>
+        <button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
-        <button nbButton status="warning" [nbPopover]="card">With card</button>
+        <button nbButton matRipple status="warning" [nbPopover]="card">With card</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -88,9 +88,9 @@
       <nb-card-header>Component Popovers</nb-card-header>
       <nb-card-body>
         <p>Same way popover can render any angular compnoent.</p>
-        <button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
+        <button nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
-        <button nbButton status="warning" [nbPopover]="formComponent">With form</button>
+        <button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
-        <button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
+        <button nbButton matRipple status="warning" [nbPopover]="cardComponent">With card</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -103,52 +103,52 @@
       <nb-card-body class="debounce-card">
         <p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
 
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
-        <button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
+        <button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
           show hint
         </button>
       </nb-card-body>

src/app/pages/modal-overlays/toastr/toastr.component.html

@@ -8,8 +8,8 @@
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
           <label class="label">Position:</label>
-          <nb-select [(selected)]="position" class="position-select">
+          <nb-select [(selected)]="position" matRipple class="position-select">
-            <nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
+            <nb-option *ngFor="let p of positions"  [value]="p" matRipple>{{ p }}</nb-option>
           </nb-select>
         </div>
 
@@ -34,8 +34,8 @@
       <div class="col-md-6 col-sm-12">
         <div class="form-group">
           <label class="label">Toast type:</label>
-          <nb-select [(selected)]="status">
+          <nb-select [(selected)]="status" matRipple>
-            <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+            <nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
           </nb-select>
         </div>
 
@@ -53,7 +53,7 @@
   </nb-card-body>
 
   <nb-card-footer>
-    <button nbButton (click)="makeToast()">Show toast</button>
+    <button nbButton matRipple (click)="makeToast()">Show toast</button>
-    <button nbButton status="success" (click)="openRandomToast()">Random toast</button>
+    <button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
   </nb-card-footer>
 </nb-card>

src/app/pages/modal-overlays/toastr/toastr.component.ts

@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
-import { ToasterConfig } from 'angular2-toaster';
-
-import 'style-loader!angular2-toaster/toaster.css';
 import {
   NbComponentStatus,
   NbGlobalLogicalPosition,
   NbGlobalPhysicalPosition,
   NbGlobalPosition,
   NbToastrService,
+  NbToastrConfig,
 } from '@nebular/theme';
 
 @Component({
@@ -18,7 +16,7 @@ import {
 export class ToastrComponent {
   constructor(private toastrService: NbToastrService) {}
 
-  config: ToasterConfig;
+  config: NbToastrConfig;
 
   index = 1;
   destroyByClick = true;

src/app/pages/modal-overlays/tooltip/tooltip.component.html

@@ -3,8 +3,8 @@
     <nb-card>
       <nb-card-header>Tooltip With Icon</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton>Show Tooltip</button>
+        <button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
-        <button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton>Show Tooltip</button>
+        <button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -13,10 +13,10 @@
     <nb-card>
       <nb-card-header>Tooltip Placements</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,12 +25,12 @@
     <nb-card>
       <nb-card-header>Colored Tooltips</nb-card-header>
       <nb-card-body>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Default</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton>Primary</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton matRipple>Primary</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton>Success</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton matRipple>Success</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton>Danger</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton matRipple>Danger</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton>Info</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton matRipple>Info</button>
-        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton>Warning</button>
+        <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
       </nb-card-body>
     </nb-card>
   </div>

src/app/pages/modal-overlays/window/window.component.html

@@ -3,9 +3,9 @@
     <nb-card>
       <nb-card-header>Window Form</nb-card-header>
       <nb-card-body>
-        <button (click)="openWindowForm()" nbButton>Open window form</button>
+        <button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
 
-        <button (click)="openWindow(contentTemplate)" nbButton>Open window with template</button>
+        <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
       </nb-card-body>
     </nb-card>
   </div>
@@ -14,9 +14,9 @@
     <nb-card>
       <nb-card-header>Window Without Backdrop</nb-card-header>
       <nb-card-body>
-        <button (click)="openWindow(contentTemplate)" nbButton>Open window with backdrop</button>
+        <button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
 
-        <button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button>
+        <button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
       </nb-card-body>
     </nb-card>
   </div>

src/app/pages/ui-features/search-fields/search-fields.component.html

@@ -5,7 +5,14 @@
         Layout Rotate Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="rotate-layout"
+          tag="rotate-layout"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -15,7 +22,14 @@
         Modal Zoomin Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-zoomin"
+          tag="modal-zoomin"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -25,7 +39,14 @@
         Modal Move Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-move" tag="modal-move"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-move"
+          tag="modal-move"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -35,7 +56,14 @@
         Modal Drop Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-drop" tag="modal-drop"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-drop"
+          tag="modal-drop"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -45,7 +73,14 @@
         Modal Half Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="modal-half" tag="modal-half"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="modal-half"
+          tag="modal-half"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -55,7 +90,14 @@
         Curtain Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="curtain" tag="curtain"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="curtain"
+          tag="curtain"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>
@@ -65,7 +107,14 @@
         Column Curtain Search
       </nb-card-header>
       <nb-card-body>
-        <nb-search type="column-curtain" tag="column-curtain"></nb-search>
+        <nb-search
+          matRipple
+          [matRippleUnbounded]="true"
+          [matRippleCentered]="true"
+          [matRippleRadius]="36"
+          type="column-curtain"
+          tag="column-curtain"
+        ></nb-search>
       </nb-card-body>
     </nb-card>
   </div>

src/index.html

@@ -12,6 +12,8 @@
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
+  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
+
   <!-- Google Tag Manager -->
   <script>
     dataLayer = [];

src/tsconfig.app.json

@@ -2,15 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
+    "baseUrl": "./"
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ],
-      "@nebular/*": [
-        "../node_modules/@nebular/*"
-      ]
-    }
   },
   "exclude": [
     "test.ts",