chore: upgrade to Angular 21 (#5)

* chore: upgrade Angular dependencies to version 21.0.6

- Updated Angular packages in package.json to version 21.0.6.
- Removed unused CommonModule imports from various components to streamline imports.
- Ensured all components remain functional after the removal of CommonModule.

* chore: upgrade Angular dependencies to version 21.0.5

* chore(deps): update Angular and NgRx dependencies to latest versions

- Updated @ngrx/signals from ^20.0.0 to ^21.0.1
- Updated @angular/build from ^20.3.2 to ^21.0.4
- Updated ng-extract-i18n-merge from ^3.1.0 to ^3.2.1
- Updated ng-packagr from ^20.2.0 to ^21.0.1

* chore: update angular-eslint and related dependencies to version 21.1.0

- Updated angular-eslint from 20.2.0 to 21.1.0 in package.json and package-lock.json.
- Updated @angular-devkit/core and @angular-devkit/architect to version 21.0.4 in package-lock.json.
- Updated ngx-dashboard-widgets and ngx-dashboard versions to 21.0.0 and updated their peer dependencies to Angular 21.x.

* chore: add optional dependencies for esbuild on Linux and Windows

Author: TobyBackstrom

package-lock.json

@@ -43,39 +43,43 @@
     "vite": "7.1.11"
   },
   "dependencies": {
-    "@angular/cdk": "^20.2.0",
-    "@angular/common": "^20.2.1",
-    "@angular/compiler": "^20.2.1",
-    "@angular/core": "^20.2.1",
-    "@angular/forms": "^20.2.1",
-    "@angular/localize": "^20.2.1",
-    "@angular/material": "^20.2.0",
-    "@angular/platform-browser": "^20.2.1",
-    "@angular/platform-browser-dynamic": "^20.2.1",
-    "@angular/router": "^20.2.1",
-    "@ngrx/signals": "^20.0.0",
+    "@angular/cdk": "^21.0.5",
+    "@angular/common": "^21.0.6",
+    "@angular/compiler": "^21.0.6",
+    "@angular/core": "^21.0.6",
+    "@angular/forms": "^21.0.6",
+    "@angular/localize": "^21.0.6",
+    "@angular/material": "^21.0.5",
+    "@angular/platform-browser": "^21.0.6",
+    "@angular/platform-browser-dynamic": "^21.0.6",
+    "@angular/router": "^21.0.6",
+    "@ngrx/signals": "^21.0.1",
     "rxjs": "~7.8.0",
     "rxjs-interop": "^2.0.0",
     "sparklib": "^1.1.0",
     "tslib": "^2.3.0",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.2",
+    "@angular/build": "^21.0.4",
     "@angular/cli": "^21.0.4",
-    "@angular/compiler-cli": "^20.2.1",
+    "@angular/compiler-cli": "^21.0.6",
     "@types/jasmine": "~5.1.9",
-    "angular-eslint": "20.2.0",
+    "angular-eslint": "21.1.0",
     "eslint": "^9.33.0",
     "jasmine-core": "~5.9.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-extract-i18n-merge": "^3.1.0",
-    "ng-packagr": "^20.2.0",
+    "ng-extract-i18n-merge": "^3.2.1",
+    "ng-packagr": "^21.0.1",
     "typescript": "~5.9.2",
     "typescript-eslint": "8.40.0"
+  },
+  "optionalDependencies": {
+    "@esbuild/linux-x64": "*",
+    "@esbuild/win32-x64": "*"
   }
 }

package.json

@@ -1,5 +1,5 @@
 import { Component, inject, DestroyRef, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatSliderModule } from '@angular/material/slider';
@@ -18,7 +18,6 @@ import {
   selector: 'app-radial-gauge-demo',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatCardModule,
     MatSliderModule,
@@ -28,8 +27,8 @@ import {
     MatIconModule,
     MatSlideToggleModule,
     MatTooltipModule,
-    RadialGaugeComponent,
-  ],
+    RadialGaugeComponent
+],
   templateUrl: './radial-gauge-demo.component.html',
   styleUrl: './radial-gauge-demo.component.scss',
 })

