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
Update README.md
2025-09-22 05:50:48 +02:00 · 2024-09-25 11:40:43 +02:00 · 2024-01-05 15:18:00 +03:00 · 2023-10-29 15:06:39 +01:00 · 2023-10-29 14:50:21 +01:00 · 2023-10-25 14:09:02 +02:00
122 changed files with 14342 additions and 14703 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
--- a/.eslintrc.json
+++ b/.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": {}
+    }
+  ]
+}
--- a/.github/workflows/ACTION_TRIGGER_GUIDE.md
+++ b/.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')
--- a/.github/workflows/demoDeploy.yml
+++ b/.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 }}"
--- a/.github/workflows/docsDeploy.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@ -23,6 +23,7 @@
 !.vscode/extensions.json

 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1 @@
+README.md
--- a/CHANGELOG.md
+++ b/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)

--- a/README.md
+++ b/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>
-<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>
+# Admin template based on Angular and <a href="https://github.com/akveo/nebular">Nebular</a>

-### Backend Integration Bundles
-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.
+<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>

+## 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
-<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>
+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.

-#### Corporate
-<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>
+## Key features
+
+- The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies\*.
+- Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
+- Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that.
+- ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!

 ### 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? 
-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!
+## Looking for engineering services? 

-### From Developers
-Made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
+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!
+
+## 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!
--- a/angular.json
+++ b/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": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "typeCheck": true,
-            "exclude": []
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
          }
        }
      }
    },
    "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
    }
  }
 }
--- a/e2e/.eslintrc.json
+++ b/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": {}
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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": "^8.0.0",
-    "@angular/cdk": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/router": "^8.0.0",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/google-maps": "^12.2.13",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
    "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "4.1.0",
-    "@nebular/bootstrap": "4.1.0",
-    "@nebular/eva-icons": "4.1.0",
-    "@nebular/security": "4.1.0",
-    "@nebular/theme": "4.1.0",
-    "@swimlane/ngx-charts": "^10.0.0",
-    "angular-tree-component": "7.2.0",
+    "@nebular/auth": "11.0.1",
+    "@nebular/eva-icons": "11.0.1",
+    "@nebular/security": "11.0.1",
+    "@nebular/theme": "11.0.1",
+    "@swimlane/ngx-charts": "^14.0.0",
    "angular2-chartjs": "0.4.1",
-    "angular2-toaster": "^7.0.0",
    "bootstrap": "4.3.1",
    "chart.js": "2.7.1",
    "ckeditor": "4.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
-    "echarts": "^4.0.2",
-    "eva-icons": "^1.1.0",
+    "echarts": "^4.9.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-completer": "2.0.8",
-    "ng2-smart-table": "1.3.5",
-    "ngx-echarts": "^4.0.1",
-    "node-sass": "^4.12.0",
+    "ng2-ckeditor": "~1.2.9",
+    "ng2-completer": "^9.0.1",
+    "ng2-smart-table": "^1.6.0",
+    "ngx-echarts": "^4.2.2",
+    "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",
-    "zone.js": "~0.9.1"
+    "web-animations-js": "^2.3.2",
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.2",
-    "@angular/cli": "^8.0.2",
-    "@angular/compiler-cli": "^8.0.0",
-    "@angular/language-service": "8.0.0",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@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": "2.5.54",
+    "@types/jasmine": "~3.3.0",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
-    "@types/node": "6.0.90",
-    "codelyzer": "^5.0.1",
+    "@types/node": "^12.12.70",
+    "@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-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.19",
+    "karma-chrome-launcher": "~3.1.1",
    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
-    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.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"
  }
 }
--- a/src/app/@core/core.module.ts
+++ b/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 {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<CoreModule> {
+    return {
      ngModule: CoreModule,
      providers: [
        ...NB_CORE_PROVIDERS,
--- a/src/app/@core/mock/mock-data.module.ts
+++ b/src/app/@core/mock/mock-data.module.ts
@ -54,8 +54,8 @@ const SERVICES = [
  ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<MockDataModule> {
+    return {
      ngModule: MockDataModule,
      providers: [
        ...SERVICES,
--- a/src/app/@core/utils/index.ts
+++ b/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,
 };
--- a/src/app/@core/utils/layout.service.ts
+++ b/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(
-      share(),
-      delay(1),
+    return this.layoutSizeChange$.pipe(delay(1));
+  }
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
    );
  }
 }
--- a/src/app/@core/utils/seo.service.ts
+++ b/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;
+  }
+}
--- a/src/app/@theme/components/footer/footer.component.scss
+++ b/src/app/@theme/components/footer/footer.component.scss
@ -1,6 +1,6 @@
@import '../../styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {
  width: 100%;
--- a/src/app/@theme/components/footer/footer.component.ts
+++ b/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>
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
@import '../../styles/themes';

@include nb-install-component() {
--- a/src/app/@theme/components/tiny-mce/tiny-mce.component.ts
+++ b/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', () => {
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@ -1,6 +1,6 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  .menu-sidebar ::ng-deep .scrollable {
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/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 { isPlatformBrowser } from '@angular/common';
-import { NbLayoutComponent } from '@nebular/theme';
-
-import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
+import { Component } from '@angular/core';

@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 {
-
-  @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);
-    }
-  }
-}
+export class OneColumnLayoutComponent {}
--- a/src/app/@theme/layouts/three-columns/three-columns.layout.scss
+++ b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
@ -1,6 +1,6 @@
@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

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

@include nb-install-component() {
  .menu-sidebar ::ng-deep .scrollable {
--- a/src/app/@theme/services/window-mode-block-scroll.service.ts
+++ b/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;
-  }
-}
--- a/src/app/@theme/styles/_layout.scss
+++ b/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;
+    }
+  }
+}
--- a/src/app/@theme/styles/_overrides.scss
+++ b/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;
-  }
 }
