@skyux/core 15.0.0-alpha.2 → 15.0.0-alpha.4

package/fesm2022/skyux-core.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, ElementRef, Output, Input, Directive, effect, untracked, input, booleanAttribute, output, DestroyRef, signal, computed, ChangeDetectionStrategy, Component, provideEnvironmentInitializer, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ViewContainerRef, ViewChild, InjectionToken, Renderer2, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, HostListener } from '@angular/core';
-import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, switchMap, merge, debounceTime as debounceTime$1 } from 'rxjs';
+import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, isObservable, combineLatest, combineLatestWith, switchMap, merge, debounceTime as debounceTime$1 } from 'rxjs';
 import { takeUntil, debounceTime, take } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/common';
@@ -4159,6 +4159,19 @@ function notifySubscribers(subscribers, item) {
         subscriber.next(item);
     }
 }
+/**
+ * Reduces `current` against the given `containerEdge` of each container's bounding rect,
+ * skipping containers with no size in the given `dimension`.
+ */
+function maskEdge(current, containers, dimension, containerEdge, combine) {
+    let result = current;
+    for (const container of containers) {
+        if (container.nativeElement?.[dimension]) {
+            result = combine(result, container.nativeElement.getBoundingClientRect()[containerEdge]);
+        }
+    }
+    return result;
+}
 class SkyScrollableHostService {
     #mutationObserverSvc;
     #windowRef;
@@ -4283,15 +4296,27 @@ class SkyScrollableHostService {
             });
         });
     }
-    watchScrollableHostClipPathChanges(elementRef, additionalContainers = of([])) {
+    watchScrollableHostClipPathChanges(elementRef, options = of([])) {
         if (!this.#resizeObserverSvc) {
             return of('none');
         }
-        const watch = () => this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers), switchMap(([scrollableHost, additionalHosts]) => {
+        const normalizedOptions = isObservable(options)
+            ? { additionalContainers: options }
+            : options;
+        const additionalContainers = normalizedOptions.additionalContainers ?? of([]);
+        const additionalMaskingObj = normalizedOptions.additionalMasking ?? {};
+        const hasAdditionalMasking = Object.keys(additionalMaskingObj).length > 0;
+        // `combineLatestWith` never emits if any source completes without emitting,
+        // so fall back to a single empty emission instead of `EMPTY` when there's nothing to mask.
+        const additionalMasking = hasAdditionalMasking
+            ? combineLatest(additionalMaskingObj)
+            : of({});
+        const watch = () => this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers, additionalMasking), switchMap(([scrollableHost, additionalHosts, additionalMasks]) => {
             const resizeObserverSvc = this.#resizeObserverSvc;
             if (!resizeObserverSvc ||
                 ((!scrollableHost ||
                     scrollableHost === this.#windowRef.nativeWindow) &&
+                    Object.values(additionalMasks).flat().length === 0 &&
                     additionalHosts.length === 0)) {
                 return of('none');
             }
@@ -4303,6 +4328,9 @@ class SkyScrollableHostService {
                 fromEvent(this.#windowRef.nativeWindow, 'resize'),
                 fromEvent(this.#windowRef.nativeWindow, 'scroll'),
                 ...additionalHosts.map((container) => resizeObserverSvc.observe(container)),
+                ...Object.values(additionalMasks)
+                    .flat()
+                    .map((container) => resizeObserverSvc.observe(container)),
                 fromEvent(hostsParents, 'scroll'),
                 ...hostsParents.map((hostsParent) => resizeObserverSvc.observe({
                     nativeElement: hostsParent,
@@ -4334,11 +4362,15 @@ class SkyScrollableHostService {
                         bottom = Math.min(bottom, containerRect.bottom);
                     }
                 }
+                top = maskEdge(top, additionalMasks.top ?? [], 'offsetHeight', 'bottom', Math.max);
+                left = maskEdge(left, additionalMasks.left ?? [], 'offsetWidth', 'right', Math.max);
+                right = maskEdge(right, additionalMasks.right ?? [], 'offsetWidth', 'left', Math.min);
+                bottom = maskEdge(bottom, additionalMasks.bottom ?? [], 'offsetHeight', 'top', Math.min);
                 top = Math.max(0, top);
                 left = Math.max(0, left);
                 return `inset(${top}px ${viewportSize.width - right}px ${viewportSize.height - bottom}px ${left}px)`;
             }));
-        }));
+        }), distinctUntilChanged());
         /* istanbul ignore else */
         if (this.#zone) {
             return this.#zone.runOutsideAngular(watch);
@@ -5055,7 +5087,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('15.0.0-alpha.2');
+const VERSION = new Version('15.0.0-alpha.4');
 
 /**
  * Generated bundle index. Do not edit.