@skyux/core 8.10.6 → 8.10.7

package/fesm2015/skyux-core.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, createComponent, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } from '@angular/core';
 import { __classPrivateFieldSet, __classPrivateFieldGet, __awaiter } from 'tslib';
 import * as i5 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, Subscription, ReplaySubject, fromEvent, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
 import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
@@ -18,10 +18,10 @@ import * as i1$1 from '@angular/platform-browser';
  */
 class SkyCoreAdapterModule {
 }
-SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterModule });
-SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -260,9 +260,9 @@ _SkyCoreAdapterService_renderer = new WeakMap(), _SkyCoreAdapterService_instance
         element.getClientRects().length);
     return hasBounds;
 };
-SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -313,19 +313,11 @@ function getElementOffset(element, bufferOffset) {
     let left;
     let right;
     let bottom;
-    if (element === document.body) {
-        left = 0;
-        top = 0;
-        right = document.documentElement.clientWidth;
-        bottom = document.documentElement.clientHeight;
-    }
-    else {
-        const clientRect = element.getBoundingClientRect();
-        left = clientRect.left;
-        top = clientRect.top;
-        right = clientRect.right;
-        bottom = clientRect.bottom;
-    }
+    const clientRect = element.getBoundingClientRect();
+    left = clientRect.left;
+    top = clientRect.top;
+    right = clientRect.right;
+    bottom = clientRect.bottom;
     bottom -= bufferOffsetBottom;
     left += bufferOffsetLeft;
     right -= bufferOffsetRight;
@@ -337,16 +329,49 @@ function getElementOffset(element, bufferOffset) {
         top,
     };
 }
