@skyux/layout 5.6.1 → 5.7.1

package/bundles/skyux-layout.umd.js

@@ -392,7 +392,7 @@
     /**
      * 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.
      */
     var RESOURCES = {
@@ -488,13 +488,17 @@
      * @internal
      */
     var SkyBackToTopDomAdapterService = /** @class */ (function () {
-        function SkyBackToTopDomAdapterService(windowRef) {
+        function SkyBackToTopDomAdapterService(windowRef, scrollableHostService) {
             this.windowRef = windowRef;
+            this.scrollableHostService = scrollableHostService;
             this.ngUnsubscribe = new rxjs.Subject();
+            this.scrollableHostScrollEventUnsubscribe = new rxjs.Subject();
         }
         SkyBackToTopDomAdapterService.prototype.ngOnDestroy = function () {
             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.
@@ -502,11 +506,16 @@
          */
         SkyBackToTopDomAdapterService.prototype.elementInViewOnScroll = function (elementRef) {
             var _this = this;
-            var parent = this.findScrollableParent(elementRef.nativeElement);
-            return rxjs.fromEvent(parent, 'scroll').pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function () {
-                var isInView = _this.isElementScrolledInView(elementRef.nativeElement, parent);
-                return isInView;
-            }));
+            var scrollableHostObservable = this.scrollableHostService.watchScrollableHostScrollEvents(elementRef);
+            var isInitiallyInView = this.isElementScrolledInView(elementRef);
+            var returnedObservable = new rxjs.BehaviorSubject(isInitiallyInView);
+            scrollableHostObservable
+                .pipe(operators.takeUntil(this.scrollableHostScrollEventUnsubscribe))
+                .subscribe(function () {
+                var isInView = _this.isElementScrolledInView(elementRef);
+                returnedObservable.next(isInView);
+            });
+            return returnedObservable;
         };
         /**
          * Scrolls the window or scrollable parent to the provided element.
@@ -518,9 +527,8 @@
             if (!elementRef || !elementRef.nativeElement) {
                 return;
             }
-            var windowObj = this.windowRef.nativeWindow;
-            var parent = this.findScrollableParent(elementRef.nativeElement);
-            if (parent === windowObj) {
+            var 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.
                 var bodyMarginOffset = parseInt(getComputedStyle(document.body).marginTop, 10);
                 var newOffsetTop = elementRef.nativeElement.offsetTop - bodyMarginOffset;
@@ -528,46 +536,33 @@
             }
             else {
                 // Scroll to top of parent element.
-                parent.scrollTop = parent.offsetTop - elementRef.nativeElement.offsetTop;
-            }
-        };
-        SkyBackToTopDomAdapterService.prototype.findScrollableParent = 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;
-        };
-        SkyBackToTopDomAdapterService.prototype.isElementScrolledInView = function (element, parentElement) {
+                scrollableHost.scrollTop =
+                    scrollableHost.offsetTop - elementRef.nativeElement.offsetTop;
+            }
+        };
+        SkyBackToTopDomAdapterService.prototype.isElementScrolledInView = function (element) {
+            var parentElement = this.scrollableHostService.getScrollableHost(element.nativeElement);
+            if (!element.nativeElement.offsetParent) {
+                return true;
+            }
             var buffer = 25;
-            var windowObj = this.windowRef.nativeWindow;
-            var elementRect = element.getBoundingClientRect();
+            var elementRect = element.nativeElement.getBoundingClientRect();
             /* istanbul ignore else */
-            if (parentElement === windowObj) {
-                return elementRect.top > -buffer;
-            }
-            else {
+            if (parentElement instanceof HTMLElement) {
                 var parentRect = parentElement.getBoundingClientRect();
                 return elementRect.top > parentRect.top - buffer;
             }
+            else {
+                return elementRect.top > -buffer;
+            }
         };
         return SkyBackToTopDomAdapterService;
     }());
-    SkyBackToTopDomAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyBackToTopDomAdapterService, deps: [{ token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyBackToTopDomAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyBackToTopDomAdapterService, deps: [{ token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyScrollableHostService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     SkyBackToTopDomAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyBackToTopDomAdapterService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyBackToTopDomAdapterService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace.SkyAppWindowRef }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyScrollableHostService }]; } });
 
     /**
      * Specifies the type of message to send to the back to top component.
@@ -622,8 +617,7 @@
             configurable: true
         });
         SkyBackToTopDirective.prototype.ngAfterViewInit = function () {
-            var 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();
         };
@@ -1882,6 +1876,9 @@
         SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
     })(exports.SkyFluidGridGutterSize || (exports.SkyFluidGridGutterSize = {}));
 
+    /**
+     * Displays a column within a row of the fluid grid.
+     */
     var SkyColumnComponent = /** @class */ (function () {
         function SkyColumnComponent() {
         }
@@ -2387,7 +2384,7 @@
             },
             /**
              * The tokenized string that represents the template. Tokens use the `{n}` notation
-             * where n is the ordinal of the item to replace the token.
+             * where `n` is the ordinal of the item to replace the token.
              */
             set: function (value) {
                 this._text = value;