@skyux/core 5.0.0-beta.9 → 5.1.2

package/fesm2015/skyux-core.js

@@ -1,21 +1,28 @@
-import { __decorate, __param } from 'tslib';
-import { NgModule, RendererFactory2, ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, ElementRef, Input, Output, Directive, Injector, ChangeDetectorRef, ComponentFactoryResolver, ViewChild, ViewContainerRef, Component, ChangeDetectionStrategy, ApplicationRef, INJECTOR, Renderer2, NgZone, Pipe, Optional } from '@angular/core';
+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 } from 'rxjs/operators';
-import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter, SkyLibResourcesService, SkyAppLocaleProvider, SkyI18nModule } from '@skyux/i18n';
-import { NavigationStart, Router } from '@angular/router';
-import { Title } from '@angular/platform-browser';
+import { takeUntil, debounceTime, take } 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';
+import { NavigationStart } from '@angular/router';
+import * as i1$1 from '@angular/platform-browser';
 
 /**
  * @deprecated The `SkyCoreAdapterService` no longer needs the `SkyCoreAdapterModule`.
  * The `SkyCoreAdapterModule` can be removed from your project.
  */
-let SkyCoreAdapterModule = class SkyCoreAdapterModule {
-};
-SkyCoreAdapterModule = __decorate([
-    NgModule({})
-], SkyCoreAdapterModule);
+class SkyCoreAdapterModule {
+}
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
 
 var SkyMediaBreakpoints;
 (function (SkyMediaBreakpoints) {
@@ -50,7 +57,7 @@ const SKY_TABBABLE_SELECTOR = [
     '*[contenteditable=true]:not([disabled])',
     '*[tabindex]:not([disabled])'
 ].join(', ');
-let SkyCoreAdapterService = class SkyCoreAdapterService {
+class SkyCoreAdapterService {
     constructor(rendererFactory) {
         this.rendererFactory = rendererFactory;
         this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
@@ -196,6 +203,7 @@ let SkyCoreAdapterService = class SkyCoreAdapterService {
      */
     resetHeight(elementRef, selector) {
         const children = elementRef.nativeElement.querySelectorAll(selector);
+        /* istanbul ignore else */
         if (children.length > 0) {
             for (let i = 0; i < children.length; i++) {
                 // Setting style attributes with Web API requires null instead of undefined.
@@ -211,6 +219,7 @@ let SkyCoreAdapterService = class SkyCoreAdapterService {
      */
     syncMaxHeight(elementRef, selector) {
         const children = elementRef.nativeElement.querySelectorAll(selector);
+        /* istanbul ignore else */
         if (children.length > 0) {
             let maxHeight = 0;
             for (let i = 0; i < children.length; i++) {
@@ -239,16 +248,15 @@ let SkyCoreAdapterService = class SkyCoreAdapterService {
             element.getClientRects().length);
         return hasBounds;
     }
-};
-SkyCoreAdapterService.ctorParameters = () => [
-    { type: RendererFactory2 }
-];
-SkyCoreAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function SkyCoreAdapterService_Factory() { return new SkyCoreAdapterService(ɵɵinject(RendererFactory2)); }, token: SkyCoreAdapterService, providedIn: "root" });
-SkyCoreAdapterService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyCoreAdapterService);
+}
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
 var SkyAffixAutoFitContext;
 (function (SkyAffixAutoFitContext) {
@@ -706,7 +714,7 @@ class SkyAffixer {
     }
 }
 
-let SkyAffixService = class SkyAffixService {
+class SkyAffixService {
     constructor(rendererFactory) {
         this.renderer = rendererFactory.createRenderer(undefined, undefined);
     }
@@ -717,21 +725,20 @@ let SkyAffixService = class SkyAffixService {
     createAffixer(affixed) {
         return new SkyAffixer(affixed.nativeElement, this.renderer);
     }
-};
-SkyAffixService.ctorParameters = () => [
-    { type: RendererFactory2 }
-];
-SkyAffixService.ɵprov = ɵɵdefineInjectable({ factory: function SkyAffixService_Factory() { return new SkyAffixService(ɵɵinject(RendererFactory2)); }, token: SkyAffixService, providedIn: "root" });
-SkyAffixService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyAffixService);
+}
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
 /**
  * Affixes the host element to a base element.
  */
-let SkyAffixDirective = class SkyAffixDirective {
+class SkyAffixDirective {
     constructor(elementRef, affixService) {
         this.affixService = affixService;
         /**
@@ -789,65 +796,59 @@ let SkyAffixDirective = class SkyAffixDirective {
             verticalAlignment: this.affixVerticalAlignment
         });
     }
-};
-SkyAffixDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: SkyAffixService }
-];
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "skyAffixTo", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixAutoFitContext", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixAutoFitOverflowOffset", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixEnableAutoFit", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixHorizontalAlignment", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixIsSticky", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixPlacement", void 0);
-__decorate([
-    Input()
-], SkyAffixDirective.prototype, "affixVerticalAlignment", void 0);
-__decorate([
-    Output()
-], SkyAffixDirective.prototype, "affixOffsetChange", void 0);
-__decorate([
-    Output()
-], SkyAffixDirective.prototype, "affixOverflowScroll", void 0);
-__decorate([
-    Output()
-], SkyAffixDirective.prototype, "affixPlacementChange", void 0);
-SkyAffixDirective = __decorate([
-    Directive({
-        selector: '[skyAffixTo]'
-    })
-], SkyAffixDirective);
+}
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", 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.12", ngImport: i0, type: SkyAffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyAffixTo]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyAffixService }]; }, propDecorators: { skyAffixTo: [{
+                type: Input
+            }], affixAutoFitContext: [{
+                type: Input
+            }], affixAutoFitOverflowOffset: [{
+                type: Input
+            }], affixEnableAutoFit: [{
+                type: Input
+            }], affixHorizontalAlignment: [{
+                type: Input
+            }], affixIsSticky: [{
+                type: Input
+            }], affixPlacement: [{
+                type: Input
+            }], affixVerticalAlignment: [{
+                type: Input
+            }], affixOffsetChange: [{
+                type: Output
+            }], affixOverflowScroll: [{
+                type: Output
+            }], affixPlacementChange: [{
+                type: Output
+            }] } });
 
-let SkyAffixModule = class SkyAffixModule {
-};
-SkyAffixModule = __decorate([
-    NgModule({
-        imports: [
+class SkyAffixModule {
+}
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixModule, imports: [[
             CommonModule
-        ],
-        exports: [
-            SkyAffixDirective
-        ],
-        declarations: [
-            SkyAffixDirective
-        ]
-    })
-], SkyAffixModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAffixModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        SkyAffixDirective
+                    ],
+                    declarations: [
+                        SkyAffixDirective
+                    ]
+                }]
+        }] });
 
 /**
  * Represents a single item added to the dock.
@@ -877,29 +878,52 @@ class SkyDockItem {
     }
 }
 
-let MutationObserverService = class MutationObserverService {
+/**
+ * The location on the page where the dock component should be rendered.
+ */
+var SkyDockLocation;
+(function (SkyDockLocation) {
+    /**
+     * Renders the dock component before a given element.
+     */
+    SkyDockLocation[SkyDockLocation["BeforeElement"] = 0] = "BeforeElement";
+    /**
+     * Renders the dock component as the last element inside the BODY element.
+     */
+    SkyDockLocation[SkyDockLocation["BodyBottom"] = 1] = "BodyBottom";
+    /**
+     * Renders the dock component as the last element inside a given element.
+     */
+    SkyDockLocation[SkyDockLocation["ElementBottom"] = 2] = "ElementBottom";
+})(SkyDockLocation || (SkyDockLocation = {}));
+
+class MutationObserverService {
     create(callback) {
         return new MutationObserver(callback);
     }
-};
-MutationObserverService.ɵprov = ɵɵdefineInjectable({ factory: function MutationObserverService_Factory() { return new MutationObserverService(); }, token: MutationObserverService, providedIn: "root" });
-MutationObserverService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], MutationObserverService);
+}
+MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: MutationObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
  * @internal
  */
-let SkyDockDomAdapterService = class SkyDockDomAdapterService {
+class SkyDockDomAdapterService {
     constructor(mutationService, rendererFactory) {
         this.mutationService = mutationService;
         this.ngUnsubscribe = new Subject();
         this.renderer = rendererFactory.createRenderer(undefined, undefined);
     }
     ngOnDestroy() {
-        this.observer.disconnect();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
         this.ngUnsubscribe.next();
         if (this.styleElement) {
             this.destroyStyleElement();
@@ -909,6 +933,15 @@ let SkyDockDomAdapterService = class SkyDockDomAdapterService {
                 this.observer =
                     this.styleElement = undefined;
     }
+    setSticky(elementRef) {
+        this.renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
+    }
+    setZIndex(zIndex, elementRef) {
+        this.renderer.setStyle(elementRef.nativeElement, 'z-index', zIndex);
+    }
+    unbindDock(elementRef) {
+        this.renderer.addClass(elementRef.nativeElement, 'sky-dock-unbound');
+    }
     watchDomChanges(elementRef) {
         this.observer = this.mutationService.create(() => {
             this.adjustBodyStyles(elementRef);
@@ -944,14 +977,12 @@ let SkyDockDomAdapterService = class SkyDockDomAdapterService {
     destroyStyleElement() {
         this.renderer.removeChild(document.head, this.styleElement);
     }
-};
-SkyDockDomAdapterService.ctorParameters = () => [
-    { type: MutationObserverService },
-    { type: RendererFactory2 }
-];
-SkyDockDomAdapterService = __decorate([
-    Injectable()
-], SkyDockDomAdapterService);
+}
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: i0.RendererFactory2 }]; } });
 
 /**
  * @internal
@@ -969,7 +1000,7 @@ function sortByStackOrder(a, b) {
 /**
  * @internal
  */
-let SkyDockComponent = class SkyDockComponent {
+class SkyDockComponent {
     constructor(changeDetector, resolver, elementRef, injector, domAdapter) {
         this.changeDetector = changeDetector;
         this.resolver = resolver;
@@ -978,9 +1009,6 @@ let SkyDockComponent = class SkyDockComponent {
         this.domAdapter = domAdapter;
         this.itemRefs = [];
     }
-    ngOnInit() {
-        this.domAdapter.watchDomChanges(this.elementRef);
-    }
     insertComponent(component, config = {}) {
         const factory = this.resolver.resolveComponentFactory(component);
         const injector = Injector.create({
@@ -1008,6 +1036,25 @@ let SkyDockComponent = class SkyDockComponent {
         const found = this.itemRefs.find(i => i.componentRef.hostView === viewRef);
         this.itemRefs.splice(this.itemRefs.indexOf(found), 1);
     }
+    setOptions(options) {
+        var _a, _b;
+        this.options = options;
+        switch ((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) {
+            case SkyDockLocation.BeforeElement:
+                this.domAdapter.unbindDock(this.elementRef);
+                break;
+            case SkyDockLocation.ElementBottom:
+                this.domAdapter.setSticky(this.elementRef);
+                break;
+            case SkyDockLocation.BodyBottom:
+            default:
+                this.domAdapter.watchDomChanges(this.elementRef);
+                break;
+        }
+        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.zIndex) {
+            this.domAdapter.setZIndex(this.options.zIndex, this.elementRef);
+        }
+    }
     sortItemsByStackOrder() {
         this.itemRefs.sort(sortByStackOrder);
         // Reassign the correct index for each view.
@@ -1019,47 +1066,83 @@ let SkyDockComponent = class SkyDockComponent {
         }
         return this.itemRefs[0].stackOrder + 1;
     }
-};
-SkyDockComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: ElementRef },
-    { type: Injector },
-    { type: SkyDockDomAdapterService }
-];
-__decorate([
-    ViewChild('target', {
-        read: ViewContainerRef,
-        static: true
-    })
-], SkyDockComponent.prototype, "target", void 0);
-SkyDockComponent = __decorate([
-    Component({
-        selector: 'sky-dock',
-        template: "<ng-container\n  #target\n></ng-container>",
-        providers: [
-            SkyDockDomAdapterService
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{position:fixed;left:0;bottom:0;right:0;display:flex;flex-direction:column;width:100%}"]
-    })
-], SkyDockComponent);
+}
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", 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.12", ngImport: i0, type: SkyDockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-dock',
+                    templateUrl: './dock.component.html',
+                    styleUrls: ['./dock.component.scss'],
+                    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
+                    }]
+            }] } });
 
-let SkyDockModule = class SkyDockModule {
-};
-SkyDockModule = __decorate([
-    NgModule({
-        imports: [
+class SkyDockModule {
+}
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockModule, providers: [
+        MutationObserverService
+    ], imports: [[
             CommonModule
-        ],
-        declarations: [
-            SkyDockComponent
-        ],
-        entryComponents: [
-            SkyDockComponent
-        ]
-    })
-], SkyDockModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        SkyDockComponent
+                    ],
+                    entryComponents: [
+                        SkyDockComponent
+                    ],
+                    providers: [
+                        MutationObserverService
+                    ]
+                }]
+        }] });
+
+/**
+ * The location on the page where the dynamic component should be rendered.
+ */
+var SkyDynamicComponentLocation;
+(function (SkyDynamicComponentLocation) {
+    /**
+     * Renders the dynamic component before a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BeforeElement"] = 0] = "BeforeElement";
+    /**
+     * Renders the dynamic component as the last element inside the BODY element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyBottom"] = 1] = "BodyBottom";
+    /**
+     * Renders the dynamic component as the first element inside the BODY element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyTop"] = 2] = "BodyTop";
+    /**
+     * Renders the dynamic component as the last element inside a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementBottom"] = 3] = "ElementBottom";
+    /**
+     * Renders the dynamic component as the first element inside a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementTop"] = 4] = "ElementTop";
+})(SkyDynamicComponentLocation || (SkyDynamicComponentLocation = {}));
 
 /**
  * @internal
@@ -1072,40 +1155,27 @@ function getWindow() {
  * After users inject SkyAppWindowRef into a component, they can use the service to interact with
  * window properties and event handlers by referencing its nativeWindow property.
  */
-let SkyAppWindowRef = class SkyAppWindowRef {
+class SkyAppWindowRef {
     /**
      * References the global `window` variable.
      */
     get nativeWindow() {
         return getWindow();
     }
-};
-SkyAppWindowRef.ɵprov = ɵɵdefineInjectable({ factory: function SkyAppWindowRef_Factory() { return new SkyAppWindowRef(); }, token: SkyAppWindowRef, providedIn: "root" });
-SkyAppWindowRef = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyAppWindowRef);
-
-/**
- * The location on the page where the dynamic component should be rendered.
- */
-var SkyDynamicComponentLocation;
-(function (SkyDynamicComponentLocation) {
-    /**
-     * Renders the dynamic component as the last element inside the BODY element.
-     */
-    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyBottom"] = 0] = "BodyBottom";
-    /**
-     * Renders the dynamic component as the first element inside the BODY element.
-     */
-    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyTop"] = 1] = "BodyTop";
-})(SkyDynamicComponentLocation || (SkyDynamicComponentLocation = {}));
+}
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
  * Angular service for creating and rendering a dynamic component.
  */
-let SkyDynamicComponentService = class SkyDynamicComponentService {
+class SkyDynamicComponentService {
     constructor(componentFactoryResolver, applicationRef, injector, windowRef, rendererFactory) {
         this.componentFactoryResolver = componentFactoryResolver;
         this.applicationRef = applicationRef;
@@ -1133,6 +1203,15 @@ let SkyDynamicComponentService = class SkyDynamicComponentService {
         const el = this.getRootNode(componentRef);
         const bodyEl = this.windowRef.nativeWindow.document.body;
         switch (options.location) {
+            case SkyDynamicComponentLocation.BeforeElement:
+                this.renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
+                break;
+            case SkyDynamicComponentLocation.ElementTop:
+                this.renderer.insertBefore(options.referenceEl, el, options.referenceEl.firstChild);
+                break;
+            case SkyDynamicComponentLocation.ElementBottom:
+                this.renderer.appendChild(options.referenceEl, el);
+                break;
             case SkyDynamicComponentLocation.BodyTop:
                 this.renderer.insertBefore(bodyEl, el, bodyEl.firstChild);
                 break;
@@ -1158,28 +1237,23 @@ let SkyDynamicComponentService = class SkyDynamicComponentService {
         // https://malcoded.com/posts/angular-dynamic-components
         return componentRef.hostView.rootNodes[0];
     }
-};
-SkyDynamicComponentService.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ApplicationRef },
-    { type: Injector },
-    { type: SkyAppWindowRef },
-    { type: RendererFactory2 }
-];
-SkyDynamicComponentService.ɵprov = ɵɵdefineInjectable({ factory: function SkyDynamicComponentService_Factory() { return new SkyDynamicComponentService(ɵɵinject(ComponentFactoryResolver), ɵɵinject(ApplicationRef), ɵɵinject(INJECTOR), ɵɵinject(SkyAppWindowRef), ɵɵinject(RendererFactory2)); }, token: SkyDynamicComponentService, providedIn: "any" });
-SkyDynamicComponentService = __decorate([
-    Injectable({
-        // 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'
-    })
-], SkyDynamicComponentService);
+}
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", 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'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
 
 /**
  * This service docks components to specific areas on the page.
  */
-let SkyDockService = class SkyDockService {
+class SkyDockService {
     constructor(dynamicComponentService) {
         this.dynamicComponentService = dynamicComponentService;
         this._items = [];
@@ -1212,48 +1286,83 @@ let SkyDockService = class SkyDockService {
         this._items.sort(sortByStackOrder);
         return item;
     }
+    /**
+     * Sets options for the positioning and styling of the dock component. Since the dock service is a
+     * singleton instance, these options will be applied to all components inserted into the dock. In
+     * order to create a seperate dock with different options, consumers should provide a different
+     * instance of the dock service.
+     * @param options The options for positioning and styling
+     */
+    setDockOptions(options) {
+        this.options = options;
+    }
     createDock() {
-        this.dockRef = this.dynamicComponentService.createComponent(SkyDockComponent);
+        let dockOptions;
+        if (this.options) {
+            let dynamicLocation;
+            switch (this.options.location) {
+                case SkyDockLocation.BeforeElement:
+                    dynamicLocation = SkyDynamicComponentLocation.BeforeElement;
+                    break;
+                case SkyDockLocation.ElementBottom:
+                    dynamicLocation = SkyDynamicComponentLocation.ElementBottom;
+                    break;
+                default:
+                    dynamicLocation = SkyDynamicComponentLocation.BodyTop;
+                    break;
+            }
+            dockOptions = {
+                location: dynamicLocation,
+                referenceEl: this.options.referenceEl
+            };
+        }
+        this.dockRef = this.dynamicComponentService.createComponent(SkyDockComponent, dockOptions);
+        this.dockRef.instance.setOptions(this.options);
     }
     destroyDock() {
         this.dynamicComponentService.removeComponent(this.dockRef);
         this.dockRef = undefined;
     }
-};
-SkyDockService.ctorParameters = () => [
-    { type: SkyDynamicComponentService }
-];
-SkyDockService.ɵprov = ɵɵdefineInjectable({ factory: function SkyDockService_Factory() { return new SkyDockService(ɵɵinject(SkyDynamicComponentService)); }, token: SkyDockService, providedIn: "root" });
-SkyDockService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyDockService);
+}
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDockService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
 
 /**
  * Provides services required to create dynamic components on the page.
  * @deprecated The `SkyDynamicComponentService` no longer needs the `SkyDynamicComponentModule`.
  * The `SkyDynamicComponentModule` can be removed from your project.
  */
-let SkyDynamicComponentModule = class SkyDynamicComponentModule {
-};
-SkyDynamicComponentModule = __decorate([
-    NgModule({})
-], SkyDynamicComponentModule);
+class SkyDynamicComponentModule {
+}
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
 
-let SkyAppFormat = class SkyAppFormat {
+class SkyAppFormat {
     formatText(format, ...args) {
         return String(format).replace(/\{(\d+)\}/g, function (match, capture) {
             return args[parseInt(capture, 10)];
         });
     }
-};
-SkyAppFormat.ɵprov = ɵɵdefineInjectable({ factory: function SkyAppFormat_Factory() { return new SkyAppFormat(); }, token: SkyAppFormat, providedIn: "root" });
-SkyAppFormat = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyAppFormat);
+}
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppFormat, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 let idIndex = 0;
 function generateId() {
@@ -1265,7 +1374,7 @@ function generateId() {
  * such as in a `label` element's `for` attribute, assign this directive to a template reference
  * variable, then use its `id` property.
  */
-let SkyIdDirective = class SkyIdDirective {
+class SkyIdDirective {
     constructor(elRef, renderer) {
         // Generate and apply the ID before the template is rendered
         // to avoid a changed-after-checked error.
@@ -1276,90 +1385,102 @@ let SkyIdDirective = class SkyIdDirective {
     get id() {
         return this._id;
     }
-};
-SkyIdDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 }
-];
-SkyIdDirective = __decorate([
-    Directive({
-        selector: '[skyId]',
-        exportAs: 'skyId'
-    })
-], SkyIdDirective);
+}
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyIdDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyId]',
+                    exportAs: 'skyId'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
 
-let SkyIdModule = class SkyIdModule {
-};
-SkyIdModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyIdDirective
-        ],
-        exports: [
-            SkyIdDirective
-        ]
-    })
-], SkyIdModule);
+class SkyIdModule {
+}
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyIdModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyIdDirective
+                    ],
+                    exports: [
+                        SkyIdDirective
+                    ]
+                }]
+        }] });
 
 /**
  * @deprecated The `SkyLogService` no longer needs the `SkyLogModule`.
  * The `SkyLogModule` can be removed from your project.
  */
