@skyux/core 5.0.0 → 5.1.3

package/bundles/skyux-core.umd.js

@@ -2,7 +2,7 @@
         typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('@angular/router'), require('@angular/platform-browser')) :
         typeof define === 'function' && define.amd ? define('@skyux/core', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@skyux/i18n', '@angular/router', '@angular/platform-browser'], factory) :
         (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.core = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.i1, global.ng.router, global.ng.platformBrowser));
-}(this, (function (exports, i0, i4, rxjs, operators, i1, i3, i1$1) { 'use strict';
+})(this, (function (exports, i0, i4, rxjs, operators, i1, i3, i1$1) { 'use strict';
 
         function _interopNamespace(e) {
                 if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                                         var d = Object.getOwnPropertyDescriptor(e, k);
                                         Object.defineProperty(n, k, d.get ? d : {
                                                 enumerable: true,
-                                                get: function () {
-                                                        return e[k];
-                                                }
+                                                get: function () { return e[k]; }
                                         });
                                 }
                         });
                 }
-                n['default'] = e;
+                n["default"] = e;
                 return Object.freeze(n);
         }
 
@@ -39,10 +37,10 @@
             }
             return SkyCoreAdapterModule;
         }());
-        SkyCoreAdapterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyCoreAdapterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterModule });
-        SkyCoreAdapterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterModule, decorators: [{
+        SkyCoreAdapterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyCoreAdapterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterModule });
+        SkyCoreAdapterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterModule, decorators: [{
                     type: i0.NgModule,
                     args: [{}]
                 }] });
@@ -275,9 +273,9 @@
             };
             return SkyCoreAdapterService;
         }());
-        SkyCoreAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyCoreAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreAdapterService, decorators: [{
+        SkyCoreAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyCoreAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreAdapterService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -773,9 +771,9 @@
             };
             return SkyAffixService;
         }());
-        SkyAffixService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyAffixService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixService, decorators: [{
+        SkyAffixService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyAffixService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -846,9 +844,9 @@
             };
             return SkyAffixDirective;
         }());
-        SkyAffixDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixDirective, deps: [{ token: i0__namespace.ElementRef }, { token: SkyAffixService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-        SkyAffixDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0__namespace });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixDirective, decorators: [{
+        SkyAffixDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixDirective, deps: [{ token: i0__namespace.ElementRef }, { token: SkyAffixService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+        SkyAffixDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0__namespace });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixDirective, decorators: [{
                     type: i0.Directive,
                     args: [{
                             selector: '[skyAffixTo]'
@@ -882,12 +880,12 @@
             }
             return SkyAffixModule;
         }());
-        SkyAffixModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyAffixModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [i4.CommonModule], exports: [SkyAffixDirective] });
-        SkyAffixModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixModule, imports: [[
+        SkyAffixModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyAffixModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [i4.CommonModule], exports: [SkyAffixDirective] });
+        SkyAffixModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixModule, imports: [[
                     i4.CommonModule
                 ]] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAffixModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAffixModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             imports: [
@@ -962,9 +960,9 @@
             };
             return MutationObserverService;
         }());
-        MutationObserverService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: MutationObserverService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        MutationObserverService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: MutationObserverService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: MutationObserverService, decorators: [{
+        MutationObserverService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: MutationObserverService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        MutationObserverService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: MutationObserverService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: MutationObserverService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1040,9 +1038,9 @@
             };
             return SkyDockDomAdapterService;
         }());
-        SkyDockDomAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyDockDomAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockDomAdapterService });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockDomAdapterService, decorators: [{
+        SkyDockDomAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyDockDomAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockDomAdapterService });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockDomAdapterService, decorators: [{
                     type: i0.Injectable
                 }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: i0__namespace.RendererFactory2 }]; } });
 
@@ -1132,16 +1130,16 @@
             };
             return SkyDockComponent;
         }());
-        SkyDockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.Injector }, { token: SkyDockDomAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-        SkyDockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyDockComponent, selector: "sky-dock", providers: [
+        SkyDockComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.Injector }, { token: SkyDockDomAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+        SkyDockComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDockComponent, selector: "sky-dock", providers: [
                 SkyDockDomAdapterService
             ], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-container\n  #target\n></ng-container>", 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}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockComponent, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockComponent, decorators: [{
                     type: i0.Component,
                     args: [{
                             selector: 'sky-dock',
-                            templateUrl: './dock.component.html',
-                            styleUrls: ['./dock.component.scss'],
+                            template: "<ng-container\n  #target\n></ng-container>",
+                            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}\n"],
                             providers: [
                                 SkyDockDomAdapterService
                             ],
@@ -1160,14 +1158,14 @@
             }
             return SkyDockModule;
         }());
