Update to Angular 12 (#47)

vdolek · Sep 16, 2021 · b78c3f5 · b78c3f5
1 parent e052277
commit b78c3f5
Show file tree

Hide file tree

Showing 44 changed files with 9,520 additions and 14,015 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x, 14.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -23,6 +23,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
-    - run: npm run lint
+#    - run: npm run lint
     - run: npm run build
 #    - run: npm test
diff --git a/README.md b/README.md
@@ -6,15 +6,17 @@
 [![downloads](https://img.shields.io/npm/dt/angular-resize-event)](https://www.npmjs.com/package/angular-resize-event)
 [![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/vdolek/angular-resize-event)](https://snyk.io/test/github/vdolek/angular-resize-event)
 
-Angular directive for detecting changes of an element size.
+Angular 12 directive for detecting changes of an element size.
 
 It is as simple as:
 
 ```html
 <div (resized)="onResized($event)"></div>
 ```
 
-It internally uses `ResizeSensor` from [CSS Element Queries](https://github.com/marcj/css-element-queries).
+It internally uses browser native [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Therefore it is not supported in IE.
+
+For Angular 11 you can use version 2.1.0 which internally uses uses `ResizeSensor` from [CSS Element Queries](https://github.com/marcj/css-element-queries) that is supported in IE.
 
 ## Playground
 
@@ -72,8 +74,8 @@ class MyComponent {
   height: number;
 
   onResized(event: ResizedEvent) {
-    this.width = event.newWidth;
-    this.height = event.newHeight;
+    this.width = event.newRect.width;
+    this.height = event.newRect.height;
   }
 }
 ```

diff --git a/angular.json b/angular.json
@@ -7,19 +7,22 @@
       "projectType": "library",
       "root": "projects/angular-resize-event",
       "sourceRoot": "projects/angular-resize-event/src",
-      "prefix": "",
+      "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/angular-resize-event/tsconfig.lib.json",
             "project": "projects/angular-resize-event/ng-package.json"
           },
           "configurations": {
             "production": {
               "tsConfig": "projects/angular-resize-event/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/angular-resize-event/tsconfig.lib.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -28,20 +31,9 @@
             "tsConfig": "projects/angular-resize-event/tsconfig.spec.json",
             "karmaConfig": "projects/angular-resize-event/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/angular-resize-event/tsconfig.lib.json",
-              "projects/angular-resize-event/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "angular-resize-event"
 }