@skyux/core 5.1.1 → 5.2.1

package/fesm2015/skyux-core.js

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, Pipe, ElementRef, Optional } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, fromEvent, BehaviorSubject, of } from 'rxjs';
-import { takeUntil, debounceTime, take } from 'rxjs/operators';
+import { Subject, fromEvent, BehaviorSubject, Observable, of } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i3 from '@angular/router';
@@ -16,10 +16,10 @@ import * as i1$1 from '@angular/platform-browser';
  */
 class SkyCoreAdapterModule {
 }
-SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule });
-SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -55,7 +55,7 @@ const SKY_TABBABLE_SELECTOR = [
     'object',
     'embed',
     '*[contenteditable=true]:not([disabled])',
-    '*[tabindex]:not([disabled])'
+    '*[tabindex]:not([disabled])',
 ].join(', ');
 class SkyCoreAdapterService {
     constructor(rendererFactory) {
@@ -140,7 +140,8 @@ class SkyCoreAdapterService {
         const containerElement = elementRef.nativeElement.querySelector(containerSelector);
         const focusableChildren = this.getFocusableChildren(containerElement);
         // Focus first focusable child if available. Otherwise, set focus on container.
-        if (!this.focusFirstElement(focusableChildren) && focusOnContainerIfNoChildrenFound) {
+        if (!this.focusFirstElement(focusableChildren) &&
+            focusOnContainerIfNoChildrenFound) {
             containerElement.focus();
         }
     }
@@ -249,12 +250,12 @@ class SkyCoreAdapterService {
         return hasBounds;
     }
 }
-SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
@@ -271,12 +272,7 @@ var SkyAffixAutoFitContext;
 })(SkyAffixAutoFitContext || (SkyAffixAutoFitContext = {}));
 
 function getNextPlacement(placement) {
-    const placements = [
-        'above',
-        'right',
-        'below',
-        'left'
-    ];
+    const placements = ['above', 'right', 'below', 'left'];
     let index = placements.indexOf(placement) + 1;
     if (index >= placements.length) {
         index = 0;
@@ -288,7 +284,7 @@ function getInversePlacement(placement) {
         above: 'below',
         below: 'above',
         right: 'left',
-        left: 'right'
+        left: 'right',
     };
     return pairings[placement];
 }
@@ -328,7 +324,7 @@ function getElementOffset(element, bufferOffset = {}) {
         bottom,
         left,
         right,
-        top
+        top,
     };
 }
 function getOverflowParents(child) {
@@ -340,8 +336,7 @@ function getOverflowParents(child) {
         parentElement instanceof HTMLElement) {
         const overflowY = window
             .getComputedStyle(parentElement, undefined)
-            .overflowY
-            .toLowerCase();
+            .overflowY.toLowerCase();
         if (overflowY === 'auto' ||
             overflowY === 'hidden' ||
             overflowY === 'scroll') {
@@ -376,7 +371,7 @@ const DEFAULT_AFFIX_CONFIG = {
     enableAutoFit: false,
     horizontalAlignment: 'center',
     isSticky: false,
-    placement: 'above'
+    placement: 'above',
 };
 class SkyAffixer {
     constructor(affixedElement, renderer) {
@@ -454,7 +449,8 @@ class SkyAffixer {
         this._overflowScroll.complete();
         this._offsetChange =
             this._placementChange =
-                this._overflowScroll = undefined;
+                this._overflowScroll =
+                    undefined;
     }
     affix() {
         this.baseRect = this.baseElement.getBoundingClientRect();
@@ -480,9 +476,10 @@ class SkyAffixer {
                 break;
             }
             if (!isAffixedElementFullyVisible) {
-                placement = (attempts % 2 === 0)
-                    ? getInversePlacement(placement)
-                    : getNextPlacement(placement);
+                placement =
+                    attempts % 2 === 0
+                        ? getInversePlacement(placement)
+                        : getNextPlacement(placement);
             }
             attempts++;
         } while (!isAffixedElementFullyVisible && attempts < maxAttempts);
@@ -519,7 +516,7 @@ class SkyAffixer {
                         top = top + affixedRect.height;
                         break;
                     case 'middle':
-                        top = top + (affixedRect.height / 2);
+                        top = top + affixedRect.height / 2;
                         break;
                     case 'bottom':
                     default:
@@ -533,7 +530,7 @@ class SkyAffixer {
                     default:
                         break;
                     case 'middle':
-                        top = top - (affixedRect.height / 2);
+                        top = top - affixedRect.height / 2;
                         break;
                     case 'bottom':
                         top = top - affixedRect.height;
@@ -546,7 +543,7 @@ class SkyAffixer {
                     break;
                 case 'center':
                 default:
-                    left = baseRect.left + (baseRect.width / 2) - (affixedRect.width / 2);
+                    left = baseRect.left + baseRect.width / 2 - affixedRect.width / 2;
                     break;
                 case 'right':
                     left = baseRect.right - affixedRect.width;
@@ -566,7 +563,7 @@ class SkyAffixer {
                     break;
                 case 'middle':
                 default:
-                    top = baseRect.top + (baseRect.height / 2) - (affixedRect.height / 2);
+                    top = baseRect.top + baseRect.height / 2 - affixedRect.height / 2;
                     break;
                 case 'bottom':
                     top = baseRect.bottom - affixedRect.height;
@@ -642,7 +639,7 @@ class SkyAffixer {
     }
     getAutoFitContextParent() {
         const bodyElement = this.overflowParents[0];
-        return (this.config.autoFitContext === SkyAffixAutoFitContext.OverflowParent)
+        return this.config.autoFitContext === SkyAffixAutoFitContext.OverflowParent
             ? this.getImmediateOverflowParent()
             : bodyElement;
     }
@@ -650,7 +647,7 @@ class SkyAffixer {
         if (this.currentPlacement !== placement) {
             this.currentPlacement = placement;
             this._placementChange.next({
-                placement
+                placement,
             });
         }
     }
@@ -663,7 +660,8 @@ class SkyAffixer {
                     this.baseRect =
                         this.currentPlacement =
                             this.currentOffset =
-                                this.overflowParents = undefined;
+                                this.overflowParents =
+                                    undefined;
     }
     isNewOffset(offset) {
         if (this.currentOffset === undefined) {
@@ -682,12 +680,12 @@ class SkyAffixer {
             top: this.baseRect.top,
             left: this.baseRect.left,
             right: this.baseRect.right,
-            bottom: this.baseRect.bottom
+            bottom: this.baseRect.bottom,
         }, this.config.autoFitOverflowOffset);
     }
     addScrollListeners() {
         this.scrollListeners = this.overflowParents.map((parentElement) => {
-            const overflow = (parentElement === document.body) ? 'window' : parentElement;
+            const overflow = parentElement === document.body ? 'window' : parentElement;
             return this.renderer.listen(overflow, 'scroll', () => {
                 this.affix();
                 this._overflowScroll.next();
@@ -695,8 +693,7 @@ class SkyAffixer {
         });
     }
     addResizeListener() {
-        this.resizeListener = fromEvent(window, 'resize')
-            .subscribe(() => this.affix());
+        this.resizeListener = fromEvent(window, 'resize').subscribe(() => this.affix());
     }
     removeResizeListener() {
         if (this.resizeListener) {
@@ -708,7 +705,7 @@ class SkyAffixer {
         if (this.scrollListeners) {
             // Remove renderer-generated listeners by calling the listener itself.
             // https://github.com/angular/angular/issues/9368#issuecomment-227199778
-            this.scrollListeners.forEach(listener => listener());
+            this.scrollListeners.forEach((listener) => listener());
             this.scrollListeners = undefined;
         }
     }
@@ -726,12 +723,12 @@ class SkyAffixService {
         return new SkyAffixer(affixed.nativeElement, this.renderer);
     }
 }
-SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, decorators: [{
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
@@ -793,16 +790,16 @@ class SkyAffixDirective {
             horizontalAlignment: this.affixHorizontalAlignment,
             isSticky: this.affixIsSticky,
             placement: this.affixPlacement,
-            verticalAlignment: this.affixVerticalAlignment
+            verticalAlignment: this.affixVerticalAlignment,
         });
     }
 }
-SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAffixDirective.ɵdir = i0.ɵɵ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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixDirective, decorators: [{
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyAffixTo]'
+                    selector: '[skyAffixTo]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyAffixService }]; }, propDecorators: { skyAffixTo: [{
                 type: Input
@@ -830,23 +827,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyAffixModule {
 }
-SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
-SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, decorators: [{
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAffixModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        SkyAffixDirective
-                    ],
-                    declarations: [
-                        SkyAffixDirective
-                    ]
+                    imports: [CommonModule],
+                    exports: [SkyAffixDirective],
+                    declarations: [SkyAffixDirective],
                 }]
         }] });
 
@@ -902,12 +891,12 @@ class MutationObserverService {
         return new MutationObserver(callback);
     }
 }
-MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, decorators: [{
+MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: MutationObserverService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -931,7 +920,8 @@ class SkyDockDomAdapterService {
         this.currentDockHeight =
             this.ngUnsubscribe =
                 this.observer =
-                    this.styleElement = undefined;
+                    this.styleElement =
+                        undefined;
     }
     setSticky(elementRef) {
         this.renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
@@ -950,7 +940,7 @@ class SkyDockDomAdapterService {
             attributes: true,
             childList: true,
             characterData: true,
-            subtree: true
+            subtree: true,
         });
         fromEvent(window, 'resize')
             .pipe(debounceTime(250), takeUntil(this.ngUnsubscribe))
@@ -978,9 +968,9 @@ class SkyDockDomAdapterService {
         this.renderer.removeChild(document.head, this.styleElement);
     }
 }
-SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: i0.RendererFactory2 }]; } });
 
@@ -1013,27 +1003,27 @@ class SkyDockComponent {
         const factory = this.resolver.resolveComponentFactory(component);
         const injector = Injector.create({
             providers: config.providers || [],
-            parent: this.injector
+            parent: this.injector,
         });
         const componentRef = this.target.createComponent(factory, undefined, injector);
-        const stackOrder = (config.stackOrder !== null && config.stackOrder !== undefined)
+        const stackOrder = config.stackOrder !== null && config.stackOrder !== undefined
             ? config.stackOrder
             : this.getHighestStackOrder();
         this.itemRefs.push({
             componentRef,
-            stackOrder
+            stackOrder,
         });
         this.sortItemsByStackOrder();
         this.changeDetector.markForCheck();
         return {
             componentRef,
-            stackOrder
+            stackOrder,
         };
     }
     removeItem(item) {
         const viewRef = item.componentRef.hostView;
         this.target.remove(this.target.indexOf(viewRef));
-        const found = this.itemRefs.find(i => i.componentRef.hostView === viewRef);
+        const found = this.itemRefs.find((i) => i.componentRef.hostView === viewRef);
         this.itemRefs.splice(this.itemRefs.indexOf(found), 1);
     }
     setOptions(options) {
@@ -1067,53 +1057,37 @@ class SkyDockComponent {
         return this.itemRefs[0].stackOrder + 1;
     }
 }
-SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyDockComponent, selector: "sky-dock", providers: [
-        SkyDockDomAdapterService
-    ], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockComponent, decorators: [{
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", 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.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-dock',
                     templateUrl: './dock.component.html',
                     styleUrls: ['./dock.component.scss'],
-                    providers: [
-                        SkyDockDomAdapterService
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    providers: [SkyDockDomAdapterService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
 class SkyDockModule {
 }
-SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
-SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, providers: [
-        MutationObserverService
-    ], imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, decorators: [{
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockModule, providers: [MutationObserverService], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        SkyDockComponent
-                    ],
-                    entryComponents: [
-                        SkyDockComponent
-                    ],
-                    providers: [
-                        MutationObserverService
-                    ]
+                    imports: [CommonModule],
+                    declarations: [SkyDockComponent],
+                    entryComponents: [SkyDockComponent],
+                    providers: [MutationObserverService],
                 }]
         }] });
 
@@ -1163,12 +1137,12 @@ class SkyAppWindowRef {
         return getWindow();
     }
 }
-SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppWindowRef, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -1194,7 +1168,7 @@ class SkyDynamicComponentService {
      */
     createComponent(componentType, options) {
         options = options || {
-            location: SkyDynamicComponentLocation.BodyBottom
+            location: SkyDynamicComponentLocation.BodyBottom,
         };
         const componentRef = this.componentFactoryResolver
             .resolveComponentFactory(componentType)
@@ -1238,15 +1212,15 @@ class SkyDynamicComponentService {
         return componentRef.hostView.rootNodes[0];
     }
 }
-SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
             type: Injectable,
             args: [{
                     // Must be 'any' so that the component is created in the context of its module's injector.
                     // If set to 'root', the component's dependency injections would only be derived from the root
                     // injector and may loose context if the component is created within a lazy-loaded module.
-                    providedIn: 'any'
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
 
@@ -1313,7 +1287,7 @@ class SkyDockService {
             }
             dockOptions = {
                 location: dynamicLocation,
-                referenceEl: this.options.referenceEl
+                referenceEl: this.options.referenceEl,
             };
         }
         this.dockRef = this.dynamicComponentService.createComponent(SkyDockComponent, dockOptions);
@@ -1324,12 +1298,12 @@ class SkyDockService {
         this.dockRef = undefined;
     }
 }
-SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, decorators: [{
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDockService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
 
@@ -1340,10 +1314,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyDynamicComponentModule {
 }
-SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule });
-SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1355,12 +1329,12 @@ class SkyAppFormat {
         });
     }
 }
-SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, decorators: [{
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppFormat, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -1386,30 +1360,26 @@ class SkyIdDirective {
         return this._id;
     }
 }
-SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdDirective, decorators: [{
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyId]',
-                    exportAs: 'skyId'
+                    exportAs: 'skyId',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
 class SkyIdModule {
 }
-SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
-SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, decorators: [{
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyIdModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyIdDirective
-                    ],
-                    exports: [
-                        SkyIdDirective
-                    ]
+                    declarations: [SkyIdDirective],
+                    exports: [SkyIdDirective],
                 }]
         }] });
 
@@ -1419,10 +1389,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyLogModule {
 }
-SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule });
-SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule, decorators: [{
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1438,12 +1408,12 @@ class SkyLogService {
         }
     }
 }
-SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, decorators: [{
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyLogService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
@@ -1453,10 +1423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  */
 class SkyMediaQueryModule {
 }
-SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule });
-SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1469,20 +1439,20 @@ class SkyMediaQueryService {
         this.breakpoints = [
             {
                 mediaQueryString: SkyMediaQueryService.xs,
-                name: SkyMediaBreakpoints.xs
+                name: SkyMediaBreakpoints.xs,
             },
             {
                 mediaQueryString: SkyMediaQueryService.sm,
-                name: SkyMediaBreakpoints.sm
+                name: SkyMediaBreakpoints.sm,
             },
             {
                 mediaQueryString: SkyMediaQueryService.md,
-                name: SkyMediaBreakpoints.md
+                name: SkyMediaBreakpoints.md,
             },
             {
                 mediaQueryString: SkyMediaQueryService.lg,
-                name: SkyMediaBreakpoints.lg
-            }
+                name: SkyMediaBreakpoints.lg,
+            },
         ];
         this.mediaQueries = [];
         this.addListeners();