-        SkyDockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyDockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockModule, declarations: [SkyDockComponent], imports: [i4.CommonModule] });
-        SkyDockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockModule, providers: [
+        SkyDockModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyDockModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockModule, declarations: [SkyDockComponent], imports: [i4.CommonModule] });
+        SkyDockModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockModule, providers: [
                 MutationObserverService
             ], imports: [[
                     i4.CommonModule
                 ]] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             imports: [
@@ -1238,9 +1236,9 @@
             });
             return SkyAppWindowRef;
         }());
-        SkyAppWindowRef.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppWindowRef, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyAppWindowRef.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppWindowRef, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppWindowRef, decorators: [{
+        SkyAppWindowRef.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppWindowRef, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyAppWindowRef.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppWindowRef, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppWindowRef, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1314,9 +1312,9 @@
             };
             return SkyDynamicComponentService;
         }());
-        SkyDynamicComponentService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentService, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.Injector }, { token: SkyAppWindowRef }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyDynamicComponentService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentService, providedIn: 'any' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentService, decorators: [{
+        SkyDynamicComponentService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentService, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.Injector }, { token: SkyAppWindowRef }, { token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyDynamicComponentService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentService, providedIn: 'any' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             // Must be 'any' so that the component is created in the context of its module's injector.
@@ -1406,9 +1404,9 @@
             };
             return SkyDockService;
         }());
-        SkyDockService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyDockService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDockService, decorators: [{
+        SkyDockService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyDockService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDockService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1425,10 +1423,10 @@
             }
             return SkyDynamicComponentModule;
         }());
-        SkyDynamicComponentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyDynamicComponentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentModule });
-        SkyDynamicComponentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDynamicComponentModule, decorators: [{
+        SkyDynamicComponentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyDynamicComponentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentModule });
+        SkyDynamicComponentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDynamicComponentModule, decorators: [{
                     type: i0.NgModule,
                     args: [{}]
                 }] });
@@ -1447,9 +1445,9 @@
             };
             return SkyAppFormat;
         }());
-        SkyAppFormat.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppFormat, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyAppFormat.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppFormat, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppFormat, decorators: [{
+        SkyAppFormat.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppFormat, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyAppFormat.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppFormat, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppFormat, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1483,9 +1481,9 @@
             });
             return SkyIdDirective;
         }());
-        SkyIdDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-        SkyIdDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0__namespace });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdDirective, decorators: [{
+        SkyIdDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+        SkyIdDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0__namespace });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdDirective, decorators: [{
                     type: i0.Directive,
                     args: [{
                             selector: '[skyId]',
@@ -1498,10 +1496,10 @@
             }
             return SkyIdModule;
         }());
-        SkyIdModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyIdModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
-        SkyIdModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyIdModule, decorators: [{
+        SkyIdModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyIdModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+        SkyIdModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyIdModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             declarations: [
@@ -1522,10 +1520,10 @@
             }
             return SkyLogModule;
         }());
-        SkyLogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyLogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogModule });
-        SkyLogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogModule, decorators: [{
+        SkyLogModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyLogModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogModule });
+        SkyLogModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogModule, decorators: [{
                     type: i0.NgModule,
                     args: [{}]
                 }] });
@@ -1548,9 +1546,9 @@
             };
             return SkyLogService;
         }());
-        SkyLogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyLogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyLogService, decorators: [{
+        SkyLogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyLogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyLogService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1566,10 +1564,10 @@
             }
             return SkyMediaQueryModule;
         }());
-        SkyMediaQueryModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyMediaQueryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryModule });
-        SkyMediaQueryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryModule, decorators: [{
+        SkyMediaQueryModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyMediaQueryModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryModule });
+        SkyMediaQueryModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryModule, decorators: [{
                     type: i0.NgModule,
                     args: [{}]
                 }] });
