@skyux/core 8.0.0-alpha.2 → 8.0.0-alpha.20

package/fesm2020/skyux-core.mjs

@@ -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',
@@ -375,7 +375,7 @@ function isOffsetPartiallyVisibleWithinParent(parent, offset, bufferOffset) {
         parentOffset.left >= offset.right);
 }
 
-var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
+var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getRect, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
 const DEFAULT_AFFIX_CONFIG = {
     autoFitContext: SkyAffixAutoFitContext.OverflowParent,
     enableAutoFit: false,
@@ -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.
@@ -497,9 +497,19 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     let isAffixedElementFullyVisible = false;
     let offset;
     let placement = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement;
+    const autoFitOverflowOffset = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset || {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        autoFitOverflowOffset.top =
+            (autoFitOverflowOffset.top || 0) + window.scrollY;
+    }
     do {
         offset = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, placement);
-        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
+        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, autoFitOverflowOffset);
         if (!__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit) {
             break;
         }
@@ -525,12 +535,27 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     }
     // No suitable placement was found, so revert to preferred placement.
     return __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement);
+}, _SkyAffixer_getRect = function _SkyAffixer_getRect(baseElement) {
+    const baseDomRect = baseElement.getBoundingClientRect();
+    const baseRect = {
+        top: baseDomRect.top,
+        bottom: baseDomRect.bottom,
+        left: baseDomRect.left,
+        right: baseDomRect.right,
+        width: baseDomRect.width,
+        height: baseDomRect.height,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        baseRect.top += window.scrollY;
+        baseRect.bottom = baseRect.top + baseDomRect.height;
+    }
+    return baseRect;
 }, _SkyAffixer_getPreferredOffset = function _SkyAffixer_getPreferredOffset(placement) {
     if (!__classPrivateFieldGet(this, _SkyAffixer_baseElement, "f")) {
         return { top: 0, left: 0, bottom: 0, right: 0 };
     }
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f").getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f"));
     const horizontalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).horizontalAlignment;
     const verticalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).verticalAlignment;
     const enableAutoFit = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit;
@@ -610,8 +635,8 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
 }, _SkyAffixer_adjustOffsetToOverflowParent = function _SkyAffixer_adjustOffsetToOverflowParent(offset, placement, baseElement) {
     const parent = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getAutoFitContextParent).call(this);
     const parentOffset = getElementOffset(parent, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = baseElement.getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, baseElement);
     // A pixel value representing the leeway between the edge of the overflow parent and the edge
     // of the base element before it disappears from view.
     // If the visible portion of the base element is less than this pixel value, the auto-fit
@@ -737,9 +762,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',
@@ -793,6 +818,7 @@ class SkyAffixDirective {
             changes.affixHorizontalAlignment ||
             changes.affixIsSticky ||
             changes.affixPlacement ||
+            changes.affixPosition ||
             changes.affixVerticalAlignment) {
             __classPrivateFieldGet(this, _SkyAffixDirective_instances, "m", _SkyAffixDirective_updateAlignment).call(this);
         }
@@ -819,13 +845,14 @@ _SkyAffixDirective_affixer = new WeakMap(), _SkyAffixDirective_affixService = ne
             horizontalAlignment: this.affixHorizontalAlignment,
             isSticky: this.affixIsSticky,
             placement: this.affixPlacement,
+            position: this.affixPosition,
             verticalAlignment: this.affixVerticalAlignment,
         });
     }
 };
-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", affixPosition: "affixPosition", 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]',
@@ -844,6 +871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], affixPlacement: [{
                 type: Input
+            }], affixPosition: [{
+                type: Input
             }], affixVerticalAlignment: [{
                 type: Input
             }], affixOffsetChange: [{
@@ -856,10 +885,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 +902,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 +919,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 +956,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 +1036,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 +1145,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 +1160,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 +1218,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 +1319,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 +1336,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 +1408,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 +1427,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 +1442,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 +1464,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 +1480,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 +1491,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 +1505,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 +1522,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 +1535,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_previousWarnings, _SkyLogService_convertStringToCode, _SkyLogService_canLog, _SkyLogService_logBasedOnLevel, _SkyLogService_logWithParams, _SkyLogService_buildMessageKey;
+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 {
@@ -1516,12 +1548,20 @@ class SkyLogService {
         _SkyLogService_instances.add(this);
         _SkyLogService_applicationLogLevel.set(this, void 0);
         _SkyLogService_formatter.set(this, void 0);
-        _SkyLogService_previousWarnings.set(this, new Set());
         __classPrivateFieldSet(this, _SkyLogService_formatter, formatter, "f");
         __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
@@ -1583,14 +1623,14 @@ class SkyLogService {
             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 (!__classPrivateFieldGet(this, _SkyLogService_previousWarnings, "f").has(message)) {
+            if (!previousWarnings.has(message)) {
                 __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'warn', message, params);
-                __classPrivateFieldGet(this, _SkyLogService_previousWarnings, "f").add(messageKey);
+                previousWarnings.add(messageKey);
             }
         }
     }
 }
-_SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = new WeakMap(), _SkyLogService_previousWarnings = new WeakMap(), _SkyLogService_instances = new WeakSet(), _SkyLogService_convertStringToCode = function _SkyLogService_convertStringToCode(typeString) {
+_SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = new WeakMap(), _SkyLogService_instances = new WeakSet(), _SkyLogService_convertStringToCode = function _SkyLogService_convertStringToCode(typeString) {
     if (typeString.charAt(0) !== '`' && typeString.charAt(-1) !== '`') {
         typeString = '`' + typeString + '`';
     }
@@ -1623,9 +1663,9 @@ _SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = n
     }
     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',
@@ -1643,10 +1683,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: [{}]
         }] });
