chore: fix lint issues & migrate to function-based DI

Author: json-derulo

eslint.config.mjs

@@ -12,7 +12,8 @@ export default tseslint.config(
     processor: angularEslint.processInlineTemplates,
     languageOptions: {
       parserOptions: {
-        project: true,
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
       },
     },
     rules: {

projects/material-css-vars/src/lib/material-css-vars.service.ts

@@ -1,11 +1,11 @@
 import {
-  Inject,
   Injectable,
   Renderer2,
   RendererFactory2,
   RendererStyleFlags2,
   DOCUMENT,
   isDevMode,
+  inject,
 } from "@angular/core";
 import { Numberify, RGBA, TinyColor } from "@ctrl/tinycolor";
 import {
@@ -52,13 +52,11 @@ export class MaterialCssVarsService {
   private ROOT: HTMLElement;
   private readonly _black = new TinyColor("#000000");
   private readonly _white = new TinyColor("#ffffff");
+  private readonly document = inject(DOCUMENT);
 
-  constructor(
-    rendererFactory: RendererFactory2,
-    @Inject(DOCUMENT) private document: Document,
-    @Inject(MATERIAL_CSS_VARS_CFG) cfg: MaterialCssVariablesConfig,
-  ) {
-    this.renderer = rendererFactory.createRenderer(null, null);
+  constructor() {
+    this.renderer = inject(RendererFactory2).createRenderer(null, null);
+    const cfg = inject(MATERIAL_CSS_VARS_CFG);
     this.ROOT = this._getRootElement(cfg.rootSelector);
 
     this.cfg = {

src/app/app.component.ts

@@ -1,10 +1,10 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import {
   ThemePalette,
   MatOptionModule,
   MatNativeDateModule,
 } from "@angular/material/core";
-import { MatDialog, MatDialogModule } from "@angular/material/dialog";
+import { MatDialogModule } from "@angular/material/dialog";
 import { MatSnackBar, MatSnackBarModule } from "@angular/material/snack-bar";
 import { MaterialCssVarsService } from "../../projects/material-css-vars/src/lib/material-css-vars.service";
 import {
@@ -133,11 +133,10 @@ export class AppComponent {
   allComplete = false;
   someComplete = false;
 
-  constructor(
-    private _dialog: MatDialog,
-    private _snackbar: MatSnackBar,
-    public materialCssVarsService: MaterialCssVarsService,
-  ) {
+  readonly materialCssVarsService = inject(MaterialCssVarsService);
+  private readonly _snackbar = inject(MatSnackBar);
+
+  constructor() {
     this.toggleTheme();
     // this.onPrimaryChange(this.primary);
     // this.onAccentChange(this.accent);