@skyux/core 9.12.1 → 9.13.1

package/fesm2022/skyux-core.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Directive, Input, Output, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, HostBinding, ApplicationRef, Renderer2 } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, Subscription, ReplaySubject, fromEvent, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
-import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
+import { Subject, Subscription, ReplaySubject, fromEvent, BehaviorSubject, Observable, filter, map, distinctUntilChanged, shareReplay, throttle, animationFrames, take, takeUntil as takeUntil$1, of, concat, animationFrameScheduler } from 'rxjs';
+import { takeUntil, debounceTime, switchMap, map as map$1 } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
@@ -546,7 +546,9 @@ class SkyAffixer {
         }
     }
     #getOffsetParentRect() {
-        if (this.#affixedElement.offsetParent) {
+        // Firefox sets the offsetParent to document.body if the element uses fixed positioning.
+        if (this.#config.position === 'absolute' &&
+            this.#affixedElement.offsetParent) {
             return getOuterRect(this.#affixedElement.offsetParent);
         }
         else {
@@ -2988,80 +2990,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
+const errorTest = /ResizeObserver loop completed with undelivered notifications/i;
+let errorLogRegistered = false;
+let originalOnError = undefined;
+const errorHandler = (event) => {
+    if (errorTest.test(event.message)) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+    return undefined;
+};
+const onError = (event) => {
+    const message = typeof event === 'string' ? event : event.message;
+    // This is necessary to prevent the test runner from failing on errors, but challenging to reliably test.
+    /* istanbul ignore next */
+    if (errorTest.test(message)) {
+        if (event instanceof ErrorEvent) {
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        return false;
+    }
+    return originalOnError?.call(window, event);
+};
 /**
  * Service to create rxjs observables for changes to the content box dimensions of elements.
  */
 class SkyResizeObserverService {
-    #next = new Map();
-    #resizeObserver = new ResizeObserver((entries) => {
-        entries.forEach((entry) => this.#callback(entry));
-    });
-    #tracking = [];
+    #ngUnsubscribe = new Subject();
+    #resizeObserver = new ResizeObserver((entries) => this.#resizeSubject.next(entries));
+    #resizeSubject = new Subject();
+    #tracking = new Map();
     #window = inject(SkyAppWindowRef);
     #zone = inject(NgZone);
+    constructor() {
+        this.#expectWindowError();
+        // Because the resize observer is a native browser API, it does not shut down
+        // synchronously when the service is destroyed. Leave the error handling
+        // accommodation in place until the application is destroyed. This also works
+        // for the test runner.
+        inject(ApplicationRef).onDestroy(() => this.#resetWindowError());
+    }
     ngOnDestroy() {
-        this.#next.forEach((value) => this.#window.nativeWindow.cancelAnimationFrame(value));
-        this.#tracking.forEach((value) => {
-            value.subject.complete();
-            this.#resizeObserver.unobserve(value.element);
-        });
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
         this.#resizeObserver.disconnect();
     }
     /**
      * Create rxjs observable to get size changes for an element ref.
      */
     observe(element) {
-        return this.#observeAndTrack(element).subjectObservable;
-    }
-    #observeAndTrack(element) {
-        const checkTracking = this.#tracking.findIndex((value) => {
-            return !value.subject.closed && value.element === element.nativeElement;
-        });
-        if (checkTracking === -1) {
-            this.#resizeObserver.observe(element.nativeElement);
-        }
-        const subject = new Subject();
-        const subjectObservable = subject.pipe(finalize(() => {
-            // Are there any other tracking entries still watching this element?
-            const checkTracking = this.#tracking.findIndex((value) => {
-                return (value.subject !== subject &&
-                    !value.subject.closed &&
-                    value.element === element.nativeElement);
-            });
-            if (checkTracking === -1) {
-                this.#resizeObserver.unobserve(element.nativeElement);
-                const deleteTracking = this.#tracking.findIndex((value) => value.subject === subject);
-                if (deleteTracking > -1) {
-                    this.#tracking.splice(deleteTracking, 1);
-                }
-            }
-        }));
-        const tracking = {
-            element: element.nativeElement,
-            subject,
-            subjectObservable,
-        };
-        this.#tracking.push(tracking);
-        return tracking;
-    }
-    #callback(entry) {
-        this.#tracking
-            .filter((value) => !value.subject.closed)
-            .forEach((value) => {
-            /* istanbul ignore else */
-            if (value.element === entry.target) {
-                // Execute the callback within NgZone because Angular does not "monkey patch"
-                // ResizeObserver like it does for other features in the DOM.
-                if (this.#next.has(value.subject)) {
-                    this.#window.nativeWindow.cancelAnimationFrame(this.#next.get(value.subject));
-                }
-                this.#next.set(value.subject, this.#window.nativeWindow.requestAnimationFrame(() => {
-                    this.#zone.run(() => {
-                        value.subject.next(entry);
-                    });
-                }));
-            }
-        });
+        const checkTracking = this.#tracking.has(element.nativeElement);
+        if (!checkTracking) {
+            this.#tracking.set(element.nativeElement, new Observable((observer) => {
+                const subscription = this.#resizeSubject.subscribe(observer);
+                this.#resizeObserver?.observe(element.nativeElement);
+                return () => {
+                    this.#resizeObserver?.unobserve(element.nativeElement);
+                    subscription.unsubscribe();
+                    this.#tracking.delete(element.nativeElement);
+                };
+            }).pipe(filter(Boolean), filter((entries) => entries.some((entry) => entry.target === element.nativeElement)), map((entries) => entries.find((entry) => entry.target === element.nativeElement)), 
+            // Ignore subpixel changes.
+            distinctUntilChanged((a, b) => Math.round(a.contentRect.width) ===
+                Math.round(b.contentRect.width) &&
+                Math.round(a.contentRect.height) ===
+                    Math.round(b.contentRect.height)), 
+            // Emit the last value for late subscribers. Track references so it
+            // un-observes when all subscribers are gone.
+            shareReplay({ bufferSize: 1, refCount: true }), 
+            // Only emit prior to an animation frame to prevent layout thrashing.
+            throttle(() => animationFrames().pipe(take(1)), {
+                leading: false,
+                trailing: true,
+            }), takeUntil$1(this.#ngUnsubscribe)));
+        }
+        return this.#tracking.get(element.nativeElement);
+    }
+    #expectWindowError() {
+        if (!errorLogRegistered) {
+            errorLogRegistered = true;
+            // ResizeObserver throws an error when it is disconnected while it is
+            // still observing an element. When an element is no longer observed, this
+            // is not a concern.
+            this.#zone.runOutsideAngular(() => this.#window.nativeWindow.addEventListener('error', errorHandler));
+        }
+        if (this.#window.nativeWindow.onerror !== onError) {
+            originalOnError = this.#window.nativeWindow.onerror;
+            this.#window.nativeWindow.onerror = onError;
+        }
+    }
+    #resetWindowError() {
+        this.#window.nativeWindow.removeEventListener('error', errorHandler);
+        if (originalOnError) {
+            this.#window.nativeWindow.onerror = originalOnError;
+            originalOnError = undefined;
+        }
+        errorLogRegistered = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' }); }
@@ -3071,7 +3099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
 const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
 /**
@@ -3407,7 +3435,7 @@ class SkyScrollableHostService {
             return concat([
                 of(undefined),
                 this.#resizeObserverSvc.observe({ nativeElement: scrollableHost }),
-            ]).pipe(debounceTime(0, animationFrameScheduler), map(() => {
+            ]).pipe(debounceTime(0, animationFrameScheduler), map$1(() => {
                 const viewportSize = this.#getViewportSize();
                 const { top, left, width, height } = scrollableHost.getBoundingClientRect();
                 const right = Math.max(viewportSize.width - left - width, 0);
@@ -4085,7 +4113,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('9.12.1');
+const VERSION = new Version('9.13.1');
 
 /**
  * Generated bundle index. Do not edit.