Feature/angular strict/qgrid ngx plugins

.eslintrc.json

@@ -126,6 +126,6 @@
     "@typescript-eslint/semi": ["error", "always"],
     "@typescript-eslint/type-annotation-spacing": "error",
     "@typescript-eslint/unified-signatures": "error",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "warn"
   }
 }

packages/qgrid-core/public-api.d.ts

@@ -381,7 +381,7 @@ export { Resource } from './src/resource/resource';
 // export { EnumerableResource } from './src/resource/resource.enumerable';
 // export { factory } from './src/resource/resource.factory';
 // rest
-export { RestState } from './src/rest/rest.state';
+export { RestState, RestSerialized } from './src/rest/rest.state';
 // row-details
 export { RowDetails } from './src/row-details/row.details';
 export { RowDetailsLet } from './src/row-details/row.details.let';

packages/qgrid-core/src/column-type/editor.options.d.ts

@@ -11,43 +11,44 @@ export declare type EditorOptionsTrigger = 'click' | 'custom' | 'focus';
  */
 export interface EditorOptions {
 
-	/**
-	 * Says when cell should go to the edit mode.
-	 *
-	 * * `click` edit mode activates when user clicks on cell.
-	 * * `custom` if user defines own edit mode trigger, like button for reference column edit, this option should be used.
-	 * * `focus` edit mode activates when cell receives focus.
-	 */
-	trigger?: EditorOptionsTrigger;
-
-	/**
-	 * Defines navigation behavior when cell is in edit mode.
-	 *
-	 * * `control` when cell is in edit mode, keyboard navigation events are disabled(in general, `tab` and `shift+tab` still works).
-	 * * `transparent` when cell is in edit mode, keyboard navigation event are still applicable.
-	 */
-	cruise?: EditorOptionsCruise;
-
-	/**
-	 * q-grid model factory, can be used by reference column to draw a another q-grid in edit cell mode.
-	 */
-	modelFactory?: (context: {
-		row: any;
-		column: ColumnModel;
-		getValue: (row: any) => any;
-		reference: { commit: Command; cancel: Command; value: any };
-	}) => Model;
-
-	/**
-	 * Can be used by e.g. `auto-complete` editor to populate list of items.
-	 */
-	fetch?: () => Promise<any> | { subscribe: (x: any) => void } | any;
-
-	/**
-	 * List of actions, can be used by row-options column to draw menu with commands.
-	 */
-	actions?: Action[];
-
-	label?: any;
-	value?: any;
+  /**
+   * Says when cell should go to the edit mode.
+   *
+   * * `click` edit mode activates when user clicks on cell.
+   * * `custom` if user defines own edit mode trigger, like button for reference column edit, this option should be used.
+   * * `focus` edit mode activates when cell receives focus.
+   */
+  trigger?: EditorOptionsTrigger;
+
+  /**
+   * Defines navigation behavior when cell is in edit mode.
+   *
+   * * `control` when cell is in edit mode, keyboard navigation events are disabled(in general, `tab` and `shift+tab` still works).
+   * * `transparent` when cell is in edit mode, keyboard navigation event are still applicable.
+   */
+  cruise?: EditorOptionsCruise;
+
+  /**
+   * q-grid model factory, can be used by reference column to draw a another q-grid in edit cell mode.
+   */
+  modelFactory?: (context: {
+    row: any;
+    column: ColumnModel;
+    getValue: (row: any) => any;
+    reference: { commit: Command; cancel: Command; value: any };
+    createDefaultModel?: () => Model;
+  }) => Model;
+
+  /**
+   * Can be used by e.g. `auto-complete` editor to populate list of items.
+   */
+  fetch?: () => Promise<any> | { subscribe: (x: any) => void } | any;
+
+  /**
+   * List of actions, can be used by row-options column to draw menu with commands.
+   */
+  actions?: Action[];
+
+  label?: any;
+  value?: any;
 }

packages/qgrid-core/src/rest/rest.state.d.ts

