chore(angular): add toggle subtitle on all examples & improve eslint (#1984)

* chore(angular): add toggle subtitle on all examples & improve eslint

Author: ghiscoding

frameworks/angular-slickgrid/eslint.config.mjs

@@ -1,12 +1,23 @@
 import angular from 'angular-eslint';
 import eslint from '@eslint/js';
 import cypress from 'eslint-plugin-cypress/flat';
+import globals from 'globals';
 import n from 'eslint-plugin-n';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   {
-    ignores: ['.angular/*', 'coverage/'],
+    ignores: [
+      '**/*.spec.ts',
+      '**/*.cy.ts',
+      '.angular/*',
+      'dist/',
+      'coverage/',
+      'test/',
+      '**/environment.*.ts',
+      '**/grid-remote.component.ts',
+      '**/public_api.ts',
+    ],
   },
   {
     extends: [
@@ -22,12 +33,25 @@ export default tseslint.config(
     },
     // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
     files: ['**/*.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.es2021,
+        ...globals.browser,
+      },
+      parser: tseslint.parser,
+      parserOptions: {
+        project: ['./tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
     // Set the custom processor which will allow us to have our inline Component templates extracted
     // and treated as if they are HTML files (and therefore have the .html config below applied to them)
     processor: angular.processInlineTemplates,
     rules: {
       '@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'app', style: 'camelCase' }],
       '@angular-eslint/component-selector': ['error', { type: 'element', style: 'kebab-case' }],
+      '@typescript-eslint/consistent-type-exports': 'error',
+      // '@typescript-eslint/consistent-type-imports': ['warn', { prefer: 'type-imports' }],
       '@typescript-eslint/array-type': 'off',
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-empty-function': 'off',

frameworks/angular-slickgrid/package.json

@@ -87,6 +87,7 @@
     "@angular/platform-browser": "^19.2.11",
     "@angular/platform-browser-dynamic": "^19.2.11",
     "@angular/router": "^19.2.11",
+    "@eslint/js": "catalog:",
     "@faker-js/faker": "catalog:",
     "@fnando/sparkline": "catalog:",
     "@formkit/tempo": "catalog:",
@@ -116,6 +117,7 @@
     "eslint": "^9.26.0",
     "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-n": "^17.18.0",
+    "globals": "catalog:",
     "jsdom": "catalog:",
     "native-copyfiles": "catalog:",
     "ng-packagr": "^19.2.2",

frameworks/angular-slickgrid/src/demos/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule, provideRouter } from '@angular/router';
+import { type Routes, RouterModule, provideRouter } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { HomeComponent } from './examples/home.component';

frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentEditor.ts

@@ -1,14 +1,14 @@
-import { ComponentRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import type { ComponentRef } from '@angular/core';
+import type { Subscription } from 'rxjs';
 import {
   AngularUtilService,
-  Column,
-  ColumnEditor,
-  Editor,
-  EditorValidator,
-  EditorValidationResult,
-  GridOption,
-  SlickGrid,
+  type Column,
+  type ColumnEditor,
+  type Editor,
+  type EditorValidator,
+  type EditorValidationResult,
+  type GridOption,
+  type SlickGrid,
   unsubscribeAllObservables,
 } from '../../library';
 

frameworks/angular-slickgrid/src/demos/examples/custom-angularComponentFilter.ts

@@ -1,17 +1,17 @@
-import { ComponentRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import type { ComponentRef } from '@angular/core';
+import type { Subscription } from 'rxjs';
 import {
   AngularUtilService,
-  Column,
-  ColumnFilter,
-  Filter,
-  FilterArguments,
-  FilterCallback,
-  GridOption,
+  type Column,
+  type ColumnFilter,
+  type Filter,
+  type FilterArguments,
+  type FilterCallback,
+  type GridOption,
   OperatorType,
-  OperatorString,
-  SearchTerm,
-  SlickGrid,
+  type OperatorString,
+  type SearchTerm,
+  type SlickGrid,
   unsubscribeAllObservables,
 } from '../../library';
 

frameworks/angular-slickgrid/src/demos/examples/custom-inputEditor.ts

@@ -1,4 +1,4 @@
-import { Column, ColumnEditor, Editor, EditorValidator, EditorValidationResult } from '../../library';
+import type { Column, ColumnEditor, Editor, EditorValidator, EditorValidationResult } from '../../library';
 
 /*
  * An example of a 'detached' editor.

frameworks/angular-slickgrid/src/demos/examples/custom-inputFilter.ts

@@ -1,14 +1,14 @@
 import {
-  Column,
-  ColumnFilter,
-  Filter,
-  FilterArguments,
-  FilterCallback,
-  GridOption,
+  type Column,
+  type ColumnFilter,
+  type Filter,
+  type FilterArguments,
+  type FilterCallback,
+  type GridOption,
   OperatorType,
-  OperatorString,
-  SearchTerm,
-  SlickGrid,
+  type OperatorString,
+  type SearchTerm,
+  type SlickGrid,
 } from '../../library';
 
 export class CustomInputFilter implements Filter {

frameworks/angular-slickgrid/src/demos/examples/example01.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Column, GridOption, Formatters, AngularGridInstance } from '../../library';
+import { Component, type OnDestroy, type OnInit } from '@angular/core';
+import { type AngularGridInstance, type Column, type GridOption, Formatters } from '../../library';
 
 import { zeroPadding } from './utilities';
 

frameworks/angular-slickgrid/src/demos/examples/example02.component.html

@@ -10,7 +10,11 @@ <h2>
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" (click)="toggleSubTitle()">
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
   </h2>
+
   <div class="subtitle">
     Grid with Custom and/or included Slickgrid Formatters (<a
       href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/formatters"

frameworks/angular-slickgrid/src/demos/examples/example02.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { AngularGridInstance, Column, Formatter, Formatters, GridOption } from '../../library';
+import { Component, type OnInit } from '@angular/core';
+import { type AngularGridInstance, type Column, type Formatter, Formatters, type GridOption } from '../../library';
 
 interface DataItem {
   id: number;
@@ -35,10 +35,11 @@ const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: n
   standalone: false,
 })
 export class Example2Component implements OnInit {
+  angularGrid!: AngularGridInstance;
   columnDefinitions: Column<DataItem>[] = [];
   gridOptions!: GridOption;
   dataset!: any[];
-  angularGrid!: AngularGridInstance;
+  hideSubTitle = false;
   resizerPaused = false;
 
   angularGridReady(angularGrid: AngularGridInstance) {
@@ -215,4 +216,11 @@ export class Example2Component implements OnInit {
       }, 250);
     }
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(0);
+  }
 }