@skyux/core 8.0.0-alpha.0 → 8.0.0-alpha.10

package/fesm2020/skyux-core.mjs

@@ -3,8 +3,8 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
-import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
+import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
+import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i4 from '@angular/router';
@@ -17,10 +17,10 @@ import * as i1$1 from '@angular/platform-browser';
  */
 class SkyCoreAdapterModule {
 }
-SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterModule });
-SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -259,9 +259,9 @@ _SkyCoreAdapterService_renderer = new WeakMap(), _SkyCoreAdapterService_instance
         element.getClientRects().length);
     return hasBounds;
 };
-SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -384,6 +384,27 @@ const DEFAULT_AFFIX_CONFIG = {
     placement: 'above',
 };
 class SkyAffixer {
+    /**
+     * Fires when the affixed element's offset changes.
+     */
+    get offsetChange() {
+        return __classPrivateFieldGet(this, _SkyAffixer_offsetChangeObs, "f");
+    }
+    /**
+     * Fires when the base element's nearest overflow parent is scrolling. This is useful if you need
+     * to perform an additional action during the scroll event but don't want to generate another
+     * event listener.
+     */
+    get overflowScroll() {
+        return __classPrivateFieldGet(this, _SkyAffixer_overflowScrollObs, "f");
+    }
+    /**
+     * Fires when the placement value changes. A `null` value indicates that a suitable
+     * placement could not be found.
+     */
+    get placementChange() {
+        return __classPrivateFieldGet(this, _SkyAffixer_placementChangeObs, "f");
+    }
     constructor(affixedElement, renderer) {
         _SkyAffixer_instances.add(this);
         _SkyAffixer_affixedElement.set(this, void 0);
@@ -410,27 +431,6 @@ class SkyAffixer {
         __classPrivateFieldSet(this, _SkyAffixer_overflowScrollObs, __classPrivateFieldGet(this, _SkyAffixer_overflowScroll, "f").asObservable(), "f");
         __classPrivateFieldSet(this, _SkyAffixer_placementChangeObs, __classPrivateFieldGet(this, _SkyAffixer_placementChange, "f").asObservable(), "f");
     }
-    /**
-     * Fires when the affixed element's offset changes.
-     */
-    get offsetChange() {
-        return __classPrivateFieldGet(this, _SkyAffixer_offsetChangeObs, "f");
-    }
-    /**
-     * Fires when the base element's nearest overflow parent is scrolling. This is useful if you need
-     * to perform an additional action during the scroll event but don't want to generate another
-     * event listener.
-     */
-    get overflowScroll() {
-        return __classPrivateFieldGet(this, _SkyAffixer_overflowScrollObs, "f");
-    }
-    /**
-     * Fires when the placement value changes. A `null` value indicates that a suitable
-     * placement could not be found.
-     */
-    get placementChange() {
-        return __classPrivateFieldGet(this, _SkyAffixer_placementChangeObs, "f");
-    }
     /**
      * Affixes an element to a base element.
      * @param baseElement The base element.
@@ -737,9 +737,9 @@ class SkyAffixService {
     }
 }
 _SkyAffixService_renderer = new WeakMap();
-SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixService, decorators: [{
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -823,9 +823,9 @@ _SkyAffixDirective_affixer = new WeakMap(), _SkyAffixDirective_affixService = ne
         });
     }
 };
-SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyAffixDirective, decorators: [{
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAffixTo]',
@@ -856,10 +856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyAffixModule {
 }
-SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
-SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAffixModule, decorators: [{
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -873,6 +873,12 @@ var _SkyDockItem_destroyed, _SkyDockItem_destroyedObs;
  * Represents a single item added to the dock.
  */
 class SkyDockItem {
+    /**
+     * An event that emits when the item is removed from the dock.
+     */
+    get destroyed() {
+        return __classPrivateFieldGet(this, _SkyDockItem_destroyedObs, "f");
+    }
     /**
      * @param componentInstance The item's component instance.
      * @param stackOrder The assigned stack order of the docked item.
@@ -884,12 +890,6 @@ class SkyDockItem {
         _SkyDockItem_destroyedObs.set(this, void 0);
         __classPrivateFieldSet(this, _SkyDockItem_destroyedObs, __classPrivateFieldGet(this, _SkyDockItem_destroyed, "f").asObservable(), "f");
     }
-    /**
-     * An event that emits when the item is removed from the dock.
-     */
-    get destroyed() {
-        return __classPrivateFieldGet(this, _SkyDockItem_destroyedObs, "f");
-    }
     /**
      * Removes the item from the dock.
      */
@@ -927,9 +927,9 @@ class SkyMutationObserverService {
         return new MutationObserver(callback);
     }
 }
-SkyMutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMutationObserverService, decorators: [{
+SkyMutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMutationObserverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1007,9 +1007,9 @@ _SkyDockDomAdapterService_currentDockHeight = new WeakMap(), _SkyDockDomAdapterS
 }, _SkyDockDomAdapterService_destroyStyleElement = function _SkyDockDomAdapterService_destroyStyleElement() {
     __classPrivateFieldGet(this, _SkyDockDomAdapterService_renderer, "f").removeChild(document.head, __classPrivateFieldGet(this, _SkyDockDomAdapterService_styleElement, "f"));
 };
-SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: SkyMutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockDomAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: SkyMutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: i0.RendererFactory2 }]; } });
 