+/**
+ * Returns an AffixRect that represents the outer dimensions of a given element.
+ */
+function getOuterRect(element) {
+    const rect = element.getBoundingClientRect();
+    const computedStyle = window.getComputedStyle(element, undefined);
+    const marginTop = parseFloat(computedStyle.marginTop);
+    const marginLeft = parseFloat(computedStyle.marginLeft);
+    const marginRight = parseFloat(computedStyle.marginRight);
+    const marginBottom = parseFloat(computedStyle.marginBottom);
+    return {
+        top: rect.top - marginTop,
+        left: rect.left - marginLeft,
+        bottom: rect.top + rect.height + marginBottom,
+        right: rect.left + rect.width + marginLeft + marginRight,
+        width: rect.width + marginLeft + marginRight,
+        height: rect.height + marginTop + marginBottom,
+    };
+}
+/**
+ * Returns the visible rect for a given element.
+ */
+function getVisibleRectForElement(viewportRuler, element) {
+    const elementRect = getOuterRect(element);
+    const viewportRect = viewportRuler.getViewportRect();
+    const visibleRect = {
+        top: Math.max(elementRect.top, 0),
+        left: Math.max(elementRect.left, 0),
+        bottom: Math.min(elementRect.bottom, viewportRect.bottom),
+        right: Math.min(elementRect.right, viewportRect.right),
+    };
+    return Object.assign(Object.assign({}, visibleRect), { width: visibleRect.right - visibleRect.left, height: visibleRect.bottom - visibleRect.top });
+}
 function getOverflowParents(child) {
     const bodyElement = window.document.body;
     const results = [];
     let parentElement = child === null || child === void 0 ? void 0 : child.parentNode;
-    while (parentElement !== undefined &&
-        parentElement !== bodyElement &&
-        parentElement instanceof HTMLElement) {
-        const overflowY = window
-            .getComputedStyle(parentElement, undefined)
-            .overflowY.toLowerCase();
+    while (parentElement !== undefined && parentElement instanceof HTMLElement) {
+        const computedStyle = window.getComputedStyle(parentElement, undefined);
+        const overflowY = computedStyle.overflowY.toLowerCase();
+        if (computedStyle.position === 'fixed' || parentElement.matches('body')) {
+            break;
+        }
         if (overflowY === 'auto' ||
             overflowY === 'hidden' ||
             overflowY === 'scroll') {
@@ -359,25 +384,40 @@ function getOverflowParents(child) {
 }
 /**
  * Confirms offset is fully visible within a parent element.
- * @param parent
- * @param offset
  */
-function isOffsetFullyVisibleWithinParent(parent, offset, bufferOffset) {
-    const parentOffset = getElementOffset(parent, bufferOffset);
-    return !(parentOffset.top > offset.top ||
-        parentOffset.right < offset.right ||
-        parentOffset.bottom < offset.bottom ||
-        parentOffset.left > offset.left);
-}
-function isOffsetPartiallyVisibleWithinParent(parent, offset, bufferOffset) {
-    const parentOffset = getElementOffset(parent, bufferOffset);
+function isOffsetFullyVisibleWithinParent(viewportRuler, parent, offset, bufferOffset) {
+    let parentOffset;
+    if (parent.matches('body')) {
+        const viewportRect = viewportRuler.getViewportRect();
+        parentOffset = {
+            top: 0,
+            left: 0,
+            right: viewportRect.right,
+            bottom: viewportRect.bottom,
+        };
+    }
+    else if (bufferOffset) {
+        parentOffset = getElementOffset(parent, bufferOffset);
+    }
+    else {
+        parentOffset = getVisibleRectForElement(viewportRuler, parent);
+    }
+    return (parentOffset.top <= offset.top &&
+        parentOffset.right >= offset.right &&
+        parentOffset.bottom >= offset.bottom &&
+        parentOffset.left <= offset.left);
+}
+function isOffsetPartiallyVisibleWithinParent(viewportRuler, parent, offset, bufferOffset) {
+    const parentOffset = bufferOffset
+        ? getElementOffset(parent, bufferOffset)
+        : getVisibleRectForElement(viewportRuler, parent);
     return !(parentOffset.top >= offset.bottom ||
         parentOffset.right <= offset.left ||
         parentOffset.bottom <= offset.top ||
         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_scrollChange, _SkyAffixer_viewportListeners, _SkyAffixer_viewportRuler, _SkyAffixer_zone, _SkyAffixer__config, _SkyAffixer_scrollChangeListener, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getRect, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addViewportListeners, _SkyAffixer_removeViewportListeners;
+var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_layoutViewport, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_scrollChange, _SkyAffixer_viewportListeners, _SkyAffixer_viewportRuler, _SkyAffixer_zone, _SkyAffixer__config, _SkyAffixer_scrollChangeListener, _SkyAffixer_affix, _SkyAffixer_getOffsetParentRect, _SkyAffixer_getOffset, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addViewportListeners, _SkyAffixer_removeViewportListeners;
 const DEFAULT_AFFIX_CONFIG = {
     autoFitContext: SkyAffixAutoFitContext.OverflowParent,
     enableAutoFit: false,
@@ -407,12 +447,13 @@ class SkyAffixer {
     get placementChange() {
         return __classPrivateFieldGet(this, _SkyAffixer_placementChangeObs, "f");
     }
-    constructor(affixedElement, renderer, viewportRuler, zone) {
+    constructor(affixedElement, renderer, viewportRuler, zone, layoutViewport) {
         _SkyAffixer_instances.add(this);
         _SkyAffixer_affixedElement.set(this, void 0);
         _SkyAffixer_baseElement.set(this, void 0);
         _SkyAffixer_currentOffset.set(this, void 0);
         _SkyAffixer_currentPlacement.set(this, void 0);
+        _SkyAffixer_layoutViewport.set(this, void 0);
         _SkyAffixer_offsetChange.set(this, void 0);
         _SkyAffixer_offsetChangeObs.set(this, void 0);
         _SkyAffixer_overflowParents.set(this, []);
@@ -429,6 +470,7 @@ class SkyAffixer {
         _SkyAffixer_scrollChangeListener.set(this, () => __classPrivateFieldGet(this, _SkyAffixer_scrollChange, "f").next());
         __classPrivateFieldSet(this, _SkyAffixer_affixedElement, affixedElement, "f");
         __classPrivateFieldSet(this, _SkyAffixer_renderer, renderer, "f");
+        __classPrivateFieldSet(this, _SkyAffixer_layoutViewport, layoutViewport, "f");
         __classPrivateFieldSet(this, _SkyAffixer_viewportRuler, viewportRuler, "f");
         __classPrivateFieldSet(this, _SkyAffixer_zone, zone, "f");
         __classPrivateFieldSet(this, _SkyAffixer_offsetChange, new Subject(), "f");
@@ -475,7 +517,7 @@ class SkyAffixer {
         __classPrivateFieldGet(this, _SkyAffixer_scrollChange, "f").complete();
     }
 }
-_SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMap(), _SkyAffixer_currentOffset = new WeakMap(), _SkyAffixer_currentPlacement = new WeakMap(), _SkyAffixer_offsetChange = new WeakMap(), _SkyAffixer_offsetChangeObs = new WeakMap(), _SkyAffixer_overflowParents = new WeakMap(), _SkyAffixer_overflowScroll = new WeakMap(), _SkyAffixer_overflowScrollObs = new WeakMap(), _SkyAffixer_placementChange = new WeakMap(), _SkyAffixer_placementChangeObs = new WeakMap(), _SkyAffixer_renderer = new WeakMap(), _SkyAffixer_scrollChange = new WeakMap(), _SkyAffixer_viewportListeners = new WeakMap(), _SkyAffixer_viewportRuler = new WeakMap(), _SkyAffixer_zone = new WeakMap(), _SkyAffixer__config = new WeakMap(), _SkyAffixer_scrollChangeListener = new WeakMap(), _SkyAffixer_instances = new WeakSet(), _SkyAffixer_config_get = function _SkyAffixer_config_get() {
+_SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMap(), _SkyAffixer_currentOffset = new WeakMap(), _SkyAffixer_currentPlacement = new WeakMap(), _SkyAffixer_layoutViewport = new WeakMap(), _SkyAffixer_offsetChange = new WeakMap(), _SkyAffixer_offsetChangeObs = new WeakMap(), _SkyAffixer_overflowParents = new WeakMap(), _SkyAffixer_overflowScroll = new WeakMap(), _SkyAffixer_overflowScrollObs = new WeakMap(), _SkyAffixer_placementChange = new WeakMap(), _SkyAffixer_placementChangeObs = new WeakMap(), _SkyAffixer_renderer = new WeakMap(), _SkyAffixer_scrollChange = new WeakMap(), _SkyAffixer_viewportListeners = new WeakMap(), _SkyAffixer_viewportRuler = new WeakMap(), _SkyAffixer_zone = new WeakMap(), _SkyAffixer__config = new WeakMap(), _SkyAffixer_scrollChangeListener = new WeakMap(), _SkyAffixer_instances = new WeakSet(), _SkyAffixer_config_get = function _SkyAffixer_config_get() {
     return __classPrivateFieldGet(this, _SkyAffixer__config, "f");
 }, _SkyAffixer_config_set = function _SkyAffixer_config_set(value) {
     const merged = Object.assign(Object.assign({}, DEFAULT_AFFIX_CONFIG), value);
@@ -489,11 +531,31 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     __classPrivateFieldSet(this, _SkyAffixer__config, merged, "f");
 }, _SkyAffixer_affix = function _SkyAffixer_affix() {
     const offset = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getOffset).call(this);
+    const offsetParentRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getOffsetParentRect).call(this);
+    offset.top = offset.top - offsetParentRect.top;
+    offset.left = offset.left - offsetParentRect.left;
+    offset.bottom = offset.bottom - offsetParentRect.top;
+    offset.right = offset.right - offsetParentRect.left;
     if (__classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_isNewOffset).call(this, offset)) {
         __classPrivateFieldGet(this, _SkyAffixer_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"), 'top', `${offset.top}px`);
         __classPrivateFieldGet(this, _SkyAffixer_renderer, "f").setStyle(__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"), 'left', `${offset.left}px`);
         __classPrivateFieldGet(this, _SkyAffixer_offsetChange, "f").next({ offset });
     }
+}, _SkyAffixer_getOffsetParentRect = function _SkyAffixer_getOffsetParentRect() {
+    if (__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").offsetParent) {
+        return getOuterRect(__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").offsetParent);
+    }
+    else {
+        const layoutRect = getOuterRect(__classPrivateFieldGet(this, _SkyAffixer_layoutViewport, "f"));
+        return {
+            top: layoutRect.top,
+            left: layoutRect.left,
+            height: layoutRect.height,
+            width: layoutRect.width,
+            bottom: layoutRect.top - layoutRect.height,
+            right: layoutRect.left - layoutRect.width,
+        };
+    }
 }, _SkyAffixer_getOffset = function _SkyAffixer_getOffset() {
     const parent = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getAutoFitContextParent).call(this);
     const maxAttempts = 4;
@@ -501,22 +563,9 @@ _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') {
-        const { top, left } = __classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f").getViewportScrollPosition();
-        autoFitOverflowOffset.top = (autoFitOverflowOffset.top || 0) + top;
-        autoFitOverflowOffset.left = (autoFitOverflowOffset.left || 0) + left;
-        autoFitOverflowOffset.bottom = (autoFitOverflowOffset.bottom || 0) + top;
-        autoFitOverflowOffset.right = (autoFitOverflowOffset.right || 0) + left;
-    }
     do {
         offset = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, placement);
-        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, autoFitOverflowOffset);
+        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(__classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f"), parent, offset, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
         if (!__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit) {
             break;
         }
@@ -542,30 +591,12 @@ _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') {
-        const { left, top } = __classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f").getViewportScrollPosition();
-        baseRect.top += top;
-        baseRect.left += left;
-        baseRect.bottom += top;
-        baseRect.right += left;
-    }
-    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_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 affixedRect = getOuterRect(__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f").getBoundingClientRect();
     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;
@@ -643,10 +674,33 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     offset.right = offset.left + affixedRect.width;
     return offset;
 }, _SkyAffixer_adjustOffsetToOverflowParent = function _SkyAffixer_adjustOffsetToOverflowParent(offset, placement, baseElement) {
+    const affixedRect = getOuterRect(__classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = baseElement.getBoundingClientRect();
     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_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
-    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, baseElement);
+    let parentOffset;
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitContext === SkyAffixAutoFitContext.OverflowParent) {
+        if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset) {
+            // When the config contains a specific offset.
+            parentOffset = getElementOffset(parent, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
+        }
+        else if (isOffsetFullyVisibleWithinParent(__classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f"), parent, baseRect)) {
+            // When the base element is fully visible within the parent, aim for the visible portion of the parent element.
+            parentOffset = getVisibleRectForElement(__classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f"), parent);
+        }
+        else {
+            // Anywhere in the parent element.
+            parentOffset = getOuterRect(parent);
+        }
+    }
+    else {
+        const viewportRect = __classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f").getViewportRect();
+        parentOffset = {
+            top: -viewportRect.top,
+            left: -viewportRect.left,
+            bottom: -viewportRect.bottom,
+            right: -viewportRect.right,
+        };
+    }
     // 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
@@ -722,11 +776,13 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     __classPrivateFieldSet(this, _SkyAffixer_currentOffset, offset, "f");
     return true;
 }, _SkyAffixer_isBaseElementVisible = function _SkyAffixer_isBaseElementVisible() {
+    // Can't get here if the base element is undefined.
+    /* istanbul ignore if */
     if (!__classPrivateFieldGet(this, _SkyAffixer_baseElement, "f")) {
         return false;
     }
     const baseRect = __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f").getBoundingClientRect();
-    return isOffsetPartiallyVisibleWithinParent(__classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getImmediateOverflowParent).call(this), {
+    return isOffsetPartiallyVisibleWithinParent(__classPrivateFieldGet(this, _SkyAffixer_viewportRuler, "f"), __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getImmediateOverflowParent).call(this), {
         top: baseRect.top,
         left: baseRect.left,
         right: baseRect.right,
@@ -759,25 +815,42 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     });
 };
 
-var _SkyAffixService_renderer, _SkyAffixService_viewportRuler, _SkyAffixService_zone;
+var _SkyAffixService_instances, _SkyAffixService_renderer, _SkyAffixService_viewportRuler, _SkyAffixService_zone, _SkyAffixService_layoutViewport, _SkyAffixService_createLayoutViewportShim;
 class SkyAffixService {
     constructor() {
+        _SkyAffixService_instances.add(this);
         _SkyAffixService_renderer.set(this, inject(RendererFactory2).createRenderer(undefined, null));
         _SkyAffixService_viewportRuler.set(this, inject(ViewportRuler));
         _SkyAffixService_zone.set(this, inject(NgZone));
+        _SkyAffixService_layoutViewport.set(this, __classPrivateFieldGet(this, _SkyAffixService_instances, "m", _SkyAffixService_createLayoutViewportShim).call(this, inject(DOCUMENT)));
+    }
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").removeChild(__classPrivateFieldGet(this, _SkyAffixService_layoutViewport, "f").parentNode, __classPrivateFieldGet(this, _SkyAffixService_layoutViewport, "f"));
     }
     /**
      * Creates an instance of [[SkyAffixer]].
      * @param affixed The element to be affixed.
      */
     createAffixer(affixed) {
-        return new SkyAffixer(affixed.nativeElement, __classPrivateFieldGet(this, _SkyAffixService_renderer, "f"), __classPrivateFieldGet(this, _SkyAffixService_viewportRuler, "f"), __classPrivateFieldGet(this, _SkyAffixService_zone, "f"));
-    }
-}
-_SkyAffixService_renderer = new WeakMap(), _SkyAffixService_viewportRuler = new WeakMap(), _SkyAffixService_zone = new WeakMap();
-SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixService, decorators: [{
+        return new SkyAffixer(affixed.nativeElement, __classPrivateFieldGet(this, _SkyAffixService_renderer, "f"), __classPrivateFieldGet(this, _SkyAffixService_viewportRuler, "f"), __classPrivateFieldGet(this, _SkyAffixService_zone, "f"), __classPrivateFieldGet(this, _SkyAffixService_layoutViewport, "f"));
+    }
+}
+_SkyAffixService_renderer = new WeakMap(), _SkyAffixService_viewportRuler = new WeakMap(), _SkyAffixService_zone = new WeakMap(), _SkyAffixService_layoutViewport = new WeakMap(), _SkyAffixService_instances = new WeakSet(), _SkyAffixService_createLayoutViewportShim = function _SkyAffixService_createLayoutViewportShim(doc) {
+    const layoutViewportElement = __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").createElement('div');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").addClass(layoutViewportElement, 'sky-affix-layout-viewport-shim');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'width', '100%');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'height', '100%');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'position', 'fixed');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'top', '0');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'left', '0');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'visibility', 'hidden');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").setStyle(layoutViewportElement, 'pointerEvents', 'none');
+    __classPrivateFieldGet(this, _SkyAffixService_renderer, "f").appendChild(doc.body, layoutViewportElement);
+    return layoutViewportElement;
+};
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -863,9 +936,9 @@ _SkyAffixDirective_affixer = new WeakMap(), _SkyAffixDirective_affixService = ne
         });
     }
 };
-SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: SkyAffixDirective, decorators: [{
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", 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.10", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyAffixTo]',
@@ -898,10 +971,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyAffixModule {
 }
-SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
-SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAffixModule, decorators: [{
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAffixModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -998,9 +1071,9 @@ class SkyMutationObserverService {
         return new MutationObserver(callback);
     }
 }
-SkyMutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMutationObserverService, decorators: [{
+SkyMutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMutationObserverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1078,9 +1151,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.2.9", 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.9", ngImport: i0, type: SkyDockDomAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: i0.RendererFactory2 }]; } });
 
@@ -1188,9 +1261,9 @@ _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.2.9", 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.9", 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.9", ngImport: i0, type: SkyDockComponent, decorators: [{
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", 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.10", 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: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: [{
@@ -1203,10 +1276,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyDockModule {
 }
-SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
-SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockModule, decorators: [{
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1261,9 +1334,9 @@ class SkyAppWindowRef {
         return getWindow();
     }
 }
-SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppWindowRef, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1353,7 +1426,9 @@ class SkyDynamicComponentService {
         if (!componentRef) {
             return;
         }
-        __classPrivateFieldGet(this, _SkyDynamicComponentService_applicationRef, "f").detachView(componentRef.hostView);
+        if (!__classPrivateFieldGet(this, _SkyDynamicComponentService_applicationRef, "f").destroyed) {
+            __classPrivateFieldGet(this, _SkyDynamicComponentService_applicationRef, "f").detachView(componentRef.hostView);
+        }
         componentRef.destroy();
     }
 }
@@ -1362,9 +1437,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.2.9", 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.9", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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.
@@ -1451,9 +1526,9 @@ _SkyDockService_dynamicComponentSvc = new WeakMap(), _SkyDockService_options = n
     SkyDockService.dockRef = undefined;
 };
 SkyDockService._items = [];
-SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDockService, decorators: [{
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDockService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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.
@@ -1470,10 +1545,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  */
 class SkyDynamicComponentModule {
 }
-SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyDynamicComponentModule });
-SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDynamicComponentModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1485,9 +1560,9 @@ class SkyAppFormat {
         });
     }
 }
-SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppFormat, decorators: [{
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppFormat, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1507,9 +1582,9 @@ class SkyIdService {
         return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
     }
 }
-SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdService, decorators: [{
+SkyIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1536,9 +1611,9 @@ class SkyIdDirective {
     }
 }
 _SkyIdDirective__id = new WeakMap();
-SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdDirective, decorators: [{
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyId]',
@@ -1548,10 +1623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyIdModule {
 }
-SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
-SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyIdModule, decorators: [{
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyIdModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyIdDirective],
@@ -1576,9 +1651,9 @@ class SkyLayoutHostService {
     }
 }
 _SkyLayoutHostService_hostLayoutForChild = new WeakMap(), _SkyLayoutHostService_hostLayoutForChildObs = new WeakMap();
-SkyLayoutHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLayoutHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLayoutHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLayoutHostService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLayoutHostService, decorators: [{
+SkyLayoutHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLayoutHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLayoutHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLayoutHostService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLayoutHostService, decorators: [{
             type: Injectable
         }] });
 
@@ -1651,9 +1726,9 @@ _SkyLiveAnnouncerService_announcerElement = new WeakMap(), _SkyLiveAnnouncerServ
     __classPrivateFieldGet(this, _SkyLiveAnnouncerService_document, "f").body.appendChild(liveEl);
     return liveEl;
 };
-SkyLiveAnnouncerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyLiveAnnouncerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLiveAnnouncerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLiveAnnouncerService, decorators: [{
+SkyLiveAnnouncerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLiveAnnouncerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLiveAnnouncerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLiveAnnouncerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -1664,10 +1739,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  */
 class SkyLogModule {
 }
-SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyLogModule });
-SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLogModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLogModule, decorators: [{
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLogModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1808,9 +1883,9 @@ _SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = n
     }
     return key;
 };
-SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SkyLogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyLogService, decorators: [{
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1830,10 +1905,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  */
 class SkyMediaQueryModule {
 }
-SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryModule });
-SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
             type: NgModule,
             args: [{}]
         }] });
