chore: merge dev into main

angular.json

@@ -72,6 +72,16 @@
         },
         "test": {
           "builder": "@angular/build:unit-test"
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/amc-docs/**/*.ts",
+              "projects/amc-docs/**/*.html"
+            ],
+            "eslintConfig": "projects/amc-docs/eslint.config.js"
+          }
         }
       }
     },
@@ -98,6 +108,16 @@
           "options": {
             "tsConfig": "projects/color-picker/tsconfig.spec.json"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/color-picker/**/*.ts",
+              "projects/color-picker/**/*.html"
+            ],
+            "eslintConfig": "projects/color-picker/eslint.config.js"
+          }
         }
       }
     },
@@ -124,6 +144,16 @@
           "options": {
             "tsConfig": "projects/datetime-picker/tsconfig.spec.json"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/datetime-picker/**/*.ts",
+              "projects/datetime-picker/**/*.html"
+            ],
+            "eslintConfig": "projects/datetime-picker/eslint.config.js"
+          }
         }
       }
     },
@@ -150,6 +180,16 @@
           "options": {
             "tsConfig": "projects/file-input/tsconfig.spec.json"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/file-input/**/*.ts",
+              "projects/file-input/**/*.html"
+            ],
+            "eslintConfig": "projects/file-input/eslint.config.js"
+          }
         }
       }
     }

eslint.config.js

@@ -0,0 +1,52 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const { defineConfig } = require("eslint/config");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = defineConfig([
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.recommended,
+      tseslint.configs.stylistic,
+      angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "ngx",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "ngx",
+          style: "kebab-case",
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_"
+        }
+      ]
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      angular.configs.templateRecommended,
+      angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-mce/amc",
-  "version": "21.2.5",
+  "version": "21.2.6-next.6",
   "description": "Angular Material Components Example Application",
   "author": "Felipe B.",
   "repository": {
@@ -57,15 +57,20 @@
   },
   "devDependencies": {
     "@angular/build": "^21.2.5",
+    "@angular-eslint/builder": "21.3.1",
     "@angular/cdk": "^21.1.5",
     "@angular/cli": "^21.2.5",
     "@angular/compiler-cli": "^21.1.5",
     "@cleyrop-org/semantic-release-backmerge": "^5.2.4",
+    "@eslint/js": "^9.39.2",
     "@types/node": "^25.5.0",
+    "angular-eslint": "21.3.1",
+    "eslint": "^9.39.2",
     "jsdom": "^29.0.1",
     "ng-packagr": "^21.2.2",
     "ts-node": "~10.9.2",
     "typescript": "~5.9.2",
+    "typescript-eslint": "8.58.0",
     "vitest": "^4.1.2"
   }
 }

projects/amc-docs/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const { defineConfig } = require("eslint/config");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = defineConfig([
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  }
+]);

projects/amc-docs/src/app/app.config.ts

@@ -1,16 +1,12 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideNativeDateAdapter } from '@angular/material/core';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideNativeDateAdapter(),
-    provideAnimations(),
-    provideAnimationsAsync(),
     provideZonelessChangeDetection(),
     provideBrowserGlobalErrorListeners(),
     provideRouter(routes)

projects/color-picker/eslint.config.js

@@ -0,0 +1,7 @@
+// @ts-check
+const { defineConfig } = require("eslint/config");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = defineConfig([
+  ...rootConfig
+]);

