Merge pull request #3156 from adumesny/master

yarn lint fixes

Author: adumesny

angular/projects/lib/src/lib/base-widget.ts

@@ -5,14 +5,14 @@
 
 /**
  * Abstract base class that all custom widgets should extend.
- * 
+ *
  * This class provides the interface needed for GridstackItemComponent to:
  * - Serialize/deserialize widget data
  * - Save/restore widget state
  * - Integrate with Angular lifecycle
- * 
+ *
  * Extend this class when creating custom widgets for dynamic grids.
- * 
+ *
  * @example
  * ```typescript
  * @Component({
@@ -21,7 +21,7 @@
  * })
  * export class MyCustomWidget extends BaseWidget {
  *   @Input() data: string = '';
- *   
+ *
  *   serialize() {
  *     return { data: this.data };
  *   }
@@ -46,12 +46,12 @@ export abstract class BaseWidget {
 
   /**
    * Override this method to return serializable data for this widget.
-   * 
+   *
    * Return an object with properties that map to your component's @Input() fields.
    * The selector is handled automatically, so only include component-specific data.
-   * 
+   *
    * @returns Object containing serializable component data
-   * 
+   *
    * @example
    * ```typescript
    * serialize() {
@@ -67,17 +67,17 @@ export abstract class BaseWidget {
 
   /**
    * Override this method to handle widget restoration from saved data.
-   * 
+   *
    * Use this for complex initialization that goes beyond simple @Input() mapping.
    * The default implementation automatically assigns input data to component properties.
-   * 
+   *
    * @param w The saved widget data including input properties
-   * 
+   *
    * @example
    * ```typescript
    * deserialize(w: NgGridStackWidget) {
    *   super.deserialize(w); // Call parent for basic setup
-   *   
+   *
    *   // Custom initialization logic
    *   if (w.input?.complexData) {
    *     this.processComplexData(w.input.complexData);
@@ -92,4 +92,4 @@ export abstract class BaseWidget {
 
     if (w.input)  Object.assign(this, w.input);
   }
- }
+}

angular/projects/lib/src/lib/gridstack-item.component.ts

@@ -18,15 +18,15 @@ export interface GridItemCompHTMLElement extends GridItemHTMLElement {
 
 /**
  * Angular component wrapper for individual GridStack items.
- * 
+ *
  * This component represents a single grid item and handles:
  * - Dynamic content creation and management
  * - Integration with parent GridStack component
  * - Component lifecycle and cleanup
  * - Widget options and configuration
- * 
+ *
  * Use in combination with GridstackComponent for the parent grid.
- * 
+ *
  * @example
  * ```html
  * <gridstack>
@@ -76,7 +76,7 @@ export class GridstackItemComponent implements OnDestroy {
   /**
    * Grid item configuration options.
    * Defines position, size, and behavior of this grid item.
-   * 
+   *
    * @example
    * ```typescript
    * itemOptions: GridStackNode = {

angular/projects/lib/src/lib/gridstack.component.ts

@@ -4,8 +4,8 @@
  */
 
 import {
-    AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
-    OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
+  AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
+  OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef
 } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
