chore: integrate new lint rules and fix all issues

.eslintrc.ci.js

@@ -0,0 +1,18 @@
+module.exports = {
+  "extends": ["@terminus/eslint-config-frontend"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn"
+        ]
+      }
+    ]
+  }
+}

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  "extends": ["@terminus/eslint-config-frontend/development"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn"
+        ]
+      }
+    ]
+  }
+}

demo/app/components/autocomplete/autocomplete.component.ts

@@ -14,16 +14,21 @@ import {
   of,
   Subscription,
 } from 'rxjs';
-import { delay, map, startWith, switchMap } from 'rxjs/operators';
+import {
+  delay,
+  map,
+  startWith,
+  switchMap,
+} from 'rxjs/operators';
 
 import {
   TsAutocompleteComparatorFn,
   TsAutocompleteComponent,
 } from '@terminus/ui/autocomplete';
 
-interface GitHubUser {
-  [key: string]: any;
-}
+// tslint:disable-next-line no-any
+type GitHubUser = Record<string, any>;
+
 
 // Values used to seed initial selections
 const INITIAL: GitHubUser[] = [
@@ -96,6 +101,7 @@ const INJECTION_ITEM = {
 interface OptionType {
   id: string;
   login: string;
+  // tslint:disable-next-line no-any
   [key: string]: any;
 }
 
@@ -128,12 +134,12 @@ export class AutocompleteComponent implements OnInit {
   inProgress = false;
   delayApiResponse = false;
   changesSubscription$!: Subscription;
-  users$: any;
+  users$: Observable<GitHubUser[]> | undefined;
   minCharacters = 4;
 
 
   ngOnInit() {
-    this.changesSubscription$ = this.auto.selection.subscribe((v: any) => {
+    this.changesSubscription$ = this.auto.selection.subscribe((v: OptionType) => {
       console.log('DEMO: subscription change ', v);
     });
 
@@ -148,7 +154,7 @@ export class AutocompleteComponent implements OnInit {
             return this.http.get(`https://api.github.com/search/users?q=${term}`)
               .pipe(
                 delay(this.delayApiResponse ? 3000 : 0),
-                map((response: any) => {
+                map((response) => {
                   this.inProgress = false;
                   const items: GitHubUser[] = response['items'];
 
@@ -193,9 +199,9 @@ export class AutocompleteComponent implements OnInit {
     }
   }
 
-  comparator: TsAutocompleteComparatorFn = (v: any) => v.id;
+  comparator: TsAutocompleteComparatorFn<OptionType> = (v: OptionType) => v.id;
 
-  displayFn(user?: any): string | undefined {
+  displayFn(user?: OptionType): string | undefined {
     return user ? user.login : undefined;
   }
 

demo/app/components/chart/chart.component.ts

@@ -2,22 +2,27 @@ import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow';
 import * as am4charts from '@amcharts/amcharts4/charts';
 import * as am4core from '@amcharts/amcharts4/core';
 import * as am4maps from '@amcharts/amcharts4/maps';
+import { Component } from '@angular/core';
 import {
-  AfterViewInit,
-  Component,
-} from '@angular/core';
-import {
+  TsChart,
+  tsChartChordTypeCheck,
   TsChartComponent,
+  tsChartMapTypeCheck,
+  tsChartPieTypeCheck,
+  tsChartRadarTypeCheck,
+  tsChartSankeyTypeCheck,
+  tsChartTreeTypeCheck,
   TsChartVisualizationOptions,
+  tsChartXYTypeCheck
 } from '@terminus/ui/chart';
 
-const XY_DATA: {[key: string]: any}[] = [];
+const XY_DATA: Record<string, any>[] = [];
 let visits = 10;
 for (let i = 1; i < 366; i++) {
   visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
-  XY_DATA.push({ date: new Date(2018, 0, i), name: 'name' + i, value: visits });
+  XY_DATA.push({ date: new Date(2018, 0, i), name: `name${i}`, value: visits });
 }
-const MAP_DATA: {[key: string]: any}[] = [{
+const MAP_DATA: Record<string, any>[] = [{
   latitude: 48.856614,
   longitude: 2.352222,
   title: 'Paris',
@@ -38,40 +43,39 @@ const MAP_DATA: {[key: string]: any}[] = [{
   selector: 'demo-chart',
   templateUrl: './chart.component.html',
 })
-export class ChartComponent implements AfterViewInit {
+export class ChartComponent {
   public visualizationOptions: TsChartVisualizationOptions[] = [
     'xy',
     'pie',
     'map',
     'radar',
-    'treemap',
+    'tree',
     'sankey',
     'chord',
   ];
   visualization: TsChartVisualizationOptions = this.visualizationOptions[0];
 
 
-  ngAfterViewInit() {
-  }
-
-  chartCreated(chart) {
+  chartCreated(chart: TsChart) {
     this.setChartData(chart, this.visualization);
   }
 
 
   // Currently using `any` here as I'm not sure how to let the consumer know what type is returned
-  setChartData(chart: any, type: TsChartVisualizationOptions) {
+  setChartData(chart: TsChart, type: TsChartVisualizationOptions) {
     /**
      * XY
      */
-    if (type === 'xy') {
+    if (tsChartXYTypeCheck(chart)) {
       chart.data = XY_DATA;
 
       const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
       dateAxis.renderer.grid.template.location = 0;
 
       const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
-      valueAxis.tooltip.disabled = true;
+      if (valueAxis.tooltip) {
+        valueAxis.tooltip.disabled = true;
+      }
       valueAxis.renderer.minWidth = 35;
 
       const series = chart.series.push(new am4charts.LineSeries());
@@ -89,12 +93,9 @@ export class ChartComponent implements AfterViewInit {
     /**
      * MAP
      */
-    if (type === 'map') {
+    if (tsChartMapTypeCheck(chart)) {
       const polygonSeries = new am4maps.MapPolygonSeries();
       polygonSeries.useGeodata = true;
-      /*
-       *polygonSeries.exclude = ['AQ'];
-       */
       polygonSeries.include = [
         'PT', 'ES', 'FR', 'DE', 'BE', 'NL', 'IT', 'AT', 'GB', 'IE', 'CH', 'LU', 'GF', 'SR', 'GY', 'VE', 'CO', 'EC', 'PE', 'BO', 'CL', 'AR',
         'PY', 'UY', 'US', 'MX', 'CA', 'BR', 'PA', 'DR', 'HT', 'JM', 'CU', 'PA', 'CR', 'NI', 'HN', 'GT', 'MX',
@@ -150,7 +151,7 @@ export class ChartComponent implements AfterViewInit {
     /**
      * PIE
      */
-    if (type === 'pie') {
+    if (tsChartPieTypeCheck(chart)) {
       chart.data = [
         {
           country: 'Lithuania',
@@ -204,7 +205,7 @@ export class ChartComponent implements AfterViewInit {
     /**
      * RADAR
      */
-    if (type === 'radar') {
+    if (tsChartRadarTypeCheck(chart)) {
       chart.data = [
         {
           category: 'One',
@@ -266,12 +267,13 @@ export class ChartComponent implements AfterViewInit {
 
       chart.padding(20, 20, 20, 20);
 
-      const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+      // NOTE: Not sure why the following `as any`s are needed. This code comes directly from AMCharts docs.
+      const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis() as any);
       categoryAxis.dataFields.category = 'category';
       categoryAxis.renderer.labels.template.location = 0.5;
       categoryAxis.renderer.tooltipLocation = 0.5;
 
-      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis() as any);
       valueAxis.tooltip.disabled = true;
       valueAxis.renderer.labels.template.horizontalCenter = 'left';
       valueAxis.min = 0;
@@ -314,7 +316,7 @@ export class ChartComponent implements AfterViewInit {
 
       chart.cursor = new am4charts.RadarCursor();
       chart.cursor.xAxis = categoryAxis;
-      chart.cursor.fullWidthXLine = true;
+      chart.cursor.fullWidthLineX = true;
       chart.cursor.lineX.strokeOpacity = 0;
       chart.cursor.lineX.fillOpacity = 0.1;
       chart.cursor.lineX.fill = am4core.color('#000000');
@@ -323,7 +325,7 @@ export class ChartComponent implements AfterViewInit {
     /**
      * TREEMAP
      */
-    if (type === 'treemap') {
+    if (tsChartTreeTypeCheck(chart)) {
       chart.data = [{
         name: 'First',
         children: [
@@ -401,7 +403,7 @@ export class ChartComponent implements AfterViewInit {
     /**
      * SANKEY
      */
-    if (type === 'sankey') {
+    if (tsChartSankeyTypeCheck(chart)) {
       // Set data
       chart.data = [
         { from: 'A', to: 'D', value: 10, nodeColor: '#06D6A0' },
@@ -435,7 +437,7 @@ export class ChartComponent implements AfterViewInit {
     /**
      * CHORD
      */
-    if (type === 'chord') {
+    if (tsChartChordTypeCheck(chart)) {
       chart.data = [
         { from: 'A', to: 'D', value: 10, nodeColor: '#CDCDCD' },
         { from: 'B', to: 'D', value: 8, nodeColor: '#06D6A0', linkColor: '#06D6A0', linkOpacity: 1 },

demo/app/components/file-upload/file-upload.component.ts

@@ -173,7 +173,7 @@ export class FileUploadComponent {
   }
 
 
-  mimeTypeChange(change: TsSelectChange) {
+  mimeTypeChange(change: TsSelectChange<string[]>) {
     if (change.value.length < 1) {
       this.mimeTypes = ['image/png', 'image/jpg', 'image/jpeg'];
     }

demo/app/components/login-form/login-form.component.html

@@ -1,8 +1,13 @@
 <ts-card>
+  <div tsVerticalSpacing>
+    <button (click)="resetForm()">Reset Form</button>
+  </div>
+
   <ts-login-form
     [inProgress]="progress"
     [isRedirecting]="isRedirecting"
     [triggerFormReset]="reset"
     (submit)="formSubmission($event)"
+    tsVerticalSpacing
   ></ts-login-form>
 </ts-card>

demo/app/components/login-form/login-form.component.ts

@@ -27,4 +27,15 @@ export class LoginFormComponent {
     }, 1000);
   }
 
+  resetForm() {
+    console.log('in demo reset');
+    setTimeout(() => {
+      this.reset = true;
+
+      setTimeout(() => {
+        this.reset = false;
+      }, 10);
+    }, 10);
+  }
+
 }

demo/app/components/navigation/navigation.component.ts

@@ -82,7 +82,7 @@ export class NavigationComponent {
    *
    * @param {Object} item The navigation item
    */
-  triggerAction(payload: TsNavigationPayload): void {
+  public triggerAction(payload: TsNavigationPayload): void {
     console.log('DEMO: triggerAction: ', payload);
 
     if (payload.event.metaKey) {
@@ -95,7 +95,7 @@ export class NavigationComponent {
 
   }
 
-  updateNav(): void {
+  public updateNav(): void {
     const newNav = NAV_ITEMS_MOCK.slice(0);
     newNav.unshift(NEW_NAV_ITEM);
     this.navigationItems$ = of(newNav);

demo/app/components/paginator/paginator.component.html

@@ -21,7 +21,7 @@ <h3 tsCardTitle tsVerticalSpacing>
 
   <label>
     Pagination is zero-based:
-    <input type="checkbox" [(ngModel)]="zeroBased">
+    <input type="checkbox" [(ngModel)]="zeroBased" (ngModelChange)="updatePages($event)">
   </label>
 </ts-card>
 

demo/app/components/paginator/paginator.component.ts

@@ -1,5 +1,5 @@
 import {
-  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ViewChild,
 } from '@angular/core';
@@ -14,26 +14,35 @@ import { TsStyleThemeTypes } from '@terminus/ui/utilities';
   selector: 'demo-paginator',
   templateUrl: './paginator.component.html',
 })
-export class PaginatorComponent implements AfterViewInit {
+export class PaginatorComponent {
   myTheme: TsStyleThemeTypes = 'primary';
   recordCount = 114;
   showSelector = true;
   currentPageIndex = 0;
   location = 'below';
   pages: number[] = [0, 1, 2, 3, 4, 5];
-  zeroBased = false;
+  zeroBased = true;
 
   @ViewChild(TsPaginatorComponent)
   paginator!: TsPaginatorComponent;
 
 
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.pages = Array.apply(null, {length: this.paginator.pagesArray.length}).map(Number.call, Number);
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+  ) {}
+
+
+  updatePages(isZeroBased: boolean): void {
+    Promise.resolve().then(() => {
+      if (isZeroBased) {
+        this.pages = Array.from(Array(this.paginator.pagesArray.length).keys());
+      } else {
+        this.pages = Array.from(Array(this.paginator.pagesArray.length).keys()).map(v => ++v);
+      }
+      this.changeDetectorRef.detectChanges();
     });
   }
 
-
   onPageSelect(e: TsPaginatorMenuItem): void {
     console.log('DEMO: page selected: ', e);
   }