@skyux/core 8.0.0-alpha.8 → 8.0.0-beta.0

package/fesm2020/skyux-core.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, createComponent, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } 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 { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i5 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
+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';
@@ -375,7 +375,7 @@ function isOffsetPartiallyVisibleWithinParent(parent, offset, bufferOffset) {
         parentOffset.left >= offset.right);
 }
 
-var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
+var _SkyAffixer_instances, _SkyAffixer_config_get, _SkyAffixer_config_set, _SkyAffixer_affixedElement, _SkyAffixer_baseElement, _SkyAffixer_currentOffset, _SkyAffixer_currentPlacement, _SkyAffixer_offsetChange, _SkyAffixer_offsetChangeObs, _SkyAffixer_overflowParents, _SkyAffixer_overflowScroll, _SkyAffixer_overflowScrollObs, _SkyAffixer_placementChange, _SkyAffixer_placementChangeObs, _SkyAffixer_renderer, _SkyAffixer_resizeListener, _SkyAffixer_scrollListeners, _SkyAffixer__config, _SkyAffixer_affix, _SkyAffixer_getOffset, _SkyAffixer_getRect, _SkyAffixer_getPreferredOffset, _SkyAffixer_adjustOffsetToOverflowParent, _SkyAffixer_getImmediateOverflowParent, _SkyAffixer_getAutoFitContextParent, _SkyAffixer_notifyPlacementChange, _SkyAffixer_reset, _SkyAffixer_isNewOffset, _SkyAffixer_isBaseElementVisible, _SkyAffixer_addScrollListeners, _SkyAffixer_addResizeListener, _SkyAffixer_removeResizeListener, _SkyAffixer_removeScrollListeners;
 const DEFAULT_AFFIX_CONFIG = {
     autoFitContext: SkyAffixAutoFitContext.OverflowParent,
     enableAutoFit: false,
@@ -497,9 +497,19 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     let isAffixedElementFullyVisible = false;
     let offset;
     let placement = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement;
+    const autoFitOverflowOffset = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset || {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        autoFitOverflowOffset.top =
+            (autoFitOverflowOffset.top || 0) + window.scrollY;
+    }
     do {
         offset = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, placement);
-        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
+        isAffixedElementFullyVisible = isOffsetFullyVisibleWithinParent(parent, offset, autoFitOverflowOffset);
         if (!__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit) {
             break;
         }
@@ -525,12 +535,27 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
     }
     // No suitable placement was found, so revert to preferred placement.
     return __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getPreferredOffset).call(this, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).placement);
+}, _SkyAffixer_getRect = function _SkyAffixer_getRect(baseElement) {
+    const baseDomRect = baseElement.getBoundingClientRect();
+    const baseRect = {
+        top: baseDomRect.top,
+        bottom: baseDomRect.bottom,
+        left: baseDomRect.left,
+        right: baseDomRect.right,
+        width: baseDomRect.width,
+        height: baseDomRect.height,
+    };
+    if (__classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).position === 'absolute') {
+        baseRect.top += window.scrollY;
+        baseRect.bottom = baseRect.top + baseDomRect.height;
+    }
+    return baseRect;
 }, _SkyAffixer_getPreferredOffset = function _SkyAffixer_getPreferredOffset(placement) {
     if (!__classPrivateFieldGet(this, _SkyAffixer_baseElement, "f")) {
         return { top: 0, left: 0, bottom: 0, right: 0 };
     }
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f").getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_baseElement, "f"));
     const horizontalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).horizontalAlignment;
     const verticalAlignment = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).verticalAlignment;
     const enableAutoFit = __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).enableAutoFit;
@@ -610,8 +635,8 @@ _SkyAffixer_affixedElement = new WeakMap(), _SkyAffixer_baseElement = new WeakMa
 }, _SkyAffixer_adjustOffsetToOverflowParent = function _SkyAffixer_adjustOffsetToOverflowParent(offset, placement, baseElement) {
     const parent = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getAutoFitContextParent).call(this);
     const parentOffset = getElementOffset(parent, __classPrivateFieldGet(this, _SkyAffixer_instances, "a", _SkyAffixer_config_get).autoFitOverflowOffset);
