@skyux/core 5.0.0 → 5.1.0

package/bundles/skyux-core.umd.js

@@ -2935,6 +2935,77 @@
                         }]
                 }] });
 
+        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 rxjs.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(operators.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;
+                var style = windowObj.getComputedStyle(element);
+                var 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;
+            };
+            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
+                    });
+                }
+            };
+            return SkyScrollableHostService;
+        }());
+        SkyScrollableHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyScrollableHostService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyScrollableHostService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyScrollableHostService, decorators: [{
+                    type: i0.Injectable,
+                    args: [{
+                            providedIn: 'root'
+                        }]
+                }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: SkyAppWindowRef }]; } });
+
         /**
          * Provides a method for setting a formatted title on the current window.
          */
@@ -3011,11 +3082,12 @@
             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) {
@@ -3052,6 +3124,7 @@
                 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;
@@ -3059,7 +3132,7 @@
                 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();
@@ -3087,7 +3160,7 @@
             };
             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();
@@ -3125,16 +3198,19 @@
                     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;
@@ -3193,11 +3269,11 @@
                 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,
@@ -3251,11 +3327,13 @@
             } });
 
         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 () {
@@ -3336,43 +3414,60 @@
                 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 rxjs.Subject();
                     }
-                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                    finally {
+                    else {
+                        this.scrollableHostWatchUnsubscribe = new rxjs.Subject();
+                    }
+                    this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                        .pipe(operators.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;
                 }
             };
             return SkyViewkeeperDirective;
         }());
-        SkyViewkeeperDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperDirective, deps: [{ token: i0__namespace.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+        SkyViewkeeperDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperDirective, deps: [{ token: i0__namespace.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
         SkyViewkeeperDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0__namespace });
         i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperDirective, decorators: [{
                     type: i0.Directive,
                     args: [{
                             selector: '[skyViewkeeper]'
                         }]
-                }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }]; }, propDecorators: { skyViewkeeper: [{
+                }], ctorParameters: function () {
+                return [{ type: i0__namespace.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
+                                type: i0.Optional
+                            }] }];
+            }, propDecorators: { skyViewkeeper: [{
                         type: i0.Input
                     }] } });
 
@@ -3428,6 +3523,7 @@
         exports.SkyOverlayService = SkyOverlayService;
         exports.SkyPercentPipe = SkyPercentPipe;
         exports.SkyPercentPipeModule = SkyPercentPipeModule;
+        exports.SkyScrollableHostService = SkyScrollableHostService;
         exports.SkyUIConfigService = SkyUIConfigService;
         exports.SkyViewkeeperHostOptions = SkyViewkeeperHostOptions;
         exports.SkyViewkeeperModule = SkyViewkeeperModule;