build: upgrade to angular 14

BREAKING CHANGE: angular 14 or higher is now required to use this package

Author: mattlewis92

README.md

@@ -20,7 +20,7 @@ https://mattlewis92.github.io/angular-resizable-element/
 
 ## About
 
-An angular 13.0+ directive that allows an element to be dragged and resized
+An angular 14.0+ directive that allows an element to be dragged and resized
 
 ## Installation
 

angular.json

@@ -138,6 +138,5 @@
         }
       }
     }
-  },
-  "defaultProject": "demo"
+  }
 }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-resizable-element",
   "version": "5.0.0",
-  "description": "An angular 13.0+ directive that allows an element to be dragged and resized",
+  "description": "An angular 14.0+ directive that allows an element to be dragged and resized",
   "scripts": {
     "start": "concurrently --raw \"ng serve --open\" \"npm run test:watch\"",
     "build:demo": "ng build --configuration production",
@@ -38,48 +38,47 @@
   },
   "homepage": "https://github.com/mattlewis92/angular-resizable-element#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.9",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/animations": "~13.3.11",
-    "@angular/cli": "~13.3.9",
-    "@angular/common": "~13.3.11",
-    "@angular/compiler": "~13.3.11",
-    "@angular/compiler-cli": "~13.3.11",
-    "@angular/core": "~13.3.11",
-    "@angular/forms": "~13.3.11",
-    "@angular/platform-browser": "~13.3.11",
-    "@angular/platform-browser-dynamic": "~13.3.11",
-    "@angular/router": "~13.3.11",
+    "@angular-devkit/build-angular": "^14.1.0",
+    "@angular-eslint/builder": "14.0.2",
+    "@angular-eslint/eslint-plugin": "14.0.2",
+    "@angular-eslint/eslint-plugin-template": "14.0.2",
+    "@angular-eslint/schematics": "14.0.2",
+    "@angular-eslint/template-parser": "14.0.2",
+    "@angular/animations": "^14.1.0",
+    "@angular/cli": "^14.1.0",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/compiler-cli": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/router": "^14.1.0",
     "@compodoc/compodoc": "^1.1.19",
     "@types/chai": "^4.3.1",
-    "@types/mocha": "^7.0.2",
+    "@types/mocha": "^9.1.1",
     "@types/node": "^16.11.47",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.8",
-    "@typescript-eslint/eslint-plugin": "5.3.0",
-    "@typescript-eslint/parser": "5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "angular-cli-ghpages": "^1.0.3",
     "chai": "^4.3.6",
     "codecov": "^3.8.3",
     "commitizen": "^4.2.5",
     "concurrently": "^6.5.1",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.2.0",
+    "eslint": "^8.18.0",
     "husky": "^7.0.4",
     "karma": "^6.3.20",
     "karma-chrome-launcher": "^3.1.1",
-    "karma-coverage": "~2.0.3",
+    "karma-coverage": "^2.2.0",
     "karma-mocha": "^2.0.1",
-    "mocha": "^7.2.0",
-    "ng-packagr": "^13.3.1",
+    "mocha": "^10.0.0",
+    "ng-packagr": "^14.1.0",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "process": "^0.11.10",
     "rxjs": "^7.5.6",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",
