@skyux/core 9.0.0-alpha.4 → 9.0.0-alpha.5

package/fesm2022/skyux-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, createEnvironmentInjector, createComponent, inject, InjectionToken, Optional, Inject, Pipe, ElementRef, HostBinding } from '@angular/core';
+import { NgModule, Injectable, EventEmitter, Directive, Input, Output, inject, EnvironmentInjector, createEnvironmentInjector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, createComponent, InjectionToken, Optional, Inject, Pipe, Injector, ElementRef, HostBinding, ApplicationRef } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { Subject, fromEvent, ReplaySubject, BehaviorSubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
@@ -1101,13 +1101,12 @@ class SkyDockComponent {
     #changeDetector;
     #domAdapter;
     #elementRef;
-    #injector;
+    #environmentInjector = inject(EnvironmentInjector);
     #itemRefs = [];
     #options;
-    constructor(changeDetector, elementRef, injector, domAdapter) {
+    constructor(changeDetector, elementRef, domAdapter) {
         this.#changeDetector = changeDetector;
         this.#elementRef = elementRef;
-        this.#injector = injector;
         this.#domAdapter = domAdapter;
     }
     insertComponent(component, config = {}) {
@@ -1115,12 +1114,9 @@ class SkyDockComponent {
         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 environmentInjector = createEnvironmentInjector(config.providers || [], this.#environmentInjector);
         const componentRef = this.target.createComponent(component, {
-            injector,
+            environmentInjector,
         });
         const stackOrder = config.stackOrder !== null && config.stackOrder !== undefined
             ? config.stackOrder
@@ -1182,13 +1178,13 @@ class SkyDockComponent {
         }
         return this.#itemRefs[0].stackOrder + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
@@ -1196,20 +1192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     }]
             }] } });
 
-class SkyDockModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, providers: [SkyMutationObserverService], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [SkyDockComponent],
-                    providers: [SkyMutationObserverService],
-                }]
-        }] });
-
 /**
  * The location on the page where the dynamic component should be rendered.
  */