@@ -45,19 +45,19 @@ export interface GridCompHTMLElement extends GridHTMLElement {
  * Mapping of selector strings to Angular component types.
  * Used for dynamic component creation based on widget selectors.
  */
-export type SelectorToType = {[key: string]: Type<Object>};
+export type SelectorToType = {[key: string]: Type<object>};
 
 /**
  * Angular component wrapper for GridStack.
- * 
+ *
  * This component provides Angular integration for GridStack grids, handling:
  * - Grid initialization and lifecycle
  * - Dynamic component creation and management
  * - Event binding and emission
  * - Integration with Angular change detection
- * 
+ *
  * Use in combination with GridstackItemComponent for individual grid items.
- * 
+ *
  * @example
  * ```html
  * <gridstack [options]="gridOptions" (change)="onGridChange($event)">
@@ -99,7 +99,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Grid configuration options.
    * Can be set before grid initialization or updated after grid is created.
-   * 
+   *
    * @example
    * ```typescript
    * gridOptions: GridStackOptions = {
@@ -122,7 +122,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Controls whether empty content should be displayed.
    * Set to true to show ng-content with 'empty-content' selector when grid has no items.
-   * 
+   *
    * @example
    * ```html
    * <gridstack [isEmpty]="gridItems.length === 0">
@@ -134,52 +134,52 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   /**
    * GridStack event emitters for Angular integration.
-   * 
+   *
    * These provide Angular-style event handling for GridStack events.
    * Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events.
-   * 
+   *
    * Note: 'CB' suffix prevents conflicts with native DOM events.
-   * 
+   *
    * @example
    * ```html
    * <gridstack (changeCB)="onGridChange($event)" (droppedCB)="onItemDropped($event)">
    * </gridstack>
    * ```
    */
-  
+
   /** Emitted when widgets are added to the grid */
   @Output() public addedCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted when grid layout changes */
   @Output() public changeCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted when grid is disabled */
   @Output() public disableCB = new EventEmitter<eventCB>();
-  
+
   /** Emitted during widget drag operations */
   @Output() public dragCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget drag starts */
   @Output() public dragStartCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget drag stops */
   @Output() public dragStopCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget is dropped */
   @Output() public droppedCB = new EventEmitter<droppedCB>();
-  
+
   /** Emitted when grid is enabled */
   @Output() public enableCB = new EventEmitter<eventCB>();
-  
+
   /** Emitted when widgets are removed from the grid */
   @Output() public removedCB = new EventEmitter<nodesCB>();
-  
+
   /** Emitted during widget resize operations */
   @Output() public resizeCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget resize starts */
   @Output() public resizeStartCB = new EventEmitter<elementCB>();
-  
+
   /** Emitted when widget resize stops */
   @Output() public resizeStopCB = new EventEmitter<elementCB>();
 
@@ -192,7 +192,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /**
    * Get the underlying GridStack instance.
    * Use this to access GridStack API methods directly.
-   * 
+   *
    * @example
    * ```typescript
    * this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
@@ -208,10 +208,10 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   /**
    * Mapping of component selectors to their types for dynamic creation.
-   * 
+   *
    * This enables dynamic component instantiation from string selectors.
    * Angular doesn't provide public access to this mapping, so we maintain our own.
-   * 
+   *
    * @example
    * ```typescript
    * GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);
@@ -220,9 +220,9 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   public static selectorToType: SelectorToType = {};
   /**
    * Register a list of Angular components for dynamic creation.
-   * 
+   *
    * @param typeList Array of component types to register
-   * 
+   *
    * @example
    * ```typescript
    * GridstackComponent.addComponentToSelectorType([
@@ -231,16 +231,17 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
    * ]);
    * ```
    */
-  public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
+  public static addComponentToSelectorType(typeList: Array<Type<object>>) {
     typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
   }
   /**
    * Extract the selector string from an Angular component type.
-   * 
+   *
    * @param type The component type to get selector from
    * @returns The component's selector string
    */
-  public static getSelector(type: Type<Object>): string {
+  public static getSelector(type: Type<object>): string {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return reflectComponentType(type)!.selector;
   }
 
@@ -367,6 +368,7 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n:
       const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;
       if (!gridItemComp) return;
       // check if gridItem has a child component with 'container' exposed to create under..
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;
       const gridRef = container?.createComponent(GridstackComponent);
       const grid = gridRef?.instance;

angular/projects/lib/src/lib/gridstack.module.ts

@@ -10,10 +10,10 @@ import { GridstackComponent } from "./gridstack.component";
 
 /**
  * @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead.
- * 
+ *
  * This NgModule is provided for backward compatibility but is no longer the recommended approach.
  * Import components directly in your standalone components or use the new Angular module structure.
- * 
+ *
  * @example
  * ```typescript
  * // Preferred approach - standalone components
@@ -23,7 +23,7 @@ import { GridstackComponent } from "./gridstack.component";
  *   template: '<gridstack></gridstack>'
  * })
  * export class AppComponent {}
- * 
+ *
  * // Legacy approach (deprecated)
  * @NgModule({
  *   imports: [GridstackModule]

angular/projects/lib/src/lib/types.ts

@@ -41,7 +41,7 @@ export interface NgGridStackOptions extends GridStackOptions {
 /**
  * Type for component input data serialization.
  * Maps @Input() property names to their values for widget persistence.
- * 
+ *
  * @example
  * ```typescript
  * const inputs: NgCompInputs = {
@@ -51,4 +51,5 @@ export interface NgGridStackOptions extends GridStackOptions {
  * };
  * ```
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type NgCompInputs = {[key: string]: any};

package.json

@@ -44,7 +44,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
-    "lint": "tsc --noEmit && eslint src/*.ts",
+    "lint": "tsc --project tsconfig.build.json --noEmit && eslint src/*.ts angular/projects/lib/src/**/*.ts",
     "reset": "rm -rf dist node_modules",
     "prepublishOnly": "yarn build"
   },

src/gridstack.ts

@@ -957,7 +957,7 @@ export class GridStack {
     // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively
     return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);
   }
-  
+
   /** checks for dynamic column count for our current size, returning true if changed */
   protected checkDynamicColumn(): boolean {
     const resp = this.opts.columnOpts;

src/utils.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license
  */
 
-import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
+import { GridStackElement, GridStackNode, numberOrString, GridStackPosition, GridStackWidget } from './types';
 
 export interface HeightData {
   h: number;

tsconfig.build.json

@@ -4,15 +4,19 @@
     "skipLibCheck": true
   },
   "include": [
-    "./src/**/*.ts"
+    "./src/**/*.ts",
+    "./angular/projects/lib/src/**/*.ts"
   ],
   "exclude": [
     "./src/**/*.spec.ts",
     "./src/**/*.test.ts",
     "./spec/**/*",
     "./vitest.setup.ts",
     "./vitest.config.ts",
-    "./angular/**/*",
+    "./angular/projects/lib/src/**/*.spec.ts",
+    "./angular/projects/lib/src/test.ts",
+    "./angular/projects/demo/**/*",
+    "./angular/node_modules/**/*",
     "./demo/**/*",
     "./node_modules/**/*"
   ]