@skyux/core 5.6.2 → 6.0.0-beta.0

package/fesm2015/skyux-core.mjs

@@ -0,0 +1,3043 @@
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, Pipe, ElementRef, Optional } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, fromEvent, BehaviorSubject, Observable, of } from 'rxjs';
+import { takeUntil, debounceTime } from 'rxjs/operators';
+import * as i1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
+import * as i3 from '@angular/router';
+import { NavigationStart } from '@angular/router';
+import * as i1$1 from '@angular/platform-browser';
+
+/**
+ * @deprecated The `SkyCoreAdapterService` no longer needs the `SkyCoreAdapterModule`.
+ * The `SkyCoreAdapterModule` can be removed from your project.
+ */
+class SkyCoreAdapterModule {
+}
+SkyCoreAdapterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreAdapterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterModule });
+SkyCoreAdapterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+var SkyMediaBreakpoints;
+(function (SkyMediaBreakpoints) {
+    /**
+     * Indicates screen widths of 767px or less.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["xs"] = 1] = "xs";
+    /**
+     * Indicates screen widths of 768px to 991px.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["sm"] = 2] = "sm";
+    /**
+     * Indicates screen widths of 992px to 1199px.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["md"] = 3] = "md";
+    /**
+     * Indicates screen widths of 1200px or greater.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
+})(SkyMediaBreakpoints || (SkyMediaBreakpoints = {}));
+
+const SKY_TABBABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'button:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    '*[contenteditable=true]:not([disabled])',
+    '*[tabindex]:not([disabled])',
+].join(', ');
+class SkyCoreAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    /**
+     * Set the responsive container CSS class for a given element.
+     *
+     * @param elementRef - The element that will recieve the new CSS class.
+     * @param breakpoint - The SkyMediaBreakpoint will determine which class
+     * gets set. For example a SkyMediaBreakpoint of `xs` will set a CSS class of `sky-responsive-container-xs`.
+     */
+    setResponsiveContainerClass(elementRef, breakpoint) {
+        const nativeEl = elementRef.nativeElement;
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        let newClass;
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                newClass = 'sky-responsive-container-xs';
+                break;
+            }
+            case SkyMediaBreakpoints.sm: {
+                newClass = 'sky-responsive-container-sm';
+                break;
+            }
+            case SkyMediaBreakpoints.md: {
+                newClass = 'sky-responsive-container-md';
+                break;
+            }
+            default: {
+                newClass = 'sky-responsive-container-lg';
+                break;
+            }
+        }
+        this.renderer.addClass(nativeEl, newClass);
+    }
+    /**
+     * This method temporarily enables/disables pointer events.
+     * This is helpful to prevent iFrames from interfering with drag events.
+     *
+     * @param enable - Set to `true` to enable pointer events. Set to `false` to disable.
+     */
+    toggleIframePointerEvents(enable) {
+        const iframes = document.querySelectorAll('iframe');
+        for (let i = 0; i < iframes.length; i++) {
+            // Setting to empty string will allow iframe to fall back to its prior CSS assignment.
+            iframes[i].style.pointerEvents = enable ? '' : 'none';
+        }
+    }
+    /**
+     * Focuses on the first element found with an `autofocus` attribute inside the supplied `elementRef`.
+     *
+     * @param elementRef - The element to search within.
+     * @return Returns `true` if a child element with autofocus is found.
+     */
+    applyAutoFocus(elementRef) {
+        const elementWithAutoFocus = elementRef.nativeElement.querySelector('[autofocus]');
+        // Child was found with the autofocus property. Set focus and return true.
+        if (elementWithAutoFocus) {
+            elementWithAutoFocus.focus();
+            return true;
+        }
+        // No children were found with autofocus property. Return false.
+        return false;
+    }
+    /**
+     * Sets focus on the first focusable child of the `elementRef` parameter.
+     * If no focusable children are found, and `focusOnContainerIfNoChildrenFound` is `true`,
+     * focus will be set on the container element.
+     *
+     * @param elementRef - The element to search within.
+     * @param containerSelector - A CSS selector indicating the container that should
+     * recieve focus if no focusable children are found.
+     * @param focusOnContainerIfNoChildrenFound - It set to `true`, the container will
+     * recieve focus if no focusable children are found.
+     */
+    getFocusableChildrenAndApplyFocus(elementRef, containerSelector, focusOnContainerIfNoChildrenFound = false) {
+        const containerElement = elementRef.nativeElement.querySelector(containerSelector);
+        const focusableChildren = this.getFocusableChildren(containerElement);
+        // Focus first focusable child if available. Otherwise, set focus on container.
+        if (!this.focusFirstElement(focusableChildren) &&
+            focusOnContainerIfNoChildrenFound) {
+            containerElement.focus();
+        }
+    }
+    /**
+     * Returns an array of all focusable children of provided `element`.
+     *
+     * @param element - The HTMLElement to search within.
+     * @param options - Options for getting focusable children.
+     */
+    getFocusableChildren(element, options) {
+        let elements = Array.prototype.slice.call(element.querySelectorAll(SKY_TABBABLE_SELECTOR));
+        // Unless ignoreTabIndex = true, filter out elements with tabindex = -1.
+        if (!options || !options.ignoreTabIndex) {
+            elements = elements.filter((el) => {
+                return el.tabIndex !== -1;
+            });
+        }
+        // Unless ignoreVisibility = true, filter out elements that are not visible.
+        if (!options || !options.ignoreVisibility) {
+            elements = elements.filter((el) => {
+                return this.isVisible(el);
+            });
+        }
+        return elements;
+    }
+    /**
+     * Returns the clientWidth of the provided elementRef.
+     * @param elementRef - The element to calculate width from.
+     */
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    /**
+     * Checks if an event target has a higher z-index than a given element.
+     * @param target The event target element.
+     * @param element The element to test against. A z-index must be explicitly set for this element.
+     */
+    isTargetAboveElement(target, element) {
+        const zIndex = getComputedStyle(element).zIndex;
+        let el = target;
+        while (el) {
+            // Getting the computed style only works for elements that exist in the DOM.
+            // In certain scenarios, an element is removed after a click event; by the time the event
+            // bubbles up to other elements, however, the element has been removed and the computed style returns empty.
+            // In this case, we'll need to check the z-index directly, via the style property.
+            const targetZIndex = getComputedStyle(el).zIndex || el.style.zIndex;
+            if (targetZIndex !== '' &&
+                targetZIndex !== 'auto' &&
+                +targetZIndex > +zIndex) {
+                return true;
+            }
+            el = el.parentElement;
+        }
+        return false;
+    }
+    /**
+     * Remove inline height styles from the provided elements.
+     * @param elementRef - The element to search within.
+     * @param selector - The CSS selector to use when finding elements for removing height.
+     */
+    resetHeight(elementRef, selector) {
+        const children = elementRef.nativeElement.querySelectorAll(selector);
+        /* istanbul ignore else */
+        if (children.length > 0) {
+            for (let i = 0; i < children.length; i++) {
+                // Setting style attributes with Web API requires null instead of undefined.
+                // tslint:disable-next-line: no-null-keyword
+                children[i].style.height = null;
+            }
+        }
+    }
+    /**
+     * Sets all element heights to match the height of the tallest element.
+     * @param elementRef - The element to search within.
+     * @param selector - The CSS selector to use when finding elements for syncing height.
+     */
+    syncMaxHeight(elementRef, selector) {
+        const children = elementRef.nativeElement.querySelectorAll(selector);
+        /* istanbul ignore else */
+        if (children.length > 0) {
+            let maxHeight = 0;
+            for (let i = 0; i < children.length; i++) {
+                maxHeight = Math.max(maxHeight, children[i].offsetHeight);
+            }
+            for (let i = 0; i < children.length; i++) {
+                children[i].style.height = maxHeight + 'px';
+            }
+        }
+    }
+    focusFirstElement(list) {
+        if (list.length > 0) {
+            list[0].focus();
+            return true;
+        }
+        return false;
+    }
+    isVisible(element) {
+        const style = window.getComputedStyle(element);
+        const isHidden = style.display === 'none' || style.visibility === 'hidden';
+        if (isHidden) {
+            return false;
+        }
+        const hasBounds = !!(element.offsetWidth ||
+            element.offsetHeight ||
+            element.getClientRects().length);
+        return hasBounds;
+    }
+}
+SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+var SkyAffixAutoFitContext;
+(function (SkyAffixAutoFitContext) {
+    /**
+     * Auto-fit functionality will respect the nearest overflow parent element's dimensions.
+     */
+    SkyAffixAutoFitContext[SkyAffixAutoFitContext["OverflowParent"] = 0] = "OverflowParent";
+    /**
+     * Auto-fit functionality will respect the browser viewport dimensions.
+     */
+    SkyAffixAutoFitContext[SkyAffixAutoFitContext["Viewport"] = 1] = "Viewport";
+})(SkyAffixAutoFitContext || (SkyAffixAutoFitContext = {}));
+
+function getNextPlacement(placement) {
+    const placements = ['above', 'right', 'below', 'left'];
+    let index = placements.indexOf(placement) + 1;
+    if (index >= placements.length) {
+        index = 0;
+    }
+    return placements[index];
+}
+function getInversePlacement(placement) {
+    const pairings = {
+        above: 'below',
+        below: 'above',
+        right: 'left',
+        left: 'right',
+    };
+    return pairings[placement];
+}
+
+/**
+ * Returns the offset values of a given element.
+ * @param element The HTML element.
+ * @param bufferOffset An optional offset to add/subtract to the element's actual offset.
+ */
+function getElementOffset(element, bufferOffset = {}) {
+    const bufferOffsetBottom = bufferOffset.bottom || 0;
+    const bufferOffsetLeft = bufferOffset.left || 0;
+    const bufferOffsetRight = bufferOffset.right || 0;
+    const bufferOffsetTop = bufferOffset.top || 0;
+    let top;
+    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;
+    }
+    bottom -= bufferOffsetBottom;
+    left += bufferOffsetLeft;
+    right -= bufferOffsetRight;
+    top += bufferOffsetTop;
+    return {
+        bottom,
+        left,
+        right,
+        top,
+    };
+}
+function getOverflowParents(child) {
+    const bodyElement = window.document.body;
+    const results = [bodyElement];
+    let parentElement = child.parentNode;
+    while (parentElement !== undefined &&
+        parentElement !== bodyElement &&
+        parentElement instanceof HTMLElement) {
+        const overflowY = window
+            .getComputedStyle(parentElement, undefined)
+            .overflowY.toLowerCase();
+        if (overflowY === 'auto' ||
+            overflowY === 'hidden' ||
+            overflowY === 'scroll') {
+            results.push(parentElement);
+        }
+        parentElement = parentElement.parentNode;
+    }
+    return results;
+}
+/**
+ * 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);
+    return !(parentOffset.top >= offset.bottom ||
+        parentOffset.right <= offset.left ||
+        parentOffset.bottom <= offset.top ||
+        parentOffset.left >= offset.right);
+}
+
+const DEFAULT_AFFIX_CONFIG = {
+    autoFitContext: SkyAffixAutoFitContext.OverflowParent,
+    enableAutoFit: false,
+    horizontalAlignment: 'center',
+    isSticky: false,
+    placement: 'above',
+};
+class SkyAffixer {
+    constructor(affixedElement, renderer) {
+        this.affixedElement = affixedElement;
+        this.renderer = renderer;
+        this._offsetChange = new Subject();
+        this._overflowScroll = new Subject();
+        this._placementChange = new Subject();
+    }
+    /**
+     * Fires when the affixed element's offset changes.
+     */
+    get offsetChange() {
+        return this._offsetChange.asObservable();
+    }
+    /**
+     * Fires when the base element's nearest overflow parent is scrolling. This is useful if you need
+     * to perform an additional action during the scroll event but don't want to generate another
+     * event listener.
+     */
+    get overflowScroll() {
+        return this._overflowScroll.asObservable();
+    }
+    /**
+     * Fires when the placement value changes. A `null` value indicates that a suitable
+     * placement could not be found.
+     */
+    get placementChange() {
+        return this._placementChange.asObservable();
+    }
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        const merged = Object.assign(Object.assign({}, DEFAULT_AFFIX_CONFIG), value);
+        // Make sure none of the values are undefined.
+        Object.keys(merged).forEach((k) => {
+            if (merged[k] === undefined) {
+                merged[k] = DEFAULT_AFFIX_CONFIG[k];
+            }
+        });
+        this._config = merged;
+    }
+    /**
+     * Affixes an element to a base element.
+     * @param baseElement The base element.
+     * @param config Configuration for the affix action.
+     */
+    affixTo(baseElement, config) {
+        this.reset();
+        this.config = config;
+        this.baseElement = baseElement;
+        this.overflowParents = getOverflowParents(baseElement);
+        this.affix();
+        if (this.config.isSticky) {
+            this.addScrollListeners();
+            this.addResizeListener();
+        }
+    }
+    /**
+     * Re-runs the affix calculation.
+     */
+    reaffix() {
+        // Reset current placement to preferred placement.
+        this.currentPlacement = this.config.placement;
+        this.affix();
+    }
+    /**
+     * Destroys the affixer.
+     */
+    destroy() {
+        this.reset();
+        this._placementChange.complete();
+        this._offsetChange.complete();
+        this._overflowScroll.complete();
+        this._offsetChange =
+            this._placementChange =
+                this._overflowScroll =
+                    undefined;
+    }
+    affix() {
+        this.baseRect = this.baseElement.getBoundingClientRect();
+        this.affixedRect = this.affixedElement.getBoundingClientRect();
+        const offset = this.getOffset();
+        if (this.isNewOffset(offset)) {
+            this.renderer.setStyle(this.affixedElement, 'top', `${offset.top}px`);
+            this.renderer.setStyle(this.affixedElement, 'left', `${offset.left}px`);
+            this._offsetChange.next({ offset });
+        }
+    }
+    getOffset() {
+        const parent = this.getAutoFitContextParent();
+        const maxAttempts = 4;
+        let attempts = 0;
+        let isAffixedElementFullyVisible = false;
+        let offset;
+        let placement = this.config.placement;
+        do {
+            offset = this.getPreferredOffset(placement);
+            isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, this.config.autoFitOverflowOffset);
+            if (!this.config.enableAutoFit) {
+                break;
+            }
+            if (!isAffixedElementFullyVisible) {
+                placement =
+                    attempts % 2 === 0
+                        ? getInversePlacement(placement)
+                        : getNextPlacement(placement);
+            }
+            attempts++;
+        } while (!isAffixedElementFullyVisible && attempts < maxAttempts);
+        if (isAffixedElementFullyVisible) {
+            if (this.isBaseElementVisible()) {
+                this.notifyPlacementChange(placement);
+            }
+            else {
+                /* tslint:disable-next-line:no-null-keyword */
+                this.notifyPlacementChange(null);
+            }
+            return offset;
+        }
+        if (this.config.enableAutoFit) {
+            /* tslint:disable-next-line:no-null-keyword */
+            this.notifyPlacementChange(null);
+        }
+        // No suitable placement was found, so revert to preferred placement.
+        return this.getPreferredOffset(this.config.placement);
+    }
+    getPreferredOffset(placement) {
+        const affixedRect = this.affixedRect;
+        const baseRect = this.baseRect;
+        const horizontalAlignment = this.config.horizontalAlignment;
+        const verticalAlignment = this.config.verticalAlignment;
+        const enableAutoFit = this.config.enableAutoFit;
+        let top;
+        let left;
+        if (placement === 'above' || placement === 'below') {
+            if (placement === 'above') {
+                top = baseRect.top - affixedRect.height;
+                switch (verticalAlignment) {
+                    case 'top':
+                        top = top + affixedRect.height;
+                        break;
+                    case 'middle':
+                        top = top + affixedRect.height / 2;
+                        break;
+                    case 'bottom':
+                    default:
+                        break;
+                }
+            }
+            else {
+                top = baseRect.bottom;
+                switch (verticalAlignment) {
+                    case 'top':
+                    default:
+                        break;
+                    case 'middle':
+                        top = top - affixedRect.height / 2;
+                        break;
+                    case 'bottom':
+                        top = top - affixedRect.height;
+                        break;
+                }
+            }
+            switch (horizontalAlignment) {
+                case 'left':
+                    left = baseRect.left;
+                    break;
+                case 'center':
+                default:
+                    left = baseRect.left + baseRect.width / 2 - affixedRect.width / 2;
+                    break;
+                case 'right':
+                    left = baseRect.right - affixedRect.width;
+                    break;
+            }
+        }
+        else {
+            if (placement === 'left') {
+                left = baseRect.left - affixedRect.width;
+            }
+            else {
+                left = baseRect.right;
+            }
+            switch (verticalAlignment) {
+                case 'top':
+                    top = baseRect.top;
+                    break;
+                case 'middle':
+                default:
+                    top = baseRect.top + baseRect.height / 2 - affixedRect.height / 2;
+                    break;
+                case 'bottom':
+                    top = baseRect.bottom - affixedRect.height;
+                    break;
+            }
+        }
+        let offset = { left, top };
+        if (enableAutoFit) {
+            offset = this.adjustOffsetToOverflowParent(Object.assign({}, offset), placement);
+        }
+        offset.bottom = offset.top + affixedRect.height;
+        offset.right = offset.left + affixedRect.width;
+        return offset;
+    }
+    /**
+     * Slightly adjust the offset to fit within the scroll parent's boundaries if
+     * the affixed element would otherwise be clipped.
+     */
+    adjustOffsetToOverflowParent(offset, placement) {
+        const parent = this.getAutoFitContextParent();
+        const parentOffset = getElementOffset(parent, this.config.autoFitOverflowOffset);
+        const affixedRect = this.affixedRect;
+        const baseRect = this.baseRect;
+        // A pixel value representing the leeway between the edge of the overflow parent and the edge
+        // of the base element before it dissapears from view.
+        // If the visible portion of the base element is less than this pixel value, the auto-fit
+        // functionality attempts to find another placement.
+        const defaultPixelTolerance = 40;
+        let pixelTolerance;
+        const originalOffsetTop = offset.top;
+        const originalOffsetLeft = offset.left;
+        /* tslint:disable-next-line:switch-default */
+        switch (placement) {
+            case 'above':
+            case 'below':
+                // Keep the affixed element within the overflow parent.
+                if (offset.left < parentOffset.left) {
+                    offset.left = parentOffset.left;
+                }
+                else if (offset.left + affixedRect.width > parentOffset.right) {
+                    offset.left = parentOffset.right - affixedRect.width;
+                }
+                // Use a smaller pixel tolerance if the base element width is less than the default.
+                pixelTolerance = Math.min(defaultPixelTolerance, baseRect.width);
+                // Make sure the affixed element never detaches from the base element.
+                if (offset.left + pixelTolerance > baseRect.right ||
+                    offset.left + affixedRect.width - pixelTolerance < baseRect.left) {
+                    offset.left = originalOffsetLeft;
+                }
+                break;
+            case 'left':
+            case 'right':
+                // Keep the affixed element within the overflow parent.
+                if (offset.top < parentOffset.top) {
+                    offset.top = parentOffset.top;
+                }
+                else if (offset.top + affixedRect.height > parentOffset.bottom) {
+                    offset.top = parentOffset.bottom - affixedRect.height;
+                }
+                // Use a smaller pixel tolerance if the base element height is less than the default.
+                pixelTolerance = Math.min(defaultPixelTolerance, baseRect.height);
+                // Make sure the affixed element never detaches from the base element.
+                if (offset.top + pixelTolerance > baseRect.bottom ||
+                    offset.top + affixedRect.height - pixelTolerance < baseRect.top) {
+                    offset.top = originalOffsetTop;
+                }
+                break;
+        }
+        return offset;
+    }
+    getImmediateOverflowParent() {
+        return this.overflowParents[this.overflowParents.length - 1];
+    }
+    getAutoFitContextParent() {
+        const bodyElement = this.overflowParents[0];
+        return this.config.autoFitContext === SkyAffixAutoFitContext.OverflowParent
+            ? this.getImmediateOverflowParent()
+            : bodyElement;
+    }
+    notifyPlacementChange(placement) {
+        if (this.currentPlacement !== placement) {
+            this.currentPlacement = placement;
+            this._placementChange.next({
+                placement,
+            });
+        }
+    }
+    reset() {
+        this.removeScrollListeners();
+        this.removeResizeListener();
+        this._config =
+            this.affixedRect =
+                this.baseElement =
+                    this.baseRect =
+                        this.currentPlacement =
+                            this.currentOffset =
+                                this.overflowParents =
+                                    undefined;
+    }
+    isNewOffset(offset) {
+        if (this.currentOffset === undefined) {
+            this.currentOffset = offset;
+            return true;
+        }
+        if (this.currentOffset.top === offset.top &&
+            this.currentOffset.left === offset.left) {
+            return false;
+        }
+        this.currentOffset = offset;
+        return true;
+    }
+    isBaseElementVisible() {
+        return isOffsetPartiallyVisibleWithinParent(this.getImmediateOverflowParent(), {
+            top: this.baseRect.top,
+            left: this.baseRect.left,
+            right: this.baseRect.right,
+            bottom: this.baseRect.bottom,
+        }, this.config.autoFitOverflowOffset);
+    }
+    addScrollListeners() {
+        this.scrollListeners = this.overflowParents.map((parentElement) => {
+            const overflow = parentElement === document.body ? 'window' : parentElement;
+            return this.renderer.listen(overflow, 'scroll', () => {
+                this.affix();
+                this._overflowScroll.next();
+            });
+        });
+    }
+    addResizeListener() {
+        this.resizeListener = fromEvent(window, 'resize').subscribe(() => this.affix());
+    }
+    removeResizeListener() {
+        if (this.resizeListener) {
+            this.resizeListener.unsubscribe();
+            this.resizeListener = undefined;
+        }
+    }
+    removeScrollListeners() {
+        if (this.scrollListeners) {
+            // Remove renderer-generated listeners by calling the listener itself.
+            // https://github.com/angular/angular/issues/9368#issuecomment-227199778
+            this.scrollListeners.forEach((listener) => listener());
+            this.scrollListeners = undefined;
+        }
+    }
+}
+
+class SkyAffixService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    /**
+     * Creates an instance of [[SkyAffixer]].
+     * @param affixed The element to be affixed.
+     */
+    createAffixer(affixed) {
+        return new SkyAffixer(affixed.nativeElement, this.renderer);
+    }
+}
+SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * Affixes the host element to a base element.
+ */
+class SkyAffixDirective {
+    constructor(elementRef, affixService) {
+        this.affixService = affixService;
+        /**
+         * Fires when the affixed element's offset changes.
+         */
+        this.affixOffsetChange = new EventEmitter();
+        /**
+         * Fires when the affixed element's overflow container is scrolled.
+         */
+        this.affixOverflowScroll = new EventEmitter();
+        /**
+         * Fires when the placement value changes.
+         */
+        this.affixPlacementChange = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+        this.affixer = this.affixService.createAffixer(elementRef);
+        this.affixer.offsetChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => this.affixOffsetChange.emit(change));
+        this.affixer.overflowScroll
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => this.affixOverflowScroll.emit(change));
+        this.affixer.placementChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((change) => this.affixPlacementChange.emit(change));
+    }
+    ngOnChanges(changes) {
+        /* istanbul ignore else */
+        if (changes.affixAutoFitContext ||
+            changes.affixAutoFitOverflowOffset ||
+            changes.affixEnableAutoFit ||
+            changes.affixHorizontalAlignment ||
+            changes.affixIsSticky ||
+            changes.affixPlacement ||
+            changes.affixVerticalAlignment) {
+            this.updateAlignment();
+        }
+    }
+    ngOnDestroy() {
+        this.affixOffsetChange.complete();
+        this.affixOverflowScroll.complete();
+        this.affixPlacementChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.affixer.destroy();
+    }
+    updateAlignment() {
+        this.affixer.affixTo(this.skyAffixTo, {
+            autoFitContext: this.affixAutoFitContext,
+            autoFitOverflowOffset: this.affixAutoFitOverflowOffset,
+            enableAutoFit: this.affixEnableAutoFit,
+            horizontalAlignment: this.affixHorizontalAlignment,
+            isSticky: this.affixIsSticky,
+            placement: this.affixPlacement,
+            verticalAlignment: this.affixVerticalAlignment,
+        });
+    }
+}
+SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyAffixTo]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyAffixService }]; }, propDecorators: { skyAffixTo: [{
+                type: Input
+            }], affixAutoFitContext: [{
+                type: Input
+            }], affixAutoFitOverflowOffset: [{
+                type: Input
+            }], affixEnableAutoFit: [{
+                type: Input
+            }], affixHorizontalAlignment: [{
+                type: Input
+            }], affixIsSticky: [{
+                type: Input
+            }], affixPlacement: [{
+                type: Input
+            }], affixVerticalAlignment: [{
+                type: Input
+            }], affixOffsetChange: [{
+                type: Output
+            }], affixOverflowScroll: [{
+                type: Output
+            }], affixPlacementChange: [{
+                type: Output
+            }] } });
+
+class SkyAffixModule {
+}
+SkyAffixModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyAffixModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] });
+SkyAffixModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAffixModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [SkyAffixDirective],
+                    declarations: [SkyAffixDirective],
+                }]
+        }] });
+
+/**
+ * Represents a single item added to the dock.
+ */
+class SkyDockItem {
+    /**
+     * @param componentInstance The item's component instance.
+     * @param stackOrder The assigned stack order of the docked item.
+     */
+    constructor(componentInstance, stackOrder) {
+        this.componentInstance = componentInstance;
+        this.stackOrder = stackOrder;
+        this._destroyed = new Subject();
+    }
+    /**
+     * An event that emits when the item is removed from the dock.
+     */
+    get destroyed() {
+        return this._destroyed.asObservable();
+    }
+    /**
+     * Removes the item from the dock.
+     */
+    destroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+}
+
+/**
+ * The location on the page where the dock component should be rendered.
+ */
+var SkyDockLocation;
+(function (SkyDockLocation) {
+    /**
+     * Renders the dock component before a given element.
+     */
+    SkyDockLocation[SkyDockLocation["BeforeElement"] = 0] = "BeforeElement";
+    /**
+     * Renders the dock component as the last element inside the BODY element.
+     */
+    SkyDockLocation[SkyDockLocation["BodyBottom"] = 1] = "BodyBottom";
+    /**
+     * Renders the dock component as the last element inside a given element.
+     */
+    SkyDockLocation[SkyDockLocation["ElementBottom"] = 2] = "ElementBottom";
+})(SkyDockLocation || (SkyDockLocation = {}));
+
+class MutationObserverService {
+    create(callback) {
+        return new MutationObserver(callback);
+    }
+}
+MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MutationObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MutationObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDockDomAdapterService {
+    constructor(mutationService, rendererFactory) {
+        this.mutationService = mutationService;
+        this.ngUnsubscribe = new Subject();
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        this.ngUnsubscribe.next();
+        if (this.styleElement) {
+            this.destroyStyleElement();
+        }
+        this.currentDockHeight =
+            this.ngUnsubscribe =
+                this.observer =
+                    this.styleElement =
+                        undefined;
+    }
+    setSticky(elementRef) {
+        this.renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
+    }
+    setZIndex(zIndex, elementRef) {
+        this.renderer.setStyle(elementRef.nativeElement, 'z-index', zIndex);
+    }
+    unbindDock(elementRef) {
+        this.renderer.addClass(elementRef.nativeElement, 'sky-dock-unbound');
+    }
+    watchDomChanges(elementRef) {
+        this.observer = this.mutationService.create(() => {
+            this.adjustBodyStyles(elementRef);
+        });
+        this.observer.observe(elementRef.nativeElement, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        fromEvent(window, 'resize')
+            .pipe(debounceTime(250), takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this.adjustBodyStyles(elementRef));
+    }
+    adjustBodyStyles(elementRef) {
+        const dockHeight = elementRef.nativeElement.getBoundingClientRect().height;
+        if (dockHeight === this.currentDockHeight) {
+            return;
+        }
+        // Create a style element to avoid overwriting any existing inline body styles.
+        const styleElement = this.renderer.createElement('style');
+        const textNode = this.renderer.createText(`body { margin-bottom: ${dockHeight}px; }`);
+        // Apply a `data-` attribute to make unit testing easier.
+        this.renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
+        this.renderer.appendChild(styleElement, textNode);
+        this.renderer.appendChild(document.head, styleElement);
+        if (this.styleElement) {
+            this.destroyStyleElement();
+        }
+        this.currentDockHeight = dockHeight;
+        this.styleElement = styleElement;
+    }
+    destroyStyleElement() {
+        this.renderer.removeChild(document.head, this.styleElement);
+    }
+}
+SkyDockDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: MutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: i0.RendererFactory2 }]; } });
+
+/**
+ * @internal
+ */
+function sortByStackOrder(a, b) {
+    if (a.stackOrder > b.stackOrder) {
+        return -1;
+    }
+    if (a.stackOrder < b.stackOrder) {
+        return 1;
+    }
+    return 0;
+}
+
+/**
+ * @internal
+ */
+class SkyDockComponent {
+    constructor(changeDetector, resolver, elementRef, injector, domAdapter) {
+        this.changeDetector = changeDetector;
+        this.resolver = resolver;
+        this.elementRef = elementRef;
+        this.injector = injector;
+        this.domAdapter = domAdapter;
+        this.itemRefs = [];
+    }
+    insertComponent(component, config = {}) {
+        const factory = this.resolver.resolveComponentFactory(component);
+        const injector = Injector.create({
+            providers: config.providers || [],
+            parent: this.injector,
+        });
+        const componentRef = this.target.createComponent(factory, undefined, injector);
+        const stackOrder = config.stackOrder !== null && config.stackOrder !== undefined
+            ? config.stackOrder
+            : this.getHighestStackOrder();
+        this.itemRefs.push({
+            componentRef,
+            stackOrder,
+        });
+        this.sortItemsByStackOrder();
+        this.changeDetector.markForCheck();
+        return {
+            componentRef,
+            stackOrder,
+        };
+    }
+    removeItem(item) {
+        const viewRef = item.componentRef.hostView;
+        this.target.remove(this.target.indexOf(viewRef));
+        const found = this.itemRefs.find((i) => i.componentRef.hostView === viewRef);
+        this.itemRefs.splice(this.itemRefs.indexOf(found), 1);
+    }
+    setOptions(options) {
+        var _a, _b;
+        this.options = options;
+        switch ((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) {
+            case SkyDockLocation.BeforeElement:
+                this.domAdapter.unbindDock(this.elementRef);
+                break;
+            case SkyDockLocation.ElementBottom:
+                this.domAdapter.setSticky(this.elementRef);
+                break;
+            case SkyDockLocation.BodyBottom:
+            default:
+                this.domAdapter.watchDomChanges(this.elementRef);
+                break;
+        }
+        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.zIndex) {
+            this.domAdapter.setZIndex(this.options.zIndex, this.elementRef);
+        }
+    }
+    sortItemsByStackOrder() {
+        this.itemRefs.sort(sortByStackOrder);
+        // Reassign the correct index for each view.
+        this.itemRefs.forEach((item, i) => this.target.move(item.componentRef.hostView, i));
+    }
+    getHighestStackOrder() {
+        if (this.itemRefs.length === 0) {
+            return 0;
+        }
+        return this.itemRefs[0].stackOrder + 1;
+    }
+}
+SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyDockModule {
+}
+SkyDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] });
+SkyDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockModule, providers: [MutationObserverService], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyDockComponent],
+                    providers: [MutationObserverService],
+                }]
+        }] });
+
+/**
+ * The location on the page where the dynamic component should be rendered.
+ */
+var SkyDynamicComponentLocation;
+(function (SkyDynamicComponentLocation) {
+    /**
+     * Renders the dynamic component before a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BeforeElement"] = 0] = "BeforeElement";
+    /**
+     * Renders the dynamic component as the last element inside the BODY element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyBottom"] = 1] = "BodyBottom";
+    /**
+     * Renders the dynamic component as the first element inside the BODY element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["BodyTop"] = 2] = "BodyTop";
+    /**
+     * Renders the dynamic component as the last element inside a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementBottom"] = 3] = "ElementBottom";
+    /**
+     * Renders the dynamic component as the first element inside a given element.
+     */
+    SkyDynamicComponentLocation[SkyDynamicComponentLocation["ElementTop"] = 4] = "ElementTop";
+})(SkyDynamicComponentLocation || (SkyDynamicComponentLocation = {}));
+
+/**
+ * @internal
+ */
+function getWindow() {
+    return window;
+}
+/**
+ * The application window reference service references the global window variable.
+ * After users inject SkyAppWindowRef into a component, they can use the service to interact with
+ * window properties and event handlers by referencing its nativeWindow property.
+ */
+class SkyAppWindowRef {
+    /**
+     * References the global `window` variable.
+     */
+    get nativeWindow() {
+        return getWindow();
+    }
+}
+SkyAppWindowRef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppWindowRef.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Angular service for creating and rendering a dynamic component.
+ */
+class SkyDynamicComponentService {
+    constructor(componentFactoryResolver, applicationRef, injector, windowRef, rendererFactory) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.applicationRef = applicationRef;
+        this.injector = injector;
+        this.windowRef = windowRef;
+        // Based on suggestions from https://github.com/angular/angular/issues/17824
+        // for accessing an instance of Renderer2 in a service since Renderer2 can't
+        // be injected into a service.  Passing undefined for both parameters results
+        // in the default renderer which is what we want here.
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    /**
+     * Creates an instance of the specified component and adds it to the specified location
+     * on the page.
+     * @param options Options for creating the dynamic component.
+     */
+    createComponent(componentType, options) {
+        options = options || {
+            location: SkyDynamicComponentLocation.BodyBottom,
+        };
+        const componentRef = this.componentFactoryResolver
+            .resolveComponentFactory(componentType)
+            .create(this.injector);
+        this.applicationRef.attachView(componentRef.hostView);
+        const el = this.getRootNode(componentRef);
+        const bodyEl = this.windowRef.nativeWindow.document.body;
+        switch (options.location) {
+            case SkyDynamicComponentLocation.BeforeElement:
+                this.renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
+                break;
+            case SkyDynamicComponentLocation.ElementTop:
+                this.renderer.insertBefore(options.referenceEl, el, options.referenceEl.firstChild);
+                break;
+            case SkyDynamicComponentLocation.ElementBottom:
+                this.renderer.appendChild(options.referenceEl, el);
+                break;
+            case SkyDynamicComponentLocation.BodyTop:
+                this.renderer.insertBefore(bodyEl, el, bodyEl.firstChild);
+                break;
+            default:
+                this.renderer.appendChild(bodyEl, el);
+                break;
+        }
+        return componentRef;
+    }
+    /**
+     * Removes a component ref from the page
+     * @param componentRef Component ref for the component being removed
+     */
+    removeComponent(componentRef) {
+        if (!componentRef) {
+            return;
+        }
+        this.applicationRef.detachView(componentRef.hostView);
+        componentRef.destroy();
+    }
+    getRootNode(componentRef) {
+        // Technique for retrieving the component's root node taken from here:
+        // https://malcoded.com/posts/angular-dynamic-components
+        return componentRef.hostView.rootNodes[0];
+    }
+}
+SkyDynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    // Must be 'any' so that the component is created in the context of its module's injector.
+                    // If set to 'root', the component's dependency injections would only be derived from the root
+                    // injector and may loose context if the component is created within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
+
+/**
+ * This service docks components to specific areas on the page.
+ */
+class SkyDockService {
+    constructor(dynamicComponentService) {
+        this.dynamicComponentService = dynamicComponentService;
+    }
+    /**
+     * Returns all docked items.
+     */
+    get items() {
+        return SkyDockService._items;
+    }
+    /**
+     * Docks a component to the bottom of the page.
+     * @param component The component to dock.
+     * @param config Options that affect the docking action.
+     */
+    insertComponent(component, config) {
+        if (!SkyDockService.dockRef) {
+            this.createDock();
+        }
+        const itemRef = SkyDockService.dockRef.instance.insertComponent(component, config);
+        const item = new SkyDockItem(itemRef.componentRef.instance, itemRef.stackOrder);
+        item.destroyed.subscribe(() => {
+            SkyDockService.dockRef.instance.removeItem(itemRef);
+            SkyDockService._items.splice(SkyDockService._items.indexOf(item), 1);
+            if (SkyDockService._items.length === 0) {
+                this.destroyDock();
+            }
+        });
+        SkyDockService._items.push(item);
+        SkyDockService._items.sort(sortByStackOrder);
+        return item;
+    }
+    /**
+     * Sets options for the positioning and styling of the dock component. Since the dock service is a
+     * singleton instance, these options will be applied to all components inserted into the dock. In
+     * order to create a seperate dock with different options, consumers should provide a different
+     * instance of the dock service.
+     * @param options The options for positioning and styling
+     */
+    setDockOptions(options) {
+        this.options = options;
+    }
+    createDock() {
+        let dockOptions;
+        if (this.options) {
+            let dynamicLocation;
+            switch (this.options.location) {
+                case SkyDockLocation.BeforeElement:
+                    dynamicLocation = SkyDynamicComponentLocation.BeforeElement;
+                    break;
+                case SkyDockLocation.ElementBottom:
+                    dynamicLocation = SkyDynamicComponentLocation.ElementBottom;
+                    break;
+                default:
+                    dynamicLocation = SkyDynamicComponentLocation.BodyTop;
+                    break;
+            }
+            dockOptions = {
+                location: dynamicLocation,
+                referenceEl: this.options.referenceEl,
+            };
+        }
+        SkyDockService.dockRef = this.dynamicComponentService.createComponent(SkyDockComponent, dockOptions);
+        SkyDockService.dockRef.instance.setOptions(this.options);
+    }
+    destroyDock() {
+        this.dynamicComponentService.removeComponent(SkyDockService.dockRef);
+        SkyDockService.dockRef = undefined;
+    }
+}
+SkyDockService._items = [];
+SkyDockService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDockService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDockService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", 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.
+                    // If set to 'root', the component's dependency injections would only be derived from the root
+                    // injector and may loose context if the dock was opened from within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
+
+/**
+ * Provides services required to create dynamic components on the page.
+ * @deprecated The `SkyDynamicComponentService` no longer needs the `SkyDynamicComponentModule`.
+ * The `SkyDynamicComponentModule` can be removed from your project.
+ */
+class SkyDynamicComponentModule {
+}
+SkyDynamicComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDynamicComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentModule });
+SkyDynamicComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDynamicComponentModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+class SkyAppFormat {
+    formatText(format, ...args) {
+        return String(format).replace(/\{(\d+)\}/g, function (match, capture) {
+            return args[parseInt(capture, 10)];
+        });
+    }
+}
+SkyAppFormat.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppFormat.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppFormat, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppFormat, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let idIndex = 0;
+function generateId() {
+    idIndex++;
+    return `sky-id-gen__${idIndex}`;
+}
+/**
+ * Sets the element's `id` attribute to a unique ID. To reference this unique ID on other elements,
+ * such as in a `label` element's `for` attribute, assign this directive to a template reference
+ * variable, then use its `id` property.
+ */
+class SkyIdDirective {
+    constructor(elRef, renderer) {
+        // Generate and apply the ID before the template is rendered
+        // to avoid a changed-after-checked error.
+        const id = generateId();
+        renderer.setAttribute(elRef.nativeElement, 'id', id);
+        this._id = id;
+    }
+    get id() {
+        return this._id;
+    }
+}
+SkyIdDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+SkyIdDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyId]',
+                    exportAs: 'skyId',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
+class SkyIdModule {
+}
+SkyIdModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyIdModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] });
+SkyIdModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyIdModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyIdDirective],
+                    exports: [SkyIdDirective],
+                }]
+        }] });
+
+/**
+ * @deprecated The `SkyLogService` no longer needs the `SkyLogModule`.
+ * The `SkyLogModule` can be removed from your project.
+ */
+class SkyLogModule {
+}
+SkyLogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogModule });
+SkyLogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * @deprecated The `SkyLogService` will be removed in the next major version of `@skyux/core`.
+ */
+class SkyLogService {
+    warn(message, ...optionalParams) {
+        /*istanbul ignore else */
+        if (window.console) {
+            // eslint-disable-next-line prefer-spread,prefer-rest-params
+            window.console.warn.apply(window.console, arguments);
+        }
+    }
+}
+SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @deprecated The `SkyMediaQueryService` no longer needs the `SkyMediaQueryModule`.
+ * The `SkyMediaQueryModule` can be removed from your project.
+ */
+class SkyMediaQueryModule {
+}
+SkyMediaQueryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyMediaQueryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryModule });
+SkyMediaQueryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+class SkyMediaQueryService {
+    constructor(zone) {
+        this.zone = zone;
+        this.currentSubject = new BehaviorSubject(this.current);
+        this._current = SkyMediaBreakpoints.md;
+        this.breakpoints = [
+            {
+                mediaQueryString: SkyMediaQueryService.xs,
+                name: SkyMediaBreakpoints.xs,
+            },
+            {
+                mediaQueryString: SkyMediaQueryService.sm,
+                name: SkyMediaBreakpoints.sm,
+            },
+            {
+                mediaQueryString: SkyMediaQueryService.md,
+                name: SkyMediaBreakpoints.md,
+            },
+            {
+                mediaQueryString: SkyMediaQueryService.lg,
+                name: SkyMediaBreakpoints.lg,
+            },
+        ];
+        this.mediaQueries = [];
+        this.addListeners();
+    }
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return this._current;
+    }
+    ngOnDestroy() {
+        this.removeListeners();
+        this.currentSubject.complete();
+    }
+    /**
+     * Suscribes to screen size changes.
+     * @param listener Specifies a function that is called when breakpoints change.
+     */
+    subscribe(listener) {
+        return this.currentSubject.subscribe({
+            next: (breakpoints) => {
+                listener(breakpoints);
+            },
+        });
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        this.removeListeners();
+        this.currentSubject.complete();
+    }
+    addListeners() {
+        this.mediaQueries = this.breakpoints.map((breakpoint) => {
+            const mq = matchMedia(breakpoint.mediaQueryString);
+            const listener = (event) => {
+                // Run the check outside of Angular's change detection since Angular
+                // does not wrap matchMedia listeners in NgZone.
+                // See: https://blog.assaf.co/angular-2-change-detection-zones-and-an-example/
+                this.zone.run(() => {
+                    if (event.matches) {
+                        this.notifyBreakpointChange(breakpoint.name);
+                    }
+                });
+            };
+            mq.addListener(listener);
+            if (mq.matches) {
+                this.notifyBreakpointChange(breakpoint.name);
+            }
+            return {
+                mediaQueryList: mq,
+                listener,
+            };
+        });
+    }
+    removeListeners() {
+        this.mediaQueries.forEach((mediaQuery) => {
+            mediaQuery.mediaQueryList.removeListener(mediaQuery.listener);
+        });
+        this.mediaQueries = [];
+    }
+    notifyBreakpointChange(breakpoint) {
+        this._current = breakpoint;
+        this.currentSubject.next(breakpoint);
+    }
+}
+/**
+ * The size for the `xs` breakpoint.
+ * @default "(max-width: 767px)"
+ */
+SkyMediaQueryService.xs = '(max-width: 767px)';
+/**
+ * The size for the `sm` breakpoint.
+ * @default "(min-width: 768px) and (max-width: 991px)"
+ */
+SkyMediaQueryService.sm = '(min-width: 768px) and (max-width: 991px)';
+/**
+ * The size for the `md` breakpoint.
+ * @default "(min-width: 992px) and (max-width: 1199px)"
+ */
+SkyMediaQueryService.md = '(min-width: 992px) and (max-width: 1199px)';
+/**
+ * The size for the `lg` breakpoint.
+ * @default "(min-width: 1200px)"
+ */
+SkyMediaQueryService.lg = '(min-width: 1200px)';
+SkyMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMediaQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-core' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_numeric_billions_symbol: { message: 'B' },
+        skyux_numeric_millions_symbol: { message: 'M' },
+        skyux_numeric_thousands_symbol: { message: 'K' },
+        skyux_numeric_trillions_symbol: { message: 'T' },
+    },
+};
+class SkyCoreResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyCoreResourcesModule {
+}
+SkyCoreResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCoreResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] });
+SkyCoreResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyCoreResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCoreResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyCoreResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Provides arguments for the number to format.
+ */
+class NumericOptions {
+    constructor() {
+        /**
+         * Specifies the maximum number of digits after the decimal separator.
+         * @default 1
+         */
+        this.digits = 1;
+        /**
+         * Specifies how to format the number. Options are `currency` or `number`.
+         * @default "number"
+         */
+        this.format = 'number';
+        /**
+         * Specifies the format of the currency.
+         * @default "standard"
+         */
+        this.currencySign = 'standard';
+        /**
+         * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
+         * currency code, the component uses the browser's culture to determine the currency unless your
+         * SPA provides a different culture with `SkyAppLocaleProvider`.
+         * @default "USD"
+         */
+        this.iso = 'USD';
+        /**
+         * Indicates whether to shorten numbers to rounded numbers and abbreviation characters
+         * such as K for thousands, M for millions, B for billions, and T for trillions.
+         */
+        this.truncate = true;
+        /**
+         * Specifies the starting point after which numbers are shortened to rounded numbers
+         * and abbreviation characters.
+         * @default 0
+         */
+        this.truncateAfter = 0;
+    }
+}
+
+/* tslint:disable:no-null-keyword */
+function isNumeric(value) {
+    return !isNaN(value - parseFloat(value));
+}
+function parseIntAutoRadix(text) {
+    const result = parseInt(text, 10);
+    /* istanbul ignore next */
+    if (isNaN(result)) {
+        throw new Error('Invalid integer literal when parsing ' + text);
+    }
+    return result;
+}
+// Need to add the following to classes which contain static methods.
+// See: https://github.com/ng-packagr/ng-packagr/issues/641
+// @dynamic
+class SkyNumberFormatUtility {
+    static formatNumber(locale, value, style, digits, currency = null, currencyAsSymbol = false, currencySign) {
+        if (value == null) {
+            return null;
+        }
+        // Convert strings to numbers
+        value = typeof value === 'string' && isNumeric(value) ? +value : value;
+        if (typeof value !== 'number') {
+            throw Error(`SkyInvalidPipeArgument: '${value}'`);
+        }
+        let minInt = undefined;
+        let minFraction = undefined;
+        let maxFraction = undefined;
+        if (style !== SkyIntlNumberFormatStyle.Currency) {
+            // rely on Intl default for currency
+            minInt = 1;
+            minFraction = 0;
+            maxFraction = 3;
+        }
+        if (digits) {
+            const parts = digits.match(this._NUMBER_FORMAT_REGEXP);
+            if (parts === null) {
+                throw new Error(`${digits} is not a valid digit info for number pipes`);
+            }
+            /* istanbul ignore else */
+            if (parts[1] != null) {
+                // min integer digits
+                minInt = parseIntAutoRadix(parts[1]);
+            }
+            /* istanbul ignore else */
+            if (parts[3] != null) {
+                // min fraction digits
+                minFraction = parseIntAutoRadix(parts[3]);
+            }
+            /* istanbul ignore else */
+            if (parts[5] != null) {
+                // max fraction digits
+                maxFraction = parseIntAutoRadix(parts[5]);
+            }
+        }
+        return SkyIntlNumberFormatter.format(value, locale, style, {
+            minimumIntegerDigits: minInt,
+            minimumFractionDigits: minFraction,
+            maximumFractionDigits: maxFraction,
+            currency: currency,
+            currencyAsSymbol: currencyAsSymbol,
+            currencySign: currencySign,
+        });
+    }
+}
+SkyNumberFormatUtility._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
+
+class SkyNumericService {
+    constructor(resourcesService) {
+        this.resourcesService = resourcesService;
+        this.symbolIndex = [
+            { value: 1e12, label: this.getSymbol('skyux_numeric_trillions_symbol') },
+            { value: 1e9, label: this.getSymbol('skyux_numeric_billions_symbol') },
+            { value: 1e6, label: this.getSymbol('skyux_numeric_millions_symbol') },
+            { value: 1e3, label: this.getSymbol('skyux_numeric_thousands_symbol') },
+        ];
+    }
+    /**
+     * The browser's current locale.
+     * @internal
+     */
+    set currentLocale(value) {
+        this._locale = value;
+    }
+    get currentLocale() {
+        return this._locale || 'en-US';
+    }
+    /**
+     * Shortens with or without symbol (K/M/B/T) depending on value of number.
+     * @param value The number to format.
+     * @param options Format options.
+     */
+    formatNumber(value, options) {
+        var _a;
+        /* tslint:disable-next-line:no-null-keyword */
+        if (isNaN(value) || value === null) {
+            return '';
+        }
+        const decimalPlaceRegExp = /\.0+$|(\.[0-9]*[1-9])0+$/;
+        // Get the symbol for the number after rounding, since rounding could push the number
+        // into a different symbol range.
+        let roundedNumber = this.roundNumber(value, options.digits);
+        const roundedNumberAbs = Math.abs(roundedNumber);
+        let suffix = '';
+        for (let i = 0; i < this.symbolIndex.length; i++) {
+            let symbol = this.symbolIndex[i];
+            if (options.truncate &&
+                roundedNumberAbs >= options.truncateAfter &&
+                roundedNumberAbs >= symbol.value) {
+                roundedNumber = this.roundNumber(value / symbol.value, options.digits);
+                if (Math.abs(roundedNumber) === 1000 && i > 0) {
+                    // Rounding caused the number to cross into the range of the next symbol.
+                    symbol = this.symbolIndex[i - 1];
+                    roundedNumber /= 1000;
+                }
+                suffix = symbol.label;
+                break;
+            }
+        }
+        let output = roundedNumber.toString().replace(decimalPlaceRegExp, '$1') + suffix;
+        this.storeShortenSymbol(output);
+        const locale = options.locale || this.currentLocale;
+        let digits;
+        let isDecimal;
+        // Checks the string entered for format. Using toLowerCase to ignore case.
+        switch ((_a = options.format) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
+            // In a case where a decimal value was not shortened and
+            // the digit input is 2 or higher, it forces 2 digits.
+            // For example, this prevents a value like $15.50 from displaying as $15.5.
+            // Note: This will need to be reviewed if we support currencies with
+            // three decimal digits.
+            case 'currency':
+                isDecimal = value % 1 !== 0;
+                if (options.minDigits) {
+                    digits = `1.${options.minDigits}-${options.digits}`;
+                }
+                else if (isDecimal && options.digits >= 2) {
+                    digits = `1.2-${options.digits}`;
+                }
+                else {
+                    digits = `1.0-${options.digits}`;
+                }
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digits, options.iso, 
+                // Angular 5+ needs a string for this parameter, but Angular 4 needs a boolean.
+                // To support both versions we can supply 'symbol' which will evaluate truthy for Angular 4
+                // and the appropriate string value for Angular 5+.
+                // See: https://angular.io/api/common/CurrencyPipe#parameters
+                'symbol', options.currencySign);
+                break;
+            // The following is a catch-all to ensure that if
+            // anything but currency (or a future option) are entered,
+            // it will be treated like a number.
+            default:
+                // Ensures localization of the number to ensure comma and
+                // decimal separator
+                if (options.minDigits) {
+                    digits = `1.${options.minDigits}-${options.digits}`;
+                }
+                else if (options.truncate) {
+                    digits = `1.0-${options.digits}`;
+                }
+                else {
+                    digits = `1.${options.digits}-${options.digits}`;
+                }
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Decimal, digits);
+                break;
+        }
+        if (options.truncate) {
+            output = this.replaceShortenSymbol(output);
+        }
+        return output;
+    }
+    /**
+     * Rounds a given number
+     *
+     * JS's limitation - numbers bigger than Number.MIN_SAFE_INTEGER or Number.MAX_SAFE_INTEGER
+     * are not guaranteed to be represented or rounded correctly
+     * @param value - value to round
+     * @param precision - what precision to round with, defaults to 0 decimal places
+     */
+    roundNumber(value, precision = 0) {
+        if (precision < 0) {
+            throw new Error('SkyInvalidArgument: precision must be >= 0');
+        }
+        /* tslint:disable-next-line:no-null-keyword */
+        /* Sanity check - ignoring coverage but should not ignore if we make this method public */
+        /* istanbul ignore next */
+        if (isNaN(value) || value === null) {
+            return 0;
+        }
+        const scaledValue = this.scaleNumberByPowerOfTen(value, precision, true);
+        const scaledRoundedValue = Math.round(scaledValue);
+        const unscaledRoundedValue = this.scaleNumberByPowerOfTen(scaledRoundedValue, precision, false);
+        return unscaledRoundedValue;
+    }
+    /**
+     * Scales a given number by a power of 10
+     * @param value - value to scale
+     * @param scalar - 10^scalar
+     * @param scaleUp - whether to increase or decrease the value
+     */
+    scaleNumberByPowerOfTen(value, scalar, scaleUp) {
+        const valueStr = value.toString().toLowerCase();
+        const isExponentFormat = valueStr.includes('e');
+        if (isExponentFormat) {
+            const [base, exp] = valueStr.split('e');
+            const newExp = scaleUp ? Number(exp) + scalar : Number(exp) - scalar;
+            return Number(`${base}e${newExp}`);
+        }
+        else {
+            const e = scaleUp ? 'e' : 'e-';
+            return Number(`${value}${e}${scalar}`);
+        }
+    }
+    /**
+     * Stores the symbol added from shortening to reapply later.
+     * @param value The string to derive the shorten symbol from.
+     */
+    storeShortenSymbol(value) {
+        const symbols = this.symbolIndex.map((s) => s.label);
+        const regexp = new RegExp(symbols.join('|'), 'ig');
+        const match = value.match(regexp);
+        this.shortSymbol = match ? match.toString() : '';
+    }
+    /**
+     * Must have previously called storeShortenSymbol to have something to replace.
+     * Finds the last number in the formatted number, gets the index of the position
+     * after that character and re-inserts the symbol.
+     * Works regardless of currency symbol position.
+     * @param value The string to modify.
+     */
+    replaceShortenSymbol(value) {
+        const result = /(\d)(?!.*\d)/g.exec(value);
+        const pos = result.index + result.length;
+        const output = value.substring(0, pos) + this.shortSymbol + value.substring(pos);
+        return output;
+    }
+    getSymbol(key) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.resourcesService.getStringForLocale({ locale: 'en_US' }, key);
+    }
+}
+SkyNumericService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyNumericService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; } });
+
+/**
+ * Shortens numbers to rounded numbers and abbreviation characters such as K for thousands,
+ * M for millions, B for billions, and T for trillions. The pipe also formats for currency.
+ * Be sure you have a space after the two curly brackets opening the pipe and
+ * a space before the two curly brackets closing the pipe or it will not work.
+ * Usage:
+ * ```
+ * {{ value | skyNumeric(config) }}
+ * ```
+ */
+class SkyNumericPipe {
+    constructor(localeProvider, numericService, changeDetector) {
+        this.localeProvider = localeProvider;
+        this.numericService = numericService;
+        this.changeDetector = changeDetector;
+        this.ngUnsubscribe = new Subject();
+        this.localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.providerLocale = localeInfo.locale;
+            numericService.currentLocale = this.providerLocale;
+            this.changeDetector.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    transform(value, config) {
+        var _a;
+        const newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') +
+            `${value}_${(config === null || config === void 0 ? void 0 : config.locale) || this.providerLocale}`;
+        /* If the value and locale are the same as the last transform then return the previous value
+        instead of reformatting. */
+        if (this.formattedValue && this.cacheKey === newCacheKey) {
+            return this.formattedValue;
+        }
+        const options = new NumericOptions();
+        // The default number of digits is `1`. When truncate is disabled, set digits
+        // to `0` to avoid the unnecessary addition of `.0` at the end of the formatted number.
+        if (config && config.truncate === false && config.digits === undefined) {
+            options.digits = 0;
+        }
+        // If the minimum digits is less than the set maximum digits then throw an error
+        if (config &&
+            config.minDigits &&
+            config.digits &&
+            config.minDigits > config.digits) {
+            throw new Error('The `digits` property must be greater than or equal to the `minDigits` property');
+            // If there is a minimum digits given but not a maximum then default the maximum to the minimum
+        }
+        else if (config && config.minDigits && !config.digits) {
+            options.digits = config.minDigits;
+        }
+        Object.assign(options, config);
+        // Assign properties for proper result caching.
+        this.rawValue = value;
+        this.lastTransformLocale = (_a = config === null || config === void 0 ? void 0 : config.locale) !== null && _a !== void 0 ? _a : this.providerLocale;
+        this.cacheKey = newCacheKey;
+        this.formattedValue = this.numericService.formatNumber(value, options);
+        return this.formattedValue;
+    }
+}
+SkyNumericPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyNumericPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyNumeric',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }, { type: SkyNumericService }, { type: i0.ChangeDetectorRef }]; } });
+
+class SkyNumericModule {
+}
+SkyNumericModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyNumericModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] });
+SkyNumericModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [[SkyI18nModule, SkyCoreResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyNumericModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyNumericPipe],
+                    providers: [SkyNumericPipe],
+                    imports: [SkyI18nModule, SkyCoreResourcesModule],
+                    exports: [SkyNumericPipe],
+                }]
+        }] });
+
+/**
+ * Represents a new overlay instance. It is used to manage the "closed" state of the overlay,
+ * and access any public members on the appended content component instance.
+ */
+class SkyOverlayInstance {
+    constructor(
+    /**
+     * The configuration for the overlay.
+     */
+    config, componentRef) {
+        this.config = config;
+        this.componentRef = componentRef;
+        this._backdropClick = new Subject();
+        this._closed = new Subject();
+        this.componentRef.instance.closed.subscribe(() => {
+            this._closed.next();
+            this._closed.complete();
+            this._backdropClick.complete();
+        });
+        this.componentRef.instance.backdropClick.subscribe(() => {
+            this._backdropClick.next();
+        });
+    }
+    /**
+     * Emits when the overlay is clicked (but not its content).
+     */
+    get backdropClick() {
+        return this._backdropClick.asObservable();
+    }
+    /**
+     * Emits after the overlay is closed.
+     */
+    get closed() {
+        return this._closed.asObservable();
+    }
+    /**
+     * Creates and attaches a component to the overlay.
+     * @param component The component to attach.
+     * @param providers Custom providers to apply to the component.
+     */
+    attachComponent(component, providers) {
+        const componentRef = this.componentRef.instance.attachComponent(component, providers);
+        return componentRef.instance;
+    }
+    /**
+     * Attaches a `TemplateRef` to the overlay.
+     * @param templateRef The `TemplateRef` to attach.
+     * @param context The context to provide to the template.
+     */
+    attachTemplate(templateRef, context) {
+        this.componentRef.instance.attachTemplate(templateRef, context);
+    }
+}
+
+/**
+ * Provides contextual information to each overlay created.
+ * @internal
+ */
+class SkyOverlayContext {
+    constructor(config) {
+        this.config = config;
+    }
+}
+
+/**
+ * Omnibar is 1000.
+ * See: https://github.com/blackbaud/auth-client/blob/master/src/omnibar/omnibar.ts#L139
+ * ---
+ * Modals start their z-indexes at 1040. However, each modal's z-index is a multiple of 10, so it
+ * will be difficult to reliably predict a z-index that will always appear above all other
+ * layers. Starting the z-index for overlays at a number much greater than modals will accommodate
+ * the most reasonable of scenarios.
+ * See: https://github.com/blackbaud/skyux-modals/blob/master/src/app/public/modules/modal/modal-host.service.ts#L22
+ * (NOTE: It should be noted that modals do not use the overlay service, which is something we
+ * should do in the near future to make sure z-indexes are predictable across all component
+ * libraries.)
+ */
+let uniqueZIndex = 5000;
+/**
+ * @internal
+ */
+class SkyOverlayComponent {
+    constructor(changeDetector, resolver, injector, coreAdapter, context, router) {
+        this.changeDetector = changeDetector;
+        this.resolver = resolver;
+        this.injector = injector;
+        this.coreAdapter = coreAdapter;
+        this.context = context;
+        this.router = router;
+        this.wrapperClass = '';
+        this.enablePointerEvents = false;
+        this.showBackdrop = false;
+        this.zIndex = `${++uniqueZIndex}`;
+        this.ngUnsubscribe = new Subject();
+        this._backdropClick = new Subject();
+        this._closed = new Subject();
+    }
+    get backdropClick() {
+        return this._backdropClick.asObservable();
+    }
+    get closed() {
+        return this._closed.asObservable();
+    }
+    ngOnInit() {
+        this.applyConfig(this.context.config);
+        setTimeout(() => {
+            this.addBackdropClickListener();
+        });
+        if (this.context.config.closeOnNavigation) {
+            this.addRouteListener();
+        }
+    }
+    ngOnDestroy() {
+        this.removeRouteListener();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this._backdropClick.complete();
+        this._closed.next();
+        this._closed.complete();
+    }
+    attachComponent(component, providers = []) {
+        this.targetRef.clear();
+        const factory = this.resolver.resolveComponentFactory(component);
+        const injector = Injector.create({
+            providers,
+            parent: this.injector,
+        });
+        const componentRef = this.targetRef.createComponent(factory, undefined, injector);
+        // Run an initial change detection cycle after the component has been created.
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    attachTemplate(templateRef, context) {
+        this.targetRef.clear();
+        return this.targetRef.createEmbeddedView(templateRef, context);
+    }
+    applyConfig(config) {
+        this.wrapperClass = config.wrapperClass || '';
+        this.showBackdrop = config.showBackdrop;
+        this.enablePointerEvents = config.enablePointerEvents;
+        this.changeDetector.markForCheck();
+    }
+    addBackdropClickListener() {
+        fromEvent(window.document, 'click')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            const isChild = this.overlayContentRef.nativeElement.contains(event.target);
+            const isAbove = this.coreAdapter.isTargetAboveElement(event.target, this.overlayRef.nativeElement);
+            /* istanbul ignore else */
+            if (!isChild && !isAbove) {
+                this._backdropClick.next();
+                if (this.context.config.enableClose) {
+                    this._closed.next();
+                }
+            }
+        });
+    }
+    addRouteListener() {
+        /*istanbul ignore else*/
+        if (this.router) {
+            this.routerSubscription = this.router.events.subscribe((event) => {
+                /* istanbul ignore else */
+                if (event instanceof NavigationStart) {
+                    this._closed.next();
+                }
+            });
+        }
+    }
+    removeRouteListener() {
+        if (this.routerSubscription) {
+            this.routerSubscription.unsubscribe();
+            this.routerSubscription = undefined;
+        }
+    }
+}
+SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: i3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyOverlayComponent, selector: "sky-overlay", viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;top:0;right:0;left:0;bottom:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);top:0;right:0;left:0;bottom:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: i3.Router, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { overlayContentRef: [{
+                type: ViewChild,
+                args: ['overlayContentRef', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], overlayRef: [{
+                type: ViewChild,
+                args: ['overlayRef', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], targetRef: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyOverlayModule {
+}
+SkyOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] });
+SkyOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyOverlayComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyOverlayAdapterService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    restrictBodyScroll() {
+        // Create a style element to avoid overwriting any existing inline body styles.
+        const styleElement = this.renderer.createElement('style');
+        const textNode = this.renderer.createText('body { overflow: hidden }');
+        // Apply a `data-` attribute to make unit testing easier.
+        this.renderer.setAttribute(styleElement, 'data-test-selector', 'sky-overlay-restrict-scroll-styles');
+        this.renderer.appendChild(styleElement, textNode);
+        this.renderer.appendChild(document.head, styleElement);
+        if (this.styleElement) {
+            this.destroyStyleElement();
+        }
+        this.styleElement = styleElement;
+    }
+    releaseBodyScroll() {
+        this.destroyStyleElement();
+    }
+    destroyStyleElement() {
+        /* istanbul ignore else */
+        if (this.styleElement.parentElement === document.head) {
+            this.renderer.removeChild(document.head, this.styleElement);
+        }
+    }
+}
+SkyOverlayAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * This service is used to create new overlays.
+ * @dynamic
+ */
+class SkyOverlayService {
+    constructor(applicationRef, componentFactoryResolver, injector, adapter) {
+        this.applicationRef = applicationRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.adapter = adapter;
+    }
+    /**
+     * Creates an empty overlay. Use the returned `SkyOverlayInstance` to append content.
+     * @param config Configuration for the overlay.
+     */
+    create(config) {
+        const settings = this.prepareConfig(config);
+        if (settings.enableScroll === false) {
+            this.adapter.restrictBodyScroll();
+        }
+        const componentRef = this.createOverlay(settings);
+        const instance = new SkyOverlayInstance(settings, componentRef);
+        instance.closed.subscribe(() => {
+            // Only execute the service's close method if the instance still exists.
+            // This is needed to address a race condition if the deprecated instance.close method is used instead.
+            if (SkyOverlayService.overlays.indexOf(instance) > -1) {
+                this.close(instance);
+            }
+        });
+        SkyOverlayService.overlays.push(instance);
+        return instance;
+    }
+    /**
+     * Closes (and destroys) an overlay instance.
+     * @param instance The instance to close.
+     */
+    close(instance) {
+        this.destroyOverlay(instance);
+        this.applicationRef.detachView(instance.componentRef.hostView);
+        instance.componentRef.destroy();
+        // In some cases, Angular keeps dynamically-generated component's nodes in the DOM during
+        // unit tests. This can make querying difficult because the older DOM nodes still exist and
+        // produce inconsistent results.
+        // Angular Material's overlay appears to do the same thing:
+        // https://github.com/angular/components/blob/master/src/cdk/portal/dom-portal-outlet.ts#L143-L145
+        // (Ignoring coverage since this branch will only be hit by consumer unit tests.)
+        const componentElement = instance.componentRef.location.nativeElement;
+        /* istanbul ignore if */
+        if (componentElement.parentNode !== null) {
+            componentElement.parentNode.removeChild(componentElement);
+        }
+    }
+    /**
+     * Closes all overlay instances.
+     */
+    closeAll() {
+        // The `close` event handler for each instance alters the array's length asynchronously,
+        // so the only "safe" index to call is zero.
+        while (SkyOverlayService.overlays.length > 0) {
+            this.close(SkyOverlayService.overlays[0]);
+        }
+    }
+    createOverlay(config) {
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: SkyOverlayContext,
+                    useValue: new SkyOverlayContext(config),
+                },
+            ],
+        });
+        const componentRef = this.componentFactoryResolver
+            .resolveComponentFactory(SkyOverlayComponent)
+            .create(injector);
+        this.applicationRef.attachView(componentRef.hostView);
+        const domElem = componentRef.hostView
+            .rootNodes[0];
+        document.body.appendChild(domElem);
+        return componentRef;
+    }
+    prepareConfig(config) {
+        const defaults = {
+            closeOnNavigation: true,
+            enableClose: false,
+            enablePointerEvents: false,
+            enableScroll: true,
+            showBackdrop: false,
+            wrapperClass: '',
+        };
+        return Object.assign(Object.assign({}, defaults), config);
+    }
+    destroyOverlay(instance) {
+        SkyOverlayService.overlays.splice(SkyOverlayService.overlays.indexOf(instance), 1);
+        if (instance.config.enableScroll === false) {
+            // Only release the body scroll if no other overlay wishes it to be disabled.
+            const anotherOverlayDisablesScroll = SkyOverlayService.overlays.some((o) => !o.config.enableScroll);
+            if (!anotherOverlayDisablesScroll) {
+                this.adapter.releaseBodyScroll();
+            }
+        }
+    }
+}
+SkyOverlayService.overlays = [];
+SkyOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyOverlayAdapterService }]; } });
+
+class SkyPercentPipe {
+    constructor(localeProvider) {
+        this.localeProvider = localeProvider;
+        this.defaultFormat = '1.0-2';
+        this.defaultLocale = 'en-US';
+        this.ngUnsubscribe = new Subject();
+        this.localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.defaultLocale = localeInfo.locale;
+            this.updateFormattedValue();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    transform(value, format, locale) {
+        this.value = value;
+        this.format = format;
+        this.locale = locale;
+        this.updateFormattedValue();
+        return this.formattedValue;
+    }
+    updateFormattedValue() {
+        const locale = this.locale || this.defaultLocale;
+        const format = this.format || this.defaultFormat;
+        this.formattedValue = SkyNumberFormatUtility.formatNumber(locale, this.value, SkyIntlNumberFormatStyle.Percent, format);
+    }
+}
+SkyPercentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyPercentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyPercent',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }]; } });
+
+class SkyPercentPipeModule {
+}
+SkyPercentPipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPercentPipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] });
+SkyPercentPipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [[CommonModule, SkyCoreResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPercentPipe],
+                    providers: [SkyPercentPipe],
+                    imports: [CommonModule, SkyCoreResourcesModule],
+                    exports: [SkyPercentPipe],
+                }]
+        }] });
+
+function notifySubscribers(subscribers, item) {
+    for (const subscriber of subscribers) {
+        subscriber.next(item);
+    }
+}
+class SkyScrollableHostService {
+    constructor(mutationObserverSvc, windowRef) {
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.windowRef = windowRef;
+    }
+    /**
+     * Returns the given element's current scrollable host
+     * @param elementRef The element whose scrollable host is being requested
+     * @returns The current scrollable host
+     */
+    getScrollableHost(elementRef) {
+        return this.findScrollableHost(elementRef.nativeElement);
+    }
+    /**
+     * Returns an observable which emits the given element's current scrollable host
+     * @param elementRef The element whose scrollable host is being requested
+     * @param completionObservable An observable which alerts the internal observers that they should complete
+     * @returns An observable which emits the current scrollable host
+     * @internal
+     */
+    watchScrollableHost(elementRef) {
+        const subscribers = [];
+        let parentMutationObserver;
+        let documentHiddenElementMutationObserver;
+        return new Observable((subscriber) => {
+            subscribers.push(subscriber);
+            let scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            if (subscribers.length === 1) {
+                parentMutationObserver = this.mutationObserverSvc.create(() => {
+                    const newScrollableHost = this.findScrollableHost(elementRef.nativeElement);
+                    if (newScrollableHost !== scrollableHost &&
+                        elementRef.nativeElement.offsetParent) {
+                        scrollableHost = newScrollableHost;
+                        this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                        notifySubscribers(subscribers, scrollableHost);
+                    }
+                });
+                this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                documentHiddenElementMutationObserver = this.mutationObserverSvc.create(() => {
+                    if (!elementRef.nativeElement.offsetParent) {
+                        scrollableHost = undefined;
+                        this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                        notifySubscribers(subscribers, scrollableHost);
+                    }
+                });
+                this.observeDocumentHiddenElementChanges(documentHiddenElementMutationObserver);
+            }
+            subscriber.next(scrollableHost);
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* sanity check */
+                /* istanbul ignore else */
+                if (subIndex >= 0) {
+                    subscribers.splice(subIndex, 1);
+                }
+                if (subscribers.length === 0) {
+                    documentHiddenElementMutationObserver.disconnect();
+                    parentMutationObserver.disconnect();
+                }
+            });
+        });
+    }
+    /**
+     * Returns an observable which emits whenever the element's scrollable host emits a scroll event. The observable will always emit the scroll events from the elements current scrollable host and will update based on any scrollable host changes. The observable will also emit once whenever the scrollable host changes.
+     * @param elementRef The element whose scrollable host scroll events are being requested
+     * @param completionObservable An observable which alerts the internal observers that they should complete
+     * @returns An observable which emits when the elements scrollable host is scrolled or is changed
+     */
+    watchScrollableHostScrollEvents(elementRef) {
+        const subscribers = [];
+        let scrollableHost;
+        let newScrollableHostObservable = new Subject();
+        let scrollableHostSubscription;
+        let scrollEventSubscription;
+        return new Observable((subscriber) => {
+            subscribers.push(subscriber);
+            if (subscribers.length === 1) {
+                scrollableHostSubscription = this.watchScrollableHost(elementRef).subscribe((newScrollableHost) => {
+                    newScrollableHostObservable.next();
+                    newScrollableHostObservable.complete();
+                    if (scrollableHost && scrollableHost !== newScrollableHost) {
+                        notifySubscribers(subscribers);
+                    }
+                    scrollableHost = newScrollableHost;
+                    newScrollableHostObservable = new Subject();
+                    if (newScrollableHost) {
+                        scrollEventSubscription = fromEvent(newScrollableHost, 'scroll')
+                            .pipe(takeUntil(newScrollableHostObservable))
+                            .subscribe(() => {
+                            notifySubscribers(subscribers);
+                        });
+                    }
+                });
+            }
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* sanity check */
+                /* istanbul ignore else */
+                if (subIndex >= 0) {
+                    subscribers.splice(subIndex, 1);
+                }
+                if (subscribers.length === 0) {
+                    scrollableHostSubscription.unsubscribe();
+                    scrollEventSubscription.unsubscribe();
+                    newScrollableHostObservable.complete();
+                }
+            });
+        });
+    }
+    findScrollableHost(element) {
+        const regex = /(auto|scroll)/;
+        const windowObj = this.windowRef.nativeWindow;
+        const bodyObj = windowObj.document.body;
+        /* Sanity check */
+        if (!element) {
+            return windowObj;
+        }
+        let style = windowObj.getComputedStyle(element);
+        let parent = element;
+        do {
+            parent = parent.parentNode;
+            /* Sanity check for if this function is called for an element which has been removed from the DOM */
+            if (!(parent instanceof HTMLElement)) {
+                return windowObj;
+            }
+            style = windowObj.getComputedStyle(parent);
+        } while (!regex.test(style.overflow) &&
+            !regex.test(style.overflowY) &&
+            parent !== bodyObj);
+        if (parent === bodyObj) {
+            return windowObj;
+        }
+        return parent;
+    }
+    observeDocumentHiddenElementChanges(mutationObserver) {
+        mutationObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'style', 'hidden'],
+            childList: true,
+            subtree: true,
+        });
+    }
+    observeForScrollableHostChanges(element, mutationObserver) {
+        mutationObserver.disconnect();
+        if (element instanceof HTMLElement) {
+            mutationObserver.observe(element, {
+                attributes: true,
+                attributeFilter: ['class', 'style'],
+                childList: true,
+                subtree: true,
+            });
+        }
+        else {
+            mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['class', 'style'],
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+}
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: MutationObserverService }, { type: SkyAppWindowRef }]; } });
+
+/**
+ * Provides a method for setting a formatted title on the current window.
+ */
+class SkyAppTitleService {
+    constructor(title) {
+        this.title = title;
+    }
+    /**
+     * Sets the title on the current window.
+     * @param args An array of title parts. The parts will be concatenated with a hyphen between
+     * each part.
+     */
+    setTitle(args) {
+        if (args && args.titleParts) {
+            this.title.setTitle(args.titleParts.join(' - '));
+        }
+    }
+}
+SkyAppTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyAppTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyAppTitleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Title }]; } });
+
+class SkyUIConfigService {
+    getConfig(key, defaultConfig) {
+        return of(defaultConfig);
+    }
+    /* istanbul ignore next */
+    setConfig(key, value) {
+        return of({});
+    }
+}
+SkyUIConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyUIConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyUIConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyViewkeeperHostOptions {
+}
+SkyViewkeeperHostOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperHostOptions.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperHostOptions });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperHostOptions, decorators: [{
+            type: Injectable
+        }] });
+
+const CLS_VIEWKEEPER_FIXED = 'sky-viewkeeper-fixed';
+const EVT_AFTER_VIEWKEEPER_SYNC = 'afterViewkeeperSync';
+let styleEl;
+let nextIdIndex;
+function ensureStyleEl() {
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        const css = document.createTextNode(`
+.${CLS_VIEWKEEPER_FIXED} {
+  position: fixed !important;
+  z-index: 999;
+  opacity: 0.95;
+  overflow: hidden;
+}
+
+.sky-theme-modern .${CLS_VIEWKEEPER_FIXED} {
+  box-shadow: 0px 1px 8px -1px rgba(0, 0, 0, 0.3);
+  opacity: initial;
+}
+`);
+        styleEl.appendChild(css);
+        document.head.appendChild(styleEl);
+    }
+}
+function nextId() {
+    nextIdIndex = (nextIdIndex || 0) + 1;
+    return 'viewkeeper-' + nextIdIndex;
+}
+function getOffset(el, scrollableHost) {
+    const rect = el.getBoundingClientRect();
+    const parent = scrollableHost ? scrollableHost : document.documentElement;
+    return {
+        top: rect.top + parent.scrollTop,
+        left: rect.left + parent.scrollLeft,
+    };
+}
+function px(value) {
+    let pxValue = value ? value.toString() : '';
+    if (typeof value === 'number') {
+        pxValue = value + 'px';
+    }
+    return pxValue;
+}
+function setElPosition(el, left, top, width, marginTop) {
+    el.style.top = px(top);
+    el.style.left = px(left);
+    el.style.marginTop = px(marginTop);
+    /*istanbul ignore else*/
+    /* sanity check */
+    if (width !== null) {
+        el.style.width = px(width);
+    }
+}
+function getHeightWithMargin(el) {
+    const computedStyle = getComputedStyle(el);
+    return (el.offsetHeight +
+        parseInt(computedStyle.marginTop, 10) +
+        parseInt(computedStyle.marginBottom, 10));
+}
+function createCustomEvent(name) {
+    const evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(name, false, false, undefined);
+    return evt;
+}
+class SkyViewkeeper {
+    constructor(options) {
+        options = options || /* istanbul ignore next */ {};
+        this.setWidth = options.setWidth;
+        this.id = nextId();
+        this.el = options.el;
+        this.boundaryEl = options.boundaryEl;
+        this.scrollableHost = options.scrollableHost;
+        this.verticalOffset = options.verticalOffset || 0;
+        this.verticalOffsetEl = options.verticalOffsetEl;
+        this.viewportMarginTop = options.viewportMarginTop || 0;
+        this.syncElPositionHandler = () => this.syncElPosition();
+        if (this.verticalOffsetEl) {
+            this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
+        }
+        window.addEventListener('scroll', this.syncElPositionHandler, true);
+        window.addEventListener('resize', this.syncElPositionHandler);
+        window.addEventListener('orientationchange', this.syncElPositionHandler);
+        ensureStyleEl();
+        this.syncElPosition();
+    }
+    set viewportMarginTop(margin) {
+        this._viewportMarginTop = margin;
+    }
+    get viewportMarginTop() {
+        if (this.scrollableHost) {
+            return 0;
+        }
+        else {
+            return this._viewportMarginTop;
+        }
+    }
+    syncElPosition() {
+        const verticalOffset = this.calculateVerticalOffset();
+        // When the element isn't visible, its size can't be calculated, so don't attempt syncing position in this case.
+        if (this.el.offsetWidth === 0 && this.el.offsetHeight === 0) {
+            return;
+        }
+        const boundaryInfo = this.getBoundaryInfo();
+        const fixedStyles = this.getFixedStyles(boundaryInfo, verticalOffset);
+        const doFixEl = this.shouldFixEl(boundaryInfo, verticalOffset);
+        if (this.needsUpdating(doFixEl, fixedStyles)) {
+            if (doFixEl) {
+                this.fixEl(boundaryInfo, fixedStyles);
+            }
+            else {
+                this.unfixEl();
+            }
+        }
+        const evt = createCustomEvent(EVT_AFTER_VIEWKEEPER_SYNC);
+        this.el.dispatchEvent(evt);
+    }
+    destroy() {
+        if (!this.isDestroyed) {
+            window.removeEventListener('scroll', this.syncElPositionHandler, true);
+            window.removeEventListener('resize', this.syncElPositionHandler);
+            window.removeEventListener('orientationchange', this.syncElPositionHandler);
+            this.unfixEl();
+            if (this.verticalOffsetEl) {
+                this.verticalOffsetEl.removeEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
+            }
+            this.el = this.boundaryEl = this.verticalOffsetEl = undefined;
+            this.isDestroyed = true;
+        }
+    }
+    getSpacerId() {
+        return this.id + '-spacer';
+    }
+    unfixEl() {
+        const spacerEl = document.getElementById(this.getSpacerId());
+        if (spacerEl) {
+            spacerEl.parentElement.removeChild(spacerEl);
+        }
+        this.el.classList.remove(CLS_VIEWKEEPER_FIXED);
+        this.currentElFixedLeft =
+            this.currentElFixedTop =
+                this.currentElFixedWidth =
+                    undefined;
+        let width;
+        if (this.setWidth) {
+            width = 'auto';
+        }
+        setElPosition(this.el, '', '', width, '');
+    }
+    calculateVerticalOffset() {
+        let offset = this.verticalOffset;
+        if (this.verticalOffsetEl) {
+            const verticalOffsetElTopStyle = this.verticalOffsetEl.style.top;
+            const verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
+            offset += this.verticalOffsetEl.offsetHeight + verticalOffsetElTop;
+        }
+        else if (this.scrollableHost) {
+            offset += this.scrollableHost.getBoundingClientRect().top;
+        }
+        return offset;
+    }
+    shouldFixEl(boundaryInfo, verticalOffset) {
+        let anchorTop;
+        if (boundaryInfo.spacerEl) {
+            anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
+        }
+        else {
+            anchorTop = getOffset(this.el, this.scrollableHost).top;
+        }
+        const doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop >
+            anchorTop;
+        return doFixEl;
+    }
+    getFixedStyles(boundaryInfo, verticalOffset) {
+        // If the element needs to be fixed, this will calculate its position.  The position
+        // will be 0 (fully visible) unless the user is scrolling the boundary out of view.
+        // In that case, the element should begin to scroll out of view with the
+        // rest of the boundary by setting its top position to a negative value.
+        const elFixedTop = Math.min(boundaryInfo.boundaryBottom -
+            boundaryInfo.elHeight -
+            boundaryInfo.scrollTop, verticalOffset);
+        const elFixedWidth = boundaryInfo.boundaryEl.getBoundingClientRect().width;
+        const elFixedLeft = boundaryInfo.boundaryOffset.left - boundaryInfo.scrollLeft;
+        return {
+            elFixedLeft,
+            elFixedTop,
+            elFixedWidth,
+        };
+    }
+    needsUpdating(doFixEl, fixedStyles) {
+        if ((doFixEl &&
+            this.currentElFixedLeft === fixedStyles.elFixedLeft &&
+            this.currentElFixedTop === fixedStyles.elFixedTop &&
+            this.currentElFixedWidth === fixedStyles.elFixedWidth) ||
+            (!doFixEl &&
+                !(this.currentElFixedLeft !== undefined &&
+                    this.currentElFixedLeft !== null))) {
+            // The element is either currently fixed and its position and width do not need
+            // to change, or the element is not currently fixed and does not need to be fixed.
+            // No changes are needed.
+            return false;
+        }
+        return true;
+    }
+    fixEl(boundaryInfo, fixedStyles) {
+        const el = this.el;
+        /* istanbul ignore else */
+        /* sanity check */
+        if (!boundaryInfo.spacerEl) {
+            const spacerHeight = boundaryInfo.elHeight;
+            const spacerEl = document.createElement('div');
+            spacerEl.id = boundaryInfo.spacerId;
+            spacerEl.style.height = px(spacerHeight);
+            el.parentNode.insertBefore(spacerEl, el.nextSibling);
+        }
+        el.classList.add(CLS_VIEWKEEPER_FIXED);
+        this.currentElFixedTop = fixedStyles.elFixedTop;
+        this.currentElFixedLeft = fixedStyles.elFixedLeft;
+        this.currentElFixedWidth = fixedStyles.elFixedWidth;
+        let width;
+        if (this.setWidth) {
+            width = fixedStyles.elFixedWidth;
+        }
+        setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, this.viewportMarginTop);
+    }
+    getBoundaryInfo() {
+        const spacerId = this.getSpacerId();
+        const spacerEl = document.getElementById(spacerId);
+        const boundaryEl = this.boundaryEl;
+        const boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
+        const boundaryTop = boundaryOffset.top;
+        const boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
+        const scrollLeft = this.scrollableHost
+            ? this.scrollableHost.scrollLeft
+            : document.documentElement.scrollLeft;
+        const scrollTop = this.scrollableHost
+            ? this.scrollableHost.scrollTop
+            : document.documentElement.scrollTop;
+        const elHeight = getHeightWithMargin(this.el);
+        return {
+            boundaryBottom,
+            boundaryOffset,
+            boundaryEl,
+            elHeight,
+            scrollLeft,
+            scrollTop,
+            spacerId,
+            spacerEl,
+        };
+    }
+}
+
+/**
+ * Provides methods for creating and destroying viewkeeper instances.
+ */
+class SkyViewkeeperService {
+    constructor(hostOptions) {
+        this.hostOptions = hostOptions;
+    }
+    /**
+     *
+     * @param options Creates a viewkeeper instance, applying host options where applicable.
+     */
+    create(options) {
+        options = Object.assign({}, this.hostOptions || {}, options);
+        return new SkyViewkeeper(options);
+    }
+    /**
+     * Destroys a viewkeeper instance.
+     * @param vk Viewkeeper instance to destroy.
+     */
+    destroy(vk) {
+        vk.destroy();
+    }
+}
+SkyViewkeeperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyViewkeeperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: SkyViewkeeperHostOptions, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+class SkyViewkeeperDirective {
+    constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
+        this.el = el;
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.viewkeeperSvc = viewkeeperSvc;
+        this.scrollableHostService = scrollableHostService;
+        this.viewkeepers = [];
+        this.scrollableHostWatchUnsubscribe = undefined;
+    }
+    set skyViewkeeper(value) {
+        this._skyViewkeeper = value;
+        this.detectElements();
+    }
+    get skyViewkeeper() {
+        return this._skyViewkeeper;
+    }
+    ngOnInit() {
+        this.observer = this.mutationObserverSvc.create(() => this.detectElements());
+        this.observer.observe(this.el.nativeElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+        this.destroyViewkeepers();
+    }
+    destroyViewkeepers() {
+        for (const viewkeeper of this.viewkeepers) {
+            this.viewkeeperSvc.destroy(viewkeeper);
+        }
+        this.viewkeepers = [];
+    }
+    getViewkeeperEls() {
+        let viewkeeperEls;
+        if (this.skyViewkeeper) {
+            viewkeeperEls = [];
+            for (const item of this.skyViewkeeper) {
+                const matchingEls = Array.from(this.el.nativeElement.querySelectorAll(item));
+                viewkeeperEls = [...viewkeeperEls, ...matchingEls];
+            }
+        }
+        return viewkeeperEls;
+    }
+    viewkeeperElsChanged(viewkeeperEls) {
+        if (!viewkeeperEls !== !this.currentViewkeeperEls) {
+            return true;
+        }
+        if (viewkeeperEls && this.currentViewkeeperEls) {
+            if (viewkeeperEls.length !== this.currentViewkeeperEls.length) {
+                return true;
+            }
+            for (let i = 0, n = viewkeeperEls.length; i < n; i++) {
+                if (viewkeeperEls[i] !== this.currentViewkeeperEls[i]) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    detectElements() {
+        const viewkeeperEls = this.getViewkeeperEls();
+        if (this.viewkeeperElsChanged(viewkeeperEls)) {
+            if (this.scrollableHostWatchUnsubscribe) {
+                this.scrollableHostWatchUnsubscribe.next();
+                this.scrollableHostWatchUnsubscribe = new Subject();
+            }
+            else {
+                this.scrollableHostWatchUnsubscribe = new Subject();
+            }
+            this.scrollableHostService
+                .watchScrollableHost(this.el)
+                .pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
+                .subscribe((scrollableHost) => {
+                this.destroyViewkeepers();
+                let previousViewkeeperEl;
+                for (const viewkeeperEl of viewkeeperEls) {
+                    this.viewkeepers.push(this.viewkeeperSvc.create({
+                        boundaryEl: this.el.nativeElement,
+                        scrollableHost: scrollableHost instanceof HTMLElement
+                            ? scrollableHost
+                            : undefined,
+                        el: viewkeeperEl,
+                        setWidth: true,
+                        verticalOffsetEl: previousViewkeeperEl,
+                    }));
+                    previousViewkeeperEl = viewkeeperEl;
+                }
+            });
+            this.currentViewkeeperEls = viewkeeperEls;
+        }
+    }
+}
+SkyViewkeeperDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: MutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyViewkeeperDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyViewkeeper]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: MutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { skyViewkeeper: [{
+                type: Input
+            }] } });
+
+class SkyViewkeeperModule {
+}
+SkyViewkeeperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyViewkeeperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] });
+SkyViewkeeperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyViewkeeperDirective],
+                    exports: [SkyViewkeeperDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyScrollableHostService, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
+//# sourceMappingURL=skyux-core.mjs.map