@skyux/core 5.0.0 → 5.1.0

package/fesm2015/skyux-core.js

@@ -3,7 +3,7 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, of } from 'rxjs';
-import { takeUntil, debounceTime } from 'rxjs/operators';
+import { takeUntil, debounceTime, take } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i3 from '@angular/router';
@@ -2440,6 +2440,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }] });
 
+class SkyScrollableHostService {
+    constructor(mutationObserverSvc, windowRef) {
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.windowRef = windowRef;
+    }
+    getScrollabeHost(elementRef) {
+        return this.findScrollableHost(elementRef.nativeElement);
+    }
+    watchScrollableHost(elementRef, completionObservable) {
+        let scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+        let behaviorSubject = new BehaviorSubject(scrollableHost);
+        const mutationObserver = this.mutationObserverSvc.create(() => {
+            let newScrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            if (newScrollableHost !== scrollableHost) {
+                scrollableHost = newScrollableHost;
+                this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+                behaviorSubject.next(scrollableHost);
+            }
+        });
+        this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+        completionObservable.pipe(take(1)).subscribe(() => {
+            mutationObserver.disconnect();
+        });
+        return behaviorSubject;
+    }
+    findScrollableHost(element) {
+        const regex = /(auto|scroll)/;
+        const windowObj = this.windowRef.nativeWindow;
+        const bodyObj = windowObj.document.body;
+        let style = windowObj.getComputedStyle(element);
+        let parent = element;
+        do {
+            parent = parent.parentNode;
+            style = windowObj.getComputedStyle(parent);
+        } while (!regex.test(style.overflow) &&
+            !regex.test(style.overflowY) &&
+            parent !== bodyObj);
+        if (parent === bodyObj) {
+            return windowObj;
+        }
+        return parent;
+    }
+    observeForScrollableHostChanges(element, mutationObserver) {
+        mutationObserver.disconnect();
+        if (element instanceof HTMLElement) {
+            mutationObserver.observe(element, {
+                attributes: true,
+                attributeFilter: ["class", "style.overflow", "style.overflow-y"],
+                subtree: true
+            });
+        }
+        else {
+            mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["class", "style.overflow", "style.overflow-y"],
+                subtree: true
+            });
+        }
+    }
+}
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: SkyAppWindowRef }]; } });
+
 /**
  * Provides a method for setting a formatted title on the current window.
  */
@@ -2521,11 +2590,12 @@ function nextId() {
     nextIdIndex = (nextIdIndex || 0) + 1;
     return 'viewkeeper-' + nextIdIndex;
 }
