@skyux/core 11.15.1 → 11.17.0

package/fesm2022/skyux-core.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-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, Renderer2, HostListener } from '@angular/core';
+import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Directive, Input, Output, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, Subscription, ReplaySubject, fromEvent, of, BehaviorSubject, Observable, filter, map, distinctUntilChanged, shareReplay, throttle, animationFrames, take, takeUntil as takeUntil$1, concat, animationFrameScheduler } from 'rxjs';
+import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, throttle, animationFrames, take, takeUntil as takeUntil$1, BehaviorSubject, concat, animationFrameScheduler } from 'rxjs';
 import { takeUntil, debounceTime, switchMap, map as map$1 } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import { Router, NavigationStart } from '@angular/router';
@@ -24,6 +25,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{}]
         }] });
 
+/**
+ * @internal
+ */
+const SKY_BREAKPOINTS = ['xs', 'sm', 'md', 'lg'];
+
+/**
+ * Represents all available media breakpoints.
+ * @deprecated Use `SkyBreakpoint` instead.
+ */
 var SkyMediaBreakpoints;
 (function (SkyMediaBreakpoints) {
     /**
@@ -44,6 +54,42 @@ var SkyMediaBreakpoints;
     SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
 })(SkyMediaBreakpoints || (SkyMediaBreakpoints = {}));
 
+const breakpointLookup = new Map([
+    [SkyMediaBreakpoints.xs, 'xs'],
+    [SkyMediaBreakpoints.sm, 'sm'],
+    [SkyMediaBreakpoints.md, 'md'],
+    [SkyMediaBreakpoints.lg, 'lg'],
+]);
+const legacyLookup = new Map([
+    ['xs', SkyMediaBreakpoints.xs],
+    ['sm', SkyMediaBreakpoints.sm],
+    ['md', SkyMediaBreakpoints.md],
+    ['lg', SkyMediaBreakpoints.lg],
+]);
+/**
+ * Whether the value is of type `SkyBreakpoint`.
+ * @internal
+ */
+function isSkyBreakpoint(value) {
+    return (value !== null &&
+        value !== undefined &&
+        SKY_BREAKPOINTS.includes(value));
+}
+/**
+ * Transforms a `SkyMediaBreakpoints` value to `SkyBreakpoint`.
+ * @internal
+ */
+function toSkyBreakpoint(breakpoint) {
+    return breakpointLookup.get(breakpoint);
+}
+/**
+ * Transforms a `SkyBreakpoint` value to `SkyMediaBreakpoints`.
+ * @internal
+ */
+function toSkyMediaBreakpoints(breakpoint) {
+    return legacyLookup.get(breakpoint);
+}
+
 const SKY_TABBABLE_SELECTOR = [
     'a[href]',
     'area[href]',
@@ -66,35 +112,19 @@ class SkyCoreAdapterService {
      * 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`.
+     * @param breakpoint - The breakpoint to determine which class gets set.
+     * For example a breakpoint of "xs" will set a CSS class of "sky-responsive-container-xs".
+     * @deprecated Use the `SkyResponsiveHostDirective` instead.
      */
     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;
-            }
+        for (const breakpointType of SKY_BREAKPOINTS) {
+            this.#renderer.removeClass(nativeEl, `sky-responsive-container-${breakpointType}`);
         }
-        this.#renderer.addClass(nativeEl, newClass);
+        if (!isSkyBreakpoint(breakpoint)) {
+            breakpoint = toSkyBreakpoint(breakpoint);
+        }
+        this.#renderer.addClass(nativeEl, `sky-responsive-container-${breakpoint}`);
     }
     /**
      * This method temporarily enables/disables pointer events.
@@ -1482,7 +1512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     }]
             }] } });
 
-var _a$2;
+var _a$1;
 /**
  * This service docks components to specific areas on the page.
  */
@@ -1492,7 +1522,7 @@ class SkyDockService {
      * Returns all docked items.
      */
     get items() {
-        return _a$2._items;
+        return _a$1._items;
     }
     #dynamicComponentSvc;
     #options;
@@ -1505,19 +1535,19 @@ class SkyDockService {
      * @param config Options that affect the docking action.
      */
     insertComponent(component, config) {
-        const dockRef = (_a$2.dockRef =
-            _a$2.dockRef || this.#createDock());
+        const dockRef = (_a$1.dockRef =
+            _a$1.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);
-            _a$2._items.splice(_a$2._items.indexOf(item), 1);
-            if (_a$2._items.length === 0) {
+            _a$1._items.splice(_a$1._items.indexOf(item), 1);
+            if (_a$1._items.length === 0) {
                 this.#destroyDock();
             }
         });
-        _a$2._items.push(item);
-        _a$2._items.sort(sortByStackOrder);
+        _a$1._items.push(item);
+        _a$1._items.sort(sortByStackOrder);
         return item;
     }
     /**
@@ -1555,13 +1585,13 @@ class SkyDockService {
         return dockRef;
     }
     #destroyDock() {
-        this.#dynamicComponentSvc.removeComponent(_a$2.dockRef);
-        _a$2.dockRef = undefined;
+        this.#dynamicComponentSvc.removeComponent(_a$1.dockRef);
+        _a$1.dockRef = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDockService, providedIn: 'root' }); }
 }
-_a$2 = SkyDockService;
+_a$1 = SkyDockService;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDockService, decorators: [{
             type: Injectable,
             args: [{
@@ -1955,22 +1985,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }] }] });
 
 /**
- * @deprecated The `SkyMediaQueryService` no longer needs the `SkyMediaQueryModule`.
- * The `SkyMediaQueryModule` can be removed from your project.
+ * Used to override a breakpoint observer for specific execution contexts.
+ * @internal
  */
-class SkyMediaQueryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule }); }
+const SKY_BREAKPOINT_OBSERVER = new InjectionToken('SKY_BREAKPOINT_OBSERVER');
+
+const errorTest = /ResizeObserver loop completed with undelivered notifications/i;
+let errorLogRegistered = false;
+let originalOnError = undefined;
+const errorHandler = (event) => {
+    if (errorTest.test(event.message)) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+    return undefined;
+};
+const onError = (event) => {
+    const message = typeof event === 'string' ? event : event.message;
+    // This is necessary to prevent the test runner from failing on errors, but challenging to reliably test.
+    /* istanbul ignore next */
+    if (errorTest.test(message)) {
+        if (event instanceof ErrorEvent) {
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        return false;
+    }
+    return originalOnError?.call(window, event);
+};
+/**
+ * Service to create rxjs observables for changes to the content box dimensions of elements.
+ */
+class SkyResizeObserverService {
+    #ngUnsubscribe = new Subject();
+    #resizeObserver = new ResizeObserver((entries) => this.#resizeSubject.next(entries));
+    #resizeSubject = new Subject();
+    #tracking = new Map();
+    #window = inject(SkyAppWindowRef);
+    #zone = inject(NgZone);
+    constructor() {
+        this.#expectWindowError();
+        // Because the resize observer is a native browser API, it does not shut down
+        // synchronously when the service is destroyed. Leave the error handling
+        // accommodation in place until the application is destroyed. This also works
+        // for the test runner.
+        inject(ApplicationRef).onDestroy(() => this.#resetWindowError());
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#resizeObserver.disconnect();
+    }
+    /**
+     * Create rxjs observable to get size changes for an element ref.
+     */
+    observe(element) {
+        const checkTracking = this.#tracking.has(element.nativeElement);
+        if (!checkTracking) {
+            this.#tracking.set(element.nativeElement, new Observable((observer) => {
+                const subscription = this.#resizeSubject.subscribe(observer);
+                this.#resizeObserver?.observe(element.nativeElement);
+                return () => {
+                    this.#resizeObserver?.unobserve(element.nativeElement);
+                    subscription.unsubscribe();
+                    this.#tracking.delete(element.nativeElement);
+                };
+            }).pipe(filter(Boolean), filter((entries) => entries.some((entry) => entry.target === element.nativeElement)), map((entries) => entries.find((entry) => entry.target === element.nativeElement)), 
+            // Ignore subpixel changes.
+            distinctUntilChanged((a, b) => Math.round(a.contentRect.width) ===
+                Math.round(b.contentRect.width) &&
+                Math.round(a.contentRect.height) ===
+                    Math.round(b.contentRect.height)), 
+            // Emit the last value for late subscribers. Track references so it
+            // un-observes when all subscribers are gone.
+            shareReplay({ bufferSize: 1, refCount: true }), 
+            // Only emit prior to an animation frame to prevent layout thrashing.
+            throttle(() => animationFrames().pipe(take(1)), {
+                leading: false,
+                trailing: true,
+            }), takeUntil$1(this.#ngUnsubscribe)));
+        }
+        return this.#tracking.get(element.nativeElement);
+    }
+    #expectWindowError() {
+        if (!errorLogRegistered) {
+            errorLogRegistered = true;
+            // ResizeObserver throws an error when it is disconnected while it is
+            // still observing an element. When an element is no longer observed, this
+            // is not a concern.
+            this.#zone.runOutsideAngular(() => this.#window.nativeWindow.addEventListener('error', errorHandler));
+        }
+        if (this.#window.nativeWindow.onerror !== onError) {
+            originalOnError = this.#window.nativeWindow.onerror;
+            this.#window.nativeWindow.onerror = onError;
+        }
+    }
+    #resetWindowError() {
+        this.#window.nativeWindow.removeEventListener('error', errorHandler);
+        if (originalOnError) {
+            this.#window.nativeWindow.onerror = originalOnError;
+            originalOnError = undefined;
+        }
+        errorLogRegistered = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
-            type: NgModule,
-            args: [{}]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const QUERIES$1 = [
+    ['xs', (width) => width > 0 && width <= 767],
+    ['sm', (width) => width > 767 && width <= 991],
+    ['md', (width) => width > 991 && width <= 1199],
+    ['lg', (width) => width > 1199],
+];
+/**
+ * Emits when the width of the host container changes.
+ * @internal
+ */
+class SkyContainerBreakpointObserver {
+    #elementRef = inject(ElementRef);
+    #resizeObserver = inject(SkyResizeObserverService);
+    get breakpointChange() {
+        return this.#breakpointChangeObs;
+    }
+    #breakpoint;
+    #breakpointChange = new ReplaySubject(1);
+    #breakpointChangeObs = this.#breakpointChange.asObservable();
+    constructor() {
+        this.#resizeObserver
+            .observe(this.#elementRef)
+            .pipe(takeUntilDestroyed())
+            .subscribe((entry) => {
+            this.#checkBreakpoint(entry.contentRect.width);
+        });
+        afterNextRender(() => {
+            this.#checkWidth();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        this.#breakpointChange.complete();
+    }
+    #checkBreakpoint(width) {
+        for (const [breakpoint, check] of QUERIES$1) {
+            if (breakpoint !== this.#breakpoint && check(width)) {
+                this.#breakpoint = breakpoint;
+                this.#notifyBreakpointChange(breakpoint);
+                break;
+            }
+        }
+    }
+    #checkWidth() {
+        const width = this.#elementRef.nativeElement.offsetWidth ?? 0;
+        this.#checkBreakpoint(width);
+    }
+    #notifyBreakpointChange(breakpoint) {
+        this.#breakpointChange.next(breakpoint);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyContainerBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyContainerBreakpointObserver }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyContainerBreakpointObserver, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const QUERIES = new Map([
+    ['xs', '(max-width: 767px)'],
+    ['sm', '(min-width: 768px) and (max-width: 991px)'],
+    ['md', '(min-width: 992px) and (max-width: 1199px)'],
+    ['lg', '(min-width: 1200px)'],
+]);
+/**
+ * Emits when the viewport width changes.
+ * @internal
+ */
+class SkyMediaBreakpointObserver {
+    get breakpointChange() {
+        return this.#breakpointChangeObs;
+    }
+    #breakpointChange = new ReplaySubject(1);
+    #breakpointChangeObs = this.#breakpointChange.asObservable();
+    #listeners = new Map();
+    constructor() {
+        for (const [breakpoint, query] of QUERIES.entries()) {
+            const mq = matchMedia(query);
+            const listener = (evt) => {
+                if (evt.matches) {
+                    this.#notifyBreakpointChange(breakpoint);
+                }
+            };
+            mq.addEventListener('change', listener);
+            if (mq.matches) {
+                this.#notifyBreakpointChange(breakpoint);
+            }
+            this.#listeners.set(mq, listener);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        this.#breakpointChange.complete();
+        for (const [query, listener] of this.#listeners.entries()) {
+            query.removeEventListener('change', listener);
+        }
+        this.#listeners.clear();
+    }
+    #notifyBreakpointChange(breakpoint) {
+        this.#breakpointChange.next(breakpoint);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaBreakpointObserver, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaBreakpointObserver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-var _a$1;
 const DEFAULT_BREAKPOINT$1 = SkyMediaBreakpoints.md;
+/**
+ * Utility used to subscribe to viewport and container breakpoint changes.
+ */
 class SkyMediaQueryService {
+    #breakpointObserver = inject(SkyMediaBreakpointObserver);
+    /**
+     * Emits when the breakpoint changes.
+     */
+    get breakpointChange() {
+        return this.#breakpointObserver.breakpointChange;
+    }
     /**
      * The size for the `xs` breakpoint.
      * @default "(max-width: 767px)"
@@ -1993,95 +2249,40 @@ class SkyMediaQueryService {
     static { this.lg = '(min-width: 1200px)'; }
     /**
      * Returns the current breakpoint.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     get current() {
-        return this.#currentBreakpoint;
-    }
-    #currentSubject = new BehaviorSubject(DEFAULT_BREAKPOINT$1);
-    #currentBreakpoint = DEFAULT_BREAKPOINT$1;
-    #breakpoints = [
-        {
-            mediaQueryString: _a$1.xs,
-            name: SkyMediaBreakpoints.xs,
-        },
-        {
-            mediaQueryString: _a$1.sm,
-            name: SkyMediaBreakpoints.sm,
-        },
-        {
-            mediaQueryString: _a$1.md,
-            name: SkyMediaBreakpoints.md,
-        },
-        {
-            mediaQueryString: _a$1.lg,
-            name: SkyMediaBreakpoints.lg,
-        },
-    ];
-    #mediaQueries = [];
-    #zone;
-    constructor(zone) {
-        this.#zone = zone;
-        this.#addListeners();
+        return this.#currentBreakpoint();
     }
+    #currentBreakpoint = toSignal(this.#breakpointObserver.breakpointChange.pipe(map((breakpoint) => toSkyMediaBreakpoints(breakpoint))), {
+        initialValue: DEFAULT_BREAKPOINT$1,
+    });
+    // Keep NgZone as a constructor param so that consumer mocks don't encounter typing errors.
+    constructor(_zone) { }
     ngOnDestroy() {
-        this.#removeListeners();
-        this.#currentSubject.complete();
+        this.destroy();
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        this.#breakpointObserver.destroy();
     }
     /**
      * Subscribes to screen size changes.
      * @param listener Specifies a function that is called when breakpoints change.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     subscribe(listener) {
-        return this.#currentSubject.subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
+        return this.#breakpointObserver.breakpointChange.subscribe({
+            next: (breakpoint) => {
+                listener(toSkyMediaBreakpoints(breakpoint));
             },
         });
     }
-    /**
-     * @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: "18.2.8", ngImport: i0, type: SkyMediaQueryService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryService, providedIn: 'root' }); }
 }
-_a$1 = SkyMediaQueryService;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryService, decorators: [{
             type: Injectable,
             args: [{
@@ -2089,6 +2290,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
+/**
+ * Overrides the default media breakpoint observer with the given observer.
+ * @internal
+ */
+function provideSkyBreakpointObserver(observer) {
+    return [
+        SkyMediaQueryService,
+        observer,
+        {
+            provide: SkyMediaBreakpointObserver,
+            useFactory() {
+                return (
+                // Yield to the injection token, if it's defined.
+                inject(SKY_BREAKPOINT_OBSERVER, { optional: true }) ??
+                    inject(observer));
+            },
+        },
+    ];
+}
+
+/**
+ * Overrides the `SkyMediaQueryService` to emit breakpoint changes when the host
+ * container is resized. This directive also adds SKY UX CSS classes to the
+ * host element to allow for responsive styles.
+ */
+class SkyResponsiveHostDirective {
+    #injector = inject(Injector);
+    #mediaSvc = inject(SkyMediaQueryService);
+    /**
+     * Emits when the breakpoint changes.
+     */
+    get breakpointChange() {
+        return this.#mediaSvc.breakpointChange;
+    }
+    /**
+     * The injector of the responsive host. Useful when displaying child components
+     * via `ngTemplateOutlet`.
+     * @example```
+     * <my-container #responsiveHost="skyResponsiveHost">
+     *   <ng-container
+     *     [ngTemplateOutlet]="myTemplate"
+     *     [ngTemplateOutletInjector]="responsiveHost.injector"
+     *   />
+     * </my-container>
+     * ```
+     */
+    get injector() {
+        return this.#injector;
+    }
+    constructor() {
+        const adapter = inject(SkyCoreAdapterService);
+        const elementRef = inject(ElementRef);
+        this.breakpointChange.subscribe((breakpoint) => {
+            adapter.setResponsiveContainerClass(elementRef, breakpoint);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResponsiveHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyResponsiveHostDirective, isStandalone: true, selector: "[skyResponsiveHost]", providers: [provideSkyBreakpointObserver(SkyContainerBreakpointObserver)], exportAs: ["skyResponsiveHost"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResponsiveHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'skyResponsiveHost',
+                    providers: [provideSkyBreakpointObserver(SkyContainerBreakpointObserver)],
+                    selector: '[skyResponsiveHost]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @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: "18.2.8", ngImport: i0, type: SkyMediaQueryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMediaQueryModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
 /* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -3063,128 +3347,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-const errorTest = /ResizeObserver loop completed with undelivered notifications/i;
-let errorLogRegistered = false;
-let originalOnError = undefined;
-const errorHandler = (event) => {
-    if (errorTest.test(event.message)) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-        return false;
-    }
-    return undefined;
-};
-const onError = (event) => {
-    const message = typeof event === 'string' ? event : event.message;
-    // This is necessary to prevent the test runner from failing on errors, but challenging to reliably test.
-    /* istanbul ignore next */
-    if (errorTest.test(message)) {
-        if (event instanceof ErrorEvent) {
-            event.stopImmediatePropagation();
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        return false;
-    }
-    return originalOnError?.call(window, event);
-};
+const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
 /**
- * Service to create rxjs observables for changes to the content box dimensions of elements.
+ * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
+ * @deprecated Use the `SkyResponsiveHostDirective` instead.
  */
-class SkyResizeObserverService {
-    #ngUnsubscribe = new Subject();
-    #resizeObserver = new ResizeObserver((entries) => this.#resizeSubject.next(entries));
-    #resizeSubject = new Subject();
-    #tracking = new Map();
-    #window = inject(SkyAppWindowRef);
-    #zone = inject(NgZone);
-    constructor() {
-        this.#expectWindowError();
-        // Because the resize observer is a native browser API, it does not shut down
-        // synchronously when the service is destroyed. Leave the error handling
-        // accommodation in place until the application is destroyed. This also works
-        // for the test runner.
-        inject(ApplicationRef).onDestroy(() => this.#resetWindowError());
-    }
-    ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-        this.#resizeObserver.disconnect();
-    }
+class SkyResizeObserverMediaQueryService extends SkyMediaQueryService {
     /**
-     * Create rxjs observable to get size changes for an element ref.
+     * Emits when the breakpoint changes.
      */
-    observe(element) {
-        const checkTracking = this.#tracking.has(element.nativeElement);
-        if (!checkTracking) {
-            this.#tracking.set(element.nativeElement, new Observable((observer) => {
-                const subscription = this.#resizeSubject.subscribe(observer);
-                this.#resizeObserver?.observe(element.nativeElement);
-                return () => {
-                    this.#resizeObserver?.unobserve(element.nativeElement);
-                    subscription.unsubscribe();
-                    this.#tracking.delete(element.nativeElement);
-                };
-            }).pipe(filter(Boolean), filter((entries) => entries.some((entry) => entry.target === element.nativeElement)), map((entries) => entries.find((entry) => entry.target === element.nativeElement)), 
-            // Ignore subpixel changes.
-            distinctUntilChanged((a, b) => Math.round(a.contentRect.width) ===
-                Math.round(b.contentRect.width) &&
-                Math.round(a.contentRect.height) ===
-                    Math.round(b.contentRect.height)), 
-            // Emit the last value for late subscribers. Track references so it
-            // un-observes when all subscribers are gone.
-            shareReplay({ bufferSize: 1, refCount: true }), 
-            // Only emit prior to an animation frame to prevent layout thrashing.
-            throttle(() => animationFrames().pipe(take(1)), {
-                leading: false,
-                trailing: true,
-            }), takeUntil$1(this.#ngUnsubscribe)));
-        }
-        return this.#tracking.get(element.nativeElement);
-    }
-    #expectWindowError() {
-        if (!errorLogRegistered) {
-            errorLogRegistered = true;
-            // ResizeObserver throws an error when it is disconnected while it is
-            // still observing an element. When an element is no longer observed, this
-            // is not a concern.
-            this.#zone.runOutsideAngular(() => this.#window.nativeWindow.addEventListener('error', errorHandler));
-        }
-        if (this.#window.nativeWindow.onerror !== onError) {
-            originalOnError = this.#window.nativeWindow.onerror;
-            this.#window.nativeWindow.onerror = onError;
-        }
+    get breakpointChange() {
+        return this.#breakpointChangeObs;
     }
-    #resetWindowError() {
-        this.#window.nativeWindow.removeEventListener('error', errorHandler);
-        if (originalOnError) {
-            this.#window.nativeWindow.onerror = originalOnError;
-            originalOnError = undefined;
-        }
-        errorLogRegistered = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-const DEFAULT_BREAKPOINT = SkyMediaBreakpoints.md;
-/**
- * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
- */
-class SkyResizeObserverMediaQueryService {
     /**
      * Returns the current breakpoint.
+     * @deprecated Subscribe to the `breakpointChange` observable instead.
      */
     get current() {
         return this.#currentBreakpoint;
     }
+    #breakpointChange = new ReplaySubject(1);
+    #breakpointChangeObs = this.#breakpointChange.asObservable();
     #breakpoints = [
         {
             check: (width) => width > 0 && width <= 767,
@@ -3212,6 +3395,7 @@ class SkyResizeObserverMediaQueryService {
         this.unobserve();
         this.#target = undefined;
         this.#currentBreakpointObs.complete();
+        this.#breakpointChange.complete();
     }
     /**
      * @internal
@@ -3267,6 +3451,8 @@ class SkyResizeObserverMediaQueryService {
         }
         if (this.current !== breakpoint) {
             this.#currentBreakpointObs.next(breakpoint);
+            const breakpointType = toSkyBreakpoint(breakpoint);
+            this.#breakpointChange.next(breakpointType);
         }
         this.#currentBreakpoint = breakpoint;
     }
@@ -3299,7 +3485,7 @@ class SkyResizeObserverMediaQueryService {
             this.#updateBreakpoint(breakpoint, updateResponsiveClasses);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverMediaQueryService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
@@ -4318,11 +4504,11 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('11.15.1');
+const VERSION = new Version('11.17.0');
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NumericOptions, SKY_HELP_GLOBAL_OPTIONS, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyContentInfoProvider, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyHelpService, SkyIdModule, SkyIdService, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogLevel, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScreenReaderLabelDirective, SkyScrollShadowDirective, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, VERSION, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+export { NumericOptions, SKY_BREAKPOINT_OBSERVER, SKY_HELP_GLOBAL_OPTIONS, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyContainerBreakpointObserver, SkyContentInfoProvider, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyHelpService, SkyIdModule, SkyIdService, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogLevel, SkyLogModule, SkyLogService, SkyMediaBreakpointObserver, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyResponsiveHostDirective, SkyScreenReaderLabelDirective, SkyScrollShadowDirective, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, VERSION, provideSkyBreakpointObserver, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map