@@ -1116,11 +1116,11 @@ _SkyDockComponent_changeDetector = new WeakMap(), _SkyDockComponent_domAdapter =
     }
     return __classPrivateFieldGet(this, _SkyDockComponent_itemRefs, "f")[0].stackOrder + 1;
 };
-SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockComponent, decorators: [{
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"] }]
+            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
@@ -1131,10 +1131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyDockModule {
 }
-SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
-SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockModule, decorators: [{
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1189,9 +1189,9 @@ class SkyAppWindowRef {
         return getWindow();
     }
 }
-SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppWindowRef, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1290,9 +1290,9 @@ _SkyDynamicComponentService_applicationRef = new WeakMap(), _SkyDynamicComponent
     // https://malcoded.com/posts/angular-dynamic-components
     return componentRef.hostView.rootNodes[0];
 };
-SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", 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.
@@ -1307,18 +1307,18 @@ var _SkyDockService_instances, _SkyDockService_dynamicComponentSvc, _SkyDockServ
  * This service docks components to specific areas on the page.
  */
 class SkyDockService {
-    constructor(dynamicComponentSvc) {
-        _SkyDockService_instances.add(this);
-        _SkyDockService_dynamicComponentSvc.set(this, void 0);
-        _SkyDockService_options.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyDockService_dynamicComponentSvc, dynamicComponentSvc, "f");
-    }
     /**
      * Returns all docked items.
      */
     get items() {
         return SkyDockService._items;
     }
+    constructor(dynamicComponentSvc) {
+        _SkyDockService_instances.add(this);
+        _SkyDockService_dynamicComponentSvc.set(this, void 0);
+        _SkyDockService_options.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDockService_dynamicComponentSvc, dynamicComponentSvc, "f");
+    }
     /**
      * Docks a component to the bottom of the page.
      * @param component The component to dock.
@@ -1379,9 +1379,9 @@ _SkyDockService_dynamicComponentSvc = new WeakMap(), _SkyDockService_options = n
     SkyDockService.dockRef = undefined;
 };
 SkyDockService._items = [];
-SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDockService, decorators: [{
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDockService, decorators: [{
             type: Injectable,
             args: [{
                     // Must be 'any' so that the dock component is created in the context of its module's injector.
@@ -1398,10 +1398,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 class SkyDynamicComponentModule {
 }
-SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentModule });
-SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1413,9 +1413,9 @@ class SkyAppFormat {
         });
     }
 }
-SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppFormat, decorators: [{
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppFormat, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1435,9 +1435,9 @@ class SkyIdService {
         return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
     }
 }
-SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdService, decorators: [{
+SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1451,6 +1451,9 @@ var _SkyIdDirective__id;
  * variable, then use its `id` property.
  */
 class SkyIdDirective {
+    get id() {
+        return __classPrivateFieldGet(this, _SkyIdDirective__id, "f");
+    }
     constructor(elRef, renderer, idSvc) {
         _SkyIdDirective__id.set(this, void 0);
         // Generate and apply the ID before the template is rendered
@@ -1459,14 +1462,11 @@ class SkyIdDirective {
         renderer.setAttribute(elRef.nativeElement, 'id', id);
         __classPrivateFieldSet(this, _SkyIdDirective__id, id, "f");
     }
-    get id() {
-        return __classPrivateFieldGet(this, _SkyIdDirective__id, "f");
-    }
 }
 _SkyIdDirective__id = new WeakMap();
-SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyIdService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdDirective, decorators: [{
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyIdService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyId]',
@@ -1476,10 +1476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyIdModule {
 }
-SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
-SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyIdModule, decorators: [{
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyIdModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyIdDirective],
@@ -1493,10 +1493,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 class SkyLogModule {
 }
-SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyLogModule });
-SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogModule, decorators: [{
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1506,9 +1506,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 const SKY_LOG_LEVEL = new InjectionToken('SkyLogLevel');
 
-var _SkyLogService_instances, _SkyLogService_applicationLogLevel, _SkyLogService_formatter, _SkyLogService_convertStringToCode, _SkyLogService_canLog, _SkyLogService_logBasedOnLevel;
+var _SkyLogService_instances, _SkyLogService_applicationLogLevel, _SkyLogService_formatter, _SkyLogService_convertStringToCode, _SkyLogService_canLog, _SkyLogService_logBasedOnLevel, _SkyLogService_logWithParams, _SkyLogService_buildMessageKey;
+const previousWarnings = new Set();
 /**
- * Logs information to the console based on the application's log level as provided by the `SKY_LOG_LEVEL` injection token. If no token is provided, only `error` logs will be shown.
+ * Logs information to the console based on the application's log level as
+ * provided by the `SKY_LOG_LEVEL` injection token. If no token is provided,
+ * only `error` logs will be shown.
  * @internal
  */
 class SkyLogService {
@@ -1520,7 +1523,16 @@ class SkyLogService {
         __classPrivateFieldSet(this, _SkyLogService_applicationLogLevel, applicationLogLevel ?? 3 /* SkyLogLevel.Error */, "f");
     }
     /**
-     * Logs a deprecation warning for a class, property, function, etc. This will be logged as a console warning unless a different log level is given in the the `args` parameter.
+     * Clears previously-logged messages. Primarily used for unit
+     * testing this service.
+     */
+    static clearPreviousLogs() {
+        previousWarnings.clear();
+    }
+    /**
+     * Logs a deprecation warning for a class, property, function, etc. This will
+     * be logged as a console warning unless a different log level is given in the
+     * `args` parameter.
      * @param name The name of the deprecated class, property, function, etc.
      * @param args Information about the deprecation and replacement recommendations.
      * @returns
@@ -1529,26 +1541,26 @@ class SkyLogService {
         const logLevel = args?.logLevel ?? 2 /* SkyLogLevel.Warn */;
         name = __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_convertStringToCode).call(this, name);
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, logLevel)) {
-            const localizedStrings = [];
+            const messageParts = [];
             if (args?.deprecationMajorVersion) {
-                localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
+                messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
             }
             else {
-                localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated.', name));
+                messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated.', name));
             }
             if (args?.removalMajorVersion) {
-                localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
+                messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
             }
             else {
-                localizedStrings.push('We will remove it in a future major version.');
+                messageParts.push('We will remove it in a future major version.');
             }
             if (args?.replacementRecommendation) {
-                localizedStrings.push(args.replacementRecommendation);
+                messageParts.push(args.replacementRecommendation);
             }
             if (args?.moreInfoUrl) {
-                localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('For more information, see {0}.', args.moreInfoUrl));
+                messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('For more information, see {0}.', args.moreInfoUrl));
             }
-            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logBasedOnLevel).call(this, logLevel, localizedStrings.join(' '));
+            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logBasedOnLevel).call(this, logLevel, messageParts.join(' '));
         }
         return Promise.resolve();
     }
