diff --git a/.all-contributorsrc b/.all-contributorsrc
index 52ae1c57..85bf7af5 100644
--- a/.all-contributorsrc
+++ b/.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"
}
diff --git a/README.md b/README.md
index e917607f..c2a38acc 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
mpschaeuble
🐛 |
- 
Daniel Karp
🐛 |
+
Daniel Karp
🐛 |
+ 
Tine Kondo
🤔 👀 |
diff --git a/package.json b/package.json
index 9e1c755e..27ee7060 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ng-in-viewport",
- "version": "16.0.0",
+ "version": "16.1.0",
"private": true,
"license": "MIT",
"scripts": {
diff --git a/projects/ng-in-viewport/package.json b/projects/ng-in-viewport/package.json
index 84694788..7693c855 100644
--- a/projects/ng-in-viewport/package.json
+++ b/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
diff --git a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts
index 808523c1..87f097c4 100644
--- a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.spec.ts
+++ b/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,
+ });
+ });
});
});
});
diff --git a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts b/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts
index eee5d973..da29bd4b 100644
--- a/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts
+++ b/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,
+ })
+ );
}
}
}
diff --git a/projects/ng-in-viewport/src/lib/values/check-fn.ts b/projects/ng-in-viewport/src/lib/values/check-fn.ts
index c1f3f79a..7f1e5dd0 100644
--- a/projects/ng-in-viewport/src/lib/values/check-fn.ts
+++ b/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;
}