chore(readMe): update link for demo ngx-admin (#6044)

* fix(package-lock): update version in package-lock

* fix(package-lock): update version in package-lock

* chore(readMe): update link for demo ngx-admin

.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/no-input-rename": [
+          "warn",
+          {
+            "allowedNames": ["name"]
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "ngx",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.github/workflows/ACTION_TRIGGER_GUIDE.md

@@ -0,0 +1,13 @@
+### Actions deploy guide
+
+In order to trigger workflow action you should execute the following curl:
+
+`curl -H "Accept: application/vnd.github.everest-preview+json" \`  
+`-H "Authorization: token <ACCESS_TOKEN>" \`  
+`--request POST \`  
+`--data '{"event_type": "<ACTION>"}' \`  
+`https://api.github.com/repos/akveo/ngx-admin/dispatches`
+
+This curl expects two input parameters:
+- `ACCESS_TOKEN`: A personal access token. Creating a [personal access token guide](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line)  
+- `ACTION`: action to trigger ('deploy-docs', 'deploy-to-demo')

.github/workflows/demoDeploy.yml

@@ -0,0 +1,29 @@
+
+name: Deploy to demo
+
+on:
+  push:
+    branches:
+      - 'demo'
+    paths:
+      - 'src/**'
+  repository_dispatch:
+    types: deploy-to-demo
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install SSH key
+        uses: shimataro/ssh-key-action@v2
+        with:
+          key: ${{ secrets.SSH_KEY }}
+          known_hosts: ${{ secrets.KNOWN_HOSTS }}
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+      - uses: actions/checkout@v2
+        with:
+          ref: demo
+      - run: npm install
+      - run: npm run build:demo:prod
+      - run: rsync -r --delete-after dist/. "${{ secrets.REMOTE_URL }}":"${{ secrets.ADDRESS }}"

.github/workflows/docsDeploy.yml

@@ -0,0 +1,28 @@
+name: Deploy docs
+on:
+  push:
+    branches:
+      - 'demo'
+    paths:
+      - 'docs/**'
+  repository_dispatch:
+    types: deploy-docs
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12'
+      - uses: actions/checkout@v2
+        with:
+          ref: demo
+      - name: Deploy
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          npm install --silent
+          git config --global user.email "github-action@akveo.com"
+          git config --global user.name "Github Action"
+          npm run docs:gh-pages

.gitignore

@@ -23,6 +23,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.prettierignore

@@ -0,0 +1 @@
+README.md

CHANGELOG.md

@@ -1,3 +1,144 @@
+<a name="11.0.0"></a>
+# [11.0.0](https://github.com/akveo/ngx-admin/compare/v10.0.0...v11.0.0) (2023-10-29)
+
+
+### Bug Fixes
+
+* **package-lock:** update version in package-lock ([#6002](https://github.com/akveo/ngx-admin/issues/6002)) ([e06d9bd](https://github.com/akveo/ngx-admin/commit/e06d9bd))
+
+### Features
+
+* update to Angular 15 ([aa91634](https://github.com/akveo/ngx-admin/commit/aa91634))
+
+### BREAKING CHANGES
+
+- Angular updated to version 14.
+- Nebular updated to version 10.
+
+
+<a name="10.0.0"></a>
+# [10.0.0](https://github.com/akveo/ngx-admin/compare/v9.0.0...v10.0.0) (2023-03-07)
+
+
+### Bug Fixes
+
+* **angular 13:** fix issues after updates to Angular 13 in rooms component and country orders component ([#5965](https://github.com/akveo/ngx-admin/issues/5965)) ([384b841](https://github.com/akveo/ngx-admin/commit/384b841))
+* fix issues after updates to Angular 13 in rooms component and country orders component ([1d78122](https://github.com/akveo/ngx-admin/commit/1d78122))
+
+
+### Features
+
+* update to Angular 14 ([#1](https://github.com/akveo/ngx-admin/issues/1)) ([2f98e08](https://github.com/akveo/ngx-admin/commit/2f98e08)), closes [#5965](https://github.com/akveo/ngx-admin/issues/5965)
+
+### BREAKING CHANGES
+
+- Angular updated to version 13.
+- Nebular updated to version 9.
+- Move from tslint to eslint
+
+
+<a name="9.0.0"></a>
+# [9.0.0](https://github.com/akveo/ngx-admin/compare/v8.0.0...v9.0.0) (2022-12-29)
+
+
+### Bug Fixes
+
+* update dependencies ([#5938](https://github.com/akveo/ngx-admin/issues/5938)) ([f1365e1](https://github.com/akveo/ngx-admin/commit/f1365e1))
+
+
+### Features
+
+* add installation notes ([fd95769](https://github.com/akveo/ngx-admin/commit/fd95769))
+* update dependencies ([#5937](https://github.com/akveo/ngx-admin/issues/5937)) ([237ea6b](https://github.com/akveo/ngx-admin/commit/237ea6b))
+* update README.md ([f5015ac](https://github.com/akveo/ngx-admin/commit/f5015ac))
+* update templates section in README ([570031d](https://github.com/akveo/ngx-admin/commit/570031d))
+* update to Angular 13, move from tslint to eslint ([#5957](https://github.com/akveo/ngx-admin/issues/5957)) ([ec68f5e](https://github.com/akveo/ngx-admin/commit/ec68f5e))
+
+### BREAKING CHANGES
+
+- Angular updated to version 13.
+- Nebular updated to version 9.
+- Move from tslint to eslint
+
+
+<a name="8.0.0"></a>
+# [8.0.0](https://github.com/akveo/ngx-admin/compare/v7.0.0...v8.0.0) (2021-10-08)
+
+
+### Features
+
+* update to Angular 12 ([#5868](https://github.com/akveo/ngx-admin/issues/5868)) ([080830a](https://github.com/akveo/ngx-admin/commit/080830a))
+
+
+
+<a name="7.0.0"></a>
+# [7.0.0](https://github.com/akveo/ngx-admin/compare/v6.0.0...v7.0.0) (2021-01-19)
+
+* feat: update to Angular 11 ([#5826](https://github.com/akveo/ngx-admin/issues/5826)) ([ebe1810](https://github.com/akveo/ngx-admin/commit/ebe1810))
+
+
+
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/akveo/ngx-admin/compare/v5.0.0...v6.0.0) (2020-08-19)
+
+
+### Bug Fixes
+
+* **echarts:** set merge input ([#5632](https://github.com/akveo/ngx-admin/issues/5632)) ([dfaa5cd](https://github.com/akveo/ngx-admin/commit/dfaa5cd))
+* **sidebar:** toggle performance issues ([#5658](https://github.com/akveo/ngx-admin/issues/5658)) ([9eaf0bb](https://github.com/akveo/ngx-admin/commit/9eaf0bb))
+
+
+### Features
+
+* update to Angular 10 ([#5747](https://github.com/akveo/ngx-admin/issues/5747)) ([ec3282c](https://github.com/akveo/ngx-admin/commit/ec3282c))
+
+### BREAKING CHANGES
+
+- Angular updated to version 10.
+- Nebular updated to version 6.
+
+
+<a name="5.0.0"></a>
+# [5.0.0](https://github.com/akveo/ngx-admin/compare/v4.0.1...v5.0.0) (2020-04-01)
+
+
+### Bug Fixes
+
+* **forms:** add missing forms module import ([#5530](https://github.com/akveo/ngx-admin/issues/5530)) ([1ff2a0d](https://github.com/akveo/ngx-admin/commit/1ff2a0d))
+* **tinymce:** set absolute path for skin url ([#5491](https://github.com/akveo/ngx-admin/issues/5491)) ([90125ab](https://github.com/akveo/ngx-admin/commit/90125ab))
+
+
+### Features
+
+* upgrade to Angular 9 and Nebular 5 ([#5628](https://github.com/akveo/ngx-admin/issues/5628)) ([fbbf944](https://github.com/akveo/ngx-admin/commit/fbbf944))
+* **seo:** add canonical tag ([#5578](https://github.com/akveo/ngx-admin/issues/5578)) ([76d31da](https://github.com/akveo/ngx-admin/commit/76d31da))
+* add calendar with week numbers example ([#5515](https://github.com/akveo/ngx-admin/issues/5515)) ([3242257](https://github.com/akveo/ngx-admin/commit/3242257))
+
+
+### BREAKING CHANGES
+
+- Angular updated to version 9.
+- Nebular updated to version 5.
+- `@agm/core` replaced with `@angular/google-maps`.
+- `ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).
+
+
+
+<a name="4.0.1"></a>
+## [4.0.1](https://github.com/akveo/ngx-admin/compare/v4.0.0...v4.0.1) (2019-07-16)
+
+
+### Bug Fixes
+
+* **typography:** prevent bootstrap color override ([#2161](https://github.com/akveo/ngx-admin/issues/2161)) ([243390c](https://github.com/akveo/ngx-admin/commit/243390c))
+
+
+### Features
+
+* update Nebular to 4.1.2 ([#5451](https://github.com/akveo/ngx-admin/issues/5451)) ([a2e93f9](https://github.com/akveo/ngx-admin/commit/a2e93f9))
+
+
+
 <a name="4.0.0"></a>
 # [4.0.0](https://github.com/akveo/ngx-admin/compare/v3.2.0...v4.0.0) (2019-07-02)
 

README.md

@@ -1,29 +1,31 @@
-# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design) [![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin) [![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
+# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=top_status_tile)
 
-[Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
+[Live Demo](https://demo.akveo.com/ngx-admin/?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=live_demo_link) | [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645) | [Documentation](https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_documentation_link) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_installation_guidelines) | [Angular templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=github%20readme%20top%20angular%20templates%20link)
 
-# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
+# Admin template based on Angular and <a href="https://github.com/akveo/nebular">Nebular</a>
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/IhoaWxa.png"/></a>
 
-### Backend Integration Bundles
+<a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=hero_banner_corporate"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
-Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our Store](https://store.akveo.com/?utm_source=github&utm_medium=ngx_admin_readme) for ready to use Backend Bundles.
 
+## Repository state and engagement with the community
 
-### With 3 stunning visual themes
+Repository is currently in a state of minimal maintenance. Our primary focus is on ensuring that the Angular version used in this project is kept up to date. Our capacity to engage in other aspects of repository management is currently limited.
 
-#### Dark
+We are not actively reviewing or merging pull requests, responding to or resolving issues at this time. We appreciate the effort and contributions from the community and we understand that issues are crucial for the community. But now our current focus is solely on maintaining Angular.
 
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/iam0CaJ.png"/></a>
+## Installation notes
 
-#### Cosmic
+To install ngx-admin you have to use NodeJS version 14.14+ because of [node-sass](https://github.com/sass/node-sass) version utilized in the application.
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/8KwE112.png"/></a>
 
-#### Corporate
+## Key features
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/DYtQ2Qc.png"/></a>
+
+- 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!
 
 ### What's included:
 
-- Angular 7+ & Typescript
+- Angular & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support
@@ -33,38 +35,67 @@ Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our S
 - 40+ Angular Components
 - 60+ Usage Examples
 
-### Demo
+## Material theme for ngx-admin
 
-<a target="_blank" href="http://akveo.com/ngx-admin/">Live Demo</a>
+Material admin theme is based on the most popular Angular dashboard template - [ngx-admin](https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin_material&utm_medium=referral&utm_content=github_readme)
+To use material theme checkout `feat/material-theme` branch.
+
+### Templates
+
+<a href="https://www.akveo.com/templates/fleet-management-dashboard?utm_campaign=services%20[…]x-admin%20&utm_medium=referral%20&utm_content=github_banner%20"><img src="https://i.imgur.com/Z8EwGfh.png"></a>
+
+### With 6 stunning visual themes
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=material-dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_dark"><img src="https://i.imgur.com/67YAlhf.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=material-light&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_light"><img src="https://i.imgur.com/aQzw0hD.png"/></a> |
+| --- | --- |
+|  Material Dark | Material Light |
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_dark"><img src="https://i.imgur.com/9UkTGgr.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=default&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_default"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a> |
+| --- | --- |
+|  Dark| Default |
+
+| <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_cosmic"><img src="https://i.imgur.com/iJu2YDF.png"/></a> | <a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_theme_corporate"><img src="https://i.imgur.com/GpUt6NW.png"/></a> |
+| --- | --- |
+| Cosmic  | Corporate |
 
 ## Documentation
-This template is using [Nebular](https://github.com/akveo/nebular) modules set, [here you can find documentation and other useful articles](https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit).
+
+This template is using [Nebular](https://github.com/akveo/nebular) modules set, [here you can find documentation and other useful articles](https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit?utm_campaign=nebular%20-%20docs%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=documentation_useful_articles).
 
 ### Empty starter kit
+
 Don't need all the pages and modules and just looking for an empty starter kit for your next project? Check out our [starter-kit branch](https://github.com/akveo/ngx-admin/tree/starter-kit).
 
-### AngularJS 1.x version
-Here you can find AngularJS 1.x based version: [Blur Admin](http://akveo.github.io/blur-admin/)
-
 ## BrowserStack
+
 This project runs its tests on multiple desktop and mobile browsers using [BrowserStack](http://www.browserstack.com).
 
 <img src="https://cloud.githubusercontent.com/assets/131406/22254249/534d889e-e254-11e6-8427-a759fb23b7bd.png" height="40" />
 
+## UI Bakery
+
+Need a visual admin dashboard builder? Check out [UI Bakery](https://uibakery.io).
+
+<a href="https://uibakery.io"><img src="https://storage.uibakery.io/video-assets/landing/Logo/UIB%20400x150.png" height="80" /></a>
+
 ## More from Akveo
 
 - [Eva Icons](https://github.com/akveo/eva-icons) - 480+ beautiful Open Source icons
 - [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
+- [Akveo templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin%20github%20readme%20more%20from%20akveo%20link) - 10+ Ready-to-use apps templates to speed up your apps developments
+
+## How can I support developers?
 
-### How can I support developers?
 - Star our GitHub repo :star:
 - Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
 - Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:
 - Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
 
-### Looking for engineering services? 
+## Looking for engineering services? 
-Visit [our homepage](http://akveo.com/) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
 
-### From Developers
+Visit [our homepage](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=looking_for_engineering_services_visit_homepage) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
-Made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
+
+## From Developers
+
+Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=from_developers_made_by). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
 We're always happy to receive your feedback!

angular.json

@@ -12,7 +12,6 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "preserveSymlinks": true,
-            "rebaseRootRelativeCssUrls": true,
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -36,7 +35,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"
@@ -51,16 +49,33 @@
               "node_modules/echarts/dist/echarts.min.js",
               "node_modules/echarts/dist/extension/bmap.min.js",
               "node_modules/chart.js/dist/Chart.min.js"
-            ]
+            ],
+            "allowedCommonJsDependencies": [
+              "angular2-chartjs",
+              "echarts",
+              "lodash",
+              "zrender/lib/svg/svg",
+              "zrender/lib/vml/vml"
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -71,7 +86,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -132,20 +148,18 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "lintFilePatterns": [
-              "src/tsconfig.app.json",
+              "src/**/*.ts",
-              "src/tsconfig.spec.json"
+              "src/**/*.html"
-            ],
+            ]
-            "typeCheck": true,
-            "exclude": []
           }
         }
       }
     },
     "ngx-admin-demo-e2e": {
-      "root": "",
+      "root": "e2e",
       "sourceRoot": "",
       "projectType": "application",
       "architect": {
@@ -155,27 +169,23 @@
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "ngx-admin-demo:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
         }
       }
     }
   },
-  "defaultProject": "ngx-admin-demo",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "ngx",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "ngx"
+    },
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
     }
   }
 }

e2e/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "e2e/tsconfig.app.json",
+          "e2e/tsconfig.spec.json",
+          "e2e/e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-admin",
-  "version": "4.0.0",
+  "version": "11.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "conventional-changelog": "conventional-changelog",
     "start": "ng serve",
     "build": "ng build",
-    "build:prod": "npm run build -- --prod --aot",
+    "build:prod": "npm run build -- --configuration production --aot",
     "test": "ng test",
     "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
     "lint": "ng lint",
@@ -26,88 +26,94 @@
     "docs": "compodoc -p src/tsconfig.app.json -d docs",
     "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
     "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 --tsconfig \"./src/tsconfig.app.json\""
   },
   "dependencies": {
-    "@agm/core": "^1.0.0-beta.5",
+    "@angular/animations": "^15.2.10",
-    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^15.2.9",
-    "@angular/cdk": "^8.0.0",
+    "@angular/common": "^15.2.10",
-    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^15.2.10",
-    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^15.2.10",
-    "@angular/core": "^8.0.0",
+    "@angular/forms": "^15.2.10",
-    "@angular/forms": "^8.0.0",
+    "@angular/google-maps": "^12.2.13",
-    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^8.0.0",
+    "@angular/router": "^15.2.10",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "4.1.0",
+    "@nebular/auth": "11.0.1",
-    "@nebular/bootstrap": "4.1.0",
+    "@nebular/eva-icons": "11.0.1",
-    "@nebular/eva-icons": "4.1.0",
+    "@nebular/security": "11.0.1",
-    "@nebular/security": "4.1.0",
+    "@nebular/theme": "11.0.1",
-    "@nebular/theme": "4.1.0",
+    "@swimlane/ngx-charts": "^14.0.0",
-    "@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",
+    "echarts": "^4.9.0",
-    "eva-icons": "^1.1.0",
+    "eva-icons": "^1.1.3",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "leaflet": "1.2.0",
     "nebular-icons": "1.1.0",
-    "ng2-ckeditor": "^1.2.2",
+    "ng2-ckeditor": "~1.2.9",
-    "ng2-completer": "2.0.8",
+    "ng2-completer": "^9.0.1",
-    "ng2-smart-table": "1.3.5",
+    "ng2-smart-table": "^1.6.0",
-    "ngx-echarts": "^4.0.1",
+    "ngx-echarts": "^4.2.2",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.6.2",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
+    "style-loader": "^1.3.0",
     "tinymce": "4.5.7",
-    "tslib": "^1.9.0",
+    "tslib": "^2.3.1",
     "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.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.2",
+    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular/cli": "^8.0.2",
+    "@angular-eslint/builder": "15.2.1",
-    "@angular/compiler-cli": "^8.0.0",
+    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular/language-service": "8.0.0",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "15.2.10",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.30.4",
+    "@types/jasmine": "~3.3.0",
-    "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
-    "@types/node": "6.0.90",
+    "@types/node": "^12.12.70",
-    "codelyzer": "^5.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "codelyzer": "^6.0.2",
     "conventional-changelog-cli": "1.3.4",
+    "eslint": "^8.28.0",
     "husky": "0.13.3",
-    "jasmine-core": "2.6.4",
+    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "4.1.1",
+    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "1.7.1",
+    "karma": "~6.3.19",
-    "karma-chrome-launcher": "2.1.1",
+    "karma-chrome-launcher": "~3.1.1",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "1.1.0",
+    "karma-jasmine": "~4.0.2",
-    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "npm-run-all": "4.0.2",
-    "protractor": "5.1.2",
+    "protractor": "~7.0.0",
     "rimraf": "2.6.1",
     "stylelint": "7.13.0",
     "ts-node": "3.2.2",
-    "tslint": "^5.7.0",
+    "tslint": "~6.1.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.4.5"
+    "typescript": "~4.9.5"
   }
 }

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

@@ -9,6 +9,7 @@ import {
   AnalyticsService,
   LayoutService,
   PlayerService,
+  SeoService,
   StateService,
 } from './utils';
 import { UserData } from './data/users';
@@ -140,6 +141,7 @@ export const NB_CORE_PROVIDERS = [
   AnalyticsService,
   LayoutService,
   PlayerService,
+  SeoService,
   StateService,
 ];
 
@@ -157,8 +159,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,8 +54,8 @@ const SERVICES = [
   ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<MockDataModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: MockDataModule,
       providers: [
         ...SERVICES,

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

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

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

@@ -1,20 +1,26 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { delay, share } from 'rxjs/operators';
+import { delay, shareReplay, debounceTime } from 'rxjs/operators';
 
 @Injectable()
 export class LayoutService {
 
   protected layoutSize$ = new Subject();
+  protected layoutSizeChange$ = this.layoutSize$.pipe(
+    shareReplay({ refCount: true }),
+  );
 
   changeLayoutSize() {
     this.layoutSize$.next();
   }
 
   onChangeLayoutSize(): Observable<any> {
-    return this.layoutSize$.pipe(
+    return this.layoutSizeChange$.pipe(delay(1));
-      share(),
+  }
-      delay(1),
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
     );
   }
 }

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

@@ -0,0 +1,58 @@
+import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { NB_DOCUMENT } from '@nebular/theme';
+import { filter, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class SeoService implements OnDestroy {
+
+  private readonly destroy$ = new Subject<void>();
+  private readonly dom: Document;
+  private readonly isBrowser: boolean;
+  private linkCanonical: HTMLLinkElement;
+
+  constructor(
+    private router: Router,
+    @Inject(NB_DOCUMENT) document,
+    @Inject(PLATFORM_ID) platformId,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.dom = document;
+
+    if (this.isBrowser) {
+      this.createCanonicalTag();
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  createCanonicalTag() {
+    this.linkCanonical = this.dom.createElement('link');
+    this.linkCanonical.setAttribute('rel', 'canonical');
+    this.dom.head.appendChild(this.linkCanonical);
+    this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+  }
+
+  trackCanonicalChanges() {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      takeUntil(this.destroy$),
+    )
+      .subscribe(() => {
+        this.linkCanonical.setAttribute('href', this.getCanonicalUrl());
+      });
+  }
+
+  private getCanonicalUrl(): string {
+    return this.dom.location.origin + this.dom.location.pathname;
+  }
+}

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

@@ -1,6 +1,6 @@
 @import '../../styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   width: 100%;

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

@@ -4,7 +4,9 @@ import { Component } from '@angular/core';
   selector: 'ngx-footer',
   styleUrls: ['./footer.component.scss'],
   template: `
-    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2019</span>
+    <span class="created-by">
+      Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
+    </span>
     <div class="socials">
       <a href="#" target="_blank" class="ion ion-social-github"></a>
       <a href="#" target="_blank" class="ion ion-social-facebook"></a>

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

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 @import '../../styles/themes';
 
 @include nb-install-component() {

src/app/@theme/components/tiny-mce/tiny-mce.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+import { LocationStrategy } from '@angular/common';
 
 @Component({
   selector: 'ngx-tiny-mce',
@@ -10,13 +11,16 @@ export class TinyMCEComponent implements OnDestroy, AfterViewInit {
 
   editor: any;
 
-  constructor(private host: ElementRef) { }
+  constructor(
+    private host: ElementRef,
+    private locationStrategy: LocationStrategy,
+  ) { }
 
   ngAfterViewInit() {
     tinymce.init({
       target: this.host.nativeElement,
       plugins: ['link', 'paste', 'table'],
-      skin_url: 'assets/skins/lightgray',
+      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
       setup: editor => {
         this.editor = editor;
         editor.on('keyup', () => {

src/app/@theme/layouts/one-column/one-column.layout.scss

@@ -1,6 +1,6 @@
 @import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {

src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -1,8 +1,4 @@
-import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { NbLayoutComponent } from '@nebular/theme';
-
-import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
 
 @Component({
   selector: 'ngx-one-column-layout',
@@ -27,18 +23,4 @@ import { WindowModeBlockScrollService } from '../../services/window-mode-block-s
     </nb-layout>
   `,
 })
-export class OneColumnLayoutComponent implements AfterViewInit {
+export class OneColumnLayoutComponent {}
-
-  @ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;
-
-  constructor(
-    @Inject(PLATFORM_ID) private platformId,
-    private windowModeBlockScrollService: WindowModeBlockScrollService,
-  ) {}
-
-  ngAfterViewInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.windowModeBlockScrollService.register(this.layout);
-    }
-  }
-}

src/app/@theme/layouts/three-columns/three-columns.layout.scss

@@ -1,6 +1,6 @@
 @import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {

src/app/@theme/layouts/two-columns/two-columns.layout.scss

@@ -1,6 +1,6 @@
 @import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {

src/app/@theme/services/window-mode-block-scroll.service.ts

@@ -1,132 +0,0 @@
-import { Inject, Injectable, OnDestroy } from '@angular/core';
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
-import {
-  NB_WINDOW,
-  NbLayoutComponent,
-  NbLayoutDimensions,
-  NbLayoutRulerService,
-  NbLayoutScrollService,
-  NbViewportRulerAdapter,
-} from '@nebular/theme';
-import { filter, map, take, takeUntil } from 'rxjs/operators';
-import { fromEvent as observableFromEvent, merge, Subject } from 'rxjs';
-
-@Injectable()
-export class WindowModeBlockScrollService implements OnDestroy {
-
-  private destroy$ = new Subject<void>();
-
-  private blockEnabled = false;
-  private unblock$ = new Subject<void>();
-
-  private container: HTMLElement;
-  private content: HTMLElement;
-
-  private previousScrollPosition: { top: number, left: number };
-  private previousContainerStyles: { overflowY: string };
-  private previousContentStyles: { left: string, top: string, width: string, overflow: string, position: string };
-
-  constructor(
-    private scrollService: NbLayoutScrollService,
-    private viewportRuler: NbViewportRulerAdapter,
-    private layout: NbLayoutRulerService,
-    @Inject(NB_WINDOW) private window,
-  ) {}
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-    this.unblock$.complete();
-  }
-
-  register(layout: NbLayoutComponent) {
-    this.container = layout.scrollableContainerRef.nativeElement;
-    this.content = this.container.children[0] as HTMLElement;
-
-    this.scrollService.onScrollableChange()
-      .pipe(
-        filter(() => layout.withScrollValue),
-        map((scrollable: boolean) => !scrollable),
-        takeUntil(this.destroy$),
-      )
-      .subscribe((shouldBlock: boolean) => {
-        if (shouldBlock) {
-          this.blockScroll();
-        } else {
-          this.unblockScroll();
-        }
-      });
-  }
-
-  blockScroll() {
-    if (!this.canBeBlocked()) {
-      return;
-    }
-
-    this.previousScrollPosition = this.viewportRuler.getViewportScrollPosition();
-    this.backupStyles();
-
-    this.container.style.overflowY = 'scroll';
-    this.content.style.overflow = 'hidden';
-    this.content.style.position = 'fixed';
-    this.updateContentSizeAndPosition();
-
-    observableFromEvent(this.window, 'resize')
-      .pipe(
-        takeUntil(merge(this.destroy$, this.unblock$).pipe(take(1))),
-      )
-      .subscribe(() => this.updateContentSizeAndPosition());
-
-    this.blockEnabled = true;
-  }
-
-  unblockScroll() {
-    if (this.blockEnabled) {
-      this.restoreStyles();
-      this.scrollService.scrollTo(this.previousScrollPosition.left, this.previousScrollPosition.top);
-      this.unblock$.next();
-      this.blockEnabled = false;
-    }
-  }
-
-  private canBeBlocked(): boolean {
-    if (this.blockEnabled) {
-      return false;
-    }
-
-    const { height: containerHeight } = this.viewportRuler.getViewportSize();
-    return this.content.scrollHeight > containerHeight;
-  }
-
-  private updateContentSizeAndPosition() {
-    const { top, left } = this.container.getBoundingClientRect();
-    this.content.style.left = coerceCssPixelValue(-this.previousScrollPosition.left + left);
-    this.content.style.top = coerceCssPixelValue(-this.previousScrollPosition.top + top);
-    this.layout.getDimensions()
-      .pipe(
-        map(({ clientWidth }: NbLayoutDimensions) => coerceCssPixelValue(clientWidth)),
-        take(1),
-      )
-      .subscribe((clientWidth: string) => this.content.style.width = clientWidth);
-  }
-
-  private backupStyles() {
-    this.previousContainerStyles = { overflowY: this.container.style.overflowY };
-    this.previousContentStyles = {
-      overflow: this.content.style.overflow,
-      position: this.content.style.position,
-      left: this.content.style.left,
-      top: this.content.style.top,
-      width: this.content.style.width,
-    };
-  }
-
-  private restoreStyles() {
-    this.container.style.overflowY = this.previousContainerStyles.overflowY;
-    this.content.style.overflow = this.previousContentStyles.overflow;
-    this.content.style.position = this.previousContentStyles.position;
-    this.content.style.left = this.previousContentStyles.left;
-    this.content.style.top = this.previousContentStyles.top;
-    this.content.style.width = this.previousContentStyles.width;
-  }
-}

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

@@ -0,0 +1,8 @@
+@mixin ngx-layout() {
+  @include media-breakpoint-down(is) {
+    .row {
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+  }
+}

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

@@ -1,15 +1,6 @@
 @import './themes';
 
 @mixin nb-overrides() {
-  // overrides bootstrap svg style
-  nb-icon svg {
-    vertical-align: top;
-  }
-
-  nb-auth-block .links nb-icon {
-    font-size: 2.5rem;
-  }
-
   nb-select.size-medium button {
     padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
 
@@ -17,52 +8,4 @@
       right: 0.41rem !important;
     }
   }
-
-  nb-flip-card {
-    .front-container {
-      -webkit-backface-visibility: visible;
-    }
-    .back-container {
-      -webkit-backface-visibility: hidden;
-    }
-
-    .flipped {
-      .front-container {
-        -webkit-backface-visibility: hidden;
-      }
-      .back-container {
-        -webkit-backface-visibility: visible;
-      }
-    }
-  }
-
-  nb-layout .layout .layout-container nb-sidebar {
-    &,
-    .main-container-fixed {
-      top: nb-theme(header-height);
-    }
-  }
-
-  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) {
-    @include f-window-mode(nb-theme(layout-window-mode-padding-top) / 4);
-  }
-
-  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) {
-    @include f-window-mode(nb-theme(layout-window-mode-padding-top) / 2);
-  }
-
-  @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) {
-    @include f-window-mode(nb-theme(layout-window-mode-padding-top));
-  }
-}
-
-@mixin f-window-mode ($padding-top) {
-  nb-layout.window-mode nb-layout-header.fixed {
-    top: $padding-top;
-  }
-
-  nb-sidebar .main-container-fixed {
-    height: calc(100vh - #{nb-theme(header-height)} - #{$padding-top}) !important;
-    top: calc(#{nb-theme(header-height)} + #{$padding-top}) !important;
-  }
 }

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

@@ -4,14 +4,18 @@
 @import 'themes';
 
 // framework component themes (styles tied to theme variables)
-@import '~@nebular/theme/styles/globals';
+@import '@nebular/theme/styles/globals';
-@import '~@nebular/auth/styles/all';
+@import '@nebular/auth/styles/globals';
-@import '~@nebular/bootstrap/styles/globals';
 
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/grid';
 
 // loading progress bar theme
 @import './pace.theme';
 
+@import './layout';
 @import './overrides';
 
 // install the framework and custom global styles
@@ -20,8 +24,8 @@
   // framework global styles
   @include nb-theme-global();
   @include nb-auth-global();
-  @include nb-bootstrap-global();
 
+  @include ngx-layout();
   // loading progress bar
   @include ngx-pace-theme();
 

src/app/@theme/styles/theme.corporate.ts

@@ -1,106 +1,64 @@
-import { NbJSThemeOptions } from '@nebular/theme';
+import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
 
-const palette = {
+const baseThemeVariables = baseTheme.variables;
-  primary: '#73a1ff',
-  success: '#5dcfe3',
-  info: '#ba7fec',
-  warning: '#ffa36b',
-  danger: '#ff6b83',
-};
-
-const theme = {
-  fontMain: 'Open Sans, sans-serif',
-  fontSecondary: 'Raleway, sans-serif',
-
-  bg: '#ffffff',
-  bg2: '#f7f9fc',
-  bg3: '#edf1f7',
-  bg4: '#e4e9f2',
-
-  border: '#ffffff',
-  border2: '#f7f9fc',
-  border3: '#edf1f7',
-  border4: '#e4e9f2',
-  border5: '#c5cee0',
-
-  fg: '#8f9bb3',
-  fgHeading: '#1a2138',
-  fgText: '#1a2138',
-  fgHighlight: palette.primary,
-  layoutBg: '#f7f9fc',
-  separator: '#edf1f7',
-
-  primary: palette.primary,
-  success: palette.success,
-  info: palette.info,
-  warning: palette.warning,
-  danger: palette.danger,
-
-  primaryLight: '#598bff',
-  successLight: '#2ce69b',
-  infoLight: '#42aaff',
-  warningLight: '#ffc94d',
-  dangerLight: '#ff708d',
-};
 
 export const CORPORATE_THEME = {
   name: 'corporate',
+  base: 'corporate',
   variables: {
-    ...theme,
-
     temperature: {
       arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
-      arcEmpty: theme.bg2,
+      arcEmpty: baseThemeVariables.bg2,
-      thumbBg: theme.bg2,
+      thumbBg: baseThemeVariables.bg2,
       thumbBorder: '#ffa36b',
     },
 
     solar: {
-      gradientLeft: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: theme.primary,
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['80%', '90%'],
     },
 
     traffic: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
       yAxisSplitLine: 'rgba(0, 0, 0, 0)',
 
-      lineBg: theme.primary,
+      lineBg: baseThemeVariables.primary,
       lineShadowBlur: '0',
-      itemColor: theme.border4,
+      itemColor: baseThemeVariables.border4,
-      itemBorderColor: theme.border4,
+      itemBorderColor: baseThemeVariables.border4,
-      itemEmphasisBorderColor: theme.primaryLight,
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg,
+      gradFrom: baseThemeVariables.bg,
-      gradTo: theme.bg,
+      gradTo: baseThemeVariables.bg,
     },
 
     electricity: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      axisLineColor: theme.border3,
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: theme.fg,
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
-      lineGradFrom: theme.primary,
+      lineGradFrom: baseThemeVariables.primary,
-      lineGradTo: theme.primary,
+      lineGradTo: baseThemeVariables.primary,
       lineShadow: 'rgba(0, 0, 0, 0)',
 
       areaGradFrom: 'rgba(0, 0, 0, 0)',
@@ -109,118 +67,118 @@ export const CORPORATE_THEME = {
     },
 
     bubbleMap: {
-      titleColor: theme.fgText,
+      titleColor: baseThemeVariables.fgText,
-      areaColor: theme.bg4,
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: theme.fgHighlight,
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: theme.border5,
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: theme.primary,
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: theme.success,
+      secondAnimationBarColor: baseThemeVariables.success,
 
       splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: theme.separator,
+      splitLineStyleColor: baseThemeVariables.separator,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: theme.warning,
+      gradientTo: baseThemeVariables.warning,
-      shadow: theme.warningLight,
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: theme.border4,
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: theme.bg4,
+      countryFillColor: baseThemeVariables.bg4,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
       hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: theme.border4,
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: theme.primaryLight,
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: theme.separator,
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.fgText,
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '0.7',
     },
 
     chartjs: {
-      axisLineColor: theme.separator,
+      axisLineColor: baseThemeVariables.separator,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
       firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // second line
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
 
       secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
       secondAreaGradTo: 'rgba(0, 0, 0, 0)',
       secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // third line
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
 
       thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
       thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
@@ -228,82 +186,82 @@ export const CORPORATE_THEME = {
     },
 
     profit: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
       firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
       secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.success,
+      thirdLineGradTo: baseThemeVariables.success,
       thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: theme.success,
+      firstItem: baseThemeVariables.success,
-      secondItem: theme.primary,
+      secondItem: baseThemeVariables.primary,
-      thirdItem: theme.bg3,
+      thirdItem: baseThemeVariables.bg3,
     },
 
     visitors: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '1',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.primary,
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: theme.primaryLight,
+      areaGradTo: baseThemeVariables.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: theme.success,
+      firstIcon: baseThemeVariables.success,
-      secondIcon: theme.primary,
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['65%', '90%'],
 
-      secondPieGradientLeft: theme.warning,
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientRight: baseThemeVariables.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['63%', '92%'],
       shadowOffsetX: '-4',
@@ -311,8 +269,8 @@ export const CORPORATE_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: theme.warning,
+      firstSection: baseThemeVariables.warning,
-      secondSection: theme.success,
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -321,28 +279,28 @@ export const CORPORATE_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: theme.primary,
+      gradFrom: baseThemeVariables.primary,
-      gradTo: theme.primary,
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },

src/app/@theme/styles/theme.cosmic.ts

@@ -1,309 +1,267 @@
-import { NbJSThemeOptions } from '@nebular/theme';
+import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
 
-const palette = {
+const baseThemeVariables = baseTheme.variables;
-  primary: '#a16eff',
-  success: '#00d68f',
-  info: '#0095ff',
-  warning: '#ffaa00',
-  danger: '#ff3d71',
-};
-
-const theme = {
-  fontMain: 'Open Sans, sans-serif',
-  fontSecondary: 'Raleway, sans-serif',
-
-  bg: '#323259',
-  bg2: '#252547',
-  bg3: '#1b1b38',
-  bg4: '#13132b',
-
-  border: '#323259',
-  border2: '#252547',
-  border3: '#1b1b38',
-  border4: '#13132b',
-  border5: '#13132b',
-
-  fg: '#b4b4db',
-  fgHeading: '#ffffff',
-  fgText: '#ffffff',
-  fgHighlight: palette.primary,
-  layoutBg: '#151a30',
-  separator: '#151a30',
-
-  primary: palette.primary,
-  success: palette.success,
-  info: palette.info,
-  warning: palette.warning,
-  danger: palette.danger,
-
-  primaryLight: '#b18aff',
-  successLight: '#2ce69b',
-  infoLight: '#42aaff',
-  warningLight: '#ffc94d',
-  dangerLight: '#ff708d',
-};
 
 export const COSMIC_THEME = {
   name: 'cosmic',
+  base: 'cosmic',
   variables: {
-    ...theme,
-
     temperature: {
       arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
-      arcEmpty: theme.bg2,
+      arcEmpty: baseThemeVariables.bg2,
       thumbBg: '#ffffff',
       thumbBorder: '#ffffff',
     },
 
     solar: {
-      gradientLeft: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: theme.primary,
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['70%', '90%'],
     },
 
     traffic: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      lineBg: theme.border2,
+      lineBg: baseThemeVariables.border2,
       lineShadowBlur: '14',
-      itemColor: theme.border2,
+      itemColor: baseThemeVariables.border2,
-      itemBorderColor: theme.border2,
+      itemBorderColor: baseThemeVariables.border2,
-      itemEmphasisBorderColor: theme.primary,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
-      shadowLineDarkBg: theme.border3,
+      shadowLineDarkBg: baseThemeVariables.border3,
-      shadowLineShadow: theme.border3,
+      shadowLineShadow: baseThemeVariables.border3,
-      gradFrom: theme.bg,
+      gradFrom: baseThemeVariables.bg,
-      gradTo: theme.bg2,
+      gradTo: baseThemeVariables.bg2,
     },
 
     electricity: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      axisLineColor: theme.border3,
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: theme.fg,
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.border2,
+      itemBorderColor: baseThemeVariables.border2,
       lineStyle: 'dotted',
       lineWidth: '6',
-      lineGradFrom: theme.success,
+      lineGradFrom: baseThemeVariables.success,
-      lineGradTo: theme.warning,
+      lineGradTo: baseThemeVariables.warning,
-      lineShadow: theme.bg4,
+      lineShadow: baseThemeVariables.bg4,
 
-      areaGradFrom: theme.bg2,
+      areaGradFrom: baseThemeVariables.bg2,
-      areaGradTo: theme.bg3,
+      areaGradTo: baseThemeVariables.bg3,
-      shadowLineDarkBg: theme.bg3,
+      shadowLineDarkBg: baseThemeVariables.bg3,
     },
 
     bubbleMap: {
-      titleColor: theme.fgText,
+      titleColor: baseThemeVariables.fgText,
-      areaColor: theme.bg4,
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: theme.fgHighlight,
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: theme.border5,
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: theme.primary,
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: theme.success,
+      secondAnimationBarColor: baseThemeVariables.success,
 
       splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: theme.border2,
+      splitLineStyleColor: baseThemeVariables.border2,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: theme.warning,
+      gradientTo: baseThemeVariables.warning,
-      shadow: theme.warningLight,
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '5',
 
-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: theme.border4,
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: theme.bg3,
+      countryFillColor: baseThemeVariables.bg3,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
       hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: theme.border4,
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: theme.primaryLight,
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: theme.separator,
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.fgText,
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '1',
     },
 
     chartjs: {
-      axisLineColor: theme.separator,
+      axisLineColor: baseThemeVariables.separator,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: theme.bg2,
+      firstAreaGradFrom: baseThemeVariables.bg2,
-      firstAreaGradTo: theme.bg2,
+      firstAreaGradTo: baseThemeVariables.bg2,
-      firstShadowLineDarkBg: theme.bg2,
+      firstShadowLineDarkBg: baseThemeVariables.bg2,
 
       // second line
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
 
       secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
       secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
-      secondShadowLineDarkBg: theme.primary,
+      secondShadowLineDarkBg: baseThemeVariables.primary,
 
       // third line
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
 
       thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
       thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
-      thirdShadowLineDarkBg: theme.success,
+      thirdShadowLineDarkBg: baseThemeVariables.success,
     },
 
     profit: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: theme.bg2,
+      firstLineGradFrom: baseThemeVariables.bg2,
-      firstLineGradTo: theme.bg2,
+      firstLineGradTo: baseThemeVariables.bg2,
       firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
       secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
       thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: theme.success,
+      firstItem: baseThemeVariables.success,
-      secondItem: theme.primary,
+      secondItem: baseThemeVariables.primary,
-      thirdItem: theme.bg2,
+      thirdItem: baseThemeVariables.bg2,
     },
 
     visitors: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '1',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.primary,
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: theme.primaryLight,
+      areaGradTo: baseThemeVariables.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: theme.success,
+      firstIcon: baseThemeVariables.success,
-      secondIcon: theme.primary,
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.successLight,
+      firstPieGradientRight: baseThemeVariables.successLight,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: theme.warning,
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientRight: baseThemeVariables.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '95%'],
       shadowOffsetX: '0',
@@ -311,8 +269,8 @@ export const COSMIC_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: theme.warning,
+      firstSection: baseThemeVariables.warning,
-      secondSection: theme.success,
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -321,28 +279,28 @@ export const COSMIC_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: theme.primary,
+      gradFrom: baseThemeVariables.primary,
-      gradTo: theme.primary,
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },

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

@@ -1,226 +1,190 @@
-import { NbJSThemeOptions } from '@nebular/theme';
+import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
 
-const palette = {
+const baseThemeVariables = baseTheme.variables;
-  primary: '#3366ff',
-  success: '#00d68f',
-  info: '#0095ff',
-  warning: '#ffaa00',
-  danger: '#ff3d71',
-};
-
-const theme = {
-  fontMain: 'Open Sans, sans-serif',
-  fontSecondary: 'Raleway, sans-serif',
-
-  bg: '#222b45',
-  bg2: '#1a2138',
-  bg3: '#151a30',
-  bg4: '#101426',
-
-  border: '#222b45',
-  border2: '#1a2138',
-  border3: '#151a30',
-  border4: '#101426',
-  border5: '#101426',
-
-  fg: '#8f9bb3',
-  fgHeading: '#ffffff',
-  fgText: '#ffffff',
-  fgHighlight: palette.primary,
-  layoutBg: '#1b1b38',
-  separator: '#1b1b38',
-
-  primary: palette.primary,
-  success: palette.success,
-  info: palette.info,
-  warning: palette.warning,
-  danger: palette.danger,
-
-  primaryLight: '#598bff',
-  successLight: '#2ce69b',
-  infoLight: '#42aaff',
-  warningLight: '#ffc94d',
-  dangerLight: '#ff708d',
-};
 
 export const DARK_THEME = {
   name: 'dark',
+  base: 'dark',
   variables: {
-    ...theme,
-
     temperature: {
-      arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
+      arcFill: [
-      arcEmpty: theme.bg2,
+        baseThemeVariables.primary,
-      thumbBg: theme.bg2,
+        baseThemeVariables.primary,
-      thumbBorder: theme.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
     },
 
     solar: {
-      gradientLeft: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: theme.primary,
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['80%', '90%'],
     },
 
     traffic: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      lineBg: theme.border4,
+      lineBg: baseThemeVariables.border4,
       lineShadowBlur: '1',
-      itemColor: theme.border4,
+      itemColor: baseThemeVariables.border4,
-      itemBorderColor: theme.border4,
+      itemBorderColor: baseThemeVariables.border4,
-      itemEmphasisBorderColor: theme.primary,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg2,
+      gradFrom: baseThemeVariables.bg2,
-      gradTo: theme.bg2,
+      gradTo: baseThemeVariables.bg2,
     },
 
     electricity: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      axisLineColor: theme.border3,
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: theme.fg,
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
-      lineGradFrom: theme.primary,
+      lineGradFrom: baseThemeVariables.primary,
-      lineGradTo: theme.primary,
+      lineGradTo: baseThemeVariables.primary,
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.bg2,
+      areaGradFrom: baseThemeVariables.bg2,
-      areaGradTo: theme.bg2,
+      areaGradTo: baseThemeVariables.bg2,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
     },
 
     bubbleMap: {
-      titleColor: theme.fgText,
+      titleColor: baseThemeVariables.fgText,
-      areaColor: theme.bg4,
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: theme.fgHighlight,
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: theme.border5,
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: theme.primary,
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: theme.success,
+      secondAnimationBarColor: baseThemeVariables.success,
 
       splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: theme.separator,
+      splitLineStyleColor: baseThemeVariables.separator,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: theme.warning,
+      gradientTo: baseThemeVariables.warning,
-      shadow: theme.warningLight,
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: theme.border4,
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: theme.bg3,
+      countryFillColor: baseThemeVariables.bg3,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
       hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: theme.border4,
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: theme.primaryLight,
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: theme.separator,
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.fgText,
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '0.7',
     },
 
     chartjs: {
-      axisLineColor: theme.separator,
+      axisLineColor: baseThemeVariables.separator,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
       firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // second line
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.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: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
 
       thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
       thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
@@ -228,82 +192,82 @@ export const DARK_THEME = {
     },
 
     profit: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
       firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
       secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
       thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: theme.success,
+      firstItem: baseThemeVariables.success,
-      secondItem: theme.primary,
+      secondItem: baseThemeVariables.primary,
-      thirdItem: theme.bg3,
+      thirdItem: baseThemeVariables.bg3,
     },
 
     visitors: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.primary,
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: theme.primaryLight,
+      areaGradTo: baseThemeVariables.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: theme.success,
+      firstIcon: baseThemeVariables.success,
-      secondIcon: theme.primary,
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: theme.warning,
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientRight: baseThemeVariables.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '97%'],
       shadowOffsetX: '0',
@@ -311,8 +275,8 @@ export const DARK_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: theme.warning,
+      firstSection: baseThemeVariables.warning,
-      secondSection: theme.success,
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -321,28 +285,28 @@ export const DARK_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: theme.primary,
+      gradFrom: baseThemeVariables.primary,
-      gradTo: theme.primary,
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },

src/app/@theme/styles/theme.default.ts

@@ -1,226 +1,190 @@
-import { NbJSThemeOptions } from '@nebular/theme';
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
 
-const palette = {
+const baseThemeVariables = baseTheme.variables;
-  primary: '#3366ff',
-  success: '#00d68f',
-  info: '#0095ff',
-  warning: '#ffaa00',
-  danger: '#ff3d71',
-};
-
-const theme = {
-  fontMain: 'Open Sans, sans-serif',
-  fontSecondary: 'Raleway, sans-serif',
-
-  bg: '#ffffff',
-  bg2: '#f7f9fc',
-  bg3: '#edf1f7',
-  bg4: '#e4e9f2',
-
-  border: '#ffffff',
-  border2: '#f7f9fc',
-  border3: '#edf1f7',
-  border4: '#e4e9f2',
-  border5: '#c5cee0',
-
-  fg: '#8f9bb3',
-  fgHeading: '#1a2138',
-  fgText: '#1a2138',
-  fgHighlight: palette.primary,
-  layoutBg: '#f7f9fc',
-  separator: '#edf1f7',
-
-  primary: palette.primary,
-  success: palette.success,
-  info: palette.info,
-  warning: palette.warning,
-  danger: palette.danger,
-
-  primaryLight: '#598bff',
-  successLight: '#2ce69b',
-  infoLight: '#42aaff',
-  warningLight: '#ffc94d',
-  dangerLight: '#ff708d',
-};
 
 export const DEFAULT_THEME = {
   name: 'default',
+  base: 'default',
   variables: {
-    ...theme,
-
     temperature: {
-      arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
+      arcFill: [
-      arcEmpty: theme.bg2,
+        baseThemeVariables.primary,
-      thumbBg: theme.bg2,
+        baseThemeVariables.primary,
-      thumbBorder: theme.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
     },
 
     solar: {
-      gradientLeft: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
-      gradientRight: theme.primary,
+      gradientRight: baseThemeVariables.primary,
       shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
       radius: ['80%', '90%'],
     },
 
     traffic: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      lineBg: theme.border4,
+      lineBg: baseThemeVariables.border4,
       lineShadowBlur: '1',
-      itemColor: theme.border4,
+      itemColor: baseThemeVariables.border4,
-      itemBorderColor: theme.border4,
+      itemBorderColor: baseThemeVariables.border4,
-      itemEmphasisBorderColor: theme.primary,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg2,
+      gradFrom: baseThemeVariables.bg2,
-      gradTo: theme.bg2,
+      gradTo: baseThemeVariables.bg2,
     },
 
     electricity: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipLineColor: baseThemeVariables.fgText,
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
 
-      axisLineColor: theme.border3,
+      axisLineColor: baseThemeVariables.border3,
-      xAxisTextColor: theme.fg,
+      xAxisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
-      lineGradFrom: theme.primary,
+      lineGradFrom: baseThemeVariables.primary,
-      lineGradTo: theme.primary,
+      lineGradTo: baseThemeVariables.primary,
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.bg2,
+      areaGradFrom: baseThemeVariables.bg2,
-      areaGradTo: theme.bg2,
+      areaGradTo: baseThemeVariables.bg2,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
     },
 
     bubbleMap: {
-      titleColor: theme.fgText,
+      titleColor: baseThemeVariables.fgText,
-      areaColor: theme.bg4,
+      areaColor: baseThemeVariables.bg4,
-      areaHoverColor: theme.fgHighlight,
+      areaHoverColor: baseThemeVariables.fgHighlight,
-      areaBorderColor: theme.border5,
+      areaBorderColor: baseThemeVariables.border5,
     },
 
     profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
 
-      firstAnimationBarColor: theme.primary,
+      firstAnimationBarColor: baseThemeVariables.primary,
-      secondAnimationBarColor: theme.success,
+      secondAnimationBarColor: baseThemeVariables.success,
 
       splitLineStyleOpacity: '1',
       splitLineStyleWidth: '1',
-      splitLineStyleColor: theme.separator,
+      splitLineStyleColor: baseThemeVariables.separator,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },
 
     trafficBarEchart: {
-      gradientFrom: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
-      gradientTo: theme.warning,
+      gradientTo: baseThemeVariables.warning,
-      shadow: theme.warningLight,
+      shadow: baseThemeVariables.warningLight,
       shadowBlur: '0',
 
-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
       axisFontSize: '12',
 
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
     },
 
     countryOrders: {
-      countryBorderColor: theme.border4,
+      countryBorderColor: baseThemeVariables.border4,
-      countryFillColor: theme.bg3,
+      countryFillColor: baseThemeVariables.bg3,
       countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
       hoveredCountryBorderWidth: '1',
 
-      chartAxisLineColor: theme.border4,
+      chartAxisLineColor: baseThemeVariables.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisTextColor: baseThemeVariables.fg,
       chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
+      chartGradientTo: baseThemeVariables.primary,
-      chartGradientFrom: theme.primaryLight,
+      chartGradientFrom: baseThemeVariables.primaryLight,
-      chartAxisSplitLine: theme.separator,
+      chartAxisSplitLine: baseThemeVariables.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartShadowLineColor: baseThemeVariables.primaryLight,
 
-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,
 
-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
     },
 
     echarts: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.fgText,
+      axisLineColor: baseThemeVariables.fgText,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
       areaOpacity: '0.7',
     },
 
     chartjs: {
-      axisLineColor: theme.separator,
+      axisLineColor: baseThemeVariables.separator,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
     },
 
     orders: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '0',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'solid',
       lineWidth: '4',
 
       // first line
-      firstAreaGradFrom: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
       firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
 
       // second line
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.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: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
 
       thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
       thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
@@ -228,82 +192,82 @@ export const DEFAULT_THEME = {
     },
 
     profit: {
-      bg: theme.bg,
+      bg: baseThemeVariables.bg,
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
-      splitLineColor: theme.separator,
+      splitLineColor: baseThemeVariables.separator,
       areaOpacity: '1',
 
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
 
       // first bar
-      firstLineGradFrom: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
       firstLineShadow: 'rgba(0, 0, 0, 0)',
 
       // second bar
-      secondLineGradFrom: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradTo: baseThemeVariables.primary,
       secondLineShadow: 'rgba(0, 0, 0, 0)',
 
       // third bar
-      thirdLineGradFrom: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradTo: baseThemeVariables.successLight,
       thirdLineShadow: 'rgba(0, 0, 0, 0)',
     },
 
     orderProfitLegend: {
-      firstItem: theme.success,
+      firstItem: baseThemeVariables.success,
-      secondItem: theme.primary,
+      secondItem: baseThemeVariables.primary,
-      thirdItem: theme.bg3,
+      thirdItem: baseThemeVariables.bg3,
     },
 
     visitors: {
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '1',
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: theme.border4,
+      axisLineColor: baseThemeVariables.border4,
       axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,
-      yAxisSplitLine: theme.separator,
+      yAxisSplitLine: baseThemeVariables.separator,
 
-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: theme.primary,
+      areaGradFrom: baseThemeVariables.primary,
-      areaGradTo: theme.primaryLight,
+      areaGradTo: baseThemeVariables.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradTo: baseThemeVariables.success,
     },
 
     visitorsLegend: {
-      firstIcon: theme.success,
+      firstIcon: baseThemeVariables.success,
-      secondIcon: theme.primary,
+      secondIcon: baseThemeVariables.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: theme.warning,
+      secondPieGradientLeft: baseThemeVariables.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientRight: baseThemeVariables.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '97%'],
       shadowOffsetX: '0',
@@ -311,8 +275,8 @@ export const DEFAULT_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: theme.warning,
+      firstSection: baseThemeVariables.warning,
-      secondSection: theme.success,
+      secondSection: baseThemeVariables.success,
     },
 
     earningPie: {
@@ -321,28 +285,28 @@ export const DEFAULT_THEME = {
 
       fontSize: '22',
 
-      firstPieGradientLeft: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientRight: baseThemeVariables.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      secondPieGradientLeft: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
 
-      thirdPieGradientLeft: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
       thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
     },
 
     earningLine: {
-      gradFrom: theme.primary,
+      gradFrom: baseThemeVariables.primary,
-      gradTo: theme.primary,
+      gradTo: baseThemeVariables.primary,
 
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
       tooltipFontWeight: 'normal',
       tooltipFontSize: '16',
-      tooltipBg: theme.bg,
+      tooltipBg: baseThemeVariables.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBorderColor: baseThemeVariables.border2,
       tooltipBorderWidth: '1',
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
     },

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

@@ -1,12 +1,10 @@
 // @nebular theming framework
-@import '~@nebular/theme/styles/theming';
+@import '@nebular/theme/styles/theming';
 // @nebular out of the box themes
-@import '~@nebular/theme/styles/themes';
+@import '@nebular/theme/styles/themes';
 
 $nb-themes: nb-register-theme((
-  font-family-secondary: font-family-primary,
   layout-padding-top: 2.25rem,
-  layout-window-mode-padding-top: 0,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -24,16 +22,10 @@ $nb-themes: nb-register-theme((
   slide-out-background: #f7f9fc,
   slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-
-  smart-table-bg-even: background-basic-color-2,
-  smart-table-bg-active: background-basic-color-3,
-  smart-table-paging-hover: transparent,
 ), default, default);
 
 $nb-themes: nb-register-theme((
-  font-family-secondary: font-family-primary,
   layout-padding-top: 2.25rem,
-  layout-window-mode-padding-top: 0,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -51,16 +43,10 @@ $nb-themes: nb-register-theme((
   slide-out-background: #252547,
   slide-out-shadow-color: 2px 0 3px #29157a,
   slide-out-shadow-color-rtl: -2px 0 3px #29157a,
-
-  smart-table-bg-even: background-basic-color-2,
-  smart-table-bg-active: background-basic-color-3,
-  smart-table-paging-hover: transparent,
 ), cosmic, cosmic);
 
 $nb-themes: nb-register-theme((
-  font-family-secondary: font-family-primary,
   layout-padding-top: 2.25rem,
-  layout-window-mode-padding-top: 0,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -78,16 +64,10 @@ $nb-themes: nb-register-theme((
   slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
   slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-
-  smart-table-bg-even: background-basic-color-2,
-  smart-table-bg-active: background-basic-color-3,
-  smart-table-paging-hover: transparent,
 ), corporate, corporate);
 
 $nb-themes: nb-register-theme((
-  font-family-secondary: font-family-primary,
   layout-padding-top: 2.25rem,
-  layout-window-mode-padding-top: 0,
 
   menu-item-icon-margin: 0 0.5rem 0 0,
 
@@ -105,8 +85,4 @@ $nb-themes: nb-register-theme((
   slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
   slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-
-  smart-table-bg-even: background-basic-color-2,
-  smart-table-bg-active: background-basic-color-3,
-  smart-table-paging-hover: transparent,
 ), dark, dark);

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

@@ -34,7 +34,6 @@ import {
   ThreeColumnsLayoutComponent,
   TwoColumnsLayoutComponent,
 } from './layouts';
-import { WindowModeBlockScrollService } from './services/window-mode-block-scroll.service';
 import { DEFAULT_THEME } from './styles/theme.default';
 import { COSMIC_THEME } from './styles/theme.cosmic';
 import { CORPORATE_THEME } from './styles/theme.corporate';
@@ -77,8 +76,8 @@ const PIPES = [
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<ThemeModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(
@@ -87,7 +86,6 @@ export class ThemeModule {
           },
           [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
         ).providers,
-        WindowModeBlockScrollService,
       ],
     };
   }

src/app/app-routing.module.ts

@@ -9,10 +9,10 @@ import {
   NbResetPasswordComponent,
 } from '@nebular/auth';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'pages',
-    loadChildren: () => import('app/pages/pages.module')
+    loadChildren: () => import('./pages/pages.module')
       .then(m => m.PagesModule),
   },
   {

src/app/app.component.ts

@@ -5,6 +5,7 @@
  */
 import { Component, OnInit } from '@angular/core';
 import { AnalyticsService } from './@core/utils/analytics.service';
+import { SeoService } from './@core/utils/seo.service';
 
 @Component({
   selector: 'ngx-app',
@@ -12,10 +13,11 @@ import { AnalyticsService } from './@core/utils/analytics.service';
 })
 export class AppComponent implements OnInit {
 
-  constructor(private analytics: AnalyticsService) {
+  constructor(private analytics: AnalyticsService, private seoService: SeoService) {
   }
 
   ngOnInit(): void {
     this.analytics.trackPageViews();
+    this.seoService.trackCanonicalChanges();
   }
 }

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/dashboard.component.scss

@@ -1,6 +1,6 @@
 @import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   .solar-card nb-card-header {

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -10,6 +10,7 @@ import { ElectricityChart } from '../../../../@core/data/electricity';
   template: `
     <div echarts
          [options]="option"
+         [merge]="option"
          class="echart"
          (chartInit)="onChartInit($event)">
     </div>
@@ -26,7 +27,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
 

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

@@ -9,7 +9,7 @@
   </div>
 
   <nb-card-footer>
-    <a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
+    <a href="https://akveo.github.io/react-native-ui-kitten?utm_campaign=ui_kitten%20-%20home%20-%20ngx_admin%20code%20embed&utm_source=ngx_admin&utm_medium=embedded&utm_content=iot_dashboard_kitten_card" target="_blank">
       <nb-icon icon="globe" pack="eva"></nb-icon>
     </a>
     <a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">

src/app/pages/dashboard/rooms/player/player.component.scss

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   height: 100%;
@@ -12,13 +12,6 @@
     height: 100%;
   }
 
-  .subtitle {
-    font-family: nb-theme(text-subtitle-font-family);
-    font-size: nb-theme(text-subtitle-font-size);
-    font-weight: nb-theme(text-subtitle-font-weight);
-    line-height: nb-theme(text-subtitle-line-height);
-  }
-
   .body {
     display: flex;
     flex-direction: column;

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

@@ -78,7 +78,7 @@
               [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
       </g>
 
-      <g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
+      <g [attr.id]="room.id" [class.selected-room]="selectedRoom === room.id" *ngFor="let room of sortedRooms">
         <path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
         <path class="room-border" [attr.d]="room.border.d" />
         <path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />

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

@@ -14,7 +14,7 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   private hideGrid: boolean;
 
-  @Output() select: EventEmitter<number> = new EventEmitter();
+  @Output() selectEvent: EventEmitter<number> = new EventEmitter();
 
   selectedRoom = null;
   sortedRooms = [];
@@ -108,17 +108,14 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   }
 
   selectRoom(roomNumber) {
-    this.select.emit(roomNumber);
+    this.selectEvent.emit(roomNumber);
     this.selectedRoom = roomNumber;
     this.sortRooms();
   }
 
   getUrlPath(id: string) {
-    let baseHref = this.locationStrategy.getBaseHref();
+    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
-    if (baseHref.endsWith('')) {
+    const path = this.location.path().replace(/\/$/, '');
-      baseHref = baseHref.slice(0, -1);
-    }
-    const path = this.location.path();
 
     return `url(${baseHref}${path}${id})`;
   }

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   ngx-room-selector {

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

@@ -12,7 +12,7 @@ import { map } from 'rxjs/operators';
                class="collapse"
                [hidden]="isCollapsed()">
       </nb-icon>
-      <ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
+      <ngx-room-selector [class.dark-background]="isDarkTheme" (selectEvent)="select($event)"></ngx-room-selector>
       <ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
     </nb-card>
   `,

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 

src/app/pages/dashboard/solar/solar.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
@@ -26,9 +26,5 @@
 
   .details {
     color: nb-theme(text-hint-color);
-    font-family: nb-theme(text-subtitle-2-font-family);
-    font-size: nb-theme(text-subtitle-2-font-size);
-    font-weight: nb-theme(text-subtitle-2-font-weight);
-    line-height: nb-theme(text-subtitle-2-line-height);
   }
 }

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

@@ -15,7 +15,7 @@ declare const echarts: any;
         </div>
         <div class="info">
           <div class="h4 value">6.421 kWh</div>
-          <div class="details"><span>out of</span> 8.421 kWh</div>
+          <div class="details subtitle-2"><span>out of</span> 8.421 kWh</div>
         </div>
       </nb-card-body>
     </nb-card>
@@ -25,7 +25,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
 
   private value = 0;
 
-  @Input('chartValue')
+  @Input()
   set chartValue(value: number) {
     this.value = value;
 

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

@@ -44,6 +44,7 @@
     &.off {
       color: nb-theme(text-hint-color);
 
+      .status,
       .title,
       .icon {
         color: nb-theme(text-hint-color);
@@ -73,10 +74,6 @@
 
     .status {
       text-transform: uppercase;
-      font-family: nb-theme(text-paragraph-2-font-family);
-      font-size: nb-theme(text-paragraph-2-font-size);
-      font-weight: nb-theme(text-paragraph-2-font-weight);
-      line-height: nb-theme(text-paragraph-2-line-height);
     }
   }
 }

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

@@ -13,7 +13,7 @@ import { Component, Input } from '@angular/core';
 
       <div class="details">
         <div class="title h5">{{ title }}</div>
-        <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
+        <div class="status paragraph-2">{{ on ? 'ON' : 'OFF' }}</div>
       </div>
     </nb-card>
   `,

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

@@ -130,11 +130,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   }
 
   getUrlPath(id: string) {
-    let baseHref = this.locationStrategy.getBaseHref();
+    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
-    if (baseHref.endsWith('')) {
+    const path = this.location.path().replace(/\/$/, '');
-      baseHref = baseHref.slice(0, -1);
-    }
-    const path = this.location.path();
 
     return `url(${baseHref}${path}${id}${this.svgControlId})`;
   }

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
 

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

@@ -26,7 +26,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

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

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   padding: 1.5rem 4.5rem;

src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts

@@ -11,6 +11,7 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
   template: `
     <div echarts
          [options]="option"
+         [merge]="option"
          class="echart"
          (chartInit)="onChartInit($event)">
     </div>
@@ -34,7 +35,7 @@ export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts

@@ -24,7 +24,7 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   display: flex;

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 import { LayoutService } from '../../../../@core/utils/layout.service';
@@ -19,7 +19,7 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
     </div>
   `,
 })
-export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges {
+export class CountryOrdersChartComponent implements OnDestroy, OnChanges {
 
   @Input() countryName: string;
   @Input() data: number[];
@@ -33,7 +33,7 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )
@@ -41,7 +41,7 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.data && !changes.data.isFirstChange()) {
+    if (changes.data && !changes.data.isFirstChange() && this.echartsInstance) {
       this.echartsInstance.setOption({
         series: [
           {
@@ -58,7 +58,7 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
     }
   }
 
-  ngAfterViewInit() {
+  initChartOptions() {
     this.theme.getJsTheme()
       .pipe(takeWhile(() => this.alive))
       .subscribe(config => {
@@ -166,6 +166,8 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
 
   onChartInit(ec) {
     this.echartsInstance = ec;
+
+    this.initChartOptions();
   }
 
   resizeChart() {

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
 

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';
@@ -10,7 +10,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
     <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
       <nb-card-header>Country Orders Statistics</nb-card-header>
       <nb-card-body>
-        <ngx-country-orders-map (select)="selectCountryById($event)"
+        <ngx-country-orders-map (selectEvent)="selectCountryById($event)"
                                 countryId="USA">
         </ngx-country-orders-map>
         <ngx-country-orders-chart [countryName]="countryName"
@@ -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/country-orders/map/country-orders-map.component.scss

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
 

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

@@ -19,7 +19,7 @@ export class CountryOrdersMapComponent implements OnDestroy {
 
   @Input() countryId: string;
 
-  @Output() select: EventEmitter<any> = new EventEmitter();
+  @Output() selectEvent: EventEmitter<any> = new EventEmitter();
 
   layers = [];
   currentTheme: any;
@@ -124,7 +124,7 @@ export class CountryOrdersMapComponent implements OnDestroy {
       this.resetHighlight(this.selectedCountry);
       this.highlightFeature(featureLayer);
       this.selectedCountry = featureLayer;
-      this.select.emit(featureLayer.feature.properties.name);
+      this.selectEvent.emit(featureLayer.feature.properties.name);
     }
   }
 

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

@@ -1,6 +1,6 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   ngx-earning-pie-chart,

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

@@ -1,5 +1,5 @@
 @import '../../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/typography/typography';
+@import '@nebular/theme/styles/global/typography/typography';
 
 @include nb-install-component() {
   display: flex;

src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts

@@ -23,7 +23,7 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/legend-chart/legend-chart.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   display: flex;

src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts

@@ -24,7 +24,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts

@@ -27,7 +27,7 @@ export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/profit-card/profit-card.component.scss

@@ -10,16 +10,22 @@
     cursor: pointer;
   }
 
-  ::ng-deep .flipped {
+  ::ng-deep {
-    .back-container {
+    .front-container {
-      .flip-icon {
+      max-width: 100%;
-        transform: scaleX(-1);
-      }
     }
 
-    .front-container {
+    .flipped {
-      .flip-icon {
+      .back-container {
-        display: none;
+        .flip-icon {
+          transform: scaleX(-1);
+        }
+      }
+
+      .front-container {
+        .flip-icon {
+          display: none;
+        }
       }
     }
   }

src/app/pages/e-commerce/progress-section/progress-section.component.html

@@ -1,7 +1,7 @@
 <nb-card size="medium">
   <nb-card-body>
     <div class="progress-info" *ngFor="let item of progressInfoData">
-      <div class="title">{{ item.title }}</div>
+      <div class="subtitle">{{ item.title }}</div>
       <div class="h3">{{ item.value | ngxNumberWithCommas }}</div>
       <nb-progress-bar [value]="item.activeProgress"></nb-progress-bar>
       <div class="caption description">

src/app/pages/e-commerce/progress-section/progress-section.component.scss

@@ -14,13 +14,6 @@ $shadow-green: #00977e;
     }
   }
 
-  .title {
-    font-family: nb-theme(text-subtitle-font-family);
-    font-size: nb-theme(text-subtitle-font-size);
-    font-weight: nb-theme(text-subtitle-font-weight);
-    line-height: nb-theme(text-subtitle-line-height);
-  }
-
   .description {
     margin-top: 0.5rem;
   }

src/app/pages/e-commerce/slide-out/slide-out.component.scss

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   $slide-out-container-width: 40%;

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts

@@ -28,7 +28,7 @@ export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnCha
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

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

@@ -1,7 +1,7 @@
 <nb-list>
   <nb-list-item class="item" *ngFor="let item of frontCardData; trackBy: trackByDate">
     <span>{{ item.date }}</span>
-    <span clsas="value">{{ item.value }}</span>
+    <span>{{ item.value }}</span>
     <span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
       <nb-icon [icon]="item.delta.up ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
       {{ item.delta.value }}%

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

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
@@ -19,11 +19,6 @@
     }
   }
 
-  .value,
-  .delta {
-    text-align: center;
-  }
-
   .delta {
     display: flex;
     align-items: center;

src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts

@@ -10,6 +10,7 @@ import { OutlineData } from '../../../../@core/data/visitors-analytics';
   template: `
     <div echarts
          [options]="option"
+         [merge]="option"
          class="echart"
          (chartInit)="onChartInit($event)">
     </div>
@@ -30,7 +31,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

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

@@ -1,7 +1,7 @@
 <nb-card size="medium">
   <nb-card-header>
     <h3>Visitors Analytics</h3>
-    <div class="sub-title">Consumption</div>
+    <div class="subtitle">Consumption</div>
   </nb-card-header>
   <nb-card-body>
     <div class="chart-container">

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

@@ -1,6 +1,6 @@
 @import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   position: relative;
@@ -15,12 +15,8 @@
     border-bottom: none;
   }
 
-  .sub-title {
+  .subtitle {
     color: nb-theme(text-hint-color);
-    font-family: nb-theme(text-subtitle-font-family);
-    font-size: nb-theme(text-subtitle-font-size);
-    font-weight: nb-theme(text-subtitle-font-weight);
-    line-height: nb-theme(text-subtitle-line-height);
   }
 
   .container {

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts

@@ -21,7 +21,7 @@ export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDe
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts

@@ -2,10 +2,9 @@ import { Component } from '@angular/core';
 import { CalendarKitMonthCellComponent } from './month-cell/month-cell.component';
 
 @Component({
-  selector: 'ngx-calendar-kit',
+    selector: 'ngx-calendar-kit',
-  templateUrl: 'calendar-kit.component.html',
+    templateUrl: 'calendar-kit.component.html',
-  styleUrls: ['calendar-kit.component.scss'],
+    styleUrls: ['calendar-kit.component.scss'],
-  entryComponents: [CalendarKitMonthCellComponent],
 })
 export class CalendarKitFullCalendarShowcaseComponent {
   month = new Date();

src/app/pages/extra-components/calendar/calendar.component.html

@@ -3,7 +3,7 @@
     <span class="subtitle">
       Selected date: {{ date | date }}
     </span>
-    <nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar>
+    <nb-calendar [(date)]="date" [boundingMonth]="true" showWeekNumber></nb-calendar>
   </div>
   <div class="calendar-container">
     <span class="subtitle">

src/app/pages/extra-components/calendar/calendar.component.scss

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
@@ -16,10 +16,6 @@
 
   .subtitle {
     display: block;
-    font-family: nb-theme(text-subtitle-font-family);
-    font-size: nb-theme(text-subtitle-font-size);
-    font-weight: nb-theme(text-subtitle-font-weight);
-    line-height: nb-theme(text-subtitle-line-height);
     margin-bottom: 0.5rem;
   }
 

src/app/pages/extra-components/calendar/calendar.component.ts

@@ -3,10 +3,9 @@ import { NbCalendarRange, NbDateService } from '@nebular/theme';
 import { DayCellComponent } from './day-cell/day-cell.component';
 
 @Component({
-  selector: 'ngx-calendar',
+    selector: 'ngx-calendar',
-  templateUrl: 'calendar.component.html',
+    templateUrl: 'calendar.component.html',
-  styleUrls: ['calendar.component.scss'],
+    styleUrls: ['calendar.component.scss'],
-  entryComponents: [DayCellComponent],
 })
 export class CalendarComponent {
 

src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts

@@ -1,11 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, HostListener } from '@angular/core';
 import { NbCalendarDayCellComponent } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-day-cell',
   templateUrl: 'day-cell.component.html',
   styleUrls: ['day-cell.component.scss'],
-  host: { '(click)': 'onClick()', 'class': 'day-cell' },
 })
 export class DayCellComponent extends NbCalendarDayCellComponent<Date> {
+  @HostBinding('class') classes = 'day-cell';
+
+  @HostListener('click') onClick() {
+    // do work
+  }
 }

src/app/pages/extra-components/chat/chat.component.scss

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
 
 @import '../../../@theme/styles/themes';
 

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

@@ -54,7 +54,7 @@
       <nb-card-body class="checkbox-radio">
         <div class="demo-items">
           <nb-checkbox>Checkbox 1</nb-checkbox>
-          <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
+          <nb-checkbox checked>Checkbox 2</nb-checkbox>
         </div>
         <div class="demo-items">
           <nb-radio-group [(value)]="radioGroupValue">

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

@@ -18,6 +18,7 @@ import { FormInputsComponent } from './form-inputs/form-inputs.component';
 import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
 import { DatepickerComponent } from './datepicker/datepicker.component';
 import { ButtonsComponent } from './buttons/buttons.component';
+import { FormsModule as ngFormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
@@ -33,6 +34,7 @@ import { ButtonsComponent } from './buttons/buttons.component';
     FormsRoutingModule,
     NbSelectModule,
     NbIconModule,
+    ngFormsModule,
   ],
   declarations: [
     FormsComponent,

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'ngx-stepper',
@@ -8,11 +8,11 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 })
 export class StepperComponent implements OnInit {
 
-  firstForm: FormGroup;
+  firstForm: UntypedFormGroup;
-  secondForm: FormGroup;
+  secondForm: UntypedFormGroup;
-  thirdForm: FormGroup;
+  thirdForm: UntypedFormGroup;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
   }
 
   ngOnInit() {

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 {
-
+  readonly position = { lat: 51.678418, lng: 7.809007 };
-  lat = 51.678418;
-  lng = 7.809007;
 }

src/app/pages/maps/leaflet/leaflet.component.scss

@@ -14,4 +14,8 @@
     width: 100%;
     height: nb-theme(card-height-large);
   }
+
+  ::ng-deep .leaflet-control-zoom a {
+    text-decoration: none;
+  }
 }

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

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 import * as L from 'leaflet';
-import 'style-loader!leaflet/dist/leaflet.css';
 
 @Component({
   selector: 'ngx-leaflet',

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 {
+  constructor(
+    public lat = 53.9,
+    public lng = 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,24 @@ import { Location } from '../entity/Location';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnInit {
-  latitude: number;
+  position: PositionModel = null;
-  longitude: number;
+  zoom: number = 1;
-  zoom: number;
 
   @Input()
-  public set searchedLocation(searchedLocation: Location) {
+  public set searchedPosition(position: PositionModel) {
-    this.latitude = searchedLocation.latitude;
+    if (position) {
-    this.longitude = searchedLocation.longitude;
+      this.position = position;
-    this.zoom = 12;
+      this.zoom = 12;
+    }
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
     // 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,
         );
       });
     }