@skyux/layout 5.6.2 → 5.7.0

package/fesm2015/skyux-layout.js

@@ -12,8 +12,8 @@ import * as i3$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i1 from '@skyux/core';
 import { SkyMediaBreakpoints, SkyDockModule, SkyCoreAdapterService } from '@skyux/core';
-import { Subject, fromEvent, BehaviorSubject, forkJoin } from 'rxjs';
-import { takeUntil, map, take } from 'rxjs/operators';
+import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i3$2 from '@angular/forms';
@@ -354,7 +354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-layout' schematic.
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-layout' schematic.
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
@@ -439,24 +439,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @internal
  */
 class SkyBackToTopDomAdapterService {
-    constructor(windowRef) {
+    constructor(windowRef, scrollableHostService) {
         this.windowRef = windowRef;
+        this.scrollableHostService = scrollableHostService;
         this.ngUnsubscribe = new Subject();
+        this.scrollableHostScrollEventUnsubscribe = new Subject();
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.scrollableHostScrollEventUnsubscribe.next();
+        this.scrollableHostScrollEventUnsubscribe.complete();
     }
     /**
      * This event returns a boolean on scroll indicating whether the provided element is in view.
      * @param elementRef The target element reference.
      */
     elementInViewOnScroll(elementRef) {
-        const parent = this.findScrollableParent(elementRef.nativeElement);
-        return fromEvent(parent, 'scroll').pipe(takeUntil(this.ngUnsubscribe), map(() => {
-            const isInView = this.isElementScrolledInView(elementRef.nativeElement, parent);
-            return isInView;
-        }));
+        const scrollableHostObservable = this.scrollableHostService.watchScrollableHostScrollEvents(elementRef);
+        const isInitiallyInView = this.isElementScrolledInView(elementRef);
+        const returnedObservable = new BehaviorSubject(isInitiallyInView);
+        scrollableHostObservable
+            .pipe(takeUntil(this.scrollableHostScrollEventUnsubscribe))
+            .subscribe(() => {
+            const isInView = this.isElementScrolledInView(elementRef);
+            returnedObservable.next(isInView);
+        });
+        return returnedObservable;
     }
     /**
      * Scrolls the window or scrollable parent to the provided element.
@@ -468,9 +477,8 @@ class SkyBackToTopDomAdapterService {
         if (!elementRef || !elementRef.nativeElement) {
             return;
         }
-        const windowObj = this.windowRef.nativeWindow;
-        const parent = this.findScrollableParent(elementRef.nativeElement);
-        if (parent === windowObj) {
+        const scrollableHost = this.scrollableHostService.getScrollableHost(elementRef);
+        if (scrollableHost instanceof Window) {
             // Scroll to top of window, but account for the body margin that allows for the omnibar if it exists.
             const bodyMarginOffset = parseInt(getComputedStyle(document.body).marginTop, 10);
             const newOffsetTop = elementRef.nativeElement.offsetTop - bodyMarginOffset;
@@ -478,45 +486,32 @@ class SkyBackToTopDomAdapterService {
         }
         else {
             // Scroll to top of parent element.
-            parent.scrollTop = parent.offsetTop - elementRef.nativeElement.offsetTop;
-        }
-    }
-    findScrollableParent(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;
-    }
-    isElementScrolledInView(element, parentElement) {
+            scrollableHost.scrollTop =
+                scrollableHost.offsetTop - elementRef.nativeElement.offsetTop;
+        }
+    }
+    isElementScrolledInView(element) {
+        const parentElement = this.scrollableHostService.getScrollableHost(element.nativeElement);
+        if (!element.nativeElement.offsetParent) {
+            return true;
+        }
         const buffer = 25;
-        const windowObj = this.windowRef.nativeWindow;
-        const elementRect = element.getBoundingClientRect();
+        const elementRect = element.nativeElement.getBoundingClientRect();
         /* istanbul ignore else */
-        if (parentElement === windowObj) {
-            return elementRect.top > -buffer;
-        }
-        else {
+        if (parentElement instanceof HTMLElement) {
             const parentRect = parentElement.getBoundingClientRect();
             return elementRect.top > parentRect.top - buffer;
         }
+        else {
+            return elementRect.top > -buffer;
+        }
     }
 }
-SkyBackToTopDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopDomAdapterService, deps: [{ token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyBackToTopDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopDomAdapterService, deps: [{ token: i1.SkyAppWindowRef }, { token: i1.SkyScrollableHostService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyBackToTopDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopDomAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyBackToTopDomAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.SkyAppWindowRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyAppWindowRef }, { type: i1.SkyScrollableHostService }]; } });
 
 /**
  * Specifies the type of message to send to the back to top component.
@@ -562,8 +557,7 @@ class SkyBackToTopDirective {
             .subscribe((message) => this.handleIncomingMessages(message));
     }
     ngAfterViewInit() {
-        const scrollableParent = this.domAdapter.findScrollableParent(this.element.nativeElement);
-        this.elementInView = this.domAdapter.isElementScrolledInView(this.element.nativeElement, scrollableParent);
+        this.elementInView = this.domAdapter.isElementScrolledInView(this.element);
         this.handleBackToTopButton(this.elementInView);
         this.setBackToTopListeners();
     }
@@ -1731,6 +1725,9 @@ var SkyFluidGridGutterSize;
     SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
 })(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
 
+/**
+ * Displays a column within a row of the fluid grid.
+ */
 class SkyColumnComponent {
     ngOnChanges(changes) {
         /* istanbul ignore else */