@@ -1505,7 +1475,7 @@ class SkyMediaQueryService {
         return this.currentSubject.subscribe({
             next: (breakpoints) => {
                 listener(breakpoints);
-            }
+            },
         });
     }
     /**
@@ -1534,7 +1504,7 @@ class SkyMediaQueryService {
             }
             return {
                 mediaQueryList: mq,
-                listener
+                listener,
             };
         });
     }
@@ -1565,12 +1535,12 @@ SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
  * The size for the `lg` breakpoint.
  */
 SkyMediaQueryService.lg = '(min-width: 1200px)';
-SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -1581,7 +1551,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
-    'EN-US': { "skyux_numeric_billions_symbol": { "message": "B" }, "skyux_numeric_millions_symbol": { "message": "M" }, "skyux_numeric_thousands_symbol": { "message": "K" }, "skyux_numeric_trillions_symbol": { "message": "T" } },
+    'EN-US': {
+        skyux_numeric_billions_symbol: { message: 'B' },
+        skyux_numeric_millions_symbol: { message: 'M' },
+        skyux_numeric_thousands_symbol: { message: 'K' },
+        skyux_numeric_trillions_symbol: { message: 'T' },
+    },
 };
 class SkyCoreResourcesProvider {
     getString(localeInfo, name) {
@@ -1593,22 +1568,26 @@ class SkyCoreResourcesProvider {
  */
 class SkyCoreResourcesModule {
 }
-SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
-SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, providers: [{
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyCoreResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyCoreResourcesProvider,
-                            multi: true
-                        }]
+                            multi: true,
+                        },
+                    ],
                 }]
         }] });
 
