Merge pull request #168 from avtestorg/master

Angular 15 compatibility & ChangeDetection on cheatsheet toggle

angular.json

@@ -46,6 +46,5 @@
                 }
             }
         }
-    },
-    "defaultProject": "angular2-hotkeys"
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-hotkeys",
-  "version": "13.4.0",
+  "version": "15.0.0",
   "scripts": {
     "build": "ng build angular2-hotkeys",
     "build:release": "ng build angular2-hotkeys --configuration production",
@@ -32,27 +32,27 @@
     "url": "git@github.com:brtnshrdr/angular2-hotkeys.git/issues"
   },
   "dependencies": {
-    "@types/mousetrap": "^1.6.9",
     "mousetrap": "^1.6.5",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.2",
-    "@angular-devkit/core": "^13.2.2",
-    "@angular/animations": "~13.2.1",
-    "@angular/cli": "~13.2.2",
-    "@angular/common": "~13.2.1",
-    "@angular/compiler": "~13.2.1",
-    "@angular/compiler-cli": "~13.2.1",
-    "@angular/core": "~13.2.1",
-    "@angular/forms": "~13.2.1",
-    "@angular/language-service": "~13.2.1",
-    "@angular/platform-browser": "~13.2.1",
-    "@angular/platform-browser-dynamic": "~13.2.1",
-    "@angular/router": "~13.2.1",
+    "@angular-devkit/build-angular": "^15.2.7",
+    "@angular-devkit/core": "^15.2.7",
+    "@angular/animations": "^15.2.8",
+    "@angular/cli": "^15.2.7",
+    "@angular/common": "^15.2.8",
+    "@angular/compiler": "^15.2.8",
+    "@angular/compiler-cli": "^15.2.8",
+    "@angular/core": "^15.2.8",
+    "@angular/forms": "^15.2.8",
+    "@angular/language-service": "^15.2.8",
+    "@angular/platform-browser": "^15.2.8",
+    "@angular/platform-browser-dynamic": "^15.2.8",
+    "@angular/router": "^15.2.8",
     "@types/jasmine": "~3.10.3",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^17.0.14",
+    "@types/mousetrap": "^1.6.9",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~4.0.0",
     "jasmine-spec-reporter": "~7.0.0",
@@ -61,12 +61,12 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^13.2.1",
+    "ng-packagr": "^15.2.2",
     "protractor": "~7.0.0",
     "rxjs": "~7.5.2",
     "ts-node": "~10.4.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.5.5",
+    "typescript": "~4.8.4",
     "zone.js": "~0.11.4"
   }
 }

src/lib/hotkeys-cheatsheet/hotkeys-cheatsheet.component.html

@@ -1,4 +1,4 @@
-<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}" style="display:none">
+<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible$|async}" style="display:none">
     <div class="cfp-hotkeys">
         <h4 class="cfp-hotkeys-title">{{ title }}</h4>
         <table>

src/lib/hotkeys-cheatsheet/hotkeys-cheatsheet.component.ts

@@ -1,15 +1,15 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Hotkey } from '../hotkey.model';
 import { HotkeysService } from '../hotkeys.service';
-import { Subscription } from 'rxjs';
+import {BehaviorSubject, Subscription} from 'rxjs';
 
 @Component({
     selector: 'hotkeys-cheatsheet',
     templateUrl: './hotkeys-cheatsheet.component.html',
     styleUrls: ['./hotkeys-cheatsheet.component.css']
 })
 export class HotkeysCheatsheetComponent implements OnInit, OnDestroy {
-    helpVisible = false;
+    helpVisible$ = new BehaviorSubject(false);
     @Input() title = 'Keyboard Shortcuts:';
     subscription: Subscription;
 
@@ -25,7 +25,7 @@ export class HotkeysCheatsheetComponent implements OnInit, OnDestroy {
             }
 
             if (isOpen === false) {
-                this.helpVisible = false;
+                this.helpVisible$.next(false);
             } else {
                 this.toggleCheatSheet();
             }
@@ -39,6 +39,6 @@ export class HotkeysCheatsheetComponent implements OnInit, OnDestroy {
     }
 
     public toggleCheatSheet(): void {
-        this.helpVisible = !this.helpVisible;
+        this.helpVisible$.next(!this.helpVisible$.value);
     }
 }

src/test.ts

@@ -8,19 +8,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -1,32 +1,32 @@
 {
     "compileOnSave": false,
     "compilerOptions": {
-        "baseUrl": "./",
-        "outDir": "./dist/out-tsc",
-        "sourceMap": true,
-        "declaration": false,
-        "downlevelIteration": true,
-        "experimentalDecorators": true,
-        "module": "es2020",
-        "moduleResolution": "node",
-        "importHelpers": true,
-        "target": "es2015",
-        "typeRoots": [
-            "node_modules/@types"
-        ],
-        "lib": [
-            "es2018",
-            "dom"
-        ],
-        "paths": {
-            "angular2-hotkeys": [
-                "dist/"
-            ]
-        }
+      "baseUrl": "./",
+      "outDir": "./dist/out-tsc",
+      "sourceMap": true,
+      "declaration": false,
+      "downlevelIteration": true,
+      "experimentalDecorators": true,
+      "module": "es2020",
+      "moduleResolution": "node",
+      "importHelpers": true,
+      "target": "ES2022",
+      "typeRoots": [
+        "node_modules/@types"
+      ],
+      "lib": [
+        "es2018",
+        "dom"
+      ],
+      "paths": {
+        "angular2-hotkeys": [
+          "dist/"
+        ]
+      },
+      "useDefineForClassFields": false
     },
     "angularCompilerOptions": {
         "fullTemplateTypeCheck": true,
-        "strictInjectionParameters": true,
-        "enableIvy": false
+        "strictInjectionParameters": true
     }
 }

tsconfig.lib.json

@@ -2,7 +2,6 @@
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "./out-tsc/lib",
-        "target": "es2015",
         "declaration": true,
         "inlineSources": true,
         "types": [],

tsconfig.lib.prod.json

@@ -1,6 +1,6 @@
 {
     "extends": "./tsconfig.lib.json",
     "angularCompilerOptions": {
-        "enableIvy": false
+        "compilationMode": "partial"
     }
 }