@skyux/core 5.0.0-beta.11 → 5.0.0-beta.12

package/fesm2015/skyux-core.js

@@ -3,7 +3,7 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, of } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, debounceTime } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i3 from '@angular/router';
@@ -16,10 +16,10 @@ import * as i1$1 from '@angular/platform-browser';
  */
 class SkyCoreAdapterModule {
 }
-SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterModule });
-SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -249,9 +249,9 @@ class SkyCoreAdapterService {
         return hasBounds;
     }
 }
-SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -726,9 +726,9 @@ class SkyAffixService {
         return new SkyAffixer(affixed.nativeElement, this.renderer);
     }
 }
-SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixService, decorators: [{
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -797,9 +797,9 @@ class SkyAffixDirective {
         });
     }
 }
-SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", 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.5", ngImport: i0, type: SkyAffixDirective, decorators: [{
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAffixTo]'
@@ -830,12 +830,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyAffixModule {
 }
-SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
-SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixModule, imports: [[
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAffixModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -902,9 +902,9 @@ class MutationObserverService {
         return new MutationObserver(callback);
     }
 }
-MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MutationObserverService, decorators: [{
+MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: MutationObserverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -915,21 +915,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  * @internal
  */
 class SkyDockDomAdapterService {
-    constructor(rendererFactory) {
+    constructor(mutationService, rendererFactory) {
+        this.mutationService = mutationService;
+        this.ngUnsubscribe = new Subject();
         this.renderer = rendererFactory.createRenderer(undefined, undefined);
     }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.ngUnsubscribe.next();
+        if (this.styleElement) {
+            this.destroyStyleElement();
+        }
+        this.currentDockHeight =
+            this.ngUnsubscribe =
+                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);
+        });
+        this.observer.observe(elementRef.nativeElement, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true
+        });
+        fromEvent(window, 'resize')
+            .pipe(debounceTime(250), takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this.adjustBodyStyles(elementRef));
+    }
+    adjustBodyStyles(elementRef) {
+        const dockHeight = elementRef.nativeElement.getBoundingClientRect().height;
+        if (dockHeight === this.currentDockHeight) {
+            return;
+        }
+        // Create a style element to avoid overwriting any existing inline body styles.
+        const styleElement = this.renderer.createElement('style');
+        const textNode = this.renderer.createText(`body { margin-bottom: ${dockHeight}px; }`);
+        // Apply a `data-` attribute to make unit testing easier.
+        this.renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
+        this.renderer.appendChild(styleElement, textNode);
+        this.renderer.appendChild(document.head, styleElement);
+        if (this.styleElement) {
+            this.destroyStyleElement();
+        }
+        this.currentDockHeight = dockHeight;
+        this.styleElement = styleElement;
+    }
+    destroyStyleElement() {
+        this.renderer.removeChild(document.head, this.styleElement);
+    }
 }
-SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockDomAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: i0.RendererFactory2 }]; } });
 
 /**
  * @internal
@@ -986,8 +1039,17 @@ class SkyDockComponent {
     setOptions(options) {
         var _a, _b;
         this.options = options;
-        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) === SkyDockLocation.BeforeElement) {
-            this.domAdapter.unbindDock(this.elementRef);
+        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);
@@ -1005,11 +1067,11 @@ class SkyDockComponent {
         return this.itemRefs[0].stackOrder + 1;
     }
 }
-SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", type: SkyDockComponent, selector: "sky-dock", providers: [
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyDockComponent, selector: "sky-dock", providers: [
         SkyDockDomAdapterService
-    ], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container\n  #target\n></ng-container>", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:sticky;left:0;bottom:0;right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container\n  #target\n></ng-container>", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-dock',
@@ -1030,14 +1092,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyDockModule {
 }
-SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
-SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockModule, providers: [
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, providers: [
         MutationObserverService
     ], imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1101,9 +1163,9 @@ class SkyAppWindowRef {
         return getWindow();
     }
 }
-SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppWindowRef, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1176,9 +1238,9 @@ class SkyDynamicComponentService {
         return componentRef.hostView.rootNodes[0];
     }
 }
-SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
             type: Injectable,
             args: [{
                     // Must be 'any' so that the component is created in the context of its module's injector.
@@ -1262,9 +1324,9 @@ class SkyDockService {
         this.dockRef = undefined;
     }
 }
-SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDockService, decorators: [{
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDockService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1278,10 +1340,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  */
 class SkyDynamicComponentModule {
 }
-SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDynamicComponentModule });
-SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDynamicComponentModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1293,9 +1355,9 @@ class SkyAppFormat {
         });
     }
 }
-SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppFormat, decorators: [{
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppFormat, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1324,9 +1386,9 @@ class SkyIdDirective {
         return this._id;
     }
 }
-SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyIdDirective, decorators: [{
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyId]',
@@ -1336,10 +1398,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyIdModule {
 }
-SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
-SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyIdModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyIdModule, decorators: [{
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyIdModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1357,10 +1419,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  */
 class SkyLogModule {
 }
-SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogModule });
-SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogModule, decorators: [{
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1376,9 +1438,9 @@ class SkyLogService {
         }
     }
 }
-SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyLogService, decorators: [{
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1391,10 +1453,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
  */
 class SkyMediaQueryModule {
 }
-SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryModule });
-SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1503,9 +1565,9 @@ SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
  * The size for the `lg` breakpoint.
  */
 SkyMediaQueryService.lg = '(min-width: 1200px)';
-SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1531,14 +1593,14 @@ class SkyCoreResourcesProvider {
  */
 class SkyCoreResourcesModule {
 }
-SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
-SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreResourcesModule, providers: [{
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, providers: [{
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyCoreResourcesProvider,
             multi: true
         }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -1830,9 +1892,9 @@ class SkyNumericService {
         return this.resourcesService.getStringForLocale({ locale: 'en_US' }, key);
     }
 }
-SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericService, decorators: [{
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any'
@@ -1890,9 +1952,9 @@ class SkyNumericPipe {
         return this.numericService.formatNumber(value, options);
     }
 }
-SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericPipe, decorators: [{
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyNumeric'
@@ -1901,16 +1963,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyNumericModule {
 }
-SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule,
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule,
         SkyCoreResourcesModule], exports: [SkyNumericPipe] });
-SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericModule, providers: [
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, providers: [
         SkyNumericPipe
     ], imports: [[
             SkyI18nModule,
             SkyCoreResourcesModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyNumericModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyNumericModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2104,9 +2166,9 @@ class SkyOverlayComponent {
         }
     }
 }
-SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", 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.5", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div\n    class=\"sky-overlay-content\"\n    #overlayContentRef\n  >\n    <ng-template\n      #target\n    >\n    </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\"\n    class=\"sky-overlay-backdrop\"\n  ></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-overlay',
@@ -2138,12 +2200,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyOverlayModule {
 }
-SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
-SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayModule, imports: [[
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, imports: [[
             CommonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2188,9 +2250,9 @@ class SkyOverlayAdapterService {
         }
     }
 }
-SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2299,9 +2361,9 @@ class SkyOverlayService {
     }
 }
 SkyOverlayService.overlays = [];
-SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", 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.5", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyOverlayService, decorators: [{
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2338,9 +2400,9 @@ class SkyPercentPipe {
         this.formattedValue = SkyNumberFormatUtility.formatNumber(locale, this.value, SkyIntlNumberFormatStyle.Percent, format);
     }
 }
-SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipe, decorators: [{
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyPercent',
@@ -2350,16 +2412,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyPercentPipeModule {
 }
-SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule,
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule,
         SkyCoreResourcesModule], exports: [SkyPercentPipe] });
-SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipeModule, providers: [
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, providers: [
         SkyPercentPipe
     ], imports: [[
             CommonModule,
             SkyCoreResourcesModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2396,9 +2458,9 @@ class SkyAppTitleService {
         }
     }
 }
-SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyAppTitleService, decorators: [{
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyAppTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2414,9 +2476,9 @@ class SkyUIConfigService {
         return of({});
     }
 }
-SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyUIConfigService, decorators: [{
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyUIConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2425,9 +2487,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyViewkeeperHostOptions {
 }
-SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperHostOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
             type: Injectable
         }] });
 
@@ -2682,9 +2744,9 @@ class SkyViewkeeperService {
         vk.destroy();
     }
 }
-SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2769,9 +2831,9 @@ class SkyViewkeeperDirective {
         }
     }
 }
-SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyViewkeeper]'
@@ -2782,10 +2844,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
 
 class SkyViewkeeperModule {
 }
-SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
-SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [