first amr commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,41 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+/docs
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

.stylelintrc.json

@@ -0,0 +1,74 @@
+{
+  "rules": {
+    "color-hex-case": "lower",
+    "color-no-invalid-hex": true,
+
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-name-case": "lower",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "length-zero-no-unit": true,
+
+    "string-no-newline": true,
+    "string-quotes": "single",
+
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "s", "rem"],
+
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+
+    "shorthand-property-no-redundant-values": true,
+
+    "property-case": "lower",
+
+    "declaration-block-no-duplicate-properties": [ true, {
+      "ignore": ["consecutive-duplicates-with-different-values"]
+    }],
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-property-value-blacklist": [
+      { "/.*/": ["initial"] },
+      { "message": "The `initial` value is not supported in IE."}
+    ],
+
+    "block-closing-brace-newline-after": [
+      "always",
+      {
+        "ignoreAtRules": ["if", "else"]
+      }
+    ],
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-before": "always-multi-line",
+
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": [true, {
+      "ignorePseudoElements": ["ng-deep"]
+    }],
+    "selector-type-case": "lower",
+    "selector-max-id": 0,
+
+    "no-missing-end-of-source-newline": true,
+
+    "max-line-length": 120
+  }
+}

.travis.yml

@@ -0,0 +1,37 @@
+language: node_js
+
+sudo: false
+dist: trusty
+
+node_js:
+  - '8'
+  - '9'
+  - '10'
+
+branches:
+  only:
+  - master
+  - starter-kit
+  - demo
+
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+
+before_install:
+  - npm i -g npm@latest
+
+install:
+  - travis_retry npm i
+
+before_script:
+
+script:
+  - npm run lint:ci
+  - npm run build:prod
+
+git:
+  depth: 1

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "sourceMaps": true,
+            "webRoot": "${workspaceRoot}"
+        },
+        {
+            "type": "chrome",
+            "request": "attach",
+            "name": "Attach to Chrome",
+            "port": 9222,
+            "sourceMaps": true,
+            "webRoot": "${workspaceRoot}"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "tslint.enable": false
+}

CHANGELOG.md

@@ -0,0 +1,195 @@
+<a name="3.2.1"></a>
+## [3.2.1](https://github.com/akveo/ngx-admin/compare/v3.2.0...v3.2.1) (2019-04-02)
+
+
+### Bug Fixes
+
+* update [@angular-devkit](https://github.com/angular-devkit)/build-angular to fix import aliases ([78695cd](https://github.com/akveo/ngx-admin/commit/78695cd))
+
+
+
+<a name="3.2.0"></a>
+# [3.2.0](https://github.com/akveo/ngx-admin/compare/v3.1.0...v3.2.0) (2019-04-02)
+
+
+### Bug Fixes
+
+* **dashboard:** update title country->region the orders list component  ([#1987](https://github.com/akveo/ngx-admin/issues/1987)) ([cf1bf4d](https://github.com/akveo/ngx-admin/commit/cf1bf4d))
+* **readme:** fix demo links ([#2028](https://github.com/akveo/ngx-admin/issues/2028)) ([1fb3205](https://github.com/akveo/ngx-admin/commit/1fb3205))
+* **rtl:** remove duplicate of nebular styles ([#1824](https://github.com/akveo/ngx-admin/issues/1824)) ([d8e7092](https://github.com/akveo/ngx-admin/commit/d8e7092))
+* **setting-sidebar:** Ie and firefox position bugs, linter ([#2023](https://github.com/akveo/ngx-admin/issues/2023)) ([8d471ba](https://github.com/akveo/ngx-admin/commit/8d471ba))
+* **sidebar:** Add Form Inputs extra component menu item ([#1966](https://github.com/akveo/ngx-admin/issues/1966)) ([658aa19](https://github.com/akveo/ngx-admin/commit/658aa19)), closes [#1965](https://github.com/akveo/ngx-admin/issues/1965)
+
+
+### Features
+
+* update dependencies (Angular, Nebular) ([#2072](https://github.com/akveo/ngx-admin/issues/2072)) ([db2f451](https://github.com/akveo/ngx-admin/commit/db2f451))
+
+
+
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/akveo/ngx-admin/compare/v3.0.0...v3.1.0) (2019-01-23)
+
+
+### Bug Fixes
+
+* **datepicker:** fix datepicker arrow style ([#1925](https://github.com/akveo/ngx-admin/issues/1925)) ([a878197](https://github.com/akveo/ngx-admin/commit/a878197))
+* **toggle-settings-button:** position while search open ([#1993](https://github.com/akveo/ngx-admin/issues/1993)) ([f17aa32](https://github.com/akveo/ngx-admin/commit/f17aa32))
+
+
+### Features
+
+* **animation:** add fade in animation by route change ([#1958](https://github.com/akveo/ngx-admin/issues/1958)) ([773c14e](https://github.com/akveo/ngx-admin/commit/773c14e))
+* **data:** update data module, add new mock data ([#1960](https://github.com/akveo/ngx-admin/issues/1960)) ([47d232b](https://github.com/akveo/ngx-admin/commit/47d232b))
+* **layout config:** reduce gear button size ([#2002](https://github.com/akveo/ngx-admin/issues/2002)) ([1f56f2a](https://github.com/akveo/ngx-admin/commit/1f56f2a))
+* **settings:** redesign setting sidebar ([#1982](https://github.com/akveo/ngx-admin/issues/1982)) ([a73662f](https://github.com/akveo/ngx-admin/commit/a73662f))
+* **sidebar:** remove label new from sidebar ([#1921](https://github.com/akveo/ngx-admin/issues/1921)) ([d80c8da](https://github.com/akveo/ngx-admin/commit/d80c8da))
+* update Nebular to 3.1.0 ([33db902](https://github.com/akveo/ngx-admin/commit/33db902))
+
+
+
+<a name="3.0.0"></a>
+# [3.0.0](https://github.com/akveo/ngx-admin/compare/v2.3.0...v3.0.0) (2018-11-19)
+
+
+### Bug Fixes
+
+* **buttons:** change tiny button class to x-small ([#1826](https://github.com/akveo/ngx-admin/issues/1826)) ([a721fd8](https://github.com/akveo/ngx-admin/commit/a721fd8))
+* **chart:** resize chart on sidebar expand/collapse ([#1816](https://github.com/akveo/ngx-admin/issues/1816)) ([aa8e7cd](https://github.com/akveo/ngx-admin/commit/aa8e7cd))
+* **readme:** update doc (starter kit) link ([#1770](https://github.com/akveo/ngx-admin/issues/1770)) ([6456141](https://github.com/akveo/ngx-admin/commit/6456141))
+* **tslint:** add correct semicolon option ([#1777](https://github.com/akveo/ngx-admin/issues/1777)) ([00e6ca5](https://github.com/akveo/ngx-admin/commit/00e6ca5))
+
+
+### Features
+
+* **app:** update Nebular to the latest 2.0.1 version ([#1868](https://github.com/akveo/ngx-admin/issues/1868)) ([16bcc90](https://github.com/akveo/ngx-admin/commit/16bcc90)), closes [#1866](https://github.com/akveo/ngx-admin/issues/1866)
+* **dashboard:** add new E-commerce dashboard ([#1754](https://github.com/akveo/ngx-admin/issues/1754)) ([56e4709](https://github.com/akveo/ngx-admin/commit/56e4709))
+* **icons:** update font awesome to 5.2.0 ([#1798](https://github.com/akveo/ngx-admin/issues/1798)) ([f20c371](https://github.com/akveo/ngx-admin/commit/f20c371))
+* add a bunch of new Nebular demos ([#1911](https://github.com/akveo/ngx-admin/issues/1911)) ([3f1f4c5](https://github.com/akveo/ngx-admin/commit/3f1f4c5))
+* **icons:** add eva-icons ([#1912](https://github.com/akveo/ngx-admin/issues/1912)) ([b3d7b7b](https://github.com/akveo/ngx-admin/commit/b3d7b7b))
+* add ng2-completer to dependencies list ([3482404](https://github.com/akveo/ngx-admin/commit/3482404))
+* **app:** angular 7+ update ([#1910](https://github.com/akveo/ngx-admin/issues/1910)) ([aa7579c](https://github.com/akveo/ngx-admin/commit/aa7579c)), closes [#1890](https://github.com/akveo/ngx-admin/issues/1890)
+* **app:** update Nebular to 3.0.0 version ([#1916](https://github.com/akveo/ngx-admin/issues/1916)) ([c594a5a](https://github.com/akveo/ngx-admin/commit/c594a5a))
+* **app:** update Nebular to rc.10 ([50961f3](https://github.com/akveo/ngx-admin/commit/50961f3))
+
+
+### BREAKING CHANGES
+
+* Angular 7+ now required.
+The following libraries were updated:
+- @agm/core
+- @ng-bootstrap/ng-bootstrap
+- @swimlane/ngx-charts
+- ng2-ckeditor
+- ngx-echarts
+* **icons:** Since this is a major package update we recommend looking through the upgrade guide https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4
+
+
+
+<a name="2.3.0"></a>
+# [2.3.0 - Corporate Theme](https://github.com/akveo/ngx-admin/compare/v2.2.0...v2.3.0) (2018-06-22)
+
+
+### Bug Fixes
+
+* **buttons:** Uncheck checkbox after click ([#1721](https://github.com/akveo/ngx-admin/issues/1721)) ([fbe12a9](https://github.com/akveo/ngx-admin/commit/fbe12a9)), closes [#1697](https://github.com/akveo/ngx-admin/issues/1697)
+* **readme:** update docs link ([#1743](https://github.com/akveo/ngx-admin/issues/1743)) ([a6d5d49](https://github.com/akveo/ngx-admin/commit/a6d5d49))
+* **temperature:** fix temperature dragger gradient, fix switcher button hover background ([#1745](https://github.com/akveo/ngx-admin/issues/1745)) ([f12bd9f](https://github.com/akveo/ngx-admin/commit/f12bd9f))
+* **tree:** fix tree component, replace ng2-tree on the angular-tree-component ([22c161f](https://github.com/akveo/ngx-admin/commit/22c161f)), closes [#1690](https://github.com/akveo/ngx-admin/issues/1690)
+
+
+### Features
+
+* update Nebular to rc.9 ([#1741](https://github.com/akveo/ngx-admin/issues/1741)) ([18a4750](https://github.com/akveo/ngx-admin/commit/18a4750))
+* **app:** set default font-size to 14px ([#1742](https://github.com/akveo/ngx-admin/issues/1742)) ([6d705d2](https://github.com/akveo/ngx-admin/commit/6d705d2))
+* **icons:** update icons, add new nebular icons to icons list ([#1738](https://github.com/akveo/ngx-admin/issues/1738)) ([cef6ea6](https://github.com/akveo/ngx-admin/commit/cef6ea6))
+* **readme:** add new theme ([#1744](https://github.com/akveo/ngx-admin/issues/1744)) ([d25ad7a](https://github.com/akveo/ngx-admin/commit/d25ad7a))
+* **theme:** add corporate theme ([#1727](https://github.com/akveo/ngx-admin/issues/1727)) ([e37f12d](https://github.com/akveo/ngx-admin/commit/e37f12d))
+* **toaster:** update toaster to latest version (6.0.0) ([#1722](https://github.com/akveo/ngx-admin/issues/1722)) ([b85034e](https://github.com/akveo/ngx-admin/commit/b85034e))
+
+
+
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/akveo/ngx-admin/compare/v2.1.1...v2.2.0) (2018-05-14)
+
+
+### Features
+
+* add NotFound page ([#1672](https://github.com/akveo/ngx-admin/issues/1672)) ([fa3cdf7](https://github.com/akveo/ngx-admin/commit/fa3cdf7))
+* RTL support ([#1634](https://github.com/akveo/ngx-admin/issues/1634)) ([3b63759](https://github.com/akveo/ngx-admin/commit/3b63759))
+* update to Angular 6 ([#1684](https://github.com/akveo/ngx-admin/issues/1684)) ([06d2197](https://github.com/akveo/ngx-admin/commit/06d2197))
+
+
+
+<a name="2.1.1"></a>
+## [2.1.1](https://github.com/akveo/ngx-admin/compare/v2.1.0...v2.1.1) (2018-04-26)
+
+
+### Bug Fixes
+
+* **dashboard:** fix temp/humidity buttons ([0f494dc](https://github.com/akveo/ngx-admin/commit/0f494dc))
+* **echarts:** fix x-axis style ([ba6877c](https://github.com/akveo/ngx-admin/commit/ba6877c))
+* **icons:** remove All Nebular Icons link as there are no more icons ([edb05b7](https://github.com/akveo/ngx-admin/commit/edb05b7)), closes [#1597](https://github.com/akveo/ngx-admin/issues/1597)
+* **ie:** add es7 object polyfill for IE ([0630fe7](https://github.com/akveo/ngx-admin/commit/0630fe7))
+* **map:** get the bubble map back (thanks to @SUlbrichA) ([#1655](https://github.com/akveo/ngx-admin/issues/1655)) ([19f9d0e](https://github.com/akveo/ngx-admin/commit/19f9d0e)), closes [#1576](https://github.com/akveo/ngx-admin/issues/1576)
+
+
+### Features
+
+* **search-map:** set default location Minsk ([#1573](https://github.com/akveo/ngx-admin/issues/1573)) ([b54ab9f](https://github.com/akveo/ngx-admin/commit/b54ab9f))
+* update nebular to rc.7 ([#1658](https://github.com/akveo/ngx-admin/issues/1658)) ([510d3c2](https://github.com/akveo/ngx-admin/commit/510d3c2))
+
+
+
+<a name="2.1.0"></a>
+# [2.1.0](https://github.com/akveo/ngx-admin/compare/v2.0.2...v2.1.0) (2018-02-26)
+
+Nebular updated to rc.6.
+
+### Bug Fixes
+
+* **bootstrap:** radio temp fix ([14f5112](https://github.com/akveo/ngx-admin/commit/14f5112))
+* **dashboard:** update btn group toggle html ([#1566](https://github.com/akveo/ngx-admin/issues/1566)) ([2aa114b](https://github.com/akveo/ngx-admin/commit/2aa114b))
+
+
+### Features
+
+* **auth:** configurable auth social icons ([#1545](https://github.com/akveo/ngx-admin/issues/1545)) ([9381d8c](https://github.com/akveo/ngx-admin/commit/9381d8c)), closes [#1515](https://github.com/akveo/ngx-admin/issues/1515)
+* **bootstrap:** update to 4.0.0 release  ([ddb6306](https://github.com/akveo/ngx-admin/commit/ddb6306))
+* **maps:** add google map with access search location dropdown ([97c7134](https://github.com/akveo/ngx-admin/commit/97c7134))
+* **popover:** add popover showcase ([#1556](https://github.com/akveo/ngx-admin/issues/1556)) ([f4cdf4a](https://github.com/akveo/ngx-admin/commit/f4cdf4a))
+* **security:** include @nebular/security, ACL setup ([#1565](https://github.com/akveo/ngx-admin/issues/1565)) ([480a90b](https://github.com/akveo/ngx-admin/commit/480a90b))
+* **user:** replace `menu` with `nbContextMenu` directive ([fb5de37](https://github.com/akveo/ngx-admin/commit/fb5de37))
+
+
+
+<a name="2.0.2"></a>
+## [2.0.2](https://github.com/akveo/ngx-admin/compare/v2.0.1...v2.0.2) (2018-01-04)
+
+
+### Bug Fixes
+
+* **dashboard:** fix mistyped ngbDropdownMenu in some ngbDropdown ul elements ([#1458](https://github.com/akveo/ngx-admin/issues/1458)) ([fa83572](https://github.com/akveo/ngx-admin/commit/fa83572))
+* **dashboard:** fix typo in styles ([#1460](https://github.com/akveo/ngx-admin/issues/1460)) ([630c249](https://github.com/akveo/ngx-admin/commit/630c249))
+
+
+### Features
+
+* **dependencies:** update dependencies, angular 5+, nebular rc.4 ([26e16ed](https://github.com/akveo/ngx-admin/commit/26e16ed))
+
+
+
+<a name="2.0.1"></a>
+## [2.0.1](https://github.com/akveo/ngx-admin/compare/v2.0.0...v2.0.1) (2017-10-26)
+
+
+Nebular changelog is available [here](https://github.com/akveo/nebular/blob/master/CHANGELOG.md#200-rc3-2017-10-26) for more details. 
+
+### Features
+
+* **bootstrap:** update bootstrap to beta.2, nebular to rc.3 ([b525213](https://github.com/akveo/ngx-admin/commit/b525213))
+* **compodoc:** add compodoc documentation generator ([#1327](https://github.com/akveo/ngx-admin/issues/1327)) ([eebbc12](https://github.com/akveo/ngx-admin/commit/eebbc12))
+* **loader:** add loading progress indicator ([#1319](https://github.com/akveo/ngx-admin/issues/1319)) ([f479715](https://github.com/akveo/ngx-admin/commit/f479715))
+
+
+

CODE_OF_CONDUCT.md

@@ -0,0 +1,27 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of the ngx-admin project, and in the interest of fostering an open and welcoming community, 
+we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, 
+gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, nationality or anything else.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic addresses, without explicit permission
+* Other unethical or unprofessional conduct.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, 
+and other contributions that are not aligned to this Code of Conduct.
+By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. 
+Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
+
+This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.2.0, available at [http://contributor-covenant.org/version/1/2/0/](http://contributor-covenant.org/version/1/2/0/)

CONTRIBUTING.md

@@ -0,0 +1,221 @@
+# Contributing to ngx-admin
+
+We would love for you to contribute to ngx-admin and help make it ever better together! :rocket:
+
+ - [Code of Conduct](#coc)
+ - [Question or Problem?](#question)
+ - [Issues and Bugs](#issue)
+ - [Feature Requests](#feature)
+ - [Submission Guidelines](#submit-pr)
+ - [Coding Rules](#rules)
+ - [Commit Message Guidelines](#commit)
+
+## <a name="coc"></a> Code of Conduct
+Help us keep ngx-admin open and inclusive. Please read and follow our [Code of Conduct][coc].
+
+## <a name="question"></a> Got a Question or Problem?
+
+Please do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow][stackoverflow] where the questions should be tagged with tag `ngx-admin`.
+
+StackOverflow is a much better place to ask questions since:
+
+- there are thousands of people willing to help on StackOverflow
+- questions and answers stay available for public viewing so your question / answer might help someone else
+- StackOverflow's voting system assures that the best answers are prominently visible.
+
+To save your and our time, we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
+
+
+## <a name="issue"></a> Found an Issue?
+If you find a bug in the source code or a mistake in the documentation, you can help us by
+[submitting an issue](#submit-issue) to our [GitHub Repository][github]. Including an issue 
+reproduction (via CodePen, JsBin, Plunkr, GitHub repo, etc.) is the absolute best way to help the team quickly
+diagnose the problem. Screenshots and error stack traces are also helpful.
+
+Please follow this simple checklist before submitting:
+
+* If you have a question about using ngx-admin, please ask on the [StackOverflow][stackoverflow].
+
+* It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.
+
+* The issue list of this repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.
+
+* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs info" and receives no further replies from the author of the issue for more than 5 days, it will be closed.
+
+* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported][issues]. You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+
+* Next, [create a new issue](#submit-issue) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
+
+## <a name="feature"></a> Want a Feature?
+You can *request* a new feature by [submitting an issue](#submit-issue) to our [GitHub
+Repository][github]. If you would like to *implement* a new feature, please submit an issue with
+a proposal for your work first, to be sure that we can use it. 
+Please consider what kind of change it is:
+
+* For a **Major Feature**, first open an issue and outline your proposal so that it can be
+discussed. This will also allow us to better coordinate our efforts, prevent duplication of work,
+and help you to craft the change so that it is successfully accepted into the project.
+* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr).
+
+### <a name="submit-issue"></a> Submitting an Issue
+Before you submit an issue, search the archive, maybe your question was already answered.
+
+If your issue appears to be a bug, and hasn't been reported, open a new issue.
+Help us to maximize the effort we can spend fixing issues and adding new
+features by not reporting duplicate issues. Please make sure to fill out the populated issue form before submitting the issue.
+
+You can file new issues by providing the information [here][new_issue].
+
+
+### <a name="submit-pr"></a> Submitting a Pull Request (PR)
+Before you submit your Pull Request (PR) consider the following guidelines:
+
+* Search [GitHub][pulls] for an open or closed PR
+  that relates to your submission. You don't want to duplicate effort.
+* Make your changes in a new git branch:
+
+     ```shell
+     git checkout -b my-fix-branch master
+     ```
+* Read the [developer documentation][dev-doc].
+* Create your patch, **including appropriate test cases**.
+* Follow our [Coding Rules](#rules).
+* Test your changes with our supported browsers and screen readers.
+* Commit your changes using a descriptive commit message that follows our
+  [commit message conventions](#commit). Adherence to these conventions
+  is necessary because release notes are automatically generated from these messages.
+
+     ```shell
+     git commit -a
+     ```
+  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
+
+* Push your branch to GitHub:
+
+    ```shell
+    git push my-fork my-fix-branch
+    ```
+
+* In GitHub, send a pull request to `ngx-admin:master`.
+* If we suggest changes then:
+  * Make the required updates.
+  * Re-run `npm run release:validate` to ensure tests are still passing, linter & build has no errors.
+  * Rebase your branch and force push to your GitHub repository (this will update your Pull
+    Request):
+
+    ```shell
+    git rebase master -i
+    git push -f
+    ```
+
+That's it! Thank you for your contribution!
+
+#### After your pull request is merged
+
+After your pull request is merged, you can safely delete your branch and pull the changes
+from the main (upstream) repository:
+
+* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as
+    follows:
+
+    ```shell
+    git push my-fork --delete my-fix-branch
+    ```
+
+* Check out the master branch:
+
+    ```shell
+    git checkout master -f
+    ```
+
+* Delete the local branch:
+
+    ```shell
+    git branch -D my-fix-branch
+    ```
+
+* Update your master with the latest upstream version:
+
+    ```shell
+    git pull --ff upstream master
+    ```
+
+## <a name="rules"></a> Coding Rules
+To ensure consistency throughout the source code, keep these rules in mind as you are working:
+
+* All features or bug fixes **must be tested** by one or more specs (unit-tests).
+* All public API methods **must be documented** following JsDoc notation.
+
+## <a name="commit"></a> Commit Message Guidelines
+
+We have very precise rules over how our git commit messages can be formatted.  This leads to **more
+readable messages** that are easy to follow when looking through the **project history**.  But also,
+we use the git commit messages to **generate the ngx-admin change log**.
+
+### Commit Message Format
+Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special
+format that includes a **type**, a **scope** and a **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
+to read on GitHub as well as in various git tools.
+
+### Revert
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of
+the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is
+the SHA of the commit being reverted.
+
+### Type
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
+  semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing tests or correcting existing tests
+* **build**: Changes that affect the build system, CI configuration or external dependencies
+            (example scopes: gulp, broccoli, npm)
+* **chore**: Other changes that don't modify `src` or `test` files
+* **release**: Release version commit
+
+### Scope
+The scope could be anything specifying place of the commit change. For example
+`menu`, `sidebar`, etc.
+
+### Subject
+The subject contains succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize first letter
+* no dot (.) at the end
+
+### Body
+Optional. Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+Optional. The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines.
+The rest of the commit message is then used for this.
+
+[coc]: CODE_OF_CONDUCT.md
+[dev-doc]: DEV_DOCS.md
+[github]: https://github.com/akveo/ngx-admin
+[stackoverflow]: https://stackoverflow.com/questions/tagged/ngx-admin
+[issues]: https://github.com/akveo/ngx-admin/issues
+[new_issue]: https://github.com/akveo/ngx-admin/issues/new
+[pulls]: https://github.com/akveo/ngx-admin/pulls

DEV_DOCS.md

@@ -0,0 +1 @@
+Please have a look at [Nebular Dev Docs](https://github.com/akveo/nebular/blob/master/DEV_DOCS.md).

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 akveo.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+[![Build Status](https://travis-ci.org/akveo/ngx-admin.svg?branch=master)](https://travis-ci.org/akveo/ngx-admin)
+[![Join the chat at https://gitter.im/ng2-admin/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ng2-admin/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Dependency Status](https://david-dm.org/akveo/ngx-admin/status.svg)](https://david-dm.org/akveo/ng2-admin)
+
+[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)
+
+# Admin template based on Angular 7+, Bootstrap 4 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/OIL7rt8.png"/></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.
+
+
+### With 3 stunning visual themes
+
+#### 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/tvAJJhW.png"/></a>
+
+#### 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/wbEtUX4.jpg"/></a>
+
+#### Light
+
+<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/cb9U34M.jpg"/></a>
+
+### What's included:
+
+- Angular 7+ & Typescript
+- Bootstrap 4+ & SCSS
+- Responsive layout
+- RTL support
+- High resolution
+- Flexibly configurable themes with **hot-reload** (3 themes included)
+- Authentication module with multiple providers
+- 40+ Angular Components
+- 60+ Usage Examples
+
+### Hot Themes Reload
+
+<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=demo"><img src="https://i.imgur.com/XoJtfvK.gif"/></a>
+
+### Demo
+
+<a target="_blank" href="http://akveo.com/ngx-admin/">Live Demo</a>
+
+## 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).
+
+### 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" />
+
+## 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
+
+### 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!
+
+### 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!
+We're always happy to receive your feedback!

angular.json

@@ -0,0 +1,181 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-admin-demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "preserveSymlinks": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/favicon.png",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images",
+                "output": "/assets/img/markers"
+              }
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/typeface-exo/index.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
+              "node_modules/ionicons/scss/ionicons.scss",
+              "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",
+              "node_modules/ngx-toastr/toastr.css",
+              "src/app/@theme/styles/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/pace-js/pace.min.js",
+              "node_modules/tinymce/tinymce.min.js",
+              "node_modules/tinymce/themes/modern/theme.min.js",
+              "node_modules/tinymce/plugins/link/plugin.min.js",
+              "node_modules/tinymce/plugins/paste/plugin.min.js",
+              "node_modules/tinymce/plugins/table/plugin.min.js",
+              "node_modules/echarts/dist/echarts.min.js",
+              "node_modules/echarts/dist/extension/bmap.min.js",
+              "node_modules/chart.js/dist/Chart.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ngx-admin-demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ngx-admin-demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ngx-admin-demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/pace-js/pace.min.js",
+              "node_modules/tinymce/tinymce.min.js",
+              "node_modules/tinymce/themes/modern/theme.min.js",
+              "node_modules/tinymce/plugins/link/plugin.min.js",
+              "node_modules/tinymce/plugins/paste/plugin.min.js",
+              "node_modules/tinymce/plugins/table/plugin.min.js",
+              "node_modules/echarts/dist/echarts.min.js",
+              "node_modules/echarts/dist/extension/bmap.min.js",
+              "node_modules/chart.js/dist/Chart.min.js"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/typeface-exo/index.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
+              "node_modules/ionicons/scss/ionicons.scss",
+              "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/socicon/css/socicon.css",
+              "node_modules/nebular-icons/scss/nebular-icons.scss",
+              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
+              "src/app/@theme/styles/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/favicon.png",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images",
+                "output": "/assets/img/markers"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "typeCheck": true,
+            "exclude": []
+          }
+        }
+      }
+    },
+    "ngx-admin-demo-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "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"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "ngx"
+    }
+  }
+}

e2e/tsconfig.e2e.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

karma.conf.js

@@ -0,0 +1,45 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  const configuration = {
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers = ['Chrome_travis_ci'];
+  }
+
+  config.set(configuration);
+};

package.json

@@ -0,0 +1,125 @@
+{
+  "name": "ngx-admin",
+  "version": "3.2.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akveo/ngx-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/akveo/ngx-admin/issues"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "IE 11"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "conventional-changelog": "conventional-changelog",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:prod": "npm run build -- --prod --aot",
+    "test": "ng test",
+    "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
+    "lint": "ng lint",
+    "lint:fix": "ng lint ngx-admin-demo --fix",
+    "lint:styles": "stylelint ./src/**/*.scss",
+    "lint:ci": "npm run lint && npm run lint:styles",
+    "pree2e": "webdriver-manager update --standalone false --gecko false",
+    "e2e": "ng e2e",
+    "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"
+  },
+  "dependencies": {
+    "@agm/core": "^1.0.0-beta.5",
+    "@angular/animations": "^7.2.13",
+    "@angular/cdk": "^7.3.6",
+    "@angular/common": "^7.2.13",
+    "@angular/compiler": "^7.2.13",
+    "@angular/core": "^7.2.13",
+    "@angular/forms": "^7.2.13",
+    "@angular/http": "^7.2.13",
+    "@angular/platform-browser": "^7.2.13",
+    "@angular/platform-browser-dynamic": "^7.2.13",
+    "@angular/router": "^7.2.13",
+    "@asymmetrik/ngx-leaflet": "3.0.1",
+    "@auth0/angular-jwt": "^2.1.0",
+    "@nebular/auth": "3.4.2",
+    "@nebular/bootstrap": "3.4.2",
+    "@nebular/security": "3.4.2",
+    "@nebular/theme": "3.4.2",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
+    "@swimlane/ngx-charts": "^10.0.0",
+    "angular-tree-component": "7.2.0",
+    "angular2-chartjs": "0.4.1",
+    "angular2-toaster": "^7.0.0",
+    "bootstrap": "4.0.0",
+    "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",
+    "express-jwt": "^5.3.1",
+    "intl": "1.2.5",
+    "ionicons": "2.0.1",
+    "jwthelper": "0.0.4",
+    "leaflet": "1.2.0",
+    "nebular-icons": "1.1.0",
+    "ng2-bootstrap-modal": "^1.0.1",
+    "ng2-ckeditor": "^1.2.2",
+    "ng2-completer": "2.0.8",
+    "ng2-smart-table": "1.3.5",
+    "ngx-echarts": "^4.0.1",
+    "ngx-pagination": "^3.2.1",
+    "ngx-toastr": "^10.0.2",
+    "normalize.css": "6.0.0",
+    "pace-js": "1.0.2",
+    "roboto-fontface": "0.8.0",
+    "rxjs": "6.5.1",
+    "rxjs-compat": "6.3.0",
+    "socicon": "3.0.5",
+    "tinymce": "4.5.7",
+    "tslib": "^1.9.0",
+    "typeface-exo": "0.0.22",
+    "web-animations-js": "2.2.5",
+    "zone.js": "^0.8.29"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "0.12.1",
+    "@angular/cli": "^7.3.8",
+    "@angular/compiler-cli": "^7.2.13",
+    "@angular/language-service": "7.2.13",
+    "@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/jasminewd2": "2.0.3",
+    "@types/leaflet": "1.2.3",
+    "@types/node": "6.0.90",
+    "codelyzer": "^4.5.0",
+    "conventional-changelog-cli": "1.3.4",
+    "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",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "node-sass": "^4.11.0",
+    "npm-run-all": "4.0.2",
+    "protractor": "5.1.2",
+    "rimraf": "2.6.1",
+    "stylelint": "7.13.0",
+    "ts-node": "3.2.2",
+    "tslint": "5.7.0",
+    "tslint-language-service": "^0.9.9",
+    "typescript": "3.2.4"
+  }
+}

protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome',
+    'chromeOptions': {
+      'args': ['show-fps-counter=true', '--no-sandbox']
+    }
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+
+    jasmine.getEnv().addReporter(new SpecReporter({ acspec: { displayStacktrace: true } }));
+  }
+};

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

@@ -0,0 +1,168 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
+import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
+import { of as observableOf } from 'rxjs';
+
+import { throwIfAlreadyLoaded } from './module-import-guard';
+import {
+  AnalyticsService,
+  LayoutService,
+  PlayerService,
+  StateService,
+} from './utils';
+import { UserData } from './data/users';
+import { ElectricityData } from './data/electricity';
+import { SmartTableData } from './data/smart-table';
+import { UserActivityData } from './data/user-activity';
+import { OrdersChartData } from './data/orders-chart';
+import { ProfitChartData } from './data/profit-chart';
+import { TrafficListData } from './data/traffic-list';
+import { EarningData } from './data/earning';
+import { OrdersProfitChartData } from './data/orders-profit-chart';
+import { TrafficBarData } from './data/traffic-bar';
+import { ProfitBarAnimationChartData } from './data/profit-bar-animation-chart';
+import { TemperatureHumidityData } from './data/temperature-humidity';
+import { SolarData } from './data/solar';
+import { TrafficChartData } from './data/traffic-chart';
+import { StatsBarData } from './data/stats-bar';
+import { CountryOrderData } from './data/country-order';
+import { StatsProgressBarData } from './data/stats-progress-bar';
+import { VisitorsAnalyticsData } from './data/visitors-analytics';
+import { SecurityCamerasData } from './data/security-cameras';
+
+import { UserService } from './mock/users.service';
+import { ElectricityService } from './mock/electricity.service';
+import { SmartTableService } from './mock/smart-table.service';
+import { UserActivityService } from './mock/user-activity.service';
+import { OrdersChartService } from './mock/orders-chart.service';
+import { ProfitChartService } from './mock/profit-chart.service';
+import { TrafficListService } from './mock/traffic-list.service';
+import { EarningService } from './mock/earning.service';
+import { OrdersProfitChartService } from './mock/orders-profit-chart.service';
+import { TrafficBarService } from './mock/traffic-bar.service';
+import { ProfitBarAnimationChartService } from './mock/profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './mock/temperature-humidity.service';
+import { SolarService } from './mock/solar.service';
+import { TrafficChartService } from './mock/traffic-chart.service';
+import { StatsBarService } from './mock/stats-bar.service';
+import { CountryOrderService } from './mock/country-order.service';
+import { StatsProgressBarService } from './mock/stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
+import { SecurityCamerasService } from './mock/security-cameras.service';
+import { MockDataModule } from './mock/mock-data.module';
+
+const socialLinks = [
+  {
+    url: 'https://github.com/akveo/nebular',
+    target: '_blank',
+    icon: 'socicon-github',
+  },
+  {
+    url: 'https://www.facebook.com/akveo/',
+    target: '_blank',
+    icon: 'socicon-facebook',
+  },
+  {
+    url: 'https://twitter.com/akveo_inc',
+    target: '_blank',
+    icon: 'socicon-twitter',
+  },
+];
+
+const DATA_SERVICES = [
+  { provide: UserData, useClass: UserService },
+  { provide: ElectricityData, useClass: ElectricityService },
+  { provide: SmartTableData, useClass: SmartTableService },
+  { provide: UserActivityData, useClass: UserActivityService },
+  { provide: OrdersChartData, useClass: OrdersChartService },
+  { provide: ProfitChartData, useClass: ProfitChartService },
+  { provide: TrafficListData, useClass: TrafficListService },
+  { provide: EarningData, useClass: EarningService },
+  { provide: OrdersProfitChartData, useClass: OrdersProfitChartService },
+  { provide: TrafficBarData, useClass: TrafficBarService },
+  { provide: ProfitBarAnimationChartData, useClass: ProfitBarAnimationChartService },
+  { provide: TemperatureHumidityData, useClass: TemperatureHumidityService },
+  { provide: SolarData, useClass: SolarService },
+  { provide: TrafficChartData, useClass: TrafficChartService },
+  { provide: StatsBarData, useClass: StatsBarService },
+  { provide: CountryOrderData, useClass: CountryOrderService },
+  { provide: StatsProgressBarData, useClass: StatsProgressBarService },
+  { provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
+  { provide: SecurityCamerasData, useClass: SecurityCamerasService },
+];
+
+export class NbSimpleRoleProvider extends NbRoleProvider {
+  getRole() {
+    // here you could provide any role based on any auth flow
+    return observableOf('guest');
+  }
+}
+
+export const NB_CORE_PROVIDERS = [
+  ...MockDataModule.forRoot().providers,
+  ...DATA_SERVICES,
+  ...NbAuthModule.forRoot({
+
+    strategies: [
+      NbDummyAuthStrategy.setup({
+        name: 'email',
+        delay: 3000,
+      }),
+    ],
+    forms: {
+      login: {
+        socialLinks: socialLinks,
+      },
+      register: {
+        socialLinks: socialLinks,
+      },
+    },
+  }).providers,
+
+  NbSecurityModule.forRoot({
+    accessControl: {
+      guest: {
+        view: '*',
+      },
+      user: {
+        parent: 'guest',
+        create: '*',
+        edit: '*',
+        remove: '*',
+      },
+    },
+  }).providers,
+
+  {
+    provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
+  },
+  AnalyticsService,
+  LayoutService,
+  PlayerService,
+  StateService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    NbAuthModule,
+  ],
+  declarations: [],
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: CoreModule,
+      providers: [
+        ...NB_CORE_PROVIDERS,
+      ],
+    };
+  }
+}

src/app/@core/data/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/data/country-order.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export abstract class CountryOrderData {
+  abstract getCountriesCategories(): Observable<string[]>;
+  abstract getCountriesCategoriesData(country: string): Observable<number[]>;
+}

src/app/@core/data/earning.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface LiveUpdateChart {
+  liveChart: { value: [string, number] }[];
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  dailyIncome: number;
+}
+
+export interface PieChart {
+  value: number;
+  name: string;
+}
+
+export abstract class EarningData {
+  abstract getEarningLiveUpdateCardData(currency: string): Observable<any[]>;
+  abstract getEarningCardData(currency: string): Observable<LiveUpdateChart>;
+  abstract getEarningPieChartData(): Observable<PieChart[]>;
+}

src/app/@core/data/electricity.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+
+export interface Month {
+  month: string;
+  delta: string;
+  down: boolean;
+  kWatts: string;
+  cost: string;
+}
+
+export interface Electricity {
+  title: string;
+  active?: boolean;
+  months: Month[];
+}
+
+export interface ElectricityChart {
+  label: string;
+  value: number;
+}
+
+export abstract class ElectricityData {
+  abstract getListData(): Observable<Electricity[]>;
+  abstract getChartData(): Observable<ElectricityChart[]>;
+}

src/app/@core/data/orders-chart.ts

@@ -0,0 +1,8 @@
+export interface OrdersChart {
+  chartLabel: string[];
+  linesData: number[][];
+}
+
+export abstract class OrdersChartData {
+  abstract getOrdersChartData(period: string): OrdersChart;
+}

src/app/@core/data/orders-profit-chart.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { OrdersChart } from './orders-chart';
+import { ProfitChart  } from './profit-chart';
+
+export interface OrderProfitChartSummary {
+  title: string;
+  value: number;
+}
+
+export abstract class OrdersProfitChartData {
+  abstract getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]>;
+  abstract getOrdersChartData(period: string): Observable<OrdersChart>;
+  abstract getProfitChartData(period: string): Observable<ProfitChart>;
+}

src/app/@core/data/profit-bar-animation-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class ProfitBarAnimationChartData {
+  abstract getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }>;
+}

src/app/@core/data/profit-chart.ts

@@ -0,0 +1,8 @@
+export interface ProfitChart {
+  chartLabel: string[];
+  data: number[][];
+}
+
+export abstract class ProfitChartData {
+  abstract getProfitChartData(period: string): ProfitChart;
+}

src/app/@core/data/security-cameras.ts

@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+
+export interface Camera {
+  title: string;
+  source: string;
+}
+
+export abstract class SecurityCamerasData {
+  abstract getCamerasData(): Observable<Camera[]>;
+}

src/app/@core/data/smart-table.ts

@@ -0,0 +1,4 @@
+
+export abstract class SmartTableData {
+  abstract getData(): any[];
+}

src/app/@core/data/solar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class SolarData {
+  abstract getSolarData(): Observable<number>;
+}

src/app/@core/data/stats-bar.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class StatsBarData {
+  abstract getStatsBarData(): Observable<number[]>;
+}

src/app/@core/data/stats-progress-bar.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface ProgressInfo {
+  title: string;
+  value: number;
+  activeProgress: number;
+  description: string;
+}
+
+export abstract class StatsProgressBarData {
+  abstract getProgressInfoData(): Observable<ProgressInfo[]>;
+}

src/app/@core/data/temperature-humidity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface Temperature {
+  value: number;
+  min: number;
+  max: number;
+}
+
+export abstract class TemperatureHumidityData {
+  abstract getTemperatureData(): Observable<Temperature>;
+  abstract getHumidityData(): Observable<Temperature>;
+}

src/app/@core/data/traffic-bar.ts

@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficBar {
+  data: number[];
+  labels: string[];
+  formatter: string;
+}
+
+export abstract class TrafficBarData {
+  abstract getTrafficBarData(period: string): Observable<TrafficBar>;
+}

src/app/@core/data/traffic-chart.ts

@@ -0,0 +1,5 @@
+import { Observable } from 'rxjs';
+
+export abstract class TrafficChartData {
+  abstract getTrafficChartData(): Observable<number[]>;
+}

src/app/@core/data/traffic-list.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface TrafficList {
+  date: string;
+  value: number;
+  delta: {
+    up: boolean;
+    value: number;
+  };
+  comparison: {
+    prevDate: string;
+    prevValue: number;
+    nextDate: string;
+    nextValue: number;
+  };
+}
+
+export abstract class TrafficListData {
+  abstract getTrafficListData(period: string): Observable<TrafficList>;
+}

src/app/@core/data/user-activity.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface UserActive {
+  date: string;
+  pagesVisitCount: number;
+  deltaUp: boolean;
+  newVisits: number;
+}
+
+export abstract class UserActivityData {
+  abstract getUserActivityData(period: string): Observable<UserActive[]>;
+}

src/app/@core/data/users.ts

@@ -0,0 +1,21 @@
+import { Observable } from 'rxjs';
+
+export interface User {
+  name: string;
+  picture: string;
+}
+
+export interface Contacts {
+  user: User;
+  type: string;
+}
+
+export interface RecentUsers extends Contacts {
+  time: number;
+}
+
+export abstract class UserData {
+  abstract getUsers(): Observable<User[]>;
+  abstract getContacts(): Observable<Contacts[]>;
+  abstract getRecentUsers(): Observable<RecentUsers[]>;
+}

src/app/@core/data/visitors-analytics.ts

@@ -0,0 +1,12 @@
+import { Observable } from 'rxjs';
+
+export interface OutlineData {
+  label: string;
+  value: number;
+}
+
+export abstract class VisitorsAnalyticsData {
+  abstract getInnerLineChartData(): Observable<number[]>;
+  abstract getOutlineLineChartData(): Observable<OutlineData[]>;
+  abstract getPieChartData(): Observable<number>;
+}

src/app/@core/mock/README.md

@@ -0,0 +1 @@
+Application-wise data providers.

src/app/@core/mock/country-order.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { CountryOrderData } from '../data/country-order';
+
+@Injectable()
+export class CountryOrderService extends CountryOrderData {
+
+  private countriesCategories = [
+    'Sofas',
+    'Furniture',
+    'Lighting',
+    'Tables',
+    'Textiles',
+  ];
+  private countriesCategoriesLength = this.countriesCategories.length;
+  private generateRandomData(nPoints: number): number[] {
+    return Array.from(Array(nPoints)).map(() => {
+      return Math.round(Math.random() * 20);
+    });
+  }
+
+  getCountriesCategories(): Observable<string[]> {
+    return observableOf(this.countriesCategories);
+  }
+
+  getCountriesCategoriesData(country: string): Observable<number[]> {
+    return observableOf(this.generateRandomData(this.countriesCategoriesLength));
+  }
+}

src/app/@core/mock/earning.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { LiveUpdateChart, PieChart, EarningData } from '../data/earning';
+
+@Injectable()
+export class EarningService extends EarningData {
+
+  private currentDate: Date = new Date();
+  private currentValue = Math.random() * 1000;
+  private ONE_DAY = 24 * 3600 * 1000;
+
+  private pieChartData = [
+    {
+      value: 50,
+      name: 'Bitcoin',
+    },
+    {
+      value: 25,
+      name: 'Tether',
+    },
+    {
+      value: 25,
+      name: 'Ethereum',
+    },
+  ];
+
+  private liveUpdateChartData = {
+    bitcoin: {
+      liveChart: [],
+      delta: {
+        up: true,
+        value: 4,
+      },
+      dailyIncome: 45895,
+    },
+    tether: {
+      liveChart: [],
+      delta: {
+        up: false,
+        value: 9,
+      },
+      dailyIncome: 5862,
+    },
+    ethereum: {
+      liveChart: [],
+      delta: {
+        up: false,
+        value: 21,
+      },
+      dailyIncome: 584,
+    },
+  };
+
+  getDefaultLiveChartData(elementsNumber: number) {
+    this.currentDate = new Date();
+    this.currentValue = Math.random() * 1000;
+
+    return Array.from(Array(elementsNumber))
+      .map(item => this.generateRandomLiveChartData());
+  }
+
+  generateRandomLiveChartData() {
+    this.currentDate = new Date(+this.currentDate + this.ONE_DAY);
+    this.currentValue = this.currentValue + Math.random() * 20 - 11;
+
+    if (this.currentValue < 0) {
+      this.currentValue = Math.random() * 100;
+    }
+
+    return {
+      value: [
+        [
+          this.currentDate.getFullYear(),
+          this.currentDate.getMonth(),
+          this.currentDate.getDate(),
+        ].join('/'),
+        Math.round(this.currentValue),
+      ],
+    };
+  }
+
+  getEarningLiveUpdateCardData(currency): Observable<any[]> {
+    const data = this.liveUpdateChartData[currency.toLowerCase()];
+    const newValue = this.generateRandomLiveChartData();
+
+    data.liveChart.shift();
+    data.liveChart.push(newValue);
+
+    return observableOf(data.liveChart);
+  }
+
+  getEarningCardData(currency: string): Observable<LiveUpdateChart> {
+    const data = this.liveUpdateChartData[currency.toLowerCase()];
+
+    data.liveChart = this.getDefaultLiveChartData(150);
+
+    return observableOf(data);
+  }
+
+  getEarningPieChartData(): Observable<PieChart[]> {
+    return observableOf(this.pieChartData);
+  }
+}

src/app/@core/mock/electricity.service.ts

@@ -0,0 +1,95 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { Electricity, ElectricityChart, ElectricityData } from '../data/electricity';
+
+@Injectable()
+export class ElectricityService extends ElectricityData {
+
+  private listData: Electricity[] = [
+    {
+      title: '2015',
+      months: [
+        { month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' },
+        { month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' },
+        { month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' },
+        { month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' },
+        { month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' },
+        { month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' },
+        { month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' },
+        { month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' },
+        { month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' },
+        { month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' },
+        { month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' },
+        { month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' },
+      ],
+    },
+    {
+      title: '2016',
+      active: true,
+      months: [
+        { month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' },
+        { month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' },
+        { month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' },
+        { month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' },
+        { month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' },
+        { month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' },
+        { month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' },
+        { month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' },
+        { month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' },
+        { month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' },
+        { month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' },
+        { month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' },
+      ],
+    },
+    {
+      title: '2017',
+      months: [
+        { month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' },
+        { month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' },
+        { month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' },
+        { month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' },
+        { month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' },
+        { month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' },
+        { month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' },
+        { month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' },
+        { month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' },
+        { month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' },
+        { month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' },
+        { month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' },
+      ],
+    },
+  ];
+
+  private chartPoints = [
+    490, 490, 495, 500,
+    505, 510, 520, 530,
+    550, 580, 630, 720,
+    800, 840, 860, 870,
+    870, 860, 840, 800,
+    720, 200, 145, 130,
+    130, 145, 200, 570,
+    635, 660, 670, 670,
+    660, 630, 580, 460,
+    380, 350, 340, 340,
+    340, 340, 340, 340,
+    340, 340, 340,
+  ];
+
+  chartData: ElectricityChart[];
+
+  constructor() {
+    super();
+    this.chartData = this.chartPoints.map((p, index) => ({
+      label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
+      value: p,
+    }));
+  }
+
+  getListData(): Observable<Electricity[]> {
+    return observableOf(this.listData);
+  }
+
+  getChartData(): Observable<ElectricityChart[]> {
+    return observableOf(this.chartData);
+  }
+}

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

@@ -0,0 +1,65 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UserService } from './users.service';
+import { ElectricityService } from './electricity.service';
+import { SmartTableService } from './smart-table.service';
+import { UserActivityService } from './user-activity.service';
+import { OrdersChartService } from './orders-chart.service';
+import { ProfitChartService } from './profit-chart.service';
+import { TrafficListService } from './traffic-list.service';
+import { PeriodsService } from './periods.service';
+import { EarningService } from './earning.service';
+import { OrdersProfitChartService } from './orders-profit-chart.service';
+import { TrafficBarService } from './traffic-bar.service';
+import { ProfitBarAnimationChartService } from './profit-bar-animation-chart.service';
+import { TemperatureHumidityService } from './temperature-humidity.service';
+import { SolarService } from './solar.service';
+import { TrafficChartService } from './traffic-chart.service';
+import { StatsBarService } from './stats-bar.service';
+import { CountryOrderService } from './country-order.service';
+import { StatsProgressBarService } from './stats-progress-bar.service';
+import { VisitorsAnalyticsService } from './visitors-analytics.service';
+import { SecurityCamerasService } from './security-cameras.service';
+
+const SERVICES = [
+  UserService,
+  ElectricityService,
+  SmartTableService,
+  UserActivityService,
+  OrdersChartService,
+  ProfitChartService,
+  TrafficListService,
+  PeriodsService,
+  EarningService,
+  OrdersProfitChartService,
+  TrafficBarService,
+  ProfitBarAnimationChartService,
+  TemperatureHumidityService,
+  SolarService,
+  TrafficChartService,
+  StatsBarService,
+  CountryOrderService,
+  StatsProgressBarService,
+  VisitorsAnalyticsService,
+  SecurityCamerasService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    ...SERVICES,
+  ],
+})
+export class MockDataModule {
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: MockDataModule,
+      providers: [
+        ...SERVICES,
+      ],
+    };
+  }
+}

src/app/@core/mock/orders-chart.service.ts

@@ -0,0 +1,155 @@
+import { Injectable } from '@angular/core';
+import { PeriodsService } from './periods.service';
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
+
+@Injectable()
+export class OrdersChartService extends OrdersChartData {
+
+  private year = [
+    '2012',
+    '2013',
+    '2014',
+    '2015',
+    '2016',
+    '2017',
+    '2018',
+  ];
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  private getDataForWeekPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(42, this.period.getWeeks()),
+      linesData: [
+        [
+          184, 267, 326, 366, 389, 399,
+          392, 371, 340, 304, 265, 227,
+          191, 158, 130, 108, 95, 91, 97,
+          109, 125, 144, 166, 189, 212,
+          236, 259, 280, 300, 316, 329,
+          338, 342, 339, 329, 312, 288,
+          258, 221, 178, 128, 71,
+        ],
+        [
+          158, 178, 193, 205, 212, 213,
+          204, 190, 180, 173, 168, 164,
+          162, 160, 159, 158, 159, 166,
+          179, 195, 215, 236, 257, 276,
+          292, 301, 304, 303, 300, 293,
+          284, 273, 262, 251, 241, 234,
+          232, 232, 232, 232, 232, 232,
+        ],
+        [
+          58, 137, 202, 251, 288, 312,
+          323, 324, 311, 288, 257, 222,
+          187, 154, 124, 100, 81, 68, 61,
+          58, 61, 69, 80, 96, 115, 137,
+          161, 186, 210, 233, 254, 271,
+          284, 293, 297, 297, 297, 297,
+          297, 297, 297, 297, 297,
+        ],
+      ],
+    };
+  }
+
+  private getDataForMonthPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(47, this.period.getMonths()),
+      linesData: [
+        [
+          5, 63, 113, 156, 194, 225,
+          250, 270, 283, 289, 290,
+          286, 277, 264, 244, 220,
+          194, 171, 157, 151, 150,
+          152, 155, 160, 166, 170,
+          167, 153, 135, 115, 97,
+          82, 71, 64, 63, 62, 61,
+          62, 65, 73, 84, 102,
+          127, 159, 203, 259, 333,
+        ],
+        [
+          6, 83, 148, 200, 240,
+          265, 273, 259, 211,
+          122, 55, 30, 28, 36,
+          50, 68, 88, 109, 129,
+          146, 158, 163, 165,
+          173, 187, 208, 236,
+          271, 310, 346, 375,
+          393, 400, 398, 387,
+          368, 341, 309, 275,
+          243, 220, 206, 202,
+          207, 222, 247, 286, 348,
+        ],
+        [
+          398, 348, 315, 292, 274,
+          261, 251, 243, 237, 231,
+          222, 209, 192, 172, 152,
+          132, 116, 102, 90, 80, 71,
+          64, 58, 53, 49, 48, 54, 66,
+          84, 104, 125, 142, 156, 166,
+          172, 174, 172, 167, 159, 149,
+          136, 121, 105, 86, 67, 45, 22,
+        ],
+      ],
+    };
+  }
+
+  private getDataForYearPeriod(): OrdersChart {
+    return {
+      chartLabel: this.getDataLabels(42, this.year),
+      linesData: [
+        [
+          190, 269, 327, 366, 389, 398,
+          396, 387, 375, 359, 343, 327,
+          312, 298, 286, 276, 270, 268,
+          265, 258, 247, 234, 220, 204,
+          188, 172, 157, 142, 128, 116,
+          106, 99, 95, 94, 92, 89, 84,
+          77, 69, 60, 49, 36, 22,
+        ],
+        [
+          265, 307, 337, 359, 375, 386,
+          393, 397, 399, 397, 390, 379,
+          365, 347, 326, 305, 282, 261,
+          241, 223, 208, 197, 190, 187,
+          185, 181, 172, 160, 145, 126,
+          105, 82, 60, 40, 26, 19, 22,
+          43, 82, 141, 220, 321,
+        ],
+        [
+          9, 165, 236, 258, 244, 206,
+          186, 189, 209, 239, 273, 307,
+          339, 365, 385, 396, 398, 385,
+          351, 300, 255, 221, 197, 181,
+          170, 164, 162, 161, 159, 154,
+          146, 135, 122, 108, 96, 87,
+          83, 82, 82, 82, 82, 82, 82,
+        ],
+      ],
+    };
+  }
+
+  getDataLabels(nPoints: number, labelsArray: string[]): string[] {
+    const labelsArrayLength = labelsArray.length;
+    const step = Math.round(nPoints / labelsArrayLength);
+
+    return Array.from(Array(nPoints)).map((item, index) => {
+      const dataIndex = Math.round(index / step);
+
+      return index % step === 0 ? labelsArray[dataIndex] : '';
+    });
+  }
+
+  getOrdersChartData(period: string): OrdersChart {
+    return this.data[period];
+  }
+}

src/app/@core/mock/orders-profit-chart.service.ts

@@ -0,0 +1,45 @@
+import { of as observableOf,  Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { OrdersChart, OrdersChartData } from '../data/orders-chart';
+import { OrderProfitChartSummary, OrdersProfitChartData } from '../data/orders-profit-chart';
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
+
+@Injectable()
+export class OrdersProfitChartService extends OrdersProfitChartData {
+
+  private summary = [
+    {
+      title: 'Marketplace',
+      value: 3654,
+    },
+    {
+      title: 'Last Month',
+      value: 946,
+    },
+    {
+      title: 'Last Week',
+      value: 654,
+    },
+    {
+      title: 'Today',
+      value: 230,
+    },
+  ];
+
+  constructor(private ordersChartService: OrdersChartData,
+              private profitChartService: ProfitChartData) {
+    super();
+  }
+
+  getOrderProfitChartSummary(): Observable<OrderProfitChartSummary[]> {
+    return observableOf(this.summary);
+  }
+
+  getOrdersChartData(period: string): Observable<OrdersChart> {
+    return observableOf(this.ordersChartService.getOrdersChartData(period));
+  }
+
+  getProfitChartData(period: string): Observable<ProfitChart> {
+    return observableOf(this.profitChartService.getProfitChartData(period));
+  }
+}

src/app/@core/mock/periods.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PeriodsService {
+  getYears() {
+    return [
+      '2010', '2011', '2012',
+      '2013', '2014', '2015',
+      '2016', '2017', '2018',
+    ];
+  }
+
+  getMonths() {
+    return [
+      'Jan', 'Feb', 'Mar',
+      'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep',
+      'Oct', 'Nov', 'Dec',
+    ];
+  }
+
+  getWeeks() {
+    return [
+      'Mon',
+      'Tue',
+      'Wed',
+      'Thu',
+      'Fri',
+      'Sat',
+      'Sun',
+    ];
+  }
+}

src/app/@core/mock/profit-bar-animation-chart.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { ProfitBarAnimationChartData } from '../data/profit-bar-animation-chart';
+
+@Injectable()
+export class ProfitBarAnimationChartService extends ProfitBarAnimationChartData {
+
+  private data: any;
+
+  constructor() {
+    super();
+    this.data = {
+      firstLine: this.getDataForFirstLine(),
+      secondLine: this.getDataForSecondLine(),
+    };
+  }
+
+  getDataForFirstLine(): number[] {
+    return this.createEmptyArray(100)
+      .map((_, index) => {
+        const oneFifth = index / 5;
+
+        return (Math.sin(oneFifth) * (oneFifth - 10) + index / 6) * 5;
+      });
+  }
+
+  getDataForSecondLine(): number[] {
+    return this.createEmptyArray(100)
+      .map((_, index) => {
+        const oneFifth = index / 5;
+
+        return (Math.cos(oneFifth) * (oneFifth - 10) + index / 6) * 5;
+      });
+  }
+
+  createEmptyArray(nPoints: number) {
+    return Array.from(Array(nPoints));
+  }
+
+  getChartData(): Observable<{ firstLine: number[]; secondLine: number[]; }> {
+    return observableOf(this.data);
+  }
+}

src/app/@core/mock/profit-chart.service.ts

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { PeriodsService } from './periods.service';
+import { ProfitChart, ProfitChartData } from '../data/profit-chart';
+
+@Injectable()
+export class ProfitChartService extends ProfitChartData {
+
+  private year = [
+    '2012',
+    '2013',
+    '2014',
+    '2015',
+    '2016',
+    '2017',
+    '2018',
+  ];
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  private getDataForWeekPeriod(): ProfitChart {
+    const nPoint = this.period.getWeeks().length;
+
+    return {
+      chartLabel: this.period.getWeeks(),
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getDataForMonthPeriod(): ProfitChart {
+    const nPoint = this.period.getMonths().length;
+
+    return {
+      chartLabel: this.period.getMonths(),
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getDataForYearPeriod(): ProfitChart {
+    const nPoint = this.year.length;
+
+    return {
+      chartLabel: this.year,
+      data: [
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+        this.getRandomData(nPoint),
+      ],
+    };
+  }
+
+  private getRandomData(nPoints: number): number[] {
+    return Array.from(Array(nPoints)).map(() => {
+      return Math.round(Math.random() * 500);
+    });
+  }
+
+  getProfitChartData(period: string): ProfitChart {
+    return this.data[period];
+  }
+}

src/app/@core/mock/security-cameras.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { Camera, SecurityCamerasData } from '../data/security-cameras';
+
+@Injectable()
+export class SecurityCamerasService extends SecurityCamerasData {
+
+  private cameras: Camera[] = [
+    {
+      title: 'Camera #1',
+      source: 'assets/images/camera1.jpg',
+    },
+    {
+      title: 'Camera #2',
+      source: 'assets/images/camera2.jpg',
+    },
+    {
+      title: 'Camera #3',
+      source: 'assets/images/camera3.jpg',
+    },
+    {
+      title: 'Camera #4',
+      source: 'assets/images/camera4.jpg',
+    },
+  ];
+
+  getCamerasData(): Observable<Camera[]> {
+    return observableOf(this.cameras);
+  }
+}

src/app/@core/mock/smart-table.service.ts

@@ -0,0 +1,432 @@
+import { Injectable } from '@angular/core';
+import { SmartTableData } from '../data/smart-table';
+
+@Injectable()
+export class SmartTableService extends SmartTableData {
+
+  data = [{
+    id: 1,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mdo',
+    email: 'mdo@gmail.com',
+    age: '28',
+  }, {
+    id: 2,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@fat',
+    email: 'fat@yandex.ru',
+    age: '45',
+  }, {
+    id: 3,
+    firstName: 'Larry',
+    lastName: 'Bird',
+    username: '@twitter',
+    email: 'twitter@outlook.com',
+    age: '18',
+  }, {
+    id: 4,
+    firstName: 'John',
+    lastName: 'Snow',
+    username: '@snow',
+    email: 'snow@gmail.com',
+    age: '20',
+  }, {
+    id: 5,
+    firstName: 'Jack',
+    lastName: 'Sparrow',
+    username: '@jack',
+    email: 'jack@yandex.ru',
+    age: '30',
+  }, {
+    id: 6,
+    firstName: 'Ann',
+    lastName: 'Smith',
+    username: '@ann',
+    email: 'ann@gmail.com',
+    age: '21',
+  }, {
+    id: 7,
+    firstName: 'Barbara',
+    lastName: 'Black',
+    username: '@barbara',
+    email: 'barbara@yandex.ru',
+    age: '43',
+  }, {
+    id: 8,
+    firstName: 'Sevan',
+    lastName: 'Bagrat',
+    username: '@sevan',
+    email: 'sevan@outlook.com',
+    age: '13',
+  }, {
+    id: 9,
+    firstName: 'Ruben',
+    lastName: 'Vardan',
+    username: '@ruben',
+    email: 'ruben@gmail.com',
+    age: '22',
+  }, {
+    id: 10,
+    firstName: 'Karen',
+    lastName: 'Sevan',
+    username: '@karen',
+    email: 'karen@yandex.ru',
+    age: '33',
+  }, {
+    id: 11,
+    firstName: 'Mark',
+    lastName: 'Otto',
+    username: '@mark',
+    email: 'mark@gmail.com',
+    age: '38',
+  }, {
+    id: 12,
+    firstName: 'Jacob',
+    lastName: 'Thornton',
+    username: '@jacob',
+    email: 'jacob@yandex.ru',
+    age: '48',
+  }, {
+    id: 13,
+    firstName: 'Haik',
+    lastName: 'Hakob',
+    username: '@haik',
+    email: 'haik@outlook.com',
+    age: '48',
+  }, {
+    id: 14,
+    firstName: 'Garegin',
+    lastName: 'Jirair',
+    username: '@garegin',
+    email: 'garegin@gmail.com',
+    age: '40',
+  }, {
+    id: 15,
+    firstName: 'Krikor',
+    lastName: 'Bedros',
+    username: '@krikor',
+    email: 'krikor@yandex.ru',
+    age: '32',
+  }, {
+    'id': 16,
+    'firstName': 'Francisca',
+    'lastName': 'Brady',
+    'username': '@Gibson',
+    'email': 'franciscagibson@comtours.com',
+    'age': 11,
+  }, {
+    'id': 17,
+    'firstName': 'Tillman',
+    'lastName': 'Figueroa',
+    'username': '@Snow',
+    'email': 'tillmansnow@comtours.com',
+    'age': 34,
+  }, {
+    'id': 18,
+    'firstName': 'Jimenez',
+    'lastName': 'Morris',
+    'username': '@Bryant',
+    'email': 'jimenezbryant@comtours.com',
+    'age': 45,
+  }, {
+    'id': 19,
+    'firstName': 'Sandoval',
+    'lastName': 'Jacobson',
+    'username': '@Mcbride',
+    'email': 'sandovalmcbride@comtours.com',
+    'age': 32,
+  }, {
+    'id': 20,
+    'firstName': 'Griffin',
+    'lastName': 'Torres',
+    'username': '@Charles',
+    'email': 'griffincharles@comtours.com',
+    'age': 19,
+  }, {
+    'id': 21,
+    'firstName': 'Cora',
+    'lastName': 'Parker',
+    'username': '@Caldwell',
+    'email': 'coracaldwell@comtours.com',
+    'age': 27,
+  }, {
+    'id': 22,
+    'firstName': 'Cindy',
+    'lastName': 'Bond',
+    'username': '@Velez',
+    'email': 'cindyvelez@comtours.com',
+    'age': 24,
+  }, {
+    'id': 23,
+    'firstName': 'Frieda',
+    'lastName': 'Tyson',
+    'username': '@Craig',
+    'email': 'friedacraig@comtours.com',
+    'age': 45,
+  }, {
+    'id': 24,
+    'firstName': 'Cote',
+    'lastName': 'Holcomb',
+    'username': '@Rowe',
+    'email': 'coterowe@comtours.com',
+    'age': 20,
+  }, {
+    'id': 25,
+    'firstName': 'Trujillo',
+    'lastName': 'Mejia',
+    'username': '@Valenzuela',
+    'email': 'trujillovalenzuela@comtours.com',
+    'age': 16,
+  }, {
+    'id': 26,
+    'firstName': 'Pruitt',
+    'lastName': 'Shepard',
+    'username': '@Sloan',
+    'email': 'pruittsloan@comtours.com',
+    'age': 44,
+  }, {
+    'id': 27,
+    'firstName': 'Sutton',
+    'lastName': 'Ortega',
+    'username': '@Black',
+    'email': 'suttonblack@comtours.com',
+    'age': 42,
+  }, {
+    'id': 28,
+    'firstName': 'Marion',
+    'lastName': 'Heath',
+    'username': '@Espinoza',
+    'email': 'marionespinoza@comtours.com',
+    'age': 47,
+  }, {
+    'id': 29,
+    'firstName': 'Newman',
+    'lastName': 'Hicks',
+    'username': '@Keith',
+    'email': 'newmankeith@comtours.com',
+    'age': 15,
+  }, {
+    'id': 30,
+    'firstName': 'Boyle',
+    'lastName': 'Larson',
+    'username': '@Summers',
+    'email': 'boylesummers@comtours.com',
+    'age': 32,
+  }, {
+    'id': 31,
+    'firstName': 'Haynes',
+    'lastName': 'Vinson',
+    'username': '@Mckenzie',
+    'email': 'haynesmckenzie@comtours.com',
+    'age': 15,
+  }, {
+    'id': 32,
+    'firstName': 'Miller',
+    'lastName': 'Acosta',
+    'username': '@Young',
+    'email': 'milleryoung@comtours.com',
+    'age': 55,
+  }, {
+    'id': 33,
+    'firstName': 'Johnston',
+    'lastName': 'Brown',
+    'username': '@Knight',
+    'email': 'johnstonknight@comtours.com',
+    'age': 29,
+  }, {
+    'id': 34,
+    'firstName': 'Lena',
+    'lastName': 'Pitts',
+    'username': '@Forbes',
+    'email': 'lenaforbes@comtours.com',
+    'age': 25,
+  }, {
+    'id': 35,
+    'firstName': 'Terrie',
+    'lastName': 'Kennedy',
+    'username': '@Branch',
+    'email': 'terriebranch@comtours.com',
+    'age': 37,
+  }, {
+    'id': 36,
+    'firstName': 'Louise',
+    'lastName': 'Aguirre',
+    'username': '@Kirby',
+    'email': 'louisekirby@comtours.com',
+    'age': 44,
+  }, {
+    'id': 37,
+    'firstName': 'David',
+    'lastName': 'Patton',
+    'username': '@Sanders',
+    'email': 'davidsanders@comtours.com',
+    'age': 26,
+  }, {
+    'id': 38,
+    'firstName': 'Holden',
+    'lastName': 'Barlow',
+    'username': '@Mckinney',
+    'email': 'holdenmckinney@comtours.com',
+    'age': 11,
+  }, {
+    'id': 39,
+    'firstName': 'Baker',
+    'lastName': 'Rivera',
+    'username': '@Montoya',
+    'email': 'bakermontoya@comtours.com',
+    'age': 47,
+  }, {
+    'id': 40,
+    'firstName': 'Belinda',
+    'lastName': 'Lloyd',
+    'username': '@Calderon',
+    'email': 'belindacalderon@comtours.com',
+    'age': 21,
+  }, {
+    'id': 41,
+    'firstName': 'Pearson',
+    'lastName': 'Patrick',
+    'username': '@Clements',
+    'email': 'pearsonclements@comtours.com',
+    'age': 42,
+  }, {
+    'id': 42,
+    'firstName': 'Alyce',
+    'lastName': 'Mckee',
+    'username': '@Daugherty',
+    'email': 'alycedaugherty@comtours.com',
+    'age': 55,
+  }, {
+    'id': 43,
+    'firstName': 'Valencia',
+    'lastName': 'Spence',
+    'username': '@Olsen',
+    'email': 'valenciaolsen@comtours.com',
+    'age': 20,
+  }, {
+    'id': 44,
+    'firstName': 'Leach',
+    'lastName': 'Holcomb',
+    'username': '@Humphrey',
+    'email': 'leachhumphrey@comtours.com',
+    'age': 28,
+  }, {
+    'id': 45,
+    'firstName': 'Moss',
+    'lastName': 'Baxter',
+    'username': '@Fitzpatrick',
+    'email': 'mossfitzpatrick@comtours.com',
+    'age': 51,
+  }, {
+    'id': 46,
+    'firstName': 'Jeanne',
+    'lastName': 'Cooke',
+    'username': '@Ward',
+    'email': 'jeanneward@comtours.com',
+    'age': 59,
+  }, {
+    'id': 47,
+    'firstName': 'Wilma',
+    'lastName': 'Briggs',
+    'username': '@Kidd',
+    'email': 'wilmakidd@comtours.com',
+    'age': 53,
+  }, {
+    'id': 48,
+    'firstName': 'Beatrice',
+    'lastName': 'Perry',
+    'username': '@Gilbert',
+    'email': 'beatricegilbert@comtours.com',
+    'age': 39,
+  }, {
+    'id': 49,
+    'firstName': 'Whitaker',
+    'lastName': 'Hyde',
+    'username': '@Mcdonald',
+    'email': 'whitakermcdonald@comtours.com',
+    'age': 35,
+  }, {
+    'id': 50,
+    'firstName': 'Rebekah',
+    'lastName': 'Duran',
+    'username': '@Gross',
+    'email': 'rebekahgross@comtours.com',
+    'age': 40,
+  }, {
+    'id': 51,
+    'firstName': 'Earline',
+    'lastName': 'Mayer',
+    'username': '@Woodward',
+    'email': 'earlinewoodward@comtours.com',
+    'age': 52,
+  }, {
+    'id': 52,
+    'firstName': 'Moran',
+    'lastName': 'Baxter',
+    'username': '@Johns',
+    'email': 'moranjohns@comtours.com',
+    'age': 20,
+  }, {
+    'id': 53,
+    'firstName': 'Nanette',
+    'lastName': 'Hubbard',
+    'username': '@Cooke',
+    'email': 'nanettecooke@comtours.com',
+    'age': 55,
+  }, {
+    'id': 54,
+    'firstName': 'Dalton',
+    'lastName': 'Walker',
+    'username': '@Hendricks',
+    'email': 'daltonhendricks@comtours.com',
+    'age': 25,
+  }, {
+    'id': 55,
+    'firstName': 'Bennett',
+    'lastName': 'Blake',
+    'username': '@Pena',
+    'email': 'bennettpena@comtours.com',
+    'age': 13,
+  }, {
+    'id': 56,
+    'firstName': 'Kellie',
+    'lastName': 'Horton',
+    'username': '@Weiss',
+    'email': 'kellieweiss@comtours.com',
+    'age': 48,
+  }, {
+    'id': 57,
+    'firstName': 'Hobbs',
+    'lastName': 'Talley',
+    'username': '@Sanford',
+    'email': 'hobbssanford@comtours.com',
+    'age': 28,
+  }, {
+    'id': 58,
+    'firstName': 'Mcguire',
+    'lastName': 'Donaldson',
+    'username': '@Roman',
+    'email': 'mcguireroman@comtours.com',
+    'age': 38,
+  }, {
+    'id': 59,
+    'firstName': 'Rodriquez',
+    'lastName': 'Saunders',
+    'username': '@Harper',
+    'email': 'rodriquezharper@comtours.com',
+    'age': 20,
+  }, {
+    'id': 60,
+    'firstName': 'Lou',
+    'lastName': 'Conner',
+    'username': '@Sanchez',
+    'email': 'lousanchez@comtours.com',
+    'age': 16,
+  }];
+
+  getData() {
+    return this.data;
+  }
+}

src/app/@core/mock/solar.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { SolarData } from '../data/solar';
+
+@Injectable()
+export class SolarService extends SolarData {
+  private value = 42;
+
+  getSolarData(): Observable<number> {
+    return observableOf(this.value);
+  }
+}

src/app/@core/mock/stats-bar.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { StatsBarData } from '../data/stats-bar';
+
+@Injectable()
+export class StatsBarService extends StatsBarData {
+
+  private statsBarData: number[] = [
+    300, 520, 435, 530,
+    730, 620, 660, 860,
+  ];
+
+  getStatsBarData(): Observable<number[]> {
+    return observableOf(this.statsBarData);
+  }
+}

src/app/@core/mock/stats-progress-bar.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { ProgressInfo, StatsProgressBarData } from '../data/stats-progress-bar';
+
+@Injectable()
+export class StatsProgressBarService extends StatsProgressBarData {
+  private progressInfoData: ProgressInfo[] = [
+    {
+      title: 'Today’s Profit',
+      value: 572900,
+      activeProgress: 70,
+      description: 'Better than last week (70%)',
+    },
+    {
+      title: 'New Orders',
+      value: 6378,
+      activeProgress: 30,
+      description: 'Better than last week (30%)',
+    },
+    {
+      title: 'New Comments',
+      value: 200,
+      activeProgress: 55,
+      description: 'Better than last week (55%)',
+    },
+  ];
+
+  getProgressInfoData(): Observable<ProgressInfo[]> {
+    return observableOf(this.progressInfoData);
+  }
+}

src/app/@core/mock/temperature-humidity.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { TemperatureHumidityData, Temperature } from '../data/temperature-humidity';
+
+@Injectable()
+export class TemperatureHumidityService extends TemperatureHumidityData {
+
+  private temperatureDate: Temperature = {
+    value: 24,
+    min: 12,
+    max: 30,
+  };
+
+  private humidityDate: Temperature = {
+    value: 87,
+    min: 0,
+    max: 100,
+  };
+
+  getTemperatureData(): Observable<Temperature> {
+    return observableOf(this.temperatureDate);
+  }
+
+  getHumidityData(): Observable<Temperature> {
+    return observableOf(this.humidityDate);
+  }
+}

src/app/@core/mock/traffic-bar.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { TrafficBarData, TrafficBar } from '../data/traffic-bar';
+
+@Injectable()
+export class TrafficBarService extends TrafficBarData {
+
+  private data = { };
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataForWeekPeriod(),
+      month: this.getDataForMonthPeriod(),
+      year: this.getDataForYearPeriod(),
+    };
+  }
+
+  getDataForWeekPeriod(): TrafficBar {
+    return {
+      data: [10, 15, 19, 7, 20, 13, 15],
+      labels: this.period.getWeeks(),
+      formatter: '{c0} MB',
+    };
+  }
+
+  getDataForMonthPeriod(): TrafficBar {
+    return {
+      data: [0.5, 0.3, 0.8, 0.2, 0.3, 0.7, 0.8, 1, 0.7, 0.8, 0.6, 0.7],
+      labels: this.period.getMonths(),
+      formatter: '{c0} GB',
+    };
+  }
+
+  getDataForYearPeriod(): TrafficBar {
+    return {
+      data: [10, 15, 19, 7, 20, 13, 15, 19, 11],
+      labels: this.period.getYears(),
+      formatter: '{c0} GB',
+    };
+  }
+
+  getTrafficBarData(period: string): Observable<TrafficBar> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/traffic-chart.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { TrafficChartData } from '../data/traffic-chart';
+
+@Injectable()
+export class TrafficChartService extends TrafficChartData {
+
+  private data: number[] = [
+    300, 520, 435, 530,
+    730, 620, 660, 860,
+  ];
+
+  getTrafficChartData(): Observable<number[]> {
+    return observableOf(this.data);
+  }
+}

src/app/@core/mock/traffic-list.service.ts

@@ -0,0 +1,87 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { TrafficList, TrafficListData } from '../data/traffic-list';
+
+@Injectable()
+export class TrafficListService extends TrafficListData {
+
+  private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
+  private data = {};
+
+  constructor(private period: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataWeek(),
+      month: this.getDataMonth(),
+      year: this.getDataYear(),
+    };
+  }
+
+  private getDataWeek(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const weeks = this.period.getWeeks();
+
+      return weeks[weeks.length - 1];
+    };
+
+    return this.reduceData(this.period.getWeeks(), getFirstDateInPeriod);
+  }
+
+  private getDataMonth(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const months = this.period.getMonths();
+      const date = new Date();
+      const prevYear = date.getFullYear() - 1;
+
+      return `${months[months.length - 1]}, ${prevYear}`;
+    };
+
+    return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
+  }
+
+  private getDataYear(): TrafficList[] {
+    const getFirstDateInPeriod = () => {
+      const years = this.period.getYears();
+
+      return `${parseInt(years[0], 10) - 1}`;
+    };
+
+    return this.reduceData(this.period.getYears(), getFirstDateInPeriod);
+  }
+
+  private reduceData(timePeriods: string[], getFirstDateInPeriod: () => string): TrafficList[] {
+    return timePeriods.reduce((result, timePeriod, index) => {
+      const hasResult = result[index - 1];
+      const prevDate = hasResult ?
+        result[index - 1].comparison.nextDate :
+        getFirstDateInPeriod();
+      const prevValue = hasResult ?
+        result[index - 1].comparison.nextValue :
+        this.getRandom(100);
+      const nextValue = this.getRandom(100);
+      const deltaValue = prevValue - nextValue;
+
+      const item = {
+        date: timePeriod,
+        value: this.getRandom(1000),
+        delta: {
+          up: deltaValue <= 0,
+          value: Math.abs(deltaValue),
+        },
+        comparison: {
+          prevDate,
+          prevValue,
+          nextDate: timePeriod,
+          nextValue,
+        },
+      };
+
+      return [...result, item];
+    }, []);
+  }
+
+  getTrafficListData(period: string): Observable<TrafficList> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/user-activity.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf,  Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { UserActive, UserActivityData } from '../data/user-activity';
+
+@Injectable()
+export class UserActivityService extends UserActivityData {
+
+  private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
+  private generateUserActivityRandomData(date) {
+    return {
+      date,
+      pagesVisitCount: this.getRandom(1000),
+      deltaUp: this.getRandom(1) % 2 === 0,
+      newVisits: this.getRandom(100),
+    };
+  }
+
+  data = {};
+
+  constructor(private periods: PeriodsService) {
+    super();
+    this.data = {
+      week: this.getDataWeek(),
+      month: this.getDataMonth(),
+      year: this.getDataYear(),
+    };
+  }
+
+  private getDataWeek(): UserActive[] {
+    return this.periods.getWeeks().map((week) => {
+      return this.generateUserActivityRandomData(week);
+    });
+  }
+
+  private getDataMonth(): UserActive[] {
+    const currentDate = new Date();
+    const days = currentDate.getDate();
+    const month = this.periods.getMonths()[currentDate.getMonth()];
+
+    return Array.from(Array(days)).map((_, index) => {
+      const date = `${index + 1} ${month}`;
+
+      return this.generateUserActivityRandomData(date);
+    });
+  }
+
+  private getDataYear(): UserActive[] {
+    return this.periods.getYears().map((year) => {
+      return this.generateUserActivityRandomData(year);
+    });
+  }
+
+  getUserActivityData(period: string): Observable<UserActive[]> {
+    return observableOf(this.data[period]);
+  }
+}

src/app/@core/mock/users.service.ts

@@ -0,0 +1,53 @@
+import { of as observableOf,  Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Contacts, RecentUsers, UserData } from '../data/users';
+
+@Injectable()
+export class UserService extends UserData {
+
+  private time: Date = new Date;
+
+  private users = {
+    nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' },
+    eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' },
+    jack: { name: 'Jack Williams', picture: 'assets/images/jack.png' },
+    lee: { name: 'Lee Wong', picture: 'assets/images/lee.png' },
+    alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' },
+    kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' },
+  };
+  private types = {
+    mobile: 'mobile',
+    home: 'home',
+    work: 'work',
+  };
+  private contacts: Contacts[] = [
+    { user: this.users.nick, type: this.types.mobile },
+    { user: this.users.eva, type: this.types.home },
+    { user: this.users.jack, type: this.types.mobile },
+    { user: this.users.lee, type: this.types.mobile },
+    { user: this.users.alan, type: this.types.home },
+    { user: this.users.kate, type: this.types.work },
+  ];
+  private recentUsers: RecentUsers[]  = [
+    { user: this.users.alan, type: this.types.home, time: this.time.setHours(21, 12)},
+    { user: this.users.eva, type: this.types.home, time: this.time.setHours(17, 45)},
+    { user: this.users.nick, type: this.types.mobile, time: this.time.setHours(5, 29)},
+    { user: this.users.lee, type: this.types.mobile, time: this.time.setHours(11, 24)},
+    { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(10, 45)},
+    { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 42)},
+    { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 31)},
+    { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(8, 0)},
+  ];
+
+  getUsers(): Observable<any> {
+    return observableOf(this.users);
+  }
+
+  getContacts(): Observable<Contacts[]> {
+    return observableOf(this.contacts);
+  }
+
+  getRecentUsers(): Observable<RecentUsers[]> {
+    return observableOf(this.recentUsers);
+  }
+}

src/app/@core/mock/visitors-analytics.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable } from 'rxjs';
+import { PeriodsService } from './periods.service';
+import { OutlineData, VisitorsAnalyticsData } from '../data/visitors-analytics';
+
+@Injectable()
+export class VisitorsAnalyticsService extends VisitorsAnalyticsData {
+
+  constructor(private periodService: PeriodsService) {
+    super();
+  }
+
+  private pieChartValue = 75;
+  private innerLinePoints: number[] = [
+    94, 188, 225, 244, 253, 254, 249, 235, 208,
+    173, 141, 118, 105, 97, 94, 96, 104, 121, 147,
+    183, 224, 265, 302, 333, 358, 375, 388, 395,
+    400, 400, 397, 390, 377, 360, 338, 310, 278,
+    241, 204, 166, 130, 98, 71, 49, 32, 20, 13, 9,
+  ];
+  private outerLinePoints: number[] = [
+    85, 71, 59, 50, 45, 42, 41, 44 , 58, 88,
+    136 , 199, 267, 326, 367, 391, 400, 397,
+    376, 319, 200, 104, 60, 41, 36, 37, 44,
+    55, 74, 100 , 131, 159, 180, 193, 199, 200,
+    195, 184, 164, 135, 103, 73, 50, 33, 22, 15, 11,
+  ];
+  private generateOutlineLineData(): OutlineData[] {
+    const months = this.periodService.getMonths();
+    const outerLinePointsLength = this.outerLinePoints.length;
+    const monthsLength = months.length;
+
+    return this.outerLinePoints.map((p, index) => {
+      const monthIndex = Math.round(index / 4);
+      const label = (index % Math.round(outerLinePointsLength / monthsLength) === 0)
+        ? months[monthIndex]
+        : '';
+
+      return {
+        label,
+        value: p,
+      };
+    });
+  }
+
+  getInnerLineChartData(): Observable<number[]> {
+    return observableOf(this.innerLinePoints);
+  }
+
+  getOutlineLineChartData(): Observable<OutlineData[]> {
+    return observableOf(this.generateOutlineLineData());
+  }
+
+  getPieChartData(): Observable<number> {
+    return observableOf(this.pieChartValue);
+  }
+}

src/app/@core/module-import-guard.ts

@@ -0,0 +1,5 @@
+export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
+  if (parentModule) {
+    throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { filter } from 'rxjs/operators';
+
+declare const ga: any;
+
+@Injectable()
+export class AnalyticsService {
+  private enabled: boolean;
+
+  constructor(private location: Location, private router: Router) {
+    this.enabled = false;
+  }
+
+  trackPageViews() {
+    if (this.enabled) {
+      this.router.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+      )
+        .subscribe(() => {
+          ga('send', {hitType: 'pageview', page: this.location.path()});
+        });
+    }
+  }
+
+  trackEvent(eventName: string) {
+    if (this.enabled) {
+      ga('send', 'event', eventName);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { LayoutService } from './layout.service';
+import { AnalyticsService } from './analytics.service';
+import { PlayerService } from './player.service';
+import { StateService } from './state.service';
+
+export {
+  LayoutService,
+  AnalyticsService,
+  PlayerService,
+  StateService,
+};

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

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

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

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+
+export class Track {
+  name: string;
+  artist: string;
+  url: string;
+  cover: string;
+}
+
+@Injectable()
+export class PlayerService {
+  current: number;
+  playlist: Track[] = [
+    {
+      name: 'Don\'t Wanna Fight',
+      artist: 'Alabama Shakes',
+      url: 'https://p.scdn.co/mp3-preview/6156cdbca425a894972c02fca9d76c0b70e001af',
+      cover: 'assets/images/cover1.jpg',
+    },
+    {
+      name: 'Harder',
+      artist: 'Daft Punk',
+      url: 'https://p.scdn.co/mp3-preview/92a04c7c0e96bf93a1b1b1cae7dfff1921969a7b',
+      cover: 'assets/images/cover2.jpg',
+    },
+    {
+      name: 'Come Together',
+      artist: 'Beatles',
+      url: 'https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9',
+      cover: 'assets/images/cover3.jpg',
+    },
+  ];
+
+  random(): Track {
+    this.current = Math.floor(Math.random() * this.playlist.length);
+    return this.playlist[this.current];
+  }
+
+  next(): Track {
+    return this.getNextTrack();
+  }
+
+  prev() {
+    return this.getPrevTrack();
+  }
+
+  private getNextTrack(): Track {
+    if (this.current === this.playlist.length - 1) {
+      this.current = 0;
+    } else {
+      this.current++;
+    }
+
+    return this.playlist[this.current];
+  }
+
+  private getPrevTrack(): Track {
+    if (this.current === 0) {
+      this.current = this.playlist.length - 1;
+    } else {
+      this.current--;
+    }
+
+    return this.playlist[this.current];
+  }
+}

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

@@ -0,0 +1,92 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { of as observableOf,  Observable,  BehaviorSubject } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
+
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+
+@Injectable()
+export class StateService implements OnDestroy {
+
+  protected layouts: any = [
+    {
+      name: 'One Column',
+      icon: 'nb-layout-default',
+      id: 'one-column',
+      selected: true,
+    },
+    {
+      name: 'Two Column',
+      icon: 'nb-layout-two-column',
+      id: 'two-column',
+    },
+    {
+      name: 'Center Column',
+      icon: 'nb-layout-centre',
+      id: 'center-column',
+    },
+  ];
+
+  protected sidebars: any = [
+    {
+      name: 'Sidebar at layout start',
+      icon: 'nb-layout-sidebar-left',
+      id: 'start',
+      selected: true,
+    },
+    {
+      name: 'Sidebar at layout end',
+      icon: 'nb-layout-sidebar-right',
+      id: 'end',
+    },
+  ];
+
+  protected layoutState$ = new BehaviorSubject(this.layouts[0]);
+  protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
+
+  alive = true;
+
+  constructor(directionService: NbLayoutDirectionService) {
+    directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(direction => this.updateSidebarIcons(direction));
+
+    this.updateSidebarIcons(directionService.getDirection());
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+
+  private updateSidebarIcons(direction: NbLayoutDirection) {
+    const [ startSidebar, endSidebar ] = this.sidebars;
+    const isLtr = direction === NbLayoutDirection.LTR;
+    const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
+    const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
+    startSidebar.icon = startIconClass;
+    endSidebar.icon = endIconClass;
+  }
+
+  setLayoutState(state: any): any {
+    this.layoutState$.next(state);
+  }
+
+  getLayoutStates(): Observable<any[]> {
+    return observableOf(this.layouts);
+  }
+
+  onLayoutState(): Observable<any> {
+    return this.layoutState$.asObservable();
+  }
+
+  setSidebarState(state: any): any {
+    this.sidebarState$.next(state);
+  }
+
+  getSidebarStates(): Observable<any[]> {
+    return observableOf(this.sidebars);
+  }
+
+  onSidebarState(): Observable<any> {
+    return this.sidebarState$.asObservable();
+  }
+}

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

@@ -0,0 +1,30 @@
+@import '../../styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+@include nb-install-component() {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .socials {
+    font-size: 2rem;
+
+    a {
+      padding: 0.4rem;
+      color: nb-theme(color-fg);
+      transition: color ease-out 0.1s;
+
+      &:hover {
+        color: nb-theme(color-fg-heading);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    .socials {
+      font-size: 1.5rem;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  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> 2017</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 href="#" target="_blank" class="ion ion-social-twitter"></a>
+      <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
+    </div>
+  `,
+})
+export class FooterComponent {
+}

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

@@ -0,0 +1,26 @@
+<div class="header-container"
+     [class.left]="position === 'normal'"
+     [class.right]="position === 'inverse'">
+  <div class="logo-containter">
+    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
+    <div class="logo" (click)="goToHome()">HS-<span>EQ</span></div>
+  </div>
+  <ngx-theme-switcher></ngx-theme-switcher>
+</div>
+
+<div class="header-container">
+  <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
+  <nb-actions
+    size="medium"
+    [class.right]="position === 'normal'"
+    [class.left]="position === 'inverse'">
+    <nb-action *nbIsGranted="['view', 'user']" >
+      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
+    </nb-action>
+    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
+    <nb-action class="control-item" icon="nb-email"></nb-action>
+    <nb-action class="control-item">
+      <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
+    </nb-action>
+  </nb-actions>
+</div>

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

@@ -0,0 +1,212 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .left {
+    display: flex;
+    width: 100%;
+    order: 0;
+    flex-direction: row;
+  }
+  .right {
+    order: 1;
+    flex-direction: row-reverse;
+  }
+
+  .logo-containter {
+    display: flex;
+    align-items: center;
+    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
+  }
+
+  .control-item {
+    display: block;
+  }
+
+  .header-container {
+    display: flex;
+    align-items: center;
+    width: auto;
+
+    .navigation {
+      @include nb-ltr(padding-right, nb-theme(padding));
+      @include nb-rtl(padding-left, nb-theme(padding));
+      font-size: 2.5rem;
+      text-decoration: none;
+
+      i {
+        display: block;
+      }
+
+    }
+
+    .logo {
+      padding: 0 nb-theme(padding);
+      font-size: 1.75rem;
+      font-weight: nb-theme(font-weight-bolder);
+      @include nb-ltr(border-left, 1px solid nb-theme(separator));
+      @include nb-rtl(border-right, 1px solid nb-theme(separator));
+      white-space: nowrap;
+
+      span {
+        font-weight: nb-theme(font-weight-normal);
+      }
+    }
+  }
+
+  @include nb-for-theme(corporate) {
+    $menu-action-separator-color: #3f4550;
+
+    nb-action {
+      @include nb-ltr(border-left-color, $menu-action-separator-color);
+      @include nb-rtl(border-right-color, $menu-action-separator-color);
+    }
+
+    .header-container .logo {
+      @include nb-ltr(border, none);
+      @include nb-rtl(border, none);
+    }
+
+    .header-container /deep/ ngx-theme-switcher .dropdown-toggle {
+      color: nb-theme(color-white);
+      background: transparent;
+    }
+  }
+
+  ngx-layout-direction-switcher {
+    margin: 0 1.5rem;
+  }
+
+  ngx-theme-switcher {
+    margin: nb-theme(layout-padding);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-down(xl) {
+    ngx-layout-direction-switcher {
+      display: none;
+    }
+  }
+
+  .toggle-settings /deep/ a {
+    display: block;
+    text-decoration: none;
+    line-height: 1;
+
+    i {
+      color: nb-theme(color-fg-highlight);
+      font-size: 2.25rem;
+      border-radius: 50%;
+      position: relative;
+      animation-name: pulse-light;
+
+      &::after {
+        content: ' ';
+        // hack to be able to set border-radius
+        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+        border-radius: 50%;
+        pointer-events: none;
+
+        position: absolute;
+        top: 52.3%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 13%;
+        height: 13%;
+
+        animation: 3s linear infinite pulse;
+
+        @include nb-for-theme(default) {
+          animation-name: pulse-light;
+        }
+      }
+    }
+  }
+
+  @include keyframes(pulse) {
+    0% {
+      box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
+    }
+    20% {
+      box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
+    }
+    100% {
+      box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
+    }
+  }
+
+  @include keyframes(pulse-light) {
+    0% {
+      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
+    }
+    20% {
+      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
+    }
+    100% {
+      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+
+    nb-action:not(.toggle-settings) {
+      border: none;
+    }
+
+    .control-item {
+      display: none;
+    }
+
+    .toggle-settings {
+      padding: 0;
+    }
+
+    ngx-layout-direction-switcher {
+      display: none;
+    }
+
+    ngx-theme-switcher {
+      margin: 0 0.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-user /deep/ .user-name {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+
+    .header-container {
+      .logo {
+        font-size: 1.25rem;
+      }
+    }
+
+    .toggle-settings {
+      display: none;
+    }
+
+    ngx-theme-switcher {
+      display: none;
+    }
+
+    nb-action:not(.toggle-settings) {
+      padding: 0;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .right /deep/ {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { NbMenuService, NbSidebarService } from '@nebular/theme';
+import { UserData } from '../../../@core/data/users';
+import { AnalyticsService } from '../../../@core/utils';
+import { LayoutService } from '../../../@core/utils';
+
+@Component({
+  selector: 'ngx-header',
+  styleUrls: ['./header.component.scss'],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit {
+
+  @Input() position = 'normal';
+
+  user: any;
+
+  userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
+
+  constructor(private sidebarService: NbSidebarService,
+              private menuService: NbMenuService,
+              private userService: UserData,
+              private analyticsService: AnalyticsService,
+              private layoutService: LayoutService) {
+  }
+
+  ngOnInit() {
+    this.userService.getUsers()
+      .subscribe((users: any) => this.user = users.nick);
+  }
+
+  toggleSidebar(): boolean {
+    this.sidebarService.toggle(true, 'menu-sidebar');
+    this.layoutService.changeLayoutSize();
+
+    return false;
+  }
+
+  goToHome() {
+    this.menuService.navigateHome();
+  }
+
+  startSearch() {
+    this.analyticsService.trackEvent('startSearch');
+  }
+}

src/app/@theme/components/index.ts

@@ -0,0 +1,10 @@
+export * from './header/header.component';
+export * from './footer/footer.component';
+export * from './search-input/search-input.component';
+export * from './tiny-mce/tiny-mce.component';
+export * from './theme-settings/theme-settings.component';
+export * from './theme-switcher/theme-switcher.component';
+export * from './switcher/switcher.component';
+export * from './layout-direction-switcher/layout-direction-switcher.component';
+export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
+export * from './toggle-settings-button/toggle-settings-button.component';

src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, Input } from '@angular/core';
+import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'ngx-layout-direction-switcher',
+  template: `
+    <ngx-switcher
+      [firstValue]="directions.RTL"
+      [secondValue]="directions.LTR"
+      [firstValueLabel]="'RTL'"
+      [secondValueLabel]="'LTR'"
+      [value]="currentDirection"
+      (valueChange)="toggleDirection($event)"
+      [vertical]="vertical"
+    >
+    </ngx-switcher>
+  `,
+})
+export class LayoutDirectionSwitcherComponent implements OnDestroy {
+  directions = NbLayoutDirection;
+  currentDirection: NbLayoutDirection;
+  alive = true;
+
+  @Input() vertical: boolean = false;
+
+  constructor(private directionService: NbLayoutDirectionService) {
+    this.currentDirection = this.directionService.getDirection();
+
+    this.directionService.onDirectionChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(newDirection => this.currentDirection = newDirection);
+  }
+
+  toggleDirection(newDirection) {
+    this.directionService.setDirection(newDirection);
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

src/app/@theme/components/search-input/search-input.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &::before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+
+  /deep/ search-input {
+    input {
+      background: transparent;
+    }
+  }
+}

src/app/@theme/components/search-input/search-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ngx-search-input',
+  styleUrls: ['./search-input.component.scss'],
+  template: `
+    <i class="control-icon ion ion-ios-search"
+       (click)="showInput()"></i>
+    <input placeholder="Type your search request here..."
+           #input
+           [class.hidden]="!isInputShown"
+           (blur)="hideInput()"
+           (input)="onInput($event)">
+  `,
+})
+export class SearchInputComponent {
+  @ViewChild('input') input: ElementRef;
+
+  @Output() search: EventEmitter<string> = new EventEmitter<string>();
+
+  isInputShown = false;
+
+  showInput() {
+    this.isInputShown = true;
+    this.input.nativeElement.focus();
+  }
+
+  hideInput() {
+    this.isInputShown = false;
+  }
+
+  onInput(val: string) {
+    this.search.emit(val);
+  }
+}

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

@@ -0,0 +1,112 @@
+@import '../../styles/themes';
+@import '~@nebular/bootstrap/styles/hero-buttons';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  .switch-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+
+    &.vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .first,
+      .second {
+        padding: 0;
+      }
+
+      .switch {
+        margin-top: 0.5em;
+      }
+    }
+
+    & > span {
+      font-size: 1.125rem;
+      font-weight: nb-theme(font-weight-bold);
+      transition: opacity 0.3s ease;
+      color: nb-theme(color-fg);
+
+      &.first {
+        @include nb-ltr(padding-right, 10px);
+        @include nb-rtl(padding-left, 10px);
+      }
+
+      &.second {
+        @include nb-ltr(padding-left, 10px);
+        @include nb-rtl(padding-right, 10px);
+      }
+
+      &.active {
+        color: nb-theme(color-fg-text);
+      }
+
+      @include nb-for-theme(cosmic) {
+        color: nb-theme(color-fg);
+
+        &.active {
+          color: nb-theme(color-white);
+        }
+      }
+
+      &:active {
+        opacity: 0.78;
+      }
+    }
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 3rem;
+    height: 1.5rem;
+    margin: 0;
+
+    input {
+      display: none;
+
+      &:checked + .slider::before {
+        @include nb-ltr(transform, translateX(1.5rem));
+        @include nb-rtl(transform, translateX(-1.5rem));
+      }
+    }
+
+    .slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 1.75rem;
+      background-color: nb-theme(layout-bg);
+    }
+
+    .slider::before {
+      position: absolute;
+      content: '';
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 50%;
+      background-color: nb-theme(color-success);
+      transition: 0.2s;
+
+      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
+
+      @include nb-for-theme(cosmic) {
+        @include btn-hero-primary-gradient();
+      }
+
+      @include nb-for-theme(corporate) {
+        background-color: nb-theme(color-primary);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    align-items: flex-end;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ngx-switcher',
+  styleUrls: ['./switcher.component.scss'],
+  template: `
+    <label class="switch-label" [class.vertical]="vertical">
+      <span class="first" [class.active]="vertical || isFirstValue()">
+        {{vertical ? currentValueLabel() : firstValueLabel}}
+      </span>
+
+      <div class="switch">
+        <input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
+        <span class="slider"></span>
+      </div>
+
+      <span
+        *ngIf="!vertical"
+        class="second"
+        [class.active]="isSecondValue()"
+      >
+          {{secondValueLabel}}
+      </span>
+    </label>
+  `,
+})
+export class SwitcherComponent {
+  @Input() firstValue: any;
+  @Input() secondValue: any;
+
+  @Input() firstValueLabel: string;
+  @Input() secondValueLabel: string;
+
+  @Input() vertical: boolean;
+
+  @Input() value: any;
+  @Output() valueChange = new EventEmitter<any>();
+
+  isFirstValue() {
+    return this.value === this.firstValue;
+  }
+
+  isSecondValue() {
+    return this.value === this.secondValue;
+  }
+
+  currentValueLabel() {
+    return this.isFirstValue()
+      ? this.firstValueLabel
+      : this.secondValueLabel;
+  }
+
+  changeValue() {
+    this.value = this.isFirstValue()
+      ? this.secondValue
+      : this.firstValue;
+
+    this.valueChange.emit(this.value);
+  }
+}

src/app/@theme/components/theme-settings/theme-settings.component.scss

@@ -0,0 +1,91 @@
+@import '../../styles/themes';
+
+@include nb-install-component() {
+  h6 {
+    margin-bottom: 0.875rem;
+    text-align: center;
+    font-weight: bold;
+    text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
+  }
+
+  .settings-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 0 0 2.575rem;
+
+    a {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      align-items: center;
+      width: 4.15rem;
+      height: 4.15rem;
+      border-radius: nb-theme(radius);
+      background-color: nb-theme(color-white);
+      border: 2px solid transparent;
+      margin: 0.875rem;
+      text-decoration: none;
+      font-size: 2.25rem;
+      color: nb-theme(color-fg);
+
+      &.selected {
+        color: nb-theme(color-success);
+        border-color: nb-theme(color-success);
+      }
+
+      @include nb-for-theme(cosmic) {
+        box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
+        background-color: #3e367e;
+        border: 2px solid #3e367e;
+        &.selected {
+          color: nb-theme(link-color);
+        }
+      }
+    }
+  }
+
+  .settings {
+    margin-bottom: 1em;
+  }
+
+  .switcher {
+    margin-bottom: 1rem;
+    font-size: 1.524rem;
+    width: 12rem;
+
+    /deep/ ngx-switcher {
+      .switch-label span {
+        font-size: 1em;
+        font-weight: normal;
+        &.first, &.second {
+          font-size: 1rem;
+        }
+      }
+
+      .switch {
+        height: 1.5em;
+        width: 3em;
+
+        .slider::before {
+          height: 1.5em;
+          width: 1.5em;
+        }
+
+        input:checked + .slider::before {
+          @include nb-ltr(transform, translateX(1.5em)!important);
+          @include nb-rtl(transform, translateX(-1.5em)!important);
+        }
+      }
+
+      @include nb-for-theme(cosmic) {
+        .switch .slider {
+          background-color: nb-theme(color-bg);
+        }
+      }
+    }
+  }
+}

src/app/@theme/components/theme-settings/theme-settings.component.ts

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+import { StateService } from '../../../@core/utils';
+
+@Component({
+  selector: 'ngx-theme-settings',
+  styleUrls: ['./theme-settings.component.scss'],
+  template: `
+    <h6>LAYOUTS</h6>
+    <div class="settings-row">
+      <a *ngFor="let layout of layouts"
+         href="#"
+         [class.selected]="layout.selected"
+         [attr.title]="layout.name"
+         (click)="layoutSelect(layout)">
+        <i [attr.class]="layout.icon"></i>
+      </a>
+    </div>
+    <h6>SIDEBAR</h6>
+    <div class="settings-row">
+      <a *ngFor="let sidebar of sidebars"
+         href="#"
+         [class.selected]="sidebar.selected"
+         [attr.title]="sidebar.name"
+         (click)="sidebarSelect(sidebar)">
+        <i [attr.class]="sidebar.icon"></i>
+      </a>
+    </div>
+    <div class="settings-row">
+      <div class="switcher">
+        <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
+      </div>
+    </div>
+  `,
+})
+export class ThemeSettingsComponent {
+
+  layouts = [];
+  sidebars = [];
+
+  constructor(protected stateService: StateService) {
+    this.stateService.getLayoutStates()
+      .subscribe((layouts: any[]) => this.layouts = layouts);
+
+    this.stateService.getSidebarStates()
+      .subscribe((sidebars: any[]) => this.sidebars = sidebars);
+  }
+
+  layoutSelect(layout: any): boolean {
+    this.layouts = this.layouts.map((l: any) => {
+      l.selected = false;
+      return l;
+    });
+
+    layout.selected = true;
+    this.stateService.setLayoutState(layout);
+    return false;
+  }
+
+  sidebarSelect(sidebars: any): boolean {
+    this.sidebars = this.sidebars.map((s: any) => {
+      s.selected = false;
+      return s;
+    });
+
+    sidebars.selected = true;
+    this.stateService.setSidebarState(sidebars);
+    return false;
+  }
+}

src/app/@theme/components/theme-switcher/theme-switcher.component.html

@@ -0,0 +1,7 @@
+<div class="themes-switcher"
+     [nbPopover]="switcherListComponent"
+     nbPopoverPlacement="bottom"
+     [nbPopoverContext]="{popover: popover}">
+  <i class="nb-drops"></i>
+  <span *ngIf="showTitle">Themes</span>
+</div>

src/app/@theme/components/theme-switcher/theme-switcher.component.scss

@@ -0,0 +1,50 @@
+@import '../../styles/themes';
+@import '~@nebular/theme/styles/core/mixins';
+@import '~@nebular/theme/styles/core/functions';
+
+@include nb-install-component() {
+  .themes-switcher {
+    display: flex;
+    font-size: 1.25rem;
+    padding: 0.8rem 1.25rem;
+    align-items: center;
+    cursor: pointer;
+    background-color: nb-theme(switcher-background);
+    border-radius: nb-theme(radius);
+
+    &:hover {
+      $color: nb-theme(switcher-background);
+      $percentage: nb-theme(switcher-background-percentage);
+
+      background-color: tint($color, $percentage);
+    }
+
+    span {
+      margin: 0 1.2rem;
+    }
+
+    i {
+      color: nb-theme(color-primary);
+      font-size: 1.8rem;
+      border-radius: 50%;
+      position: relative;
+
+      @include nb-for-theme(default) {
+        color: nb-theme(color-success);
+      }
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(color-fg-highlight);
+      }
+
+      &::before {
+        // Hack for IE11, IE11 should not set background
+        background: nb-theme(drops-icon-line-gadient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+
+

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { NbPopoverDirective } from '@nebular/theme';
+import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
+
+import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
+
+@Component({
+  selector: 'ngx-theme-switcher',
+  templateUrl: './theme-switcher.component.html',
+  styleUrls: ['./theme-switcher.component.scss'],
+})
+export class ThemeSwitcherComponent {
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+
+  @Input() showTitle: boolean = true;
+
+  switcherListComponent = ThemeSwitcherListComponent;
+  theme: NbJSThemeOptions;
+}

src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss

@@ -0,0 +1,76 @@
+@import '../../../styles/themes';
+@import '~@nebular/theme/styles/core/mixins';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+$icon-color-default: #0bbb79;
+$icon-color-cosmic: #7958fa;
+$icon-color-corporate: #a7a2be;
+
+$icon-top-color-default: #01dbb5;
+$icon-top-color-cosmic: #a258fe;
+$icon-top-color-corporate: #e9e8eb;
+
+@include nb-install-component() {
+  /deep/ .themes-switcher-list {
+    padding: 1rem 2rem 1.25rem 0.5rem;
+    margin: 0;
+
+    @include nb-ltr(text-align, start);
+    @include nb-rtl(text-align, end);
+
+    .themes-switcher-item {
+      list-style: none;
+      cursor: pointer;
+
+      &:hover span {
+        opacity: 0.5;
+      }
+
+      i {
+        font-size: 2rem;
+
+        &.drop-icon-default {
+          color: $icon-color-default;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
+        }
+
+        &.drop-icon-cosmic {
+          color: $icon-color-cosmic;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
+        }
+
+        &.drop-icon-corporate {
+          color: $icon-color-corporate;
+
+          // Hack for IE11, IE11 should not set background
+          background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
+        }
+
+        &.drop-icon-default,
+        &.drop-icon-cosmic,
+        &.drop-icon-corporate {
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+
+      span {
+        font-weight: 300;
+        vertical-align: super;
+        padding-left: 1rem;
+        color: nb-theme(color-fg-heading);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    /deep/ .themes-switcher-list {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts

@@ -0,0 +1,51 @@
+import {Component, Input} from '@angular/core';
+import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
+import { AnalyticsService } from '../../../../@core/utils/analytics.service';
+import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
+
+@Component({
+  selector: 'ngx-theme-switcher-list',
+  template: `
+    <ul class="themes-switcher-list">
+      <li class="themes-switcher-item"
+          *ngFor="let theme of themes"
+          (click)="onToggleTheme(theme.key)">
+        <i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
+        <span>{{ theme.title }}</span>
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./theme-switcher-list.component.scss'],
+})
+export class ThemeSwitcherListComponent {
+
+  @Input() popover: NbPopoverDirective;
+
+  theme: NbJSThemeOptions;
+
+  themes = [
+    {
+      title: 'Light',
+      key: 'default',
+    },
+    {
+      title: 'Cosmic',
+      key: 'cosmic',
+    },
+    {
+      title: 'Corporate',
+      key: 'corporate',
+    },
+  ];
+
+  constructor(
+    private themeService: NbThemeService,
+    private analyticsService: AnalyticsService,
+  ) {}
+
+  onToggleTheme(themeKey: string) {
+    this.themeService.changeTheme(themeKey);
+    this.analyticsService.trackEvent('switchTheme');
+    this.popover.hide();
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tiny-mce',
+  template: '',
+})
+export class TinyMCEComponent implements OnDestroy, AfterViewInit {
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor(private host: ElementRef) { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      target: this.host.nativeElement,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: 'assets/skins/lightgray',
+      setup: editor => {
+        this.editor = editor;
+        editor.on('keyup', () => {
+          this.editorKeyup.emit(editor.getContent());
+        });
+      },
+      height: '320',
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+}

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss

@@ -0,0 +1,118 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '~@nebular/bootstrap/styles/hero-buttons';
+
+@include nb-install-component() {
+  .toggle-settings {
+    position: fixed;
+    top: 50%;
+    height: 3rem;
+    width: 3rem;
+    padding: 0;
+    text-align: center;
+    border: none;
+    transition: transform 0.3s ease, background-image 0.3s ease;
+    transform: translate(0, -50%);
+    z-index: 998;
+
+    @include nb-ltr() {
+      border-top-left-radius: nb-theme(radius);
+      border-bottom-left-radius: nb-theme(radius);
+      right: 0;
+
+      &.sidebar-end {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        right: auto;
+        border-top-right-radius: nb-theme(radius);
+        border-bottom-right-radius: nb-theme(radius);
+        left: 0;
+      }
+    }
+
+    @include nb-rtl() {
+      border-top-right-radius: nb-theme(radius);
+      border-bottom-right-radius: nb-theme(radius);
+      left: 0;
+
+      &.sidebar-end {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        left: auto;
+        border-top-left-radius: nb-theme(radius);
+        border-bottom-left-radius: nb-theme(radius);
+        right: 0;
+      }
+    }
+
+    &.expanded {
+      @include nb-ltr(transform, translate(-19rem, -50%));
+      @include nb-rtl(transform, translate(19rem, -50%));
+
+      &.sidebar-end {
+        @include nb-rtl(transform, translate(-19rem, -50%));
+        @include nb-ltr(transform, translate(19rem, -50%));
+      }
+    }
+
+    @include nb-for-theme(cosmic) {
+      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
+      @include btn-hero-success-gradient();
+    }
+
+    @include nb-for-theme(default) {
+      border: 1px solid #d5dbe0;
+      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+      background-color: #ffffff;
+    }
+
+    @include nb-for-theme(corporate) {
+      border: 1px solid #d5dbe0;
+      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+      color: nb-theme(color-danger);
+      background-color: #ffffff;
+    }
+
+    i {
+      font-size: 2.75rem;
+      color: #ffffff;
+      display: block;
+
+
+      @include nb-for-theme(default) {
+        color: nb-theme(color-danger);
+      }
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(color-warning);
+      }
+    }
+
+    &:not(.was-expanded) i {
+      animation-name: gear-pulse;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+    }
+
+    @keyframes gear-pulse {
+      from {
+        transform: scale3d(1, 1, 1);
+      }
+
+      50% {
+        transform: scale3d(1.2, 1.2, 1.2);
+      }
+
+      to {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    .toggle-settings {
+      display: none;
+    }
+  }
+}

src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { NbSidebarService } from '@nebular/theme';
+import { StateService } from '../../../@core/utils';
+
+@Component({
+  selector: 'ngx-toggle-settings-button',
+  styleUrls: ['./toggle-settings-button.component.scss'],
+  template: `
+    <button class="toggle-settings"
+            (click)="toggleSettings()"
+            [class.expanded]="expanded"
+            [class.sidebar-end]="sidebarEnd"
+            [class.was-expanded]="wasExpanded"
+    >
+      <i class="nb-gear"></i>
+    </button>
+  `,
+})
+export class ToggleSettingsButtonComponent {
+
+  sidebarEnd = false;
+  expanded = false;
+  wasExpanded = false;
+
+  constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
+    this.stateService.onSidebarState()
+      .subscribe(({id}) => {
+        this.sidebarEnd = id === 'end';
+      });
+  }
+
+  toggleSettings() {
+    this.sidebarService.toggle(false, 'settings-sidebar');
+    this.expanded = !this.expanded;
+    this.wasExpanded = true;
+  }
+}

src/app/@theme/layouts/index.ts

@@ -0,0 +1,4 @@
+export * from './one-column/one-column.layout';
+export * from './two-columns/two-columns.layout';
+export * from './three-columns/three-columns.layout';
+export * from './sample/sample.layout';

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

@@ -0,0 +1,157 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  nb-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nb-sidebar.settings-sidebar {
+    $sidebar-width: 7.5rem;
+
+    transition: width 0.3s ease;
+    width: $sidebar-width;
+    overflow: hidden;
+
+    &.collapsed {
+      width: 0;
+
+      /deep/ .main-container {
+        width: 0;
+
+        .scrollable {
+          width: $sidebar-width;
+          padding: 1.25rem;
+        }
+      }
+    }
+
+    /deep/ .main-container {
+      width: $sidebar-width;
+      background: nb-theme(color-bg);
+      transition: width 0.3s ease;
+      overflow: hidden;
+
+      .scrollable {
+        width: $sidebar-width;
+      }
+
+      @include nb-for-theme(cosmic) {
+        background: nb-theme(layout-bg);
+      }
+    }
+  }
+
+  nb-sidebar.menu-sidebar {
+
+    margin-top: nb-theme(sidebar-header-gap);
+
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
+    /deep/ .main-container {
+      height:
+        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
+      @include nb-ltr(border-top-right-radius, nb-theme(radius));
+      @include nb-rtl(border-top-left-radius, nb-theme(radius));
+
+      @include nb-for-theme(corporate) {
+        border: 1px solid nb-theme(separator);
+        height:
+          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
+    }
+
+    /deep/ nb-sidebar-header {
+      padding-bottom: 0.5rem;
+      text-align: center;
+    }
+
+    background: transparent;
+
+    .main-btn {
+      padding: 0.75rem 2.5rem;
+      margin-top: -2rem;
+      font-weight: bold;
+      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
+
+      @include nb-for-theme(corporate) {
+        border-radius: nb-theme(radius);
+      }
+
+      i {
+        font-size: 2rem;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      }
+      span {
+        @include nb-ltr(padding-left, 0.25rem);
+        @include nb-rtl(padding-right, 0.25rem);
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    &.compacted {
+
+      /deep/ nb-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0.375rem;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .main-content {
+      padding: 0.75rem !important;
+
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-sidebar.menu-sidebar {
+
+      margin-top: 0;
+
+      /deep/ .main-container {
+        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+        @include nb-ltr(border-top-right-radius, 0);
+        @include nb-rtl(border-top-left-radius, 0);
+
+        .scrollable {
+          padding-top: 0;
+        }
+      }
+    }
+
+    .main-btn {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+
+// TODO: move layouts into the framework
+@Component({
+  selector: 'ngx-one-column-layout',
+  styleUrls: ['./one-column.layout.scss'],
+  template: `
+    <nb-layout>
+      <nb-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
+         
+        </nb-sidebar-header>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+    </nb-layout>
+  `,
+})
+export class OneColumnLayoutComponent implements OnDestroy {
+
+  private alive = true;
+
+  currentTheme: string;
+
+  constructor(protected themeService: NbThemeService) {
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.currentTheme = theme.name;
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

src/app/@theme/layouts/sample/sample.layout.scss

@@ -0,0 +1,190 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  nb-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nb-sidebar.settings-sidebar {
+    $sidebar-width: 19rem;
+
+    transition: transform 0.3s ease;
+    width: $sidebar-width;
+    overflow: hidden;
+    @include nb-ltr(transform, translate3d(100%, 0, 0));
+    @include nb-rtl(transform, translate3d(-100%, 0, 0));
+    &.start {
+      @include nb-ltr(transform, translate3d(-100%, 0, 0));
+      @include nb-rtl(transform, translate3d(100%, 0, 0));
+    }
+
+    &.expanded, &.expanded.start {
+      transform: translate3d(0, 0, 0);
+    }
+
+    /deep/ .scrollable {
+      width: $sidebar-width;
+      padding: 3.4rem 0.25rem;
+    }
+
+    /deep/ .main-container {
+      width: $sidebar-width;
+      background: nb-theme(color-bg);
+      transition: transform 0.3s ease;
+      overflow: hidden;
+      position: relative;
+
+      .scrollable {
+        width: $sidebar-width;
+      }
+
+      @include nb-for-theme(cosmic) {
+        background: nb-theme(layout-bg);
+      }
+    }
+  }
+
+  nb-sidebar.menu-sidebar {
+
+    margin-top: nb-theme(sidebar-header-gap);
+
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
+    /deep/ .main-container {
+      height:
+        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
+      @include nb-ltr(border-top-right-radius, nb-theme(radius));
+      @include nb-rtl(border-top-left-radius, nb-theme(radius));
+
+      @include nb-for-theme(corporate) {
+        border: 1px solid nb-theme(separator);
+        height:
+          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
+    }
+
+    /deep/ nb-sidebar-header {
+      padding-bottom: 0.5rem;
+      text-align: center;
+    }
+
+    background: transparent;
+
+    .main-btn {
+      padding: 0.75rem 2.5rem;
+      margin-top: -2rem;
+      font-weight: bold;
+      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
+
+      @include nb-for-theme(corporate) {
+        border-radius: nb-theme(radius);
+      }
+
+      i {
+        font-size: 2rem;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      }
+      span {
+        @include nb-ltr(padding-left, 0.25rem);
+        @include nb-rtl(padding-right, 0.25rem);
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    // /deep/ nb-menu {
+    //   & > .menu-items {
+    //     & > .menu-item:first-child {
+    //       .menu-title {
+    //         &::after {
+    //           content: 'new';
+    //           color: nb-theme(color-white);
+    //           margin-left: 1rem;
+    //           background: nb-theme(color-danger);
+    //           padding: 0 0.5rem;
+    //           border-radius: nb-theme(radius);
+    //           font-size: nb-theme(font-size-sm);
+    //         }
+    //       }
+    //     }
+    //   }
+
+    //   .nb-e-commerce {
+    //     font-size: 2rem;
+    //   }
+    // }
+
+      // & > .menu-items {
+      //   & > .menu-item {
+      //     font-size: 20px;
+      //     margin: 0 15px;
+      //     cursor: pointer;
+      //   }
+      // }
+
+    &.compacted {
+
+      /deep/ nb-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0.375rem;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .main-content {
+      padding: 0.75rem !important;
+
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-sidebar.menu-sidebar {
+
+      margin-top: 0;
+
+      /deep/ .main-container {
+        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+        @include nb-ltr(border-top-right-radius, 0);
+        @include nb-rtl(border-top-left-radius, 0);
+
+        .scrollable {
+          padding-top: 0;
+        }
+      }
+    }
+
+    .main-btn {
+      display: none;
+    }
+  }
+}

src/app/@theme/layouts/sample/sample.layout.ts

@@ -0,0 +1,150 @@
+import { Component, OnDestroy } from '@angular/core';
+import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
+import {
+  NbMediaBreakpoint,
+  NbMediaBreakpointsService,
+  NbMenuItem,
+  NbMenuService,
+  NbSidebarService,
+  NbThemeService,
+} from '@nebular/theme';
+
+import { StateService } from '../../../@core/utils';
+
+// TODO: move layouts into the framework
+@Component({
+  selector: 'ngx-sample-layout',
+  styleUrls: ['./sample.layout.scss'],
+  template: `
+    <nb-layout [center]="layout.id === 'center-column'" windowMode>
+      <nb-layout-header fixed>
+        <ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar"
+                   tag="menu-sidebar"
+                   responsive
+                   [end]="sidebar.id === 'end'">
+        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
+          
+        </nb-sidebar-header>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column class="main-content">
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
+        <nb-menu [items]="subMenu"></nb-menu>
+      </nb-layout-column>
+
+      <nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
+        <nb-menu [items]="subMenu"></nb-menu>
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+
+      <nb-sidebar class="settings-sidebar"
+                   tag="settings-sidebar"
+                   state="collapsed"
+                   fixed
+                   [end]="sidebar.id !== 'end'">
+        <ngx-theme-settings></ngx-theme-settings>
+      </nb-sidebar>
+    </nb-layout>
+    <ngx-toggle-settings-button></ngx-toggle-settings-button>
+  `,
+})
+export class SampleLayoutComponent implements OnDestroy {
+
+  subMenu: NbMenuItem[] = [
+    {
+      title: 'PAGE LEVEL MENU',
+      group: true,
+    },
+    {
+      title: 'Buttons',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/buttons',
+    },
+    {
+      title: 'Grid',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/grid',
+    },
+    {
+      title: 'Icons',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/icons',
+    },
+    {
+      title: 'Modals',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/modals',
+    },
+    {
+      title: 'Typography',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/typography',
+    },
+    {
+      title: 'Animated Searches',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/search-fields',
+    },
+    {
+      title: 'Tabs',
+      icon: 'ion ion-android-radio-button-off',
+      link: '/pages/ui-features/tabs',
+    },
+  ];
+  layout: any = {};
+  sidebar: any = {};
+
+  private alive = true;
+
+  currentTheme: string;
+
+  constructor(protected stateService: StateService,
+              protected menuService: NbMenuService,
+              protected themeService: NbThemeService,
+              protected bpService: NbMediaBreakpointsService,
+              protected sidebarService: NbSidebarService) {
+    this.stateService.onLayoutState()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((layout: string) => this.layout = layout);
+
+    this.stateService.onSidebarState()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((sidebar: string) => {
+        this.sidebar = sidebar;
+      });
+
+    const isBp = this.bpService.getByName('is');
+    this.menuService.onItemSelect()
+      .pipe(
+        takeWhile(() => this.alive),
+        withLatestFrom(this.themeService.onMediaQueryChange()),
+        delay(20),
+      )
+      .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
+
+        if (bpTo.width <= isBp.width) {
+          this.sidebarService.collapse('menu-sidebar');
+        }
+      });
+
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.currentTheme = theme.name;
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

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

@@ -0,0 +1,157 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  nb-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nb-sidebar.settings-sidebar {
+    $sidebar-width: 7.5rem;
+
+    transition: width 0.3s ease;
+    width: $sidebar-width;
+    overflow: hidden;
+
+    &.collapsed {
+      width: 0;
+
+      /deep/ .main-container {
+        width: 0;
+
+        .scrollable {
+          width: $sidebar-width;
+          padding: 1.25rem;
+        }
+      }
+    }
+
+    /deep/ .main-container {
+      width: $sidebar-width;
+      background: nb-theme(color-bg);
+      transition: width 0.3s ease;
+      overflow: hidden;
+
+      .scrollable {
+        width: $sidebar-width;
+      }
+
+      @include nb-for-theme(cosmic) {
+        background: nb-theme(layout-bg);
+      }
+    }
+  }
+
+  nb-sidebar.menu-sidebar {
+
+    margin-top: nb-theme(sidebar-header-gap);
+
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
+    /deep/ .main-container {
+      height:
+        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
+      @include nb-ltr(border-top-right-radius, nb-theme(radius));
+      @include nb-rtl(border-top-left-radius, nb-theme(radius));
+
+      @include nb-for-theme(corporate) {
+        border: 1px solid nb-theme(separator);
+        height:
+          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
+    }
+
+    /deep/ nb-sidebar-header {
+      padding-bottom: 0.5rem;
+      text-align: center;
+    }
+
+    background: transparent;
+
+    .main-btn {
+      padding: 0.75rem 2.5rem;
+      margin-top: -2rem;
+      font-weight: bold;
+      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
+
+      @include nb-for-theme(corporate) {
+        border-radius: nb-theme(radius);
+      }
+
+      i {
+        font-size: 2rem;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      }
+      span {
+        @include nb-ltr(padding-left, 0.25rem);
+        @include nb-rtl(padding-right, 0.25rem);
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    &.compacted {
+
+      /deep/ nb-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0.375rem;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .main-content {
+      padding: 0.75rem !important;
+
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-sidebar.menu-sidebar {
+
+      margin-top: 0;
+
+      /deep/ .main-container {
+        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+        @include nb-ltr(border-top-right-radius, 0);
+        @include nb-rtl(border-top-left-radius, 0);
+
+        .scrollable {
+          padding-top: 0;
+        }
+      }
+    }
+
+    .main-btn {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+
+// TODO: move layouts into the framework
+@Component({
+  selector: 'ngx-three-columns-layout',
+  styleUrls: ['./three-columns.layout.scss'],
+  template: `
+    <nb-layout>
+      <nb-layout-header fixed>
+        <ngx-header></ngx-header>
+      </nb-layout-header>
+
+      <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
+        <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
+         
+        </nb-sidebar-header>
+        <ng-content select="nb-menu"></ng-content>
+      </nb-sidebar>
+
+      <nb-layout-column class="small">
+      </nb-layout-column>
+
+      <nb-layout-column>
+        <ng-content select="router-outlet"></ng-content>
+      </nb-layout-column>
+
+      <nb-layout-column class="small">
+      </nb-layout-column>
+
+      <nb-layout-footer fixed>
+        <ngx-footer></ngx-footer>
+      </nb-layout-footer>
+    </nb-layout>
+  `,
+})
+export class ThreeColumnsLayoutComponent implements OnDestroy {
+
+  private alive = true;
+
+  currentTheme: string;
+
+  constructor(protected themeService: NbThemeService) {
+    this.themeService.getJsTheme()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(theme => {
+        this.currentTheme = theme.name;
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}

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

@@ -0,0 +1,158 @@
+@import '../../styles/themes';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  nb-layout-column.small {
+    flex: 0.15 !important;
+  }
+
+  nb-sidebar.settings-sidebar {
+    $sidebar-width: 7.5rem;
+
+    transition: width 0.3s ease;
+    width: $sidebar-width;
+    overflow: hidden;
+
+    &.collapsed {
+      width: 0;
+
+      /deep/ .main-container {
+        width: 0;
+
+        .scrollable {
+          width: $sidebar-width;
+          padding: 1.25rem;
+        }
+      }
+    }
+
+    /deep/ .main-container {
+      width: $sidebar-width;
+      background: nb-theme(color-bg);
+      transition: width 0.3s ease;
+      overflow: hidden;
+
+      .scrollable {
+        width: $sidebar-width;
+      }
+
+      @include nb-for-theme(cosmic) {
+        background: nb-theme(layout-bg);
+      }
+    }
+  }
+
+  nb-sidebar.menu-sidebar {
+
+    margin-top: nb-theme(sidebar-header-gap);
+
+    @include nb-for-theme(corporate) {
+      margin-top: 0;
+    }
+
+    /deep/ .main-container {
+      height:
+        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
+      @include nb-ltr(border-top-right-radius, nb-theme(radius));
+      @include nb-rtl(border-top-left-radius, nb-theme(radius));
+
+      @include nb-for-theme(corporate) {
+        border: 1px solid nb-theme(separator);
+        height:
+          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+
+      }
+    }
+
+    /deep/ .scrollable {
+      @include nb-for-theme(corporate) {
+        padding-top: 0;
+
+        .menu-item:first-child {
+          border-top: none;
+        }
+      }
+    }
+
+    /deep/ nb-sidebar-header {
+      padding-bottom: 0.5rem;
+      text-align: center;
+    }
+
+    background: transparent;
+
+    .main-btn {
+      padding: 0.75rem 2.5rem;
+      margin-top: -2rem;
+      font-weight: bold;
+      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
+
+      @include nb-for-theme(corporate) {
+        border-radius: nb-theme(radius);
+      }
+
+      i {
+        font-size: 2rem;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      }
+      span {
+        @include nb-ltr(padding-left, 0.25rem);
+        @include nb-rtl(padding-right, 0.25rem);
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    &.compacted {
+
+      /deep/ nb-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0.375rem;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .main-content {
+      padding: 0.75rem !important;
+
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-sidebar.menu-sidebar {
+
+      margin-top: 0;
+
+      /deep/ .main-container {
+        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
+        @include nb-ltr(border-top-right-radius, 0);
+        @include nb-rtl(border-top-left-radius, 0);
+
+        .scrollable {
+          padding-top: 0;
+        }
+      }
+    }
+
+    .main-btn {
+      display: none;
+    }
+  }
+}