fix: 'ishIntersectionObserver' emits 'NotVisible' events when target …

…element moves out of viewport (#1433)

* migration note for 'ishIntersectionObserver' returning now `NotVisible` status change as well

BREAKING CHANGES: The `ishIntersectionObserver` returns `NotVisible` status now too (see [Migrations / 4.0 to 4.1](https://github.com/intershop/intershop-pwa/blob/develop/docs/guides/migrations.md#40-to-41) for more details).

docs/guides/migrations.md

@@ -17,6 +17,9 @@ If the `addGlobalGuard` function is used for customizations make sure it now wor
 The input parameter `id` of the component `ish-product-quantity` caused issues with duplicate IDs within the page html, therefore it was renamed to `elementId`.
 If the input parameter 'id' of this component has already been used it has to be renamed accordingly.
 
+The `ishIntersectionObserver` returns all 3 `IntersectionStatus` change events `Visible`, `Pending` and now `NotVisible` as well.
+The custom project code needs to be adapted if it does not filter the events where it is used (e.g `if (event === 'Visible')`).
+
 ## 3.3 to 4.0
 
 The Intershop PWA now uses Node.js 18.15.0 LTS with the corresponding npm version 9.5.0 and the `"lockfileVersion": 3,`.

src/app/core/directives/intersection-observer.directive.ts

@@ -55,11 +55,7 @@ const fromIntersectionObserver = (element: HTMLElement, config: IntersectionObse
     }>();
 
     const intersectionObserver = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
-        if (isIntersecting(entry)) {
-          subject$.next({ entry, observer });
-        }
-      });
+      entries.forEach(entry => subject$.next({ entry, observer }));
     }, config);
 
     subject$.subscribe(() => {
@@ -97,7 +93,3 @@ async function isVisible(element: HTMLElement) {
     observer.observe(element);
   });
 }
-
-function isIntersecting(entry: IntersectionObserverEntry) {
-  return entry.isIntersecting || entry.intersectionRatio > 0;
-}