--- a/src/app/@theme/styles/styles.scss
+++ b/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/auth/styles/all';
-@import '~@nebular/bootstrap/styles/globals';
+@import '@nebular/theme/styles/globals';
+@import '@nebular/auth/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();

--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/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 = {
-  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',
-};
+const baseThemeVariables = baseTheme.variables;

 export const CORPORATE_THEME = {
  name: 'corporate',
+  base: 'corporate',
  variables: {
-    ...theme,
-
    temperature: {
      arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
-      arcEmpty: theme.bg2,
-      thumbBg: theme.bg2,
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
      thumbBorder: '#ffa36b',
    },

    solar: {
-      gradientLeft: theme.primary,
-      gradientRight: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['80%', '90%'],
    },

    traffic: {
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      itemBorderColor: theme.border4,
-      itemEmphasisBorderColor: theme.primaryLight,
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primaryLight,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
      shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg,
-      gradTo: theme.bg,
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg,
    },

    electricity: {
-      tooltipBg: theme.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      xAxisTextColor: theme.fg,
-      yAxisSplitLine: theme.separator,
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',
-      lineGradFrom: theme.primary,
-      lineGradTo: theme.primary,
+      lineGradFrom: baseThemeVariables.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,
-      areaColor: theme.bg4,
-      areaHoverColor: theme.fgHighlight,
-      areaBorderColor: theme.border5,
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: theme.primary,
-      secondAnimationBarColor: theme.success,
+      firstAnimationBarColor: baseThemeVariables.primary,
+      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,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: theme.warningLight,
-      gradientTo: theme.warning,
-      shadow: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '0',

-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: theme.border4,
-      countryFillColor: theme.bg4,
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg4,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: theme.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
-      chartGradientFrom: theme.primaryLight,
-      chartAxisSplitLine: theme.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: theme.bg,
-      textColor: theme.fgText,
-      axisLineColor: theme.fgText,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '0.7',
    },

    chartjs: {
-      axisLineColor: theme.separator,
-      textColor: theme.fgText,
+      axisLineColor: baseThemeVariables.separator,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: theme.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // second line
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.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,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      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,
-      textColor: theme.fgText,
-      axisLineColor: theme.border4,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: theme.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.success,
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.success,
      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: theme.success,
-      secondItem: theme.primary,
-      thirdItem: theme.bg3,
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      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,
-      areaGradTo: theme.primaryLight,
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: theme.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: theme.success,
-      secondIcon: theme.primary,
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['65%', '90%'],

-      secondPieGradientLeft: theme.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientLeft: baseThemeVariables.warning,
+      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,
-      secondSection: theme.success,
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -321,28 +279,28 @@ export const CORPORATE_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: theme.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: theme.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: theme.primary,
-      gradTo: theme.primary,
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/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 = {
-  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',
-};
+const baseThemeVariables = baseTheme.variables;

 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,
-      gradientRight: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['70%', '90%'],
    },

    traffic: {
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      itemBorderColor: theme.border2,
-      itemEmphasisBorderColor: theme.primary,
-      shadowLineDarkBg: theme.border3,
-      shadowLineShadow: theme.border3,
-      gradFrom: theme.bg,
-      gradTo: theme.bg2,
+      itemColor: baseThemeVariables.border2,
+      itemBorderColor: baseThemeVariables.border2,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
+      shadowLineDarkBg: baseThemeVariables.border3,
+      shadowLineShadow: baseThemeVariables.border3,
+      gradFrom: baseThemeVariables.bg,
+      gradTo: baseThemeVariables.bg2,
    },

    electricity: {
-      tooltipBg: theme.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      xAxisTextColor: theme.fg,
-      yAxisSplitLine: theme.separator,
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.border2,
+      itemBorderColor: baseThemeVariables.border2,
      lineStyle: 'dotted',
      lineWidth: '6',
-      lineGradFrom: theme.success,
-      lineGradTo: theme.warning,
-      lineShadow: theme.bg4,
+      lineGradFrom: baseThemeVariables.success,
+      lineGradTo: baseThemeVariables.warning,
+      lineShadow: baseThemeVariables.bg4,

-      areaGradFrom: theme.bg2,
-      areaGradTo: theme.bg3,
-      shadowLineDarkBg: theme.bg3,
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg3,
+      shadowLineDarkBg: baseThemeVariables.bg3,
    },

    bubbleMap: {
-      titleColor: theme.fgText,
-      areaColor: theme.bg4,
-      areaHoverColor: theme.fgHighlight,
-      areaBorderColor: theme.border5,
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: theme.primary,
-      secondAnimationBarColor: theme.success,
+      firstAnimationBarColor: baseThemeVariables.primary,
+      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,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: theme.warningLight,
-      gradientTo: theme.warning,
-      shadow: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '5',

-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: theme.border4,
-      countryFillColor: theme.bg3,
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: theme.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
-      chartGradientFrom: theme.primaryLight,
-      chartAxisSplitLine: theme.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: theme.bg,
-      textColor: theme.fgText,
-      axisLineColor: theme.fgText,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '1',
    },

    chartjs: {
-      axisLineColor: theme.separator,
-      textColor: theme.fgText,
+      axisLineColor: baseThemeVariables.separator,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: theme.bg2,
-      firstAreaGradTo: theme.bg2,
-      firstShadowLineDarkBg: theme.bg2,
+      firstAreaGradFrom: baseThemeVariables.bg2,
+      firstAreaGradTo: baseThemeVariables.bg2,
+      firstShadowLineDarkBg: baseThemeVariables.bg2,

      // second line
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.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,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      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,
-      textColor: theme.fgText,
-      axisLineColor: theme.border4,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: theme.bg2,
-      firstLineGradTo: theme.bg2,
+      firstLineGradFrom: baseThemeVariables.bg2,
+      firstLineGradTo: baseThemeVariables.bg2,
      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: theme.success,
-      secondItem: theme.primary,
-      thirdItem: theme.bg2,
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      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,
-      areaGradTo: theme.primaryLight,
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: theme.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: theme.success,
-      secondIcon: theme.primary,
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.successLight,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.successLight,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['70%', '90%'],

-      secondPieGradientLeft: theme.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientLeft: baseThemeVariables.warning,
+      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,
-      secondSection: theme.success,
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -321,28 +279,28 @@ export const COSMIC_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: theme.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: theme.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: theme.primary,
-      gradTo: theme.primary,
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
--- a/src/app/@theme/styles/theme.dark.ts
+++ b/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 = {
-  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',
-};
+const baseThemeVariables = baseTheme.variables;

 export const DARK_THEME = {
  name: 'dark',
+  base: 'dark',
  variables: {
-    ...theme,
-
    temperature: {
-      arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
-      arcEmpty: theme.bg2,
-      thumbBg: theme.bg2,
-      thumbBorder: theme.primary,
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
    },

    solar: {
-      gradientLeft: theme.primary,
-      gradientRight: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['80%', '90%'],
    },

    traffic: {
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      itemBorderColor: theme.border4,
-      itemEmphasisBorderColor: theme.primary,
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
      shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg2,
-      gradTo: theme.bg2,
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
    },

    electricity: {
-      tooltipBg: theme.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      xAxisTextColor: theme.fg,
-      yAxisSplitLine: theme.separator,
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',
-      lineGradFrom: theme.primary,
-      lineGradTo: theme.primary,
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: theme.bg2,
-      areaGradTo: theme.bg2,
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
    },

    bubbleMap: {
-      titleColor: theme.fgText,
-      areaColor: theme.bg4,
-      areaHoverColor: theme.fgHighlight,
-      areaBorderColor: theme.border5,
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: theme.primary,
-      secondAnimationBarColor: theme.success,
+      firstAnimationBarColor: baseThemeVariables.primary,
+      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,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: theme.warningLight,
-      gradientTo: theme.warning,
-      shadow: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '0',

-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: theme.border4,
-      countryFillColor: theme.bg3,
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: theme.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
-      chartGradientFrom: theme.primaryLight,
-      chartAxisSplitLine: theme.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: theme.bg,
-      textColor: theme.fgText,
-      axisLineColor: theme.fgText,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '0.7',
    },

    chartjs: {
-      axisLineColor: theme.separator,
-      textColor: theme.fgText,
+      axisLineColor: baseThemeVariables.separator,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: theme.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // second line
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,

      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // third line
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      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,
-      textColor: theme.fgText,
-      axisLineColor: theme.border4,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: theme.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: theme.success,
-      secondItem: theme.primary,
-      thirdItem: theme.bg3,
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      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,
-      areaGradTo: theme.primaryLight,
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: theme.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: theme.success,
-      secondIcon: theme.primary,
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['70%', '90%'],

-      secondPieGradientLeft: theme.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientLeft: baseThemeVariables.warning,
+      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,
-      secondSection: theme.success,
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -321,28 +285,28 @@ export const DARK_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: theme.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: theme.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: theme.primary,
-      gradTo: theme.primary,
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
--- a/src/app/@theme/styles/theme.default.ts
+++ b/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 = {
-  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',
-};
+const baseThemeVariables = baseTheme.variables;

 export const DEFAULT_THEME = {
  name: 'default',
+  base: 'default',
  variables: {
-    ...theme,
-
    temperature: {
-      arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
-      arcEmpty: theme.bg2,
-      thumbBg: theme.bg2,
-      thumbBorder: theme.primary,
+      arcFill: [
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+        baseThemeVariables.primary,
+      ],
+      arcEmpty: baseThemeVariables.bg2,
+      thumbBg: baseThemeVariables.bg2,
+      thumbBorder: baseThemeVariables.primary,
    },

    solar: {
-      gradientLeft: theme.primary,
-      gradientRight: theme.primary,
+      gradientLeft: baseThemeVariables.primary,
+      gradientRight: baseThemeVariables.primary,
      shadowColor: 'rgba(0, 0, 0, 0)',
-      secondSeriesFill: theme.bg2,
+      secondSeriesFill: baseThemeVariables.bg2,
      radius: ['80%', '90%'],
    },

    traffic: {
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      itemBorderColor: theme.border4,
-      itemEmphasisBorderColor: theme.primary,
+      itemColor: baseThemeVariables.border4,
+      itemBorderColor: baseThemeVariables.border4,
+      itemEmphasisBorderColor: baseThemeVariables.primary,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
      shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: theme.bg2,
-      gradTo: theme.bg2,
+      gradFrom: baseThemeVariables.bg2,
+      gradTo: baseThemeVariables.bg2,
    },

    electricity: {
-      tooltipBg: theme.bg,
-      tooltipLineColor: theme.fgText,
+      tooltipBg: baseThemeVariables.bg,
+      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,
-      xAxisTextColor: theme.fg,
-      yAxisSplitLine: theme.separator,
+      axisLineColor: baseThemeVariables.border3,
+      xAxisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',
-      lineGradFrom: theme.primary,
-      lineGradTo: theme.primary,
+      lineGradFrom: baseThemeVariables.primary,
+      lineGradTo: baseThemeVariables.primary,
      lineShadow: 'rgba(0, 0, 0, 0)',

-      areaGradFrom: theme.bg2,
-      areaGradTo: theme.bg2,
+      areaGradFrom: baseThemeVariables.bg2,
+      areaGradTo: baseThemeVariables.bg2,
      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
    },

    bubbleMap: {
-      titleColor: theme.fgText,
-      areaColor: theme.bg4,
-      areaHoverColor: theme.fgHighlight,
-      areaBorderColor: theme.border5,
+      titleColor: baseThemeVariables.fgText,
+      areaColor: baseThemeVariables.bg4,
+      areaHoverColor: baseThemeVariables.fgHighlight,
+      areaBorderColor: baseThemeVariables.border5,
    },

    profitBarAnimationEchart: {
-      textColor: theme.fgText,
+      textColor: baseThemeVariables.fgText,

-      firstAnimationBarColor: theme.primary,
-      secondAnimationBarColor: theme.success,
+      firstAnimationBarColor: baseThemeVariables.primary,
+      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,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },

    trafficBarEchart: {
-      gradientFrom: theme.warningLight,
-      gradientTo: theme.warning,
-      shadow: theme.warningLight,
+      gradientFrom: baseThemeVariables.warningLight,
+      gradientTo: baseThemeVariables.warning,
+      shadow: baseThemeVariables.warningLight,
      shadowBlur: '0',

-      axisTextColor: theme.fgText,
+      axisTextColor: baseThemeVariables.fgText,
      axisFontSize: '12',

-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
    },

    countryOrders: {
-      countryBorderColor: theme.border4,
-      countryFillColor: theme.bg3,
+      countryBorderColor: baseThemeVariables.border4,
+      countryFillColor: baseThemeVariables.bg3,
      countryBorderWidth: '1',
-      hoveredCountryBorderColor: theme.primary,
-      hoveredCountryFillColor: theme.primaryLight,
+      hoveredCountryBorderColor: baseThemeVariables.primary,
+      hoveredCountryFillColor: baseThemeVariables.primaryLight,
      hoveredCountryBorderWidth: '1',

-      chartAxisLineColor: theme.border4,
-      chartAxisTextColor: theme.fg,
+      chartAxisLineColor: baseThemeVariables.border4,
+      chartAxisTextColor: baseThemeVariables.fg,
      chartAxisFontSize: '16',
-      chartGradientTo: theme.primary,
-      chartGradientFrom: theme.primaryLight,
-      chartAxisSplitLine: theme.separator,
-      chartShadowLineColor: theme.primaryLight,
+      chartGradientTo: baseThemeVariables.primary,
+      chartGradientFrom: baseThemeVariables.primaryLight,
+      chartAxisSplitLine: baseThemeVariables.separator,
+      chartShadowLineColor: baseThemeVariables.primaryLight,

-      chartLineBottomShadowColor: theme.primary,
+      chartLineBottomShadowColor: baseThemeVariables.primary,

-      chartInnerLineColor: theme.bg2,
+      chartInnerLineColor: baseThemeVariables.bg2,
    },

    echarts: {
-      bg: theme.bg,
-      textColor: theme.fgText,
-      axisLineColor: theme.fgText,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.fgText,
+      splitLineColor: baseThemeVariables.separator,
      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
-      tooltipBackgroundColor: theme.primary,
+      tooltipBackgroundColor: baseThemeVariables.primary,
      areaOpacity: '0.7',
    },

    chartjs: {
-      axisLineColor: theme.separator,
-      textColor: theme.fgText,
+      axisLineColor: baseThemeVariables.separator,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      yAxisSplitLine: baseThemeVariables.separator,

-      itemBorderColor: theme.primary,
+      itemBorderColor: baseThemeVariables.primary,
      lineStyle: 'solid',
      lineWidth: '4',

      // first line
-      firstAreaGradFrom: theme.bg3,
-      firstAreaGradTo: theme.bg3,
+      firstAreaGradFrom: baseThemeVariables.bg3,
+      firstAreaGradTo: baseThemeVariables.bg3,
      firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // second line
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,

      secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
      secondAreaGradTo: 'rgba(51, 102, 255, 0)',
      secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',

      // third line
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      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,
-      textColor: theme.fgText,
-      axisLineColor: theme.border4,
-      splitLineColor: theme.separator,
+      bg: baseThemeVariables.bg,
+      textColor: baseThemeVariables.fgText,
+      axisLineColor: baseThemeVariables.border4,
+      splitLineColor: baseThemeVariables.separator,
      areaOpacity: '1',

      axisFontSize: '16',
-      axisTextColor: theme.fg,
+      axisTextColor: baseThemeVariables.fg,

      // first bar
-      firstLineGradFrom: theme.bg3,
-      firstLineGradTo: theme.bg3,
+      firstLineGradFrom: baseThemeVariables.bg3,
+      firstLineGradTo: baseThemeVariables.bg3,
      firstLineShadow: 'rgba(0, 0, 0, 0)',

      // second bar
-      secondLineGradFrom: theme.primary,
-      secondLineGradTo: theme.primary,
+      secondLineGradFrom: baseThemeVariables.primary,
+      secondLineGradTo: baseThemeVariables.primary,
      secondLineShadow: 'rgba(0, 0, 0, 0)',

      // third bar
-      thirdLineGradFrom: theme.success,
-      thirdLineGradTo: theme.successLight,
+      thirdLineGradFrom: baseThemeVariables.success,
+      thirdLineGradTo: baseThemeVariables.successLight,
      thirdLineShadow: 'rgba(0, 0, 0, 0)',
    },

    orderProfitLegend: {
-      firstItem: theme.success,
-      secondItem: theme.primary,
-      thirdItem: theme.bg3,
+      firstItem: baseThemeVariables.success,
+      secondItem: baseThemeVariables.primary,
+      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,
-      yAxisSplitLine: theme.separator,
+      axisTextColor: baseThemeVariables.fg,
+      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,
-      areaGradTo: theme.primaryLight,
+      areaGradFrom: baseThemeVariables.primary,
+      areaGradTo: baseThemeVariables.primaryLight,

      innerLineStyle: 'solid',
      innerLineWidth: '1',

-      innerAreaGradFrom: theme.success,
-      innerAreaGradTo: theme.success,
+      innerAreaGradFrom: baseThemeVariables.success,
+      innerAreaGradTo: baseThemeVariables.success,
    },

    visitorsLegend: {
-      firstIcon: theme.success,
-      secondIcon: theme.primary,
+      firstIcon: baseThemeVariables.success,
+      secondIcon: baseThemeVariables.primary,
    },

    visitorsPie: {
-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
      firstPieRadius: ['70%', '90%'],

-      secondPieGradientLeft: theme.warning,
-      secondPieGradientRight: theme.warningLight,
+      secondPieGradientLeft: baseThemeVariables.warning,
+      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,
-      secondSection: theme.success,
+      firstSection: baseThemeVariables.warning,
+      secondSection: baseThemeVariables.success,
    },

    earningPie: {
@ -321,28 +285,28 @@ export const DEFAULT_THEME = {

      fontSize: '22',

-      firstPieGradientLeft: theme.success,
-      firstPieGradientRight: theme.success,
+      firstPieGradientLeft: baseThemeVariables.success,
+      firstPieGradientRight: baseThemeVariables.success,
      firstPieShadowColor: 'rgba(0, 0, 0, 0)',

-      secondPieGradientLeft: theme.primary,
-      secondPieGradientRight: theme.primary,
+      secondPieGradientLeft: baseThemeVariables.primary,
+      secondPieGradientRight: baseThemeVariables.primary,
      secondPieShadowColor: 'rgba(0, 0, 0, 0)',

-      thirdPieGradientLeft: theme.warning,
-      thirdPieGradientRight: theme.warning,
+      thirdPieGradientLeft: baseThemeVariables.warning,
+      thirdPieGradientRight: baseThemeVariables.warning,
      thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
    },

    earningLine: {
-      gradFrom: theme.primary,
-      gradTo: theme.primary,
+      gradFrom: baseThemeVariables.primary,
+      gradTo: baseThemeVariables.primary,

-      tooltipTextColor: theme.fgText,
+      tooltipTextColor: baseThemeVariables.fgText,
      tooltipFontWeight: 'normal',
      tooltipFontSize: '16',
-      tooltipBg: theme.bg,
-      tooltipBorderColor: theme.border2,
+      tooltipBg: baseThemeVariables.bg,
+      tooltipBorderColor: baseThemeVariables.border2,
      tooltipBorderWidth: '1',
      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
    },
--- a/src/app/@theme/styles/themes.scss
+++ b/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);
--- a/src/app/@theme/theme.module.ts
+++ b/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 {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<ThemeModule> {
+    return {
      ngModule: ThemeModule,
      providers: [
        ...NbThemeModule.forRoot(
@ -87,7 +86,6 @@ export class ThemeModule {
          },
          [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
        ).providers,
-        WindowModeBlockScrollService,
      ],
    };
  }
--- a/src/app/app-routing.module.ts
+++ b/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),
  },
  {
--- a/src/app/app.component.ts
+++ b/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();
  }
 }
--- a/src/app/app.module.ts
+++ b/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],
 })
--- a/src/app/pages/dashboard/dashboard.component.scss
+++ b/src/app/pages/dashboard/dashboard.component.scss
@ -1,6 +1,6 @@
@import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  .solar-card nb-card-header {
--- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/dashboard/electricity/electricity.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity.component.scss
@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

--- a/src/app/pages/dashboard/kitten/kitten.component.html
+++ b/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">
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@ -1,6 +1,6 @@
@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/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;
--- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
+++ b/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': ''" />
--- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
+++ b/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();
-    if (baseHref.endsWith('')) {
-      baseHref = baseHref.slice(0, -1);
-    }
-    const path = this.location.path();
+    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
+    const path = this.location.path().replace(/\/$/, '');

    return `url(${baseHref}${path}${id})`;
  }
--- a/src/app/pages/dashboard/rooms/rooms.component.scss
+++ b/src/app/pages/dashboard/rooms/rooms.component.scss
@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  ngx-room-selector {
--- a/src/app/pages/dashboard/rooms/rooms.component.ts
+++ b/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>
  `,
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
+++ b/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 '~bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';

@include nb-install-component() {

--- a/src/app/pages/dashboard/solar/solar.component.scss
+++ b/src/app/pages/dashboard/solar/solar.component.scss
@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/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);
  }
 }
--- a/src/app/pages/dashboard/solar/solar.component.ts
+++ b/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;

--- a/src/app/pages/dashboard/status-card/status-card.component.scss
+++ b/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);
    }
  }
 }
--- a/src/app/pages/dashboard/status-card/status-card.component.ts
+++ b/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>
  `,
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
+++ b/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();
-    if (baseHref.endsWith('')) {
-      baseHref = baseHref.slice(0, -1);
-    }
-    const path = this.location.path();
+    const baseHref = this.locationStrategy.getBaseHref().replace(/\/$/, '');
+    const path = this.location.path().replace(/\/$/, '');

    return `url(${baseHref}${path}${id}${this.svgControlId})`;
  }
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

--- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  padding: 1.5rem 4.5rem;
--- a/src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  display: flex;
--- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
+++ b/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() {
--- a/src/app/pages/e-commerce/country-orders/country-orders.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

--- a/src/app/pages/e-commerce/country-orders/country-orders.component.ts
+++ b/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]) => {
--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {

--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.ts
+++ b/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);
    }
  }

--- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  ngx-earning-pie-chart,
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
+++ b/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;
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  display: flex;
--- a/src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/profit-card/profit-card.component.scss
+++ b/src/app/pages/e-commerce/profit-card/profit-card.component.scss
@ -10,16 +10,22 @@
    cursor: pointer;
  }

-  ::ng-deep .flipped {
-    .back-container {
-      .flip-icon {
-        transform: scaleX(-1);
-      }
+  ::ng-deep {
+    .front-container {
+      max-width: 100%;
    }

-    .front-container {
-      .flip-icon {
-        display: none;
+    .flipped {
+      .back-container {
+        .flip-icon {
+          transform: scaleX(-1);
+        }
+      }
+
+      .front-container {
+        .flip-icon {
+          display: none;
+        }
      }
    }
  }
--- a/src/app/pages/e-commerce/progress-section/progress-section.component.html
+++ b/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">
--- a/src/app/pages/e-commerce/progress-section/progress-section.component.scss
+++ b/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;
  }
--- a/src/app/pages/e-commerce/slide-out/slide-out.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  $slide-out-container-width: 40%;
--- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html
+++ b/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 }}%
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/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;
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts
+++ b/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),
      )
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html
+++ b/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">
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
+++ b/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 '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/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 {
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts
+++ b/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),
      )