-function getOffset(el) {
+function getOffset(el, scrollableHost) {
     const rect = el.getBoundingClientRect();
+    const parent = scrollableHost ? scrollableHost : document.documentElement;
     return {
-        top: rect.top + document.documentElement.scrollTop,
-        left: rect.left + document.documentElement.scrollLeft
+        top: rect.top + parent.scrollTop,
+        left: rect.left + parent.scrollLeft
     };
 }
 function px(value) {
@@ -2561,6 +2631,7 @@ class SkyViewkeeper {
         this.id = nextId();
         this.el = options.el;
         this.boundaryEl = options.boundaryEl;
+        this.scrollableHost = options.scrollableHost;
         this.verticalOffset = options.verticalOffset || 0;
         this.verticalOffsetEl = options.verticalOffsetEl;
         this.viewportMarginTop = options.viewportMarginTop || 0;
@@ -2568,7 +2639,7 @@ class SkyViewkeeper {
         if (this.verticalOffsetEl) {
             this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
         }
-        window.addEventListener('scroll', this.syncElPositionHandler);
+        window.addEventListener('scroll', this.syncElPositionHandler, true);
         window.addEventListener('resize', this.syncElPositionHandler);
         window.addEventListener('orientationchange', this.syncElPositionHandler);
         ensureStyleEl();
@@ -2596,7 +2667,7 @@ class SkyViewkeeper {
     }
     destroy() {
         if (!this.isDestroyed) {
-            window.removeEventListener('scroll', this.syncElPositionHandler);
+            window.removeEventListener('scroll', this.syncElPositionHandler, true);
             window.removeEventListener('resize', this.syncElPositionHandler);
             window.removeEventListener('orientationchange', this.syncElPositionHandler);
             this.unfixEl();
@@ -2634,16 +2705,19 @@ class SkyViewkeeper {
             const verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
             offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
         }
+        else if (this.scrollableHost) {
+            offset += this.scrollableHost.getBoundingClientRect().top;
+        }
         return offset;
     }
     shouldFixEl(boundaryInfo, verticalOffset) {
         let anchorTop;
         let doFixEl;
         if (boundaryInfo.spacerEl) {
-            anchorTop = getOffset(boundaryInfo.spacerEl).top;
+            anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
         }
         else {
-            anchorTop = getOffset(this.el).top;
+            anchorTop = getOffset(this.el, this.scrollableHost).top;
         }
         doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
         return doFixEl;
@@ -2702,11 +2776,11 @@ class SkyViewkeeper {
         const spacerId = this.getSpacerId();
         const spacerEl = document.getElementById(spacerId);
         const boundaryEl = this.boundaryEl;
-        const boundaryOffset = getOffset(boundaryEl);
+        const boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
         const boundaryTop = boundaryOffset.top;
         const boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-        const scrollLeft = document.documentElement.scrollLeft;
-        const scrollTop = document.documentElement.scrollTop;
+        const scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
+        const scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
         const elHeight = getHeightWithMargin(this.el);
         return {
             boundaryBottom,
@@ -2756,11 +2830,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }] }]; } });
 
 class SkyViewkeeperDirective {
-    constructor(el, mutationObserverSvc, viewkeeperSvc) {
+    constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
         this.el = el;
         this.mutationObserverSvc = mutationObserverSvc;
         this.viewkeeperSvc = viewkeeperSvc;
+        this.scrollableHostService = scrollableHostService;
         this.viewkeepers = [];
+        this.scrollableHostWatchUnsubscribe = undefined;
     }
     set skyViewkeeper(value) {
         this._skyViewkeeper = value;
@@ -2816,29 +2892,43 @@ class SkyViewkeeperDirective {
     detectElements() {
         let viewkeeperEls = this.getViewkeeperEls();
         if (this.viewkeeperElsChanged(viewkeeperEls)) {
-            this.destroyViewkeepers();
-            let previousViewkeeperEl;
-            for (const viewkeeperEl of viewkeeperEls) {
-                this.viewkeepers.push(this.viewkeeperSvc.create({
-                    boundaryEl: this.el.nativeElement,
-                    el: viewkeeperEl,
-                    setWidth: true,
-                    verticalOffsetEl: previousViewkeeperEl
-                }));
-                previousViewkeeperEl = viewkeeperEl;
+            if (this.scrollableHostWatchUnsubscribe) {
+                this.scrollableHostWatchUnsubscribe.next();
+                this.scrollableHostWatchUnsubscribe = new Subject();
+            }
+            else {
+                this.scrollableHostWatchUnsubscribe = new Subject();
             }
+            this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                .pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
+                .subscribe(scrollableHost => {
+                this.destroyViewkeepers();
+                let previousViewkeeperEl;
+                for (const viewkeeperEl of viewkeeperEls) {
+                    this.viewkeepers.push(this.viewkeeperSvc.create({
+                        boundaryEl: this.el.nativeElement,
+                        scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
+                        el: viewkeeperEl,
+                        setWidth: true,
+                        verticalOffsetEl: previousViewkeeperEl
+                    }));
+                    previousViewkeeperEl = viewkeeperEl;
+                }
+            });
             this.currentViewkeeperEls = viewkeeperEls;
         }
     }
 }
-SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyViewkeeper]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }]; }, propDecorators: { skyViewkeeper: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { skyViewkeeper: [{
                 type: Input
             }] } });
 
@@ -2863,5 +2953,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
+export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyScrollableHostService, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
 //# sourceMappingURL=skyux-core.js.map