Refreshed project

- Replaced old TSLint with ESLint - Using new Angular control flow - Future proof: supports any Angular version >= 17 - Removed unused files/targets
jagomf · May 16, 2024 · 1ea0eb3 · 1ea0eb3
1 parent cde08dd
commit 1ea0eb3
Show file tree

Hide file tree

Showing 29 changed files with 4,280 additions and 1,488 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": "off",
+        "@angular-eslint/component-selector": "off",
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-import-type-side-effects": "warn"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.nx/cache
+.nx/workspace-data
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Jago MF
+Copyright (c) 2024 Jago MF
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ export class AppModule { }
 
 In your templates, use the `<countries-map>` component like this:
 ```html
-<countries-map [data]="mapData" [apiKey]="abcdef"></countries-map>
+<countries-map [data]="mapData" [apiKey]="abcdef"/>
 ```
 and in the corresponding `.ts` file:
 ```ts
@@ -96,7 +96,7 @@ The `chartReady` event is fired when a chart is completely loaded.
 
 Bind the `chartReady` event in the `countries-map` component like this:
 ```html
-<countries-map [data]="mapData" (chartReady)="ready()"></countries-map>
+<countries-map [data]="mapData" (chartReady)="ready()"/>
 ```
 
 Your `ready()` function receives no parameters. You can use it like:
@@ -112,7 +112,7 @@ The `chartError` event is fired if there are some errors with a chart.
 
 Bind the `chartError` event in the `countries-map` component, like this:
 ```html
-<countries-map [data]="mapData" (chartError)="error($event)"></countries-map>
+<countries-map [data]="mapData" (chartError)="error($event)"/>
 ```
 
 Your `error()` function is passed an event which interface looks like this:
@@ -148,7 +148,7 @@ The `chartSelect` event is fired when a chart is selected/clicked.
 
 Bind the `chartSelect` event in the `countries-map` component, like this:
 ```html
-<countries-map [data]="mapData" (chartSelect)="select($event)"></countries-map>
+<countries-map [data]="mapData" (chartSelect)="select($event)"/>
 ```
 
 Your `select()` function is passed an event whose interface looks like this:
@@ -196,7 +196,7 @@ These are the classes you can apply styles to, hierarchically displayed, and ass
 You can access Google Chart's underlying [ChartWrapper](https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject) through the
 `wrapper` property of the component object:
 ```html
-<countries-map #cmap [data]="mapData"></countries-map>
+<countries-map #cmap [data]="mapData"/>
 ```
 
 ```ts

diff --git a/angular.json b/angular.json
@@ -20,7 +20,9 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "assets": [
               "src/assets"
             ],
@@ -75,15 +77,21 @@
             }
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "main": "projects/lib/src/test.ts",
-            "tsConfig": "projects/lib/tsconfig.spec.json",
-            "karmaConfig": "projects/lib/karma.conf.js"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/dist/countries-map/LICENSE b/dist/countries-map/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Jago MF
+Copyright (c) 2024 Jago MF
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/dist/countries-map/README.md b/dist/countries-map/README.md
@@ -43,7 +43,7 @@ export class AppModule { }
 
 In your templates, use the `<countries-map>` component like this:
 ```html
-<countries-map [data]="mapData" [apiKey]="abcdef"></countries-map>
+<countries-map [data]="mapData" [apiKey]="abcdef"/>
 ```
 and in the corresponding `.ts` file:
 ```ts
@@ -96,7 +96,7 @@ The `chartReady` event is fired when a chart is completely loaded.
 
 Bind the `chartReady` event in the `countries-map` component like this:
 ```html
-<countries-map [data]="mapData" (chartReady)="ready()"></countries-map>
+<countries-map [data]="mapData" (chartReady)="ready()"/>
 ```
 
 Your `ready()` function receives no parameters. You can use it like:
@@ -112,7 +112,7 @@ The `chartError` event is fired if there are some errors with a chart.
 
 Bind the `chartError` event in the `countries-map` component, like this:
 ```html
-<countries-map [data]="mapData" (chartError)="error($event)"></countries-map>
+<countries-map [data]="mapData" (chartError)="error($event)"/>
 ```
 
 Your `error()` function is passed an event which interface looks like this:
@@ -148,7 +148,7 @@ The `chartSelect` event is fired when a chart is selected/clicked.
 
 Bind the `chartSelect` event in the `countries-map` component, like this:
 ```html