--- a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.ts
+++ b/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',
-  templateUrl: 'calendar-kit.component.html',
-  styleUrls: ['calendar-kit.component.scss'],
-  entryComponents: [CalendarKitMonthCellComponent],
+    selector: 'ngx-calendar-kit',
+    templateUrl: 'calendar-kit.component.html',
+    styleUrls: ['calendar-kit.component.scss'],
 })
 export class CalendarKitFullCalendarShowcaseComponent {
  month = new Date();
--- a/src/app/pages/extra-components/calendar/calendar.component.html
+++ b/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">
--- a/src/app/pages/extra-components/calendar/calendar.component.scss
+++ b/src/app/pages/extra-components/calendar/calendar.component.scss
@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/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;
  }

--- a/src/app/pages/extra-components/calendar/calendar.component.ts
+++ b/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',
-  templateUrl: 'calendar.component.html',
-  styleUrls: ['calendar.component.scss'],
-  entryComponents: [DayCellComponent],
+    selector: 'ngx-calendar',
+    templateUrl: 'calendar.component.html',
+    styleUrls: ['calendar.component.scss'],
 })
 export class CalendarComponent {

--- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.ts
+++ b/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
+  }
 }
--- a/src/app/pages/extra-components/chat/chat.component.scss
+++ b/src/app/pages/extra-components/chat/chat.component.scss
@ -1,5 +1,5 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import 'bootstrap/scss/mixins/breakpoints';
+@import '@nebular/theme/styles/global/breakpoints';