@@ -1654,6 +1694,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));
@@ -1681,12 +1727,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();
@@ -1761,9 +1801,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',
@@ -1794,16 +1834,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],
@@ -1820,6 +1860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
 /**
  * Provides arguments for the number to format.
  * @deprecated Use the `SkyNumericOptions` interface instead.
+ * @internal
  */
 class NumericOptions {
     constructor() {
@@ -1829,6 +1870,14 @@ class NumericOptions {
         this.iso = 'USD';
         this.truncate = true;
         this.truncateAfter = 1000;
+        const logService = new SkyLogService(new SkyAppFormat());
+        logService
+            .deprecated('NumericOptions', {
+            deprecationMajorVersion: 7,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/numeric',
+            replacementRecommendation: 'Use the `SkyNumericOptions` interface instead.',
+        })
+            .then();
     }
 }
 
@@ -1931,9 +1980,17 @@ class SkyNumericService {
         if (isNaN(value) || value === null) {
             return '';
         }
+        const numericOptions = {
+            digits: 0,
+            format: 'number',
+            currencySign: 'standard',
+            iso: 'USD',
+            truncateAfter: 1000,
+            ...options,
+        };
         const decimalPlaceRegExp = /\.0+$|(\.[0-9]*[1-9])0+$/;
-        const locale = options.locale || this.currentLocale;
-        const digits = options.digits || 0;
+        const locale = numericOptions.locale || this.currentLocale;
+        const digits = numericOptions.digits || 0;
         // Get the symbol for the number after rounding, since rounding could push the number
         // into a different symbol range.
         let roundedNumber = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_roundNumber).call(this, value, digits);
@@ -1941,9 +1998,9 @@ class SkyNumericService {
         let suffix = '';
         for (let i = 0; i < __classPrivateFieldGet(this, _SkyNumericService_symbolIndex, "f").length; i++) {
             let symbol = __classPrivateFieldGet(this, _SkyNumericService_symbolIndex, "f")[i];
-            if (options.truncate &&
-                options.truncateAfter !== undefined &&
-                roundedNumberAbs >= options.truncateAfter &&
+            if (numericOptions.truncate &&
+                numericOptions.truncateAfter !== undefined &&
+                roundedNumberAbs >= numericOptions.truncateAfter &&
                 roundedNumberAbs >= symbol.value) {
                 roundedNumber = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_roundNumber).call(this, value / symbol.value, digits);
                 if (Math.abs(roundedNumber) === 1000 && i > 0) {
@@ -1960,7 +2017,7 @@ class SkyNumericService {
         let digitsFormatted;
         let isDecimal = false;
         // Checks the string entered for format. Using toLowerCase to ignore case.
-        switch (options.format?.toLowerCase()) {
+        switch (numericOptions.format?.toLowerCase()) {
             // In a case where a decimal value was not shortened and
             // the digit input is 2 or higher, it forces 2 digits.
             // For example, this prevents a value like $15.50 from displaying as $15.5.
@@ -1968,8 +2025,8 @@ class SkyNumericService {
             // three decimal digits.
             case 'currency':
                 isDecimal = value % 1 !== 0;
-                if (options.minDigits) {
-                    digitsFormatted = `1.${options.minDigits}-${digits}`;
+                if (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
                 }
                 else if (isDecimal && digits >= 2) {
                     digitsFormatted = `1.2-${digits}`;
@@ -1977,12 +2034,12 @@ class SkyNumericService {
                 else {
                     digitsFormatted = `1.0-${digits}`;
                 }
-                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, options.iso, 
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, numericOptions.iso, 
                 // Angular 5+ needs a string for this parameter, but Angular 4 needs a boolean.
                 // To support both versions we can supply 'symbol' which will evaluate truthy for Angular 4
                 // and the appropriate string value for Angular 5+.
                 // See: https://angular.io/api/common/CurrencyPipe#parameters
-                'symbol', options.currencySign);
+                'symbol', numericOptions.currencySign);
                 //   ^^^^^^ Result can't be null since the sanitized input is always a number.
                 break;
             // The following is a catch-all to ensure that if
@@ -1991,10 +2048,10 @@ class SkyNumericService {
             default:
                 // Ensures localization of the number to ensure comma and
                 // decimal separator
-                if (options.minDigits) {
-                    digitsFormatted = `1.${options.minDigits}-${digits}`;
+                if (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
                 }
-                else if (options.truncate) {
+                else if (numericOptions.truncate) {
                     digitsFormatted = `1.0-${digits}`;
                 }
                 else {
@@ -2004,7 +2061,7 @@ class SkyNumericService {
                 //   ^^^^^^ Result can't be null since the sanitized input is always a number.
                 break;
         }
-        if (options.truncate) {
+        if (numericOptions.truncate) {
             output = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_replaceShortenSymbol).call(this, output);
         }
         return output;
@@ -2055,9 +2112,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',
@@ -2130,9 +2187,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',
@@ -2142,10 +2199,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],
@@ -2161,6 +2218,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.
@@ -2186,18 +2255,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.
@@ -2234,6 +2291,7 @@ class SkyOverlayContext {
 }
 
 var _SkyOverlayComponent_instances, _SkyOverlayComponent_backdropClick, _SkyOverlayComponent_backdropClickObs, _SkyOverlayComponent_changeDetector, _SkyOverlayComponent_closed, _SkyOverlayComponent_closedObs, _SkyOverlayComponent_context, _SkyOverlayComponent_coreAdapter, _SkyOverlayComponent_injector, _SkyOverlayComponent_ngUnsubscribe, _SkyOverlayComponent_router, _SkyOverlayComponent_routerSubscription, _SkyOverlayComponent_applyConfig, _SkyOverlayComponent_addBackdropClickListener, _SkyOverlayComponent_addRouteListener, _SkyOverlayComponent_removeRouteListener;
+const POSITION_DEFAULT = 'fixed';
 /**
  * Omnibar is 1000.
  * See: https://github.com/blackbaud/auth-client/blob/master/src/omnibar/omnibar.ts#L139
@@ -2252,6 +2310,12 @@ 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 = '';
@@ -2259,6 +2323,7 @@ class SkyOverlayComponent {
         this.showBackdrop = false;
         this.zIndex = `${++uniqueZIndex}`;
         this.clipPath$ = new ReplaySubject(1);
+        this.position = POSITION_DEFAULT;
         _SkyOverlayComponent_backdropClick.set(this, void 0);
         _SkyOverlayComponent_backdropClickObs.set(this, void 0);
         _SkyOverlayComponent_changeDetector.set(this, void 0);
@@ -2281,12 +2346,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(() => {
@@ -2347,6 +2406,7 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     this.wrapperClass = config.wrapperClass || '';
     this.showBackdrop = !!config.showBackdrop;
     this.enablePointerEvents = !!config.enablePointerEvents;
+    this.position = config.position || POSITION_DEFAULT;
     __classPrivateFieldGet(this, _SkyOverlayComponent_changeDetector, "f").markForCheck();
 }, _SkyOverlayComponent_addBackdropClickListener = function _SkyOverlayComponent_addBackdropClickListener() {
     fromEvent(window.document, 'click')
@@ -2380,11 +2440,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.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.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]=\"'sky-overlay-position-' + position + ' ' + 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{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.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.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"] }]
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + 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{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.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: [{
@@ -2412,10 +2472,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],
@@ -2458,9 +2518,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',
@@ -2576,9 +2636,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',
@@ -2587,6 +2647,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');
@@ -2604,9 +2667,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();
@@ -2626,9 +2686,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',
@@ -2638,10 +2698,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],
@@ -2716,9 +2776,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',
@@ -2731,6 +2791,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, [
@@ -2758,12 +2824,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");
@@ -2830,9 +2890,9 @@ _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',
@@ -3038,9 +3098,9 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
         height: docElem.clientHeight,
     };
 };
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", 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.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',
@@ -3070,9 +3130,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',
@@ -3131,9 +3191,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]',
@@ -3142,10 +3202,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],
@@ -3162,9 +3222,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',
@@ -3173,9 +3233,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
         }] });
 
@@ -3480,9 +3540,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',
@@ -3493,6 +3553,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);
@@ -3509,13 +3576,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, {
@@ -3601,9 +3661,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]',
@@ -3616,10 +3676,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],