@@ -1695,15 +1674,18 @@ class SkyNumberFormatUtility {
                 throw new Error(`${digits} is not a valid digit info for number pipes`);
             }
             /* istanbul ignore else */
-            if (parts[1] != null) { // min integer digits
+            if (parts[1] != null) {
+                // min integer digits
                 minInt = parseIntAutoRadix(parts[1]);
             }
             /* istanbul ignore else */
-            if (parts[3] != null) { // min fraction digits
+            if (parts[3] != null) {
+                // min fraction digits
                 minFraction = parseIntAutoRadix(parts[3]);
             }
             /* istanbul ignore else */
-            if (parts[5] != null) { // max fraction digits
+            if (parts[5] != null) {
+                // max fraction digits
                 maxFraction = parseIntAutoRadix(parts[5]);
             }
         }
@@ -1713,7 +1695,7 @@ class SkyNumberFormatUtility {
             maximumFractionDigits: maxFraction,
             currency: currency,
             currencyAsSymbol: currencyAsSymbol,
-            currencySign: currencySign
+            currencySign: currencySign,
         });
     }
 }
@@ -1723,10 +1705,10 @@ class SkyNumericService {
     constructor(resourcesService) {
         this.resourcesService = resourcesService;
         this.symbolIndex = [
-            { value: 1E12, label: this.getSymbol('skyux_numeric_trillions_symbol') },
-            { value: 1E9, label: this.getSymbol('skyux_numeric_billions_symbol') },
-            { value: 1E6, label: this.getSymbol('skyux_numeric_millions_symbol') },
-            { value: 1E3, label: this.getSymbol('skyux_numeric_thousands_symbol') }
+            { value: 1e12, label: this.getSymbol('skyux_numeric_trillions_symbol') },
+            { value: 1e9, label: this.getSymbol('skyux_numeric_billions_symbol') },
+            { value: 1e6, label: this.getSymbol('skyux_numeric_millions_symbol') },
+            { value: 1e3, label: this.getSymbol('skyux_numeric_thousands_symbol') },
         ];
     }
     /**
@@ -1759,8 +1741,9 @@ class SkyNumericService {
         for (let i = 0; i < this.symbolIndex.length; i++) {
             let symbol = this.symbolIndex[i];
             if (options.truncate &&
-                roundedNumberAbs >= options.truncateAfter && roundedNumberAbs >= symbol.value) {
-                roundedNumber = this.roundNumber((value / symbol.value), options.digits);
+                roundedNumberAbs >= options.truncateAfter &&
+                roundedNumberAbs >= symbol.value) {
+                roundedNumber = this.roundNumber(value / symbol.value, options.digits);
                 if (Math.abs(roundedNumber) === 1000 && i > 0) {
                     // Rounding caused the number to cross into the range of the next symbol.
                     symbol = this.symbolIndex[i - 1];
@@ -1782,7 +1765,7 @@ class SkyNumericService {
             // Note: This will need to be reviewed if we support currencies with
             // three decimal digits.
             case 'currency':
-                const isDecimal = (value % 1 !== 0);
+                const isDecimal = value % 1 !== 0;
                 if (options.minDigits) {
                     digits = `1.${options.minDigits}-${options.digits}`;
                 }
@@ -1856,7 +1839,7 @@ class SkyNumericService {
         const isExponentFormat = valueStr.includes('e');
         if (isExponentFormat) {
             const [base, exp] = valueStr.split('e');
-            const newExp = scaleUp ? (Number(exp) + scalar) : (Number(exp) - scalar);
+            const newExp = scaleUp ? Number(exp) + scalar : Number(exp) - scalar;
             return Number(`${base}e${newExp}`);
         }
         else {
@@ -1869,10 +1852,10 @@ class SkyNumericService {
      * @param value The string to derive the shorten symbol from.
      */
     storeShortenSymbol(value) {
-        const symbols = this.symbolIndex.map(s => s.label);
+        const symbols = this.symbolIndex.map((s) => s.label);
         const regexp = new RegExp(symbols.join('|'), 'ig');
         const match = value.match(regexp);
-        this.shortSymbol = (match) ? match.toString() : '';
+        this.shortSymbol = match ? match.toString() : '';
     }
     /**
      * Must have previously called storeShortenSymbol to have something to replace.
@@ -1892,12 +1875,12 @@ class SkyNumericService {
         return this.resourcesService.getStringForLocale({ locale: 'en_US' }, key);
     }
 }
-SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, decorators: [{
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any'
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; } });
 
@@ -1912,14 +1895,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * ```
  */
 class SkyNumericPipe {
-    constructor(localeProvider, numericService) {
+    constructor(localeProvider, numericService, changeDetector) {
         this.localeProvider = localeProvider;
         this.numericService = numericService;
+        this.changeDetector = changeDetector;
         this.ngUnsubscribe = new Subject();
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
-            numericService.currentLocale = localeInfo.locale;
+            this.providerLocale = localeInfo.locale;
+            numericService.currentLocale = this.providerLocale;
+            this.changeDetector.markForCheck();
         });
     }
     ngOnDestroy() {
@@ -1927,13 +1914,19 @@ class SkyNumericPipe {
         this.ngUnsubscribe.complete();
     }
     transform(value, config) {
+        var _a;
+        let 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;
+        }
         const 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;
+        if (config && config.truncate === false && config.digits === undefined) {
+            options.digits = 0;
         }
         // If the minimum digits is less than the set maximum digits then throw an error
         if (config &&
@@ -1943,51 +1936,40 @@ class SkyNumericPipe {
             throw new Error('The `digits` property must be greater than or equal to the `minDigits` property');
             // If there is a minimum digits given but not a maximum then default the maximum to the minimum
         }
-        else if (config &&
-            config.minDigits &&
-            !config.digits) {
-            config.digits = config.minDigits;
+        else if (config && config.minDigits && !config.digits) {
+            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;
     }
 }
-SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, decorators: [{
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'skyNumeric'
+                    name: 'skyNumeric',
+                    pure: false,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }, { type: SkyNumericService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }, { type: SkyNumericService }, { type: i0.ChangeDetectorRef }]; } });
 
 class SkyNumericModule {
 }
-SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule,
-        SkyCoreResourcesModule], exports: [SkyNumericPipe] });
-SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, providers: [
-        SkyNumericPipe
-    ], imports: [[
-            SkyI18nModule,
-            SkyCoreResourcesModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, decorators: [{
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [[SkyI18nModule, SkyCoreResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyNumericModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyNumericPipe
-                    ],
-                    providers: [
-                        SkyNumericPipe
-                    ],
-                    imports: [
-                        SkyI18nModule,
-                        SkyCoreResourcesModule
-                    ],
-                    exports: [
-                        SkyNumericPipe
-                    ]
+                    declarations: [SkyNumericPipe],
+                    providers: [SkyNumericPipe],
+                    imports: [SkyI18nModule, SkyCoreResourcesModule],
+                    exports: [SkyNumericPipe],
                 }]
         }] });
 
@@ -2116,7 +2098,7 @@ class SkyOverlayComponent {
         const factory = this.resolver.resolveComponentFactory(component);
         const injector = Injector.create({
             providers,
-            parent: this.injector
+            parent: this.injector,
         });
         const componentRef = this.targetRef.createComponent(factory, undefined, injector);
         // Run an initial change detection cycle after the component has been created.
@@ -2151,7 +2133,7 @@ class SkyOverlayComponent {
     addRouteListener() {
         /*istanbul ignore else*/
         if (this.router) {
-            this.routerSubscription = this.router.events.subscribe(event => {
+            this.routerSubscription = this.router.events.subscribe((event) => {
                 /* istanbul ignore else */
                 if (event instanceof NavigationStart) {
                     this._closed.next();
@@ -2166,15 +2148,15 @@ class SkyOverlayComponent {
         }
     }
 }
-SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, 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 class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-overlay',
                     templateUrl: './overlay.component.html',
                     styleUrls: ['./overlay.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: i3.Router, decorators: [{
                     type: Optional
@@ -2182,41 +2164,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: ViewChild,
                 args: ['overlayContentRef', {
                         read: ElementRef,
-                        static: true
+                        static: true,
                     }]
             }], overlayRef: [{
                 type: ViewChild,
                 args: ['overlayRef', {
                         read: ElementRef,
-                        static: true
+                        static: true,
                     }]
             }], targetRef: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
 class SkyOverlayModule {
 }
-SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
-SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, decorators: [{
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        SkyOverlayComponent
-                    ],
-                    entryComponents: [
-                        SkyOverlayComponent
-                    ]
+                    imports: [CommonModule],
+                    declarations: [SkyOverlayComponent],
+                    entryComponents: [SkyOverlayComponent],
                 }]
         }] });
 
@@ -2250,12 +2224,12 @@ class SkyOverlayAdapterService {
         }
     }
 }
-SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
@@ -2324,10 +2298,12 @@ class SkyOverlayService {
     createOverlay(config) {
         const injector = Injector.create({
             parent: this.injector,
-            providers: [{
+            providers: [
+                {
                     provide: SkyOverlayContext,
-                    useValue: new SkyOverlayContext(config)
-                }]
+                    useValue: new SkyOverlayContext(config),
+                },
+            ],
         });
         const componentRef = this.componentFactoryResolver
             .resolveComponentFactory(SkyOverlayComponent)
@@ -2345,7 +2321,7 @@ class SkyOverlayService {
             enablePointerEvents: false,
             enableScroll: true,
             showBackdrop: false,
-            wrapperClass: ''
+            wrapperClass: '',
         };
         return Object.assign(Object.assign({}, defaults), config);
     }
@@ -2353,7 +2329,7 @@ class SkyOverlayService {
         SkyOverlayService.overlays.splice(SkyOverlayService.overlays.indexOf(instance), 1);
         if (instance.config.enableScroll === false) {
             // Only release the body scroll if no other overlay wishes it to be disabled.
-            const anotherOverlayDisablesScroll = SkyOverlayService.overlays.some(o => !o.config.enableScroll);
+            const anotherOverlayDisablesScroll = SkyOverlayService.overlays.some((o) => !o.config.enableScroll);
             if (!anotherOverlayDisablesScroll) {
                 this.adapter.releaseBodyScroll();
             }
@@ -2361,12 +2337,12 @@ class SkyOverlayService {
     }
 }
 SkyOverlayService.overlays = [];
-SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, decorators: [{
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyOverlayService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyOverlayAdapterService }]; } });
 
@@ -2376,7 +2352,8 @@ class SkyPercentPipe {
         this.defaultFormat = '1.0-2';
         this.defaultLocale = 'en-US';
         this.ngUnsubscribe = new Subject();
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             this.defaultLocale = localeInfo.locale;
@@ -2400,70 +2377,126 @@ class SkyPercentPipe {
         this.formattedValue = SkyNumberFormatUtility.formatNumber(locale, this.value, SkyIntlNumberFormatStyle.Percent, format);
     }
 }
-SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, decorators: [{
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyPercent',
-                    pure: false
+                    pure: false,
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }]; } });
 
 class SkyPercentPipeModule {
 }
-SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule,
-        SkyCoreResourcesModule], exports: [SkyPercentPipe] });
-SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, providers: [
-        SkyPercentPipe
-    ], imports: [[
-            CommonModule,
-            SkyCoreResourcesModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [[CommonModule, SkyCoreResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyPercentPipe
-                    ],
-                    providers: [
-                        SkyPercentPipe
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyCoreResourcesModule
-                    ],
-                    exports: [
-                        SkyPercentPipe
-                    ]
+                    declarations: [SkyPercentPipe],
+                    providers: [SkyPercentPipe],
+                    imports: [CommonModule, SkyCoreResourcesModule],
+                    exports: [SkyPercentPipe],
                 }]
         }] });
 
+function notifySubscribers(subscribers, item) {
+    for (const subscriber of subscribers) {
+        subscriber.next(item);
+    }
+}
 class SkyScrollableHostService {
     constructor(mutationObserverSvc, windowRef) {
         this.mutationObserverSvc = mutationObserverSvc;
         this.windowRef = windowRef;
     }
-    getScrollabeHost(elementRef) {
+    /**
+     * Returns the given element's current scrollable host
+     * @param elementRef The element whose scrollable host is being requested
+     * @returns The current scrollable host
+     */
+    getScrollableHost(elementRef) {
         return this.findScrollableHost(elementRef.nativeElement);
     }
-    watchScrollableHost(elementRef, completionObservable) {
-        let scrollableHost = this.findScrollableHost(elementRef.nativeElement);
-        let behaviorSubject = new BehaviorSubject(scrollableHost);
-        const mutationObserver = this.mutationObserverSvc.create(() => {
-            let newScrollableHost = this.findScrollableHost(elementRef.nativeElement);
-            if (newScrollableHost !== scrollableHost) {
-                scrollableHost = newScrollableHost;
+    /**
+     * Returns an observable which emits the given element's current scrollable host
+     * @param elementRef The element whose scrollable host is being requested
+     * @param completionObservable An observable which alerts the internal observers that they should complete
+     * @returns An observable which emits the current scrollable host
+     * @internal
+     */
+    watchScrollableHost(elementRef) {
+        let subscribers = [];
+        let mutationObserver;
+        return new Observable((subscriber) => {
+            subscribers.push(subscriber);
+            let scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            if (subscribers.length === 1) {
+                mutationObserver = this.mutationObserverSvc.create(() => {
+                    let newScrollableHost = this.findScrollableHost(elementRef.nativeElement);
+                    if (newScrollableHost !== scrollableHost) {
+                        scrollableHost = newScrollableHost;
+                        this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+                        notifySubscribers(subscribers, scrollableHost);
+                    }
+                });
                 this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
-                behaviorSubject.next(scrollableHost);
             }
+            subscriber.next(scrollableHost);
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* sanity check */
+                /* istanbul ignore else */
+                if (subIndex >= 0) {
+                    subscribers.splice(subIndex, 1);
+                }
+                if (subscribers.length === 0) {
+                    mutationObserver.disconnect();
+                }
+            });
         });
-        this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
-        completionObservable.pipe(take(1)).subscribe(() => {
-            mutationObserver.disconnect();
+    }
+    /**
+     * Returns an observable which emits whenever the element's scrollable host emits a scroll event. The observable will always emit the scroll events from the elements current scrollable host and will update based on any scrollable host changes. The observable will also emit once whenever the scrollable host changes.
+     * @param elementRef The element whose scrollable host scroll events are being requested
+     * @param completionObservable An observable which alerts the internal observers that they should complete
+     * @returns An observable which emits the scroll events from the given element's scrollable host
+     */
+    watchScrollableHostScrollEvents(elementRef) {
+        let subscribers = [];
+        let newScrollableHostObservable = new Subject();
+        let scrollableHostSubscription;
+        let scrollEventSubscription;
+        return new Observable((subscriber) => {
+            subscribers.push(subscriber);
+            if (subscribers.length === 1) {
+                scrollableHostSubscription = this.watchScrollableHost(elementRef).subscribe((scrollableHost) => {
+                    newScrollableHostObservable.next();
+                    newScrollableHostObservable.complete();
+                    newScrollableHostObservable = new Subject();
+                    scrollEventSubscription = fromEvent(scrollableHost, 'scroll')
+                        .pipe(takeUntil(newScrollableHostObservable))
+                        .subscribe(() => {
+                        notifySubscribers(subscribers);
+                    });
+                });
+            }
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* sanity check */
+                /* istanbul ignore else */
+                if (subIndex >= 0) {
+                    subscribers.splice(subIndex, 1);
+                }
+                if (subscribers.length === 0) {
+                    scrollableHostSubscription.unsubscribe();
+                    scrollEventSubscription.unsubscribe();
+                    newScrollableHostObservable.complete();
+                }
+            });
         });
-        return behaviorSubject;
     }
     findScrollableHost(element) {
         const regex = /(auto|scroll)/;
@@ -2495,25 +2528,25 @@ class SkyScrollableHostService {
         if (element instanceof HTMLElement) {
             mutationObserver.observe(element, {
                 attributes: true,
-                attributeFilter: ["class", "style.overflow", "style.overflow-y"],
-                subtree: 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
+                attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
+                subtree: true,
             });
         }
     }
 }
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyScrollableHostService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: SkyAppWindowRef }]; } });
 
@@ -2535,12 +2568,12 @@ class SkyAppTitleService {
         }
     }
 }
-SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, decorators: [{
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyAppTitleService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.Title }]; } });
 
@@ -2553,20 +2586,20 @@ class SkyUIConfigService {
         return of({});
     }
 }
-SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, decorators: [{
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyUIConfigService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
 class SkyViewkeeperHostOptions {
 }
-SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
             type: Injectable
         }] });
 