-let SkyLogModule = class SkyLogModule {
-};
-SkyLogModule = __decorate([
-    NgModule({})
-], SkyLogModule);
+class SkyLogModule {
+}
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
 
 /**
  * @deprecated The `SkyLogService` will be removed in the next major version of `@skyux/core`.
  */
-let SkyLogService = class SkyLogService {
+class SkyLogService {
     warn(message, ...optionalParams) {
         /*istanbul ignore else */
         if (window.console) {
             window.console.warn.apply(window.console, arguments);
         }
     }
-};
-SkyLogService.ɵprov = ɵɵdefineInjectable({ factory: function SkyLogService_Factory() { return new SkyLogService(); }, token: SkyLogService, providedIn: "root" });
-SkyLogService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyLogService);
+}
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyLogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 /**
  * @deprecated The `SkyMediaQueryService` no longer needs the `SkyMediaQueryModule`.
  * The `SkyMediaQueryModule` can be removed from your project.
  */
-let SkyMediaQueryModule = class SkyMediaQueryModule {
-};
-SkyMediaQueryModule = __decorate([
-    NgModule({})
-], SkyMediaQueryModule);
+class SkyMediaQueryModule {
+}
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
 
-var SkyMediaQueryService_1;
-let SkyMediaQueryService = SkyMediaQueryService_1 = class SkyMediaQueryService {
+class SkyMediaQueryService {
     constructor(zone) {
         this.zone = zone;
         this.currentSubject = new BehaviorSubject(this.current);
         this._current = SkyMediaBreakpoints.md;
         this.breakpoints = [
             {
-                mediaQueryString: SkyMediaQueryService_1.xs,
+                mediaQueryString: SkyMediaQueryService.xs,
                 name: SkyMediaBreakpoints.xs
             },
             {
-                mediaQueryString: SkyMediaQueryService_1.sm,
+                mediaQueryString: SkyMediaQueryService.sm,
                 name: SkyMediaBreakpoints.sm
             },
             {
-                mediaQueryString: SkyMediaQueryService_1.md,
+                mediaQueryString: SkyMediaQueryService.md,
                 name: SkyMediaBreakpoints.md
             },
             {
-                mediaQueryString: SkyMediaQueryService_1.lg,
+                mediaQueryString: SkyMediaQueryService.lg,
                 name: SkyMediaBreakpoints.lg
             }
         ];
@@ -1427,7 +1548,7 @@ let SkyMediaQueryService = SkyMediaQueryService_1 = class SkyMediaQueryService {
         this._current = breakpoint;
         this.currentSubject.next(breakpoint);
     }
-};
+}
 /**
  * The size for the `xs` breakpoint.
  */
@@ -1444,39 +1565,93 @@ SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
  * The size for the `lg` breakpoint.
  */
 SkyMediaQueryService.lg = '(min-width: 1200px)';
-SkyMediaQueryService.ctorParameters = () => [
-    { type: NgZone }
-];
-SkyMediaQueryService.ɵprov = ɵɵdefineInjectable({ factory: function SkyMediaQueryService_Factory() { return new SkyMediaQueryService(ɵɵinject(NgZone)); }, token: SkyMediaQueryService, providedIn: "root" });
-SkyMediaQueryService = SkyMediaQueryService_1 = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyMediaQueryService);
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
-let SkyCoreResourcesProvider = class SkyCoreResourcesProvider {
-    constructor() {
-        this.resources = { "EN-US": { "skyux_numeric_billions_symbol": "B", "skyux_numeric_millions_symbol": "M", "skyux_numeric_thousands_symbol": "K", "skyux_numeric_trillions_symbol": "T" } };
-    }
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-core' schematic.
+ * 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" } },
+};
+class SkyCoreResourcesProvider {
     getString(localeInfo, name) {
-        return getStringForLocale(this.resources, localeInfo.locale, name);
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
     }
-};
-SkyCoreResourcesProvider = __decorate([
-    Injectable()
-], SkyCoreResourcesProvider);
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyCoreResourcesModule {
+}
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", 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.12", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [{
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyCoreResourcesProvider,
+                            multi: true
+                        }]
+                }]
+        }] });
 