projects/color-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-mce/color-picker",
-  "version": "21.2.5",
+  "version": "21.2.6-next.6",
   "description": "Angular Material Color Picker",
   "author": "Felipe B.",
   "repository": {
@@ -25,7 +25,8 @@
   "scripts": {
     "ng": "ng",
     "build": "ng build -c=production",
-    "build-dev": "ng build -c=development"
+    "build-dev": "ng build -c=development",
+    "lint": "ng lint"
   },
   "publishConfig": {
     "directory": "../../dist/color-picker",

projects/color-picker/src/lib/components/color-canvas/base-color-canvas.ts

@@ -30,18 +30,19 @@ export abstract class NgxMatBaseColorCanvas implements OnDestroy, AfterViewInit
   elementId: string;
 
   ctx: CanvasRenderingContext2D | null = null;
-  width: number = 0;
-  height: number = 0;
+  width = 0;
+  height = 0;
 
-  x: number = 0;
-  y: number = 0;
+  x = 0;
+  y = 0;
 
   drag = false;
 
   protected _destroyed: Subject<void> = new Subject<void>();
 
+  protected zone: NgZone | null = null;
+
   constructor(
-    protected zone: NgZone,
     elementId: string,
   ) {
     this.elementId = elementId;
@@ -53,7 +54,7 @@ export abstract class NgxMatBaseColorCanvas implements OnDestroy, AfterViewInit
   }
 
   ngAfterViewInit(): void {
-    this.canvas = <HTMLCanvasElement>document.getElementById(this.elementId);
+    this.canvas = document.getElementById(this.elementId) as HTMLCanvasElement;
     this.ctx = this.canvas.getContext('2d');
     this.width = this.canvas.width;
     this.height = this.canvas.height;
@@ -73,20 +74,20 @@ export abstract class NgxMatBaseColorCanvas implements OnDestroy, AfterViewInit
     this.drag = true;
     this.changeColor(e);
 
-    this.zone.runOutsideAngular(() => {
+    this.zone?.runOutsideAngular(() => {
       this.canvas?.addEventListener('mousemove', this.onMousemove.bind(this));
     });
   }
 
   public onMousemove(e: MouseEvent) {
     if (this.drag) {
-      this.zone.run(() => {
+      this.zone?.run(() => {
         this.changeColor(e);
       });
     }
   }
 
-  public onMouseup(e: MouseEvent) {
+  public onMouseup(_: MouseEvent) {
     this.drag = false;
     this.canvas?.removeEventListener('mousemove', this.onMousemove);
   }

projects/color-picker/src/lib/components/color-canvas/color-canvas.component.ts

@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   Component,
+  inject,
   NgZone,
   OnChanges,
   OnDestroy,
@@ -66,10 +67,12 @@ export class NgxMatColorCanvasComponent
 
   formGroup: FormGroup;
 
-  rgba: string = "";
+  rgba = "";
 
-  constructor(override zone: NgZone) {
-    super(zone, 'color-block');
+  protected override zone = inject(NgZone);
+
+  constructor() {
+    super('color-block');
     this.formGroup = new FormGroup({
       r: new FormControl(null, [Validators.required]),
       g: new FormControl(null, [Validators.required]),

projects/color-picker/src/lib/components/color-canvas/color-slider/color-slider.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone } from '@angular/core';
+import { Component, inject, NgZone } from '@angular/core';
 import { getColorAtPosition } from '../../../helpers';
 import { Color } from '../../../models';
 import { NgxMatBaseColorCanvas } from '../base-color-canvas';
@@ -9,8 +9,10 @@ import { NgxMatBaseColorCanvas } from '../base-color-canvas';
   styleUrls: ['./color-slider.component.scss'],
 })
 export class NgxMatColorSliderComponent extends NgxMatBaseColorCanvas {
-  constructor(override zone: NgZone) {
-    super(zone, 'color-strip');
+  protected override zone = inject(NgZone);
+
+  constructor() {
+    super('color-strip');
   }
 
   override ngAfterViewInit(): void {

projects/color-picker/src/lib/components/color-collection/color-collection.component.ts

@@ -31,7 +31,7 @@ export class NgxMatColorCollectionComponent {
 
   select(hex: string) {
     this.selectedColor.set(hex);
-    let rgba = stringInputToObject(hex);
+    const rgba = stringInputToObject(hex);
     if (rgba != null) {
       this.colorChanged.emit(new Color(rgba.r, rgba.g, rgba.b, rgba.a));
     }