projects/demo/src/app/components/radial-gauge-demo/radial-gauge-demo.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import {
   MatDialogModule,
@@ -18,16 +18,15 @@ import { RealtimeGaugeWidgetState } from './realtime-gauge-widget.component';
   selector: 'demo-realtime-gauge-state-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,
     MatInputModule,
     MatSlideToggleModule,
     MatRadioModule,
-    MatSliderModule,
-  ],
+    MatSliderModule
+],
   template: `
     <h2 mat-dialog-title i18n="@@demo.widgets.realtimeGauge.dialog.title">Realtime Gauge Settings</h2>
     <mat-dialog-content>

projects/demo/src/app/widgets/realtime-gauge-widget/realtime-gauge-state-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import {
   MAT_DIALOG_DATA,
   MatDialogRef,
@@ -16,14 +16,13 @@ import { SparkbarWidgetState } from './sparkbar-widget.component';
   selector: 'demo-sparkbar-state-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     MatDialogModule,
     MatButtonModule,
     MatSlideToggleModule,
     MatSelectModule,
     MatFormFieldModule,
-    FormsModule,
-  ],
+    FormsModule
+],
   template: `
     <h2 mat-dialog-title i18n="@@demo.widgets.sparkbar.dialog.title">Sparkbar Settings</h2>
     <mat-dialog-content>

projects/demo/src/app/widgets/sparkbar-widget/sparkbar-state-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import {
   MAT_DIALOG_DATA,
   MatDialogRef,
@@ -16,14 +16,13 @@ import { SparklineWidgetState } from './sparkline-widget.component';
   selector: 'demo-sparkline-state-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     MatDialogModule,
     MatButtonModule,
     MatSlideToggleModule,
     MatSelectModule,
     MatFormFieldModule,
-    FormsModule,
-  ],
+    FormsModule
+],
   template: `
     <h2 mat-dialog-title i18n="@@demo.widgets.sparkline.dialog.title">Sparkline Settings</h2>
     <mat-dialog-content>

projects/demo/src/app/widgets/sparkline-widget/sparkline-state-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import {
   MAT_DIALOG_DATA,
   MatDialogRef,
@@ -14,12 +14,11 @@ import { TemperatureSharedState } from './temperature-shared-state.service';
   selector: 'demo-temperature-shared-state-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,
-    MatSelectModule,
-  ],
+    MatSelectModule
+],
   template: `
     <h2 mat-dialog-title i18n="@@demo.widgets.temperature.sharedDialog.title">
       Shared Temperature Settings

projects/demo/src/app/widgets/temperature-widget/temperature-shared-state-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, signal, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import {
   MAT_DIALOG_DATA,
@@ -23,15 +23,14 @@ export interface TemperatureDialogData {
   selector: 'demo-temperature-state-dialog',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatDialogModule,
     MatButtonModule,
     MatFormFieldModule,
     MatSelectModule,
     MatInputModule,
-    MatSlideToggleModule,
-  ],
+    MatSlideToggleModule
+],
   template: `
     <h2 mat-dialog-title i18n="@@demo.widgets.temperature.dialog.title">
       Temperature Settings

projects/demo/src/app/widgets/temperature-widget/temperature-state-dialog.component.ts

@@ -1,12 +1,12 @@
 {
   "name": "@dragonworks/ngx-dashboard-widgets",
-  "version": "20.3.2",
+  "version": "21.0.0",
   "description": "Widget collection for ngx-dashboard with Material Design 3 compliance including arrow, label, clock widgets and responsive text directive",
   "peerDependencies": {
-    "@angular/common": "^20.2.0",
-    "@angular/core": "^20.2.0",
-    "@angular/localize": "^20.2.0",
-    "@dragonworks/ngx-dashboard": "^20.3.2"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/localize": "^21.0.0",
+    "@dragonworks/ngx-dashboard": "^21.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/ngx-dashboard-widgets/package.json

@@ -12,7 +12,7 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { from, map, of } from 'rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 
@@ -114,7 +114,7 @@ export interface RadialGaugeSegment {
 @Component({
   selector: 'ngx-radial-gauge',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './radial-gauge.component.html',
   styleUrl: './radial-gauge.component.scss',