-let SkyCoreResourcesModule = class SkyCoreResourcesModule {
-};
-SkyCoreResourcesModule = __decorate([
-    NgModule({
-        providers: [{
-                provide: SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyCoreResourcesProvider,
-                multi: true
-            }]
-    })
-], SkyCoreResourcesModule);
+/**
+ * Provides arguments for the number to format.
+ */
+class NumericOptions {
+    constructor() {
+        /**
+         * Specifies the maximum number of digits after the decimal separator.
+         * @default 1
+         */
+        this.digits = 1;
+        /**
+         * Specifies how to format the number. Options are `currency` or `number`.
+         * @default "number"
+         */
+        this.format = 'number';
+        /**
+         * Specifies the format of the currency`.
+         * @default "standard"
+         */
+        this.currencySign = 'standard';
+        /**
+         * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
+         * currency code, the component uses the browser's culture to determine the currency unless your
+         * SPA provides a different culture with `SkyAppLocaleProvider`.
+         * @default 'USD'
+         */
+        this.iso = 'USD';
+        /**
+         * Indicates whether to shorten numbers to rounded numbers and abbreviation characters
+         * such as K for thousands, M for millions, B for billions, and T for trillion.
+         */
+        this.truncate = true;
+        /**
+         * Specifies the starting point after which numbers are shortened to rounded numbers
+         * and abbreviation characters.
+         * @default 0
+         */
+        this.truncateAfter = 0;
+    }
+}
 
 /* tslint:disable:no-null-keyword */
 function isNumeric(value) {
@@ -1496,7 +1671,7 @@ function parseIntAutoRadix(text) {
 class SkyNumberFormatUtility {
     /* istanbul ignore next */
     constructor() { }
-    static formatNumber(locale, value, style, digits, currency = null, currencyAsSymbol = false) {
+    static formatNumber(locale, value, style, digits, currency = null, currencyAsSymbol = false, currencySign) {
         if (value == null) {
             return null;
         }
@@ -1537,13 +1712,14 @@ class SkyNumberFormatUtility {
             minimumFractionDigits: minFraction,
             maximumFractionDigits: maxFraction,
             currency: currency,
-            currencyAsSymbol: currencyAsSymbol
+            currencyAsSymbol: currencyAsSymbol,
+            currencySign: currencySign
         });
     }
 }
 SkyNumberFormatUtility._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
 
-let SkyNumericService = class SkyNumericService {
+class SkyNumericService {
     constructor(resourcesService) {
         this.resourcesService = resourcesService;
         this.symbolIndex = [
@@ -1621,7 +1797,7 @@ let SkyNumericService = class SkyNumericService {
                 // and the appropriate string value for Angular 5+.
                 // See: https://angular.io/api/common/CurrencyPipe#parameters
                 const symbolDisplay = 'symbol';
-                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay);
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay, options.currencySign);
                 break;
             // The following is a catch-all to ensure that if
             // anything but currency (or a future option) are entered,
@@ -1715,52 +1891,15 @@ let SkyNumericService = class SkyNumericService {
         // TODO: Need to implement the async `getString` method in a breaking change.
         return this.resourcesService.getStringForLocale({ locale: 'en_US' }, key);
     }
-};
-SkyNumericService.ctorParameters = () => [
-    { type: SkyLibResourcesService }
-];
-SkyNumericService.ɵprov = ɵɵdefineInjectable({ factory: function SkyNumericService_Factory() { return new SkyNumericService(ɵɵinject(SkyLibResourcesService)); }, token: SkyNumericService, providedIn: "any" });
-SkyNumericService = __decorate([
-    Injectable({
-        providedIn: 'any'
-    })
-], SkyNumericService);
-
-/**
- * Provides arguments for the number to format.
- */
-class NumericOptions {
-    constructor() {
-        /**
-         * Specifies the maximum number of digits after the decimal separator.
-         * @default 1
-         */
-        this.digits = 1;
-        /**
-         * Specifies how to format the number. Options are `currency` or `number`.
-         * @default "number"
-         */
-        this.format = 'number';
-        /**
-         * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
-         * currency code, the component uses the browser's culture to determine the currency unless your
-         * SPA provides a different culture with `SkyAppLocaleProvider`.
-         * @default 'USD'
-         */
-        this.iso = 'USD';
-        /**
-         * Indicates whether to shorten numbers to rounded numbers and abbreviation characters
-         * such as K for thousands, M for millions, B for billions, and T for trillion.
-         */
-        this.truncate = true;
-        /**
-         * Specifies the starting point after which numbers are shortened to rounded numbers
-         * and abbreviation characters.
-         * @default 0
-         */
-        this.truncateAfter = 0;
-    }
 }
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; } });
 
 /**
  * Shorten numbers to rounded numbers and abbreviation characters such as K for thousands,
@@ -1772,15 +1911,18 @@ class NumericOptions {
  * {{ value | skyNumeric(config) }}
  * ```
  */
-let SkyNumericPipe = class SkyNumericPipe {
-    constructor(localeProvider, numericService) {
+class SkyNumericPipe {
+    constructor(localeProvider, numericService, changeDetector) {
         this.localeProvider = localeProvider;
         this.numericService = numericService;
+        this.changeDetector = changeDetector;
         this.ngUnsubscribe = new Subject();
         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() {
@@ -1788,13 +1930,20 @@ let SkyNumericPipe = 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;
+            options.digits = 0;
         }
         // If the minimum digits is less than the set maximum digits then throw an error
         if (config &&
@@ -1807,41 +1956,56 @@ let SkyNumericPipe = class SkyNumericPipe {
         else if (config &&
             config.minDigits &&
             !config.digits) {
-            config.digits = config.minDigits;
+            options.digits = config.minDigits;
         }
         Object.assign(options, config);
-        return this.numericService.formatNumber(value, options);
+        // Assign properties for proper result caching.
+        this.rawValue = value;
+        this.lastTransformLocale = (_a = config === null || config === void 0 ? void 0 : config.locale) !== null && _a !== void 0 ? _a : this.providerLocale;
+        this.cacheKey = newCacheKey;
+        this.formattedValue = this.numericService.formatNumber(value, options);
+        return this.formattedValue;
     }
-};
-SkyNumericPipe.ctorParameters = () => [
-    { type: SkyAppLocaleProvider },
-    { type: SkyNumericService }
-];
-SkyNumericPipe = __decorate([
-    Pipe({
-        name: 'skyNumeric'
-    })
-], SkyNumericPipe);
+}
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyNumeric',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }, { type: SkyNumericService }, { type: i0.ChangeDetectorRef }]; } });
 
-let SkyNumericModule = class SkyNumericModule {
-};
-SkyNumericModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyNumericPipe
-        ],
-        providers: [
-            SkyNumericPipe
-        ],
-        imports: [
+class SkyNumericModule {
+}
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule,
+        SkyCoreResourcesModule], exports: [SkyNumericPipe] });
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericModule, providers: [
+        SkyNumericPipe
+    ], imports: [[
             SkyI18nModule,
             SkyCoreResourcesModule
-        ],
-        exports: [
-            SkyNumericPipe
-        ]
-    })
-], SkyNumericModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyNumericModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyNumericPipe
+                    ],
+                    providers: [
+                        SkyNumericPipe
+                    ],
+                    imports: [
+                        SkyI18nModule,
+                        SkyCoreResourcesModule
+                    ],
+                    exports: [
+                        SkyNumericPipe
+                    ]
+                }]
+        }] });
 
 /**
  * Represents a new overlay instance. It is used to manage the "closed" state of the overlay,
@@ -1924,7 +2088,7 @@ let uniqueZIndex = 5000;
 /**
  * @internal
  */