@import '../../../@theme/styles/themes';

--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/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">
--- a/src/app/pages/forms/forms.module.ts
+++ b/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,
--- a/src/app/pages/layout/stepper/stepper.component.ts
+++ b/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;
-  secondForm: FormGroup;
-  thirdForm: FormGroup;
+  firstForm: UntypedFormGroup;
+  secondForm: UntypedFormGroup;
+  thirdForm: UntypedFormGroup;

-  constructor(private fb: FormBuilder) {
+  constructor(private fb: UntypedFormBuilder) {
  }

  ngOnInit() {
--- a/src/app/pages/maps/gmaps/gmaps.component.html
+++ b/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>
--- a/src/app/pages/maps/gmaps/gmaps.component.ts
+++ b/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: `
-    <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>
-  `,
+  templateUrl: './gmaps.component.html',
 })
 export class GmapsComponent {
-
-  lat = 51.678418;
-  lng = 7.809007;
+  readonly position = { lat: 51.678418, lng: 7.809007 };
 }
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/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;
+  }
 }
--- a/src/app/pages/maps/leaflet/leaflet.component.ts
+++ b/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',
--- a/src/app/pages/maps/maps.module.ts
+++ b/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({
-      apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
-      libraries: ['places'],
-    }),
+    GoogleMapsModule,
    LeafletModule.forRoot(),
    MapsRoutingModule,
    NgxEchartsModule,