-<countries-map [data]="mapData" (chartSelect)="select($event)"></countries-map>
+<countries-map [data]="mapData" (chartSelect)="select($event)"/>
 ```
 
 Your `select()` function is passed an event whose interface looks like this:
@@ -196,7 +196,7 @@ These are the classes you can apply styles to, hierarchically displayed, and ass
 You can access Google Chart's underlying [ChartWrapper](https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject) through the
 `wrapper` property of the component object:
 ```html
-<countries-map #cmap [data]="mapData"></countries-map>
+<countries-map #cmap [data]="mapData"/>
 ```
 
 ```ts

diff --git a/dist/countries-map/esm2022/lib/countries-map.component.mjs b/dist/countries-map/esm2022/lib/countries-map.component.mjs
diff --git a/dist/countries-map/fesm2022/countries-map.mjs b/dist/countries-map/fesm2022/countries-map.mjs
@@ -229,11 +229,11 @@ class CountriesMapComponent {
         removeListener('select');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CountriesMapComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: GoogleChartsLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: CountriesMapComponent, selector: "countries-map", inputs: { data: "data", apiKey: "apiKey", options: "options", countryLabel: "countryLabel", valueLabel: "valueLabel", showCaption: "showCaption", captionBelow: "captionBelow", autoResize: "autoResize", minValue: "minValue", maxValue: "maxValue", minColor: "minColor", maxColor: "maxColor", backgroundColor: "backgroundColor", noDataColor: "noDataColor", exceptionColor: "exceptionColor" }, outputs: { chartReady: "chartReady", chartError: "chartError", chartSelect: "chartSelect" }, host: { listeners: { "window:deviceorientation": "screenSizeChanged()", "window:resize": "screenSizeChanged()" } }, viewQueries: [{ propertyName: "mapContent", first: true, predicate: ["mapContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"major-block loading\" *ngIf=\"loading\"><span class=\"text\">Loading map...</span></div>\n\n<div class=\"major-block cm-map-content\" #mapContent [ngClass]=\"{'goes-first': captionBelow}\"></div>\n\n<div class=\"major-block cm-caption-container\" [ngClass]=\"{'goes-first': !captionBelow}\"\n  *ngIf=\"!loading && showCaption\">\n  <div class=\"cm-simple-caption\">\n    <div class=\"cm-country-label\">\n      <span class=\"cm-default-label\" *ngIf=\"!selection\">{{countryLabel}}</span>\n      <span class=\"cm-country-name\" *ngIf=\"selection\">{{selection?.countryName}}</span>\n    </div>\n    <div class=\"cm-value-label\">\n      <span class=\"cm-value-text\"\n        [ngClass]=\"{'has-value': selection}\">{{valueLabel}}<span *ngIf=\"selection\">: </span></span>\n      <span class=\"cm-value-content\" *ngIf=\"selection\">{{selectionValue}}</span>\n    </div>\n  </div>\n  <div class=\"cm-extended-caption\" *ngIf=\"selection?.extra && selection?.extra.length > 0\">\n    <div *ngFor=\"let item of selection?.extra\" class=\"cm-extended-item\">\n      <span class=\"cm-extended-label\">{{item.key}}</span>:\n      <span class=\"cm-extended-value\">{{item.val}}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch;align-content:stretch}.major-block.loading{flex:0 1 auto;align-self:center}.major-block.loading .text{font-style:italic;font-family:sans-serif;color:gray}.major-block.cm-map-content{flex:0 1 auto}.major-block.goes-first{order:0}.major-block:not(.goes-first){order:1}.major-block.cm-caption-container{flex:0 1 auto;display:flex;flex-flow:column nowrap;justify-content:space-between}.cm-simple-caption{display:flex;flex-flow:row nowrap;justify-content:space-between}.cm-country-label{flex:0 1 auto;align-self:flex-start}.cm-value-label{flex:0 1 auto;align-self:flex-end}.cm-country-label,.cm-value-label{flex:0 1 auto}.cm-country-label .cm-country-name{font-weight:700}.cm-country-label .cm-country-name,.cm-value-label .cm-value-text{color:#333}.cm-country-label .cm-default-label,.cm-value-label .cm-value-text:not(.has-value){font-style:italic;color:#777}.cm-extended-caption{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:5px}.cm-extended-item{margin:5px auto}.cm-extended-item .cm-extended-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", type: CountriesMapComponent, selector: "countries-map", inputs: { data: "data", apiKey: "apiKey", options: "options", countryLabel: "countryLabel", valueLabel: "valueLabel", showCaption: "showCaption", captionBelow: "captionBelow", autoResize: "autoResize", minValue: "minValue", maxValue: "maxValue", minColor: "minColor", maxColor: "maxColor", backgroundColor: "backgroundColor", noDataColor: "noDataColor", exceptionColor: "exceptionColor" }, outputs: { chartReady: "chartReady", chartError: "chartError", chartSelect: "chartSelect" }, host: { listeners: { "window:deviceorientation": "screenSizeChanged()", "window:resize": "screenSizeChanged()" } }, viewQueries: [{ propertyName: "mapContent", first: true, predicate: ["mapContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (loading) {\n<div class=\"major-block loading\"><span class=\"text\">Loading map...</span></div>\n}\n\n<div class=\"major-block cm-map-content\" #mapContent [ngClass]=\"{'goes-first': captionBelow}\"></div>\n\n@if (!loading && showCaption) {\n<div class=\"major-block cm-caption-container\" [ngClass]=\"{'goes-first': !captionBelow}\">\n  <div class=\"cm-simple-caption\">\n    <div class=\"cm-country-label\">\n      @if (selection) {\n        <span class=\"cm-country-name\">{{selection?.countryName}}</span>\n      } @else {\n        <span class=\"cm-default-label\">{{countryLabel}}</span>\n      }\n    </div>\n    <div class=\"cm-value-label\">\n      <span class=\"cm-value-text\"\n        [ngClass]=\"{'has-value': selection}\">{{valueLabel}}@if (selection) {<span>: </span>}</span>\n      @if (selection) {\n        <span class=\"cm-value-content\">{{selectionValue}}</span>\n      }\n    </div>\n  </div>\n  @if (selection?.extra?.length > 0) {\n    <div class=\"cm-extended-caption\">\n      @for (item of selection?.extra; track item.key) {\n        <div class=\"cm-extended-item\">\n          <span class=\"cm-extended-label\">{{item.key}}</span>:\n          <span class=\"cm-extended-value\">{{item.val}}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n}\n", styles: [":host{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch;align-content:stretch}.major-block.loading{flex:0 1 auto;align-self:center}.major-block.loading .text{font-style:italic;font-family:sans-serif;color:gray}.major-block.cm-map-content{flex:0 1 auto}.major-block.goes-first{order:0}.major-block:not(.goes-first){order:1}.major-block.cm-caption-container{flex:0 1 auto;display:flex;flex-flow:column nowrap;justify-content:space-between}.cm-simple-caption{display:flex;flex-flow:row nowrap;justify-content:space-between}.cm-country-label{flex:0 1 auto;align-self:flex-start}.cm-value-label{flex:0 1 auto;align-self:flex-end}.cm-country-label,.cm-value-label{flex:0 1 auto}.cm-country-label .cm-country-name{font-weight:700}.cm-country-label .cm-country-name,.cm-value-label .cm-value-text{color:#333}.cm-country-label .cm-default-label,.cm-value-label .cm-value-text:not(.has-value){font-style:italic;color:#777}.cm-extended-caption{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:5px}.cm-extended-item{margin:5px auto}.cm-extended-item .cm-extended-label{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CountriesMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'countries-map', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"major-block loading\" *ngIf=\"loading\"><span class=\"text\">Loading map...</span></div>\n\n<div class=\"major-block cm-map-content\" #mapContent [ngClass]=\"{'goes-first': captionBelow}\"></div>\n\n<div class=\"major-block cm-caption-container\" [ngClass]=\"{'goes-first': !captionBelow}\"\n  *ngIf=\"!loading && showCaption\">\n  <div class=\"cm-simple-caption\">\n    <div class=\"cm-country-label\">\n      <span class=\"cm-default-label\" *ngIf=\"!selection\">{{countryLabel}}</span>\n      <span class=\"cm-country-name\" *ngIf=\"selection\">{{selection?.countryName}}</span>\n    </div>\n    <div class=\"cm-value-label\">\n      <span class=\"cm-value-text\"\n        [ngClass]=\"{'has-value': selection}\">{{valueLabel}}<span *ngIf=\"selection\">: </span></span>\n      <span class=\"cm-value-content\" *ngIf=\"selection\">{{selectionValue}}</span>\n    </div>\n  </div>\n  <div class=\"cm-extended-caption\" *ngIf=\"selection?.extra && selection?.extra.length > 0\">\n    <div *ngFor=\"let item of selection?.extra\" class=\"cm-extended-item\">\n      <span class=\"cm-extended-label\">{{item.key}}</span>:\n      <span class=\"cm-extended-value\">{{item.val}}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch;align-content:stretch}.major-block.loading{flex:0 1 auto;align-self:center}.major-block.loading .text{font-style:italic;font-family:sans-serif;color:gray}.major-block.cm-map-content{flex:0 1 auto}.major-block.goes-first{order:0}.major-block:not(.goes-first){order:1}.major-block.cm-caption-container{flex:0 1 auto;display:flex;flex-flow:column nowrap;justify-content:space-between}.cm-simple-caption{display:flex;flex-flow:row nowrap;justify-content:space-between}.cm-country-label{flex:0 1 auto;align-self:flex-start}.cm-value-label{flex:0 1 auto;align-self:flex-end}.cm-country-label,.cm-value-label{flex:0 1 auto}.cm-country-label .cm-country-name{font-weight:700}.cm-country-label .cm-country-name,.cm-value-label .cm-value-text{color:#333}.cm-country-label .cm-default-label,.cm-value-label .cm-value-text:not(.has-value){font-style:italic;color:#777}.cm-extended-caption{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:5px}.cm-extended-item{margin:5px auto}.cm-extended-item .cm-extended-label{font-weight:700}\n"] }]
+            args: [{ selector: 'countries-map', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (loading) {\n<div class=\"major-block loading\"><span class=\"text\">Loading map...</span></div>\n}\n\n<div class=\"major-block cm-map-content\" #mapContent [ngClass]=\"{'goes-first': captionBelow}\"></div>\n\n@if (!loading && showCaption) {\n<div class=\"major-block cm-caption-container\" [ngClass]=\"{'goes-first': !captionBelow}\">\n  <div class=\"cm-simple-caption\">\n    <div class=\"cm-country-label\">\n      @if (selection) {\n        <span class=\"cm-country-name\">{{selection?.countryName}}</span>\n      } @else {\n        <span class=\"cm-default-label\">{{countryLabel}}</span>\n      }\n    </div>\n    <div class=\"cm-value-label\">\n      <span class=\"cm-value-text\"\n        [ngClass]=\"{'has-value': selection}\">{{valueLabel}}@if (selection) {<span>: </span>}</span>\n      @if (selection) {\n        <span class=\"cm-value-content\">{{selectionValue}}</span>\n      }\n    </div>\n  </div>\n  @if (selection?.extra?.length > 0) {\n    <div class=\"cm-extended-caption\">\n      @for (item of selection?.extra; track item.key) {\n        <div class=\"cm-extended-item\">\n          <span class=\"cm-extended-label\">{{item.key}}</span>:\n          <span class=\"cm-extended-value\">{{item.val}}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n}\n", styles: [":host{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:stretch;align-content:stretch}.major-block.loading{flex:0 1 auto;align-self:center}.major-block.loading .text{font-style:italic;font-family:sans-serif;color:gray}.major-block.cm-map-content{flex:0 1 auto}.major-block.goes-first{order:0}.major-block:not(.goes-first){order:1}.major-block.cm-caption-container{flex:0 1 auto;display:flex;flex-flow:column nowrap;justify-content:space-between}.cm-simple-caption{display:flex;flex-flow:row nowrap;justify-content:space-between}.cm-country-label{flex:0 1 auto;align-self:flex-start}.cm-value-label{flex:0 1 auto;align-self:flex-end}.cm-country-label,.cm-value-label{flex:0 1 auto}.cm-country-label .cm-country-name{font-weight:700}.cm-country-label .cm-country-name,.cm-value-label .cm-value-text{color:#333}.cm-country-label .cm-default-label,.cm-value-label .cm-value-text:not(.has-value){font-style:italic;color:#777}.cm-extended-caption{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:5px}.cm-extended-item{margin:5px auto}.cm-extended-item .cm-extended-label{font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: GoogleChartsLoaderService }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]

diff --git a/dist/countries-map/fesm2022/countries-map.mjs.map b/dist/countries-map/fesm2022/countries-map.mjs.map
diff --git a/dist/countries-map/package.json b/dist/countries-map/package.json
@@ -1,6 +1,6 @@
 {
   "name": "countries-map",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "World countries datamaps component for Angular, based on Google GeoCharts",
   "license": "MIT",
   "author": "Jago MF <[email protected]>",
@@ -17,8 +17,8 @@
     "Charts"
   ],
   "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0"
   },
   "dependencies": {
     "@jagomf/countrieslist": "^3.0.1",