-let SkyOverlayComponent = class SkyOverlayComponent {
+class SkyOverlayComponent {
     constructor(changeDetector, resolver, injector, coreAdapter, context, router) {
         this.changeDetector = changeDetector;
         this.resolver = resolver;
@@ -2017,63 +2181,65 @@ let SkyOverlayComponent = class SkyOverlayComponent {
             this.routerSubscription = undefined;
         }
     }
-};
-SkyOverlayComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ComponentFactoryResolver },
-    { type: Injector },
-    { type: SkyCoreAdapterService },
-    { type: SkyOverlayContext },
-    { type: Router, decorators: [{ type: Optional }] }
-];
-__decorate([
-    ViewChild('overlayContentRef', {
-        read: ElementRef,
-        static: true
-    })
-], SkyOverlayComponent.prototype, "overlayContentRef", void 0);
-__decorate([
-    ViewChild('overlayRef', {
-        read: ElementRef,
-        static: true
-    })
-], SkyOverlayComponent.prototype, "overlayRef", void 0);
-__decorate([
-    ViewChild('target', {
-        read: ViewContainerRef,
-        static: true
-    })
-], SkyOverlayComponent.prototype, "targetRef", void 0);
-SkyOverlayComponent = __decorate([
-    Component({
-        selector: 'sky-overlay',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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;-ms-grid-row-align:start;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,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}"]
-    }),
-    __param(5, Optional())
-], SkyOverlayComponent);
+}
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", 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.12", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-overlay',
+                    templateUrl: './overlay.component.html',
+                    styleUrls: ['./overlay.component.scss'],
+                    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
+                }] }]; }, propDecorators: { overlayContentRef: [{
+                type: ViewChild,
+                args: ['overlayContentRef', {
+                        read: ElementRef,
+                        static: true
+                    }]
+            }], overlayRef: [{
+                type: ViewChild,
+                args: ['overlayRef', {
+                        read: ElementRef,
+                        static: true
+                    }]
+            }], targetRef: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true
+                    }]
+            }] } });
 
