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

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

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

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

.eslintrc.json

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

.github/workflows/ACTION_TRIGGER_GUIDE.md

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

.github/workflows/demoDeploy.yml

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

.github/workflows/docsDeploy.yml

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

.gitignore

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

.prettierignore

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

CHANGELOG.md

@@ -1,3 +1,129 @@
+<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)
 

README.md

@@ -1,33 +1,31 @@
-# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design) [![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin) [![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
+# ngx-admin [<img src="https://i.imgur.com/oMcxwZ0.png" alt="Eva Design System" height="20px" />](https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=top_status_tile)
 
-[Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
+[Live Demo](https://demo.akveo.com/ngx-admin/?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=live_demo_link) | [Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645) | [Documentation](https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_documentation_link) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_campaign=ngx_admin%20-%20home%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=github_readme_installation_guidelines) | [Angular templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=github%20readme%20top%20angular%20templates%20link)
 
-# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
+# Admin template based on Angular and <a href="https://github.com/akveo/nebular">Nebular</a>
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
 
-### Backend Integration Bundles
+<a target="_blank" href="https://demo.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=hero_banner_corporate"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
-Easy way to integrate ngx-admin with .NET, Node.js, Java or PHP. [Checkout our Store](https://store.akveo.com/?utm_source=github&utm_medium=ngx_admin_readme) for ready to use Backend Bundles.
 
+## Repository state and engagement with the community
 
-### With 3 stunning visual themes
+Repository is currently in a state of minimal maintenance. Our primary focus is on ensuring that the Angular version used in this project is kept up to date. Our capacity to engage in other aspects of repository management is currently limited.
 
+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.
 
+## Installation notes
 
-#### Default
+To install ngx-admin you have to use NodeJS version 14.14+ because of [node-sass](https://github.com/sass/node-sass) version utilized in the application.
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
 
-#### Dark
+## Key features
-<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
 
-#### Cosmic
+- The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies\*.
-<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/iJu2YDF.png"/></a>
+- 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.
-#### Corporate
+- ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!
-<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/GpUt6NW.png"/></a>
 
 ### What's included:
 
-- Angular 8+ & Typescript
+- Angular & Typescript
 - Bootstrap 4+ & SCSS
 - Responsive layout
 - RTL support
@@ -37,35 +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).
 
 ## BrowserStack
+
 This project runs its tests on multiple desktop and mobile browsers using [BrowserStack](http://www.browserstack.com).
 
 <img src="https://cloud.githubusercontent.com/assets/131406/22254249/534d889e-e254-11e6-8427-a759fb23b7bd.png" height="40" />
 
+## UI Bakery
+
+Need a visual admin dashboard builder? Check out [UI Bakery](https://uibakery.io).
+
+<a href="https://uibakery.io"><img src="https://storage.uibakery.io/video-assets/landing/Logo/UIB%20400x150.png" height="80" /></a>
+
 ## More from Akveo
 
 - [Eva Icons](https://github.com/akveo/eva-icons) - 480+ beautiful Open Source icons
 - [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
+- [Akveo templates](https://www.akveo.com/templates?utm_campaign=services%20-%20github%20-%20templates&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin%20github%20readme%20more%20from%20akveo%20link) - 10+ Ready-to-use apps templates to speed up your apps developments
+
+## How can I support developers?
 
-### How can I support developers?
 - Star our GitHub repo :star:
 - Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
 - Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:
 - Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
 
-### Looking for engineering services? 
+## Looking for engineering services? 
-Visit [our homepage](http://akveo.com/) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
 
-### From Developers
+Visit [our homepage](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=looking_for_engineering_services_visit_homepage) or simply leave us a message to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!
-Made with :heart: by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
+
+## From Developers
+
+Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20akveo%20website%20-%20ngx_admin%20github%20readme&utm_source=ngx_admin&utm_medium=referral&utm_content=from_developers_made_by). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
 We're always happy to receive your feedback!

angular.json

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

e2e/.eslintrc.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-admin",
-  "version": "4.0.1",
+  "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,87 +26,94 @@
     "docs": "compodoc -p src/tsconfig.app.json -d docs",
     "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
     "prepush": "npm run lint:ci",
-    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
+    "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
   },
   "dependencies": {
-    "@agm/core": "^1.0.0-beta.5",
+    "@angular/animations": "^15.2.10",
-    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^15.2.9",
-    "@angular/cdk": "^8.0.0",
+    "@angular/common": "^15.2.10",
-    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^15.2.10",
-    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^15.2.10",
-    "@angular/core": "^8.0.0",
+    "@angular/forms": "^15.2.10",
-    "@angular/forms": "^8.0.0",
+    "@angular/google-maps": "^12.2.13",
-    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^8.0.0",
+    "@angular/router": "^15.2.10",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "4.1.2",
+    "@nebular/auth": "11.0.1",
-    "@nebular/eva-icons": "4.1.2",
+    "@nebular/eva-icons": "11.0.1",
-    "@nebular/security": "4.1.2",
+    "@nebular/security": "11.0.1",
-    "@nebular/theme": "4.1.2",
+    "@nebular/theme": "11.0.1",
-    "@swimlane/ngx-charts": "^10.0.0",
+    "@swimlane/ngx-charts": "^14.0.0",
-    "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
-    "angular2-toaster": "^7.0.0",
     "bootstrap": "4.3.1",
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "echarts": "^4.0.2",
+    "echarts": "^4.9.0",
-    "eva-icons": "^1.1.0",
+    "eva-icons": "^1.1.3",
     "intl": "1.2.5",
     "ionicons": "2.0.1",
     "leaflet": "1.2.0",
     "nebular-icons": "1.1.0",
-    "ng2-ckeditor": "^1.2.2",
+    "ng2-ckeditor": "~1.2.9",
-    "ng2-completer": "2.0.8",
+    "ng2-completer": "^9.0.1",
-    "ng2-smart-table": "1.3.5",
+    "ng2-smart-table": "^1.6.0",
-    "ngx-echarts": "^4.0.1",
+    "ngx-echarts": "^4.2.2",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.14.1",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.6.2",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
+    "style-loader": "^1.3.0",
     "tinymce": "4.5.7",
-    "tslib": "^1.9.0",
+    "tslib": "^2.3.1",
     "typeface-exo": "0.0.22",
-    "web-animations-js": "github:angular/web-animations-js#release_pr208",
+    "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.2",
+    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular/cli": "^8.0.2",
+    "@angular-eslint/builder": "15.2.1",
-    "@angular/compiler-cli": "^8.0.0",
+    "@angular-eslint/eslint-plugin": "15.2.1",
-    "@angular/language-service": "8.0.0",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "15.2.10",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
-    "@types/googlemaps": "^3.30.4",
+    "@types/jasmine": "~3.3.0",
-    "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
-    "@types/node": "6.0.90",
+    "@types/node": "^12.12.70",
-    "codelyzer": "^5.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "codelyzer": "^6.0.2",
     "conventional-changelog-cli": "1.3.4",
+    "eslint": "^8.28.0",
     "husky": "0.13.3",
-    "jasmine-core": "2.6.4",
+    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "4.1.1",
+    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "1.7.1",
+    "karma": "~6.3.19",
-    "karma-chrome-launcher": "2.1.1",
+    "karma-chrome-launcher": "~3.1.1",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "1.1.0",
+    "karma-jasmine": "~4.0.2",
-    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "npm-run-all": "4.0.2",
-    "protractor": "5.1.2",
+    "protractor": "~7.0.0",
     "rimraf": "2.6.1",
     "stylelint": "7.13.0",
     "ts-node": "3.2.2",
-    "tslint": "^5.7.0",
+    "tslint": "~6.1.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.4.5"
+    "typescript": "~4.9.5"
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,13 +4,13 @@
 @import 'themes';
 
 // framework component themes (styles tied to theme variables)
-@import '~@nebular/theme/styles/globals';
+@import '@nebular/theme/styles/globals';
-@import '~@nebular/auth/styles/all';
+@import '@nebular/auth/styles/globals';
 
-@import '~bootstrap/scss/functions';
+@import 'bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
+@import 'bootstrap/scss/mixins';
-@import '~bootstrap/scss/grid';
+@import 'bootstrap/scss/grid';
 
 // loading progress bar theme
 @import './pace.theme';

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

@@ -1,7 +1,7 @@
 // @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((
   layout-padding-top: 2.25rem,

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

@@ -76,8 +76,8 @@ const PIPES = [
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders<ThemeModule> {
-    return <ModuleWithProviders>{
+    return {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(

src/app/app-routing.module.ts

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

src/app/app.component.ts

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

src/app/app.module.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   private hideGrid: boolean;
 
-  @Output() select: EventEmitter<number> = new EventEmitter();
+  @Output() selectEvent: EventEmitter<number> = new EventEmitter();
 
   selectedRoom = null;
   sortedRooms = [];
@@ -108,7 +108,7 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
   }
 
   selectRoom(roomNumber) {
-    this.select.emit(roomNumber);
+    this.selectEvent.emit(roomNumber);
     this.selectedRoom = roomNumber;
     this.sortRooms();
   }

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

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

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

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

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

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

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

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

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

@@ -25,7 +25,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
 
   private value = 0;
 
-  @Input('chartValue')
+  @Input()
   set chartValue(value: number) {
     this.value = value;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 import { CountryOrderData } from '../../../@core/data/country-order';
@@ -10,7 +10,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
     <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
       <nb-card-header>Country Orders Statistics</nb-card-header>
       <nb-card-body>
-        <ngx-country-orders-map (select)="selectCountryById($event)"
+        <ngx-country-orders-map (selectEvent)="selectCountryById($event)"
                                 countryId="USA">
         </ngx-country-orders-map>
         <ngx-country-orders-chart [countryName]="countryName"
@@ -22,7 +22,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
     </nb-card>
   `,
 })
-export class CountryOrdersComponent implements OnDestroy {
+export class CountryOrdersComponent implements OnInit, OnDestroy {
 
   private alive = true;
 
@@ -36,6 +36,9 @@ export class CountryOrdersComponent implements OnDestroy {
               private breakpointService: NbMediaBreakpointsService,
               private countryOrderService: CountryOrderData) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();
+  }
+
+  ngOnInit() {
     this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
       .subscribe(([oldValue, newValue]) => {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/pages/modal-overlays/modal-overlays.module.ts

@@ -77,18 +77,15 @@ const SERVICES = [
 ];
 
 @NgModule({
-  imports: [
+    imports: [
-    ...MODULES,
+        ...MODULES,
-  ],
+    ],
-  declarations: [
+    declarations: [
-    ...COMPONENTS,
+        ...COMPONENTS,
-  ],
+    ],
-  providers: [
+    providers: [
-    ...SERVICES,
+        ...SERVICES,
-  ],
+    ],
-  entryComponents: [
-    ...ENTRY_COMPONENTS,
-  ],
 })
 export class ModalOverlaysModule {
 }

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

@@ -1,4 +1,4 @@
-@import '~@nebular/theme/styles/core/mixins';
+@import '@nebular/theme/styles/core/mixins';
 
 nb-card-body {
   margin: 0 -0.5rem;

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

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

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

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

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

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

src/app/pages/ui-features/icons/icons.component.html

@@ -8,7 +8,7 @@
         <nb-icon *ngFor="let icon of evaIcons" [icon]="icon" pack="eva"></nb-icon>
       </nb-card-body>
       <nb-card-footer>
-        <a href="https://akveo.github.io/eva-icons/" target="_blank">See all Eva Icons</a>
+        <a href="https://akveo.github.io/eva-icons/?utm_campaign=eva_icons%20-%20home%20-%20ngx_admin%20code%20embed&utm_source=ngx_admin&utm_medium=embedded&utm_content=icons_eva_icons_card" target="_blank">See all Eva Icons</a>
       </nb-card-footer>
     </nb-card>
   </div>

src/index.html

@@ -9,6 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>

src/polyfills.ts

@@ -38,7 +38,7 @@ import 'core-js/es7/reflect';
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/test.ts

@@ -20,7 +20,6 @@ import {
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
 declare const __karma__: any;
-declare const require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
@@ -28,11 +27,9 @@ __karma__.loaded = function () {};
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false },
+},
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
 // Finally, start Karma to run the tests.
 __karma__.start();

src/tsconfig.app.json

@@ -2,24 +2,13 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
+    "baseUrl": "./"
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ],
-      "@nebular/*": [
-        "../node_modules/@nebular/*"
-      ]
-    }
   },
-  "exclude": [
+  "files": [
-    "test.ts",
+    "main.ts",
-    "**/*.spec.ts",
+    "polyfills.ts"
-    "../node_modules/@nebular/**/*.spec.ts"
   ],
   "include": [
-    "../src/*.ts",
+    "**/*.d.ts"
-    "../src/**/*.ts",
-    "../node_modules/@nebular/**/*.ts"
   ]
 }

tsconfig.json

@@ -2,14 +2,13 @@
   "compileOnSave": false,
   "compilerOptions": {
     "importHelpers": true,
-    "module": "esnext",
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -18,7 +17,10 @@
       "dom"
     ],
     "plugins": [
-      { "name": "tslint-language-service"}
+      {
-    ]
+        "name": "tslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
   }
 }