@@ -1684,9 +1682,9 @@
          * The size for the `lg` breakpoint.
          */
         SkyMediaQueryService.lg = '(min-width: 1200px)';
-        SkyMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMediaQueryService, decorators: [{
+        SkyMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMediaQueryService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -1718,14 +1716,14 @@
             }
             return SkyCoreResourcesModule;
         }());
-        SkyCoreResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyCoreResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreResourcesModule, exports: [i1.SkyI18nModule] });
-        SkyCoreResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreResourcesModule, providers: [{
+        SkyCoreResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyCoreResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreResourcesModule, exports: [i1.SkyI18nModule] });
+        SkyCoreResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreResourcesModule, providers: [{
                     provide: i1.SKY_LIB_RESOURCES_PROVIDERS,
                     useClass: SkyCoreResourcesProvider,
                     multi: true
                 }], imports: [i1.SkyI18nModule] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyCoreResourcesModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyCoreResourcesModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             exports: [i1.SkyI18nModule],
@@ -2014,7 +2012,7 @@
                         ar[i] = from[i];
                     }
                 }
-            return to.concat(ar || from);
+            return to.concat(ar || Array.prototype.slice.call(from));
         }
         function __await(v) {
             return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -2346,9 +2344,9 @@
             };
             return SkyNumericService;
         }());