-let SkyOverlayModule = class SkyOverlayModule {
-};
-SkyOverlayModule = __decorate([
-    NgModule({
-        imports: [
+class SkyOverlayModule {
+}
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayModule, imports: [[
             CommonModule
-        ],
-        declarations: [
-            SkyOverlayComponent
-        ],
-        entryComponents: [
-            SkyOverlayComponent
-        ]
-    })
-], SkyOverlayModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    declarations: [
+                        SkyOverlayComponent
+                    ],
+                    entryComponents: [
+                        SkyOverlayComponent
+                    ]
+                }]
+        }] });
 
 /**
  * @internal
  */
-let SkyOverlayAdapterService = class SkyOverlayAdapterService {
+class SkyOverlayAdapterService {
     constructor(rendererFactory) {
         this.renderer = rendererFactory.createRenderer(undefined, undefined);
     }
@@ -2094,27 +2260,26 @@ let SkyOverlayAdapterService = class SkyOverlayAdapterService {
         this.destroyStyleElement();
     }
     destroyStyleElement() {
+        /* istanbul ignore else */
         if (this.styleElement.parentElement === document.head) {
             this.renderer.removeChild(document.head, this.styleElement);
         }
     }
-};
-SkyOverlayAdapterService.ctorParameters = () => [
-    { type: RendererFactory2 }
-];
-SkyOverlayAdapterService.ɵprov = ɵɵdefineInjectable({ factory: function SkyOverlayAdapterService_Factory() { return new SkyOverlayAdapterService(ɵɵinject(RendererFactory2)); }, token: SkyOverlayAdapterService, providedIn: "root" });
-SkyOverlayAdapterService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyOverlayAdapterService);
+}
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
-var SkyOverlayService_1;
 /**
  * This service is used to create new overlays.
  * @dynamic
  */
