@skyux/core 4.8.1 → 4.9.0

package/fesm2015/skyux-core.js

@@ -2,7 +2,7 @@ import { __decorate, __param } from 'tslib';
 import { RendererFactory2, Injectable, NgModule, EventEmitter, ElementRef, Input, Output, Directive, ComponentFactoryResolver, ApplicationRef, Injector, ChangeDetectorRef, ViewChild, ViewContainerRef, Component, ChangeDetectionStrategy, ɵɵdefineInjectable, ɵɵinject, Renderer2, NgZone, Pipe, Optional } from '@angular/core';
 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 { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter, SkyLibResourcesService, SkyAppLocaleProvider, SkyI18nModule } from '@skyux/i18n';
 import { NavigationStart, Router, RouterModule } from '@angular/router';
 import { Title } from '@angular/platform-browser';
@@ -1222,7 +1222,7 @@ SkyDockComponent = __decorate([
             SkyDockDomAdapterService
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}"]
+        styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:-webkit-sticky;position:sticky}"]
     })
 ], SkyDockComponent);
 
@@ -2373,6 +2373,85 @@ SkyPercentPipeModule = __decorate([
     })
 ], SkyPercentPipeModule);
 
+let SkyScrollableHostService = 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;
+        /* Sanity check */
+        if (!element) {
+            return windowObj;
+        }
+        let style = windowObj.getComputedStyle(element);
+        let parent = element;
+        do {
+            parent = parent.parentNode;
+            /* Sanity check for if this function is called for an element which has been removed from the DOM */
+            if (!(parent instanceof HTMLElement)) {
+                return windowObj;
+            }
+            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.ctorParameters = () => [
+    { type: MutationObserverService },
+    { type: SkyAppWindowRef }
+];
+SkyScrollableHostService.ɵprov = ɵɵdefineInjectable({ factory: function SkyScrollableHostService_Factory() { return new SkyScrollableHostService(ɵɵinject(MutationObserverService), ɵɵinject(SkyAppWindowRef)); }, token: SkyScrollableHostService, providedIn: "root" });
+SkyScrollableHostService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], SkyScrollableHostService);
+
 /**
  * Provides a method for setting a formatted title on the current window.
  */
@@ -2445,11 +2524,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) {
@@ -2485,6 +2565,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;
@@ -2492,7 +2573,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();
@@ -2520,7 +2601,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();
@@ -2558,16 +2639,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;
@@ -2626,11 +2710,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,
@@ -2677,11 +2761,13 @@ SkyViewkeeperService = __decorate([
 ], SkyViewkeeperService);
 
 let SkyViewkeeperDirective = 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;
@@ -2737,17 +2823,29 @@ let SkyViewkeeperDirective = 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;
         }
     }
@@ -2755,7 +2853,8 @@ let SkyViewkeeperDirective = class SkyViewkeeperDirective {
 SkyViewkeeperDirective.ctorParameters = () => [
     { type: ElementRef },
     { type: MutationObserverService },
-    { type: SkyViewkeeperService }
+    { type: SkyViewkeeperService },
+    { type: SkyScrollableHostService, decorators: [{ type: Optional }] }
 ];
 __decorate([
     Input()
@@ -2763,9 +2862,21 @@ __decorate([
 SkyViewkeeperDirective = __decorate([
     Directive({
         selector: '[skyViewkeeper]'
-    })
+    }),
+    __param(3, Optional())
 ], SkyViewkeeperDirective);
 
+let SkyScrollableHostModule = class SkyScrollableHostModule {
+};
+SkyScrollableHostModule = __decorate([
+    NgModule({
+        providers: [
+            MutationObserverService,
+            SkyAppWindowRef
+        ]
+    })
+], SkyScrollableHostModule);
+
 let SkyViewkeeperModule = class SkyViewkeeperModule {
 };
 SkyViewkeeperModule = __decorate([
@@ -2773,6 +2884,9 @@ SkyViewkeeperModule = __decorate([
         declarations: [
             SkyViewkeeperDirective
         ],
+        imports: [
+            SkyScrollableHostModule
+        ],
         exports: [
             SkyViewkeeperDirective
         ],
@@ -2787,5 +2901,5 @@ SkyViewkeeperModule = __decorate([
  * 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 ɵa, SkyDockComponent as ɵb, SkyDockDomAdapterService as ɵc, SkyIdDirective as ɵd, SkyCoreResourcesModule as ɵe, SkyCoreResourcesProvider as ɵf, SkyOverlayComponent as ɵg, SkyOverlayContext as ɵh, SkyOverlayAdapterService as ɵi, SkyViewkeeperDirective as ɵj };
+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 ɵa, SkyDockComponent as ɵb, SkyDockDomAdapterService as ɵc, SkyIdDirective as ɵd, SkyCoreResourcesModule as ɵe, SkyCoreResourcesProvider as ɵf, SkyOverlayComponent as ɵg, SkyOverlayContext as ɵh, SkyOverlayAdapterService as ɵi, SkyViewkeeperDirective as ɵj, SkyScrollableHostModule as ɵk };
 //# sourceMappingURL=skyux-core.js.map