@@ -2603,7 +2636,7 @@ function getOffset(el, scrollableHost) {
     const parent = scrollableHost ? scrollableHost : document.documentElement;
     return {
         top: rect.top + parent.scrollTop,
-        left: rect.left + parent.scrollLeft
+        left: rect.left + parent.scrollLeft,
     };
 }
 function px(value) {
@@ -2625,7 +2658,9 @@ function setElPosition(el, left, top, width, marginTop) {
 }
 function getHeightWithMargin(el) {
     const computedStyle = getComputedStyle(el);
-    return el.offsetHeight + parseInt(computedStyle.marginTop, 10) + parseInt(computedStyle.marginBottom, 10);
+    return (el.offsetHeight +
+        parseInt(computedStyle.marginTop, 10) +
+        parseInt(computedStyle.marginBottom, 10));
 }
 function createCustomEvent(name) {
     const evt = document.createEvent('CustomEvent');
@@ -2682,9 +2717,7 @@ class SkyViewkeeper {
             if (this.verticalOffsetEl) {
                 this.verticalOffsetEl.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
             }
-            this.el =
-                this.boundaryEl =
-                    this.verticalOffsetEl = undefined;
+            this.el = this.boundaryEl = this.verticalOffsetEl = undefined;
             this.isDestroyed = true;
         }
     }
@@ -2699,7 +2732,8 @@ class SkyViewkeeper {
         this.el.classList.remove(CLS_VIEWKEEPER_FIXED);
         this.currentElFixedLeft =
             this.currentElFixedTop =
-                this.currentElFixedWidth = undefined;
+                this.currentElFixedWidth =
+                    undefined;
         let width;
         if (this.setWidth) {
             width = 'auto';
@@ -2711,7 +2745,7 @@ class SkyViewkeeper {
         if (this.verticalOffsetEl) {
             const verticalOffsetElTopStyle = this.verticalOffsetEl.style.top;
             const verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
-            offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
+            offset += this.verticalOffsetEl.offsetHeight + verticalOffsetElTop;
         }
         else if (this.scrollableHost) {
             offset += this.scrollableHost.getBoundingClientRect().top;
@@ -2727,7 +2761,9 @@ class SkyViewkeeper {
         else {
             anchorTop = getOffset(this.el, this.scrollableHost).top;
         }
-        doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
+        doFixEl =
+            boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop >
+                anchorTop;
         return doFixEl;
     }
     getFixedStyles(boundaryInfo, verticalOffset) {
@@ -2736,13 +2772,15 @@ class SkyViewkeeper {
         // will be 0 (fully visible) unless the user is scrolling the boundary out of view.
         // In that case, the element should begin to scroll out of view with the
         // rest of the boundary by setting its top position to a negative value.
-        elFixedTop = Math.min((boundaryInfo.boundaryBottom - boundaryInfo.elHeight) - boundaryInfo.scrollTop, verticalOffset);
+        elFixedTop = Math.min(boundaryInfo.boundaryBottom -
+            boundaryInfo.elHeight -
+            boundaryInfo.scrollTop, verticalOffset);
         const elFixedWidth = boundaryInfo.boundaryEl.getBoundingClientRect().width;
         const elFixedLeft = boundaryInfo.boundaryOffset.left - boundaryInfo.scrollLeft;
         return {
             elFixedLeft,
             elFixedTop,
-            elFixedWidth
+            elFixedWidth,
         };
     }
     needsUpdating(doFixEl, fixedStyles) {
@@ -2751,7 +2789,8 @@ class SkyViewkeeper {
             this.currentElFixedTop === fixedStyles.elFixedTop &&
             this.currentElFixedWidth === fixedStyles.elFixedWidth) ||
             (!doFixEl &&
-                !(this.currentElFixedLeft !== undefined && this.currentElFixedLeft !== null))) {
+                !(this.currentElFixedLeft !== undefined &&
+                    this.currentElFixedLeft !== null))) {
             // The element is either currently fixed and its position and width do not need
             // to change, or the element is not currently fixed and does not need to be fixed.
             // No changes are needed.
@@ -2787,8 +2826,12 @@ class SkyViewkeeper {
         const boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
         const boundaryTop = boundaryOffset.top;
         const boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-        const scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
-        const scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
+        const scrollLeft = this.scrollableHost
+            ? this.scrollableHost.scrollLeft
+            : document.documentElement.scrollLeft;
+        const scrollTop = this.scrollableHost
+            ? this.scrollableHost.scrollTop
+            : document.documentElement.scrollTop;
         const elHeight = getHeightWithMargin(this.el);
         return {
             boundaryBottom,
@@ -2798,7 +2841,7 @@ class SkyViewkeeper {
             scrollLeft,
             scrollTop,
             spacerId,
-            spacerEl
+            spacerEl,
         };
     }
 }
@@ -2826,12 +2869,12 @@ class SkyViewkeeperService {
         vk.destroy();
     }
 }
-SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: SkyViewkeeperHostOptions, decorators: [{
                     type: Optional
@@ -2857,7 +2900,7 @@ class SkyViewkeeperDirective {
         this.observer = this.mutationObserverSvc.create(() => this.detectElements());
         this.observer.observe(this.el.nativeElement, {
             childList: true,
-            subtree: true
+            subtree: true,
         });
     }
     ngOnDestroy() {
@@ -2907,18 +2950,21 @@ class SkyViewkeeperDirective {
             else {
                 this.scrollableHostWatchUnsubscribe = new Subject();
             }
-            this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+            this.scrollableHostService
+                .watchScrollableHost(this.el)
                 .pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
-                .subscribe(scrollableHost => {
+                .subscribe((scrollableHost) => {
                 this.destroyViewkeepers();
                 let previousViewkeeperEl;
                 for (const viewkeeperEl of viewkeeperEls) {
                     this.viewkeepers.push(this.viewkeeperSvc.create({
                         boundaryEl: this.el.nativeElement,
-                        scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
+                        scrollableHost: scrollableHost instanceof HTMLElement
+                            ? scrollableHost
+                            : undefined,
                         el: viewkeeperEl,
                         setWidth: true,
-                        verticalOffsetEl: previousViewkeeperEl
+                        verticalOffsetEl: previousViewkeeperEl,
                     }));
                     previousViewkeeperEl = viewkeeperEl;
                 }
@@ -2927,12 +2973,12 @@ class SkyViewkeeperDirective {
         }
     }
 }
-SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyViewkeeper]'
+                    selector: '[skyViewkeeper]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
                     type: Optional
@@ -2942,18 +2988,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyViewkeeperModule {
 }
-SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
-SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyViewkeeperDirective
-                    ],
-                    exports: [
-                        SkyViewkeeperDirective
-                    ]
+                    declarations: [SkyViewkeeperDirective],
+                    exports: [SkyViewkeeperDirective],
                 }]
         }] });