feat: support Angular 14

Author: crisbeto

.eslintrc.json

@@ -23,6 +23,17 @@
         "@typescript-eslint/dot-notation": "off",
         "@angular-eslint/no-host-metadata-property": "off",
         "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/naming-convention": [
+          "error",
+          {
+            "selector": "property",
+            "format": ["camelCase"],
+            "filter": {
+              "regex": "^(\\[attr\\.|\\[class\\.|\\[style\\.)",
+              "match": false
+            }
+          }
+        ],
         "@angular-eslint/no-output-on-prefix": "off",
         "@typescript-eslint/explicit-member-accessibility": [
           "off",

angular.json

@@ -2,7 +2,6 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "src",
-  "defaultProject": "demo",
   "projects": {
     "demo": {
       "projectType": "application",
@@ -116,8 +115,5 @@
         }
       }
     }
-  },
-  "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Angular module that uses SVG to create a circular progressbar",
   "scripts": {
     "ng": "ng",
@@ -30,37 +30,37 @@
   },
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "peerDependencies": {
-    "@angular/common": "^13.0.0",
-    "@angular/core": "^13.0.0"
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1300.2",
-    "@angular-devkit/build-angular": "~13.0.2",
-    "@angular-eslint/builder": "~12.6.1",
-    "@angular-eslint/eslint-plugin": "~12.6.1",
-    "@angular-eslint/eslint-plugin-template": "~12.6.1",
-    "@angular-eslint/schematics": "~12.6.1",
-    "@angular-eslint/template-parser": "~12.6.1",
-    "@angular/cli": "~13.0.2",
-    "@angular/common": "~13.0.1",
-    "@angular/compiler": "~13.0.1",
-    "@angular/compiler-cli": "~13.0.1",
-    "@angular/core": "~13.0.1",
-    "@angular/forms": "~13.0.1",
-    "@angular/platform-browser": "~13.0.1",
-    "@angular/platform-browser-dynamic": "~13.0.1",
-    "@typescript-eslint/eslint-plugin": "~4.33.0",
-    "@typescript-eslint/parser": "~4.33.0",
-    "angular-cli-ghpages": "^1.0.0-rc.2",
-    "eslint": "^7.32.0",
+    "@angular-devkit/architect": "^0.1400.0",
+    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular-eslint/builder": "~13.2.0",
+    "@angular-eslint/eslint-plugin": "~13.2.0",
+    "@angular-eslint/eslint-plugin-template": "~13.2.0",
+    "@angular-eslint/template-parser": "~13.2.0",
+    "@angular/cli": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@typescript-eslint/eslint-plugin": "~5.27.0",
+    "@typescript-eslint/parser": "~5.27.0",
+    "angular-cli-ghpages": "^1.0.0",
+    "eslint": "^8.17.0",
     "eslint-plugin-ban": "^1.5.2",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsdoc": "^31.1.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "ng-packagr": "~13.0.3",
+    "ng-packagr": "^14.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.3.0",
-    "typescript": "~4.4.2",
+    "typescript": "~4.7.3",
     "zone.js": "~0.11.4"
-  }
+  },
+  "dependencies": {}
 }

src/demo/app/demo.component.ts

@@ -6,20 +6,20 @@ import {Component} from '@angular/core';
   styleUrls: ['./demo.component.css'],
 })
 export class DemoComponent {
-  current: number = 27;
-  max: number = 50;
-  stroke: number = 15;
-  radius: number = 125;
-  semicircle: boolean = false;
-  rounded: boolean = false;
-  responsive: boolean = false;
-  clockwise: boolean = true;
-  color: string = '#45ccce';
-  background: string = '#eaeaea';
-  duration: number = 800;
-  animation: string = 'easeOutCubic';
-  animationDelay: number = 0;
-  animations: Array<string> = [
+  current = 27;
+  max = 50;
+  stroke = 15;
+  radius = 125;
+  semicircle = false;
+  rounded = false;
+  responsive = false;
+  clockwise = true;
+  color = '#45ccce';
+  background = '#eaeaea';
+  duration = 800;
+  animation = 'easeOutCubic';
+  animationDelay = 0;
+  animations = [
     'linearEase',
     'easeInQuad',
     'easeOutQuad',
@@ -52,8 +52,8 @@ export class DemoComponent {
     'easeOutBounce',
     'easeInOutBounce',
   ];
-  gradient: boolean = false;
-  realCurrent: number = 0;
+  gradient = false;
+  realCurrent = 0;
 
   increment(amount = 1) {
     this.current += amount;
@@ -68,7 +68,7 @@ export class DemoComponent {
       bottom: isSemi ? '5%' : 'auto',
       left: '50%',
       transform,
-      'font-size': this.radius / 3.5 + 'px',
+      fontSize: this.radius / 3.5 + 'px',
     };
   }
 }

src/lib/round-progress/round-progress.component.ts

@@ -22,7 +22,7 @@ import {RoundProgressEase} from './round-progress.ease';
   templateUrl: './round-progress.component.html',
   styleUrls: ['./round-progress.component.css'],
   host: {
-    role: 'progressbar',
+    'role': 'progressbar',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuenow]': 'current',

src/lib/tsconfig.lib.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/lib",
     "declarationMap": true,
-    "target": "es2015",
+    "target": "es2020",
     "declaration": true,
     "inlineSources": true,
     "types": [],

tsconfig.json

@@ -10,7 +10,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "lib": ["es2018", "dom"],
     "paths": {
       "angular-svg-round-progressbar": ["./src/lib/public-api.ts"]