@@ -1271,13 +1253,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  */
 class SkyDynamicComponentService {
     #applicationRef;
-    #environmentInjector;
     #renderer;
     #windowRef;
-    constructor(applicationRef, windowRef, rendererFactory, environmentInjector) {
+    constructor(applicationRef, windowRef, rendererFactory) {
         this.#applicationRef = applicationRef;
         this.#windowRef = windowRef;
-        this.#environmentInjector = environmentInjector;
         // Based on suggestions from https://github.com/angular/angular/issues/17824
         // for accessing an instance of Renderer2 in a service since Renderer2 can't
         // be injected into a service.  Passing undefined for both parameters results
@@ -1289,10 +1269,10 @@ class SkyDynamicComponentService {
      * on the page.
      */
     createComponent(componentType, options) {
-        options ||= {
-            location: SkyDynamicComponentLocation.BodyBottom,
-        };
-        const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector ?? this.#environmentInjector);
+        if (options.location === undefined) {
+            options.location = SkyDynamicComponentLocation.BodyBottom;
+        }
+        const environmentInjector = createEnvironmentInjector(options.providers ?? [], options.environmentInjector);
         let componentRef;
         if (options.viewContainerRef) {
             componentRef = options.viewContainerRef.createComponent(componentType, {
@@ -1348,18 +1328,15 @@ class SkyDynamicComponentService {
         // https://malcoded.com/posts/angular-dynamic-components
         return componentRef.hostView.rootNodes[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: SkyAppWindowRef }, { token: i0.RendererFactory2 }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'any' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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.1.7", ngImport: i0, type: SkyDynamicComponentService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDynamicComponentService, decorators: [{
             type: Injectable,
             args: [{
-                    // Must be 'any' so that the component is created in the context of its module's injector.
-                    // If set to 'root', the component's dependency injections would only be derived from the root
-                    // injector and may lose context if the component is created within a lazy-loaded module.
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }, { type: i0.EnvironmentInjector }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: SkyAppWindowRef }, { type: i0.RendererFactory2 }]; } });
 
 /**
  * This service docks components to specific areas on the page.
@@ -1373,6 +1350,7 @@ class SkyDockService {
         return SkyDockService._items;
     }
     #dynamicComponentSvc;
+    #environmentInjector = inject(EnvironmentInjector);
     #options;
     constructor(dynamicComponentSvc) {
         this.#dynamicComponentSvc = dynamicComponentSvc;
@@ -1409,7 +1387,9 @@ class SkyDockService {
         this.#options = options;
     }
     #createDock() {
-        let dockOptions;
+        const dockOptions = {
+            environmentInjector: this.#environmentInjector,
+        };
         if (this.#options) {
             let dynamicLocation;
             switch (this.#options.location) {
@@ -1423,10 +1403,8 @@ class SkyDockService {
                     dynamicLocation = SkyDynamicComponentLocation.BodyTop;
                     break;
             }
-            dockOptions = {
-                location: dynamicLocation,
-                referenceEl: this.#options.referenceEl,
-            };
+            dockOptions.location = dynamicLocation;
+            dockOptions.referenceEl = this.#options.referenceEl;
         }
         const dockRef = this.#dynamicComponentSvc.createComponent(SkyDockComponent, dockOptions);
         dockRef.instance.setOptions(this.#options);
@@ -1437,17 +1415,25 @@ class SkyDockService {
         SkyDockService.dockRef = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService, deps: [{ token: SkyDynamicComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockService, decorators: [{
-            type: Injectable,
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
+
+class SkyDockModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, declarations: [SkyDockComponent], imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, providers: [SkyDockService, SkyMutationObserverService], imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDockModule, decorators: [{
+            type: NgModule,
             args: [{
-                    // Must be 'any' so that the dock component is created in the context of its module's injector.
-                    // If set to 'root', the component's dependency injections would only be derived from the root
-                    // injector and may loose context if the dock was opened from within a lazy-loaded module.
-                    providedIn: 'any',
+                    imports: [CommonModule],
+                    declarations: [SkyDockComponent],
+                    providers: [SkyDockService, SkyMutationObserverService],
                 }]
-        }], ctorParameters: function () { return [{ type: SkyDynamicComponentService }]; } });
+        }] });
 
 /**
  * Provides services required to create dynamic components on the page.
@@ -1633,7 +1619,9 @@ class SkyLiveAnnouncerService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLiveAnnouncerService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -2265,13 +2253,10 @@ class SkyNumericService {
         return this.#resourcesSvc.getStringForLocale({ locale: 'en_US' }, key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; } });
 
 /**
@@ -2350,15 +2335,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class SkyNumericModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule], exports: [SkyNumericPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe], imports: [SkyI18nModule, SkyCoreResourcesModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, declarations: [SkyNumericPipe], imports: [SkyCoreResourcesModule], exports: [SkyNumericPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, providers: [SkyNumericPipe, SkyNumericService], imports: [SkyCoreResourcesModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNumericModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyNumericPipe],
-                    providers: [SkyNumericPipe],
-                    imports: [SkyI18nModule, SkyCoreResourcesModule],
+                    providers: [SkyNumericPipe, SkyNumericService],
+                    imports: [SkyCoreResourcesModule],
                     exports: [SkyNumericPipe],
                 }]
         }] });
@@ -2678,21 +2663,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 /**
  * This service is used to create new overlays.
- * @dynamic
+ * @internal
  */
 class SkyOverlayService {
     static { this.overlays = []; }
-    #adapter;
-    #applicationRef;
-    #componentFactoryResolver;
-    #injector;
-    // TODO: Replace deprecated `ComponentFactoryResolver`.
-    constructor(applicationRef, componentFactoryResolver, injector, adapter) {
-        this.#applicationRef = applicationRef;
-        this.#componentFactoryResolver = componentFactoryResolver;
-        this.#injector = injector;
-        this.#adapter = adapter;
-    }
+    #adapter = inject(SkyOverlayAdapterService);
+    #applicationRef = inject(ApplicationRef);
+    #dynamicComponentSvc = inject(SkyDynamicComponentService);
+    #environmentInjector = inject(EnvironmentInjector);
     /**
      * Creates an empty overlay. Use the returned `SkyOverlayInstance` to append content.
      * @param config Configuration for the overlay.
@@ -2745,8 +2723,8 @@ class SkyOverlayService {
         }
     }
     #createOverlay(config) {
-        const injector = Injector.create({
-            parent: this.#injector,
+        return this.#dynamicComponentSvc.createComponent(SkyOverlayComponent, {
+            environmentInjector: this.#environmentInjector,
             providers: [
                 {
                     provide: SkyOverlayContext,
@@ -2754,14 +2732,6 @@ class SkyOverlayService {
                 },
             ],
         });
-        const componentRef = this.#componentFactoryResolver
-            .resolveComponentFactory(SkyOverlayComponent)
-            .create(injector);
-        this.#applicationRef.attachView(componentRef.hostView);
-        const domElem = componentRef.hostView
-            .rootNodes[0];
-        document.body.appendChild(domElem);
-        return componentRef;
     }
     #prepareConfig(config = {}) {
         const defaults = {
@@ -2784,7 +2754,7 @@ class SkyOverlayService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: SkyOverlayAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyOverlayService, decorators: [{
@@ -2792,7 +2762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: SkyOverlayAdapterService }]; } });
+        }] });
 
 class SkyPercentPipe {
     get defaultLocale() {
@@ -2922,12 +2892,12 @@ class SkyResizeObserverService {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'any',
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -2983,7 +2953,7 @@ class SkyResizeObserverMediaQueryService {
      * Sets the container element to watch. The `SkyResizeObserverMediaQueryService` will only observe one element at a
      * time. Any previous subscriptions will be unsubscribed when a new element is observed.
      */
-    observe(element) {
+    observe(element, options) {
         if (this.#target) {
             if (this.#target === element) {
                 return this;
@@ -2991,22 +2961,23 @@ class SkyResizeObserverMediaQueryService {
             this.unobserve();
         }
         this.#target = element;
-        this.#checkWidth(element);
+        this.#checkWidth(element, options?.updateResponsiveClasses);
         this.#resizeObserverSvc
             .observe(element)
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((value) => {
             const breakpoint = this.#checkBreakpoint(value.contentRect.width);
-            if (breakpoint && breakpoint !== this.current) {
-                this.#updateBreakpoint(breakpoint);
+            if (breakpoint) {
+                this.#updateBreakpoint(breakpoint, options?.updateResponsiveClasses);
             }
         });
         return this;
     }
     /**
-     * Stop watching the container element.
+     * Stop watching the container element and remove any added classes.
      */
     unobserve() {
+        this.#removeResponsiveClasses();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
@@ -3020,29 +2991,49 @@ class SkyResizeObserverMediaQueryService {
             listener(value);
         });
     }
-    #updateBreakpoint(breakpoint) {
+    #updateBreakpoint(breakpoint, updateResponsiveClasses) {
+        if (updateResponsiveClasses) {
+            this.#updateResponsiveClasses(this.current, breakpoint);
+        }
+        if (this.current !== breakpoint) {
+            this.#currentBreakpointObs.next(breakpoint);
+        }
         this.#currentBreakpoint = breakpoint;
-        this.#currentBreakpointObs.next(breakpoint);
+    }
+    #updateResponsiveClasses(oldBreakpoint, newBreakpoint) {
+        const oldClass = this.#getClassForBreakpoint(oldBreakpoint);
+        const newClass = this.#getClassForBreakpoint(newBreakpoint);
+        const targetClassList = this.#target?.nativeElement?.classList;
+        targetClassList?.remove(oldClass);
+        targetClassList?.add(newClass);
+    }
+    #removeResponsiveClasses() {
+        for (const breakpoint of Object.values(SkyMediaBreakpoints)) {
+            if (typeof breakpoint === 'number') {
+                const className = this.#getClassForBreakpoint(breakpoint);
+                this.#target?.nativeElement?.classList?.remove(className);
+            }
+        }
+    }
+    #getClassForBreakpoint(breakpoint) {
+        return `sky-responsive-container-${SkyMediaBreakpoints[breakpoint]}`;
     }
     #checkBreakpoint(width) {
         const breakpoint = this.#breakpoints.find((breakpoint) => breakpoint.check(width));
         return breakpoint ? breakpoint.name : undefined;
     }
-    #checkWidth(el) {
+    #checkWidth(el, updateResponsiveClasses) {
         const width = el.nativeElement.offsetWidth || 0;
         const breakpoint = this.#checkBreakpoint(width);
-        if (breakpoint && breakpoint !== this.#currentBreakpoint) {
-            this.#updateBreakpoint(breakpoint);
+        if (breakpoint) {
+            this.#updateBreakpoint(breakpoint, updateResponsiveClasses);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any',
-                }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
 
 function notifySubscribers(subscribers, item) {