@@ -1559,12 +1571,7 @@ class SkyLogService {
      */
     error(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 3 /* SkyLogLevel.Error */)) {
-            if (params) {
-                console.error(message, ...params);
-            }
-            else {
-                console.error(message);
-            }
+            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'error', message, params);
         }
     }
     /**
@@ -1574,12 +1581,7 @@ class SkyLogService {
      */
     info(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 1 /* SkyLogLevel.Info */)) {
-            if (params) {
-                console.log(message, ...params);
-            }
-            else {
-                console.log(message);
-            }
+            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'log', message, params);
         }
     }
     /**
@@ -1589,11 +1591,12 @@ class SkyLogService {
      */
     warn(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 2 /* SkyLogLevel.Warn */)) {
-            if (params) {
-                console.warn(message, ...params);
-            }
-            else {
-                console.warn(message);
+            const messageKey = __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_buildMessageKey).call(this, message, params);
+            // Only log each warning once per application instance to avoid drowning out other
+            // important messages in the console.
+            if (!previousWarnings.has(message)) {
+                __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'warn', message, params);
+                previousWarnings.add(messageKey);
             }
         }
     }
@@ -1617,10 +1620,23 @@ _SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = n
             this.error(message, params);
             break;
     }
+}, _SkyLogService_logWithParams = function _SkyLogService_logWithParams(logMethod, message, params) {
+    if (params) {
+        console[logMethod](message, ...params);
+    }
+    else {
+        console[logMethod](message);
+    }
+}, _SkyLogService_buildMessageKey = function _SkyLogService_buildMessageKey(message, params) {
+    let key = message;
+    if (params?.length) {
+        key = `${key} ${params.join(' ')}`;
+    }
+    return key;
 };
-SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogService, deps: [{ token: SkyAppFormat }, { token: SKY_LOG_LEVEL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogService, decorators: [{
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogService, deps: [{ token: SkyAppFormat }, { token: SKY_LOG_LEVEL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1638,10 +1654,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 class SkyMediaQueryModule {
 }
-SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryModule });
-SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1649,6 +1665,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 var _SkyMediaQueryService_instances, _SkyMediaQueryService_currentSubject, _SkyMediaQueryService_currentBreakpoint, _SkyMediaQueryService_breakpoints, _SkyMediaQueryService_mediaQueries, _SkyMediaQueryService_zone, _SkyMediaQueryService_addListeners, _SkyMediaQueryService_removeListeners, _SkyMediaQueryService_notifyBreakpointChange;
 const DEFAULT_BREAKPOINT$1 = SkyMediaBreakpoints.md;
 class SkyMediaQueryService {
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return __classPrivateFieldGet(this, _SkyMediaQueryService_currentBreakpoint, "f");
+    }
     constructor(zone) {
         _SkyMediaQueryService_instances.add(this);
         _SkyMediaQueryService_currentSubject.set(this, new BehaviorSubject(DEFAULT_BREAKPOINT$1));
@@ -1676,12 +1698,6 @@ class SkyMediaQueryService {
         __classPrivateFieldSet(this, _SkyMediaQueryService_zone, zone, "f");
         __classPrivateFieldGet(this, _SkyMediaQueryService_instances, "m", _SkyMediaQueryService_addListeners).call(this);
     }
-    /**
-     * Returns the current breakpoint.
-     */
-    get current() {
-        return __classPrivateFieldGet(this, _SkyMediaQueryService_currentBreakpoint, "f");
-    }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyMediaQueryService_instances, "m", _SkyMediaQueryService_removeListeners).call(this);
         __classPrivateFieldGet(this, _SkyMediaQueryService_currentSubject, "f").complete();
@@ -1756,9 +1772,9 @@ SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
  * @default "(min-width: 1200px)"
  */
 SkyMediaQueryService.lg = '(min-width: 1200px)';
-SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1789,16 +1805,16 @@ class SkyCoreResourcesProvider {
  */
 class SkyCoreResourcesModule {
 }
-SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
-SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreResourcesModule, providers: [
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyCoreResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -1827,7 +1843,7 @@ class NumericOptions {
     }
 }
 
-// This file is mostly ported from the Angular 4.x NumberPipe in order to maintain the old
+/* eslint-disable eqeqeq */
 function isNumeric(value) {
     return !isNaN(value - parseFloat(value));
 }
@@ -2050,9 +2066,9 @@ _SkyNumericService_resourcesSvc = new WeakMap(), _SkyNumericService_symbolIndex
     // TODO: Need to implement the async `getString` method in a breaking change.
     return __classPrivateFieldGet(this, _SkyNumericService_resourcesSvc, "f").getStringForLocale({ locale: 'en_US' }, key);
 };
-SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericService, decorators: [{
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
@@ -2125,9 +2141,9 @@ class SkyNumericPipe {
     }
 }
 _SkyNumericPipe_cacheKey = new WeakMap(), _SkyNumericPipe_changeDetector = new WeakMap(), _SkyNumericPipe_formattedValue = new WeakMap(), _SkyNumericPipe_ngUnsubscribe = new WeakMap(), _SkyNumericPipe_numericSvc = new WeakMap(), _SkyNumericPipe_providerLocale = new WeakMap();
-SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericPipe, decorators: [{
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyNumeric',
@@ -2137,10 +2153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyNumericModule {
 }
-SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
-SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyNumericModule, decorators: [{
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyNumericModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyNumericPipe],
@@ -2156,6 +2172,18 @@ var _SkyOverlayInstance_backdropClick, _SkyOverlayInstance_backdropClickObs, _Sk
  * and access any public members on the appended content component instance.
  */
 class SkyOverlayInstance {
+    /**
+     * Emits when the overlay is clicked (but not its content).
+     */
+    get backdropClick() {
+        return __classPrivateFieldGet(this, _SkyOverlayInstance_backdropClickObs, "f");
+    }
+    /**
+     * Emits after the overlay is closed.
+     */
+    get closed() {
+        return __classPrivateFieldGet(this, _SkyOverlayInstance_closedObs, "f");
+    }
     constructor(
     /**
      * The configuration for the overlay.
@@ -2181,18 +2209,6 @@ class SkyOverlayInstance {
         __classPrivateFieldSet(this, _SkyOverlayInstance_backdropClickObs, __classPrivateFieldGet(this, _SkyOverlayInstance_backdropClick, "f").asObservable(), "f");
         __classPrivateFieldSet(this, _SkyOverlayInstance_closedObs, __classPrivateFieldGet(this, _SkyOverlayInstance_closed, "f").asObservable(), "f");
     }
-    /**
-     * Emits when the overlay is clicked (but not its content).
-     */
-    get backdropClick() {
-        return __classPrivateFieldGet(this, _SkyOverlayInstance_backdropClickObs, "f");
-    }
-    /**
-     * Emits after the overlay is closed.
-     */
-    get closed() {
-        return __classPrivateFieldGet(this, _SkyOverlayInstance_closedObs, "f");
-    }
     /**
      * Creates and attaches a component to the overlay.
      * @param component The component to attach.
@@ -2213,6 +2229,11 @@ class SkyOverlayInstance {
 }
 _SkyOverlayInstance_backdropClick = new WeakMap(), _SkyOverlayInstance_backdropClickObs = new WeakMap(), _SkyOverlayInstance_closed = new WeakMap(), _SkyOverlayInstance_closedObs = new WeakMap();
 
+/**
+ * @internal
+ */
+const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+
 /**
  * Contextual information for each overlay.
  * @internal
@@ -2242,12 +2263,19 @@ let uniqueZIndex = 5000;
  * @internal
  */
 class SkyOverlayComponent {
+    get backdropClick() {
+        return __classPrivateFieldGet(this, _SkyOverlayComponent_backdropClickObs, "f");
+    }
+    get closed() {
+        return __classPrivateFieldGet(this, _SkyOverlayComponent_closedObs, "f");
+    }
     constructor(changeDetector, injector, coreAdapter, context, idSvc, router) {
         _SkyOverlayComponent_instances.add(this);
         this.wrapperClass = '';
         this.enablePointerEvents = false;
         this.showBackdrop = false;
         this.zIndex = `${++uniqueZIndex}`;
+        this.clipPath$ = new ReplaySubject(1);
         _SkyOverlayComponent_backdropClick.set(this, void 0);
         _SkyOverlayComponent_backdropClickObs.set(this, void 0);
         _SkyOverlayComponent_changeDetector.set(this, void 0);
@@ -2270,12 +2298,6 @@ class SkyOverlayComponent {
         __classPrivateFieldSet(this, _SkyOverlayComponent_backdropClickObs, __classPrivateFieldGet(this, _SkyOverlayComponent_backdropClick, "f").asObservable(), "f");
         __classPrivateFieldSet(this, _SkyOverlayComponent_closedObs, __classPrivateFieldGet(this, _SkyOverlayComponent_closed, "f").asObservable(), "f");
     }
-    get backdropClick() {
-        return __classPrivateFieldGet(this, _SkyOverlayComponent_backdropClickObs, "f");
-    }
-    get closed() {
-        return __classPrivateFieldGet(this, _SkyOverlayComponent_closedObs, "f");
-    }
     ngOnInit() {
         __classPrivateFieldGet(this, _SkyOverlayComponent_instances, "m", _SkyOverlayComponent_applyConfig).call(this, __classPrivateFieldGet(this, _SkyOverlayComponent_context, "f").config);
         setTimeout(() => {
@@ -2300,7 +2322,17 @@ class SkyOverlayComponent {
         }
         this.targetRef.clear();
         const injector = Injector.create({
-            providers,
+            providers: [
+                {
+                    provide: SKY_STACKING_CONTEXT,
+                    useValue: {
+                        zIndex: new BehaviorSubject(parseInt(this.zIndex, 10))
+                            .asObservable()
+                            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyOverlayComponent_ngUnsubscribe, "f"))),
+                    },
+                },
+                ...providers,
+            ],
             parent: __classPrivateFieldGet(this, _SkyOverlayComponent_injector, "f"),
         });
         const componentRef = this.targetRef.createComponent(component, {
@@ -2318,6 +2350,9 @@ class SkyOverlayComponent {
         this.targetRef.clear();
         return this.targetRef.createEmbeddedView(templateRef, context);
     }
+    updateClipPath(clipPath) {
+        this.clipPath$.next(clipPath);
+    }
 }
 _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdropClickObs = new WeakMap(), _SkyOverlayComponent_changeDetector = new WeakMap(), _SkyOverlayComponent_closed = new WeakMap(), _SkyOverlayComponent_closedObs = new WeakMap(), _SkyOverlayComponent_context = new WeakMap(), _SkyOverlayComponent_coreAdapter = new WeakMap(), _SkyOverlayComponent_injector = new WeakMap(), _SkyOverlayComponent_ngUnsubscribe = new WeakMap(), _SkyOverlayComponent_router = new WeakMap(), _SkyOverlayComponent_routerSubscription = new WeakMap(), _SkyOverlayComponent_instances = new WeakSet(), _SkyOverlayComponent_applyConfig = function _SkyOverlayComponent_applyConfig(config) {
     this.wrapperClass = config.wrapperClass || '';
@@ -2356,11 +2391,11 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
         __classPrivateFieldSet(this, _SkyOverlayComponent_routerSubscription, undefined, "f");
     }
 };
-SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset: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);inset: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}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, 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.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset: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);inset: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}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset: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);inset: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}\n"] }]
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset: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);inset: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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { id: [{
@@ -2388,10 +2423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyOverlayModule {
 }
-SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
-SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayModule, decorators: [{
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2434,9 +2469,9 @@ _SkyOverlayAdapterService_renderer = new WeakMap(), _SkyOverlayAdapterService_st
         __classPrivateFieldGet(this, _SkyOverlayAdapterService_renderer, "f").removeChild(document.head, __classPrivateFieldGet(this, _SkyOverlayAdapterService_styleElement, "f"));
     }
 };
-SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2552,9 +2587,9 @@ _SkyOverlayService_adapter = new WeakMap(), _SkyOverlayService_applicationRef =
     }
 };
 SkyOverlayService.overlays = [];
-SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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: "15.1.4", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayService, decorators: [{
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", 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: "15.2.1", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2563,6 +2598,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 var _SkyPercentPipe_instances, _SkyPercentPipe_defaultFormat, _SkyPercentPipe_defaultLocale, _SkyPercentPipe_format, _SkyPercentPipe_formattedValue, _SkyPercentPipe_locale, _SkyPercentPipe_ngUnsubscribe, _SkyPercentPipe_value, _SkyPercentPipe_updateFormattedValue;
 class SkyPercentPipe {
+    get defaultLocale() {
+        return __classPrivateFieldGet(this, _SkyPercentPipe_defaultLocale, "f");
+    }
     constructor(localeProvider) {
         _SkyPercentPipe_instances.add(this);
         _SkyPercentPipe_defaultFormat.set(this, '1.0-2');
@@ -2580,9 +2618,6 @@ class SkyPercentPipe {
             __classPrivateFieldGet(this, _SkyPercentPipe_instances, "m", _SkyPercentPipe_updateFormattedValue).call(this);
         });
     }
-    get defaultLocale() {
-        return __classPrivateFieldGet(this, _SkyPercentPipe_defaultLocale, "f");
-    }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyPercentPipe_ngUnsubscribe, "f").next();
         __classPrivateFieldGet(this, _SkyPercentPipe_ngUnsubscribe, "f").complete();
@@ -2602,9 +2637,9 @@ _SkyPercentPipe_defaultFormat = new WeakMap(), _SkyPercentPipe_defaultLocale = n
         ? SkyNumberFormatUtility.formatNumber(locale, __classPrivateFieldGet(this, _SkyPercentPipe_value, "f"), SkyIntlNumberFormatStyle.Percent, format)
         : '', "f");
 };
-SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipe, decorators: [{
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyPercent',
@@ -2614,10 +2649,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyPercentPipeModule {
 }
-SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
-SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyPercentPipe],
@@ -2692,9 +2727,9 @@ _SkyResizeObserverService_resizeObserver = new WeakMap(), _SkyResizeObserverServ
         }
     });
 };
-SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverService, decorators: [{
+SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
@@ -2707,6 +2742,12 @@ const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
  * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
  */
 class SkyResizeObserverMediaQueryService {
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpoint, "f");
+    }
     constructor(resizeObserverSvc) {
         _SkyResizeObserverMediaQueryService_instances.add(this);
         _SkyResizeObserverMediaQueryService_breakpoints.set(this, [
@@ -2734,12 +2775,6 @@ class SkyResizeObserverMediaQueryService {
         _SkyResizeObserverMediaQueryService_target.set(this, void 0);
         __classPrivateFieldSet(this, _SkyResizeObserverMediaQueryService_resizeObserverSvc, resizeObserverSvc, "f");
     }
-    /**
-     * Returns the current breakpoint.
-     */
-    get current() {
-        return __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpoint, "f");
-    }
     ngOnDestroy() {
         this.unobserve();
         __classPrivateFieldSet(this, _SkyResizeObserverMediaQueryService_target, undefined, "f");
@@ -2806,27 +2841,29 @@ _SkyResizeObserverMediaQueryService_breakpoints = new WeakMap(), _SkyResizeObser
         __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_instances, "m", _SkyResizeObserverMediaQueryService_updateBreakpoint).call(this, breakpoint);
     }
 };
-SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
+SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
 
-var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible;
+var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_resizeObserverSvc, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible, _SkyScrollableHostService_getViewportSize;
 function notifySubscribers(subscribers, item) {
     for (const subscriber of subscribers) {
         subscriber.next(item);
     }
 }
 class SkyScrollableHostService {
-    constructor(mutationObserverSvc, windowRef) {
+    constructor(mutationObserverSvc, windowRef, resizeObserverSvc) {
         _SkyScrollableHostService_instances.add(this);
         _SkyScrollableHostService_mutationObserverSvc.set(this, void 0);
         _SkyScrollableHostService_windowRef.set(this, void 0);
+        _SkyScrollableHostService_resizeObserverSvc.set(this, void 0);
         __classPrivateFieldSet(this, _SkyScrollableHostService_mutationObserverSvc, mutationObserverSvc, "f");
+        __classPrivateFieldSet(this, _SkyScrollableHostService_resizeObserverSvc, resizeObserverSvc, "f");
         __classPrivateFieldSet(this, _SkyScrollableHostService_windowRef, windowRef, "f");
     }
     /**
@@ -2940,8 +2977,30 @@ class SkyScrollableHostService {
             });
         });
     }
-}
-_SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHostService_windowRef = new WeakMap(), _SkyScrollableHostService_instances = new WeakSet(), _SkyScrollableHostService_findScrollableHost = function _SkyScrollableHostService_findScrollableHost(element) {
+    watchScrollableHostClipPathChanges(elementRef) {
+        if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f")) {
+            return of('none');
+        }
+        return this.watchScrollableHost(elementRef).pipe(switchMap((scrollableHost) => {
+            if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f") ||
+                !scrollableHost ||
+                scrollableHost === __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow) {
+                return of('none');
+            }
+            return concat([
+                of(undefined),
+                __classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f").observe({ nativeElement: scrollableHost }),
+            ]).pipe(debounceTime(0, animationFrameScheduler), map(() => {
+                const viewportSize = __classPrivateFieldGet(this, _SkyScrollableHostService_instances, "m", _SkyScrollableHostService_getViewportSize).call(this);
+                const { top, left, width, height } = scrollableHost.getBoundingClientRect();
+                const right = Math.max(viewportSize.width - left - width, 0);
+                const bottom = Math.max(viewportSize.height - top - height, 0);
+                return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+            }));
+        }));
+    }
+}
+_SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHostService_windowRef = new WeakMap(), _SkyScrollableHostService_resizeObserverSvc = new WeakMap(), _SkyScrollableHostService_instances = new WeakSet(), _SkyScrollableHostService_findScrollableHost = function _SkyScrollableHostService_findScrollableHost(element) {
     const regex = /(auto|scroll)/;
     const windowObj = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
     const bodyObj = windowObj.document.body;
@@ -2981,16 +3040,25 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
         subtree: true,
     });
 }, _SkyScrollableHostService_isElementVisible = function _SkyScrollableHostService_isElementVisible(elementRef) {
-    return elementRef.nativeElement.offsetParent;
+    return !!elementRef.nativeElement?.offsetParent;
+}, _SkyScrollableHostService_getViewportSize = function _SkyScrollableHostService_getViewportSize() {
+    const win = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
+    const docElem = win.document.documentElement;
+    return {
+        width: docElem.clientWidth,
+        height: docElem.clientHeight,
+    };
 };
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyScrollableHostService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }]; } });
+        }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 var _SkyAppTitleService_title;
 /**
@@ -3013,9 +3081,9 @@ class SkyAppTitleService {
     }
 }
 _SkyAppTitleService_title = new WeakMap();
-SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyAppTitleService, decorators: [{
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAppTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3074,9 +3142,9 @@ _SkyTrimDirective_elRef = new WeakMap(), _SkyTrimDirective_obs = new WeakMap(),
     }
     __classPrivateFieldGet(this, _SkyTrimDirective_instances, "m", _SkyTrimDirective_observe).call(this);
 };
-SkyTrimDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyTrimDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: SkyTrimDirective, selector: "[skyTrim]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimDirective, decorators: [{
+SkyTrimDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyTrimDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyTrimDirective, selector: "[skyTrim]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTrim]',
@@ -3085,10 +3153,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyTrimModule {
 }
-SkyTrimModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTrimModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimModule, declarations: [SkyTrimDirective], exports: [SkyTrimDirective] });
-SkyTrimModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyTrimModule, decorators: [{
+SkyTrimModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTrimModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimModule, declarations: [SkyTrimDirective], exports: [SkyTrimDirective] });
+SkyTrimModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTrimModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyTrimDirective],
@@ -3105,9 +3173,9 @@ class SkyUIConfigService {
         return of({});
     }
 }
-SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyUIConfigService, decorators: [{
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyUIConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3116,9 +3184,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyViewkeeperHostOptions {
 }
-SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperHostOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
             type: Injectable
         }] });
 
@@ -3423,9 +3491,9 @@ class SkyViewkeeperService {
     }
 }
 _SkyViewkeeperService_hostOptions = new WeakMap();
-SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3436,6 +3504,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 var _SkyViewkeeperDirective_instances, _SkyViewkeeperDirective__skyViewkeeper, _SkyViewkeeperDirective_currentViewkeeperEls, _SkyViewkeeperDirective_el, _SkyViewkeeperDirective_mutationObserverSvc, _SkyViewkeeperDirective_observer, _SkyViewkeeperDirective_scrollableHostSvc, _SkyViewkeeperDirective_scrollableHostWatchUnsubscribe, _SkyViewkeeperDirective_viewkeepers, _SkyViewkeeperDirective_viewkeeperSvc, _SkyViewkeeperDirective_destroyViewkeepers, _SkyViewkeeperDirective_getViewkeeperEls, _SkyViewkeeperDirective_viewkeeperElsChanged, _SkyViewkeeperDirective_detectElements;
 class SkyViewkeeperDirective {
+    set skyViewkeeper(value) {
+        __classPrivateFieldSet(this, _SkyViewkeeperDirective__skyViewkeeper, value, "f");
+        __classPrivateFieldGet(this, _SkyViewkeeperDirective_instances, "m", _SkyViewkeeperDirective_detectElements).call(this);
+    }
+    get skyViewkeeper() {
+        return __classPrivateFieldGet(this, _SkyViewkeeperDirective__skyViewkeeper, "f");
+    }
     constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostSvc) {
         _SkyViewkeeperDirective_instances.add(this);
         _SkyViewkeeperDirective__skyViewkeeper.set(this, void 0);
@@ -3452,13 +3527,6 @@ class SkyViewkeeperDirective {
         __classPrivateFieldSet(this, _SkyViewkeeperDirective_viewkeeperSvc, viewkeeperSvc, "f");
         __classPrivateFieldSet(this, _SkyViewkeeperDirective_scrollableHostSvc, scrollableHostSvc, "f");
     }
-    set skyViewkeeper(value) {
-        __classPrivateFieldSet(this, _SkyViewkeeperDirective__skyViewkeeper, value, "f");
-        __classPrivateFieldGet(this, _SkyViewkeeperDirective_instances, "m", _SkyViewkeeperDirective_detectElements).call(this);
-    }
-    get skyViewkeeper() {
-        return __classPrivateFieldGet(this, _SkyViewkeeperDirective__skyViewkeeper, "f");
-    }
     ngOnInit() {
         __classPrivateFieldSet(this, _SkyViewkeeperDirective_observer, __classPrivateFieldGet(this, _SkyViewkeeperDirective_mutationObserverSvc, "f").create(() => __classPrivateFieldGet(this, _SkyViewkeeperDirective_instances, "m", _SkyViewkeeperDirective_detectElements).call(this)), "f");
         __classPrivateFieldGet(this, _SkyViewkeeperDirective_observer, "f").observe(__classPrivateFieldGet(this, _SkyViewkeeperDirective_el, "f").nativeElement, {
@@ -3544,9 +3612,9 @@ _SkyViewkeeperDirective__skyViewkeeper = new WeakMap(), _SkyViewkeeperDirective_
         __classPrivateFieldSet(this, _SkyViewkeeperDirective_currentViewkeeperEls, viewkeeperEls, "f");
     }
 };
-SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyViewkeeper]',
@@ -3559,10 +3627,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 
 class SkyViewkeeperModule {
 }
-SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
-SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyViewkeeperDirective],
@@ -3574,5 +3642,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NumericOptions, SKY_LOG_LEVEL, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+export { NumericOptions, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map