@skyux/core 12.14.3 → 12.16.0

package/fesm2022/skyux-core.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Output, Input, Directive, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, input, effect, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, concat } from 'rxjs';
-import { takeUntil, debounceTime, switchMap, map as map$1 } from 'rxjs/operators';
+import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, switchMap, concat, debounceTime as debounceTime$1 } from 'rxjs';
+import { takeUntil, debounceTime, take } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/i18n';
@@ -3860,10 +3860,12 @@ class SkyScrollableHostService {
     #mutationObserverSvc;
     #windowRef;
     #resizeObserverSvc;
-    constructor(mutationObserverSvc, windowRef, resizeObserverSvc) {
+    #zone;
+    constructor(mutationObserverSvc, windowRef, resizeObserverSvc, zone) {
         this.#mutationObserverSvc = mutationObserverSvc;
         this.#resizeObserverSvc = resizeObserverSvc;
         this.#windowRef = windowRef;
+        this.#zone = zone;
     }
     /**
      * Returns the given element's current scrollable host
@@ -3954,7 +3956,7 @@ class SkyScrollableHostService {
                     /* istanbul ignore else */
                     if (newScrollableHost) {
                         scrollEventSubscription = fromEvent(newScrollableHost, 'scroll')
-                            .pipe(takeUntil(newScrollableHostObservable))
+                            .pipe(takeUntil$1(newScrollableHostObservable))
                             .subscribe(() => {
                             notifySubscribers(subscribers);
                         });
@@ -3980,7 +3982,7 @@ class SkyScrollableHostService {
         if (!this.#resizeObserverSvc) {
             return of('none');
         }
-        return this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers), switchMap(([scrollableHost, additionalHosts]) => {
+        const watch = () => this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers), switchMap(([scrollableHost, additionalHosts]) => {
             const resizeObserverSvc = this.#resizeObserverSvc;
             if (!resizeObserverSvc ||
                 ((!scrollableHost ||
@@ -3988,12 +3990,22 @@ class SkyScrollableHostService {
                     additionalHosts.length === 0)) {
                 return of('none');
             }
+            const hostsParents = additionalHosts
+                .map((container) => container.nativeElement?.offsetParent)
+                .filter(Boolean);
             const inputs = [
                 of(undefined),
+                fromEvent(this.#windowRef.nativeWindow, 'resize'),
+                fromEvent(this.#windowRef.nativeWindow, 'scroll'),
                 ...additionalHosts.map((container) => resizeObserverSvc.observe(container)),
+                fromEvent(hostsParents, 'scroll'),
+                ...hostsParents.map((hostsParent) => resizeObserverSvc.observe({
+                    nativeElement: hostsParent,
+                })),
             ];
             let getHostRect;
-            if (scrollableHost && scrollableHost !== this.#windowRef.nativeWindow) {
+            if (scrollableHost &&
+                scrollableHost !== this.#windowRef.nativeWindow) {
                 inputs.push(resizeObserverSvc.observe({ nativeElement: scrollableHost }));
                 getHostRect = () => scrollableHost.getBoundingClientRect();
             }
@@ -4005,7 +4017,7 @@ class SkyScrollableHostService {
                     bottom: this.#windowRef.nativeWindow.innerHeight,
                 });
             }
-            return concat(inputs).pipe(debounceTime(0, animationFrameScheduler), map$1(() => {
+            return concat(inputs).pipe(observeOn(animationFrameScheduler), debounceTime$1(0), map(() => {
                 const viewportSize = this.#getViewportSize();
                 let { top, left, right, bottom } = getHostRect();
                 for (const container of additionalHosts) {
@@ -4022,6 +4034,13 @@ class SkyScrollableHostService {
                 return `inset(${top}px ${viewportSize.width - right}px ${viewportSize.height - bottom}px ${left}px)`;
             }));
         }));
+        /* istanbul ignore else */
+        if (this.#zone) {
+            return this.#zone.runOutsideAngular(watch);
+        }
+        else {
+            return watch();
+        }
     }
     #findScrollableHost(element) {
         const regex = /(auto|scroll)/;
@@ -4080,7 +4099,7 @@ class SkyScrollableHostService {
             height: docElem.clientHeight,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }, { token: i0.NgZone, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyScrollableHostService, decorators: [{
@@ -4090,6 +4109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }], ctorParameters: () => [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
                     type: Optional
+                }] }, { type: i0.NgZone, decorators: [{
+                    type: Optional
                 }] }] });
 
 /**
@@ -4316,7 +4337,7 @@ class SkyViewkeeper {
     syncElPosition(el, boundaryEl) {
         const verticalOffset = this.#calculateVerticalOffset();
         // When the element isn't visible, its size can't be calculated, so don't attempt syncing position in this case.
-        if (el.offsetWidth === 0 && el.offsetHeight === 0) {
+        if (this.#isDestroyed || (el.offsetWidth === 0 && el.offsetHeight === 0)) {
             return;
         }
         const boundaryInfo = this.#getBoundaryInfo(el, boundaryEl);
@@ -4344,17 +4365,16 @@ class SkyViewkeeper {
             if (this.#el) {
                 this.#unfixEl(this.#el);
             }
-            if (this.#verticalOffsetEl) {
-                this.#verticalOffsetEl.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.#syncElPositionHandler);
-                this.#verticalOffsetEl.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
-            }
+            this.#verticalOffsetEl?.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.#syncElPositionHandler);
+            this.#verticalOffsetEl?.classList.remove(CLS_VIEWKEEPER_FIXED_NOT_LAST);
             this.#spacerResizeObserver?.disconnect();
             this.#boundaryEl?.classList.remove(CLS_VIEWKEEPER_BOUNDARY);
             this.#el =
                 this.#boundaryEl =
                     this.#verticalOffsetEl =
-                        this.#spacerResizeObserver =
-                            undefined;
+                        this.#intersectionObserver =
+                            this.#spacerResizeObserver =
+                                undefined;
             this.#isDestroyed = true;
         }
     }
@@ -4563,6 +4583,8 @@ class SkyViewkeeperDirective {
     #scrollableHostWatchUnsubscribe;
     #viewkeepers = [];
     #viewkeeperSvc;
+    #renderer = inject(RendererFactory2).createRenderer(undefined, null);
+    #shadowElement;
     constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostSvc) {
         this.#el = el;
         this.#mutationObserverSvc = mutationObserverSvc;
@@ -4577,16 +4599,24 @@ class SkyViewkeeperDirective {
         });
     }
     ngOnDestroy() {
-        /*istanbul ignore else*/
-        if (this.#observer) {
-            this.#observer.disconnect();
+        this.#observer?.disconnect();
+        this.#scrollableHostWatchUnsubscribe?.next();
+        this.#scrollableHostWatchUnsubscribe?.complete();
+        this.#destroyViewkeepers();
+        if (this.#shadowElement) {
+            this.#renderer.removeChild(this.#el.nativeElement, this.#shadowElement);
         }
-        /*istanbul ignore else*/
-        if (this.#scrollableHostWatchUnsubscribe) {
-            this.#scrollableHostWatchUnsubscribe.next();
-            this.#scrollableHostWatchUnsubscribe.complete();
+    }
+    ngAfterViewInit() {
+        const shadowElement = this.#renderer.createElement('div');
+        shadowElement.classList.add('sky-viewkeeper-shadow');
+        if (this.#el.nativeElement.firstChild) {
+            this.#renderer.insertBefore(this.#el.nativeElement, shadowElement, this.#el.nativeElement.firstChild);
         }
-        this.#destroyViewkeepers();
+        else {
+            this.#renderer.appendChild(this.#el.nativeElement, shadowElement);
+        }
+        this.#shadowElement = shadowElement;
     }
     #destroyViewkeepers() {
         for (const viewkeeper of this.#viewkeepers) {
@@ -4624,21 +4654,16 @@ class SkyViewkeeperDirective {
     #detectElements() {
         const viewkeeperEls = this.#getViewkeeperEls();
         if (this.#viewkeeperElsChanged(viewkeeperEls)) {
-            if (this.#scrollableHostWatchUnsubscribe) {
-                this.#scrollableHostWatchUnsubscribe.next();
-                this.#scrollableHostWatchUnsubscribe.complete();
-                this.#scrollableHostWatchUnsubscribe = new Subject();
-            }
-            else {
-                this.#scrollableHostWatchUnsubscribe = new Subject();
-            }
+            this.#scrollableHostWatchUnsubscribe?.next();
+            this.#scrollableHostWatchUnsubscribe?.complete();
+            this.#scrollableHostWatchUnsubscribe = new Subject();
             if (this.#scrollableHostSvc) {
                 this.#scrollableHostSvc
                     .watchScrollableHost(this.#el)
                     .pipe(takeUntil(this.#scrollableHostWatchUnsubscribe))
                     .subscribe((scrollableHost) => {
                     this.#destroyViewkeepers();
-                    let previousViewkeeperEl;
+                    let previousViewkeeperEl = undefined;
                     for (const viewkeeperEl of viewkeeperEls) {
                         this.#viewkeepers.push(this.#viewkeeperSvc.create({
                             boundaryEl: this.#el.nativeElement,
@@ -4653,11 +4678,32 @@ class SkyViewkeeperDirective {
                     }
                 });
             }
+            this.#scrollableHostWatchUnsubscribe.pipe(take(1)).subscribe(() => {
+                this.#shadowElement?.classList.remove('sky-viewkeeper-shadow--active');
+            });
+            fromEvent(viewkeeperEls, 'afterViewkeeperSync')
+                .pipe(takeUntil(this.#scrollableHostWatchUnsubscribe), observeOn(animationFrameScheduler))
+                .subscribe(() => {
+                const applicable = viewkeeperEls.filter((el) => el.classList.contains('sky-viewkeeper-fixed') &&
+                    (!this.skyViewkeeperOmitShadow ||
+                        !el.matches(this.skyViewkeeperOmitShadow)));
+                if (applicable.length === 0) {
+                    this.#shadowElement?.classList.remove('sky-viewkeeper-shadow--active');
+                    return;
+                }
+                this.#shadowElement?.classList.add('sky-viewkeeper-shadow--active');
+                const boundingRectangles = applicable.map((el) => el.getBoundingClientRect());
+                const left = boundingRectangles.reduce((num, rect) => Math.min(num, rect.left), Number.POSITIVE_INFINITY);
+                const right = boundingRectangles.reduce((num, rect) => Math.max(num, rect.right), Number.NEGATIVE_INFINITY);
+                const top = boundingRectangles.reduce((num, rect) => Math.min(num, rect.top), Number.POSITIVE_INFINITY);
+                const bottom = boundingRectangles.reduce((num, rect) => Math.max(num, rect.bottom), Number.NEGATIVE_INFINITY);
+                this.#renderer.setStyle(this.#shadowElement, 'inset', `${top}px ${window.innerWidth - right}px ${window.innerHeight - bottom}px ${left}px`);
+            });
             this.#currentViewkeeperEls = viewkeeperEls;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: SkyViewkeeperDirective, isStandalone: false, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: SkyViewkeeperDirective, isStandalone: false, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper", skyViewkeeperOmitShadow: "skyViewkeeperOmitShadow" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
@@ -4669,6 +4715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     type: Optional
                 }] }], propDecorators: { skyViewkeeper: [{
                 type: Input
+            }], skyViewkeeperOmitShadow: [{
+                type: Input
             }] } });
 
 class SkyViewkeeperModule {
@@ -4701,7 +4749,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('12.14.3');
+const VERSION = new Version('12.16.0');
 
 /**
  * Generated bundle index. Do not edit.