@@ -1,12 +1,14 @@
 import { Model } from '../model/model';
 
+export interface RestSerialized {
+  order: string;
+  filter: string;
+  skip: number;
+  take: number;
+}
+
 export declare class RestState {
   url: string;
   method: string;
-  serialize: (model: Model) => {
-		order: string;
-		filter: string;
-		skip: number;
-		take: number;
-	};
+  serialize: (model: Model) => RestSerialized;
 }

packages/qgrid-core/src/validation/validation.service.d.ts

@@ -1,6 +1,6 @@
 export declare interface Validator {
-	validate(value: any): boolean;
-	getErrors(): Array<string>;
+  validate(value: any): boolean;
+  getErrors(): { [key: string]: (Array<string> | string) };
 }
 
 export declare function hasRules(rules: any, key: string): boolean;

packages/qgrid-ngx-examples/src/examples/import-basic/example-import-basic.component.html

@@ -5,7 +5,7 @@
   <q-grid-columns generation="deep">
   </q-grid-columns>
 
-  <q-grid-import options="{head:'numeric'}">
+  <q-grid-import [options]="{head:'numeric'}">
     <ng-template for="trigger"
                  let-$action>
       <button mat-button

packages/qgrid-ngx-plugins/src/lib/action/action.component.ts

@@ -16,7 +16,7 @@ import { GridPlugin, TemplateHostService } from '@qgrid/ngx';
   providers: [GridPlugin, TemplateHostService],
 })
 export class ActionComponent implements OnInit {
-  @ContentChild(TemplateRef, { static: true }) templateRef: TemplateRef<any>;
+  @ContentChild(TemplateRef, { static: true }) templateRef: TemplateRef<unknown>;
 
   @Input() title: string;
   @Input() icon: string;

packages/qgrid-ngx-plugins/src/lib/autocomplete-editor/autocomplete-editor.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { isArray, predicateFactory } from '@qgrid/core';
+import { ColumnModel, Fetch, isArray, predicateFactory } from '@qgrid/core';
 import { GridPlugin } from '@qgrid/ngx';
 
 @Component({
@@ -13,15 +13,15 @@ export class AutoCompleteEditorComponent {
     return this.plugin.view.edit.cell;
   }
 
-  options: any[] = [];
+  options: unknown[] = [];
 
   // eslint-disable-next-line no-use-before-define
   context: { $implicit: AutoCompleteEditorComponent } = {
     $implicit: this,
   };
 
   get items() {
-    return (this.cell.fetch as any).result;
+    return (this.cell.fetch as Fetch).result as unknown[];
   }
 
   get title() {
@@ -53,12 +53,12 @@ export class AutoCompleteEditorComponent {
     this.options = [];
   }
 
-  itemLabelFactory(column) {
+  itemLabelFactory(column: ColumnModel) {
     const { itemLabel } = column;
     if (itemLabel) {
-      return item => itemLabel(item);
+      return (item: unknown) => itemLabel(item);
     }
 
-    return item => item;
+    return (item: unknown) => item;
   }
 }

packages/qgrid-ngx-plugins/src/lib/backdrop/backdrop.component.ts

@@ -19,8 +19,8 @@ import { BackdropService } from './backdrop.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BackdropComponent implements OnInit, OnDestroy {
-  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
-  @Output('close') closeEvent = new EventEmitter<any>();
+  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<unknown>;
+  @Output('close') closeEvent = new EventEmitter<void>();
   @Input() propagate = true;
 
   // eslint-disable-next-line no-use-before-define

packages/qgrid-ngx-plugins/src/lib/backdrop/backdrop.directive.ts

@@ -14,11 +14,11 @@ import {
 export class BackdropDirective {
   private backdrop: HTMLElement;
 
-  @Output('q-grid-backdrop') close = new EventEmitter<any>();
+  @Output('q-grid-backdrop') close = new EventEmitter<void>();
 
   @Input('q-grid-backdrop-selector') selector = '';
 
-  @Input('q-grid-backdrop-active') set backdropHost(value: any) {
+  @Input('q-grid-backdrop-active') set backdropHost(value: boolean) {
     if (!value) {
       if (this.backdrop) {
         this.backdrop.remove();
@@ -49,6 +49,8 @@ export class BackdropDirective {
     });
   }
 
-  constructor(private zone: NgZone, @Inject(DOCUMENT) private document: any) {
-  }
+  constructor(
+    private zone: NgZone,
+    @Inject(DOCUMENT) private document: Document,
+  ) { }
 }

packages/qgrid-ngx-plugins/src/lib/bool-editor/bool-editor.component.ts

@@ -8,18 +8,20 @@ import {
 } from '@angular/core';
 import { BoolColumnModel } from '@qgrid/core';
 
+type ValueType = unknown;
+
 @Component({
   selector: 'q-grid-bool-editor',
   templateUrl: './bool-editor.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BoolEditorComponent implements OnInit {
-  private state: any;
+  private state: ValueType;
 
   @Input() autofocus = false;
   @Input() column: BoolColumnModel;
   @Input() label: string;
-  @Output() valueChange = new EventEmitter<any>();
+  @Output() valueChange = new EventEmitter<ValueType>();
 
   // eslint-disable-next-line no-use-before-define
   context: { $implicit: BoolEditorComponent } = {

packages/qgrid-ngx-plugins/src/lib/cell-editor/cell-editor.component.ts

@@ -16,8 +16,8 @@ import { GridPlugin } from '@qgrid/ngx';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CellEditorComponent implements OnInit {
-  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
-  @Output('close') closeEvent = new EventEmitter<any>();
+  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<unknown>;
+  @Output('close') closeEvent = new EventEmitter<void>();
 
   // eslint-disable-next-line no-use-before-define
   context: { $implicit: CellEditorComponent } = {

packages/qgrid-ngx-plugins/src/lib/colum-chooser/column-chooser.component.ts

@@ -38,8 +38,8 @@ export class RootContext {
 export class ColumnChooserComponent implements OnInit, OnChanges {
   private ccState = this.stateAccessor.setter(ColumnChooserState);
 
-  @Output('submit') submitEvent = new EventEmitter<any>();
-  @Output('cancel') cancelEvent = new EventEmitter<any>();
+  @Output('submit') submitEvent = new EventEmitter<void>();
+  @Output('cancel') cancelEvent = new EventEmitter<void>();
 
   context: {
     $implicit: ColumnChooserPlugin;

packages/qgrid-ngx-plugins/src/lib/column-filter/column-filter-item.directive.ts

@@ -5,7 +5,7 @@ import { ColumnFilterItemListDirective } from './column-filter-item-list.directi
   selector: '[q-grid-column-filter-item]',
 })
 export class ColumnFilterItemDirective implements OnInit {
-  @Input('q-grid-column-filter-item') value: any;
+  @Input('q-grid-column-filter-item') value: string;
 
   $implicit = this;
 

packages/qgrid-ngx-plugins/src/lib/column-filter/column-filter.component.ts

@@ -13,6 +13,7 @@ import {
   flatten,
   getValue,
   Guard,
+  ReadModel,
   uniq,
 } from '@qgrid/core';
 import {
@@ -26,6 +27,10 @@ import {
 import { ColumnFilterPlugin, ColumnFilterState } from '@qgrid/plugins';
 import { FocusAfterRender } from '../focus/focus.service';
 
+type ReadModelStatesContains<V> = {
+  [K in keyof ReadModel as ReadModel[K] extends (() => Readonly<V>) ? K : never]: ReadModel[K];
+};
+
 @Component({
   selector: 'q-grid-column-filter',
   templateUrl: './column-filter.component.html',
@@ -38,8 +43,8 @@ export class ColumnFilterComponent implements OnInit {
   @Input() column: ColumnModel;
   @Input() search = '';
 
-  @Output('submit') submitEvent = new EventEmitter<any>();
-  @Output('cancel') cancelEvent = new EventEmitter<any>();
+  @Output('submit') submitEvent = new EventEmitter<void>();
+  @Output('cancel') cancelEvent = new EventEmitter<void>();
 
   context: {
     $implicit: ColumnFilterPlugin;
@@ -120,15 +125,15 @@ export class ColumnFilterComponent implements OnInit {
           const isBlank = model.filter().assertFactory().isNull;
           try {
             if (!items.length) {
-              const source = model[columnFilter.state().source];
+              const source = (model as ReadModel)[columnFilter.state().source as keyof ReadModelStatesContains<{ rows: unknown[] }>];
               Guard.notNull(source, 'source');
 
               const sourceState = source();
               Guard.hasProperty(sourceState, 'rows');
 
               let values = null;
               if (columnFilterPlugin.column.type === 'array') {
-                values = flatten(sourceState.rows.map(row => getValue(row, column)));
+                values = flatten(sourceState.rows.map((row: unknown) => getValue(row, column)));
               } else {
                 values = sourceState.rows.map(columnFilterPlugin.getValue);
               }

packages/qgrid-ngx-plugins/src/lib/column-sort/column-sort.component.ts

@@ -20,7 +20,7 @@ import { FocusAfterRender } from '../focus/focus.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColumnSortComponent implements AfterViewInit {
-  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
+  @ViewChild(TemplateRef, { static: true }) template: TemplateRef<unknown>;
   @Input() column: ColumnModel;
 
   // eslint-disable-next-line no-use-before-define

packages/qgrid-ngx-plugins/src/lib/command/command.directive.ts

@@ -17,11 +17,13 @@ import {
 import { Command, CommandManager, Shortcut, ShortcutDispatcher } from '@qgrid/core';
 import { Disposable, GridPlugin } from '@qgrid/ngx';
 
+type CommangArg = unknown;
+
 export class ZoneCommandManager {
   constructor(
     private run: <T>(f: () => T) => T,
     private manager: CommandManager,
-    private commandArg: any,
+    private commandArg: CommangArg,
   ) {
   }
 
@@ -31,7 +33,7 @@ export class ZoneCommandManager {
     );
   }
 
-  filter(commands) {
+  filter(commands: Command[]) {
     return this.manager.filter(commands);
   }
 }
@@ -43,13 +45,13 @@ export class ZoneCommandManager {
 export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewInit {
   private isAfterViewInit = false;
 
-  @Input('q-grid-command') command: Command<any>;
-  @Input('q-grid-command-arg') commandArg: any;
+  @Input('q-grid-command') command: Command<CommangArg>;
+  @Input('q-grid-command-arg') commandArg: CommangArg;
   @Input('q-grid-command-use-shortcut') useCommandShortcut: boolean;
   @Input('q-grid-command-event') commandEvent = 'click';
   @Input('q-grid-command-use-zone') useZone: boolean;
   @Input('q-grid-command-host') host: 'grid' | 'document' = 'grid';
-  @Output('q-grid-command-execute') commandExecute = new EventEmitter<any>();
+  @Output('q-grid-command-execute') commandExecute = new EventEmitter<CommangArg>();
 
   constructor(
     private disposable: Disposable,
@@ -64,7 +66,7 @@ export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
 
     this.aroundZone(() =>
       nativeElement
-        .addEventListener(this.commandEvent, e => this.execute(e)),
+        .addEventListener(this.commandEvent, (e: MouseEvent) => this.execute(e)),
     );
   }
 
@@ -131,7 +133,7 @@ export class CommandDirective implements DoCheck, OnChanges, OnInit, AfterViewIn
 
         const shortcut = new Shortcut(new ShortcutDispatcher());
 
-        const keyDown = e => {
+        const keyDown = (e: KeyboardEvent) => {
           shortcut.keyDown(e);
         };