-let SkyOverlayService = SkyOverlayService_1 = class SkyOverlayService {
+class SkyOverlayService {
     constructor(applicationRef, componentFactoryResolver, injector, adapter) {
         this.applicationRef = applicationRef;
         this.componentFactoryResolver = componentFactoryResolver;
@@ -2135,11 +2300,11 @@ let SkyOverlayService = SkyOverlayService_1 = class SkyOverlayService {
         instance.closed.subscribe(() => {
             // Only execute the service's close method if the instance still exists.
             // This is needed to address a race condition if the deprecated instance.close method is used instead.
-            if (SkyOverlayService_1.overlays.indexOf(instance) > -1) {
+            if (SkyOverlayService.overlays.indexOf(instance) > -1) {
                 this.close(instance);
             }
         });
-        SkyOverlayService_1.overlays.push(instance);
+        SkyOverlayService.overlays.push(instance);
         return instance;
     }
     /**
@@ -2168,8 +2333,8 @@ let SkyOverlayService = SkyOverlayService_1 = class SkyOverlayService {
     closeAll() {
         // The `close` event handler for each instance alters the array's length asynchronously,
         // so the only "safe" index to call is zero.
-        while (SkyOverlayService_1.overlays.length > 0) {
-            this.close(SkyOverlayService_1.overlays[0]);
+        while (SkyOverlayService.overlays.length > 0) {
+            this.close(SkyOverlayService.overlays[0]);
         }
     }
     createOverlay(config) {
@@ -2201,31 +2366,27 @@ let SkyOverlayService = SkyOverlayService_1 = class SkyOverlayService {
         return Object.assign(Object.assign({}, defaults), config);
     }
     destroyOverlay(instance) {
-        SkyOverlayService_1.overlays.splice(SkyOverlayService_1.overlays.indexOf(instance), 1);
+        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_1.overlays.some(o => !o.config.enableScroll);
+            const anotherOverlayDisablesScroll = SkyOverlayService.overlays.some(o => !o.config.enableScroll);
             if (!anotherOverlayDisablesScroll) {
                 this.adapter.releaseBodyScroll();
             }
         }
     }
-};
+}
 SkyOverlayService.overlays = [];
-SkyOverlayService.ctorParameters = () => [
-    { type: ApplicationRef },
-    { type: ComponentFactoryResolver },
-    { type: Injector },
-    { type: SkyOverlayAdapterService }
-];
-SkyOverlayService.ɵprov = ɵɵdefineInjectable({ factory: function SkyOverlayService_Factory() { return new SkyOverlayService(ɵɵinject(ApplicationRef), ɵɵinject(ComponentFactoryResolver), ɵɵinject(INJECTOR), ɵɵinject(SkyOverlayAdapterService)); }, token: SkyOverlayService, providedIn: "root" });
-SkyOverlayService = SkyOverlayService_1 = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyOverlayService);
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyOverlayAdapterService }]; } });
 
-let SkyPercentPipe = class SkyPercentPipe {
+class SkyPercentPipe {
     constructor(localeProvider) {
         this.localeProvider = localeProvider;
         this.defaultFormat = '1.0-2';
@@ -2254,41 +2415,128 @@ let SkyPercentPipe = class SkyPercentPipe {
         const format = this.format || this.defaultFormat;
         this.formattedValue = SkyNumberFormatUtility.formatNumber(locale, this.value, SkyIntlNumberFormatStyle.Percent, format);
     }
-};
-SkyPercentPipe.ctorParameters = () => [
-    { type: SkyAppLocaleProvider }
-];
-SkyPercentPipe = __decorate([
-    Pipe({
-        name: 'skyPercent',
-        pure: false
-    })
-], SkyPercentPipe);
+}
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyPercent',
+                    pure: false
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }]; } });
 
-let SkyPercentPipeModule = class SkyPercentPipeModule {
-};
-SkyPercentPipeModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyPercentPipe
-        ],
-        providers: [
-            SkyPercentPipe
-        ],
-        imports: [
+class SkyPercentPipeModule {
+}
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule,
+        SkyCoreResourcesModule], exports: [SkyPercentPipe] });
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipeModule, providers: [
+        SkyPercentPipe
+    ], imports: [[
             CommonModule,
             SkyCoreResourcesModule
-        ],
-        exports: [
-            SkyPercentPipe
-        ]
-    })
-], SkyPercentPipeModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyPercentPipe
+                    ],
+                    providers: [
+                        SkyPercentPipe
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyCoreResourcesModule
+                    ],
+                    exports: [
+                        SkyPercentPipe
+                    ]
+                }]
+        }] });
+
+class SkyScrollableHostService {
+    constructor(mutationObserverSvc, windowRef) {
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.windowRef = windowRef;
+    }
+    getScrollabeHost(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;
+                this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+                behaviorSubject.next(scrollableHost);
+            }
+        });
+        this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+        completionObservable.pipe(take(1)).subscribe(() => {
+            mutationObserver.disconnect();
+        });
+        return behaviorSubject;
+    }
+    findScrollableHost(element) {
+        const regex = /(auto|scroll)/;
+        const windowObj = this.windowRef.nativeWindow;
+        const bodyObj = windowObj.document.body;
+        /* Sanity check */
+        if (!element) {
+            return windowObj;
+        }
+        let style = windowObj.getComputedStyle(element);
+        let parent = element;
+        do {
+            parent = parent.parentNode;
+            /* Sanity check for if this function is called for an element which has been removed from the DOM */
+            if (!(parent instanceof HTMLElement)) {
+                return windowObj;
+            }
+            style = windowObj.getComputedStyle(parent);
+        } while (!regex.test(style.overflow) &&
+            !regex.test(style.overflowY) &&
+            parent !== bodyObj);
+        if (parent === bodyObj) {
+            return windowObj;
+        }
+        return parent;
+    }
+    observeForScrollableHostChanges(element, mutationObserver) {
+        mutationObserver.disconnect();
+        if (element instanceof HTMLElement) {
+            mutationObserver.observe(element, {
+                attributes: true,
+                attributeFilter: ["class", "style.overflow", "style.overflow-y"],
+                subtree: true
+            });
+        }
+        else {
+            mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["class", "style.overflow", "style.overflow-y"],
+                subtree: true
+            });
+        }
+    }
+}
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: SkyAppWindowRef }]; } });
 
 /**
  * Provides a method for setting a formatted title on the current window.
  */
