├── apps ├── .gitkeep ├── api │ ├── src │ │ ├── app │ │ │ ├── .gitkeep │ │ │ ├── app.service.ts │ │ │ ├── app.module.ts │ │ │ ├── app.controller.ts │ │ │ ├── app.service.spec.ts │ │ │ └── app.controller.spec.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.ts │ │ │ └── environment.prod.ts │ │ └── main.ts │ ├── tsconfig.json │ ├── tsconfig.spec.json │ ├── tsconfig.app.json │ ├── .eslintrc.json │ └── jest.config.js ├── angular-nest-nx │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── @core │ │ │ │ ├── data │ │ │ │ │ ├── .gitkeep │ │ │ │ │ ├── README.md │ │ │ │ │ └── users.ts │ │ │ │ ├── utils │ │ │ │ │ ├── .gitkeep │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── analytics.service.ts │ │ │ │ │ └── seo.service.ts │ │ │ │ ├── mock │ │ │ │ │ ├── README.md │ │ │ │ │ ├── mock-data.module.ts │ │ │ │ │ └── users.service.ts │ │ │ │ ├── module-import-guard.ts │ │ │ │ └── core.module.ts │ │ │ ├── @theme │ │ │ │ ├── pipes │ │ │ │ │ ├── .gitkeep │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── round.pipe.ts │ │ │ │ │ ├── number-with-commas.pipe.ts │ │ │ │ │ ├── capitalize.pipe.ts │ │ │ │ │ ├── plural.pipe.ts │ │ │ │ │ └── timing.pipe.ts │ │ │ │ ├── directives │ │ │ │ │ └── .gitkeep │ │ │ │ ├── layouts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── one-column │ │ │ │ │ │ ├── one-column.layout.scss │ │ │ │ │ │ └── one-column.layout.ts │ │ │ │ │ ├── two-columns │ │ │ │ │ │ ├── two-columns.layout.scss │ │ │ │ │ │ └── two-columns.layout.ts │ │ │ │ │ └── three-columns │ │ │ │ │ │ ├── three-columns.layout.scss │ │ │ │ │ │ └── three-columns.layout.ts │ │ │ │ ├── styles │ │ │ │ │ ├── _layout.scss │ │ │ │ │ ├── _overrides.scss │ │ │ │ │ ├── pace.theme.scss │ │ │ │ │ ├── styles.scss │ │ │ │ │ ├── themes.scss │ │ │ │ │ ├── theme.corporate.ts │ │ │ │ │ ├── theme.cosmic.ts │ │ │ │ │ ├── theme.dark.ts │ │ │ │ │ └── theme.default.ts │ │ │ │ ├── components │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── search-input │ │ │ │ │ │ ├── search-input.component.scss │ │ │ │ │ │ └── search-input.component.ts │ │ │ │ │ ├── footer │ │ │ │ │ │ ├── footer.component.scss │ │ │ │ │ │ └── footer.component.ts │ │ │ │ │ ├── header │ │ │ │ │ │ ├── header.component.html │ │ │ │ │ │ ├── header.component.scss │ │ │ │ │ │ └── header.component.ts │ │ │ │ │ ├── layout-direction-switcher │ │ │ │ │ │ └── layout-direction-switcher.component.ts │ │ │ │ │ └── switcher │ │ │ │ │ │ ├── switcher.component.ts │ │ │ │ │ │ └── switcher.component.scss │ │ │ │ └── theme.module.ts │ │ │ ├── pages │ │ │ │ ├── maps │ │ │ │ │ ├── search-map │ │ │ │ │ │ └── entity │ │ │ │ │ │ │ └── position.model.ts │ │ │ │ │ └── gmaps │ │ │ │ │ │ └── gmaps.component.html │ │ │ │ ├── dashboard │ │ │ │ │ ├── dashboard.component.html │ │ │ │ │ ├── dashboard.component.ts │ │ │ │ │ └── dashboard.module.ts │ │ │ │ ├── pages.component.scss │ │ │ │ ├── pages.component.ts │ │ │ │ ├── pages.module.ts │ │ │ │ ├── pages-routing.module.ts │ │ │ │ └── pages-menu.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── app-routing.module.ts │ │ ├── test-setup.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── styles.scss │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ └── polyfills.ts │ ├── proxy.conf.json │ ├── tsconfig.editor.json │ ├── tsconfig.spec.json │ ├── tsconfig.app.json │ ├── .browserslistrc │ ├── tsconfig.json │ ├── jest.config.js │ └── .eslintrc.json └── angular-nest-nx-e2e │ ├── src │ ├── support │ │ ├── app.po.ts │ │ ├── index.ts │ │ └── commands.ts │ ├── fixtures │ │ └── example.json │ └── integration │ │ └── app.spec.ts │ ├── .eslintrc.json │ ├── cypress.json │ └── tsconfig.json ├── libs ├── .gitkeep └── api-interfaces │ ├── src │ ├── index.ts │ └── lib │ │ └── api-interfaces.ts │ ├── .babelrc │ ├── README.md │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── .eslintrc.json ├── tools ├── generators │ └── .gitkeep └── tsconfig.tools.json ├── .prettierrc ├── .prettierignore ├── jest.preset.js ├── jest.config.js ├── .vscode └── extensions.json ├── .editorconfig ├── sonar-project.properties ├── tsconfig.base.json ├── .gitignore ├── .eslintrc.json ├── LICENSE ├── nx.json ├── decorate-angular-cli.js ├── README.md ├── package.json ├── CODE-OF-CONDUCT.md └── angular.json /apps/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /libs/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/api/src/app/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/api/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tools/generators/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/data/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/utils/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/directives/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /libs/api-interfaces/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/api-interfaces'; 2 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/data/README.md: -------------------------------------------------------------------------------- 1 | Application-wise data providers. 2 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/mock/README.md: -------------------------------------------------------------------------------- 1 | Application-wise data providers. 2 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/src/support/app.po.ts: -------------------------------------------------------------------------------- 1 | export const getGreeting = () => cy.get('h1'); 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage 5 | -------------------------------------------------------------------------------- /apps/api/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false, 3 | }; 4 | -------------------------------------------------------------------------------- /jest.preset.js: -------------------------------------------------------------------------------- 1 | const nxPreset = require('@nrwl/jest/preset'); 2 | 3 | module.exports = { ...nxPreset }; 4 | -------------------------------------------------------------------------------- /libs/api-interfaces/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]] 3 | } 4 | -------------------------------------------------------------------------------- /libs/api-interfaces/src/lib/api-interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface Message { 2 | message: string; 3 | } 4 | -------------------------------------------------------------------------------- /apps/api/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /libs/api-interfaces/README.md: -------------------------------------------------------------------------------- 1 | # api-interfaces 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wlucha/angular-nest-nx/HEAD/apps/angular-nest-nx/src/favicon.ico -------------------------------------------------------------------------------- /apps/angular-nest-nx/proxy.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api": { 3 | "target": "http://localhost:3000", 4 | "secure": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const { getJestProjects } = require('@nrwl/jest'); 2 | 3 | module.exports = { 4 | projects: getJestProjects(), 5 | }; 6 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/src/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io" 4 | } 5 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { AnalyticsService } from './analytics.service'; 2 | export { SeoService } from './seo.service'; 3 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "compilerOptions": { 5 | "types": ["jest", "node"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/maps/search-map/entity/position.model.ts: -------------------------------------------------------------------------------- 1 | export class PositionModel { 2 | constructor( 3 | public lat = 53.9, 4 | public lng = 27.5667, 5 | ) {} 6 | } 7 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/dashboard/dashboard.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Hello from ngx-admin sandbox project. 4 | 5 |
6 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from './one-column/one-column.layout'; 2 | export * from './two-columns/two-columns.layout'; 3 | export * from './three-columns/three-columns.layout'; 4 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/_layout.scss: -------------------------------------------------------------------------------- 1 | @mixin ngx-layout() { 2 | @include media-breakpoint-down(is) { 3 | .row { 4 | margin-left: -10px; 5 | margin-right: -10px; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /libs/api-interfaces/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/index.ts: -------------------------------------------------------------------------------- 1 | export * from './capitalize.pipe'; 2 | export * from './plural.pipe'; 3 | export * from './round.pipe'; 4 | export * from './timing.pipe'; 5 | export * from './number-with-commas.pipe'; 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "angular.ng-template", 4 | "nrwl.angular-console", 5 | "esbenp.prettier-vscode", 6 | "firsttris.vscode-jest-runner", 7 | "dbaeumer.vscode-eslint" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-dashboard', 5 | templateUrl: './dashboard.component.html', 6 | }) 7 | export class DashboardComponent { 8 | } 9 | -------------------------------------------------------------------------------- /apps/api/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /apps/api/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /libs/api-interfaces/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "types": [] 7 | }, 8 | "include": ["**/*.ts"], 9 | "exclude": ["**/*.spec.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/module-import-guard.ts: -------------------------------------------------------------------------------- 1 | export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { 2 | if (parentModule) { 3 | throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /apps/api/src/app/app.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@nestjs/common'; 2 | import { Message } from '@angular-nest-nx/api-interfaces'; 3 | 4 | @Injectable() 5 | export class AppService { 6 | getData(): Message { 7 | return { message: 'Welcome to api!' }; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/round.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxRound' }) 4 | export class RoundPipe implements PipeTransform { 5 | 6 | transform(input: number): number { 7 | return Math.round(input); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/_overrides.scss: -------------------------------------------------------------------------------- 1 | @import './themes'; 2 | 3 | @mixin nb-overrides() { 4 | nb-select.size-medium button { 5 | padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important; 6 | 7 | nb-icon { 8 | right: 0.41rem !important; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /apps/api/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { Module } from '@nestjs/common'; 2 | 3 | import { AppController } from './app.controller'; 4 | import { AppService } from './app.service'; 5 | 6 | @Module({ 7 | imports: [], 8 | controllers: [AppController], 9 | providers: [AppService], 10 | }) 11 | export class AppModule {} 12 | -------------------------------------------------------------------------------- /tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc/tools", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": ["node"], 9 | "importHelpers": false 10 | }, 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './header/header.component'; 2 | export * from './footer/footer.component'; 3 | export * from './search-input/search-input.component'; 4 | export * from './switcher/switcher.component'; 5 | export * from './layout-direction-switcher/layout-direction-switcher.component'; 6 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/maps/gmaps/gmaps.component.html: -------------------------------------------------------------------------------- 1 | 2 | Google Maps 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/number-with-commas.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxNumberWithCommas' }) 4 | export class NumberWithCommasPipe implements PipeTransform { 5 | 6 | transform(input: number): string { 7 | return new Intl.NumberFormat().format(input); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/api/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["node"], 7 | "emitDecoratorMetadata": true, 8 | "target": "es2015" 9 | }, 10 | "exclude": ["**/*.spec.ts", "**/*.test.ts"], 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/one-column/one-column.layout.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .menu-sidebar ::ng-deep .scrollable { 7 | padding-top: nb-theme(layout-padding-top); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/two-columns/two-columns.layout.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .menu-sidebar ::ng-deep .scrollable { 7 | padding-top: nb-theme(layout-padding-top); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/three-columns/three-columns.layout.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .menu-sidebar ::ng-deep .scrollable { 7 | padding-top: nb-theme(layout-padding-top); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [], 6 | "target": "ES2017" 7 | }, 8 | "files": ["src/main.ts", "src/polyfills.ts"], 9 | "include": ["src/**/*.d.ts", "../node_modules/@nebular/**/*.ts"], 10 | "exclude": ["**/*.test.ts", "**/*.spec.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/pages.component.scss: -------------------------------------------------------------------------------- 1 | @import '../@theme/styles/themes'; 2 | 3 | @include nb-install-component() { 4 | ::ng-deep router-outlet + * { 5 | display: block; 6 | animation: fade 1s; 7 | 8 | @keyframes fade { 9 | from { 10 | opacity: 0; 11 | } 12 | 13 | to { 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.projectKey=wlucha_angular-nest-nx 2 | sonar.projectName=Angular NestJS NX 3 | sonar.projectVersion=1.0 4 | 5 | sonar.sourceEncoding=UTF-8 6 | 7 | sonar.sources=src/angular,src/nest 8 | sonar.exclusions=src/app/*.module.ts,**/documentation/** 9 | 10 | sonar.tests=src/apps 11 | sonar.test.inclusions=**/*.spec.ts 12 | sonar.typescript.lcov.reportPaths=coverage/lcov.info -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/capitalize.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxCapitalize' }) 4 | export class CapitalizePipe implements PipeTransform { 5 | 6 | transform(input: string): string { 7 | return input && input.length 8 | ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase()) 9 | : input; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /apps/api/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /libs/api-interfaces/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /apps/api/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'api', 3 | preset: '../../jest.preset.js', 4 | globals: { 5 | 'ts-jest': { 6 | tsconfig: '/tsconfig.spec.json', 7 | }, 8 | }, 9 | testEnvironment: 'node', 10 | transform: { 11 | '^.+\\.[tj]s$': 'ts-jest', 12 | }, 13 | moduleFileExtensions: ['ts', 'js', 'html'], 14 | coverageDirectory: '../../coverage/apps/api', 15 | }; 16 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularNestNx 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/api/src/app/app.controller.ts: -------------------------------------------------------------------------------- 1 | import { Controller, Get } from '@nestjs/common'; 2 | 3 | import { Message } from '@angular-nest-nx/api-interfaces'; 4 | 5 | import { AppService } from './app.service'; 6 | 7 | @Controller() 8 | export class AppController { 9 | constructor(private readonly appService: AppService) {} 10 | 11 | @Get('hello') 12 | getData(): Message { 13 | return this.appService.getData(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["src/plugins/index.js"], 11 | "rules": { 12 | "@typescript-eslint/no-var-requires": "off", 13 | "no-undef": "off" 14 | } 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/dashboard/dashboard.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NbCardModule } from '@nebular/theme'; 3 | 4 | import { ThemeModule } from '../../@theme/theme.module'; 5 | import { DashboardComponent } from './dashboard.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | NbCardModule, 10 | ThemeModule, 11 | ], 12 | declarations: [ 13 | DashboardComponent, 14 | ], 15 | }) 16 | export class DashboardModule { } 17 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileServerFolder": ".", 3 | "fixturesFolder": "./src/fixtures", 4 | "integrationFolder": "./src/integration", 5 | "modifyObstructiveCode": false, 6 | "supportFile": "./src/support/index.ts", 7 | "pluginsFile": false, 8 | "video": true, 9 | "videosFolder": "../../dist/cypress/apps/angular-nest-nx-e2e/videos", 10 | "screenshotsFolder": "../../dist/cypress/apps/angular-nest-nx-e2e/screenshots", 11 | "chromeWebSecurity": false 12 | } 13 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/plural.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'ngxPlural' }) 4 | export class PluralPipe implements PipeTransform { 5 | 6 | transform(input: number, label: string, pluralLabel: string = ''): string { 7 | input = input || 0; 8 | return input === 1 9 | ? `${input} ${label}` 10 | : pluralLabel 11 | ? `${input} ${pluralLabel}` 12 | : `${input} ${label}s`; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/pages.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { MENU_ITEMS } from './pages-menu'; 4 | 5 | @Component({ 6 | selector: 'ngx-pages', 7 | styleUrls: ['pages.component.scss'], 8 | template: ` 9 | 10 | 11 | 12 | 13 | `, 14 | }) 15 | export class PagesComponent { 16 | 17 | menu = MENU_ITEMS; 18 | } 19 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/src/integration/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { getGreeting } from '../support/app.po'; 2 | 3 | describe('angular-nest-nx', () => { 4 | beforeEach(() => cy.visit('/')); 5 | 6 | it('should display welcome message', () => { 7 | // Custom command example, see `../support/commands.ts` file 8 | cy.login('my-email@something.com', 'myPassword'); 9 | 10 | // Function helper example, see `../support/app.po.ts` file 11 | getGreeting().contains('Welcome angular-nest-nx'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/data/users.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | 3 | export interface User { 4 | name: string; 5 | picture: string; 6 | } 7 | 8 | export interface Contacts { 9 | user: User; 10 | type: string; 11 | } 12 | 13 | export interface RecentUsers extends Contacts { 14 | time: number; 15 | } 16 | 17 | export abstract class UserData { 18 | abstract getUsers(): Observable; 19 | abstract getContacts(): Observable; 20 | abstract getRecentUsers(): Observable; 21 | } 22 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/pace.theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | 7 | @mixin ngx-pace-theme() { 8 | 9 | .pace .pace-progress { 10 | background: nb-theme(color-primary-default); 11 | } 12 | 13 | .pace .pace-progress-inner { 14 | box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default); 15 | } 16 | 17 | .pace .pace-activity { 18 | display: none; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/pipes/timing.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'timing' }) 4 | export class TimingPipe implements PipeTransform { 5 | transform(time: number): string { 6 | if (time) { 7 | const minutes = Math.floor(time / 60); 8 | const seconds = Math.floor(time % 60); 9 | return `${this.initZero(minutes)}${minutes}:${this.initZero(seconds)}${seconds}`; 10 | } 11 | 12 | return '00:00'; 13 | } 14 | 15 | private initZero(time: number): string { 16 | return time < 10 ? '0' : ''; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /apps/api/src/app/app.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { Test } from '@nestjs/testing'; 2 | 3 | import { AppService } from './app.service'; 4 | 5 | describe('AppService', () => { 6 | let service: AppService; 7 | 8 | beforeAll(async () => { 9 | const app = await Test.createTestingModule({ 10 | providers: [AppService], 11 | }).compile(); 12 | 13 | service = app.get(AppService); 14 | }); 15 | 16 | describe('getData', () => { 17 | it('should return "Welcome to api!"', () => { 18 | expect(service.getData()).toEqual({ message: 'Welcome to api!' }); 19 | }); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/pages.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NbMenuModule } from '@nebular/theme'; 3 | 4 | import { ThemeModule } from '../@theme/theme.module'; 5 | import { PagesComponent } from './pages.component'; 6 | import { DashboardModule } from './dashboard/dashboard.module'; 7 | import { PagesRoutingModule } from './pages-routing.module'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | PagesRoutingModule, 12 | ThemeModule, 13 | NbMenuModule, 14 | DashboardModule, 15 | ], 16 | declarations: [ 17 | PagesComponent, 18 | ], 19 | }) 20 | export class PagesModule { 21 | } 22 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/mock/mock-data.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { UserService } from './users.service'; 5 | 6 | const SERVICES = [ 7 | UserService, 8 | ]; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | ], 14 | providers: [ 15 | ...SERVICES, 16 | ], 17 | }) 18 | export class MockDataModule { 19 | static forRoot(): ModuleWithProviders { 20 | return { 21 | ngModule: MockDataModule, 22 | providers: [ 23 | ...SERVICES, 24 | ], 25 | }; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/search-input/search-input.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | 5 | i.control-icon { 6 | &::before { 7 | font-size: 2.3rem; 8 | } 9 | 10 | &:hover { 11 | cursor: pointer; 12 | } 13 | } 14 | 15 | input { 16 | border: none; 17 | outline: none; 18 | margin-left: 1rem; 19 | width: 15rem; 20 | transition: width 0.2s ease; 21 | 22 | &.hidden { 23 | width: 0; 24 | margin: 0; 25 | } 26 | } 27 | 28 | ::ng-deep search-input { 29 | input { 30 | background: transparent; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "target": "es2015", 12 | "module": "esnext", 13 | "lib": ["es2017", "dom"], 14 | "skipLibCheck": true, 15 | "skipDefaultLibCheck": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@angular-nest-nx/api-interfaces": ["libs/api-interfaces/src/index.ts"] 19 | } 20 | }, 21 | "exclude": ["node_modules", "tmp"] 22 | } 23 | -------------------------------------------------------------------------------- /apps/api/src/main.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is not a production server yet! 3 | * This is only a minimal backend to get started. 4 | */ 5 | 6 | import { Logger } from '@nestjs/common'; 7 | import { NestFactory } from '@nestjs/core'; 8 | 9 | import { AppModule } from './app/app.module'; 10 | 11 | async function bootstrap() { 12 | const app = await NestFactory.create(AppModule); 13 | const globalPrefix = 'api'; 14 | app.setGlobalPrefix(globalPrefix); 15 | const port = process.env.PORT || 3000; 16 | await app.listen(port); 17 | Logger.log( 18 | `🚀 Application is running on: http://localhost:${port}/${globalPrefix}` 19 | ); 20 | } 21 | 22 | bootstrap(); 23 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | 41 | .angular 42 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/src/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "sourceMap": false, 5 | "outDir": "../../dist/out-tsc", 6 | "allowJs": true, 7 | "types": ["cypress", "node"], 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "noImplicitOverride": true, 11 | "noPropertyAccessFromIndexSignature": true, 12 | "noImplicitReturns": true, 13 | "noFallthroughCasesInSwitch": true 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.js"], 16 | "angularCompilerOptions": { 17 | "strictInjectionParameters": true, 18 | "strictInputAccessModifiers": true, 19 | "strictTemplates": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /apps/api/src/app/app.controller.spec.ts: -------------------------------------------------------------------------------- 1 | import { Test, TestingModule } from '@nestjs/testing'; 2 | 3 | import { AppController } from './app.controller'; 4 | import { AppService } from './app.service'; 5 | 6 | describe('AppController', () => { 7 | let app: TestingModule; 8 | 9 | beforeAll(async () => { 10 | app = await Test.createTestingModule({ 11 | controllers: [AppController], 12 | providers: [AppService], 13 | }).compile(); 14 | }); 15 | 16 | describe('getData', () => { 17 | it('should return "Welcome to api!"', () => { 18 | const appController = app.get(AppController); 19 | expect(appController.getData()).toEqual({ message: 'Welcome to api!' }); 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | @import '~bootstrap/scss/mixins/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | width: 100%; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | 11 | .socials { 12 | font-size: 2rem; 13 | 14 | a { 15 | padding: 0.4rem; 16 | color: nb-theme(text-hint-color); 17 | transition: color ease-out 0.1s; 18 | 19 | &:hover { 20 | color: nb-theme(text-basic-color); 21 | } 22 | } 23 | } 24 | 25 | @include media-breakpoint-down(is) { 26 | .socials { 27 | font-size: 1.5rem; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/pages-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { PagesComponent } from './pages.component'; 5 | import { DashboardComponent } from './dashboard/dashboard.component'; 6 | 7 | const routes: Routes = [{ 8 | path: '', 9 | component: PagesComponent, 10 | children: [ 11 | { 12 | path: 'dashboard', 13 | component: DashboardComponent, 14 | }, 15 | { 16 | path: '', 17 | redirectTo: 'dashboard', 18 | pathMatch: 'full', 19 | }, 20 | ], 21 | }]; 22 | 23 | @NgModule({ 24 | imports: [RouterModule.forChild(routes)], 25 | exports: [RouterModule], 26 | }) 27 | export class PagesRoutingModule { 28 | } 29 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-footer', 5 | styleUrls: ['./footer.component.scss'], 6 | template: ` 7 | 8 | Created with ♥ by Akveo 2019 9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | `, 17 | }) 18 | export class FooterComponent { 19 | } 20 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | }, 12 | { 13 | "path": "./tsconfig.editor.json" 14 | } 15 | ], 16 | "compilerOptions": { 17 | "forceConsistentCasingInFileNames": true, 18 | "strict": false, 19 | "noImplicitOverride": true, 20 | "noPropertyAccessFromIndexSignature": false, 21 | "noImplicitReturns": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'angular-nest-nx', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/apps/angular-nest-nx', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | import { Component, OnInit } from '@angular/core'; 7 | import { AnalyticsService } from './@core/utils/analytics.service'; 8 | import { SeoService } from './@core/utils/seo.service'; 9 | 10 | @Component({ 11 | selector: 'angular-nest-nx-root', 12 | template: '', 13 | }) 14 | export class AppComponent implements OnInit { 15 | 16 | constructor(private analytics: AnalyticsService, private seoService: SeoService) { 17 | } 18 | 19 | ngOnInit() { 20 | this.analytics.trackPageViews(); 21 | this.seoService.trackCanonicalChanges(); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/pages/pages-menu.ts: -------------------------------------------------------------------------------- 1 | import { NbMenuItem } from '@nebular/theme'; 2 | 3 | export const MENU_ITEMS: NbMenuItem[] = [ 4 | { 5 | title: 'Dashboard', 6 | icon: 'home-outline', 7 | link: '/pages/dashboard', 8 | home: true, 9 | }, 10 | { 11 | title: 'FEATURES', 12 | group: true, 13 | }, 14 | { 15 | title: 'Auth', 16 | icon: 'lock-outline', 17 | children: [ 18 | { 19 | title: 'Login', 20 | link: '/auth/login', 21 | }, 22 | { 23 | title: 'Register', 24 | link: '/auth/register', 25 | }, 26 | { 27 | title: 'Request Password', 28 | link: '/auth/request-password', 29 | }, 30 | { 31 | title: 'Reset Password', 32 | link: '/auth/reset-password', 33 | }, 34 | ], 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/one-column/one-column.layout.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-one-column-layout', 5 | styleUrls: ['./one-column.layout.scss'], 6 | template: ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | `, 25 | }) 26 | export class OneColumnLayoutComponent {} 27 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": ["**/*"], 4 | "plugins": ["@nrwl/nx"], 5 | "overrides": [ 6 | { 7 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 8 | "rules": { 9 | "@nrwl/nx/enforce-module-boundaries": [ 10 | "error", 11 | { 12 | "enforceBuildableLibDependency": true, 13 | "allow": [], 14 | "depConstraints": [ 15 | { 16 | "sourceTag": "*", 17 | "onlyDependOnLibsWithTags": ["*"] 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | }, 24 | { 25 | "files": ["*.ts", "*.tsx"], 26 | "extends": ["plugin:@nrwl/nx/typescript"], 27 | "rules": {} 28 | }, 29 | { 30 | "files": ["*.js", "*.jsx"], 31 | "extends": ["plugin:@nrwl/nx/javascript"], 32 | "rules": {} 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/utils/analytics.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { NavigationEnd, Router } from '@angular/router'; 3 | import { Location } from '@angular/common'; 4 | import { filter } from 'rxjs/operators'; 5 | 6 | declare const ga: any; 7 | 8 | @Injectable() 9 | export class AnalyticsService { 10 | private enabled: boolean; 11 | 12 | constructor(private location: Location, private router: Router) { 13 | this.enabled = false; 14 | } 15 | 16 | trackPageViews() { 17 | if (this.enabled) { 18 | this.router.events.pipe( 19 | filter((event) => event instanceof NavigationEnd), 20 | ) 21 | .subscribe(() => { 22 | ga('send', {hitType: 'pageview', page: this.location.path()}); 23 | }); 24 | } 25 | } 26 | 27 | trackEvent(eventName: string) { 28 | if (this.enabled) { 29 | ga('send', 'event', eventName); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/two-columns/two-columns.layout.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-two-columns-layout', 5 | styleUrls: ['./two-columns.layout.scss'], 6 | template: ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | `, 29 | }) 30 | export class TwoColumnsLayoutComponent {} 31 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularNestNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-nest-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap'); 2 | 3 | // themes - our custom or/and out of the box themes 4 | @import 'themes'; 5 | 6 | // framework component themes (styles tied to theme variables) 7 | @import '~@nebular/theme/styles/globals'; 8 | @import '~@nebular/auth/styles/globals'; 9 | 10 | @import '~bootstrap/scss/functions'; 11 | @import '~bootstrap/scss/variables'; 12 | @import '~bootstrap/scss/mixins'; 13 | @import '~bootstrap/scss/grid'; 14 | 15 | // loading progress bar theme 16 | @import './pace.theme'; 17 | 18 | @import './layout'; 19 | @import './overrides'; 20 | 21 | // install the framework and custom global styles 22 | @include nb-install() { 23 | 24 | // framework global styles 25 | @include nb-theme-global(); 26 | @include nb-auth-global(); 27 | 28 | @include ngx-layout(); 29 | // loading progress bar 30 | @include ngx-pace-theme(); 31 | 32 | @include nb-overrides(); 33 | }; 34 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/layouts/three-columns/three-columns.layout.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-three-columns-layout', 5 | styleUrls: ['./three-columns.layout.scss'], 6 | template: ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | `, 31 | }) 32 | export class ThreeColumnsLayoutComponent {} 33 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/search-input/search-input.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-search-input', 5 | styleUrls: ['./search-input.component.scss'], 6 | template: ` 7 | 9 | 14 | `, 15 | }) 16 | export class SearchInputComponent { 17 | @ViewChild('input', { static: true }) input: ElementRef; 18 | 19 | @Output() search: EventEmitter = new EventEmitter(); 20 | 21 | isInputShown = false; 22 | 23 | showInput() { 24 | this.isInputShown = true; 25 | this.input.nativeElement.focus(); 26 | } 27 | 28 | hideInput() { 29 | this.isInputShown = false; 30 | } 31 | 32 | onInput(val: Event) { 33 | this.search.emit(val); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Wilfried Lucha 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmScope": "angular-nest-nx", 3 | "affected": { 4 | "defaultBase": "master" 5 | }, 6 | "cli": { 7 | "defaultCollection": "@nrwl/angular", 8 | "packageManager": "npm" 9 | }, 10 | "implicitDependencies": { 11 | "package.json": { 12 | "dependencies": "*", 13 | "devDependencies": "*" 14 | }, 15 | ".eslintrc.json": "*" 16 | }, 17 | "tasksRunnerOptions": { 18 | "default": { 19 | "runner": "@nrwl/workspace/tasks-runners/default", 20 | "options": { 21 | "cacheableOperations": ["build", "lint", "test", "e2e"] 22 | } 23 | } 24 | }, 25 | "targetDependencies": { 26 | "build": [ 27 | { 28 | "target": "build", 29 | "projects": "dependencies" 30 | } 31 | ] 32 | }, 33 | "generators": { 34 | "@nrwl/angular:application": { 35 | "style": "scss", 36 | "linter": "eslint", 37 | "unitTestRunner": "jest", 38 | "e2eTestRunner": "cypress" 39 | }, 40 | "@nrwl/angular:library": { 41 | "linter": "eslint", 42 | "unitTestRunner": "jest" 43 | }, 44 | "@nrwl/angular:component": { 45 | "style": "scss" 46 | } 47 | }, 48 | "defaultProject": "angular-nest-nx" 49 | } 50 | -------------------------------------------------------------------------------- /apps/angular-nest-nx-e2e/src/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | 11 | // eslint-disable-next-line @typescript-eslint/no-namespace 12 | declare namespace Cypress { 13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 14 | interface Chainable { 15 | login(email: string, password: string): void; 16 | } 17 | } 18 | // 19 | // -- This is a parent command -- 20 | Cypress.Commands.add('login', (email, password) => { 21 | console.log('Custom command example: Login', email, password); 22 | }); 23 | // 24 | // -- This is a child command -- 25 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 26 | // 27 | // 28 | // -- This is a dual command -- 29 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 30 | // 31 | // 32 | // -- This will overwrite an existing command -- 33 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 34 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 |
8 | 9 | {{ theme.name }} 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 | 30 |
31 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Akveo. All Rights Reserved. 4 | * Licensed under the MIT License. See License.txt in the project root for license information. 5 | */ 6 | import { BrowserModule } from '@angular/platform-browser'; 7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 8 | import { NgModule } from '@angular/core'; 9 | import { HttpClientModule } from '@angular/common/http'; 10 | import { CoreModule } from './@core/core.module'; 11 | import { ThemeModule } from './@theme/theme.module'; 12 | import { AppComponent } from './app.component'; 13 | import { AppRoutingModule } from './app-routing.module'; 14 | import { 15 | NbChatModule, 16 | NbDatepickerModule, 17 | NbDialogModule, 18 | NbMenuModule, 19 | NbSidebarModule, 20 | NbToastrModule, 21 | NbWindowModule, 22 | } from '@nebular/theme'; 23 | 24 | @NgModule({ 25 | declarations: [AppComponent], 26 | imports: [ 27 | BrowserModule, 28 | BrowserAnimationsModule, 29 | HttpClientModule, 30 | AppRoutingModule, 31 | NbSidebarModule.forRoot(), 32 | NbMenuModule.forRoot(), 33 | NbDatepickerModule.forRoot(), 34 | NbDialogModule.forRoot(), 35 | NbWindowModule.forRoot(), 36 | NbToastrModule.forRoot(), 37 | NbChatModule.forRoot({ 38 | messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY', 39 | }), 40 | CoreModule.forRoot(), 41 | ThemeModule.forRoot(), 42 | ], 43 | bootstrap: [AppComponent], 44 | }) 45 | export class AppModule { 46 | } 47 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy, Input } from '@angular/core'; 2 | import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme'; 3 | import { takeUntil } from 'rxjs/operators'; 4 | import { Subject } from 'rxjs'; 5 | 6 | @Component({ 7 | selector: 'ngx-layout-direction-switcher', 8 | template: ` 9 | 17 | 18 | `, 19 | }) 20 | export class LayoutDirectionSwitcherComponent implements OnDestroy { 21 | 22 | protected destroy$ = new Subject(); 23 | 24 | directions = NbLayoutDirection; 25 | currentDirection: NbLayoutDirection; 26 | 27 | @Input() vertical: boolean = false; 28 | 29 | constructor(private directionService: NbLayoutDirectionService) { 30 | this.currentDirection = this.directionService.getDirection(); 31 | 32 | this.directionService.onDirectionChange() 33 | .pipe(takeUntil(this.destroy$)) 34 | .subscribe(newDirection => this.currentDirection = newDirection); 35 | } 36 | 37 | toggleDirection(newDirection) { 38 | this.directionService.setDirection(newDirection); 39 | } 40 | 41 | ngOnDestroy() { 42 | this.destroy$.next(); 43 | this.destroy$.complete(); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { ExtraOptions, RouterModule, Routes } from '@angular/router'; 2 | import { NgModule } from '@angular/core'; 3 | import { 4 | NbAuthComponent, 5 | NbLoginComponent, 6 | NbLogoutComponent, 7 | NbRegisterComponent, 8 | NbRequestPasswordComponent, 9 | NbResetPasswordComponent, 10 | } from '@nebular/auth'; 11 | 12 | export const routes: Routes = [ 13 | { 14 | path: 'pages', 15 | loadChildren: () => import('./pages/pages.module') 16 | .then(m => m.PagesModule), 17 | }, 18 | { 19 | path: 'auth', 20 | component: NbAuthComponent, 21 | children: [ 22 | { 23 | path: '', 24 | component: NbLoginComponent, 25 | }, 26 | { 27 | path: 'login', 28 | component: NbLoginComponent, 29 | }, 30 | { 31 | path: 'register', 32 | component: NbRegisterComponent, 33 | }, 34 | { 35 | path: 'logout', 36 | component: NbLogoutComponent, 37 | }, 38 | { 39 | path: 'request-password', 40 | component: NbRequestPasswordComponent, 41 | }, 42 | { 43 | path: 'reset-password', 44 | component: NbResetPasswordComponent, 45 | }, 46 | ], 47 | }, 48 | { path: '', redirectTo: 'pages', pathMatch: 'full' }, 49 | { path: '**', redirectTo: 'pages' }, 50 | ]; 51 | 52 | const config: ExtraOptions = { 53 | useHash: false, 54 | }; 55 | 56 | @NgModule({ 57 | imports: [RouterModule.forRoot(routes, config)], 58 | exports: [RouterModule], 59 | }) 60 | export class AppRoutingModule { 61 | } 62 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/switcher/switcher.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, EventEmitter } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-switcher', 5 | styleUrls: ['./switcher.component.scss'], 6 | template: ` 7 | 23 | `, 24 | }) 25 | export class SwitcherComponent { 26 | @Input() firstValue: any; 27 | @Input() secondValue: any; 28 | 29 | @Input() firstValueLabel: string; 30 | @Input() secondValueLabel: string; 31 | 32 | @Input() vertical: boolean; 33 | 34 | @Input() value: any; 35 | @Output() valueChange = new EventEmitter(); 36 | 37 | isFirstValue() { 38 | return this.value === this.firstValue; 39 | } 40 | 41 | isSecondValue() { 42 | return this.value === this.secondValue; 43 | } 44 | 45 | currentValueLabel() { 46 | return this.isFirstValue() 47 | ? this.firstValueLabel 48 | : this.secondValueLabel; 49 | } 50 | 51 | changeValue() { 52 | this.value = this.isFirstValue() 53 | ? this.secondValue 54 | : this.firstValue; 55 | 56 | this.valueChange.emit(this.value); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/utils/seo.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Inject, PLATFORM_ID, OnDestroy } from '@angular/core'; 2 | import { isPlatformBrowser } from '@angular/common'; 3 | import { NavigationEnd, Router } from '@angular/router'; 4 | import { NB_DOCUMENT } from '@nebular/theme'; 5 | import { filter, takeUntil } from 'rxjs/operators'; 6 | import { Subject } from 'rxjs'; 7 | 8 | @Injectable() 9 | export class SeoService implements OnDestroy { 10 | 11 | private readonly destroy$ = new Subject(); 12 | private readonly dom: Document; 13 | private readonly isBrowser: boolean; 14 | private linkCanonical: HTMLLinkElement; 15 | 16 | constructor( 17 | private router: Router, 18 | @Inject(NB_DOCUMENT) document, 19 | @Inject(PLATFORM_ID) platformId, 20 | ) { 21 | this.isBrowser = isPlatformBrowser(platformId); 22 | this.dom = document; 23 | 24 | if (this.isBrowser) { 25 | this.createCanonicalTag(); 26 | } 27 | } 28 | 29 | ngOnDestroy() { 30 | this.destroy$.next(); 31 | this.destroy$.complete(); 32 | } 33 | 34 | createCanonicalTag() { 35 | this.linkCanonical = this.dom.createElement('link'); 36 | this.linkCanonical.setAttribute('rel', 'canonical'); 37 | this.dom.head.appendChild(this.linkCanonical); 38 | this.linkCanonical.setAttribute('href', this.getCanonicalUrl()); 39 | } 40 | 41 | trackCanonicalChanges() { 42 | if (!this.isBrowser) { 43 | return; 44 | } 45 | 46 | this.router.events.pipe( 47 | filter((event) => event instanceof NavigationEnd), 48 | takeUntil(this.destroy$), 49 | ) 50 | .subscribe(() => { 51 | this.linkCanonical.setAttribute('href', this.getCanonicalUrl()); 52 | }); 53 | } 54 | 55 | private getCanonicalUrl(): string { 56 | return this.dom.location.origin + this.dom.location.pathname; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/header/header.component.scss: -------------------------------------------------------------------------------- 1 | @import '~bootstrap/scss/mixins/breakpoints'; 2 | @import '~@nebular/theme/styles/global/breakpoints'; 3 | @import '../../styles/themes'; 4 | 5 | @include nb-install-component() { 6 | display: flex; 7 | justify-content: space-between; 8 | width: 100%; 9 | 10 | .logo-container { 11 | display: flex; 12 | align-items: center; 13 | width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)}); 14 | } 15 | 16 | nb-action { 17 | height: auto; 18 | display: flex; 19 | align-content: center; 20 | } 21 | 22 | nb-user { 23 | cursor: pointer; 24 | } 25 | 26 | ::ng-deep nb-search button { 27 | padding: 0!important; 28 | } 29 | 30 | .header-container { 31 | display: flex; 32 | align-items: center; 33 | width: auto; 34 | 35 | .sidebar-toggle { 36 | @include nb-ltr(padding-right, 1.25rem); 37 | @include nb-rtl(padding-left, 1.25rem); 38 | text-decoration: none; 39 | color: nb-theme(text-hint-color); 40 | nb-icon { 41 | font-size: 1.75rem; 42 | } 43 | } 44 | 45 | .logo { 46 | padding: 0 1.25rem; 47 | font-size: 1.75rem; 48 | @include nb-ltr(border-left, 1px solid nb-theme(divider-color)); 49 | @include nb-rtl(border-right, 1px solid nb-theme(divider-color)); 50 | white-space: nowrap; 51 | text-decoration: none; 52 | } 53 | } 54 | 55 | .direction-switcher { 56 | @include nb-ltr(margin-left, 2rem); 57 | @include nb-rtl(margin-right, 2rem); 58 | } 59 | 60 | @include media-breakpoint-down(sm) { 61 | .control-item { 62 | display: none; 63 | } 64 | .user-action { 65 | border: none; 66 | padding: 0; 67 | } 68 | } 69 | 70 | @include media-breakpoint-down(is) { 71 | nb-select, 72 | .direction-switcher { 73 | display: none; 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/switcher/switcher.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/themes'; 2 | @import '~bootstrap/scss/mixins/breakpoints'; 3 | @import '~@nebular/theme/styles/global/breakpoints'; 4 | 5 | @include nb-install-component() { 6 | .switch-label { 7 | display: flex; 8 | justify-content: space-around; 9 | align-items: center; 10 | cursor: pointer; 11 | margin: 0; 12 | 13 | &.vertical { 14 | flex-direction: column; 15 | align-items: flex-start; 16 | 17 | .first, 18 | .second { 19 | padding: 0; 20 | } 21 | 22 | .switch { 23 | margin-top: 0.5em; 24 | } 25 | } 26 | 27 | & > span { 28 | transition: opacity 0.3s ease; 29 | color: nb-theme(text-hint-color); 30 | 31 | &.first { 32 | @include nb-ltr(padding-right, 10px); 33 | @include nb-rtl(padding-left, 10px); 34 | } 35 | 36 | &.second { 37 | @include nb-ltr(padding-left, 10px); 38 | @include nb-rtl(padding-right, 10px); 39 | } 40 | 41 | &.active { 42 | color: nb-theme(text-basic-color); 43 | } 44 | 45 | &:active { 46 | opacity: 0.78; 47 | } 48 | } 49 | } 50 | 51 | .switch { 52 | position: relative; 53 | display: inline-block; 54 | width: 3rem; 55 | height: 1.5rem; 56 | margin: 0; 57 | 58 | input { 59 | display: none; 60 | 61 | &:checked + .slider::before { 62 | @include nb-ltr(transform, translateX(1.5rem)); 63 | @include nb-rtl(transform, translateX(-1.5rem)); 64 | } 65 | } 66 | 67 | .slider { 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | right: 0; 72 | bottom: 0; 73 | border-radius: 1.75rem; 74 | background-color: nb-theme(background-basic-color-2); 75 | } 76 | 77 | .slider::before { 78 | position: absolute; 79 | content: ''; 80 | height: 1.5rem; 81 | width: 1.5rem; 82 | border-radius: 50%; 83 | background-color: nb-theme(color-primary-default); 84 | transition: 0.2s; 85 | } 86 | } 87 | 88 | @include media-breakpoint-down(xs) { 89 | align-items: flex-end; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | 22 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 23 | import 'classlist.js'; // Run `npm install --save classlist.js`. 24 | 25 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 26 | import 'web-animations-js'; // Run `npm install --save web-animations-js`. 27 | 28 | 29 | /** Evergreen browsers require these. **/ 30 | import 'core-js/es6/reflect'; 31 | import 'core-js/es7/reflect'; 32 | 33 | 34 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 35 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 36 | 37 | 38 | /*************************************************************************************************** 39 | * Zone JS is required by Angular itself. 40 | */ 41 | import 'zone.js/dist/zone'; // Included with Angular CLI. 42 | 43 | 44 | /*************************************************************************************************** 45 | * APPLICATION IMPORTS 46 | */ 47 | 48 | /** 49 | * Date, currency, decimal and percent pipes. 50 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 51 | */ 52 | import 'core-js/es7/array'; 53 | import 'core-js/es7/object'; 54 | 55 | if (typeof SVGElement.prototype.contains === 'undefined') { 56 | SVGElement.prototype.contains = HTMLDivElement.prototype.contains; 57 | } 58 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/mock/users.service.ts: -------------------------------------------------------------------------------- 1 | import { of as observableOf, Observable } from 'rxjs'; 2 | import { Injectable } from '@angular/core'; 3 | import { Contacts, RecentUsers, UserData } from '../data/users'; 4 | 5 | @Injectable() 6 | export class UserService extends UserData { 7 | 8 | private time: Date = new Date; 9 | 10 | private users = { 11 | nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' }, 12 | eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' }, 13 | jack: { name: 'Jack Williams', picture: 'assets/images/jack.png' }, 14 | lee: { name: 'Lee Wong', picture: 'assets/images/lee.png' }, 15 | alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' }, 16 | kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' }, 17 | }; 18 | private types = { 19 | mobile: 'mobile', 20 | home: 'home', 21 | work: 'work', 22 | }; 23 | private contacts: Contacts[] = [ 24 | { user: this.users.nick, type: this.types.mobile }, 25 | { user: this.users.eva, type: this.types.home }, 26 | { user: this.users.jack, type: this.types.mobile }, 27 | { user: this.users.lee, type: this.types.mobile }, 28 | { user: this.users.alan, type: this.types.home }, 29 | { user: this.users.kate, type: this.types.work }, 30 | ]; 31 | private recentUsers: RecentUsers[] = [ 32 | { user: this.users.alan, type: this.types.home, time: this.time.setHours(21, 12)}, 33 | { user: this.users.eva, type: this.types.home, time: this.time.setHours(17, 45)}, 34 | { user: this.users.nick, type: this.types.mobile, time: this.time.setHours(5, 29)}, 35 | { user: this.users.lee, type: this.types.mobile, time: this.time.setHours(11, 24)}, 36 | { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(10, 45)}, 37 | { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 42)}, 38 | { user: this.users.kate, type: this.types.work, time: this.time.setHours(9, 31)}, 39 | { user: this.users.jack, type: this.types.mobile, time: this.time.setHours(8, 0)}, 40 | ]; 41 | 42 | getUsers(): Observable { 43 | return observableOf(this.users); 44 | } 45 | 46 | getContacts(): Observable { 47 | return observableOf(this.contacts); 48 | } 49 | 50 | getRecentUsers(): Observable { 51 | return observableOf(this.recentUsers); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/theme.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { 4 | NbActionsModule, 5 | NbLayoutModule, 6 | NbMenuModule, 7 | NbSearchModule, 8 | NbSidebarModule, 9 | NbUserModule, 10 | NbContextMenuModule, 11 | NbButtonModule, 12 | NbSelectModule, 13 | NbIconModule, 14 | NbThemeModule, 15 | } from '@nebular/theme'; 16 | import { NbEvaIconsModule } from '@nebular/eva-icons'; 17 | import { NbSecurityModule } from '@nebular/security'; 18 | 19 | import { 20 | FooterComponent, 21 | HeaderComponent, 22 | LayoutDirectionSwitcherComponent, 23 | SearchInputComponent, 24 | SwitcherComponent, 25 | } from './components'; 26 | import { 27 | CapitalizePipe, 28 | PluralPipe, 29 | RoundPipe, 30 | TimingPipe, 31 | NumberWithCommasPipe, 32 | } from './pipes'; 33 | import { 34 | OneColumnLayoutComponent, 35 | ThreeColumnsLayoutComponent, 36 | TwoColumnsLayoutComponent, 37 | } from './layouts'; 38 | import { DEFAULT_THEME } from './styles/theme.default'; 39 | import { COSMIC_THEME } from './styles/theme.cosmic'; 40 | import { CORPORATE_THEME } from './styles/theme.corporate'; 41 | import { DARK_THEME } from './styles/theme.dark'; 42 | 43 | const NB_MODULES = [ 44 | NbLayoutModule, 45 | NbMenuModule, 46 | NbUserModule, 47 | NbActionsModule, 48 | NbSearchModule, 49 | NbSidebarModule, 50 | NbContextMenuModule, 51 | NbSecurityModule, 52 | NbButtonModule, 53 | NbSelectModule, 54 | NbIconModule, 55 | NbEvaIconsModule, 56 | ]; 57 | const COMPONENTS = [ 58 | SwitcherComponent, 59 | LayoutDirectionSwitcherComponent, 60 | HeaderComponent, 61 | FooterComponent, 62 | SearchInputComponent, 63 | OneColumnLayoutComponent, 64 | ThreeColumnsLayoutComponent, 65 | TwoColumnsLayoutComponent, 66 | ]; 67 | const PIPES = [ 68 | CapitalizePipe, 69 | PluralPipe, 70 | RoundPipe, 71 | TimingPipe, 72 | NumberWithCommasPipe, 73 | ]; 74 | 75 | @NgModule({ 76 | imports: [CommonModule, ...NB_MODULES], 77 | exports: [CommonModule, ...PIPES, ...COMPONENTS], 78 | declarations: [...COMPONENTS, ...PIPES], 79 | }) 80 | export class ThemeModule { 81 | static forRoot(): ModuleWithProviders { 82 | return { 83 | ngModule: ThemeModule, 84 | providers: [ 85 | ...NbThemeModule.forRoot( 86 | { 87 | name: 'default', 88 | }, 89 | [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ], 90 | ).providers, 91 | ], 92 | }; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/components/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy, OnInit } from '@angular/core'; 2 | import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme'; 3 | 4 | import { UserData } from '../../../@core/data/users'; 5 | import { map, takeUntil } from 'rxjs/operators'; 6 | import { Subject } from 'rxjs'; 7 | 8 | @Component({ 9 | selector: 'ngx-header', 10 | styleUrls: ['./header.component.scss'], 11 | templateUrl: './header.component.html', 12 | }) 13 | export class HeaderComponent implements OnInit, OnDestroy { 14 | 15 | private destroy$: Subject = new Subject(); 16 | userPictureOnly: boolean = false; 17 | user: any; 18 | 19 | themes = [ 20 | { 21 | value: 'default', 22 | name: 'Light', 23 | }, 24 | { 25 | value: 'dark', 26 | name: 'Dark', 27 | }, 28 | { 29 | value: 'cosmic', 30 | name: 'Cosmic', 31 | }, 32 | { 33 | value: 'corporate', 34 | name: 'Corporate', 35 | }, 36 | ]; 37 | 38 | currentTheme = 'default'; 39 | 40 | userMenu = [ { title: 'Profile' }, { title: 'Log out' } ]; 41 | 42 | constructor(private sidebarService: NbSidebarService, 43 | private menuService: NbMenuService, 44 | private themeService: NbThemeService, 45 | private userService: UserData, 46 | private breakpointService: NbMediaBreakpointsService) { 47 | } 48 | 49 | ngOnInit() { 50 | this.currentTheme = this.themeService.currentTheme; 51 | 52 | this.userService.getUsers() 53 | .pipe(takeUntil(this.destroy$)) 54 | .subscribe((users: any) => this.user = users.nick); 55 | 56 | const { xl } = this.breakpointService.getBreakpointsMap(); 57 | this.themeService.onMediaQueryChange() 58 | .pipe( 59 | map(([, currentBreakpoint]) => currentBreakpoint.width < xl), 60 | takeUntil(this.destroy$), 61 | ) 62 | .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl); 63 | 64 | this.themeService.onThemeChange() 65 | .pipe( 66 | map(({ name }) => name), 67 | takeUntil(this.destroy$), 68 | ) 69 | .subscribe(themeName => this.currentTheme = themeName); 70 | } 71 | 72 | ngOnDestroy() { 73 | this.destroy$.next(); 74 | this.destroy$.complete(); 75 | } 76 | 77 | changeTheme(themeName: string) { 78 | this.themeService.changeTheme(themeName); 79 | } 80 | 81 | toggleSidebar(): boolean { 82 | this.sidebarService.toggle(true, 'menu-sidebar'); 83 | 84 | return false; 85 | } 86 | 87 | navigateHome() { 88 | this.menuService.navigateHome(); 89 | return false; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth'; 4 | import { NbSecurityModule, NbRoleProvider } from '@nebular/security'; 5 | import { of as observableOf } from 'rxjs'; 6 | 7 | import { throwIfAlreadyLoaded } from './module-import-guard'; 8 | import { AnalyticsService, SeoService } from './utils'; 9 | import { UserData } from './data/users'; 10 | import { UserService } from './mock/users.service'; 11 | import { MockDataModule } from './mock/mock-data.module'; 12 | 13 | const socialLinks = [ 14 | { 15 | url: 'https://github.com/akveo/nebular', 16 | target: '_blank', 17 | icon: 'github', 18 | }, 19 | { 20 | url: 'https://www.facebook.com/akveo/', 21 | target: '_blank', 22 | icon: 'facebook', 23 | }, 24 | { 25 | url: 'https://twitter.com/akveo_inc', 26 | target: '_blank', 27 | icon: 'twitter', 28 | }, 29 | ]; 30 | 31 | const DATA_SERVICES = [ 32 | { provide: UserData, useClass: UserService }, 33 | ]; 34 | 35 | export class NbSimpleRoleProvider extends NbRoleProvider { 36 | getRole() { 37 | // here you could provide any role based on any auth flow 38 | return observableOf('guest'); 39 | } 40 | } 41 | 42 | export const NB_CORE_PROVIDERS = [ 43 | ...MockDataModule.forRoot().providers, 44 | ...DATA_SERVICES, 45 | ...NbAuthModule.forRoot({ 46 | 47 | strategies: [ 48 | NbDummyAuthStrategy.setup({ 49 | name: 'email', 50 | delay: 3000, 51 | }), 52 | ], 53 | forms: { 54 | login: { 55 | socialLinks: socialLinks, 56 | }, 57 | register: { 58 | socialLinks: socialLinks, 59 | }, 60 | }, 61 | }).providers, 62 | 63 | NbSecurityModule.forRoot({ 64 | accessControl: { 65 | guest: { 66 | view: '*', 67 | }, 68 | user: { 69 | parent: 'guest', 70 | create: '*', 71 | edit: '*', 72 | remove: '*', 73 | }, 74 | }, 75 | }).providers, 76 | 77 | { 78 | provide: NbRoleProvider, useClass: NbSimpleRoleProvider, 79 | }, 80 | AnalyticsService, 81 | SeoService, 82 | ]; 83 | 84 | @NgModule({ 85 | imports: [ 86 | CommonModule, 87 | ], 88 | exports: [ 89 | NbAuthModule, 90 | ], 91 | declarations: [], 92 | }) 93 | export class CoreModule { 94 | constructor(@Optional() @SkipSelf() parentModule: CoreModule) { 95 | throwIfAlreadyLoaded(parentModule, 'CoreModule'); 96 | } 97 | 98 | static forRoot(): ModuleWithProviders { 99 | return { 100 | ngModule: CoreModule, 101 | providers: [ 102 | ...NB_CORE_PROVIDERS, 103 | ], 104 | }; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /decorate-angular-cli.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file decorates the Angular CLI with the Nx CLI to enable features such as computation caching 3 | * and faster execution of tasks. 4 | * 5 | * It does this by: 6 | * 7 | * - Patching the Angular CLI to warn you in case you accidentally use the undecorated ng command. 8 | * - Symlinking the ng to nx command, so all commands run through the Nx CLI 9 | * - Updating the package.json postinstall script to give you control over this script 10 | * 11 | * The Nx CLI decorates the Angular CLI, so the Nx CLI is fully compatible with it. 12 | * Every command you run should work the same when using the Nx CLI, except faster. 13 | * 14 | * Because of symlinking you can still type `ng build/test/lint` in the terminal. The ng command, in this case, 15 | * will point to nx, which will perform optimizations before invoking ng. So the Angular CLI is always invoked. 16 | * The Nx CLI simply does some optimizations before invoking the Angular CLI. 17 | * 18 | * To opt out of this patch: 19 | * - Replace occurrences of nx with ng in your package.json 20 | * - Remove the script from your postinstall script in your package.json 21 | * - Delete and reinstall your node_modules 22 | */ 23 | 24 | const fs = require('fs'); 25 | const os = require('os'); 26 | const cp = require('child_process'); 27 | const isWindows = os.platform() === 'win32'; 28 | let output; 29 | try { 30 | output = require('@nrwl/workspace').output; 31 | } catch (e) { 32 | console.warn('Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.'); 33 | process.exit(0); 34 | } 35 | 36 | /** 37 | * Symlink of ng to nx, so you can keep using `ng build/test/lint` and still 38 | * invoke the Nx CLI and get the benefits of computation caching. 39 | */ 40 | function symlinkNgCLItoNxCLI() { 41 | try { 42 | const ngPath = './node_modules/.bin/ng'; 43 | const nxPath = './node_modules/.bin/nx'; 44 | if (isWindows) { 45 | /** 46 | * This is the most reliable way to create symlink-like behavior on Windows. 47 | * Such that it works in all shells and works with npx. 48 | */ 49 | ['', '.cmd', '.ps1'].forEach(ext => { 50 | if (fs.existsSync(nxPath + ext)) fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext)); 51 | }); 52 | } else { 53 | // If unix-based, symlink 54 | cp.execSync(`ln -sf ./nx ${ngPath}`); 55 | } 56 | } 57 | catch(e) { 58 | output.error({ title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message }); 59 | throw e; 60 | } 61 | } 62 | 63 | try { 64 | symlinkNgCLItoNxCLI(); 65 | require('@nrwl/cli/lib/decorate-cli').decorateCli(); 66 | output.log({ title: 'Angular CLI has been decorated to enable computation caching.' }); 67 | } catch(e) { 68 | output.error({ title: 'Decoration of the Angular CLI did not complete successfully' }); 69 | } 70 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/themes.scss: -------------------------------------------------------------------------------- 1 | // @nebular theming framework 2 | @import '~@nebular/theme/styles/theming'; 3 | // @nebular out of the box themes 4 | @import '~@nebular/theme/styles/themes'; 5 | 6 | $nb-themes: nb-register-theme(( 7 | layout-padding-top: 2.25rem, 8 | 9 | menu-item-icon-margin: 0 0.5rem 0 0, 10 | 11 | card-height-tiny: 13.5rem, 12 | card-height-small: 21.1875rem, 13 | card-height-medium: 28.875rem, 14 | card-height-large: 36.5625rem, 15 | card-height-giant: 44.25rem, 16 | card-margin-bottom: 1.875rem, 17 | card-header-with-select-padding-top: 0.5rem, 18 | card-header-with-select-padding-bottom: 0.5rem, 19 | 20 | select-min-width: 6rem, 21 | 22 | slide-out-background: #f7f9fc, 23 | slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, 24 | slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, 25 | ), default, default); 26 | 27 | $nb-themes: nb-register-theme(( 28 | layout-padding-top: 2.25rem, 29 | 30 | menu-item-icon-margin: 0 0.5rem 0 0, 31 | 32 | card-height-tiny: 13.5rem, 33 | card-height-small: 21.1875rem, 34 | card-height-medium: 28.875rem, 35 | card-height-large: 36.5625rem, 36 | card-height-giant: 44.25rem, 37 | card-margin-bottom: 1.875rem, 38 | card-header-with-select-padding-top: 0.5rem, 39 | card-header-with-select-padding-bottom: 0.5rem, 40 | 41 | select-min-width: 6rem, 42 | 43 | slide-out-background: #252547, 44 | slide-out-shadow-color: 2px 0 3px #29157a, 45 | slide-out-shadow-color-rtl: -2px 0 3px #29157a, 46 | ), cosmic, cosmic); 47 | 48 | $nb-themes: nb-register-theme(( 49 | layout-padding-top: 2.25rem, 50 | 51 | menu-item-icon-margin: 0 0.5rem 0 0, 52 | 53 | card-height-tiny: 13.5rem, 54 | card-height-small: 21.1875rem, 55 | card-height-medium: 28.875rem, 56 | card-height-large: 36.5625rem, 57 | card-height-giant: 44.25rem, 58 | card-margin-bottom: 1.875rem, 59 | card-header-with-select-padding-top: 0.5rem, 60 | card-header-with-select-padding-bottom: 0.5rem, 61 | 62 | select-min-width: 6rem, 63 | 64 | slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%), 65 | slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, 66 | slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, 67 | ), corporate, corporate); 68 | 69 | $nb-themes: nb-register-theme(( 70 | layout-padding-top: 2.25rem, 71 | 72 | menu-item-icon-margin: 0 0.5rem 0 0, 73 | 74 | card-height-tiny: 13.5rem, 75 | card-height-small: 21.1875rem, 76 | card-height-medium: 28.875rem, 77 | card-height-large: 36.5625rem, 78 | card-height-giant: 44.25rem, 79 | card-margin-bottom: 1.875rem, 80 | card-header-with-select-padding-top: 0.5rem, 81 | card-header-with-select-padding-bottom: 0.5rem, 82 | 83 | select-min-width: 6rem, 84 | 85 | slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), 86 | slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, 87 | slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, 88 | ), dark, dark); 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo](https://user-images.githubusercontent.com/7531596/149632779-72903cdc-984b-440b-9258-13b421a39aa7.png) 2 | 3 | > Angular 13 + Ngx-admin + NestJs + NX 4 | 5 | Starter project with Angular 13, Ngx-admin, NestJs, Nx Workspace, Jest, Cypress, ESLint & Prettier 6 | 7 | ![Angular13](https://img.shields.io/badge/Angular-13-brightgreen) 8 | ![NestJS8](https://img.shields.io/badge/NestJS-8-brightgreen) 9 | [![Build](https://api.travis-ci.org/wlucha/angular-nest-nx.svg?branch=master)](https://travis-ci.org/github/wlucha/angular-nest-nx) 10 | [![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg)]() 11 | [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=wlucha_angular-nest-nx&metric=alert_status)](https://sonarcloud.io/dashboard?id=wlucha_angular-nest-nx) 12 | [![StackShare](http://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/wlucha/angular-nest-nx) 13 | 14 | ## Features 15 | 16 | ✅ [Angular 13](https://angular.io/) 17 | ✅ [Ngx-admin](https://akveo.github.io/ngx-admin/) 18 | ✅ [NestJS 8](https://nestjs.com/) 19 | ✅ Next generation build system with [Nx](https://nx.dev/) 20 | ✅ Unit Testing with [Jest](https://jestjs.io/) 21 | ✅ End-to-End Testing with [Cypress](https://www.cypress.io/) 22 | ✅ [ESLint](https://eslint.org/) 23 | ✅ [Prettier](https://prettier.io/) 24 | 25 | ## Frontend App 26 | The Angular 13 frontend app is based on the [ngx-admin](https://github.com/akveo/ngx-admin) starter kit. 27 | 28 | ![image](https://user-images.githubusercontent.com/7531596/148551080-de61fdb5-ffa4-496e-a26b-4bbf9dd35e9e.png) 29 | 30 | 31 | ## Deploy 32 | 33 | [![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy) 34 | 35 | ## Install / Development 36 | 37 | ```bash 38 | # Clone the project 39 | $ git clone https://github.com/wlucha/angular-nest-nx 40 | $ cd angular-starter 41 | 42 | # Install dependencies 43 | $ npm install 44 | 45 | # Start frontend server 46 | $ npm run start 47 | 48 | # Start backend server 49 | $ npm run api 50 | 51 | # Open in browser: http://localhost:4200 52 | ``` 53 | 54 | ## Commands 55 | 56 | - `npm run start` - Start the ngx-admin frontend app 57 | - `npm run api` - Start the NestJS backend 58 | - `npm run lint` - Lint the project 59 | - `npm run test` - Run tests 60 | 61 | ## License 62 | 63 | MIT License 64 | 65 | Copyright (c) 2023 Wilfried Lucha 66 | 67 | Permission is hereby granted, free of charge, to any person obtaining a copy 68 | of this software and associated documentation files (the "Software"), to deal 69 | in the Software without restriction, including without limitation the rights 70 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 71 | copies of the Software, and to permit persons to whom the Software is 72 | furnished to do so, subject to the following conditions: 73 | 74 | The above copyright notice and this permission notice shall be included in all 75 | copies or substantial portions of the Software. 76 | 77 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 78 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 79 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 80 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 81 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 82 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 83 | SOFTWARE. 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-nest-nx", 3 | "version": "0.0.1", 4 | "description": "Starter project with Angular 13, Ngx-admin, NestJs, Nx Workspace, Jest, Cypress, ESLint & Prettier", 5 | "author": "Wilfried Lucha ", 6 | "homepage": "https://lucha.at", 7 | "license": "MIT", 8 | "contributors": [ 9 | "Wilfried Lucha " 10 | ], 11 | "keywords": [ 12 | "angular", 13 | "angular 13", 14 | "angular-nest", 15 | "angular nest", 16 | "angular-nest-nx", 17 | "angular nest nx", 18 | "angular-starter", 19 | "angular starter", 20 | "angular-boilerplate", 21 | "angular boilerplate", 22 | "angular-template", 23 | "angular template", 24 | "nx", 25 | "nx workspace", 26 | "nest", 27 | "nest js", 28 | "nestjs", 29 | "nest-js", 30 | "eslint" 31 | ], 32 | "repository": "https://github.com/wlucha/angular-nest-nx.git", 33 | "bugs": { 34 | "url": "https://github.com/wlucha/angular-nest-nx/issues" 35 | }, 36 | "readme": "https://github.com/wlucha/angular-nest-nx/blob/master/README.md", 37 | "private": false, 38 | "scripts": { 39 | "ng": "nx", 40 | "start": "nx serve", 41 | "api": "nx serve api", 42 | "web": "nx serve --host=0.0.0.0 --disableHostCheck", 43 | "build": "nx build", 44 | "test": "nx test", 45 | "lint": "eslint", 46 | "postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"" 47 | }, 48 | "dependencies": { 49 | "@angular/animations": "~13.3.3", 50 | "@angular/cdk": "~13.3.3", 51 | "@angular/common": "~13.3.3", 52 | "@angular/compiler": "~13.3.3", 53 | "@angular/core": "~13.3.3", 54 | "@angular/forms": "~13.3.3", 55 | "@angular/platform-browser": "~13.3.3", 56 | "@angular/platform-browser-dynamic": "~13.3.3", 57 | "@angular/router": "~13.3.3", 58 | "@nebular/auth": "9.0.2", 59 | "@nebular/eva-icons": "9.0.2", 60 | "@nebular/security": "9.0.2", 61 | "@nebular/theme": "9.0.2", 62 | "@nestjs/common": "^8.4.4", 63 | "@nestjs/core": "^8.4.4", 64 | "@nestjs/platform-express": "^8.4.4", 65 | "@nrwl/angular": "13.10.2", 66 | "bootstrap": "5.1.3", 67 | "classlist.js": "1.1.20150312", 68 | "core-js": "2.5.1", 69 | "eva-icons": "^1.1.3", 70 | "intl": "1.2.5", 71 | "ionicons": "2.0.1", 72 | "nebular-icons": "1.1.0", 73 | "node-sass": "^4.12.0", 74 | "normalize.css": "6.0.0", 75 | "pace-js": "1.0.2", 76 | "reflect-metadata": "^0.1.13", 77 | "roboto-fontface": "0.8.0", 78 | "rxjs": "~7.5.5", 79 | "socicon": "3.0.5", 80 | "style-loader": "^1.1.3", 81 | "tslib": "^2.0.0", 82 | "typeface-exo": "0.0.22", 83 | "web-animations-js": "^2.3.2", 84 | "zone.js": "~0.11.4" 85 | }, 86 | "devDependencies": { 87 | "@angular-devkit/build-angular": "~13.3.3", 88 | "@angular-eslint/eslint-plugin": "~13.2.1", 89 | "@angular-eslint/eslint-plugin-template": "~13.2.1", 90 | "@angular-eslint/template-parser": "~13.2.1", 91 | "@angular/cli": "~13.3.3", 92 | "@angular/compiler-cli": "~13.3.3", 93 | "@angular/language-service": "~13.3.3", 94 | "@nestjs/schematics": "^8.0.0", 95 | "@nestjs/testing": "^8.0.0", 96 | "@nrwl/cli": "13.10.2", 97 | "@nrwl/cypress": "13.10.2", 98 | "@nrwl/eslint-plugin-nx": "13.10.2", 99 | "@nrwl/jest": "13.10.2", 100 | "@nrwl/linter": "13.10.2", 101 | "@nrwl/nest": "13.10.2", 102 | "@nrwl/node": "13.10.2", 103 | "@nrwl/tao": "13.10.2", 104 | "@nrwl/workspace": "13.10.2", 105 | "@types/jest": "27.4.1", 106 | "@types/node": "14.14.33", 107 | "@typescript-eslint/eslint-plugin": "~5.3.0", 108 | "@typescript-eslint/parser": "~5.3.0", 109 | "cypress": "^9.5.4", 110 | "eslint": "8.13.0", 111 | "eslint-config-prettier": "8.5.0", 112 | "eslint-plugin-cypress": "^2.12.1", 113 | "jest": "27.5.1", 114 | "jest-preset-angular": "11.1.1", 115 | "prettier": "^2.6.2", 116 | "ts-jest": "27.0.5", 117 | "typescript": "~4.4.3" 118 | }, 119 | "resolutions": { 120 | "**/node-gyp": "^7.0.0" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /CODE-OF-CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, caste, color, religion, or sexual 10 | identity and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the overall 26 | community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or advances of 31 | any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email address, 35 | without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [INSERT CONTACT METHOD]. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series of 86 | actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or permanent 93 | ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within the 113 | community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.1, available at 119 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. 120 | 121 | Community Impact Guidelines were inspired by 122 | [Mozilla's code of conduct enforcement ladder][mozilla coc]. 123 | 124 | For answers to common questions about this code of conduct, see the FAQ at 125 | [https://www.contributor-covenant.org/faq][faq]. Translations are available at 126 | [https://www.contributor-covenant.org/translations][translations]. 127 | 128 | [homepage]: https://www.contributor-covenant.org 129 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html 130 | [mozilla coc]: https://github.com/mozilla/diversity 131 | [faq]: https://www.contributor-covenant.org/faq 132 | [translations]: https://www.contributor-covenant.org/translations 133 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "projects": { 4 | "angular-nest-nx": { 5 | "projectType": "application", 6 | "root": "apps/angular-nest-nx", 7 | "sourceRoot": "apps/angular-nest-nx/src", 8 | "prefix": "angular-nest-nx", 9 | "architect": { 10 | "build": { 11 | "builder": "@angular-devkit/build-angular:browser", 12 | "outputs": ["{options.outputPath}"], 13 | "options": { 14 | "outputPath": "dist/apps/angular-nest-nx", 15 | "index": "apps/angular-nest-nx/src/index.html", 16 | "main": "apps/angular-nest-nx/src/main.ts", 17 | "polyfills": "apps/angular-nest-nx/src/polyfills.ts", 18 | "tsConfig": "apps/angular-nest-nx/tsconfig.app.json", 19 | "inlineStyleLanguage": "scss", 20 | "assets": [ 21 | "apps/angular-nest-nx/src/favicon.ico", 22 | "apps/angular-nest-nx/src/assets" 23 | ], 24 | "styles": [ 25 | "node_modules/bootstrap/dist/css/bootstrap.css", 26 | "node_modules/typeface-exo/index.css", 27 | "node_modules/roboto-fontface/css/roboto/roboto-fontface.css", 28 | "node_modules/ionicons/scss/ionicons.scss", 29 | "node_modules/socicon/css/socicon.css", 30 | "node_modules/nebular-icons/scss/nebular-icons.scss", 31 | "node_modules/pace-js/templates/pace-theme-flash.tmpl.css", 32 | "apps/angular-nest-nx/src/app/@theme/styles/styles.scss" 33 | ], 34 | "scripts": [ 35 | "node_modules/pace-js/pace.min.js" 36 | ] 37 | }, 38 | "configurations": { 39 | "production": { 40 | "budgets": [ 41 | { 42 | "type": "initial", 43 | "maximumWarning": "500kb", 44 | "maximumError": "1mb" 45 | }, 46 | { 47 | "type": "anyComponentStyle", 48 | "maximumWarning": "2kb", 49 | "maximumError": "4kb" 50 | } 51 | ], 52 | "fileReplacements": [ 53 | { 54 | "replace": "apps/angular-nest-nx/src/environments/environment.ts", 55 | "with": "apps/angular-nest-nx/src/environments/environment.prod.ts" 56 | } 57 | ], 58 | "outputHashing": "all" 59 | }, 60 | "development": { 61 | "buildOptimizer": false, 62 | "optimization": false, 63 | "vendorChunk": true, 64 | "extractLicenses": false, 65 | "sourceMap": true, 66 | "namedChunks": true 67 | } 68 | }, 69 | "defaultConfiguration": "production" 70 | }, 71 | "serve": { 72 | "builder": "@angular-devkit/build-angular:dev-server", 73 | "configurations": { 74 | "production": { 75 | "browserTarget": "angular-nest-nx:build:production" 76 | }, 77 | "development": { 78 | "browserTarget": "angular-nest-nx:build:development" 79 | } 80 | }, 81 | "defaultConfiguration": "development", 82 | "options": { 83 | "proxyConfig": "apps/angular-nest-nx/proxy.conf.json" 84 | } 85 | }, 86 | "extract-i18n": { 87 | "builder": "@angular-devkit/build-angular:extract-i18n", 88 | "options": { 89 | "browserTarget": "angular-nest-nx:build" 90 | } 91 | }, 92 | "lint": { 93 | "builder": "@nrwl/linter:eslint", 94 | "options": { 95 | "lintFilePatterns": [ 96 | "apps/angular-nest-nx/src/**/*.ts", 97 | "apps/angular-nest-nx/src/**/*.html" 98 | ] 99 | } 100 | }, 101 | "test": { 102 | "builder": "@nrwl/jest:jest", 103 | "outputs": ["coverage/apps/angular-nest-nx"], 104 | "options": { 105 | "jestConfig": "apps/angular-nest-nx/jest.config.js", 106 | "passWithNoTests": true 107 | } 108 | } 109 | }, 110 | "tags": [] 111 | }, 112 | "angular-nest-nx-e2e": { 113 | "root": "apps/angular-nest-nx-e2e", 114 | "sourceRoot": "apps/angular-nest-nx-e2e/src", 115 | "projectType": "application", 116 | "architect": { 117 | "e2e": { 118 | "builder": "@nrwl/cypress:cypress", 119 | "options": { 120 | "cypressConfig": "apps/angular-nest-nx-e2e/cypress.json", 121 | "devServerTarget": "angular-nest-nx:serve:development" 122 | }, 123 | "configurations": { 124 | "production": { 125 | "devServerTarget": "angular-nest-nx:serve:production" 126 | } 127 | } 128 | }, 129 | "lint": { 130 | "builder": "@nrwl/linter:eslint", 131 | "outputs": ["{options.outputFile}"], 132 | "options": { 133 | "lintFilePatterns": ["apps/angular-nest-nx-e2e/**/*.{js,ts}"] 134 | } 135 | } 136 | }, 137 | "tags": [], 138 | "implicitDependencies": ["angular-nest-nx"] 139 | }, 140 | "api": { 141 | "root": "apps/api", 142 | "sourceRoot": "apps/api/src", 143 | "projectType": "application", 144 | "architect": { 145 | "build": { 146 | "builder": "@nrwl/node:webpack", 147 | "outputs": ["{options.outputPath}"], 148 | "options": { 149 | "outputPath": "dist/apps/api", 150 | "main": "apps/api/src/main.ts", 151 | "tsConfig": "apps/api/tsconfig.app.json", 152 | "assets": ["apps/api/src/assets"] 153 | }, 154 | "configurations": { 155 | "production": { 156 | "optimization": true, 157 | "extractLicenses": true, 158 | "inspect": false, 159 | "fileReplacements": [ 160 | { 161 | "replace": "apps/api/src/environments/environment.ts", 162 | "with": "apps/api/src/environments/environment.prod.ts" 163 | } 164 | ] 165 | } 166 | } 167 | }, 168 | "serve": { 169 | "builder": "@nrwl/node:node", 170 | "options": { 171 | "buildTarget": "api:build" 172 | } 173 | }, 174 | "lint": { 175 | "builder": "@nrwl/linter:eslint", 176 | "outputs": ["{options.outputFile}"], 177 | "options": { 178 | "lintFilePatterns": ["apps/api/**/*.ts"] 179 | } 180 | }, 181 | "test": { 182 | "builder": "@nrwl/jest:jest", 183 | "outputs": ["coverage/apps/api"], 184 | "options": { 185 | "jestConfig": "apps/api/jest.config.js", 186 | "passWithNoTests": true 187 | } 188 | } 189 | }, 190 | "tags": [] 191 | }, 192 | "api-interfaces": { 193 | "root": "libs/api-interfaces", 194 | "sourceRoot": "libs/api-interfaces/src", 195 | "projectType": "library", 196 | "architect": { 197 | "lint": { 198 | "builder": "@nrwl/linter:eslint", 199 | "outputs": ["{options.outputFile}"], 200 | "options": { 201 | "lintFilePatterns": ["libs/api-interfaces/**/*.ts"] 202 | } 203 | } 204 | }, 205 | "tags": [] 206 | } 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/theme.corporate.ts: -------------------------------------------------------------------------------- 1 | import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme'; 2 | 3 | const baseThemeVariables = baseTheme.variables; 4 | 5 | export const CORPORATE_THEME = { 6 | name: 'corporate', 7 | base: 'corporate', 8 | variables: { 9 | temperature: { 10 | arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ], 11 | arcEmpty: baseThemeVariables.bg2, 12 | thumbBg: baseThemeVariables.bg2, 13 | thumbBorder: '#ffa36b', 14 | }, 15 | 16 | solar: { 17 | gradientLeft: baseThemeVariables.primary, 18 | gradientRight: baseThemeVariables.primary, 19 | shadowColor: 'rgba(0, 0, 0, 0)', 20 | secondSeriesFill: baseThemeVariables.bg2, 21 | radius: ['80%', '90%'], 22 | }, 23 | 24 | traffic: { 25 | tooltipBg: baseThemeVariables.bg, 26 | tooltipBorderColor: baseThemeVariables.border2, 27 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 28 | tooltipTextColor: baseThemeVariables.fgText, 29 | tooltipFontWeight: 'normal', 30 | 31 | yAxisSplitLine: 'rgba(0, 0, 0, 0)', 32 | 33 | lineBg: baseThemeVariables.primary, 34 | lineShadowBlur: '0', 35 | itemColor: baseThemeVariables.border4, 36 | itemBorderColor: baseThemeVariables.border4, 37 | itemEmphasisBorderColor: baseThemeVariables.primaryLight, 38 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 39 | shadowLineShadow: 'rgba(0, 0, 0, 0)', 40 | gradFrom: baseThemeVariables.bg, 41 | gradTo: baseThemeVariables.bg, 42 | }, 43 | 44 | electricity: { 45 | tooltipBg: baseThemeVariables.bg, 46 | tooltipLineColor: baseThemeVariables.fgText, 47 | tooltipLineWidth: '0', 48 | tooltipBorderColor: baseThemeVariables.border2, 49 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 50 | tooltipTextColor: baseThemeVariables.fgText, 51 | tooltipFontWeight: 'normal', 52 | 53 | axisLineColor: baseThemeVariables.border3, 54 | xAxisTextColor: baseThemeVariables.fg, 55 | yAxisSplitLine: baseThemeVariables.separator, 56 | 57 | itemBorderColor: baseThemeVariables.primary, 58 | lineStyle: 'solid', 59 | lineWidth: '4', 60 | lineGradFrom: baseThemeVariables.primary, 61 | lineGradTo: baseThemeVariables.primary, 62 | lineShadow: 'rgba(0, 0, 0, 0)', 63 | 64 | areaGradFrom: 'rgba(0, 0, 0, 0)', 65 | areaGradTo: 'rgba(0, 0, 0, 0)', 66 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 67 | }, 68 | 69 | bubbleMap: { 70 | titleColor: baseThemeVariables.fgText, 71 | areaColor: baseThemeVariables.bg4, 72 | areaHoverColor: baseThemeVariables.fgHighlight, 73 | areaBorderColor: baseThemeVariables.border5, 74 | }, 75 | 76 | profitBarAnimationEchart: { 77 | textColor: baseThemeVariables.fgText, 78 | 79 | firstAnimationBarColor: baseThemeVariables.primary, 80 | secondAnimationBarColor: baseThemeVariables.success, 81 | 82 | splitLineStyleOpacity: '1', 83 | splitLineStyleWidth: '1', 84 | splitLineStyleColor: baseThemeVariables.separator, 85 | 86 | tooltipTextColor: baseThemeVariables.fgText, 87 | tooltipFontWeight: 'normal', 88 | tooltipFontSize: '16', 89 | tooltipBg: baseThemeVariables.bg, 90 | tooltipBorderColor: baseThemeVariables.border2, 91 | tooltipBorderWidth: '1', 92 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 93 | }, 94 | 95 | trafficBarEchart: { 96 | gradientFrom: baseThemeVariables.warningLight, 97 | gradientTo: baseThemeVariables.warning, 98 | shadow: baseThemeVariables.warningLight, 99 | shadowBlur: '0', 100 | 101 | axisTextColor: baseThemeVariables.fgText, 102 | axisFontSize: '12', 103 | 104 | tooltipBg: baseThemeVariables.bg, 105 | tooltipBorderColor: baseThemeVariables.border2, 106 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 107 | tooltipTextColor: baseThemeVariables.fgText, 108 | tooltipFontWeight: 'normal', 109 | }, 110 | 111 | countryOrders: { 112 | countryBorderColor: baseThemeVariables.border4, 113 | countryFillColor: baseThemeVariables.bg4, 114 | countryBorderWidth: '1', 115 | hoveredCountryBorderColor: baseThemeVariables.primary, 116 | hoveredCountryFillColor: baseThemeVariables.primaryLight, 117 | hoveredCountryBorderWidth: '1', 118 | 119 | chartAxisLineColor: baseThemeVariables.border4, 120 | chartAxisTextColor: baseThemeVariables.fg, 121 | chartAxisFontSize: '16', 122 | chartGradientTo: baseThemeVariables.primary, 123 | chartGradientFrom: baseThemeVariables.primaryLight, 124 | chartAxisSplitLine: baseThemeVariables.separator, 125 | chartShadowLineColor: baseThemeVariables.primaryLight, 126 | 127 | chartLineBottomShadowColor: baseThemeVariables.primary, 128 | 129 | chartInnerLineColor: baseThemeVariables.bg2, 130 | }, 131 | 132 | echarts: { 133 | bg: baseThemeVariables.bg, 134 | textColor: baseThemeVariables.fgText, 135 | axisLineColor: baseThemeVariables.fgText, 136 | splitLineColor: baseThemeVariables.separator, 137 | itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', 138 | tooltipBackgroundColor: baseThemeVariables.primary, 139 | areaOpacity: '0.7', 140 | }, 141 | 142 | chartjs: { 143 | axisLineColor: baseThemeVariables.separator, 144 | textColor: baseThemeVariables.fgText, 145 | }, 146 | 147 | orders: { 148 | tooltipBg: baseThemeVariables.bg, 149 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 150 | tooltipLineWidth: '0', 151 | tooltipBorderColor: baseThemeVariables.border2, 152 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 153 | tooltipTextColor: baseThemeVariables.fgText, 154 | tooltipFontWeight: 'normal', 155 | tooltipFontSize: '20', 156 | 157 | axisLineColor: baseThemeVariables.border4, 158 | axisFontSize: '16', 159 | axisTextColor: baseThemeVariables.fg, 160 | yAxisSplitLine: baseThemeVariables.separator, 161 | 162 | itemBorderColor: baseThemeVariables.primary, 163 | lineStyle: 'solid', 164 | lineWidth: '4', 165 | 166 | // first line 167 | firstAreaGradFrom: baseThemeVariables.bg3, 168 | firstAreaGradTo: baseThemeVariables.bg3, 169 | firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 170 | 171 | // second line 172 | secondLineGradFrom: baseThemeVariables.primary, 173 | secondLineGradTo: baseThemeVariables.primary, 174 | 175 | secondAreaGradFrom: 'rgba(0, 0, 0, 0)', 176 | secondAreaGradTo: 'rgba(0, 0, 0, 0)', 177 | secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 178 | 179 | // third line 180 | thirdLineGradFrom: baseThemeVariables.success, 181 | thirdLineGradTo: baseThemeVariables.successLight, 182 | 183 | thirdAreaGradFrom: 'rgba(0, 0, 0, 0)', 184 | thirdAreaGradTo: 'rgba(0, 0, 0, 0)', 185 | thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 186 | }, 187 | 188 | profit: { 189 | bg: baseThemeVariables.bg, 190 | textColor: baseThemeVariables.fgText, 191 | axisLineColor: baseThemeVariables.border4, 192 | splitLineColor: baseThemeVariables.separator, 193 | areaOpacity: '1', 194 | 195 | axisFontSize: '16', 196 | axisTextColor: baseThemeVariables.fg, 197 | 198 | // first bar 199 | firstLineGradFrom: baseThemeVariables.bg3, 200 | firstLineGradTo: baseThemeVariables.bg3, 201 | firstLineShadow: 'rgba(0, 0, 0, 0)', 202 | 203 | // second bar 204 | secondLineGradFrom: baseThemeVariables.primary, 205 | secondLineGradTo: baseThemeVariables.primary, 206 | secondLineShadow: 'rgba(0, 0, 0, 0)', 207 | 208 | // third bar 209 | thirdLineGradFrom: baseThemeVariables.success, 210 | thirdLineGradTo: baseThemeVariables.success, 211 | thirdLineShadow: 'rgba(0, 0, 0, 0)', 212 | }, 213 | 214 | orderProfitLegend: { 215 | firstItem: baseThemeVariables.success, 216 | secondItem: baseThemeVariables.primary, 217 | thirdItem: baseThemeVariables.bg3, 218 | }, 219 | 220 | visitors: { 221 | tooltipBg: baseThemeVariables.bg, 222 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 223 | tooltipLineWidth: '1', 224 | tooltipBorderColor: baseThemeVariables.border2, 225 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 226 | tooltipTextColor: baseThemeVariables.fgText, 227 | tooltipFontWeight: 'normal', 228 | tooltipFontSize: '20', 229 | 230 | axisLineColor: baseThemeVariables.border4, 231 | axisFontSize: '16', 232 | axisTextColor: baseThemeVariables.fg, 233 | yAxisSplitLine: baseThemeVariables.separator, 234 | 235 | itemBorderColor: baseThemeVariables.primary, 236 | lineStyle: 'dotted', 237 | lineWidth: '6', 238 | lineGradFrom: '#ffffff', 239 | lineGradTo: '#ffffff', 240 | lineShadow: 'rgba(0, 0, 0, 0)', 241 | 242 | areaGradFrom: baseThemeVariables.primary, 243 | areaGradTo: baseThemeVariables.primaryLight, 244 | 245 | innerLineStyle: 'solid', 246 | innerLineWidth: '1', 247 | 248 | innerAreaGradFrom: baseThemeVariables.success, 249 | innerAreaGradTo: baseThemeVariables.success, 250 | }, 251 | 252 | visitorsLegend: { 253 | firstIcon: baseThemeVariables.success, 254 | secondIcon: baseThemeVariables.primary, 255 | }, 256 | 257 | visitorsPie: { 258 | firstPieGradientLeft: baseThemeVariables.success, 259 | firstPieGradientRight: baseThemeVariables.success, 260 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 261 | firstPieRadius: ['65%', '90%'], 262 | 263 | secondPieGradientLeft: baseThemeVariables.warning, 264 | secondPieGradientRight: baseThemeVariables.warningLight, 265 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 266 | secondPieRadius: ['63%', '92%'], 267 | shadowOffsetX: '-4', 268 | shadowOffsetY: '-4', 269 | }, 270 | 271 | visitorsPieLegend: { 272 | firstSection: baseThemeVariables.warning, 273 | secondSection: baseThemeVariables.success, 274 | }, 275 | 276 | earningPie: { 277 | radius: ['65%', '100%'], 278 | center: ['50%', '50%'], 279 | 280 | fontSize: '22', 281 | 282 | firstPieGradientLeft: baseThemeVariables.success, 283 | firstPieGradientRight: baseThemeVariables.success, 284 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 285 | 286 | secondPieGradientLeft: baseThemeVariables.primary, 287 | secondPieGradientRight: baseThemeVariables.primary, 288 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 289 | 290 | thirdPieGradientLeft: baseThemeVariables.warning, 291 | thirdPieGradientRight: baseThemeVariables.warning, 292 | thirdPieShadowColor: 'rgba(0, 0, 0, 0)', 293 | }, 294 | 295 | earningLine: { 296 | gradFrom: baseThemeVariables.primary, 297 | gradTo: baseThemeVariables.primary, 298 | 299 | tooltipTextColor: baseThemeVariables.fgText, 300 | tooltipFontWeight: 'normal', 301 | tooltipFontSize: '16', 302 | tooltipBg: baseThemeVariables.bg, 303 | tooltipBorderColor: baseThemeVariables.border2, 304 | tooltipBorderWidth: '1', 305 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 306 | }, 307 | }, 308 | } as NbJSThemeOptions; 309 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/theme.cosmic.ts: -------------------------------------------------------------------------------- 1 | import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme'; 2 | 3 | const baseThemeVariables = baseTheme.variables; 4 | 5 | export const COSMIC_THEME = { 6 | name: 'cosmic', 7 | base: 'cosmic', 8 | variables: { 9 | temperature: { 10 | arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ], 11 | arcEmpty: baseThemeVariables.bg2, 12 | thumbBg: '#ffffff', 13 | thumbBorder: '#ffffff', 14 | }, 15 | 16 | solar: { 17 | gradientLeft: baseThemeVariables.primary, 18 | gradientRight: baseThemeVariables.primary, 19 | shadowColor: 'rgba(0, 0, 0, 0)', 20 | secondSeriesFill: baseThemeVariables.bg2, 21 | radius: ['70%', '90%'], 22 | }, 23 | 24 | traffic: { 25 | tooltipBg: baseThemeVariables.bg, 26 | tooltipBorderColor: baseThemeVariables.border2, 27 | tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;', 28 | tooltipTextColor: baseThemeVariables.fgText, 29 | tooltipFontWeight: 'normal', 30 | 31 | yAxisSplitLine: baseThemeVariables.separator, 32 | 33 | lineBg: baseThemeVariables.border2, 34 | lineShadowBlur: '14', 35 | itemColor: baseThemeVariables.border2, 36 | itemBorderColor: baseThemeVariables.border2, 37 | itemEmphasisBorderColor: baseThemeVariables.primary, 38 | shadowLineDarkBg: baseThemeVariables.border3, 39 | shadowLineShadow: baseThemeVariables.border3, 40 | gradFrom: baseThemeVariables.bg, 41 | gradTo: baseThemeVariables.bg2, 42 | }, 43 | 44 | electricity: { 45 | tooltipBg: baseThemeVariables.bg, 46 | tooltipLineColor: baseThemeVariables.fgText, 47 | tooltipLineWidth: '0', 48 | tooltipBorderColor: baseThemeVariables.border2, 49 | tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', 50 | tooltipTextColor: baseThemeVariables.fgText, 51 | tooltipFontWeight: 'normal', 52 | 53 | axisLineColor: baseThemeVariables.border3, 54 | xAxisTextColor: baseThemeVariables.fg, 55 | yAxisSplitLine: baseThemeVariables.separator, 56 | 57 | itemBorderColor: baseThemeVariables.border2, 58 | lineStyle: 'dotted', 59 | lineWidth: '6', 60 | lineGradFrom: baseThemeVariables.success, 61 | lineGradTo: baseThemeVariables.warning, 62 | lineShadow: baseThemeVariables.bg4, 63 | 64 | areaGradFrom: baseThemeVariables.bg2, 65 | areaGradTo: baseThemeVariables.bg3, 66 | shadowLineDarkBg: baseThemeVariables.bg3, 67 | }, 68 | 69 | bubbleMap: { 70 | titleColor: baseThemeVariables.fgText, 71 | areaColor: baseThemeVariables.bg4, 72 | areaHoverColor: baseThemeVariables.fgHighlight, 73 | areaBorderColor: baseThemeVariables.border5, 74 | }, 75 | 76 | profitBarAnimationEchart: { 77 | textColor: baseThemeVariables.fgText, 78 | 79 | firstAnimationBarColor: baseThemeVariables.primary, 80 | secondAnimationBarColor: baseThemeVariables.success, 81 | 82 | splitLineStyleOpacity: '1', 83 | splitLineStyleWidth: '1', 84 | splitLineStyleColor: baseThemeVariables.border2, 85 | 86 | tooltipTextColor: baseThemeVariables.fgText, 87 | tooltipFontWeight: 'normal', 88 | tooltipFontSize: '16', 89 | tooltipBg: baseThemeVariables.bg, 90 | tooltipBorderColor: baseThemeVariables.border2, 91 | tooltipBorderWidth: '1', 92 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 93 | }, 94 | 95 | trafficBarEchart: { 96 | gradientFrom: baseThemeVariables.warningLight, 97 | gradientTo: baseThemeVariables.warning, 98 | shadow: baseThemeVariables.warningLight, 99 | shadowBlur: '5', 100 | 101 | axisTextColor: baseThemeVariables.fgText, 102 | axisFontSize: '12', 103 | 104 | tooltipBg: baseThemeVariables.bg, 105 | tooltipBorderColor: baseThemeVariables.border2, 106 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 107 | tooltipTextColor: baseThemeVariables.fgText, 108 | tooltipFontWeight: 'normal', 109 | }, 110 | 111 | countryOrders: { 112 | countryBorderColor: baseThemeVariables.border4, 113 | countryFillColor: baseThemeVariables.bg3, 114 | countryBorderWidth: '1', 115 | hoveredCountryBorderColor: baseThemeVariables.primary, 116 | hoveredCountryFillColor: baseThemeVariables.primaryLight, 117 | hoveredCountryBorderWidth: '1', 118 | 119 | chartAxisLineColor: baseThemeVariables.border4, 120 | chartAxisTextColor: baseThemeVariables.fg, 121 | chartAxisFontSize: '16', 122 | chartGradientTo: baseThemeVariables.primary, 123 | chartGradientFrom: baseThemeVariables.primaryLight, 124 | chartAxisSplitLine: baseThemeVariables.separator, 125 | chartShadowLineColor: baseThemeVariables.primaryLight, 126 | 127 | chartLineBottomShadowColor: baseThemeVariables.primary, 128 | 129 | chartInnerLineColor: baseThemeVariables.bg2, 130 | }, 131 | 132 | echarts: { 133 | bg: baseThemeVariables.bg, 134 | textColor: baseThemeVariables.fgText, 135 | axisLineColor: baseThemeVariables.fgText, 136 | splitLineColor: baseThemeVariables.separator, 137 | itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', 138 | tooltipBackgroundColor: baseThemeVariables.primary, 139 | areaOpacity: '1', 140 | }, 141 | 142 | chartjs: { 143 | axisLineColor: baseThemeVariables.separator, 144 | textColor: baseThemeVariables.fgText, 145 | }, 146 | 147 | orders: { 148 | tooltipBg: baseThemeVariables.bg, 149 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 150 | tooltipLineWidth: '0', 151 | tooltipBorderColor: baseThemeVariables.border2, 152 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 153 | tooltipTextColor: baseThemeVariables.fgText, 154 | tooltipFontWeight: 'normal', 155 | tooltipFontSize: '20', 156 | 157 | axisLineColor: baseThemeVariables.border4, 158 | axisFontSize: '16', 159 | axisTextColor: baseThemeVariables.fg, 160 | yAxisSplitLine: baseThemeVariables.separator, 161 | 162 | itemBorderColor: baseThemeVariables.primary, 163 | lineStyle: 'solid', 164 | lineWidth: '4', 165 | 166 | // first line 167 | firstAreaGradFrom: baseThemeVariables.bg2, 168 | firstAreaGradTo: baseThemeVariables.bg2, 169 | firstShadowLineDarkBg: baseThemeVariables.bg2, 170 | 171 | // second line 172 | secondLineGradFrom: baseThemeVariables.primary, 173 | secondLineGradTo: baseThemeVariables.primary, 174 | 175 | secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)', 176 | secondAreaGradTo: 'rgba(161, 110, 255, 0.5)', 177 | secondShadowLineDarkBg: baseThemeVariables.primary, 178 | 179 | // third line 180 | thirdLineGradFrom: baseThemeVariables.success, 181 | thirdLineGradTo: baseThemeVariables.successLight, 182 | 183 | thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)', 184 | thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)', 185 | thirdShadowLineDarkBg: baseThemeVariables.success, 186 | }, 187 | 188 | profit: { 189 | bg: baseThemeVariables.bg, 190 | textColor: baseThemeVariables.fgText, 191 | axisLineColor: baseThemeVariables.border4, 192 | splitLineColor: baseThemeVariables.separator, 193 | areaOpacity: '1', 194 | 195 | axisFontSize: '16', 196 | axisTextColor: baseThemeVariables.fg, 197 | 198 | // first bar 199 | firstLineGradFrom: baseThemeVariables.bg2, 200 | firstLineGradTo: baseThemeVariables.bg2, 201 | firstLineShadow: 'rgba(0, 0, 0, 0)', 202 | 203 | // second bar 204 | secondLineGradFrom: baseThemeVariables.primary, 205 | secondLineGradTo: baseThemeVariables.primary, 206 | secondLineShadow: 'rgba(0, 0, 0, 0)', 207 | 208 | // third bar 209 | thirdLineGradFrom: baseThemeVariables.success, 210 | thirdLineGradTo: baseThemeVariables.successLight, 211 | thirdLineShadow: 'rgba(0, 0, 0, 0)', 212 | }, 213 | 214 | orderProfitLegend: { 215 | firstItem: baseThemeVariables.success, 216 | secondItem: baseThemeVariables.primary, 217 | thirdItem: baseThemeVariables.bg2, 218 | }, 219 | 220 | visitors: { 221 | tooltipBg: baseThemeVariables.bg, 222 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 223 | tooltipLineWidth: '1', 224 | tooltipBorderColor: baseThemeVariables.border2, 225 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 226 | tooltipTextColor: baseThemeVariables.fgText, 227 | tooltipFontWeight: 'normal', 228 | tooltipFontSize: '20', 229 | 230 | axisLineColor: baseThemeVariables.border4, 231 | axisFontSize: '16', 232 | axisTextColor: baseThemeVariables.fg, 233 | yAxisSplitLine: baseThemeVariables.separator, 234 | 235 | itemBorderColor: baseThemeVariables.primary, 236 | lineStyle: 'dotted', 237 | lineWidth: '6', 238 | lineGradFrom: '#ffffff', 239 | lineGradTo: '#ffffff', 240 | lineShadow: 'rgba(0, 0, 0, 0)', 241 | 242 | areaGradFrom: baseThemeVariables.primary, 243 | areaGradTo: baseThemeVariables.primaryLight, 244 | 245 | innerLineStyle: 'solid', 246 | innerLineWidth: '1', 247 | 248 | innerAreaGradFrom: baseThemeVariables.success, 249 | innerAreaGradTo: baseThemeVariables.success, 250 | }, 251 | 252 | visitorsLegend: { 253 | firstIcon: baseThemeVariables.success, 254 | secondIcon: baseThemeVariables.primary, 255 | }, 256 | 257 | visitorsPie: { 258 | firstPieGradientLeft: baseThemeVariables.success, 259 | firstPieGradientRight: baseThemeVariables.successLight, 260 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 261 | firstPieRadius: ['70%', '90%'], 262 | 263 | secondPieGradientLeft: baseThemeVariables.warning, 264 | secondPieGradientRight: baseThemeVariables.warningLight, 265 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 266 | secondPieRadius: ['60%', '95%'], 267 | shadowOffsetX: '0', 268 | shadowOffsetY: '3', 269 | }, 270 | 271 | visitorsPieLegend: { 272 | firstSection: baseThemeVariables.warning, 273 | secondSection: baseThemeVariables.success, 274 | }, 275 | 276 | earningPie: { 277 | radius: ['65%', '100%'], 278 | center: ['50%', '50%'], 279 | 280 | fontSize: '22', 281 | 282 | firstPieGradientLeft: baseThemeVariables.success, 283 | firstPieGradientRight: baseThemeVariables.success, 284 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 285 | 286 | secondPieGradientLeft: baseThemeVariables.primary, 287 | secondPieGradientRight: baseThemeVariables.primary, 288 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 289 | 290 | thirdPieGradientLeft: baseThemeVariables.warning, 291 | thirdPieGradientRight: baseThemeVariables.warning, 292 | thirdPieShadowColor: 'rgba(0, 0, 0, 0)', 293 | }, 294 | 295 | earningLine: { 296 | gradFrom: baseThemeVariables.primary, 297 | gradTo: baseThemeVariables.primary, 298 | 299 | tooltipTextColor: baseThemeVariables.fgText, 300 | tooltipFontWeight: 'normal', 301 | tooltipFontSize: '16', 302 | tooltipBg: baseThemeVariables.bg, 303 | tooltipBorderColor: baseThemeVariables.border2, 304 | tooltipBorderWidth: '1', 305 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 306 | }, 307 | }, 308 | } as NbJSThemeOptions; 309 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/theme.dark.ts: -------------------------------------------------------------------------------- 1 | import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme'; 2 | 3 | const baseThemeVariables = baseTheme.variables; 4 | 5 | export const DARK_THEME = { 6 | name: 'dark', 7 | base: 'dark', 8 | variables: { 9 | temperature: { 10 | arcFill: [ 11 | baseThemeVariables.primary, 12 | baseThemeVariables.primary, 13 | baseThemeVariables.primary, 14 | baseThemeVariables.primary, 15 | baseThemeVariables.primary, 16 | ], 17 | arcEmpty: baseThemeVariables.bg2, 18 | thumbBg: baseThemeVariables.bg2, 19 | thumbBorder: baseThemeVariables.primary, 20 | }, 21 | 22 | solar: { 23 | gradientLeft: baseThemeVariables.primary, 24 | gradientRight: baseThemeVariables.primary, 25 | shadowColor: 'rgba(0, 0, 0, 0)', 26 | secondSeriesFill: baseThemeVariables.bg2, 27 | radius: ['80%', '90%'], 28 | }, 29 | 30 | traffic: { 31 | tooltipBg: baseThemeVariables.bg, 32 | tooltipBorderColor: baseThemeVariables.border2, 33 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 34 | tooltipTextColor: baseThemeVariables.fgText, 35 | tooltipFontWeight: 'normal', 36 | 37 | yAxisSplitLine: baseThemeVariables.separator, 38 | 39 | lineBg: baseThemeVariables.border4, 40 | lineShadowBlur: '1', 41 | itemColor: baseThemeVariables.border4, 42 | itemBorderColor: baseThemeVariables.border4, 43 | itemEmphasisBorderColor: baseThemeVariables.primary, 44 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 45 | shadowLineShadow: 'rgba(0, 0, 0, 0)', 46 | gradFrom: baseThemeVariables.bg2, 47 | gradTo: baseThemeVariables.bg2, 48 | }, 49 | 50 | electricity: { 51 | tooltipBg: baseThemeVariables.bg, 52 | tooltipLineColor: baseThemeVariables.fgText, 53 | tooltipLineWidth: '0', 54 | tooltipBorderColor: baseThemeVariables.border2, 55 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 56 | tooltipTextColor: baseThemeVariables.fgText, 57 | tooltipFontWeight: 'normal', 58 | 59 | axisLineColor: baseThemeVariables.border3, 60 | xAxisTextColor: baseThemeVariables.fg, 61 | yAxisSplitLine: baseThemeVariables.separator, 62 | 63 | itemBorderColor: baseThemeVariables.primary, 64 | lineStyle: 'solid', 65 | lineWidth: '4', 66 | lineGradFrom: baseThemeVariables.primary, 67 | lineGradTo: baseThemeVariables.primary, 68 | lineShadow: 'rgba(0, 0, 0, 0)', 69 | 70 | areaGradFrom: baseThemeVariables.bg2, 71 | areaGradTo: baseThemeVariables.bg2, 72 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 73 | }, 74 | 75 | bubbleMap: { 76 | titleColor: baseThemeVariables.fgText, 77 | areaColor: baseThemeVariables.bg4, 78 | areaHoverColor: baseThemeVariables.fgHighlight, 79 | areaBorderColor: baseThemeVariables.border5, 80 | }, 81 | 82 | profitBarAnimationEchart: { 83 | textColor: baseThemeVariables.fgText, 84 | 85 | firstAnimationBarColor: baseThemeVariables.primary, 86 | secondAnimationBarColor: baseThemeVariables.success, 87 | 88 | splitLineStyleOpacity: '1', 89 | splitLineStyleWidth: '1', 90 | splitLineStyleColor: baseThemeVariables.separator, 91 | 92 | tooltipTextColor: baseThemeVariables.fgText, 93 | tooltipFontWeight: 'normal', 94 | tooltipFontSize: '16', 95 | tooltipBg: baseThemeVariables.bg, 96 | tooltipBorderColor: baseThemeVariables.border2, 97 | tooltipBorderWidth: '1', 98 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 99 | }, 100 | 101 | trafficBarEchart: { 102 | gradientFrom: baseThemeVariables.warningLight, 103 | gradientTo: baseThemeVariables.warning, 104 | shadow: baseThemeVariables.warningLight, 105 | shadowBlur: '0', 106 | 107 | axisTextColor: baseThemeVariables.fgText, 108 | axisFontSize: '12', 109 | 110 | tooltipBg: baseThemeVariables.bg, 111 | tooltipBorderColor: baseThemeVariables.border2, 112 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 113 | tooltipTextColor: baseThemeVariables.fgText, 114 | tooltipFontWeight: 'normal', 115 | }, 116 | 117 | countryOrders: { 118 | countryBorderColor: baseThemeVariables.border4, 119 | countryFillColor: baseThemeVariables.bg3, 120 | countryBorderWidth: '1', 121 | hoveredCountryBorderColor: baseThemeVariables.primary, 122 | hoveredCountryFillColor: baseThemeVariables.primaryLight, 123 | hoveredCountryBorderWidth: '1', 124 | 125 | chartAxisLineColor: baseThemeVariables.border4, 126 | chartAxisTextColor: baseThemeVariables.fg, 127 | chartAxisFontSize: '16', 128 | chartGradientTo: baseThemeVariables.primary, 129 | chartGradientFrom: baseThemeVariables.primaryLight, 130 | chartAxisSplitLine: baseThemeVariables.separator, 131 | chartShadowLineColor: baseThemeVariables.primaryLight, 132 | 133 | chartLineBottomShadowColor: baseThemeVariables.primary, 134 | 135 | chartInnerLineColor: baseThemeVariables.bg2, 136 | }, 137 | 138 | echarts: { 139 | bg: baseThemeVariables.bg, 140 | textColor: baseThemeVariables.fgText, 141 | axisLineColor: baseThemeVariables.fgText, 142 | splitLineColor: baseThemeVariables.separator, 143 | itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', 144 | tooltipBackgroundColor: baseThemeVariables.primary, 145 | areaOpacity: '0.7', 146 | }, 147 | 148 | chartjs: { 149 | axisLineColor: baseThemeVariables.separator, 150 | textColor: baseThemeVariables.fgText, 151 | }, 152 | 153 | orders: { 154 | tooltipBg: baseThemeVariables.bg, 155 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 156 | tooltipLineWidth: '0', 157 | tooltipBorderColor: baseThemeVariables.border2, 158 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 159 | tooltipTextColor: baseThemeVariables.fgText, 160 | tooltipFontWeight: 'normal', 161 | tooltipFontSize: '20', 162 | 163 | axisLineColor: baseThemeVariables.border4, 164 | axisFontSize: '16', 165 | axisTextColor: baseThemeVariables.fg, 166 | yAxisSplitLine: baseThemeVariables.separator, 167 | 168 | itemBorderColor: baseThemeVariables.primary, 169 | lineStyle: 'solid', 170 | lineWidth: '4', 171 | 172 | // first line 173 | firstAreaGradFrom: baseThemeVariables.bg3, 174 | firstAreaGradTo: baseThemeVariables.bg3, 175 | firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 176 | 177 | // second line 178 | secondLineGradFrom: baseThemeVariables.primary, 179 | secondLineGradTo: baseThemeVariables.primary, 180 | 181 | secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', 182 | secondAreaGradTo: 'rgba(51, 102, 255, 0)', 183 | secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 184 | 185 | // third line 186 | thirdLineGradFrom: baseThemeVariables.success, 187 | thirdLineGradTo: baseThemeVariables.successLight, 188 | 189 | thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', 190 | thirdAreaGradTo: 'rgba(0, 214, 143, 0)', 191 | thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 192 | }, 193 | 194 | profit: { 195 | bg: baseThemeVariables.bg, 196 | textColor: baseThemeVariables.fgText, 197 | axisLineColor: baseThemeVariables.border4, 198 | splitLineColor: baseThemeVariables.separator, 199 | areaOpacity: '1', 200 | 201 | axisFontSize: '16', 202 | axisTextColor: baseThemeVariables.fg, 203 | 204 | // first bar 205 | firstLineGradFrom: baseThemeVariables.bg3, 206 | firstLineGradTo: baseThemeVariables.bg3, 207 | firstLineShadow: 'rgba(0, 0, 0, 0)', 208 | 209 | // second bar 210 | secondLineGradFrom: baseThemeVariables.primary, 211 | secondLineGradTo: baseThemeVariables.primary, 212 | secondLineShadow: 'rgba(0, 0, 0, 0)', 213 | 214 | // third bar 215 | thirdLineGradFrom: baseThemeVariables.success, 216 | thirdLineGradTo: baseThemeVariables.successLight, 217 | thirdLineShadow: 'rgba(0, 0, 0, 0)', 218 | }, 219 | 220 | orderProfitLegend: { 221 | firstItem: baseThemeVariables.success, 222 | secondItem: baseThemeVariables.primary, 223 | thirdItem: baseThemeVariables.bg3, 224 | }, 225 | 226 | visitors: { 227 | tooltipBg: baseThemeVariables.bg, 228 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 229 | tooltipLineWidth: '0', 230 | tooltipBorderColor: baseThemeVariables.border2, 231 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 232 | tooltipTextColor: baseThemeVariables.fgText, 233 | tooltipFontWeight: 'normal', 234 | tooltipFontSize: '20', 235 | 236 | axisLineColor: baseThemeVariables.border4, 237 | axisFontSize: '16', 238 | axisTextColor: baseThemeVariables.fg, 239 | yAxisSplitLine: baseThemeVariables.separator, 240 | 241 | itemBorderColor: baseThemeVariables.primary, 242 | lineStyle: 'dotted', 243 | lineWidth: '6', 244 | lineGradFrom: '#ffffff', 245 | lineGradTo: '#ffffff', 246 | lineShadow: 'rgba(0, 0, 0, 0)', 247 | 248 | areaGradFrom: baseThemeVariables.primary, 249 | areaGradTo: baseThemeVariables.primaryLight, 250 | 251 | innerLineStyle: 'solid', 252 | innerLineWidth: '1', 253 | 254 | innerAreaGradFrom: baseThemeVariables.success, 255 | innerAreaGradTo: baseThemeVariables.success, 256 | }, 257 | 258 | visitorsLegend: { 259 | firstIcon: baseThemeVariables.success, 260 | secondIcon: baseThemeVariables.primary, 261 | }, 262 | 263 | visitorsPie: { 264 | firstPieGradientLeft: baseThemeVariables.success, 265 | firstPieGradientRight: baseThemeVariables.success, 266 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 267 | firstPieRadius: ['70%', '90%'], 268 | 269 | secondPieGradientLeft: baseThemeVariables.warning, 270 | secondPieGradientRight: baseThemeVariables.warningLight, 271 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 272 | secondPieRadius: ['60%', '97%'], 273 | shadowOffsetX: '0', 274 | shadowOffsetY: '0', 275 | }, 276 | 277 | visitorsPieLegend: { 278 | firstSection: baseThemeVariables.warning, 279 | secondSection: baseThemeVariables.success, 280 | }, 281 | 282 | earningPie: { 283 | radius: ['65%', '100%'], 284 | center: ['50%', '50%'], 285 | 286 | fontSize: '22', 287 | 288 | firstPieGradientLeft: baseThemeVariables.success, 289 | firstPieGradientRight: baseThemeVariables.success, 290 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 291 | 292 | secondPieGradientLeft: baseThemeVariables.primary, 293 | secondPieGradientRight: baseThemeVariables.primary, 294 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 295 | 296 | thirdPieGradientLeft: baseThemeVariables.warning, 297 | thirdPieGradientRight: baseThemeVariables.warning, 298 | thirdPieShadowColor: 'rgba(0, 0, 0, 0)', 299 | }, 300 | 301 | earningLine: { 302 | gradFrom: baseThemeVariables.primary, 303 | gradTo: baseThemeVariables.primary, 304 | 305 | tooltipTextColor: baseThemeVariables.fgText, 306 | tooltipFontWeight: 'normal', 307 | tooltipFontSize: '16', 308 | tooltipBg: baseThemeVariables.bg, 309 | tooltipBorderColor: baseThemeVariables.border2, 310 | tooltipBorderWidth: '1', 311 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 312 | }, 313 | }, 314 | } as NbJSThemeOptions; 315 | -------------------------------------------------------------------------------- /apps/angular-nest-nx/src/app/@theme/styles/theme.default.ts: -------------------------------------------------------------------------------- 1 | import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme'; 2 | 3 | const baseThemeVariables = baseTheme.variables; 4 | 5 | export const DEFAULT_THEME = { 6 | name: 'default', 7 | base: 'default', 8 | variables: { 9 | temperature: { 10 | arcFill: [ 11 | baseThemeVariables.primary, 12 | baseThemeVariables.primary, 13 | baseThemeVariables.primary, 14 | baseThemeVariables.primary, 15 | baseThemeVariables.primary, 16 | ], 17 | arcEmpty: baseThemeVariables.bg2, 18 | thumbBg: baseThemeVariables.bg2, 19 | thumbBorder: baseThemeVariables.primary, 20 | }, 21 | 22 | solar: { 23 | gradientLeft: baseThemeVariables.primary, 24 | gradientRight: baseThemeVariables.primary, 25 | shadowColor: 'rgba(0, 0, 0, 0)', 26 | secondSeriesFill: baseThemeVariables.bg2, 27 | radius: ['80%', '90%'], 28 | }, 29 | 30 | traffic: { 31 | tooltipBg: baseThemeVariables.bg, 32 | tooltipBorderColor: baseThemeVariables.border2, 33 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 34 | tooltipTextColor: baseThemeVariables.fgText, 35 | tooltipFontWeight: 'normal', 36 | 37 | yAxisSplitLine: baseThemeVariables.separator, 38 | 39 | lineBg: baseThemeVariables.border4, 40 | lineShadowBlur: '1', 41 | itemColor: baseThemeVariables.border4, 42 | itemBorderColor: baseThemeVariables.border4, 43 | itemEmphasisBorderColor: baseThemeVariables.primary, 44 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 45 | shadowLineShadow: 'rgba(0, 0, 0, 0)', 46 | gradFrom: baseThemeVariables.bg2, 47 | gradTo: baseThemeVariables.bg2, 48 | }, 49 | 50 | electricity: { 51 | tooltipBg: baseThemeVariables.bg, 52 | tooltipLineColor: baseThemeVariables.fgText, 53 | tooltipLineWidth: '0', 54 | tooltipBorderColor: baseThemeVariables.border2, 55 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 56 | tooltipTextColor: baseThemeVariables.fgText, 57 | tooltipFontWeight: 'normal', 58 | 59 | axisLineColor: baseThemeVariables.border3, 60 | xAxisTextColor: baseThemeVariables.fg, 61 | yAxisSplitLine: baseThemeVariables.separator, 62 | 63 | itemBorderColor: baseThemeVariables.primary, 64 | lineStyle: 'solid', 65 | lineWidth: '4', 66 | lineGradFrom: baseThemeVariables.primary, 67 | lineGradTo: baseThemeVariables.primary, 68 | lineShadow: 'rgba(0, 0, 0, 0)', 69 | 70 | areaGradFrom: baseThemeVariables.bg2, 71 | areaGradTo: baseThemeVariables.bg2, 72 | shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 73 | }, 74 | 75 | bubbleMap: { 76 | titleColor: baseThemeVariables.fgText, 77 | areaColor: baseThemeVariables.bg4, 78 | areaHoverColor: baseThemeVariables.fgHighlight, 79 | areaBorderColor: baseThemeVariables.border5, 80 | }, 81 | 82 | profitBarAnimationEchart: { 83 | textColor: baseThemeVariables.fgText, 84 | 85 | firstAnimationBarColor: baseThemeVariables.primary, 86 | secondAnimationBarColor: baseThemeVariables.success, 87 | 88 | splitLineStyleOpacity: '1', 89 | splitLineStyleWidth: '1', 90 | splitLineStyleColor: baseThemeVariables.separator, 91 | 92 | tooltipTextColor: baseThemeVariables.fgText, 93 | tooltipFontWeight: 'normal', 94 | tooltipFontSize: '16', 95 | tooltipBg: baseThemeVariables.bg, 96 | tooltipBorderColor: baseThemeVariables.border2, 97 | tooltipBorderWidth: '1', 98 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 99 | }, 100 | 101 | trafficBarEchart: { 102 | gradientFrom: baseThemeVariables.warningLight, 103 | gradientTo: baseThemeVariables.warning, 104 | shadow: baseThemeVariables.warningLight, 105 | shadowBlur: '0', 106 | 107 | axisTextColor: baseThemeVariables.fgText, 108 | axisFontSize: '12', 109 | 110 | tooltipBg: baseThemeVariables.bg, 111 | tooltipBorderColor: baseThemeVariables.border2, 112 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 113 | tooltipTextColor: baseThemeVariables.fgText, 114 | tooltipFontWeight: 'normal', 115 | }, 116 | 117 | countryOrders: { 118 | countryBorderColor: baseThemeVariables.border4, 119 | countryFillColor: baseThemeVariables.bg3, 120 | countryBorderWidth: '1', 121 | hoveredCountryBorderColor: baseThemeVariables.primary, 122 | hoveredCountryFillColor: baseThemeVariables.primaryLight, 123 | hoveredCountryBorderWidth: '1', 124 | 125 | chartAxisLineColor: baseThemeVariables.border4, 126 | chartAxisTextColor: baseThemeVariables.fg, 127 | chartAxisFontSize: '16', 128 | chartGradientTo: baseThemeVariables.primary, 129 | chartGradientFrom: baseThemeVariables.primaryLight, 130 | chartAxisSplitLine: baseThemeVariables.separator, 131 | chartShadowLineColor: baseThemeVariables.primaryLight, 132 | 133 | chartLineBottomShadowColor: baseThemeVariables.primary, 134 | 135 | chartInnerLineColor: baseThemeVariables.bg2, 136 | }, 137 | 138 | echarts: { 139 | bg: baseThemeVariables.bg, 140 | textColor: baseThemeVariables.fgText, 141 | axisLineColor: baseThemeVariables.fgText, 142 | splitLineColor: baseThemeVariables.separator, 143 | itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', 144 | tooltipBackgroundColor: baseThemeVariables.primary, 145 | areaOpacity: '0.7', 146 | }, 147 | 148 | chartjs: { 149 | axisLineColor: baseThemeVariables.separator, 150 | textColor: baseThemeVariables.fgText, 151 | }, 152 | 153 | orders: { 154 | tooltipBg: baseThemeVariables.bg, 155 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 156 | tooltipLineWidth: '0', 157 | tooltipBorderColor: baseThemeVariables.border2, 158 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 159 | tooltipTextColor: baseThemeVariables.fgText, 160 | tooltipFontWeight: 'normal', 161 | tooltipFontSize: '20', 162 | 163 | axisLineColor: baseThemeVariables.border4, 164 | axisFontSize: '16', 165 | axisTextColor: baseThemeVariables.fg, 166 | yAxisSplitLine: baseThemeVariables.separator, 167 | 168 | itemBorderColor: baseThemeVariables.primary, 169 | lineStyle: 'solid', 170 | lineWidth: '4', 171 | 172 | // first line 173 | firstAreaGradFrom: baseThemeVariables.bg3, 174 | firstAreaGradTo: baseThemeVariables.bg3, 175 | firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 176 | 177 | // second line 178 | secondLineGradFrom: baseThemeVariables.primary, 179 | secondLineGradTo: baseThemeVariables.primary, 180 | 181 | secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', 182 | secondAreaGradTo: 'rgba(51, 102, 255, 0)', 183 | secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 184 | 185 | // third line 186 | thirdLineGradFrom: baseThemeVariables.success, 187 | thirdLineGradTo: baseThemeVariables.successLight, 188 | 189 | thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', 190 | thirdAreaGradTo: 'rgba(0, 214, 143, 0)', 191 | thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', 192 | }, 193 | 194 | profit: { 195 | bg: baseThemeVariables.bg, 196 | textColor: baseThemeVariables.fgText, 197 | axisLineColor: baseThemeVariables.border4, 198 | splitLineColor: baseThemeVariables.separator, 199 | areaOpacity: '1', 200 | 201 | axisFontSize: '16', 202 | axisTextColor: baseThemeVariables.fg, 203 | 204 | // first bar 205 | firstLineGradFrom: baseThemeVariables.bg3, 206 | firstLineGradTo: baseThemeVariables.bg3, 207 | firstLineShadow: 'rgba(0, 0, 0, 0)', 208 | 209 | // second bar 210 | secondLineGradFrom: baseThemeVariables.primary, 211 | secondLineGradTo: baseThemeVariables.primary, 212 | secondLineShadow: 'rgba(0, 0, 0, 0)', 213 | 214 | // third bar 215 | thirdLineGradFrom: baseThemeVariables.success, 216 | thirdLineGradTo: baseThemeVariables.successLight, 217 | thirdLineShadow: 'rgba(0, 0, 0, 0)', 218 | }, 219 | 220 | orderProfitLegend: { 221 | firstItem: baseThemeVariables.success, 222 | secondItem: baseThemeVariables.primary, 223 | thirdItem: baseThemeVariables.bg3, 224 | }, 225 | 226 | visitors: { 227 | tooltipBg: baseThemeVariables.bg, 228 | tooltipLineColor: 'rgba(0, 0, 0, 0)', 229 | tooltipLineWidth: '1', 230 | tooltipBorderColor: baseThemeVariables.border2, 231 | tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', 232 | tooltipTextColor: baseThemeVariables.fgText, 233 | tooltipFontWeight: 'normal', 234 | tooltipFontSize: '20', 235 | 236 | axisLineColor: baseThemeVariables.border4, 237 | axisFontSize: '16', 238 | axisTextColor: baseThemeVariables.fg, 239 | yAxisSplitLine: baseThemeVariables.separator, 240 | 241 | itemBorderColor: baseThemeVariables.primary, 242 | lineStyle: 'dotted', 243 | lineWidth: '6', 244 | lineGradFrom: '#ffffff', 245 | lineGradTo: '#ffffff', 246 | lineShadow: 'rgba(0, 0, 0, 0)', 247 | 248 | areaGradFrom: baseThemeVariables.primary, 249 | areaGradTo: baseThemeVariables.primaryLight, 250 | 251 | innerLineStyle: 'solid', 252 | innerLineWidth: '1', 253 | 254 | innerAreaGradFrom: baseThemeVariables.success, 255 | innerAreaGradTo: baseThemeVariables.success, 256 | }, 257 | 258 | visitorsLegend: { 259 | firstIcon: baseThemeVariables.success, 260 | secondIcon: baseThemeVariables.primary, 261 | }, 262 | 263 | visitorsPie: { 264 | firstPieGradientLeft: baseThemeVariables.success, 265 | firstPieGradientRight: baseThemeVariables.success, 266 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 267 | firstPieRadius: ['70%', '90%'], 268 | 269 | secondPieGradientLeft: baseThemeVariables.warning, 270 | secondPieGradientRight: baseThemeVariables.warningLight, 271 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 272 | secondPieRadius: ['60%', '97%'], 273 | shadowOffsetX: '0', 274 | shadowOffsetY: '0', 275 | }, 276 | 277 | visitorsPieLegend: { 278 | firstSection: baseThemeVariables.warning, 279 | secondSection: baseThemeVariables.success, 280 | }, 281 | 282 | earningPie: { 283 | radius: ['65%', '100%'], 284 | center: ['50%', '50%'], 285 | 286 | fontSize: '22', 287 | 288 | firstPieGradientLeft: baseThemeVariables.success, 289 | firstPieGradientRight: baseThemeVariables.success, 290 | firstPieShadowColor: 'rgba(0, 0, 0, 0)', 291 | 292 | secondPieGradientLeft: baseThemeVariables.primary, 293 | secondPieGradientRight: baseThemeVariables.primary, 294 | secondPieShadowColor: 'rgba(0, 0, 0, 0)', 295 | 296 | thirdPieGradientLeft: baseThemeVariables.warning, 297 | thirdPieGradientRight: baseThemeVariables.warning, 298 | thirdPieShadowColor: 'rgba(0, 0, 0, 0)', 299 | }, 300 | 301 | earningLine: { 302 | gradFrom: baseThemeVariables.primary, 303 | gradTo: baseThemeVariables.primary, 304 | 305 | tooltipTextColor: baseThemeVariables.fgText, 306 | tooltipFontWeight: 'normal', 307 | tooltipFontSize: '16', 308 | tooltipBg: baseThemeVariables.bg, 309 | tooltipBorderColor: baseThemeVariables.border2, 310 | tooltipBorderWidth: '1', 311 | tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', 312 | }, 313 | }, 314 | } as NbJSThemeOptions; 315 | --------------------------------------------------------------------------------