feat: Enabled Strict Templates

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

@@ -16,5 +16,5 @@ export interface TrafficList {
 }
 
 export abstract class TrafficListData {
-  abstract getTrafficListData(period: string): Observable<TrafficList>;
+  abstract getTrafficListData(period: string): Observable<TrafficList[]>;
 }

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

@@ -7,7 +7,7 @@ import { TrafficList, TrafficListData } from '../data/traffic-list';
 export class TrafficListService extends TrafficListData {
 
   private getRandom = (roundTo: number) => Math.round(Math.random() * roundTo);
-  private data = {};
+  private data: Record<string, TrafficList[]> = {};
 
   constructor(private period: PeriodsService) {
     super();
@@ -79,7 +79,7 @@ export class TrafficListService extends TrafficListData {
     }, []);
   }
 
-  getTrafficListData(period: string): Observable<TrafficList> {
+  getTrafficListData(period: string): Observable<TrafficList[]> {
     return observableOf(this.data[period]);
   }
 }

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

@@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
   `,
 })
 export class SearchInputComponent {
-  @ViewChild('input', { static: true }) input: ElementRef;
+  @ViewChild('input', { static: true }) input: ElementRef<HTMLInputElement>;
 
   @Output() search: EventEmitter<string> = new EventEmitter<string>();
 
@@ -29,7 +29,7 @@ export class SearchInputComponent {
     this.isInputShown = false;
   }
 
-  onInput(val: string) {
-    this.search.emit(val);
+  onInput(val: Event) {
+    this.search.emit(this.input.nativeElement.value);
   }
 }

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

@@ -40,7 +40,7 @@ export class DashboardComponent implements OnDestroy {
     type: 'warning',
   };
 
-  statusCards: string;
+  statusCards: CardSettings[];
 
   commonStatusCardsSet: CardSettings[] = [
     this.lightCard,

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

@@ -12,7 +12,7 @@ <h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
 
     <div class="progress-wrap">
       <input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
-             (input)="setProgress(duration.value)" #duration>
+             (input)="setProgress(duration.valueAsNumber)" #duration>
       <div class="progress-foreground" [style.width.%]="getProgress()"></div>
     </div>
 
@@ -48,7 +48,7 @@ <h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
       </button>
       <div class="progress-wrap">
         <input type="range" class="progress" [value]="getVolume()" max="100"
-               (input)="setVolume(volume.value)" #volume>
+               (input)="setVolume(volume.valueAsNumber)" #volume>
         <div class="progress-foreground" [style.width.%]="getVolume()"></div>
       </div>
       <button nbButton ghost size="small" (click)="setVolume(100)">

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts

@@ -34,8 +34,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   @Input() maxLeap = 0.4;
 
   value = 50;
-  @Output() valueChange = new EventEmitter<Number>();
-  @Input('value') set setValue(value) {
+  @Output() valueChange = new EventEmitter<number>();
+  @Input('value') set setValue(value: number) {
     this.value = value;
   }
 
@@ -72,14 +72,17 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   translateYValue = 0;
   thickness = 6;
   pinRadius = 10;
-  colors: any = [];
+  colors: string[] = [];
 
   styles = {
     viewBox: '0 0 300 300',
     arcTranslateStr: 'translate(0, 0)',
     clipPathStr: '',
     gradArcs: [],
-    nonSelectedArc: {},
+    nonSelectedArc: {
+      color: '',
+      d: '',
+    },
     thumbPosition: { x: 0, y: 0 },
     blurRadius: 15,
   };

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

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
+import { NgxLegendItemColor } from '../../legend-chart/enum.legend-item-color';
 
 
 @Component({
@@ -17,7 +18,7 @@ export class ChartPanelHeaderComponent implements OnDestroy {
   @Input() type: string = 'week';
 
   types: string[] = ['week', 'month', 'year'];
-  chartLegend: {iconColor: string; title: string}[];
+  chartLegend: {iconColor: NgxLegendItemColor; title: string}[];
   breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
   breakpoints: any;
   currentTheme: string;

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

@@ -16,7 +16,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
         <ngx-country-orders-chart [countryName]="countryName"
                                   [data]="countryData"
                                   [labels]="countriesCategories"
-                                  maxValue="20">
+                                  [maxValue]="20">
         </ngx-country-orders-chart>
       </nb-card-body>
     </nb-card>

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

@@ -13,7 +13,7 @@ export class TrafficFrontCardComponent implements OnDestroy {
 
   private alive = true;
 
-  @Input() frontCardData: TrafficList;
+  @Input() frontCardData: TrafficList[];
 
   currentTheme: string;
 

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.ts

@@ -13,7 +13,7 @@ export class TrafficRevealCardComponent implements OnDestroy {
   private alive = true;
 
   trafficBarData: TrafficBar;
-  trafficListData: TrafficList;
+  trafficListData: TrafficList[];
   revealed = false;
   period: string = 'week';
 

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

@@ -3,6 +3,7 @@ import { takeWhile } from 'rxjs/operators';
 import { NbThemeService } from '@nebular/theme';
 import { OutlineData, VisitorsAnalyticsData } from '../../../@core/data/visitors-analytics';
 import { forkJoin } from 'rxjs';
+import { NgxLegendItemColor } from '../legend-chart/enum.legend-item-color';
 
 
 @Component({
@@ -14,7 +15,7 @@ export class ECommerceVisitorsAnalyticsComponent implements OnDestroy {
   private alive = true;
 
   pieChartValue: number;
-  chartLegend: {iconColor: string; title: string}[];
+  chartLegend: {iconColor: NgxLegendItemColor; title: string}[];
   visitorsAnalyticsData: { innerLine: number[]; outerLine: OutlineData[]; };
 
   constructor(private themeService: NbThemeService,

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

@@ -2,6 +2,7 @@ import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { delay, takeWhile } from 'rxjs/operators';
 import { LayoutService } from '../../../../@core/utils/layout.service';
+import { NgxLegendItemColor } from '../../legend-chart/enum.legend-item-color';
 
 
 @Component({
@@ -16,7 +17,7 @@ export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDe
   @Input() value: number;
 
   option: any = {};
-  chartLegend: { iconColor: string; title: string }[];
+  chartLegend: { iconColor: NgxLegendItemColor; title: string }[];
   echartsIntance: any;
 
   constructor(private theme: NbThemeService,

src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.html

@@ -183,7 +183,7 @@
     <nb-card>
       <nb-card-header>Select Sizes</nb-card-header>
       <nb-card-body class="select-group">
-        <nb-select placeholder="XSmall" size="xsmall">
+        <nb-select placeholder="Tiny" size="tiny">
           <nb-option value="1">Option 1</nb-option>
           <nb-option value="2">Option 2</nb-option>
           <nb-option value="3">Option 3</nb-option>
@@ -210,6 +210,13 @@
           <nb-option value="3">Option 3</nb-option>
           <nb-option value="4">Option 4</nb-option>
         </nb-select>
+
+        <nb-select placeholder="Giant" size="giant">
+          <nb-option value="1">Option 1</nb-option>
+          <nb-option value="2">Option 2</nb-option>
+          <nb-option value="3">Option 3</nb-option>
+          <nb-option value="4">Option 4</nb-option>
+        </nb-select>
       </nb-card-body>
     </nb-card>
   </div>

src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.html

@@ -1,4 +1,4 @@
-<nb-card size="xsmall">
+<nb-card size="tiny">
   <nb-card-body>
     <nb-tabset fullWidth (changeTab)="toggleLoadingAnimation()">
       <nb-tab tabTitle="Tab 1" [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="giant">

tsconfig.json

@@ -1,6 +1,13 @@
 {
   "compileOnSave": false,
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictTemplates": true,
+    "fullTemplateTypeCheck": true
+  },
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
     "importHelpers": true,
     "module": "es2020",
     "outDir": "./dist/out-tsc",