feat: emit action before directive destroy

chore: extend peer deps to include angular v17

Refs: #1418
Release-As: 16.1.0

Author: k3nsei

.all-contributorsrc

@@ -144,13 +144,23 @@
       "login": "karptonite",
       "name": "Daniel Karp",
       "avatar_url": "https://avatars.githubusercontent.com/u/132278?v=4",
-      "profile": "https://twitter.com/karptonite",
+      "profile": "https://github.com/karptonite",
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "tinesoft",
+      "name": "Tine Kondo",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4053092?v=4",
+      "profile": "https://github.com/tinesoft",
+      "contributions": [
+        "ideas", "review"
+      ]
     }
   ],
   "contributorsPerLine": 7,
   "linkToUsage": false,
-  "skipCi": true
+  "skipCi": true,
+  "commitType": "docs"
 }

README.md

@@ -43,7 +43,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mpschaeuble"><img src="https://avatars.githubusercontent.com/u/18322360?v=4?s=100" width="100px;" alt="mpschaeuble"/><br /><sub><b>mpschaeuble</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Ampschaeuble" title="Bug reports">🐛</a></td>
     </tr>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/karptonite"><img src="https://avatars.githubusercontent.com/u/132278?v=4?s=100" width="100px;" alt="Daniel Karp"/><br /><sub><b>Daniel Karp</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Akarptonite" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/karptonite"><img src="https://avatars.githubusercontent.com/u/132278?v=4?s=100" width="100px;" alt="Daniel Karp"/><br /><sub><b>Daniel Karp</b></sub></a><br /><a href="https://github.com/k3nsei/ng-in-viewport/issues?q=author%3Akarptonite" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tinesoft"><img src="https://avatars.githubusercontent.com/u/4053092?v=4?s=100" width="100px;" alt="Tine Kondo"/><br /><sub><b>Tine Kondo</b></sub></a><br /><a href="#ideas-tinesoft" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/k3nsei/ng-in-viewport/pulls?q=is%3Apr+reviewed-by%3Atinesoft" title="Reviewed Pull Requests">👀</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-in-viewport",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "private": true,
   "license": "MIT",
   "scripts": {

projects/ng-in-viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-in-viewport",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "Allows us to check if an element is within the browsers visual viewport",
   "keywords": [
     "angular",
@@ -37,8 +37,8 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^14.0.0 || ^15.0.0 || >=16.0.0",
-    "@angular/core": "^14.0.0 || ^15.0.0 || >=16.0.0"
+    "@angular/common": "^14.0.0 || ^15.0.0 || ^16.0.0 || >=17.0.0",
+    "@angular/core": "^14.0.0 || ^15.0.0 || ^16.0.0 || >=17.0.0"
   },
   "publishConfig": {
     "provenance": true

projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts

@@ -112,6 +112,14 @@ describe('GIVEN InViewportDirective', () => {
       it('THEN `unregister` methods from service should be called', () => {
         expect(service.unregister).toHaveBeenCalledWith(node, config);
       });
+
+      it('THEN `action` method from host component should be called by action output', () => {
+        expect(host.action).toHaveBeenCalledWith({
+          [InViewportMetadata]: { entry: undefined },
+          target: node,
+          visible: false,
+        });
+      });
     });
   });
 
@@ -169,6 +177,14 @@ describe('GIVEN InViewportDirective', () => {
       it('THEN `unregister` methods from service should be called', () => {
         expect(service.unregister).not.toHaveBeenCalled();
       });
+
+      it('THEN `action` method from host component should be called by action output', () => {
+        expect(host.action).not.toHaveBeenCalledWith({
+          [InViewportMetadata]: { entry: undefined },
+          target: node,
+          visible: false,
+        });
+      });
     });
   });
 });

projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts

@@ -61,7 +61,7 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
 
   public ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
-      this.emit(undefined, true);
+      this.emit(undefined, true, true);
       return;
     }
 
@@ -81,6 +81,8 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
   public ngOnDestroy(): void {
     if (isPlatformBrowser(this.platformId)) {
       this.inViewportService.unregister(this.nativeElement, this.config);
+
+      this.emit(undefined, true, false);
     }
   }
 
@@ -89,16 +91,22 @@ export class InViewportDirective implements AfterViewInit, OnDestroy {
   }
 
   private emit(entry: IntersectionObserverEntry, force: false): void;
-  private emit(entry: undefined, force: true): void;
-  private emit(entry: IntersectionObserverEntry | undefined, force: boolean): void {
+  private emit(entry: undefined, force: true, forcedValue: boolean): void;
+  private emit(entry: IntersectionObserverEntry | undefined, force: boolean, forcedValue?: boolean): void {
     this.inViewportAction.emit({
       [InViewportMetadata]: { entry },
       target: this.nativeElement,
-      visible: force || !entry || this.isVisible(entry),
+      visible: force ? !!forcedValue : !entry || this.isVisible(entry),
     });
 
     if (this.config.checkFn) {
-      this.inViewportCustomCheck.emit(this.config.checkFn(entry, { force, config: this.config }));
+      this.inViewportCustomCheck.emit(
+        this.config.checkFn(entry, {
+          force,
+          forcedValue: force ? !!forcedValue : undefined,
+          config: this.config,
+        })
+      );
     }
   }
 }

projects/ng-in-viewport/src/lib/values/check-fn.ts

@@ -3,7 +3,17 @@ import { isFunction, isNil, uniqueId } from 'lodash-es';
 import { Config } from './config';
 
 export interface InViewportCheckFnOptions {
+  /**
+   *  Whether action was triggered programmatically.
+   */
   force: boolean;
+  /**
+   *  When an action is triggered programmatically, this property will hold a simulated visibility state.
+   */
+  forcedValue?: boolean;
+  /**
+   *  Instance of a configuration object.
+   */
   config: Config;
 }