-let SkyAppTitleService = class SkyAppTitleService {
+class SkyAppTitleService {
     constructor(title) {
         this.title = title;
     }
@@ -2302,18 +2550,17 @@ let SkyAppTitleService = class SkyAppTitleService {
             this.title.setTitle(args.titleParts.join(' - '));
         }
     }
-};
-SkyAppTitleService.ctorParameters = () => [
-    { type: Title }
-];
-SkyAppTitleService.ɵprov = ɵɵdefineInjectable({ factory: function SkyAppTitleService_Factory() { return new SkyAppTitleService(ɵɵinject(Title)); }, token: SkyAppTitleService, providedIn: "root" });
-SkyAppTitleService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyAppTitleService);
+}
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyAppTitleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Title }]; } });
 
-let SkyUIConfigService = class SkyUIConfigService {
+class SkyUIConfigService {
     getConfig(key, defaultConfig) {
         return of(defaultConfig);
     }
@@ -2321,19 +2568,23 @@ let SkyUIConfigService = class SkyUIConfigService {
     setConfig(key, value) {
         return of({});
     }
-};
-SkyUIConfigService.ɵprov = ɵɵdefineInjectable({ factory: function SkyUIConfigService_Factory() { return new SkyUIConfigService(); }, token: SkyUIConfigService, providedIn: "root" });
-SkyUIConfigService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], SkyUIConfigService);
+}
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyUIConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
-let SkyViewkeeperHostOptions = class SkyViewkeeperHostOptions {
-};
-SkyViewkeeperHostOptions = __decorate([
-    Injectable()
-], SkyViewkeeperHostOptions);
+class SkyViewkeeperHostOptions {
+}
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+            type: Injectable
+        }] });
 
 const CLS_VIEWKEEPER_FIXED = 'sky-viewkeeper-fixed';
 const EVT_AFTER_VIEWKEEPER_SYNC = 'afterViewkeeperSync';
@@ -2363,11 +2614,12 @@ function nextId() {
     nextIdIndex = (nextIdIndex || 0) + 1;
     return 'viewkeeper-' + nextIdIndex;
 }