-        SkyNumericService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericService, deps: [{ token: i1__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyNumericService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericService, providedIn: 'any' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericService, decorators: [{
+        SkyNumericService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericService, deps: [{ token: i1__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyNumericService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericService, providedIn: 'any' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'any'
@@ -2366,14 +2364,18 @@
          * ```
          */
         var SkyNumericPipe = /** @class */ (function () {
-            function SkyNumericPipe(localeProvider, numericService) {
+            function SkyNumericPipe(localeProvider, numericService, changeDetector) {
+                var _this = this;
                 this.localeProvider = localeProvider;
                 this.numericService = numericService;
+                this.changeDetector = changeDetector;
                 this.ngUnsubscribe = new rxjs.Subject();
                 this.localeProvider.getLocaleInfo()
                     .pipe(operators.takeUntil(this.ngUnsubscribe))
                     .subscribe(function (localeInfo) {
-                    numericService.currentLocale = localeInfo.locale;
+                    _this.providerLocale = localeInfo.locale;
+                    numericService.currentLocale = _this.providerLocale;
+                    _this.changeDetector.markForCheck();
                 });
             }
             SkyNumericPipe.prototype.ngOnDestroy = function () {
@@ -2381,13 +2383,20 @@
                 this.ngUnsubscribe.complete();
             };
             SkyNumericPipe.prototype.transform = function (value, config) {
+                var _a;
+                var newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') + (value + "_" + ((config === null || config === void 0 ? void 0 : config.locale) || this.providerLocale));
+                /* If the value and locale are the same as the last transform then return the previous value
+                instead of reformatting. */
+                if (this.formattedValue && this.cacheKey === newCacheKey) {
+                    return this.formattedValue;
+                }
                 var options = new NumericOptions();
                 // The default number of digits is `1`. When truncate is disabled, set digits
                 // to `0` to avoid the unnecessary addition of `.0` at the end of the formatted number.
                 if (config &&
                     config.truncate === false &&
                     config.digits === undefined) {
-                    config.digits = 0;
+                    options.digits = 0;
                 }
                 // If the minimum digits is less than the set maximum digits then throw an error
                 if (config &&
@@ -2400,37 +2409,43 @@
                 else if (config &&
                     config.minDigits &&
                     !config.digits) {
-                    config.digits = config.minDigits;
+                    options.digits = config.minDigits;
                 }
                 Object.assign(options, config);
-                return this.numericService.formatNumber(value, options);
+                // Assign properties for proper result caching.
+                this.rawValue = value;
+                this.lastTransformLocale = (_a = config === null || config === void 0 ? void 0 : config.locale) !== null && _a !== void 0 ? _a : this.providerLocale;
+                this.cacheKey = newCacheKey;
+                this.formattedValue = this.numericService.formatNumber(value, options);
+                return this.formattedValue;
             };
             return SkyNumericPipe;
         }());
-        SkyNumericPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericPipe, deps: [{ token: i1__namespace.SkyAppLocaleProvider }, { token: SkyNumericService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-        SkyNumericPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericPipe, name: "skyNumeric" });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericPipe, decorators: [{
+        SkyNumericPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericPipe, deps: [{ token: i1__namespace.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+        SkyNumericPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericPipe, decorators: [{
                     type: i0.Pipe,
                     args: [{
-                            name: 'skyNumeric'
+                            name: 'skyNumeric',
+                            pure: false
                         }]
-                }], ctorParameters: function () { return [{ type: i1__namespace.SkyAppLocaleProvider }, { type: SkyNumericService }]; } });
+                }], ctorParameters: function () { return [{ type: i1__namespace.SkyAppLocaleProvider }, { type: SkyNumericService }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
         var SkyNumericModule = /** @class */ (function () {
             function SkyNumericModule() {
             }
             return SkyNumericModule;
         }());
-        SkyNumericModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyNumericModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [i1.SkyI18nModule,
+        SkyNumericModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyNumericModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [i1.SkyI18nModule,
                 SkyCoreResourcesModule], exports: [SkyNumericPipe] });
-        SkyNumericModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericModule, providers: [
+        SkyNumericModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericModule, providers: [
                 SkyNumericPipe
             ], imports: [[
                     i1.SkyI18nModule,
                     SkyCoreResourcesModule
                 ]] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyNumericModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyNumericModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             declarations: [
@@ -2648,14 +2663,14 @@
             };
             return SkyOverlayComponent;
         }());
-        SkyOverlayComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3__namespace.Router, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-        SkyOverlayComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div\n    class=\"sky-overlay-content\"\n    #overlayContentRef\n  >\n    <ng-template\n      #target\n    >\n    </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\"\n    class=\"sky-overlay-backdrop\"\n  ></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayComponent, decorators: [{
+        SkyOverlayComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3__namespace.Router, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+        SkyOverlayComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div\n    class=\"sky-overlay-content\"\n    #overlayContentRef\n  >\n    <ng-template\n      #target\n    >\n    </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\"\n    class=\"sky-overlay-backdrop\"\n  ></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayComponent, decorators: [{
                     type: i0.Component,
                     args: [{
                             selector: 'sky-overlay',
-                            templateUrl: './overlay.component.html',
-                            styleUrls: ['./overlay.component.scss'],
+                            template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div\n    class=\"sky-overlay-content\"\n    #overlayContentRef\n  >\n    <ng-template\n      #target\n    >\n    </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\"\n    class=\"sky-overlay-backdrop\"\n  ></div>\n</div>\n",
+                            styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"],
                             changeDetection: i0.ChangeDetectionStrategy.OnPush
                         }]
                 }], ctorParameters: function () {
@@ -2687,12 +2702,12 @@
             }
             return SkyOverlayModule;
         }());
-        SkyOverlayModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyOverlayModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [i4.CommonModule] });
-        SkyOverlayModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayModule, imports: [[
+        SkyOverlayModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyOverlayModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [i4.CommonModule] });
+        SkyOverlayModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayModule, imports: [[
                     i4.CommonModule
                 ]] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             imports: [
@@ -2738,9 +2753,9 @@
             };
             return SkyOverlayAdapterService;
         }());
-        SkyOverlayAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyOverlayAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayAdapterService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayAdapterService, decorators: [{
+        SkyOverlayAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyOverlayAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayAdapterService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayAdapterService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -2851,9 +2866,9 @@
             return SkyOverlayService;
         }());
         SkyOverlayService.overlays = [];
-        SkyOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayService, deps: [{ token: i0__namespace.ApplicationRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyOverlayAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyOverlayService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyOverlayService, decorators: [{
+        SkyOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayService, deps: [{ token: i0__namespace.ApplicationRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: SkyOverlayAdapterService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyOverlayService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyOverlayService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -2892,9 +2907,9 @@
             };
             return SkyPercentPipe;
         }());
-        SkyPercentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipe, deps: [{ token: i1__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-        SkyPercentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipe, name: "skyPercent", pure: false });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipe, decorators: [{
+        SkyPercentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipe, deps: [{ token: i1__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+        SkyPercentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipe, name: "skyPercent", pure: false });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipe, decorators: [{
                     type: i0.Pipe,
                     args: [{
                             name: 'skyPercent',
@@ -2907,16 +2922,16 @@
             }
             return SkyPercentPipeModule;
         }());
-        SkyPercentPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyPercentPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [i4.CommonModule,
+        SkyPercentPipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyPercentPipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [i4.CommonModule,
                 SkyCoreResourcesModule], exports: [SkyPercentPipe] });
-        SkyPercentPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipeModule, providers: [
+        SkyPercentPipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipeModule, providers: [
                 SkyPercentPipe
             ], imports: [[
                     i4.CommonModule,
                     SkyCoreResourcesModule
                 ]] });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyPercentPipeModule, decorators: [{
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyPercentPipeModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             declarations: [
@@ -2935,6 +2950,85 @@
                         }]
                 }] });
 
+        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;
+                /* 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
+                    });
+                }
+            };
+            return SkyScrollableHostService;
+        }());
+        SkyScrollableHostService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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.13", ngImport: i0__namespace, type: SkyScrollableHostService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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.
          */
@@ -2954,9 +3048,9 @@
             };
             return SkyAppTitleService;
         }());
-        SkyAppTitleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppTitleService, deps: [{ token: i1__namespace$1.Title }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyAppTitleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppTitleService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyAppTitleService, decorators: [{
+        SkyAppTitleService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppTitleService, deps: [{ token: i1__namespace$1.Title }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyAppTitleService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppTitleService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyAppTitleService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -2975,9 +3069,9 @@
             };
             return SkyUIConfigService;
         }());
-        SkyUIConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyUIConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyUIConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyUIConfigService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyUIConfigService, decorators: [{
+        SkyUIConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyUIConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyUIConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyUIConfigService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyUIConfigService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -2989,9 +3083,9 @@
             }
             return SkyViewkeeperHostOptions;
         }());
-        SkyViewkeeperHostOptions.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperHostOptions, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyViewkeeperHostOptions.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperHostOptions });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperHostOptions, decorators: [{
+        SkyViewkeeperHostOptions.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperHostOptions, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyViewkeeperHostOptions.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperHostOptions });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperHostOptions, decorators: [{
                     type: i0.Injectable
                 }] });
 
@@ -3011,11 +3105,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 +3147,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 +3155,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 +3183,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 +3221,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 +3292,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,
@@ -3237,9 +3336,9 @@
             };
             return SkyViewkeeperService;
         }());
-        SkyViewkeeperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-        SkyViewkeeperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperService, providedIn: 'root' });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperService, decorators: [{
+        SkyViewkeeperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyViewkeeperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperService, providedIn: 'root' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperService, decorators: [{
                     type: i0.Injectable,
                     args: [{
                             providedIn: 'root'
@@ -3251,11 +3350,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 +3437,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.ɵ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: [{
+        SkyViewkeeperDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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.13", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0__namespace });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", 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
                     }] } });
 
@@ -3381,10 +3499,10 @@
             }
             return SkyViewkeeperModule;
         }());
-        SkyViewkeeperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-        SkyViewkeeperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
-        SkyViewkeeperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperModule });
-        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyViewkeeperModule, decorators: [{
+        SkyViewkeeperModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+        SkyViewkeeperModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+        SkyViewkeeperModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperModule });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyViewkeeperModule, decorators: [{
                     type: i0.NgModule,
                     args: [{
                             declarations: [
@@ -3428,16 +3546,17 @@
         exports.SkyOverlayService = SkyOverlayService;
         exports.SkyPercentPipe = SkyPercentPipe;
         exports.SkyPercentPipeModule = SkyPercentPipeModule;
+        exports.SkyScrollableHostService = SkyScrollableHostService;
         exports.SkyUIConfigService = SkyUIConfigService;
         exports.SkyViewkeeperHostOptions = SkyViewkeeperHostOptions;
         exports.SkyViewkeeperModule = SkyViewkeeperModule;
         exports.SkyViewkeeperService = SkyViewkeeperService;
         exports.getWindow = getWindow;
-        exports.λ1 = SkyAffixDirective;
-        exports.λ2 = SkyIdDirective;
-        exports.λ3 = SkyViewkeeperDirective;
+        exports["λ1"] = SkyAffixDirective;
+        exports["λ2"] = SkyIdDirective;
+        exports["λ3"] = SkyViewkeeperDirective;
 
         Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-core.umd.js.map