@@ -91,7 +90,7 @@
     "zone.js": "^0.11.7"
   },
   "peerDependencies": {
-    "@angular/core": ">=13.0.0"
+    "@angular/core": ">=14.0.0"
   },
   "config": {
     "commitizen": {

package.json

@@ -3,7 +3,6 @@
 import 'zone.js';
 import 'zone.js/testing';
 import 'zone.js/plugins/mocha-patch';
-import './test/polyfills';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

projects/angular-resizable-element/src/test.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import {
   MOUSE_MOVE_THROTTLE_MS,
   ResizableDirective,
@@ -9,8 +9,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import * as sinon from 'sinon';
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
 describe('resizable directive', () => {
   @Component({
     styles: [
@@ -77,18 +75,21 @@ describe('resizable directive', () => {
           mwlResizeHandle
           [resizeEdges]="{ top: true }"
         ></div>
+
         <div
           *ngIf="resizeEdges.left"
           class="resize-handle-left"
           mwlResizeHandle
           [resizeEdges]="{ left: true }"
         ></div>
+
         <div
           *ngIf="resizeEdges.right"
           class="resize-handle-right"
           mwlResizeHandle
           [resizeEdges]="{ right: true }"
         ></div>
+
         <div
           *ngIf="resizeEdges.bottom"
           class="resize-handle-bottom"
@@ -830,7 +831,7 @@ describe('resizable directive', () => {
     );
   });
 
-  it('should only allow resizing of the element along the left side', async () => {
+  it('should only allow resizing of the element along the left side', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
     const handle = fixture.nativeElement.querySelector('.resize-handle-left');
     fixture.componentInstance.resizeEdges = { left: true };
@@ -839,7 +840,6 @@ describe('resizable directive', () => {
       clientX: 100,
       clientY: 200,
     });
-    await delay(MOUSE_MOVE_THROTTLE_MS);
     triggerDomEvent('mousedown', handle, {
       clientX: 100,
       clientY: 200,
@@ -1113,7 +1113,7 @@ describe('resizable directive', () => {
     expect(onComplete).to.have.been.calledOnce;
   });
 
-  it('should set the resize active class', async () => {
+  it('should set the resize active class', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
     fixture.detectChanges();
     const elm: HTMLElement =
@@ -1124,7 +1124,6 @@ describe('resizable directive', () => {
       clientY: 210,
     });
     expect(elm.classList.contains('resize-active')).to.be.false;
-    await delay(MOUSE_MOVE_THROTTLE_MS);
     triggerDomEvent('mousedown', handle, {
       clientX: 100,
       clientY: 210,
@@ -1133,7 +1132,6 @@ describe('resizable directive', () => {
       clientX: 101,
       clientY: 210,
     });
-    await delay(MOUSE_MOVE_THROTTLE_MS);
     expect(elm.classList.contains('resize-active')).to.be.true;
     triggerDomEvent('mouseup', handle, {
       clientX: 101,
@@ -1427,7 +1425,7 @@ describe('resizable directive', () => {
     });
   });
 
-  it('should set the resize cursor on the body when resizing', async () => {
+  it('should set the resize cursor on the body when resizing', () => {
     const fixture: ComponentFixture<TestComponent> = createComponent();
     const elm: HTMLElement =
       fixture.componentInstance.resizable.elm.nativeElement;
@@ -1440,7 +1438,6 @@ describe('resizable directive', () => {
       clientX: 101,
       clientY: 200,
     });
-    await delay(MOUSE_MOVE_THROTTLE_MS);
     expect(document.body.style.cursor).to.equal('col-resize');
     triggerDomEvent('mouseup', handle, {
       clientX: 101,

projects/angular-resizable-element/src/test/polyfills.ts

@@ -3,7 +3,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
+    "target": "es2020",
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,

projects/angular-resizable-element/src/test/resizable.spec.ts

@@ -13,7 +13,7 @@
         min-height: 100vh;
       }
     </style>
-    <title>angular 13.0+ resizable element</title>
+    <title>angular 14.0+ resizable element</title>
   </head>
   <body>
     <a
@@ -31,7 +31,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <a class="navbar-brand" href="#">angular 13.0+ resizable element</a>
+          <a class="navbar-brand" href="#">angular 14.0+ resizable element</a>
         </div>
         <ul class="nav navbar-nav hidden-xs">
           <li><a href="#demo">Demo</a></li>

projects/angular-resizable-element/tsconfig.lib.json

@@ -20,7 +20,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "module": "es2020",
     "lib": [
       "es2018",