-function getOffset(el) {
+function getOffset(el, scrollableHost) {
     const rect = el.getBoundingClientRect();
+    const parent = scrollableHost ? scrollableHost : document.documentElement;
     return {
-        top: rect.top + document.documentElement.scrollTop,
-        left: rect.left + document.documentElement.scrollLeft
+        top: rect.top + parent.scrollTop,
+        left: rect.left + parent.scrollLeft
     };
 }
 function px(value) {
@@ -2403,6 +2655,7 @@ class SkyViewkeeper {
         this.id = nextId();
         this.el = options.el;
         this.boundaryEl = options.boundaryEl;
+        this.scrollableHost = options.scrollableHost;
         this.verticalOffset = options.verticalOffset || 0;
         this.verticalOffsetEl = options.verticalOffsetEl;
         this.viewportMarginTop = options.viewportMarginTop || 0;
@@ -2410,7 +2663,7 @@ class SkyViewkeeper {
         if (this.verticalOffsetEl) {
             this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
         }
-        window.addEventListener('scroll', this.syncElPositionHandler);
+        window.addEventListener('scroll', this.syncElPositionHandler, true);
         window.addEventListener('resize', this.syncElPositionHandler);
         window.addEventListener('orientationchange', this.syncElPositionHandler);
         ensureStyleEl();
@@ -2438,7 +2691,7 @@ class SkyViewkeeper {
     }
     destroy() {
         if (!this.isDestroyed) {
-            window.removeEventListener('scroll', this.syncElPositionHandler);
+            window.removeEventListener('scroll', this.syncElPositionHandler, true);
             window.removeEventListener('resize', this.syncElPositionHandler);
             window.removeEventListener('orientationchange', this.syncElPositionHandler);
             this.unfixEl();
@@ -2476,16 +2729,19 @@ class SkyViewkeeper {
             const verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
             offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
         }
+        else if (this.scrollableHost) {
+            offset += this.scrollableHost.getBoundingClientRect().top;
+        }
         return offset;
     }
     shouldFixEl(boundaryInfo, verticalOffset) {
         let anchorTop;
         let doFixEl;
         if (boundaryInfo.spacerEl) {
-            anchorTop = getOffset(boundaryInfo.spacerEl).top;
+            anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
         }
         else {
-            anchorTop = getOffset(this.el).top;
+            anchorTop = getOffset(this.el, this.scrollableHost).top;
         }
         doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
         return doFixEl;
@@ -2544,11 +2800,11 @@ class SkyViewkeeper {
         const spacerId = this.getSpacerId();
         const spacerEl = document.getElementById(spacerId);
         const boundaryEl = this.boundaryEl;
-        const boundaryOffset = getOffset(boundaryEl);
+        const boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
         const boundaryTop = boundaryOffset.top;
         const boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-        const scrollLeft = document.documentElement.scrollLeft;
-        const 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,
@@ -2566,7 +2822,7 @@ class SkyViewkeeper {
 /**
  * Provides methods for creating and destroying viewkeeper instances.
  */
-let SkyViewkeeperService = class SkyViewkeeperService {
+class SkyViewkeeperService {
     constructor(hostOptions) {
         this.hostOptions = hostOptions;
     }
@@ -2585,24 +2841,26 @@ let SkyViewkeeperService = class SkyViewkeeperService {
     destroy(vk) {
         vk.destroy();
     }
-};
-SkyViewkeeperService.ctorParameters = () => [
-    { type: SkyViewkeeperHostOptions, decorators: [{ type: Optional }] }
-];
-SkyViewkeeperService.ɵprov = ɵɵdefineInjectable({ factory: function SkyViewkeeperService_Factory() { return new SkyViewkeeperService(ɵɵinject(SkyViewkeeperHostOptions, 8)); }, token: SkyViewkeeperService, providedIn: "root" });
-SkyViewkeeperService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    }),
-    __param(0, Optional())
-], SkyViewkeeperService);
+}
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: SkyViewkeeperHostOptions, decorators: [{
+                    type: Optional
+                }] }]; } });
 
-let SkyViewkeeperDirective = class SkyViewkeeperDirective {
-    constructor(el, mutationObserverSvc, viewkeeperSvc) {
+class SkyViewkeeperDirective {
+    constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
         this.el = el;
         this.mutationObserverSvc = mutationObserverSvc;
         this.viewkeeperSvc = viewkeeperSvc;
+        this.scrollableHostService = scrollableHostService;
         this.viewkeepers = [];
+        this.scrollableHostWatchUnsubscribe = undefined;
     }
     set skyViewkeeper(value) {
         this._skyViewkeeper = value;
@@ -2658,51 +2916,66 @@ let SkyViewkeeperDirective = class SkyViewkeeperDirective {
     detectElements() {
         let viewkeeperEls = this.getViewkeeperEls();
         if (this.viewkeeperElsChanged(viewkeeperEls)) {
-            this.destroyViewkeepers();
-            let previousViewkeeperEl;
-            for (const viewkeeperEl of viewkeeperEls) {
-                this.viewkeepers.push(this.viewkeeperSvc.create({
-                    boundaryEl: this.el.nativeElement,
-                    el: viewkeeperEl,
-                    setWidth: true,
-                    verticalOffsetEl: previousViewkeeperEl
-                }));
-                previousViewkeeperEl = viewkeeperEl;
+            if (this.scrollableHostWatchUnsubscribe) {
+                this.scrollableHostWatchUnsubscribe.next();
+                this.scrollableHostWatchUnsubscribe = new Subject();
+            }
+            else {
+                this.scrollableHostWatchUnsubscribe = new Subject();
             }
+            this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                .pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
+                .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,
+                        el: viewkeeperEl,
+                        setWidth: true,
+                        verticalOffsetEl: previousViewkeeperEl
+                    }));
+                    previousViewkeeperEl = viewkeeperEl;
+                }
+            });
             this.currentViewkeeperEls = viewkeeperEls;
         }
     }
-};
-SkyViewkeeperDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: MutationObserverService },
-    { type: SkyViewkeeperService }
-];
-__decorate([
-    Input()
-], SkyViewkeeperDirective.prototype, "skyViewkeeper", null);
-SkyViewkeeperDirective = __decorate([
-    Directive({
-        selector: '[skyViewkeeper]'
-    })
-], SkyViewkeeperDirective);
+}
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", 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.12", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyViewkeeper]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { skyViewkeeper: [{
+                type: Input
+            }] } });
 
-let SkyViewkeeperModule = class SkyViewkeeperModule {
-};
-SkyViewkeeperModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyViewkeeperDirective
-        ],
-        exports: [
-            SkyViewkeeperDirective
-        ]
-    })
-], SkyViewkeeperModule);
+class SkyViewkeeperModule {
+}
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyViewkeeperDirective
+                    ],
+                    exports: [
+                        SkyViewkeeperDirective
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as ɵa, SkyDockComponent as ɵb, SkyDockDomAdapterService as ɵc, SkyIdDirective as ɵd, SkyCoreResourcesModule as ɵe, SkyCoreResourcesProvider as ɵf, SkyOverlayComponent as ɵg, SkyOverlayContext as ɵh, SkyOverlayAdapterService as ɵi, SkyViewkeeperDirective as ɵj };
+export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyScrollableHostService, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
 //# sourceMappingURL=skyux-core.js.map