--- a/src/app/pages/maps/search-map/entity/Location.ts
+++ b/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) {
-  }
-}
--- a/src/app/pages/maps/search-map/entity/position.model.ts
+++ b/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,
+  ) {}
+}
--- a/src/app/pages/maps/search-map/map/map.component.html
+++ b/src/app/pages/maps/search-map/map/map.component.html
@ -1,7 +1,3 @@
-<agm-map [latitude]="latitude"
-         [longitude]="longitude"
-         [scrollwheel]="false"
-         [zoom]="zoom">
-  <agm-marker [latitude]="latitude"
-              [longitude]="longitude"></agm-marker>
-</agm-map>
+<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
+  <map-marker [position]="position"></map-marker>
+</google-map>
--- a/src/app/pages/maps/search-map/map/map.component.ts
+++ b/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;
-  longitude: number;
-  zoom: number;
+  position: PositionModel = null;
+  zoom: number = 1;

  @Input()
-  public set searchedLocation(searchedLocation: Location) {
-    this.latitude = searchedLocation.latitude;
-    this.longitude = searchedLocation.longitude;
-    this.zoom = 12;
+  public set searchedPosition(position: PositionModel) {
+    if (position) {
+      this.position = position;
+      this.zoom = 12;
+    }
  }

-  ngOnInit(): void {
+  ngOnInit() {
    // set up current location
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
-        this.searchedLocation = new Location(
-          position.coords.latitude, position.coords.longitude,
+        this.searchedPosition = new PositionModel(
+          position.coords.latitude,
+          position.coords.longitude,
        );
      });
    }
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Denis Strigo	dc6a442704	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	2024-09-25 11:40:43 +02:00
Evgeny Lupanov	06776d15c4	Update README.md	2024-01-05 15:18:00 +03:00
Denis Strigo	651dadee33	release: 11.0.0 (#6006 )	2023-10-29 15:06:39 +01:00
Denis Strigo	aa91634dab	chore(angular-15): update to angular 15 (#6005 ) * fix(package-lock): update version in package-lock * fix(package-lock): update version in package-lock * chore(angular-15): update to angular 15 * chore(nebular-11): update to angular/cdk to 15, update nebular * chore(eslint): update @angular-eslint to v15	2023-10-29 14:50:21 +01:00
Denis Strigo	e06d9bd02d	fix(package-lock): update version in package-lock (#6002 ) * fix(package-lock): update version in package-lock	2023-10-25 14:09:02 +02:00
Evgeny Lupanov	f930de9b43	Update readme	2023-10-18 16:53:28 +03:00
Denis Strigo	6363d5171d	release: 10.0.0 (#5975 )	2023-03-07 19:41:22 +01:00
Denis Strigo	b1a9a682b8	feat: update to Angular 14 (#5973 ) * fix: fix issues after updates to Angular 13 in rooms component and country orders component * feat: update to Angular 14 (#1) * fix(angular 13): fix issues after updates to Angular 13 in rooms component and country orders component (#5965) * feat: update to Angular 14 * feat: update angular eslint packages eslint * feat: update nebular to 10 version * feat: update style import, remove ~	2023-03-07 19:26:27 +01:00
Denis Strigo	384b841cc0	fix(angular 13): fix issues after updates to Angular 13 in rooms component and country orders component (#5965 )	2023-02-09 17:00:28 +01:00
Denis Strigo	0ea69519c0	release: 9.0.0 (#5958 ) * release: 9.0.0 * release: 9.0.0, update angular version in README	2023-01-09 17:03:29 +01:00
Denis Strigo	ec68f5e84a	feat: update to Angular 13, move from tslint to eslint (#5957 ) * feat: update to Angular 13 * feat: update to Angular 13, move from tslint to eslint	2022-12-29 13:12:53 +03:00
Evgeny Lupanov	fd95769478	feat: add installation notes	2022-05-20 14:39:06 +03:00
Max	2588f30d10	typescript ~4.2 or ~4.3 version (#5894 )	2022-05-20 12:09:49 +03:00
Max	fbab9e5214	lock ng2-ckeditor and @types/jasmine minor versions (#5898 )	2022-05-20 12:06:43 +03:00
Max	0f4156d783	remove @akveo/ng2-completer and ng2-completer (#5896 )	2022-05-20 11:52:10 +03:00
Kate	f1365e1810	fix: update dependencies (#5938 ) fix for 5930 issue	2022-05-12 13:23:55 +03:00
Kate	237ea6bc69	feat: update dependencies (#5937 )	2022-05-11 16:34:11 +03:00
Evgeny Lupanov	f5015ac0d7	feat: update README.md	2022-04-27 15:39:08 +03:00
Evgeny Lupanov	570031d2be	feat: update templates section in README	2022-01-26 14:48:35 +03:00
Sergey Andrievskiy	0e0caa1ea6	chore(docs deploy): lock node version (#5909 )	2021-12-01 20:15:12 +03:00
Sergey Andrievskiy	cabe4bd71a	release: 8.0.0 (#5892 )	2021-10-08 12:14:18 +03:00
Sergey Andrievskiy	5e44070239	chore(readme): add bakery banner (#5871 )	2021-07-09 14:44:03 +03:00
Sergey Andrievskiy	080830a2fd	feat: update to Angular 12 (#5868 )	2021-06-27 21:06:28 +03:00
Dmitry Nehaychik	7b2be34873	chore: update readme (#5833 )	2021-02-08 18:24:30 +03:00
Sergey Andrievskiy	c2141efb67	release: 7.0.0 (#5827 )	2021-01-19 14:24:28 +03:00
Sergey Andrievskiy	ebe181085b	feat: update to Angular 11 (#5826 )	2021-01-19 13:52:09 +03:00
Vladimir Lugovsky	98166c5274	chore(readme): change utm params for akveo templates link	2020-11-02 11:06:12 +03:00
Vladimir Lugovsky	7ad3fff370	chore(readme): change UTM tags for templates link	2020-10-18 00:46:35 +03:00
Sergey Andrievskiy	3c6c643127	chore(readme): add templates link (#5779 )	2020-09-26 18:19:26 +03:00
Vladimir Lugovsky	017ba9188f	chore(docs): revert docs external links back to long variants (#5765 )	2020-09-08 14:12:59 +03:00
Sergey Andrievskiy	9e340ae905	fix: downgrade Angular CDK (#5757 )	2020-08-28 19:27:59 +03:00
Sergey Andrievskiy	36ac431a4e	chore(readme): update Angular version (#5750 )	2020-08-20 11:11:42 +03:00
Sergey Andrievskiy	73461e8972	release: 6.0.0 (#5748 )	2020-08-19 18:39:56 +03:00
Sergey Andrievskiy	ec3282cac5	feat: update to Angular 10 (#5747 )	2020-08-19 18:31:26 +03:00
Denis Strigo	c2ce881c41	docs(readme): update link to free banner in readme (#5715 ) Co-authored-by: d.strigo <d.strigo@akveo.com>	2020-06-17 21:41:04 +03:00
Denis Strigo	14149647eb	docs(readme): add banner to readme with free bundle (#5713 ) Co-authored-by: d.strigo <d.strigo@akveo.com>	2020-06-17 18:09:51 +03:00
Dmitry Nehaychik	3cd55786f2	docs: update readme (#5695 )	2020-05-27 15:01:55 +03:00
maksim-karatkevich	ca3504e11a	feat: update banner links in readme (#5692 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-20 10:41:39 +03:00
maksim-karatkevich	f1d9c7b952	fix: deploy script (#5688 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-19 10:34:32 +03:00
maksim-karatkevich	ceb45c49c0	chore: update deploy docs script (#5686 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-18 17:15:12 +03:00
maksim-karatkevich	6bda4a1912	fix: deploy docs script (#5684 )	2020-05-15 17:11:32 +03:00
maksim-karatkevich	c3738563e0	fix: deploy docs script (#5683 )	2020-05-15 16:50:10 +03:00
maksim-karatkevich	ef650ae1cf	chore: add docs deploy script (#5682 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-15 16:32:37 +03:00
Evgeny Lupanov	a48cb2b0bf	fix: actions readme formatting	2020-05-14 18:53:22 +03:00
maksim-karatkevich	c06bd0885a	fix: deploy demo script (#5680 ) Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>	2020-05-14 18:10:53 +03:00
maksim-karatkevich	7b84933f7c	chore: deploy demo action * create deploy demo script * action trigger guide added	2020-05-14 15:28:52 +03:00
Sasha Verbilo	9eaf0bb005	fix(sidebar): toggle performance issues (#5658 ) * refactor: improve observable layout change sharing * feat: add safe delayed event of layout change * fix: replace change layout with safe change * fix: limit front card width to prevent map overflow before repaint	2020-04-15 16:18:29 +03:00
Evgeny Lupanov	5cc4c19cee	chore(readme): reduce image size (#5638 ) * chore(readme): reduce image size * fix(readme): store link	2020-04-02 17:05:06 +03:00
Alex Kurbako	dfaa5cdb1f	fix(echarts): set merge input (#5632 )	2020-04-01 21:05:48 +03:00
Evgeny Lupanov	87a3759da1	chore(readme): Angular 9 and Material theme info (#5629 )	2020-04-01 21:03:17 +03:00
Sergey Andrievskiy	6c28c55a2b	release: 5.0.0 (#5633 )	2020-04-01 20:52:52 +03:00
Evgeny Lupanov	fbbf94448b	feat: upgrade to Angular 9 and Nebular 5 (#5628 ) BREAKING CHANGE: 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).	2020-03-30 12:06:51 +03:00
Vladimir Lugovsky	df3bc2a60d	chore(analytics): add proper analytics tracking URLs (#5604 )	2020-02-28 17:33:24 +03:00
Vladimir Lugovsky	76d31dadbc	feat(seo): add canonical tag (#5578 )	2019-12-20 11:09:37 +03:00
Sergey Andrievskiy	6837d1f3c2	chore(readme): update bundles image (#5575 )	2019-12-11 14:09:30 +03:00
Sergey Andrievskiy	53e4ab0db2	chore(readme): remove bundles discounts image (#5574 )	2019-12-09 15:17:51 +03:00
Sergey Andrievskiy	390eaab7bd	chore(readme): update black friday 2019 image (#5570 )	2019-11-28 11:53:31 +03:00
Sergey Andrievskiy	a08795bff7	chore: add bundles black friday deal (#5569 )	2019-11-27 14:28:30 +03:00
Sergey Andrievskiy	5a552d7167	chore(readme): update bundles image (#5565 )	2019-11-15 18:22:24 +03:00
Sergey Andrievskiy	06cda13fd0	feat: update Nebular to 4.4.0 (#5533 )	2019-10-08 15:46:04 +03:00
Leon Lafayette	1ff2a0d9cb	fix(forms): add missing forms module import (#5530 )	2019-10-07 17:35:35 +03:00
Sergey Andrievskiy	2b700c3e39	chore(readme): update bundles section text	2019-10-04 19:03:24 +03:00
Sergey Andrievskiy	32422579d9	feat: add calendar with week numbers example (#5515 )	2019-09-20 16:14:25 +03:00
Sergey Andrievskiy	90125abf92	fix(tinymce): set absolute path for skin url (#5491 )	2019-08-23 19:55:54 +03:00
David Henley	ede1b074f0	chore: update README for extra theme (#5466 )	2019-07-19 10:51:06 +03:00
Sergey Andrievskiy	4ff3d938e4	release: 4.0.1 (#5460 )	2019-07-16 12:26:35 +03:00
Sergey Andrievskiy	a39e9ee858	chore(readme): update Angular version to 8 (#5459 )	2019-07-16 12:00:52 +03:00
Sergey Andrievskiy	d15ee3a333	chore: change dark image readme image (#5458 )	2019-07-15 19:23:05 +03:00
Sergey Andrievskiy	a2e93f9376	feat: update Nebular to 4.1.2 (#5451 )	2019-07-15 14:14:04 +03:00
Sergey Andrievskiy	4febf1902c	refactor(traffic card): remove unused styling (#2168 )	2019-07-09 18:21:38 +03:00
Sergey Andrievskiy	243390c10f	fix(typography): prevent bootstrap color override (#2161 )	2019-07-08 11:16:38 +03:00
Sergey Andrievskiy	8f09ddda95	chore: update readme images (#2151 )	2019-07-03 22:15:46 +03:00