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

package/fesm2022/skyux-core.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, inject, EnvironmentInjector, createEnvironmentInjector, createComponent, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding, ApplicationRef } from '@angular/core';
-import * as i5 from '@angular/common';
+import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Directive, Input, Output, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, HostBinding, ApplicationRef } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { Subject, fromEvent, ReplaySubject, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
+import { Subject, Subscription, ReplaySubject, fromEvent, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
 import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
+import { ViewportRuler } from '@angular/cdk/overlay';
 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';
+import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
+import { Router, NavigationStart } from '@angular/router';
+import * as i1$2 from '@angular/platform-browser';
 
 /**
  * @deprecated The `SkyCoreAdapterService` no longer needs the `SkyCoreAdapterModule`.
@@ -431,12 +431,17 @@ class SkyAffixer {
     #placementChange;
     #placementChangeObs;
     #renderer;
-    #resizeListener;
-    #scrollListeners;
+    #scrollChange = new Subject();
+    #viewportListeners;
+    #viewportRuler;
+    #zone;
     #_config = DEFAULT_AFFIX_CONFIG;
-    constructor(affixedElement, renderer) {
+    #scrollChangeListener = () => this.#scrollChange.next();
+    constructor(affixedElement, renderer, viewportRuler, zone) {
         this.#affixedElement = affixedElement;
         this.#renderer = renderer;
+        this.#viewportRuler = viewportRuler;
+        this.#zone = zone;
         this.#offsetChange = new Subject();
         this.#overflowScroll = new Subject();
         this.#placementChange = new Subject();
@@ -456,8 +461,7 @@ class SkyAffixer {
         this.#overflowParents = getOverflowParents(baseElement);
         this.#affix();
         if (this.#config.isSticky) {
-            this.#addScrollListeners();
-            this.#addResizeListener();
+            this.#addViewportListeners();
         }
     }
     getConfig() {
@@ -479,6 +483,7 @@ class SkyAffixer {
         this.#placementChange.complete();
         this.#offsetChange.complete();
         this.#overflowScroll.complete();
+        this.#scrollChange.complete();
     }
     #affix() {
         const offset = this.#getOffset();
@@ -502,8 +507,11 @@ class SkyAffixer {
             top: 0,
         };
         if (this.#config.position === 'absolute') {
-            autoFitOverflowOffset.top =
-                (autoFitOverflowOffset.top || 0) + window.scrollY;
+            const { top, left } = this.#viewportRuler.getViewportScrollPosition();
+            autoFitOverflowOffset.top = (autoFitOverflowOffset.top || 0) + top;
+            autoFitOverflowOffset.left = (autoFitOverflowOffset.left || 0) + left;
+            autoFitOverflowOffset.bottom = (autoFitOverflowOffset.bottom || 0) + top;
+            autoFitOverflowOffset.right = (autoFitOverflowOffset.right || 0) + left;
         }
         do {
             offset = this.#getPreferredOffset(placement);
@@ -545,8 +553,11 @@ class SkyAffixer {
             height: baseDomRect.height,
         };
         if (this.#config.position === 'absolute') {
-            baseRect.top += window.scrollY;
-            baseRect.bottom = baseRect.top + baseDomRect.height;
+            const { left, top } = this.#viewportRuler.getViewportScrollPosition();
+            baseRect.top += top;
+            baseRect.left += left;
+            baseRect.bottom += top;
+            baseRect.right += left;
         }
         return baseRect;
     }
@@ -706,8 +717,7 @@ class SkyAffixer {
         }
     }
     #reset() {
-        this.#removeScrollListeners();
-        this.#removeResizeListener();
+        this.#removeViewportListeners();
         this.#overflowParents = [];
         this.#config =
             this.#baseElement =
@@ -739,47 +749,46 @@ class SkyAffixer {
             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();
+    #addViewportListeners() {
+        this.#viewportListeners = new Subscription();
+        // Resize and orientation changes.
+        this.#viewportListeners.add(this.#viewportRuler.change().subscribe(() => {
+            this.#affix();
+        }));
+        this.#viewportListeners.add(this.#scrollChange.subscribe(() => {
+            this.#affix();
+            this.#overflowScroll.next();
+        }));
+        // Listen for scroll events on the window, visual viewport, and any overflow parents.
+        // https://developer.chrome.com/blog/visual-viewport-api/#events-only-fire-when-the-visual-viewport-changes
+        this.#zone.runOutsideAngular(() => {
+            [window, window.visualViewport, ...this.#overflowParents].forEach((parentElement) => {
+                parentElement?.addEventListener('scroll', this.#scrollChangeListener);
             });
         });
     }
-    #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;
-        }
+    #removeViewportListeners() {
+        this.#viewportListeners?.unsubscribe();
+        this.#zone.runOutsideAngular(() => {
+            [window, window.visualViewport, ...this.#overflowParents].forEach((parentElement) => {
+                parentElement?.removeEventListener('scroll', this.#scrollChangeListener);
+            });
+        });
     }
 }
 
 class SkyAffixService {
-    #renderer;
-    constructor(rendererFactory) {
-        this.#renderer = rendererFactory.createRenderer(undefined, null);
-    }
+    #renderer = inject(RendererFactory2).createRenderer(undefined, null);
+    #viewportRuler = inject(ViewportRuler);
+    #zone = inject(NgZone);
     /**
      * Creates an instance of [[SkyAffixer]].
      * @param affixed The element to be affixed.
      */
     createAffixer(affixed) {
-        return new SkyAffixer(affixed.nativeElement, this.#renderer);
+        return new SkyAffixer(affixed.nativeElement, this.#renderer, this.#viewportRuler, this.#zone);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAffixService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAffixService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAffixService, decorators: [{
@@ -787,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+        }] });
 
 /**
  * Affixes the host element to a base element.
@@ -988,6 +997,181 @@ var SkyDockLocation;
     SkyDockLocation[SkyDockLocation["ElementBottom"] = 2] = "ElementBottom";
 })(SkyDockLocation || (SkyDockLocation = {}));
 
+/**
+ * @deprecated The `SkyDockModule` is no longer needed and can be removed from your application.
+ */
+class SkyDockModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * 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.2.1", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppWindowRef, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Angular service for creating and rendering a dynamic component.
+ * @internal
+ */
+class SkyDynamicComponentService {
+    #applicationRef;
+    #renderer;
+    #windowRef;
+    #environmentInjector = inject(EnvironmentInjector);
+    constructor(applicationRef, windowRef, rendererFactory) {
+        this.#applicationRef = applicationRef;
+        this.#windowRef = windowRef;
+        // Based on suggestions from https://github.com/angular/angular/issues/17824
+        // for accessing an instance of Renderer2 in a service since Renderer2 can't
+        // be injected into a service.  Passing undefined for both parameters results
+        // in the default renderer which is what we want here.
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    /**
+     * Creates an instance of the specified component and adds it to the specified location
+     * on the page.
+     */
+    createComponent(componentType, options) {
+        options ||= {
+            location: SkyDynamicComponentLocation.BodyBottom,
+        };
+        const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector ?? this.#environmentInjector);
+        let componentRef;
+        if (options.viewContainerRef) {
+            componentRef = options.viewContainerRef.createComponent(componentType, {
+                environmentInjector,
+            });
+        }
+        else {
+            componentRef = createComponent(componentType, {
+                environmentInjector,
+            });
+            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.2.1", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
+/**
+ * Angular service for creating and rendering a dynamic component.
+ * @internal
+ * @deprecated Use `SkyDynamicComponentService` to create a standalone component instead.
+ */
+class SkyDynamicComponentLegacyService extends SkyDynamicComponentService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentLegacyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentLegacyService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentLegacyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }] });
+
 /**
  * @internal
  */
@@ -1098,29 +1282,22 @@ function sortByStackOrder(a, b) {
  * @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;
-    }
+    #changeDetector = inject(ChangeDetectorRef);
+    #domAdapter = inject(SkyDockDomAdapterService);
+    #dynamicComponentSvc = inject(SkyDynamicComponentService);
+    #elementRef = inject(ElementRef);
+    #environmentInjector = inject(EnvironmentInjector);
     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 componentRef = this.#dynamicComponentSvc.createComponent(component, {
+            environmentInjector: this.#environmentInjector,
+            providers: config.providers,
+            viewContainerRef: this.target,
         });
         const stackOrder = config.stackOrder !== null && config.stackOrder !== undefined
             ? config.stackOrder
@@ -1182,13 +1359,13 @@ class SkyDockComponent {
         }
         return this.#itemRefs[0].stackOrder + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", 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.2.1", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDockComponent, isStandalone: true, 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.2.1", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left: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: [{
+            args: [{ standalone: true, 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"] }]
+        }], propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
@@ -1196,167 +1373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                     }]
             }] } });
 
-class SkyDockModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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.2.1", ngImport: i0, type: SkyAppWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppWindowRef, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppWindowRef, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-/**
- * Angular service for creating and rendering a dynamic component.
- * @internal
- */
-class SkyDynamicComponentService {
-    #applicationRef;
-    #renderer;
-    #windowRef;
-    #environmentInjector = inject(EnvironmentInjector);
-    constructor(applicationRef, windowRef, rendererFactory) {
-        this.#applicationRef = applicationRef;
-        this.#windowRef = windowRef;
-        // Based on suggestions from https://github.com/angular/angular/issues/17824
-        // for accessing an instance of Renderer2 in a service since Renderer2 can't
-        // be injected into a service.  Passing undefined for both parameters results
-        // in the default renderer which is what we want here.
-        this.#renderer = rendererFactory.createRenderer(undefined, null);
-    }
-    /**
-     * Creates an instance of the specified component and adds it to the specified location
-     * on the page.
-     */
-    createComponent(componentType, options) {
-        options ||= {
-            location: SkyDynamicComponentLocation.BodyBottom,
-        };
-        const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector ?? this.#environmentInjector);
-        let componentRef;
-        if (options.viewContainerRef) {
-            componentRef = options.viewContainerRef.createComponent(componentType, {
-                environmentInjector,
-            });
-        }
-        else {
-            componentRef = createComponent(componentType, {
-                environmentInjector,
-            });
-            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.2.1", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
-
 /**
  * This service docks components to specific areas on the page.
  */
@@ -1433,12 +1449,12 @@ class SkyDockService {
         SkyDockService.dockRef = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDockService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
 
@@ -1927,6 +1943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+/* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
@@ -1941,6 +1958,7 @@ const RESOURCES = {
         skyux_numeric_trillions_symbol: { message: 'T' },
     },
 };
+SkyLibResourcesService.addResources(RESOURCES);
 class SkyCoreResourcesProvider {
     getString(localeInfo, name) {
         return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
@@ -2260,12 +2278,12 @@ class SkyNumericService {
         return this.#resourcesSvc.getStringForLocale({ locale: 'en_US' }, key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyNumericService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyNumericService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyNumericService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; } });
 
@@ -2419,10 +2437,60 @@ class SkyOverlayInstance {
     }
 }
 
+/**
+ * @deprecated The `SkyOverlayModule` is no longer needed and can be removed from your application.
+ */
+class SkyOverlayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
 /**
  * @internal
  */
-const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+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.2.1", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
 /**
  * Contextual information for each overlay.
@@ -2434,6 +2502,11 @@ class SkyOverlayContext {
     }
 }
 
+/**
+ * @internal
+ */
+const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+
 const POSITION_DEFAULT = 'fixed';
 /**
  * Omnibar is 1000.
@@ -2461,16 +2534,17 @@ class SkyOverlayComponent {
     }
     #backdropClick;
     #backdropClickObs;
-    #changeDetector;
     #closed;
     #closedObs;
+    #ngUnsubscribe;
+    #routerSubscription;
+    #changeDetector;
     #context;
     #coreAdapter;
-    #injector;
-    #ngUnsubscribe;
+    #environmentInjector;
+    #idSvc;
     #router;
-    #routerSubscription;
-    constructor(changeDetector, injector, coreAdapter, context, idSvc, router) {
+    constructor() {
         this.wrapperClass = '';
         this.enablePointerEvents = false;
         this.showBackdrop = false;
@@ -2478,12 +2552,13 @@ class SkyOverlayComponent {
         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.#changeDetector = inject(ChangeDetectorRef);
+        this.#context = inject(SkyOverlayContext);
+        this.#coreAdapter = inject(SkyCoreAdapterService);
+        this.#environmentInjector = inject(EnvironmentInjector);
+        this.#idSvc = inject(SkyIdService);
+        this.#router = inject(Router, { optional: true });
+        this.id = this.#idSvc.generateId();
         this.#backdropClick = new Subject();
         this.#closed = new Subject();
         this.#backdropClickObs = this.#backdropClick.asObservable();
@@ -2512,22 +2587,19 @@ class SkyOverlayComponent {
             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)),
-                    },
+        const environmentInjector = createEnvironmentInjector([
+            {
+                provide: SKY_STACKING_CONTEXT,
+                useValue: {
+                    zIndex: new BehaviorSubject(parseInt(this.zIndex, 10))
+                        .asObservable()
+                        .pipe(takeUntil(this.#ngUnsubscribe)),
                 },
-                ...providers,
-            ],
-            parent: this.#injector,
-        });
+            },
+            ...providers,
+        ], this.#environmentInjector);
         const componentRef = this.targetRef.createComponent(component, {
-            injector,
+            environmentInjector,
         });
         // Run an initial change detection cycle after the component has been created.
         componentRef.changeDetectorRef.detectChanges();
@@ -2539,7 +2611,9 @@ class SkyOverlayComponent {
             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);
+        return this.targetRef.createEmbeddedView(templateRef, context, {
+            injector: this.#environmentInjector,
+        });
     }
     updateClipPath(clipPath) {
         this.clipPath$.next(clipPath);
@@ -2585,15 +2659,13 @@ class SkyOverlayComponent {
             this.#routerSubscription = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyOverlayComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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: [{
+            args: [{ standalone: true, selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], 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 []; }, propDecorators: { id: [{
                 type: HostBinding,
                 args: ['id']
             }], overlayContentRef: [{
@@ -2616,61 +2688,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                     }]
             }] } });
 
-class SkyOverlayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule, declarations: [SkyOverlayComponent], imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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.2.1", ngImport: i0, type: SkyOverlayAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayAdapterService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayAdapterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-
 /**
  * This service is used to create new overlays.
  * @internal
@@ -2679,8 +2696,11 @@ class SkyOverlayService {
     static { this.overlays = []; }
     #adapter = inject(SkyOverlayAdapterService);
     #applicationRef = inject(ApplicationRef);
-    #dynamicComponentSvc = inject(SkyDynamicComponentService);
+    #dynamicComponentSvc;
     #environmentInjector = inject(EnvironmentInjector);
+    constructor(dynamicComponentSvc) {
+        this.#dynamicComponentSvc = dynamicComponentSvc;
+    }
     /**
      * Creates an empty overlay. Use the returned `SkyOverlayInstance` to append content.
      * @param config Configuration for the overlay.
@@ -2764,7 +2784,7 @@ class SkyOverlayService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayService, decorators: [{
@@ -2772,7 +2792,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
+/**
+ * This service is used to create new overlays.
+ * @internal
+ * @deprecated Use `SkyOverlayService` to open a standalone component instead.
+ */
+class SkyOverlayLegacyService extends SkyOverlayService {
+    /* istanbul ignore next */
+    constructor(dynamicComponentSvc) {
+        super(dynamicComponentSvc);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayLegacyService, deps: [{ token: SkyDynamicComponentLegacyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayLegacyService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyOverlayLegacyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDynamicComponentLegacyService }]; } });
 
 class SkyPercentPipe {
     get defaultLocale() {
@@ -3280,7 +3319,7 @@ class SkyAppTitleService {
             this.#title.setTitle(args.titleParts.join(' - '));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$1.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppTitleService, deps: [{ token: i1$2.Title }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppTitleService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyAppTitleService, decorators: [{
@@ -3288,7 +3327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Title }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Title }]; } });
 
 /**
  * Trims whitespace in each text node that is a direct descendent of the current element.
@@ -3849,5 +3888,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.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, 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, 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, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map