-    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f").getBoundingClientRect();
-    const baseRect = baseElement.getBoundingClientRect();
+    const affixedRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, __classPrivateFieldGet(this, _SkyAffixer_affixedElement, "f"));
+    const baseRect = __classPrivateFieldGet(this, _SkyAffixer_instances, "m", _SkyAffixer_getRect).call(this, baseElement);
     // A pixel value representing the leeway between the edge of the overflow parent and the edge
     // of the base element before it disappears from view.
     // If the visible portion of the base element is less than this pixel value, the auto-fit
@@ -793,6 +818,7 @@ class SkyAffixDirective {
             changes.affixHorizontalAlignment ||
             changes.affixIsSticky ||
             changes.affixPlacement ||
+            changes.affixPosition ||
             changes.affixVerticalAlignment) {
             __classPrivateFieldGet(this, _SkyAffixDirective_instances, "m", _SkyAffixDirective_updateAlignment).call(this);
         }
@@ -819,12 +845,13 @@ _SkyAffixDirective_affixer = new WeakMap(), _SkyAffixDirective_affixService = ne
             horizontalAlignment: this.affixHorizontalAlignment,
             isSticky: this.affixIsSticky,
             placement: this.affixPlacement,
+            position: this.affixPosition,
             verticalAlignment: this.affixVerticalAlignment,
         });
     }
 };
 SkyAffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixDirective, deps: [{ token: i0.ElementRef }, { token: SkyAffixService }], target: i0.ɵɵFactoryTarget.Directive });
-SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
+SkyAffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyAffixDirective, selector: "[skyAffixTo]", inputs: { skyAffixTo: "skyAffixTo", affixAutoFitContext: "affixAutoFitContext", affixAutoFitOverflowOffset: "affixAutoFitOverflowOffset", affixEnableAutoFit: "affixEnableAutoFit", affixHorizontalAlignment: "affixHorizontalAlignment", affixIsSticky: "affixIsSticky", affixPlacement: "affixPlacement", affixPosition: "affixPosition", affixVerticalAlignment: "affixVerticalAlignment" }, outputs: { affixOffsetChange: "affixOffsetChange", affixOverflowScroll: "affixOverflowScroll", affixPlacementChange: "affixPlacementChange" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyAffixDirective, decorators: [{
             type: Directive,
             args: [{
@@ -844,6 +871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 type: Input
             }], affixPlacement: [{
                 type: Input
+            }], affixPosition: [{
+                type: Input
             }], affixVerticalAlignment: [{
                 type: Input
             }], affixOffsetChange: [{
@@ -1487,6 +1516,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
                 }]
         }] });
 
