@skyux/core 8.6.0 → 9.0.0-alpha.0

package/fesm2022/skyux-core.mjs

@@ -0,0 +1,3858 @@
+import * as i0 from '@angular/core';
+import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, createComponent, inject, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Subject, fromEvent, ReplaySubject, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
+import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
+import * as i1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
+import * as i4 from '@angular/router';
+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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+var SkyMediaBreakpoints;
+(function (SkyMediaBreakpoints) {
+    /**
+     * Screen widths of 767px or less.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["xs"] = 1] = "xs";
+    /**
+     * Screen widths of 768px to 991px.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["sm"] = 2] = "sm";
+    /**
+     * Screen widths of 992px to 1199px.
+     */
+    SkyMediaBreakpoints[SkyMediaBreakpoints["md"] = 3] = "md";
+    /**
+     * 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 {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    /**
+     * Set the responsive container CSS class for a given element.
+     *
+     * @param elementRef - The element that will receive 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) {
+        if (!elementRef) {
+            return false;
+        }
+        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
+     * receive focus if no focusable children are found.
+     * @param focusOnContainerIfNoChildrenFound - It set to `true`, the container will
+     * receive focus if no focusable children are found.
+     */
+    getFocusableChildrenAndApplyFocus(elementRef, containerSelector, focusOnContainerIfNoChildrenFound = false) {
+        const containerElement = elementRef.nativeElement.querySelector(containerSelector);
+        if (containerElement) {
+            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) {
+        if (!element) {
+            return [];
+        }
+        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.
+                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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * Fires when the affixed element's offset changes.
+     */
+    get offsetChange() {
+        return this.#offsetChangeObs;
+    }
+    /**
+     * 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.#overflowScrollObs;
+    }
+    /**
+     * Fires when the placement value changes. A `null` value indicates that a suitable
+     * placement could not be found.
+     */
+    get placementChange() {
+        return this.#placementChangeObs;
+    }
+    get #config() {
+        return this.#_config;
+    }
+    set #config(value) {
+        const merged = {
+            ...DEFAULT_AFFIX_CONFIG,
+            ...value,
+        };
+        // Make sure none of the values are undefined.
+        let key;
+        for (key in merged) {
+            if (merged[key] === undefined) {
+                merged[key] = DEFAULT_AFFIX_CONFIG[key];
+            }
+        }
+        this.#_config = merged;
+    }
+    #affixedElement;
+    #baseElement;
+    #currentOffset;
+    #currentPlacement;
+    #offsetChange;
+    #offsetChangeObs;
+    #overflowParents = [];
+    #overflowScroll;
+    #overflowScrollObs;
+    #placementChange;
+    #placementChangeObs;
+    #renderer;
+    #resizeListener;
+    #scrollListeners;
+    #_config = DEFAULT_AFFIX_CONFIG;
+    constructor(affixedElement, renderer) {
+        this.#affixedElement = affixedElement;
+        this.#renderer = renderer;
+        this.#offsetChange = new Subject();
+        this.#overflowScroll = new Subject();
+        this.#placementChange = new Subject();
+        this.#offsetChangeObs = this.#offsetChange.asObservable();
+        this.#overflowScrollObs = this.#overflowScroll.asObservable();
+        this.#placementChangeObs = this.#placementChange.asObservable();
+    }
+    /**
+     * 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();
+        }
+    }
+    getConfig() {
+        return this.#config;
+    }
+    /**
+     * 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();
+    }
+    #affix() {
+        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;
+        const autoFitOverflowOffset = this.#config.autoFitOverflowOffset || {
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+        };
+        if (this.#config.position === 'absolute') {
+            autoFitOverflowOffset.top =
+                (autoFitOverflowOffset.top || 0) + window.scrollY;
+        }
+        do {
+            offset = this.#getPreferredOffset(placement);
+            isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, 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 {
+                this.#notifyPlacementChange(null);
+            }
+            return offset;
+        }
+        if (this.#config.enableAutoFit) {
+            this.#notifyPlacementChange(null);
+        }
+        // No suitable placement was found, so revert to preferred placement.
+        return this.#getPreferredOffset(this.#config.placement);
+    }
+    #getRect(baseElement) {
+        const baseDomRect = baseElement.getBoundingClientRect();
+        const baseRect = {
+            top: baseDomRect.top,
+            bottom: baseDomRect.bottom,
+            left: baseDomRect.left,
+            right: baseDomRect.right,
+            width: baseDomRect.width,
+            height: baseDomRect.height,
+        };
+        if (this.#config.position === 'absolute') {
+            baseRect.top += window.scrollY;
+            baseRect.bottom = baseRect.top + baseDomRect.height;
+        }
+        return baseRect;
+    }
+    #getPreferredOffset(placement) {
+        if (!this.#baseElement) {
+            return { top: 0, left: 0, bottom: 0, right: 0 };
+        }
+        const affixedRect = this.#getRect(this.#affixedElement);
+        const baseRect = this.#getRect(this.#baseElement);
+        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;
+            }
+        }
+        const offset = { top, left, bottom: 0, right: 0 };
+        if (enableAutoFit) {
+            const adjustments = this.#adjustOffsetToOverflowParent({ top, left }, placement, this.#baseElement);
+            offset.top = adjustments.top;
+            offset.left = adjustments.left;
+        }
+        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, baseElement) {
+        const parent = this.#getAutoFitContextParent();
+        const parentOffset = getElementOffset(parent, this.#config.autoFitOverflowOffset);
+        const affixedRect = this.#getRect(this.#affixedElement);
+        const baseRect = this.#getRect(baseElement);
+        // A pixel value representing the leeway between the edge of the overflow parent and the edge
+        // of the base element before it disappears from view.
+        // If the visible portion of the base element is less than this pixel value, the auto-fit
+        // functionality attempts to find another placement.
+        const defaultPixelTolerance = 40;
+        let pixelTolerance;
+        const originalOffsetTop = offset.top;
+        const originalOffsetLeft = offset.left;
+        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 ?? undefined;
+            this.#placementChange.next({
+                placement,
+            });
+        }
+    }
+    #reset() {
+        this.#removeScrollListeners();
+        this.#removeResizeListener();
+        this.#overflowParents = [];
+        this.#config =
+            this.#baseElement =
+                this.#currentPlacement =
+                    this.#currentOffset =
+                        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() {
+        if (!this.#baseElement) {
+            return false;
+        }
+        const baseRect = this.#baseElement.getBoundingClientRect();
+        return isOffsetPartiallyVisibleWithinParent(this.#getImmediateOverflowParent(), {
+            top: baseRect.top,
+            left: baseRect.left,
+            right: baseRect.right,
+            bottom: 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 {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    /**
+     * Creates an instance of [[SkyAffixer]].
+     * @param affixed The element to be affixed.
+     */
+    createAffixer(affixed) {
+        return new SkyAffixer(affixed.nativeElement, this.#renderer);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    #affixer;
+    #affixService;
+    #elementRef;
+    #ngUnsubscribe;
+    constructor(elementRef, 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.#elementRef = elementRef;
+        this.#affixService = affixService;
+    }
+    ngOnInit() {
+        this.#affixer = this.#affixService.createAffixer(this.#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));
+        this.#updateAlignment();
+    }
+    ngOnChanges(changes) {
+        /* istanbul ignore else */
+        if (changes['affixAutoFitContext'] ||
+            changes['affixAutoFitOverflowOffset'] ||
+            changes['affixEnableAutoFit'] ||
+            changes['affixHorizontalAlignment'] ||
+            changes['affixIsSticky'] ||
+            changes['affixPlacement'] ||
+            changes['affixPosition'] ||
+            changes['affixVerticalAlignment']) {
+            this.#updateAlignment();
+        }
+    }
+    ngOnDestroy() {
+        this.affixOffsetChange.complete();
+        this.affixOverflowScroll.complete();
+        this.affixPlacementChange.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        /*istanbul ignore else*/
+        if (this.#affixer) {
+            this.#affixer.destroy();
+            this.#affixer = undefined;
+        }
+    }
+    #updateAlignment() {
+        if (this.skyAffixTo && this.#affixer) {
+            this.#affixer.affixTo(this.skyAffixTo, {
+                autoFitContext: this.affixAutoFitContext,
+                autoFitOverflowOffset: this.affixAutoFitOverflowOffset,
+                enableAutoFit: this.affixEnableAutoFit,
+                horizontalAlignment: this.affixHorizontalAlignment,
+                isSticky: this.affixIsSticky,
+                placement: this.affixPlacement,
+                position: this.affixPosition,
+                verticalAlignment: this.affixVerticalAlignment,
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixPosition: "affixPosition", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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
+            }], affixPosition: [{
+                type: Input
+            }], affixVerticalAlignment: [{
+                type: Input
+            }], affixOffsetChange: [{
+                type: Output
+            }], affixOverflowScroll: [{
+                type: Output
+            }], affixPlacementChange: [{
+                type: Output
+            }] } });
+
+class SkyAffixModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixModule, declarations: [SkyAffixDirective], imports: [CommonModule], exports: [SkyAffixDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAffixModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [SkyAffixDirective],
+                    declarations: [SkyAffixDirective],
+                }]
+        }] });
+
+/**
+ * @internal
+ * An API to provide default Angular component input values to child components.
+ */
+class SkyDefaultInputProvider {
+    #props = {};
+    setValue(componentName, inputName, value) {
+        const subject = this.#getSubject(componentName, inputName);
+        subject.next(value);
+    }
+    getValue(componentName, inputName) {
+        const test = this.#getSubject(componentName, inputName);
+        return test.asObservable();
+    }
+    #getSubject(componentName, inputName) {
+        const componentSubjects = this.#props[componentName] || {};
+        const inputSubject = componentSubjects[inputName];
+        if (!inputSubject) {
+            componentSubjects[inputName] = new ReplaySubject(1);
+            this.#props[componentName] = componentSubjects;
+        }
+        return componentSubjects[inputName];
+    }
+}
+
+/**
+ * Represents a single item added to the dock.
+ */
+class SkyDockItem {
+    /**
+     * An event that emits when the item is removed from the dock.
+     */
+    get destroyed() {
+        return this.#destroyedObs;
+    }
+    #destroyed = new Subject();
+    #destroyedObs;
+    /**
+     * @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.#destroyedObs = 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 = {}));
+
+/**
+ * @internal
+ */
+class SkyMutationObserverService {
+    create(callback) {
+        return new MutationObserver(callback);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMutationObserverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMutationObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDockDomAdapterService {
+    #currentDockHeight;
+    #mutationSvc;
+    #ngUnsubscribe = new Subject();
+    #observer;
+    #renderer;
+    #styleElement;
+    constructor(mutationSvc, rendererFactory) {
+        this.#mutationSvc = mutationSvc;
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    ngOnDestroy() {
+        if (this.#observer) {
+            this.#observer.disconnect();
+        }
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        if (this.#styleElement) {
+            this.#destroyStyleElement();
+        }
+        this.#currentDockHeight = 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.#mutationSvc.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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockDomAdapterService, deps: [{ token: SkyMutationObserverService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockDomAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { 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 {
+    #changeDetector;
+    #domAdapter;
+    #elementRef;
+    #injector;
+    #itemRefs = [];
+    #options;
+    constructor(changeDetector, elementRef, injector, domAdapter) {
+        this.#changeDetector = changeDetector;
+        this.#elementRef = elementRef;
+        this.#injector = injector;
+        this.#domAdapter = domAdapter;
+    }
+    insertComponent(component, config = {}) {
+        /*istanbul ignore if: untestable*/
+        if (!this.target) {
+            throw Error('[SkyDockComponent] Could not insert the component because the target element could not be found.');
+        }
+        const injector = Injector.create({
+            providers: config.providers || [],
+            parent: this.#injector,
+        });
+        const componentRef = this.target.createComponent(component, {
+            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) {
+        /*istanbul ignore if: untestable*/
+        if (!this.target) {
+            throw Error('[SkyDockComponent] Could not remove the item because the target element could not be found.');
+        }
+        const viewRef = item.componentRef.hostView;
+        this.target.remove(this.target.indexOf(viewRef));
+        const found = this.#itemRefs.find((i) => i.componentRef.hostView === viewRef);
+        if (found) {
+            this.#itemRefs.splice(this.#itemRefs.indexOf(found), 1);
+        }
+    }
+    setOptions(options) {
+        this.#options = options;
+        switch (this.#options?.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 (this.#options?.zIndex) {
+            this.#domAdapter.setZIndex(this.#options.zIndex, this.#elementRef);
+        }
+    }
+    #sortItemsByStackOrder() {
+        if (this.target) {
+            this.#itemRefs.sort(sortByStackOrder);
+            // Reassign the correct index for each view.
+            for (let i = 0, len = this.#itemRefs.length; i < len; i++) {
+                const item = this.#itemRefs[i];
+                this.target.move(item.componentRef.hostView, i);
+            }
+        }
+    }
+    #getHighestStackOrder() {
+        if (this.#itemRefs.length === 0) {
+            return 0;
+        }
+        return this.#itemRefs[0].stackOrder + 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyDockModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyDockComponent],
+                    providers: [SkyMutationObserverService],
+                }]
+        }] });
+
+/**
+ * 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 {
+    /**
+     * The global `window` variable.
+     */
+    get nativeWindow() {
+        return getWindow();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Angular service for creating and rendering a dynamic component.
+ * @internal
+ */
+class SkyDynamicComponentService {
+    #applicationRef;
+    #environmentInjector;
+    #injector;
+    #renderer;
+    #windowRef;
+    constructor(applicationRef, injector, windowRef, rendererFactory, environmentInjector) {
+        this.#applicationRef = applicationRef;
+        this.#injector = injector;
+        this.#windowRef = windowRef;
+        this.#environmentInjector = environmentInjector;
+        // 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, null);
+    }
+    /**
+     * Creates an instance of the specified component and adds it to the specified location
+     * on the page.
+     */
+    createComponent(componentType, options) {
+        options = options || {
+            location: SkyDynamicComponentLocation.BodyBottom,
+        };
+        const injector = Injector.create({
+            providers: options.providers || [],
+            parent: options.parentInjector || this.#injector,
+        });
+        let componentRef;
+        if (options.viewContainerRef) {
+            componentRef = options.viewContainerRef.createComponent(componentType, {
+                injector,
+            });
+        }
+        else {
+            componentRef = createComponent(componentType, {
+                environmentInjector: this.#environmentInjector,
+                elementInjector: injector,
+            });
+            this.#applicationRef.attachView(componentRef.hostView);
+            const el = this.#getRootNode(componentRef);
+            const bodyEl = this.#windowRef.nativeWindow.document.body;
+            switch (options.location) {
+                case SkyDynamicComponentLocation.BeforeElement:
+                    if (!options.referenceEl) {
+                        throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.BeforeElement` because a reference element was not provided.');
+                    }
+                    this.#renderer.insertBefore(options.referenceEl.parentElement, el, options.referenceEl);
+                    break;
+                case SkyDynamicComponentLocation.ElementTop:
+                    if (!options.referenceEl) {
+                        throw new Error('[SkyDynamicComponentService] Could not create a component at location `SkyDynamicComponentLocation.ElementTop` because a reference element was not provided.');
+                    }
+                    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];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 lose context if the component is created within a lazy-loaded module.
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }, { type: i0.EnvironmentInjector }]; } });
+
+/**
+ * This service docks components to specific areas on the page.
+ */
+class SkyDockService {
+    static { this._items = []; }
+    /**
+     * Returns all docked items.
+     */
+    get items() {
+        return SkyDockService._items;
+    }
+    #dynamicComponentSvc;
+    #options;
+    constructor(dynamicComponentSvc) {
+        this.#dynamicComponentSvc = dynamicComponentSvc;
+    }
+    /**
+     * 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) {
+        const dockRef = (SkyDockService.dockRef =
+            SkyDockService.dockRef || this.#createDock());
+        const itemRef = dockRef.instance.insertComponent(component, config);
+        const item = new SkyDockItem(itemRef.componentRef.instance, itemRef.stackOrder);
+        item.destroyed.subscribe(() => {
+            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 separate 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,
+            };
+        }
+        const dockRef = this.#dynamicComponentSvc.createComponent(SkyDockComponent, dockOptions);
+        dockRef.instance.setOptions(this.#options);
+        return dockRef;
+    }
+    #destroyDock() {
+        this.#dynamicComponentSvc.removeComponent(SkyDockService.dockRef);
+        SkyDockService.dockRef = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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)];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppFormat, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppFormat, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppFormat, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let idIndex = 0;
+/**
+ * Generates unique IDs to be used with HTML elements.
+ */
+class SkyIdService {
+    generateId() {
+        idIndex++;
+        // Include timestamp and an incrementing index to guarantee unique IDs both during the application
+        // lifecycle as well as across sessions, since browsers will try to apply autocomplete options to
+        // elements with the same ID across sessions.
+        return `sky-id-gen__${new Date().getTime()}__${idIndex}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * 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 {
+    get id() {
+        return this.#_id;
+    }
+    #_id;
+    constructor(elRef, renderer, idSvc) {
+        // Generate and apply the ID before the template is rendered
+        // to avoid a changed-after-checked error.
+        const id = idSvc.generateId();
+        renderer.setAttribute(elRef.nativeElement, 'id', id);
+        this.#_id = id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: SkyIdService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyIdDirective, selector: "[skyId]", exportAs: ["skyId"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyId]',
+                    exportAs: 'skyId',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: SkyIdService }]; } });
+
+class SkyIdModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyIdModule, declarations: [SkyIdDirective], exports: [SkyIdDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyIdModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyIdDirective],
+                    exports: [SkyIdDirective],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyLayoutHostService {
+    get hostLayoutForChild() {
+        return this.#hostLayoutForChildObs;
+    }
+    #hostLayoutForChild = new Subject();
+    #hostLayoutForChildObs = this.#hostLayoutForChild.asObservable();
+    setHostLayoutForChild(layout) {
+        this.#hostLayoutForChild.next(layout);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutHostService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutHostService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Allows for announcing messages to screen reader users through the use of a common `aria-live` element.
+ * @internal
+ */
+class SkyLiveAnnouncerService {
+    #announcerElement;
+    #document;
+    #idService;
+    constructor() {
+        this.announcerElementChanged = new ReplaySubject(1);
+        this.#document = inject(DOCUMENT);
+        this.#idService = inject(SkyIdService);
+        this.#announcerElement = this.#createLiveElement();
+        this.announcerElementChanged.next(this.#announcerElement);
+    }
+    /**
+     * Announces a message to screen readers.
+     * @param message Message to be announced to the screen reader.
+     * @param args Options for the announcement of the message.
+     */
+    announce(message, args) {
+        /* safety-check */
+        /* istanbul ignore if */
+        if (!this.#announcerElement) {
+            this.#announcerElement = this.#createLiveElement();
+            this.announcerElementChanged.next(this.#announcerElement);
+        }
+        const politeness = args?.politeness ?? 'polite';
+        this.clear();
+        this.#announcerElement.setAttribute('aria-live', politeness);
+        this.#announcerElement.textContent = message;
+    }
+    /**
+     * Clears the current text from the announcer element. Can be used to prevent
+     * screen readers from reading the text out again while the user is going
+     * through the page landmarks.
+     */
+    clear() {
+        if (this.#announcerElement) {
+            this.#announcerElement.textContent = '';
+        }
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        this.#announcerElement?.remove();
+        this.#announcerElement = undefined;
+        this.announcerElementChanged.next(undefined);
+    }
+    #createLiveElement() {
+        const elementClass = 'sky-live-announcer-element';
+        const previousElements = this.#document.getElementsByClassName(elementClass);
+        const liveEl = this.#document.createElement('div');
+        // Remove any old containers. This can happen when coming in from a server-side-rendered page.
+        for (let i = 0; i < previousElements.length; i++) {
+            previousElements[i].remove();
+        }
+        liveEl.classList.add(elementClass);
+        liveEl.classList.add('sky-screen-reader-only');
+        liveEl.setAttribute('aria-atomic', 'true');
+        liveEl.setAttribute('aria-live', 'polite');
+        liveEl.id = this.#idService.generateId();
+        this.#document.body.appendChild(liveEl);
+        return liveEl;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLiveAnnouncerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLiveAnnouncerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * @deprecated The `SkyLogService` no longer needs the `SkyLogModule`.
+ * The `SkyLogModule` can be removed from your project.
+ */
+class SkyLogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyLogModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * @internal
+ */
+const SKY_LOG_LEVEL = new InjectionToken('SkyLogLevel');
+
+const previousWarnings = new Set();
+/**
+ * Logs information to the console based on the application's log level as
+ * provided by the `SKY_LOG_LEVEL` injection token. If no token is provided,
+ * only `error` logs will be shown.
+ * @internal
+ */
+class SkyLogService {
+    #applicationLogLevel;
+    #formatter;
+    constructor(formatter, applicationLogLevel) {
+        this.#formatter = formatter;
+        this.#applicationLogLevel = applicationLogLevel ?? 3 /* SkyLogLevel.Error */;
+    }
+    /**
+     * Clears previously-logged messages. Primarily used for unit
+     * testing this service.
+     */
+    static clearPreviousLogs() {
+        previousWarnings.clear();
+    }
+    /**
+     * Logs a deprecation warning for a class, property, function, etc. This will
+     * be logged as a console warning unless a different log level is given in the
+     * `args` parameter.
+     * @param name The name of the deprecated class, property, function, etc.
+     * @param args Information about the deprecation and replacement recommendations.
+     * @returns
+     */
+    async deprecated(name, args) {
+        const logLevel = args?.logLevel ?? 2 /* SkyLogLevel.Warn */;
+        name = this.#convertStringToCode(name);
+        if (this.#canLog(logLevel)) {
+            const messageParts = [];
+            if (args?.deprecationMajorVersion) {
+                messageParts.push(this.#formatter.formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
+            }
+            else {
+                messageParts.push(this.#formatter.formatText('{0} is deprecated.', name));
+            }
+            if (args?.removalMajorVersion) {
+                messageParts.push(this.#formatter.formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
+            }
+            else {
+                messageParts.push('We will remove it in a future major version.');
+            }
+            if (args?.replacementRecommendation) {
+                messageParts.push(args.replacementRecommendation);
+            }
+            if (args?.moreInfoUrl) {
+                messageParts.push(this.#formatter.formatText('For more information, see {0}.', args.moreInfoUrl));
+            }
+            this.#logBasedOnLevel(logLevel, messageParts.join(' '));
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Logs a console error if the application's log level is `SkyLogLevel.Error`.
+     * @param message The error message
+     * @param params Optional parameters for the error message.
+     */
+    error(message, params) {
+        if (this.#canLog(3 /* SkyLogLevel.Error */)) {
+            this.#logWithParams('error', message, params);
+        }
+    }
+    /**
+     * Logs console information if the application's log level is `SkyLogLevel.Info` or above.
+     * @param message The informational message
+     * @param params Optional parameters for the informational message.
+     */
+    info(message, params) {
+        if (this.#canLog(1 /* SkyLogLevel.Info */)) {
+            this.#logWithParams('log', message, params);
+        }
+    }
+    /**
+     * Logs a console warning if the application's log level is `SkyLogLevel.Warn` or above.
+     * @param message The warning message
+     * @param params Optional parameters for the warning message.
+     */
+    warn(message, params) {
+        if (this.#canLog(2 /* SkyLogLevel.Warn */)) {
+            const messageKey = this.#buildMessageKey(message, params);
+            // Only log each warning once per application instance to avoid drowning out other
+            // important messages in the console.
+            if (!previousWarnings.has(message)) {
+                this.#logWithParams('warn', message, params);
+                previousWarnings.add(messageKey);
+            }
+        }
+    }
+    #convertStringToCode(typeString) {
+        if (typeString.charAt(0) !== '`' && typeString.charAt(-1) !== '`') {
+            typeString = '`' + typeString + '`';
+        }
+        return typeString;
+    }
+    #canLog(intendedLogLevel) {
+        return intendedLogLevel >= this.#applicationLogLevel;
+    }
+    #logBasedOnLevel(logLevel, message, params) {
+        switch (logLevel) {
+            case 1 /* SkyLogLevel.Info */:
+                this.info(message, params);
+                break;
+            case 2 /* SkyLogLevel.Warn */:
+                this.warn(message, params);
+                break;
+            case 3 /* SkyLogLevel.Error */:
+                this.error(message, params);
+                break;
+        }
+    }
+    #logWithParams(logMethod, message, params) {
+        if (params) {
+            console[logMethod](message, ...params);
+        }
+        else {
+            console[logMethod](message);
+        }
+    }
+    #buildMessageKey(message, params) {
+        let key = message;
+        if (params?.length) {
+            key = `${key} ${params.join(' ')}`;
+        }
+        return key;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogService, deps: [{ token: SkyAppFormat }, { token: SKY_LOG_LEVEL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyAppFormat }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SKY_LOG_LEVEL]
+                }] }]; } });
+
+/**
+ * @deprecated The `SkyMediaQueryService` no longer needs the `SkyMediaQueryModule`.
+ * The `SkyMediaQueryModule` can be removed from your project.
+ */
+class SkyMediaQueryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+const DEFAULT_BREAKPOINT$1 = SkyMediaBreakpoints.md;
+class SkyMediaQueryService {
+    /**
+     * The size for the `xs` breakpoint.
+     * @default "(max-width: 767px)"
+     */
+    static { this.xs = '(max-width: 767px)'; }
+    /**
+     * The size for the `sm` breakpoint.
+     * @default "(min-width: 768px) and (max-width: 991px)"
+     */
+    static { this.sm = '(min-width: 768px) and (max-width: 991px)'; }
+    /**
+     * The size for the `md` breakpoint.
+     * @default "(min-width: 992px) and (max-width: 1199px)"
+     */
+    static { this.md = '(min-width: 992px) and (max-width: 1199px)'; }
+    /**
+     * The size for the `lg` breakpoint.
+     * @default "(min-width: 1200px)"
+     */
+    static { this.lg = '(min-width: 1200px)'; }
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return this.#currentBreakpoint;
+    }
+    #currentSubject = new BehaviorSubject(DEFAULT_BREAKPOINT$1);
+    #currentBreakpoint = DEFAULT_BREAKPOINT$1;
+    #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,
+        },
+    ];
+    #mediaQueries = [];
+    #zone;
+    constructor(zone) {
+        this.#zone = zone;
+        this.#addListeners();
+    }
+    ngOnDestroy() {
+        this.#removeListeners();
+        this.#currentSubject.complete();
+    }
+    /**
+     * Subscribes 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.#currentBreakpoint = breakpoint;
+        this.#currentSubject.next(breakpoint);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCoreResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyCoreResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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.
+ * @deprecated Use the `SkyNumericOptions` interface instead.
+ * @internal
+ */
+class NumericOptions {
+    constructor() {
+        this.digits = 1;
+        this.format = 'number';
+        this.currencySign = 'standard';
+        this.iso = 'USD';
+        this.truncate = true;
+        this.truncateAfter = 1000;
+        const logService = new SkyLogService(new SkyAppFormat());
+        logService
+            .deprecated('NumericOptions', {
+            deprecationMajorVersion: 7,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/numeric',
+            replacementRecommendation: 'Use the `SkyNumericOptions` interface instead.',
+        })
+            .then();
+    }
+}
+
+/* eslint-disable eqeqeq */
+// This file is mostly ported from the Angular 4.x NumberPipe in order to maintain the old
+// behavior of using the `Intl` API for formatting numbers rather than having to register every
+// supported locale.
+// https://github.com/angular/angular/blob/4.4.x/packages/common/src/pipes/number_pipe.ts
+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 { this._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/; }
+    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,
+        });
+    }
+}
+
+class SkyNumericService {
+    #resourcesSvc;
+    #symbolIndex;
+    constructor(resourcesSvc) {
+        /**
+         * The browser's current locale.
+         * @internal
+         */
+        this.currentLocale = 'en-US';
+        /**
+         * @internal
+         */
+        this.shortSymbol = '';
+        this.#resourcesSvc = resourcesSvc;
+        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') },
+        ];
+    }
+    /**
+     * Formats a number based on the provided options.
+     * @param value The number to format.
+     * @param options Format options.
+     */
+    formatNumber(value, options) {
+        if (isNaN(value) || value === null) {
+            return '';
+        }
+        const numericOptions = {
+            digits: 0,
+            format: 'number',
+            currencySign: 'standard',
+            iso: 'USD',
+            truncateAfter: 1000,
+            ...options,
+        };
+        const decimalPlaceRegExp = /\.0+$|(\.[0-9]*[1-9])0+$/;
+        const locale = numericOptions.locale || this.currentLocale;
+        const digits = numericOptions.digits || 0;
+        // Get the symbol for the number after rounding, since rounding could push the number
+        // into a different symbol range.
+        let roundedNumber = this.#roundNumber(value, digits);
+        const roundedNumberAbs = Math.abs(roundedNumber);
+        let suffix = '';
+        for (let i = 0; i < this.#symbolIndex.length; i++) {
+            let symbol = this.#symbolIndex[i];
+            if (numericOptions.truncate &&
+                numericOptions.truncateAfter !== undefined &&
+                roundedNumberAbs >= numericOptions.truncateAfter &&
+                roundedNumberAbs >= symbol.value) {
+                roundedNumber = this.#roundNumber(value / symbol.value, 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);
+        let digitsFormatted;
+        let isDecimal = false;
+        // Checks the string entered for format. Using toLowerCase to ignore case.
+        switch (numericOptions.format?.toLowerCase()) {
+            // In a case where a decimal value was not shortened and
+            // the digit input is 2 or higher, it forces 2 digits.
+            // For example, this prevents a value like $15.50 from displaying as $15.5.
+            // Note: This will need to be reviewed if we support currencies with
+            // three decimal digits.
+            case 'currency':
+                isDecimal = value % 1 !== 0;
+                if (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
+                }
+                else if (isDecimal && digits >= 2) {
+                    digitsFormatted = `1.2-${digits}`;
+                }
+                else {
+                    digitsFormatted = `1.0-${digits}`;
+                }
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, numericOptions.iso, 
+                // Angular 5+ needs a string for this parameter, but Angular 4 needs a boolean.
+                // To support both versions we can supply 'symbol' which will evaluate truthy for Angular 4
+                // and the appropriate string value for Angular 5+.
+                // See: https://angular.io/api/common/CurrencyPipe#parameters
+                'symbol', numericOptions.currencySign);
+                //   ^^^^^^ Result can't be null since the sanitized input is always a number.
+                break;
+            // The following is a catch-all to ensure that if
+            // 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 (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
+                }
+                else if (numericOptions.truncate) {
+                    digitsFormatted = `1.0-${digits}`;
+                }
+                else {
+                    digitsFormatted = `1.${digits}-${digits}`;
+                }
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Decimal, digitsFormatted);
+                //   ^^^^^^ Result can't be null since the sanitized input is always a number.
+                break;
+        }
+        if (numericOptions.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) {
+        if (precision < 0) {
+            throw new Error('SkyInvalidArgument: precision must be >= 0');
+        }
+        /* 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);
+        /*istanbul ignore else*/
+        if (result) {
+            const pos = result.index + result.length;
+            const output = value.substring(0, pos) + this.shortSymbol + value.substring(pos);
+            return output;
+        }
+        else {
+            return value;
+        }
+    }
+    #getSymbol(key) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.#resourcesSvc.getStringForLocale({ locale: 'en_US' }, key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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.
+ */
+class SkyNumericPipe {
+    #cacheKey;
+    #changeDetector;
+    #formattedValue;
+    #ngUnsubscribe = new Subject();
+    #numericSvc;
+    #providerLocale;
+    constructor(localeProvider, numericSvc, changeDetector) {
+        this.#numericSvc = numericSvc;
+        this.#changeDetector = changeDetector;
+        localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.#providerLocale = localeInfo.locale;
+            numericSvc.currentLocale = this.#providerLocale;
+            this.#changeDetector.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    /**
+     * Formats a number based on the provided options.
+     */
+    transform(value, config) {
+        const newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') +
+            `${value}_${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.#cacheKey = newCacheKey;
+        this.#formattedValue = this.#numericSvc.formatNumber(value, options);
+        return this.#formattedValue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericPipe, deps: [{ token: i1.SkyAppLocaleProvider }, { token: SkyNumericService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericPipe, name: "skyNumeric", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * Emits when the overlay is clicked (but not its content).
+     */
+    get backdropClick() {
+        return this.#backdropClickObs;
+    }
+    /**
+     * Emits after the overlay is closed.
+     */
+    get closed() {
+        return this.#closedObs;
+    }
+    #backdropClick;
+    #backdropClickObs;
+    #closed;
+    #closedObs;
+    constructor(
+    /**
+     * The configuration for the overlay.
+     */
+    config, componentRef) {
+        this.config = config;
+        this.componentRef = componentRef;
+        this.id = this.componentRef.instance.id;
+        this.componentRef.instance.closed.subscribe(() => {
+            this.#closed.next();
+            this.#closed.complete();
+            this.#backdropClick.complete();
+        });
+        this.componentRef.instance.backdropClick.subscribe(() => {
+            this.#backdropClick.next();
+        });
+        this.#backdropClick = new Subject();
+        this.#closed = new Subject();
+        this.#backdropClickObs = this.#backdropClick.asObservable();
+        this.#closedObs = 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);
+    }
+}
+
+/**
+ * @internal
+ */
+const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+
+/**
+ * Contextual information for each overlay.
+ * @internal
+ */
+class SkyOverlayContext {
+    constructor(config) {
+        this.config = config;
+    }
+}
+
+const POSITION_DEFAULT = 'fixed';
+/**
+ * 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 {
+    get backdropClick() {
+        return this.#backdropClickObs;
+    }
+    get closed() {
+        return this.#closedObs;
+    }
+    #backdropClick;
+    #backdropClickObs;
+    #changeDetector;
+    #closed;
+    #closedObs;
+    #context;
+    #coreAdapter;
+    #injector;
+    #ngUnsubscribe;
+    #router;
+    #routerSubscription;
+    constructor(changeDetector, injector, coreAdapter, context, idSvc, router) {
+        this.wrapperClass = '';
+        this.enablePointerEvents = false;
+        this.showBackdrop = false;
+        this.zIndex = `${++uniqueZIndex}`;
+        this.clipPath$ = new ReplaySubject(1);
+        this.position = POSITION_DEFAULT;
+        this.#ngUnsubscribe = new Subject();
+        this.#changeDetector = changeDetector;
+        this.#injector = injector;
+        this.#coreAdapter = coreAdapter;
+        this.#context = context;
+        this.#router = router;
+        this.id = idSvc.generateId();
+        this.#backdropClick = new Subject();
+        this.#closed = new Subject();
+        this.#backdropClickObs = this.#backdropClick.asObservable();
+        this.#closedObs = 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 = []) {
+        /*istanbul ignore if: untestable*/
+        if (!this.targetRef) {
+            throw new Error('[SkyOverlayComponent] Could not attach the component because the target element could not be found.');
+        }
+        this.targetRef.clear();
+        const injector = Injector.create({
+            providers: [
+                {
+                    provide: SKY_STACKING_CONTEXT,
+                    useValue: {
+                        zIndex: new BehaviorSubject(parseInt(this.zIndex, 10))
+                            .asObservable()
+                            .pipe(takeUntil(this.#ngUnsubscribe)),
+                    },
+                },
+                ...providers,
+            ],
+            parent: this.#injector,
+        });
+        const componentRef = this.targetRef.createComponent(component, {
+            injector,
+        });
+        // Run an initial change detection cycle after the component has been created.
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    attachTemplate(templateRef, context) {
+        /*istanbul ignore if: untestable*/
+        if (!this.targetRef) {
+            throw new Error('[SkyOverlayComponent] Could not attach the template because the target element could not be found.');
+        }
+        this.targetRef.clear();
+        return this.targetRef.createEmbeddedView(templateRef, context);
+    }
+    updateClipPath(clipPath) {
+        this.clipPath$.next(clipPath);
+    }
+    #applyConfig(config) {
+        this.wrapperClass = config.wrapperClass || '';
+        this.showBackdrop = !!config.showBackdrop;
+        this.enablePointerEvents = !!config.enablePointerEvents;
+        this.position = config.position || POSITION_DEFAULT;
+        this.#changeDetector.markForCheck();
+    }
+    #addBackdropClickListener() {
+        fromEvent(window.document, 'click')
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((event) => {
+            if (event.target && this.overlayContentRef && this.overlayRef) {
+                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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { id: [{
+                type: HostBinding,
+                args: ['id']
+            }], 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyOverlayComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyOverlayAdapterService {
+    #renderer;
+    #styleElement;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    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 &&
+            this.#styleElement.parentElement === document.head) {
+            this.#renderer.removeChild(document.head, this.#styleElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.overlays = []; }
+    #adapter;
+    #applicationRef;
+    #componentFactoryResolver;
+    #injector;
+    // TODO: Replace deprecated `ComponentFactoryResolver`.
+    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 { ...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();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    get defaultLocale() {
+        return this.#defaultLocale;
+    }
+    #defaultFormat = '1.0-2';
+    #defaultLocale = 'en-US';
+    #format;
+    #formattedValue = '';
+    #locale;
+    #ngUnsubscribe = new Subject();
+    #value;
+    constructor(localeProvider) {
+        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 = this.#value
+            ? SkyNumberFormatUtility.formatNumber(locale, this.#value, SkyIntlNumberFormatStyle.Percent, format)
+            : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipe, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipe, name: "skyPercent", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyPercent',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyAppLocaleProvider }]; } });
+
+class SkyPercentPipeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipeModule, declarations: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule], exports: [SkyPercentPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipeModule, providers: [SkyPercentPipe], imports: [CommonModule, SkyCoreResourcesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPercentPipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPercentPipe],
+                    providers: [SkyPercentPipe],
+                    imports: [CommonModule, SkyCoreResourcesModule],
+                    exports: [SkyPercentPipe],
+                }]
+        }] });
+
+/**
+ * Service to create rxjs observables for changes to the content box dimensions of elements.
+ */
+class SkyResizeObserverService {
+    #resizeObserver;
+    #tracking = [];
+    #zone;
+    constructor(zone) {
+        this.#zone = zone;
+        this.#resizeObserver = new ResizeObserver((entries) => {
+            entries.forEach((entry) => this.#callback(entry));
+        });
+    }
+    ngOnDestroy() {
+        this.#resizeObserver.disconnect();
+    }
+    /**
+     * Create rxjs observable to get size changes for an element ref.
+     */
+    observe(element) {
+        return this.#observeAndTrack(element).subjectObservable;
+    }
+    #observeAndTrack(element) {
+        const checkTracking = this.#tracking.findIndex((value) => {
+            return !value.subject.closed && value.element === element.nativeElement;
+        });
+        if (checkTracking === -1) {
+            this.#resizeObserver.observe(element.nativeElement);
+        }
+        const subject = new Subject();
+        const subjectObservable = subject.pipe(finalize(() => {
+            // Are there any other tracking entries still watching this element?
+            const checkTracking = this.#tracking.findIndex((value) => {
+                return (value.subject !== subject &&
+                    !value.subject.closed &&
+                    value.element === element.nativeElement);
+            });
+            if (checkTracking === -1) {
+                this.#resizeObserver.unobserve(element.nativeElement);
+            }
+        }));
+        const tracking = {
+            element: element.nativeElement,
+            subject,
+            subjectObservable,
+        };
+        this.#tracking.push(tracking);
+        return tracking;
+    }
+    #callback(entry) {
+        this.#tracking
+            .filter((value) => !(value.subject.closed || value.subject.isStopped))
+            .forEach((value) => {
+            /* istanbul ignore else */
+            if (value.element === entry.target) {
+                // Execute the callback within NgZone because Angular does not "monkey patch"
+                // ResizeObserver like it does for other features in the DOM.
+                this.#zone.run(() => {
+                    value.subject.next(entry);
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
+/**
+ * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
+ */
+class SkyResizeObserverMediaQueryService {
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return this.#currentBreakpoint;
+    }
+    #breakpoints = [
+        {
+            check: (width) => width > 0 && width <= 767,
+            name: SkyMediaBreakpoints.xs,
+        },
+        {
+            check: (width) => width > 767 && width <= 991,
+            name: SkyMediaBreakpoints.sm,
+        },
+        {
+            check: (width) => width > 991 && width <= 1199,
+            name: SkyMediaBreakpoints.md,
+        },
+        {
+            check: (width) => width > 1199,
+            name: SkyMediaBreakpoints.lg,
+        },
+    ];
+    #currentBreakpoint = DEFAULT_BREAKPOINT;
+    #currentBreakpointObs = new ReplaySubject(1);
+    #ngUnsubscribe = new Subject();
+    #resizeObserverSvc;
+    #target;
+    constructor(resizeObserverSvc) {
+        this.#resizeObserverSvc = resizeObserverSvc;
+    }
+    ngOnDestroy() {
+        this.unobserve();
+        this.#target = undefined;
+        this.#currentBreakpointObs.complete();
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        this.ngOnDestroy();
+    }
+    /**
+     * Sets the container element to watch. The `SkyResizeObserverMediaQueryService` will only observe one element at a
+     * time. Any previous subscriptions will be unsubscribed when a new element is observed.
+     */
+    observe(element) {
+        if (this.#target) {
+            if (this.#target === element) {
+                return this;
+            }
+            this.unobserve();
+        }
+        this.#target = element;
+        this.#checkWidth(element);
+        this.#resizeObserverSvc
+            .observe(element)
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((value) => {
+            const breakpoint = this.#checkBreakpoint(value.contentRect.width);
+            if (breakpoint && breakpoint !== this.current) {
+                this.#updateBreakpoint(breakpoint);
+            }
+        });
+        return this;
+    }
+    /**
+     * Stop watching the container element.
+     */
+    unobserve() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    /**
+     * Subscribes to element size changes that cross breakpoints.
+     */
+    subscribe(listener) {
+        return this.#currentBreakpointObs
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((value) => {
+            listener(value);
+        });
+    }
+    #updateBreakpoint(breakpoint) {
+        this.#currentBreakpoint = breakpoint;
+        this.#currentBreakpointObs.next(breakpoint);
+    }
+    #checkBreakpoint(width) {
+        const breakpoint = this.#breakpoints.find((breakpoint) => breakpoint.check(width));
+        return breakpoint ? breakpoint.name : undefined;
+    }
+    #checkWidth(el) {
+        const width = el.nativeElement.offsetWidth || 0;
+        const breakpoint = this.#checkBreakpoint(width);
+        if (breakpoint && breakpoint !== this.#currentBreakpoint) {
+            this.#updateBreakpoint(breakpoint);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
+
+function notifySubscribers(subscribers, item) {
+    for (const subscriber of subscribers) {
+        subscriber.next(item);
+    }
+}
+class SkyScrollableHostService {
+    #mutationObserverSvc;
+    #windowRef;
+    #resizeObserverSvc;
+    constructor(mutationObserverSvc, windowRef, resizeObserverSvc) {
+        this.#mutationObserverSvc = mutationObserverSvc;
+        this.#resizeObserverSvc = resizeObserverSvc;
+        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
+     * @returns An observable which emits the current scrollable host element.
+     * @internal
+     */
+    watchScrollableHost(elementRef) {
+        const subscribers = [];
+        let parentMutationObserver;
+        let documentHiddenElementMutationObserver;
+        return new Observable((subscriber) => {
+            subscribers.push(subscriber);
+            let scrollableHost = this.#findScrollableHost(elementRef.nativeElement);
+            // Setup mutation observers only once, for all subscribers.
+            if (subscribers.length === 1) {
+                parentMutationObserver = this.#mutationObserverSvc.create(() => {
+                    const newScrollableHost = this.#findScrollableHost(elementRef.nativeElement);
+                    // Reset observer if scrollable host changes.
+                    if (newScrollableHost !== scrollableHost &&
+                        this.#isElementVisible(elementRef)) {
+                        scrollableHost = newScrollableHost;
+                        this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                        notifySubscribers(subscribers, scrollableHost);
+                    }
+                });
+                this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                documentHiddenElementMutationObserver =
+                    this.#mutationObserverSvc.create(() => {
+                        if (scrollableHost && !this.#isElementVisible(elementRef)) {
+                            // If the scrollable host is not visible, set it to undefined and unsubscribe from its mutation changes.
+                            // Then, observe the document element so that a new scrollable host can be found.
+                            scrollableHost = undefined;
+                            this.#observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
+                            notifySubscribers(subscribers, scrollableHost);
+                        }
+                    });
+                this.#observeDocumentHiddenElementChanges(documentHiddenElementMutationObserver);
+            }
+            // Emit the scrollable host to the subscriber.
+            subscriber.next(scrollableHost);
+            // Teardown callback for the subscription.
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* 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
+     * @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);
+            // Setup mutation observers only once, for all subscribers.
+            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();
+                    // Only subscribe to scroll events if the host element is defined.
+                    /* istanbul ignore else */
+                    if (newScrollableHost) {
+                        scrollEventSubscription = fromEvent(newScrollableHost, 'scroll')
+                            .pipe(takeUntil(newScrollableHostObservable))
+                            .subscribe(() => {
+                            notifySubscribers(subscribers);
+                        });
+                    }
+                });
+            }
+            // Teardown callback for the subscription.
+            subscriber.add(() => {
+                const subIndex = subscribers.indexOf(subscriber);
+                /* istanbul ignore else */
+                if (subIndex >= 0) {
+                    subscribers.splice(subIndex, 1);
+                }
+                if (subscribers.length === 0) {
+                    scrollableHostSubscription.unsubscribe();
+                    scrollEventSubscription.unsubscribe();
+                    newScrollableHostObservable.complete();
+                }
+            });
+        });
+    }
+    watchScrollableHostClipPathChanges(elementRef) {
+        if (!this.#resizeObserverSvc) {
+            return of('none');
+        }
+        return this.watchScrollableHost(elementRef).pipe(switchMap((scrollableHost) => {
+            if (!this.#resizeObserverSvc ||
+                !scrollableHost ||
+                scrollableHost === this.#windowRef.nativeWindow) {
+                return of('none');
+            }
+            return concat([
+                of(undefined),
+                this.#resizeObserverSvc.observe({ nativeElement: scrollableHost }),
+            ]).pipe(debounceTime(0, animationFrameScheduler), map(() => {
+                const viewportSize = this.#getViewportSize();
+                const { top, left, width, height } = scrollableHost.getBoundingClientRect();
+                const right = Math.max(viewportSize.width - left - width, 0);
+                const bottom = Math.max(viewportSize.height - top - height, 0);
+                return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+            }));
+        }));
+    }
+    #findScrollableHost(element) {
+        const regex = /(auto|scroll)/;
+        const windowObj = this.#windowRef.nativeWindow;
+        const bodyObj = windowObj.document.body;
+        if (!element) {
+            return windowObj;
+        }
+        let style = windowObj.getComputedStyle(element);
+        let parent = element;
+        do {
+            parent = parent.parentNode;
+            // Return `window` if the parent element 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();
+        const target = element instanceof HTMLElement ? element : document.documentElement;
+        mutationObserver.observe(target, {
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+            childList: true,
+            subtree: true,
+        });
+    }
+    /**
+     * Determines if an element is "visible" in the DOM.
+     * @see https://stackoverflow.com/a/11639664/6178885
+     */
+    #isElementVisible(elementRef) {
+        return !!elementRef.nativeElement?.offsetParent;
+    }
+    #getViewportSize() {
+        const win = this.#windowRef.nativeWindow;
+        const docElem = win.document.documentElement;
+        return {
+            width: docElem.clientWidth,
+            height: docElem.clientHeight,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyScrollableHostService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Provides a method for setting a formatted title on the current window.
+ */
+class SkyAppTitleService {
+    #title;
+    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?.titleParts) {
+            this.#title.setTitle(args.titleParts.join(' - '));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyAppTitleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Title }]; } });
+
+/**
+ * Trims whitespace in each text node that is a direct descendent of the current element.
+ */
+class SkyTrimDirective {
+    #elRef;
+    #obs;
+    constructor(elRef, mutationObs) {
+        this.#elRef = elRef;
+        this.#obs = mutationObs.create((mutations) => {
+            const nodes = [];
+            // Only trim white space inside direct descendants of the current element.
+            for (const mutation of mutations) {
+                if (mutation.target.parentNode === elRef.nativeElement) {
+                    nodes.push(mutation.target);
+                }
+            }
+            this.#trim(nodes);
+        });
+        this.#observe();
+    }
+    ngOnInit() {
+        const el = this.#elRef.nativeElement;
+        this.#trim(Array.from(el.childNodes));
+    }
+    ngOnDestroy() {
+        this.#disconnect();
+    }
+    #observe() {
+        this.#obs.observe(this.#elRef.nativeElement, {
+            characterData: true,
+            subtree: true,
+        });
+    }
+    #disconnect() {
+        this.#obs.disconnect();
+    }
+    #trim(nodes) {
+        // Suspend the MutationObserver so altering the text content of each node
+        // doesn't retrigger the observe callback.
+        this.#disconnect();
+        for (const node of nodes) {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+                const textContent = node.textContent;
+                const textContentTrimmed = textContent.trim();
+                if (textContent !== textContentTrimmed) {
+                    node.textContent = textContentTrimmed;
+                }
+            }
+        }
+        this.#observe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyTrimDirective, selector: "[skyTrim]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyTrim]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyMutationObserverService }]; } });
+
+class SkyTrimModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimModule, declarations: [SkyTrimDirective], exports: [SkyTrimDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTrimModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTrimDirective],
+                    exports: [SkyTrimDirective],
+                }]
+        }] });
+
+class SkyUIConfigService {
+    getConfig(key, defaultConfig) {
+        return of(defaultConfig);
+    }
+    /* istanbul ignore next */
+    setConfig(key, value) {
+        return of({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyUIConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyUIConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyUIConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class SkyViewkeeperHostOptions {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperHostOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperHostOptions }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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, clipTop, clipLeft) {
+    el.style.top = px(top);
+    el.style.left = px(left);
+    el.style.marginTop = px(marginTop);
+    el.style.clipPath =
+        clipTop || clipLeft ? `inset(${px(clipTop)} 0 0 ${px(clipLeft)})` : 'none';
+    /*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 {
+    #boundaryEl;
+    #el;
+    #id;
+    #setWidth;
+    #verticalOffset;
+    #verticalOffsetEl;
+    #viewportMarginTop = 0;
+    #currentElFixedLeft;
+    #currentElFixedTop;
+    #currentElFixedWidth;
+    #currentElClipLeft;
+    #currentElClipTop;
+    #isDestroyed = false;
+    #scrollableHost;
+    #syncElPositionHandler;
+    #intersectionObserver;
+    constructor(options) {
+        options = options || /* istanbul ignore next */ {};
+        this.#el = options.el;
+        this.#boundaryEl = options.boundaryEl;
+        if (!this.#el) {
+            throw new Error('[SkyViewkeeper] The option `el` is required.');
+        }
+        if (!this.#boundaryEl) {
+            throw new Error('[SkyViewkeeper] The option `boundaryEl` is required.');
+        }
+        const el = this.#el;
+        const boundaryEl = this.#boundaryEl;
+        this.#setWidth = !!options.setWidth;
+        this.#id = nextId();
+        this.#scrollableHost = options.scrollableHost;
+        this.#verticalOffset = options.verticalOffset || 0;
+        this.#verticalOffsetEl = options.verticalOffsetEl;
+        // Only set viewport margin if the scrollable host is undefined.
+        if (!this.#scrollableHost) {
+            this.#viewportMarginTop = options.viewportMarginTop ?? 0;
+        }
+        this.#syncElPositionHandler = () => this.syncElPosition(el, boundaryEl);
+        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(el, boundaryEl);
+    }
+    syncElPosition(el, boundaryEl) {
+        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 (el.offsetWidth === 0 && el.offsetHeight === 0) {
+            return;
+        }
+        const boundaryInfo = this.#getBoundaryInfo(el, boundaryEl);
+        const fixedStyles = this.#getFixedStyles(boundaryInfo, verticalOffset);
+        const doFixEl = this.#shouldFixEl(el, boundaryInfo, verticalOffset);
+        if (this.#needsUpdating(doFixEl, fixedStyles)) {
+            if (doFixEl) {
+                this.#fixEl(el, boundaryInfo, fixedStyles);
+            }
+            else {
+                this.#unfixEl(el);
+            }
+        }
+        const evt = createCustomEvent(EVT_AFTER_VIEWKEEPER_SYNC);
+        el.dispatchEvent(evt);
+    }
+    destroy() {
+        if (!this.#isDestroyed) {
+            this.#intersectionObserver?.disconnect();
+            window.removeEventListener('scroll', this.#syncElPositionHandler, true);
+            window.removeEventListener('resize', this.#syncElPositionHandler);
+            window.removeEventListener('orientationchange', this.#syncElPositionHandler);
+            if (this.#el) {
+                this.#unfixEl(this.#el);
+            }
+            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(el) {
+        const spacerEl = document.getElementById(this.#getSpacerId());
+        /*istanbul ignore else*/
+        if (spacerEl?.parentElement) {
+            spacerEl.parentElement.removeChild(spacerEl);
+        }
+        el.classList.remove(CLS_VIEWKEEPER_FIXED);
+        this.#currentElFixedLeft =
+            this.#currentElFixedTop =
+                this.#currentElFixedWidth =
+                    undefined;
+        let width = '';
+        if (this.#setWidth) {
+            width = 'auto';
+        }
+        setElPosition(el, '', '', width, '', 0, 0);
+    }
+    #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(el, boundaryInfo, verticalOffset) {
+        let anchorTop;
+        if (boundaryInfo.spacerEl) {
+            anchorTop = getOffset(boundaryInfo.spacerEl, this.#scrollableHost).top;
+        }
+        else {
+            anchorTop = getOffset(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 elTop = boundaryInfo.boundaryBottom -
+            boundaryInfo.elHeight -
+            boundaryInfo.scrollTop;
+        const elClipTop = elTop < verticalOffset ? verticalOffset - elTop : 0;
+        const elFixedTop = Math.min(elTop, verticalOffset);
+        const elFixedWidth = boundaryInfo.boundaryEl.getBoundingClientRect().width;
+        const elFixedLeft = boundaryInfo.boundaryOffset.left - boundaryInfo.scrollLeft;
+        const elClipLeft = elFixedLeft < 0 ? 0 - elFixedLeft : 0;
+        return {
+            elFixedLeft,
+            elFixedTop,
+            elFixedWidth,
+            elClipLeft,
+            elClipTop,
+        };
+    }
+    #needsUpdating(doFixEl, fixedStyles) {
+        if ((doFixEl &&
+            this.#currentElFixedLeft === fixedStyles.elFixedLeft &&
+            this.#currentElFixedTop === fixedStyles.elFixedTop &&
+            this.#currentElClipLeft === fixedStyles.elClipLeft &&
+            this.#currentElClipTop === fixedStyles.elClipTop &&
+            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(el, boundaryInfo, fixedStyles) {
+        /* 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);
+            /*istanbul ignore else*/
+            if (el.parentNode) {
+                el.parentNode.insertBefore(spacerEl, el.nextSibling);
+            }
+        }
+        el.classList.add(CLS_VIEWKEEPER_FIXED);
+        this.#currentElFixedTop = fixedStyles.elFixedTop;
+        this.#currentElFixedLeft = fixedStyles.elFixedLeft;
+        this.#currentElClipTop = fixedStyles.elClipTop;
+        this.#currentElClipLeft = fixedStyles.elClipLeft;
+        this.#currentElFixedWidth = fixedStyles.elFixedWidth;
+        let width = 0;
+        if (this.#setWidth) {
+            width = fixedStyles.elFixedWidth;
+        }
+        setElPosition(el, fixedStyles.elFixedLeft, fixedStyles.elFixedTop, width, this.#viewportMarginTop, fixedStyles.elClipTop, fixedStyles.elClipLeft);
+    }
+    #getBoundaryInfo(el, boundaryEl) {
+        const spacerId = this.#getSpacerId();
+        const spacerEl = document.getElementById(spacerId);
+        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(el);
+        return {
+            boundaryBottom,
+            boundaryOffset,
+            boundaryEl,
+            elHeight,
+            scrollLeft,
+            scrollTop,
+            spacerId,
+            spacerEl,
+        };
+    }
+}
+
+/**
+ * Provides methods for creating and destroying viewkeeper instances.
+ */
+class SkyViewkeeperService {
+    #hostOptions;
+    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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperService, deps: [{ token: SkyViewkeeperHostOptions, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyViewkeeperHostOptions, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class SkyViewkeeperDirective {
+    set skyViewkeeper(value) {
+        this.#_skyViewkeeper = value;
+        this.#detectElements();
+    }
+    get skyViewkeeper() {
+        return this.#_skyViewkeeper;
+    }
+    #_skyViewkeeper;
+    #currentViewkeeperEls;
+    #el;
+    #mutationObserverSvc;
+    #observer;
+    #scrollableHostSvc;
+    #scrollableHostWatchUnsubscribe;
+    #viewkeepers = [];
+    #viewkeeperSvc;
+    constructor(el, mutationObserverSvc, viewkeeperSvc, scrollableHostSvc) {
+        this.#el = el;
+        this.#mutationObserverSvc = mutationObserverSvc;
+        this.#viewkeeperSvc = viewkeeperSvc;
+        this.#scrollableHostSvc = scrollableHostSvc;
+    }
+    ngOnInit() {
+        this.#observer = this.#mutationObserverSvc.create(() => this.#detectElements());
+        this.#observer.observe(this.#el.nativeElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        /*istanbul ignore else*/
+        if (this.#observer) {
+            this.#observer.disconnect();
+        }
+        /*istanbul ignore else*/
+        if (this.#scrollableHostWatchUnsubscribe) {
+            this.#scrollableHostWatchUnsubscribe.next();
+            this.#scrollableHostWatchUnsubscribe.complete();
+        }
+        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.complete();
+                this.#scrollableHostWatchUnsubscribe = new Subject();
+            }
+            else {
+                this.#scrollableHostWatchUnsubscribe = new Subject();
+            }
+            if (this.#scrollableHostSvc) {
+                this.#scrollableHostSvc
+                    .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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperDirective, deps: [{ token: i0.ElementRef }, { token: SkyMutationObserverService }, { token: SkyViewkeeperService }, { token: SkyScrollableHostService, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyViewkeeperDirective, selector: "[skyViewkeeper]", inputs: { skyViewkeeper: "skyViewkeeper" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyViewkeeper]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyMutationObserverService }, { type: SkyViewkeeperService }, { type: SkyScrollableHostService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { skyViewkeeper: [{
+                type: Input
+            }] } });
+
+class SkyViewkeeperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperModule, declarations: [SkyViewkeeperDirective], exports: [SkyViewkeeperDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyViewkeeperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyViewkeeperDirective],
+                    exports: [SkyViewkeeperDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NumericOptions, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+//# sourceMappingURL=skyux-core.mjs.map