@@ -1948,9 +2023,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.2.9", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1981,16 +2056,16 @@ class SkyCoreResourcesProvider {
  */
 class SkyCoreResourcesModule {
 }
-SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
-SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreResourcesModule, providers: [
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyCoreResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -2257,9 +2332,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.2.9", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericService, decorators: [{
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
@@ -2335,9 +2410,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.2.9", 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.9", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericPipe, decorators: [{
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyNumeric',
@@ -2347,10 +2422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyNumericModule {
 }
-SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
-SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyNumericModule, decorators: [{
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyNumericModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyNumericPipe],
@@ -2588,9 +2663,9 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
         __classPrivateFieldSet(this, _SkyOverlayComponent_routerSubscription, undefined, "f");
     }
 };
-SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", 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.10", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
             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 () {
@@ -2622,10 +2697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyOverlayModule {
 }
-SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
-SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayModule, decorators: [{
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -2668,9 +2743,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.2.9", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2786,9 +2861,9 @@ _SkyOverlayService_adapter = new WeakMap(), _SkyOverlayService_applicationRef =
     }
 };
 SkyOverlayService.overlays = [];
-SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyOverlayService, decorators: [{
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2836,9 +2911,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.2.9", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipe, decorators: [{
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyPercent',
@@ -2848,10 +2923,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyPercentPipeModule {
 }
-SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
-SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyPercentPipe],
@@ -2940,9 +3015,9 @@ _SkyResizeObserverService_next = new WeakMap(), _SkyResizeObserverService_resize
         }
     });
 };
-SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverService, decorators: [{
+SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3076,9 +3151,9 @@ _SkyResizeObserverMediaQueryService_breakpoints = new WeakMap(), _SkyResizeObser
         __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_instances, "m", _SkyResizeObserverMediaQueryService_updateBreakpoint).call(this, breakpoint, updateResponsiveClasses);
     }
 };
-SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
+SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
             type: Injectable
         }] });
 
@@ -3282,9 +3357,9 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
         height: docElem.clientHeight,
     };
 };
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyScrollableHostService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3316,9 +3391,9 @@ class SkyAppTitleService {
     }
 }
 _SkyAppTitleService_title = new WeakMap();
-SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyAppTitleService, decorators: [{
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyAppTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3377,9 +3452,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.2.9", 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.9", type: SkyTrimDirective, selector: "[skyTrim]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTrimDirective, decorators: [{
+SkyTrimDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", type: SkyTrimDirective, selector: "[skyTrim]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyTrimDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTrim]',
@@ -3388,10 +3463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyTrimModule {
 }
-SkyTrimModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTrimModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTrimModule, declarations: [SkyTrimDirective], exports: [SkyTrimDirective] });
-SkyTrimModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTrimModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTrimModule, decorators: [{
+SkyTrimModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTrimModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyTrimModule, declarations: [SkyTrimDirective], exports: [SkyTrimDirective] });
+SkyTrimModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyTrimModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyTrimModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyTrimDirective],
@@ -3408,9 +3483,9 @@ class SkyUIConfigService {
         return of({});
     }
 }
-SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyUIConfigService, decorators: [{
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyUIConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3419,9 +3494,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyViewkeeperHostOptions {
 }
-SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperHostOptions });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
             type: Injectable
         }] });
 
@@ -3728,9 +3803,9 @@ class SkyViewkeeperService {
     }
 }
 _SkyViewkeeperService_hostOptions = new WeakMap();
-SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3851,9 +3926,9 @@ _SkyViewkeeperDirective__skyViewkeeper = new WeakMap(), _SkyViewkeeperDirective_
         __classPrivateFieldSet(this, _SkyViewkeeperDirective_currentViewkeeperEls, viewkeeperEls, "f");
     }
 };
-SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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.9", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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.10", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyViewkeeper]',
@@ -3868,10 +3943,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class SkyViewkeeperModule {
 }
-SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
-SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyViewkeeperDirective],