@skyux/core 4.8.1 → 4.9.0

package/fesm5/skyux-core.js

@@ -2,7 +2,7 @@ import { __decorate, __assign, __read, __param, __values, __spread } 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';
@@ -1276,7 +1276,7 @@ var SkyDockComponent = /** @class */ (function () {
                 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);
     return SkyDockComponent;
@@ -2528,6 +2528,87 @@ var SkyPercentPipeModule = /** @class */ (function () {
     return SkyPercentPipeModule;
 }());
 
+var SkyScrollableHostService = /** @class */ (function () {
+    function SkyScrollableHostService(mutationObserverSvc, windowRef) {
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.windowRef = windowRef;
+    }
+    SkyScrollableHostService.prototype.getScrollabeHost = function (elementRef) {
+        return this.findScrollableHost(elementRef.nativeElement);
+    };
+    SkyScrollableHostService.prototype.watchScrollableHost = function (elementRef, completionObservable) {
+        var _this = this;
+        var scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+        var behaviorSubject = new BehaviorSubject(scrollableHost);
+        var mutationObserver = this.mutationObserverSvc.create(function () {
+            var 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(function () {
+            mutationObserver.disconnect();
+        });
+        return behaviorSubject;
+    };
+    SkyScrollableHostService.prototype.findScrollableHost = function (element) {
+        var regex = /(auto|scroll)/;
+        var windowObj = this.windowRef.nativeWindow;
+        var bodyObj = windowObj.document.body;
+        /* Sanity check */
+        if (!element) {
+            return windowObj;
+        }
+        var style = windowObj.getComputedStyle(element);
+        var 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;
+    };
+    SkyScrollableHostService.prototype.observeForScrollableHostChanges = function (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 = function () { return [
+        { 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);
+    return SkyScrollableHostService;
+}());
+
 /**
  * Provides a method for setting a formatted title on the current window.
  */
@@ -2595,11 +2676,12 @@ function nextId() {
     nextIdIndex = (nextIdIndex || 0) + 1;
     return 'viewkeeper-' + nextIdIndex;
 }
-function getOffset(el) {
+function getOffset(el, scrollableHost) {
     var rect = el.getBoundingClientRect();
+    var 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) {
@@ -2636,6 +2718,7 @@ var SkyViewkeeper = /** @class */ (function () {
         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;
@@ -2643,7 +2726,7 @@ var SkyViewkeeper = /** @class */ (function () {
         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();
@@ -2671,7 +2754,7 @@ var SkyViewkeeper = /** @class */ (function () {
     };
     SkyViewkeeper.prototype.destroy = function () {
         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();
@@ -2709,16 +2792,19 @@ var SkyViewkeeper = /** @class */ (function () {
             var verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
             offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
         }
+        else if (this.scrollableHost) {
+            offset += this.scrollableHost.getBoundingClientRect().top;
+        }
         return offset;
     };
     SkyViewkeeper.prototype.shouldFixEl = function (boundaryInfo, verticalOffset) {
         var anchorTop;
         var 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;
@@ -2777,11 +2863,11 @@ var SkyViewkeeper = /** @class */ (function () {
         var spacerId = this.getSpacerId();
         var spacerEl = document.getElementById(spacerId);
         var boundaryEl = this.boundaryEl;
-        var boundaryOffset = getOffset(boundaryEl);
+        var boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
         var boundaryTop = boundaryOffset.top;
         var boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-        var scrollLeft = document.documentElement.scrollLeft;
-        var scrollTop = document.documentElement.scrollTop;
+        var scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
+        var scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
         var elHeight = getHeightWithMargin(this.el);
         return {
             boundaryBottom: boundaryBottom,
@@ -2830,11 +2916,13 @@ var SkyViewkeeperService = /** @class */ (function () {
 }());
 
 var SkyViewkeeperDirective = /** @class */ (function () {
-    function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc) {
+    function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
         this.el = el;
         this.mutationObserverSvc = mutationObserverSvc;
         this.viewkeeperSvc = viewkeeperSvc;
+        this.scrollableHostService = scrollableHostService;
         this.viewkeepers = [];
+        this.scrollableHostWatchUnsubscribe = undefined;
     }
     Object.defineProperty(SkyViewkeeperDirective.prototype, "skyViewkeeper", {
         get: function () {
@@ -2915,37 +3003,51 @@ var SkyViewkeeperDirective = /** @class */ (function () {
         return false;
     };
     SkyViewkeeperDirective.prototype.detectElements = function () {
-        var e_3, _a;
+        var _this = this;
         var viewkeeperEls = this.getViewkeeperEls();
         if (this.viewkeeperElsChanged(viewkeeperEls)) {
-            this.destroyViewkeepers();
-            var previousViewkeeperEl = void 0;
-            try {
-                for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
-                    var viewkeeperEl = viewkeeperEls_1_1.value;
-                    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();
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
+            else {
+                this.scrollableHostWatchUnsubscribe = new Subject();
+            }
+            this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                .pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
+                .subscribe(function (scrollableHost) {
+                var e_3, _a;
+                _this.destroyViewkeepers();
+                var previousViewkeeperEl;
                 try {
-                    if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                    for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
+                        var viewkeeperEl = viewkeeperEls_1_1.value;
+                        _this.viewkeepers.push(_this.viewkeeperSvc.create({
+                            boundaryEl: _this.el.nativeElement,
+                            scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
+                            el: viewkeeperEl,
+                            setWidth: true,
+                            verticalOffsetEl: previousViewkeeperEl
+                        }));
+                        previousViewkeeperEl = viewkeeperEl;
+                    }
                 }
-                finally { if (e_3) throw e_3.error; }
-            }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            });
             this.currentViewkeeperEls = viewkeeperEls;
         }
     };
     SkyViewkeeperDirective.ctorParameters = function () { return [
         { type: ElementRef },
         { type: MutationObserverService },
-        { type: SkyViewkeeperService }
+        { type: SkyViewkeeperService },
+        { type: SkyScrollableHostService, decorators: [{ type: Optional }] }
     ]; };
     __decorate([
         Input()
@@ -2953,11 +3055,26 @@ var SkyViewkeeperDirective = /** @class */ (function () {
     SkyViewkeeperDirective = __decorate([
         Directive({
             selector: '[skyViewkeeper]'
-        })
+        }),
+        __param(3, Optional())
     ], SkyViewkeeperDirective);
     return SkyViewkeeperDirective;
 }());
 
+var SkyScrollableHostModule = /** @class */ (function () {
+    function SkyScrollableHostModule() {
+    }
+    SkyScrollableHostModule = __decorate([
+        NgModule({
+            providers: [
+                MutationObserverService,
+                SkyAppWindowRef
+            ]
+        })
+    ], SkyScrollableHostModule);
+    return SkyScrollableHostModule;
+}());
+
 var SkyViewkeeperModule = /** @class */ (function () {
     function SkyViewkeeperModule() {
     }
@@ -2966,6 +3083,9 @@ var SkyViewkeeperModule = /** @class */ (function () {
             declarations: [
                 SkyViewkeeperDirective
             ],
+            imports: [
+                SkyScrollableHostModule
+            ],
             exports: [
                 SkyViewkeeperDirective
             ],
@@ -2982,5 +3102,5 @@ var SkyViewkeeperModule = /** @class */ (function () {
  * 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