+var _SkyLiveAnnouncerService_instances, _SkyLiveAnnouncerService_announcerElement, _SkyLiveAnnouncerService_document, _SkyLiveAnnouncerService_idService, _SkyLiveAnnouncerService_createLiveElement;
+/**
+ * Allows for announcing messages to screen reader users through the use of a common `aria-live` element.
+ * @internal
+ */
+class SkyLiveAnnouncerService {
+    constructor() {
+        _SkyLiveAnnouncerService_instances.add(this);
+        this.announcerElementChanged = new ReplaySubject(1);
+        _SkyLiveAnnouncerService_announcerElement.set(this, void 0);
+        _SkyLiveAnnouncerService_document.set(this, inject(DOCUMENT));
+        _SkyLiveAnnouncerService_idService.set(this, inject(SkyIdService));
+        __classPrivateFieldSet(this, _SkyLiveAnnouncerService_announcerElement, __classPrivateFieldGet(this, _SkyLiveAnnouncerService_instances, "m", _SkyLiveAnnouncerService_createLiveElement).call(this), "f");
+        this.announcerElementChanged.next(__classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f"));
+    }
+    /**
+     * 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 (!__classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f")) {
+            __classPrivateFieldSet(this, _SkyLiveAnnouncerService_announcerElement, __classPrivateFieldGet(this, _SkyLiveAnnouncerService_instances, "m", _SkyLiveAnnouncerService_createLiveElement).call(this), "f");
+            this.announcerElementChanged.next(__classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f"));
+        }
+        const politeness = args?.politeness ?? 'polite';
+        this.clear();
+        __classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f").setAttribute('aria-live', politeness);
+        __classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f").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 (__classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f")) {
+            __classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f").textContent = '';
+        }
+    }
+    /**
+     * @internal
+     */
+    ngOnDestroy() {
+        __classPrivateFieldGet(this, _SkyLiveAnnouncerService_announcerElement, "f")?.remove();
+        __classPrivateFieldSet(this, _SkyLiveAnnouncerService_announcerElement, undefined, "f");
+        this.announcerElementChanged.next(undefined);
+    }
+}
+_SkyLiveAnnouncerService_announcerElement = new WeakMap(), _SkyLiveAnnouncerService_document = new WeakMap(), _SkyLiveAnnouncerService_idService = new WeakMap(), _SkyLiveAnnouncerService_instances = new WeakSet(), _SkyLiveAnnouncerService_createLiveElement = function _SkyLiveAnnouncerService_createLiveElement() {
+    const elementClass = 'sky-live-announcer-element';
+    const previousElements = __classPrivateFieldGet(this, _SkyLiveAnnouncerService_document, "f").getElementsByClassName(elementClass);
+    const liveEl = __classPrivateFieldGet(this, _SkyLiveAnnouncerService_document, "f").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 = __classPrivateFieldGet(this, _SkyLiveAnnouncerService_idService, "f").generateId();
+    __classPrivateFieldGet(this, _SkyLiveAnnouncerService_document, "f").body.appendChild(liveEl);
+    return liveEl;
+};
+SkyLiveAnnouncerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyLiveAnnouncerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyLiveAnnouncerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", 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.
@@ -1831,6 +1934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
 /**
  * Provides arguments for the number to format.
  * @deprecated Use the `SkyNumericOptions` interface instead.
+ * @internal
  */
 class NumericOptions {
     constructor() {
@@ -1840,6 +1944,14 @@ class NumericOptions {
         this.iso = 'USD';
         this.truncate = true;
         this.truncateAfter = 1000;
+        const logService = new SkyLogService(new SkyAppFormat());
+        logService
+            .deprecated('NumericOptions', {
+            deprecationMajorVersion: 7,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/numeric',
+            replacementRecommendation: 'Use the `SkyNumericOptions` interface instead.',
+        })
+            .then();
     }
 }
 
@@ -1942,9 +2054,17 @@ class SkyNumericService {
         if (isNaN(value) || value === null) {
             return '';
         }
+        const numericOptions = {
+            digits: 0,
+            format: 'number',
+            currencySign: 'standard',
+            iso: 'USD',
+            truncateAfter: 1000,
+            ...options,
+        };
         const decimalPlaceRegExp = /\.0+$|(\.[0-9]*[1-9])0+$/;
-        const locale = options.locale || this.currentLocale;
-        const digits = options.digits || 0;
+        const locale = numericOptions.locale || this.currentLocale;
+        const digits = numericOptions.digits || 0;
         // Get the symbol for the number after rounding, since rounding could push the number
         // into a different symbol range.
         let roundedNumber = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_roundNumber).call(this, value, digits);
@@ -1952,9 +2072,9 @@ class SkyNumericService {
         let suffix = '';
         for (let i = 0; i < __classPrivateFieldGet(this, _SkyNumericService_symbolIndex, "f").length; i++) {
             let symbol = __classPrivateFieldGet(this, _SkyNumericService_symbolIndex, "f")[i];
-            if (options.truncate &&
-                options.truncateAfter !== undefined &&
-                roundedNumberAbs >= options.truncateAfter &&
+            if (numericOptions.truncate &&
+                numericOptions.truncateAfter !== undefined &&
+                roundedNumberAbs >= numericOptions.truncateAfter &&
                 roundedNumberAbs >= symbol.value) {
                 roundedNumber = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_roundNumber).call(this, value / symbol.value, digits);
                 if (Math.abs(roundedNumber) === 1000 && i > 0) {
@@ -1971,7 +2091,7 @@ class SkyNumericService {
         let digitsFormatted;
         let isDecimal = false;
         // Checks the string entered for format. Using toLowerCase to ignore case.
-        switch (options.format?.toLowerCase()) {
+        switch (numericOptions.format?.toLowerCase()) {
             // In a case where a decimal value was not shortened and
             // the digit input is 2 or higher, it forces 2 digits.
             // For example, this prevents a value like $15.50 from displaying as $15.5.
@@ -1979,8 +2099,8 @@ class SkyNumericService {
             // three decimal digits.
             case 'currency':
                 isDecimal = value % 1 !== 0;
-                if (options.minDigits) {
-                    digitsFormatted = `1.${options.minDigits}-${digits}`;
+                if (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
                 }
                 else if (isDecimal && digits >= 2) {
                     digitsFormatted = `1.2-${digits}`;
@@ -1988,12 +2108,12 @@ class SkyNumericService {
                 else {
                     digitsFormatted = `1.0-${digits}`;
                 }
-                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, options.iso, 
+                output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digitsFormatted, numericOptions.iso, 
                 // Angular 5+ needs a string for this parameter, but Angular 4 needs a boolean.
                 // To support both versions we can supply 'symbol' which will evaluate truthy for Angular 4
                 // and the appropriate string value for Angular 5+.
                 // See: https://angular.io/api/common/CurrencyPipe#parameters
-                'symbol', options.currencySign);
+                'symbol', numericOptions.currencySign);
                 //   ^^^^^^ Result can't be null since the sanitized input is always a number.
                 break;
             // The following is a catch-all to ensure that if
@@ -2002,10 +2122,10 @@ class SkyNumericService {
             default:
                 // Ensures localization of the number to ensure comma and
                 // decimal separator
-                if (options.minDigits) {
-                    digitsFormatted = `1.${options.minDigits}-${digits}`;
+                if (numericOptions.minDigits) {
+                    digitsFormatted = `1.${numericOptions.minDigits}-${digits}`;
                 }
-                else if (options.truncate) {
+                else if (numericOptions.truncate) {
                     digitsFormatted = `1.0-${digits}`;
                 }
                 else {
@@ -2015,7 +2135,7 @@ class SkyNumericService {
                 //   ^^^^^^ Result can't be null since the sanitized input is always a number.
                 break;
         }
-        if (options.truncate) {
+        if (numericOptions.truncate) {
             output = __classPrivateFieldGet(this, _SkyNumericService_instances, "m", _SkyNumericService_replaceShortenSymbol).call(this, output);
         }
         return output;
@@ -2245,6 +2365,7 @@ class SkyOverlayContext {
 }
 
 var _SkyOverlayComponent_instances, _SkyOverlayComponent_backdropClick, _SkyOverlayComponent_backdropClickObs, _SkyOverlayComponent_changeDetector, _SkyOverlayComponent_closed, _SkyOverlayComponent_closedObs, _SkyOverlayComponent_context, _SkyOverlayComponent_coreAdapter, _SkyOverlayComponent_injector, _SkyOverlayComponent_ngUnsubscribe, _SkyOverlayComponent_router, _SkyOverlayComponent_routerSubscription, _SkyOverlayComponent_applyConfig, _SkyOverlayComponent_addBackdropClickListener, _SkyOverlayComponent_addRouteListener, _SkyOverlayComponent_removeRouteListener;
+const POSITION_DEFAULT = 'fixed';
 /**
  * Omnibar is 1000.
  * See: https://github.com/blackbaud/auth-client/blob/master/src/omnibar/omnibar.ts#L139
@@ -2276,6 +2397,7 @@ class SkyOverlayComponent {
         this.showBackdrop = false;
         this.zIndex = `${++uniqueZIndex}`;
         this.clipPath$ = new ReplaySubject(1);
+        this.position = POSITION_DEFAULT;
         _SkyOverlayComponent_backdropClick.set(this, void 0);
         _SkyOverlayComponent_backdropClickObs.set(this, void 0);
         _SkyOverlayComponent_changeDetector.set(this, void 0);
@@ -2358,6 +2480,7 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     this.wrapperClass = config.wrapperClass || '';
     this.showBackdrop = !!config.showBackdrop;
     this.enablePointerEvents = !!config.enablePointerEvents;
+    this.position = config.position || POSITION_DEFAULT;
     __classPrivateFieldGet(this, _SkyOverlayComponent_changeDetector, "f").markForCheck();
 }, _SkyOverlayComponent_addBackdropClickListener = function _SkyOverlayComponent_addBackdropClickListener() {
     fromEvent(window.document, 'click')
@@ -2392,10 +2515,10 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     }
 };
 SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"'sky-overlay-position-' + position + ' ' + wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-position-absolute{position:absolute}.sky-overlay-position-fixed{position:fixed}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { id: [{
@@ -3642,5 +3765,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NumericOptions, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+export { NumericOptions, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, 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