fix: lint and material theme (#53)

angular.json

@@ -25,7 +25,10 @@
               "apps/breadcrumb-demo/src/favicon.ico",
               "apps/breadcrumb-demo/src/assets"
             ],
-            "styles": ["apps/breadcrumb-demo/src/styles.scss"],
+            "styles": [
+              "apps/breadcrumb-demo/src/assets/scss/material-theme.scss",
+              "apps/breadcrumb-demo/src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {

apps/breadcrumb-demo-e2e/src/integration/default.spec.ts

@@ -1,9 +1,8 @@
 import { getDefaultBreadcrumbs } from '../support/app.po';
-import { resolve } from 'cypress/types/bluebird';
+//import { resolve } from 'cypress/types/bluebird';
 
 describe('breadcrumb-demo', () => {
   // beforeEach(() => cy.visit('/'));
-  let mentorDetailsPath = '';
   it('should display default breadcrumbs for home', () => {
     cy.visit('/');
     getDefaultBreadcrumbs().contains('my home');
@@ -23,7 +22,6 @@ describe('breadcrumb-demo', () => {
   it('should have valid path and breadcrumbs for Mentor Details', () => {
     cy.get('bd-mentor-list .mat-card-avatar').eq(0).click();
     cy.location().should((loc) => {
-      mentorDetailsPath = loc.pathname;
       expect(loc.search).to.eq('?type=details');
     });
     getDefaultBreadcrumbs().contains('my home');

apps/breadcrumb-demo-e2e/src/support/commands.ts

@@ -9,7 +9,7 @@
 // ***********************************************
 // eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
-  interface Chainable<Subject> {
+  interface Chainable {
     login(email: string, password: string): void;
   }
 }

apps/breadcrumb-demo/src/app/app.component.ts

@@ -1,19 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'bd-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
   title = 'xng-breadcrumb-app';
   darkMode = false;
 
   constructor(private router: Router) {}
 
-  ngOnInit() {}
-
   updateTheme(theme) {
     this.darkMode = theme === 'dark';
   }

apps/breadcrumb-demo/src/app/connect/connect-success/connect-success.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'bd-connect-success',
   templateUrl: './connect-success.component.html',
   styleUrls: ['./connect-success.component.scss'],
 })
-export class ConnectSuccessComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class ConnectSuccessComponent {}

apps/breadcrumb-demo/src/app/connect/connect/connect.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'bd-connect',
   templateUrl: './connect.component.html',
   styleUrls: ['./connect.component.scss'],
 })
-export class ConnectComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class ConnectComponent {}

apps/breadcrumb-demo/src/app/core/in-memory-data.service.ts

@@ -24,7 +24,10 @@ export const allLanguages = [
   'HTML',
 ];
 
-const getRandomArray = (sourceArray: Array<any>, targetArrayLength: number) => {
+const getRandomArray = (
+  sourceArray: Array<unknown>,
+  targetArrayLength: number
+) => {
   return sourceArray
     .sort(() => 0.5 - Math.random())
     .slice(0, targetArrayLength);
@@ -56,8 +59,6 @@ const persons = (count = 10) => {
   providedIn: 'root',
 })
 export class InMemoryDataService implements InMemoryDbService {
-  constructor() {}
-
   createDb() {
     const mentors = persons(10);
     const mentees = persons(10);

apps/breadcrumb-demo/src/app/core/navbar/navbar.component.ts

@@ -1,19 +1,15 @@
-import { Component, OnInit, Output } from '@angular/core';
+import { Component, Output } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'bd-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
 })
-export class NavbarComponent implements OnInit {
+export class NavbarComponent {
   theme = 'light';
   @Output() themeChanged: EventEmitter<string> = new EventEmitter();
 
-  constructor() {}
-
-  ngOnInit() {}
-
   toggleTheme() {
     this.theme = this.theme === 'light' ? 'dark' : 'light';
     this.themeChanged.emit(this.theme);

apps/breadcrumb-demo/src/app/dashboard/dashboard/dashboard.component.ts

@@ -1,11 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 @Component({
   selector: 'bd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class DashboardComponent {}

apps/breadcrumb-demo/src/app/home/home.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'bd-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class HomeComponent {}

apps/breadcrumb-demo/src/app/mentee/mentee-add/mentee-add.component.ts

@@ -21,7 +21,7 @@ import { allLanguages } from '../../core/in-memory-data.service';
   styleUrls: ['./mentee-add.component.scss'],
 })
 export class MenteeAddComponent implements OnInit {
-  mentee: any;
+  mentee: unknown;
   menteeFG: FormGroup;
   separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -71,7 +71,7 @@ export class MenteeAddComponent implements OnInit {
       mentee.available = this.menteeFG.value.available;
       mentee.skills = this.skills;
 
-      this.dataService.addMentee(mentee).subscribe((response: any) => {
+      this.dataService.addMentee(mentee).subscribe(() => {
         const navigationExtras: NavigationExtras = {
           queryParams: { addedMentor: mentee.id },
         };

apps/breadcrumb-demo/src/app/mentee/mentee-details/mentee-details.component.ts

@@ -10,7 +10,7 @@ import { DataService } from '../../core/data.service';
   styleUrls: ['./mentee-details.component.scss'],
 })
 export class MenteeDetailsComponent implements OnInit {
-  mentee: any;
+  mentee: unknown;
   constructor(
     private breadcrumbService: BreadcrumbService,
     private dataService: DataService,

apps/breadcrumb-demo/src/app/mentee/mentee-edit/mentee-edit.component.ts

@@ -21,7 +21,7 @@ import { Mentee } from '../../shared/models/mentee';
   styleUrls: ['./mentee-edit.component.scss'],
 })
 export class MenteeEditComponent implements OnInit {
-  menteeId: any;
+  menteeId: string;
   menteeFG: FormGroup;
   separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -89,7 +89,7 @@ export class MenteeEditComponent implements OnInit {
         queryParams: { editedMentee: this.menteeId },
       };
 
-      this.dataService.updateMentee(mentee).subscribe((response: any) => {
+      this.dataService.updateMentee(mentee).subscribe(() => {
         this.snackBar.open(`Mentee updated - ${mentee.name}`, 'Ok');
         this.router.navigate(['mentee', this.menteeId], navigationExtras);
       });

apps/breadcrumb-demo/src/app/mentee/mentee/mentee.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'bd-mentee',
   templateUrl: './mentee.component.html',
   styleUrls: ['./mentee.component.scss'],
 })
-export class MenteeComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class MenteeComponent {}

apps/breadcrumb-demo/src/app/mentor/mentor-add/mentor-add.component.ts

@@ -22,7 +22,7 @@ import { BreadcrumbService } from '@xng/xng-breadcrumb';
   styleUrls: ['./mentor-add.component.scss'],
 })
 export class MentorAddComponent implements OnInit {
-  mentor: any;
+  mentor: unknown;
   mentorFG: FormGroup;
   separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -74,7 +74,7 @@ export class MentorAddComponent implements OnInit {
       mentor.available = this.mentorFG.value.available;
       mentor.skills = this.skills;
 
-      this.dataService.addMentor(mentor).subscribe((response: any) => {
+      this.dataService.addMentor(mentor).subscribe(() => {
         const navigationExtras: NavigationExtras = {
           queryParams: { addedMentor: mentor.id },
         };

apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts

@@ -10,7 +10,7 @@ import { DataService } from '../../core/data.service';
   styleUrls: ['./mentor-details.component.scss'],
 })
 export class MentorDetailsComponent implements OnInit {
-  mentor: any;
+  mentor: { name: string };
   constructor(
     private breadcrumbService: BreadcrumbService,
     private dataService: DataService,

apps/breadcrumb-demo/src/app/mentor/mentor-edit/mentor-edit.component.ts

@@ -21,7 +21,7 @@ import { BreadcrumbService } from '@xng/xng-breadcrumb';
   styleUrls: ['./mentor-edit.component.scss'],
 })
 export class MentorEditComponent implements OnInit {
-  mentorId: any;
+  mentorId: string;
   mentorFG: FormGroup;
   separatorKeysCodes: number[] = [ENTER, COMMA];
 
@@ -89,7 +89,7 @@ export class MentorEditComponent implements OnInit {
         queryParams: { editedMentee: this.mentorId },
       };
 
-      this.dataService.updateMentor(mentor).subscribe((response: any) => {
+      this.dataService.updateMentor(mentor).subscribe(() => {
         this.snackBar.open(`Mentor updated - ${mentor.name}`, 'Ok');
         this.router.navigate(['mentor', this.mentorId], navigationExtras);
       });

apps/breadcrumb-demo/src/app/mentor/mentor/mentor.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'bd-mentor',
   templateUrl: './mentor.component.html',
   styleUrls: ['./mentor.component.scss'],
 })
-export class MentorComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}
+export class MentorComponent {}

apps/breadcrumb-demo/src/assets/scss/material-theme.scss

@@ -0,0 +1,26 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core();
+
+$xng-app-primary: mat-palette($mat-teal);
+$xng-app-accent: mat-palette($mat-green, A200, A100, A400);
+$xng-app-warn: mat-palette($mat-red);
+$xng-light-theme: mat-light-theme(
+  $xng-app-primary,
+  $xng-app-accent,
+  $xng-app-warn
+);
+$xng-dark-theme: mat-dark-theme(
+  $xng-app-primary,
+  $xng-app-accent,
+  $xng-app-warn
+);
+
+@include angular-material-theme($xng-light-theme);
+
+.xng-dark-theme {
+  @include angular-material-theme($xng-dark-theme);
+}

apps/breadcrumb-demo/src/styles.scss

@@ -1,5 +1,3 @@
-@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
-
 html,
 body {
   height: 100%;

apps/demo/src/app/Modules/features/designer/components/designer-dashboard/designer-dashboard.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-designer-dashboard',
   templateUrl: './designer-dashboard.component.html',
   styleUrls: ['./designer-dashboard.component.scss'],
 })
-export class DesignerDashboardComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
+export class DesignerDashboardComponent {}

apps/demo/src/app/Modules/features/library/components/view-library/view-library.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-view-library',
   templateUrl: './view-library.component.html',
   styleUrls: ['./view-library.component.scss'],
 })
-export class ViewLibraryComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
+export class ViewLibraryComponent {}

apps/demo/src/app/Modules/layout/components/footer/footer.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
 })
-export class FooterComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
+export class FooterComponent {}