@skyux/pages 11.15.0 → 11.16.0

package/esm2022/lib/modules/page/page-content.component.mjs

@@ -1,40 +1,17 @@
-import { ChangeDetectionStrategy, Component, ElementRef, inject, } from '@angular/core';
-import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SkyResponsiveHostDirective } from '@skyux/core';
 import * as i0 from "@angular/core";
+import * as i1 from "@skyux/core";
 /**
  * Displays page contents using spacing that corresponds to the parent
  * page's layout.
  */
 export class SkyPageContentComponent {
-    #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService, {
-        self: true,
-    });
-    ngOnInit() {
-        this.#mediaQueryService.observe(this.#elementRef, {
-            updateResponsiveClasses: true,
-        });
-    }
-    ngOnDestroy() {
-        this.#mediaQueryService.unobserve();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageContentComponent, selector: "sky-page-content", providers: [
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageContentComponent, selector: "sky-page-content", hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
-                    ], styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS9wYWdlLWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFHVixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNMLG9CQUFvQixFQUNwQixrQ0FBa0MsR0FDbkMsTUFBTSxhQUFhLENBQUM7O0FBRXJCOzs7R0FHRztBQWNILE1BQU0sT0FBTyx1QkFBdUI7SUFDbEMsV0FBVyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNqQyxrQkFBa0IsR0FBRyxNQUFNLENBQUMsa0NBQWtDLEVBQUU7UUFDOUQsSUFBSSxFQUFFLElBQUk7S0FDWCxDQUFDLENBQUM7SUFFSSxRQUFRO1FBQ2IsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ2hELHVCQUF1QixFQUFFLElBQUk7U0FDOUIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ3RDLENBQUM7OEdBZFUsdUJBQXVCO2tHQUF2Qix1QkFBdUIsMkNBUnZCO1lBQ1Qsa0NBQWtDO1lBQ2xDO2dCQUNFLE9BQU8sRUFBRSxvQkFBb0I7Z0JBQzdCLFdBQVcsRUFBRSxrQ0FBa0M7YUFDaEQ7U0FDRiwwQkFUUyxnQkFBZ0I7OzJGQVdmLHVCQUF1QjtrQkFibkMsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEIsZ0JBQWdCLG1CQUVULHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Qsa0NBQWtDO3dCQUNsQzs0QkFDRSxPQUFPLEVBQUUsb0JBQW9COzRCQUM3QixXQUFXLEVBQUUsa0NBQWtDO3lCQUNoRDtxQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5TWVkaWFRdWVyeVNlcnZpY2UsXG4gIFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuLyoqXG4gKiBEaXNwbGF5cyBwYWdlIGNvbnRlbnRzIHVzaW5nIHNwYWNpbmcgdGhhdCBjb3JyZXNwb25kcyB0byB0aGUgcGFyZW50XG4gKiBwYWdlJ3MgbGF5b3V0LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktcGFnZS1jb250ZW50JyxcbiAgdGVtcGxhdGU6IGA8bmctY29udGVudCAvPmAsXG4gIHN0eWxlVXJsczogWycuL3BhZ2UtY29udGVudC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UmVzaXplT2JzZXJ2ZXJNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBTa3lNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICAgIHVzZUV4aXN0aW5nOiBTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNreVBhZ2VDb250ZW50Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAjZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgI21lZGlhUXVlcnlTZXJ2aWNlID0gaW5qZWN0KFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UsIHtcbiAgICBzZWxmOiB0cnVlLFxuICB9KTtcblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy4jbWVkaWFRdWVyeVNlcnZpY2Uub2JzZXJ2ZSh0aGlzLiNlbGVtZW50UmVmLCB7XG4gICAgICB1cGRhdGVSZXNwb25zaXZlQ2xhc3NlczogdHJ1ZSxcbiAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLiNtZWRpYVF1ZXJ5U2VydmljZS51bm9ic2VydmUoKTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS9wYWdlLWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sYUFBYSxDQUFDOzs7QUFFekQ7OztHQUdHO0FBUUgsTUFBTSxPQUFPLHVCQUF1Qjs4R0FBdkIsdUJBQXVCO2tHQUF2Qix1QkFBdUIsd0hBSnhCLGdCQUFnQjs7MkZBSWYsdUJBQXVCO2tCQVBuQyxTQUFTO3FDQUNRLENBQUMsMEJBQTBCLENBQUMsWUFDbEMsa0JBQWtCLFlBQ2xCLGdCQUFnQixtQkFFVCx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5UmVzcG9uc2l2ZUhvc3REaXJlY3RpdmUgfSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbi8qKlxuICogRGlzcGxheXMgcGFnZSBjb250ZW50cyB1c2luZyBzcGFjaW5nIHRoYXQgY29ycmVzcG9uZHMgdG8gdGhlIHBhcmVudFxuICogcGFnZSdzIGxheW91dC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIGhvc3REaXJlY3RpdmVzOiBbU2t5UmVzcG9uc2l2ZUhvc3REaXJlY3RpdmVdLFxuICBzZWxlY3RvcjogJ3NreS1wYWdlLWNvbnRlbnQnLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50IC8+YCxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS1jb250ZW50LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lQYWdlQ29udGVudENvbXBvbmVudCB7fVxuIl19

package/esm2022/lib/modules/page/page.component.mjs

@@ -1,5 +1,5 @@
-import { Component, ElementRef, HostBinding, Input, inject, } from '@angular/core';
-import { SkyHelpService, SkyLayoutHostService, SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
+import { Component, HostBinding, Input, inject, } from '@angular/core';
+import { SkyContainerBreakpointObserver, SkyHelpService, SkyLayoutHostService, provideSkyBreakpointObserver, } from '@skyux/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { SkyPageThemeAdapterService } from './page-theme-adapter.service';
@@ -20,10 +20,6 @@ export class SkyPageComponent {
         this.#themeAdapter = inject(SkyPageThemeAdapterService);
         this.#layoutHostSvc = inject(SkyLayoutHostService);
         this.#helpSvc = inject(SkyHelpService, { optional: true });
-        this.#elementRef = inject(ElementRef);
-        this.#resizeObserverSvc = inject(SkyResizeObserverMediaQueryService, {
-            self: true,
-        });
     }
     /**
      * The page layout that applies spacing to the page header and content. Use the layout
@@ -48,8 +44,6 @@ export class SkyPageComponent {
     #themeAdapter;
     #layoutHostSvc;
     #helpSvc;
-    #elementRef;
-    #resizeObserverSvc;
     ngOnInit() {
         this.#themeAdapter.addTheme();
         this.#layoutHostSvc.hostLayoutForChild
@@ -58,11 +52,9 @@ export class SkyPageComponent {
             this.#layoutForChild = args.layout;
             this.#updateCssClass();
         });
-        this.#resizeObserverSvc.observe(this.#elementRef);
     }
     ngOnDestroy() {
         this.#themeAdapter.removeTheme();
-        this.#resizeObserverSvc.destroy();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
         this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
@@ -80,11 +72,7 @@ export class SkyPageComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [
             SkyPageThemeAdapterService,
             SkyLayoutHostService,
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
+            provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
         ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, decorators: [{
@@ -95,11 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     providers: [
                         SkyPageThemeAdapterService,
                         SkyLayoutHostService,
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
+                        provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
                     ],
                 }]
         }], propDecorators: { layout: [{
@@ -110,4 +94,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsV0FBVyxFQUNYLEtBQUssRUFHTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNMLGNBQWMsRUFFZCxvQkFBb0IsRUFDcEIsb0JBQW9CLEVBQ3BCLGtDQUFrQyxHQUNuQyxNQUFNLGFBQWEsQ0FBQztBQUVyQixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUUzQyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7QUFHMUUsTUFBTSxjQUFjLEdBQXNCLE1BQU0sQ0FBQztBQUVqRCxNQUFNLDZCQUE2QixHQUFHLDRCQUE0QixDQUFDO0FBQ25FLE1BQU0sbUJBQW1CLEdBQUcsa0JBQWtCLENBQUM7QUFDL0MsTUFBTSxvQkFBb0IsR0FBRyxHQUFHLG1CQUFtQixHQUFHLGNBQWMsRUFBRSxDQUFDO0FBRXZFOzs7O0dBSUc7QUFjSCxNQUFNLE9BQU8sZ0JBQWdCO0lBYjdCO1FBb0NTLGFBQVEsR0FBRyxvQkFBb0IsQ0FBQztRQUt2QyxtQkFBYyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFFckMsa0JBQWEsR0FBRyxNQUFNLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUNuRCxtQkFBYyxHQUFHLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBQzlDLGFBQVEsR0FBRyxNQUFNLENBQUMsY0FBYyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFDN0MsZ0JBQVcsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDakMsdUJBQWtCLEdBQUcsTUFBTSxDQUFDLGtDQUFrQyxFQUFFO1lBQ3ZFLElBQUksRUFBRSxJQUFJO1NBQ1gsQ0FBQyxDQUFDO0tBb0NKO0lBdkVDOzs7Ozs7T0FNRztJQUNILElBQ1csTUFBTSxDQUFDLEtBQW9DO1FBQ3BELElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUNXLE9BQU8sQ0FBQyxLQUF5QjtRQUMxQyxJQUFJLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUtELE9BQU8sQ0FBZ0M7SUFDdkMsZUFBZSxDQUFnQztJQUUvQyxjQUFjLENBQXVCO0lBRXJDLGFBQWEsQ0FBc0M7SUFDbkQsY0FBYyxDQUFnQztJQUM5QyxRQUFRLENBQThDO0lBQzdDLFdBQVcsQ0FBc0I7SUFDakMsa0JBQWtCLENBRXhCO0lBRUksUUFBUTtRQUNiLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFOUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxrQkFBa0I7YUFDbkMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7YUFDcEMsU0FBUyxDQUFDLENBQUMsSUFBK0IsRUFBRSxFQUFFO1lBQzdDLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE1BQTJCLENBQUM7WUFDeEQsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLENBQUMsQ0FBQyxDQUFDO1FBRUwsSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNqQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxFQUFFLENBQUM7UUFFbEMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUMzQixJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBRS9CLElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztJQUMvRCxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksUUFBUSxHQUFHLElBQUksQ0FBQyxPQUFPO1lBQ3pCLENBQUMsQ0FBQyxHQUFHLG1CQUFtQixHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDekMsQ0FBQyxDQUFDLG9CQUFvQixDQUFDO1FBRXpCLElBQUksSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3pCLFFBQVEsR0FBRyxHQUFHLFFBQVEsSUFBSSw2QkFBNkIsR0FBRyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDbkYsQ0FBQztRQUVELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzNCLENBQUM7OEdBdkVVLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLHlJQVZoQjtZQUNULDBCQUEwQjtZQUMxQixvQkFBb0I7WUFDcEIsa0NBQWtDO1lBQ2xDO2dCQUNFLE9BQU8sRUFBRSxvQkFBb0I7Z0JBQzdCLFdBQVcsRUFBRSxrQ0FBa0M7YUFDaEQ7U0FDRiwwQkFUUyxnQkFBZ0I7OzJGQVdmLGdCQUFnQjtrQkFiNUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsVUFBVTtvQkFDcEIsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsU0FBUyxFQUFFO3dCQUNULDBCQUEwQjt3QkFDMUIsb0JBQW9CO3dCQUNwQixrQ0FBa0M7d0JBQ2xDOzRCQUNFLE9BQU8sRUFBRSxvQkFBb0I7NEJBQzdCLFdBQVcsRUFBRSxrQ0FBa0M7eUJBQ2hEO3FCQUNGO2lCQUNGOzhCQVVZLE1BQU07c0JBRGhCLEtBQUs7Z0JBVUssT0FBTztzQkFEakIsS0FBSztnQkFNQyxRQUFRO3NCQURkLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIFNreUhlbHBTZXJ2aWNlLFxuICBTa3lMYXlvdXRIb3N0Rm9yQ2hpbGRBcmdzLFxuICBTa3lMYXlvdXRIb3N0U2VydmljZSxcbiAgU2t5TWVkaWFRdWVyeVNlcnZpY2UsXG4gIFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSB9IGZyb20gJy4vcGFnZS10aGVtZS1hZGFwdGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgU2t5UGFnZUxheW91dFR5cGUgfSBmcm9tICcuL3R5cGVzL3BhZ2UtbGF5b3V0LXR5cGUnO1xuXG5jb25zdCBMQVlPVVRfREVGQVVMVDogU2t5UGFnZUxheW91dFR5cGUgPSAnbm9uZSc7XG5cbmNvbnN0IExBWU9VVF9GT1JfQ0hJTERfQ0xBU1NfUFJFRklYID0gJ3NreS1sYXlvdXQtaG9zdC1mb3ItY2hpbGQtJztcbmNvbnN0IExBWU9VVF9DTEFTU19QUkVGSVggPSAnc2t5LWxheW91dC1ob3N0LSc7XG5jb25zdCBMQVlPVVRfQ0xBU1NfREVGQVVMVCA9IGAke0xBWU9VVF9DTEFTU19QUkVGSVh9JHtMQVlPVVRfREVGQVVMVH1gO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgcGFnZSB1c2luZyB0aGUgc3BlY2lmaWVkIGxheW91dC4gVGhlIHBhZ2UgY29tcG9uZW50IGlzIGEgcmVzcG9uc2l2ZSBjb250YWluZXIsXG4gKiBtZWFuaW5nIGNvbnRlbnQgd2lsbCByZXNwZWN0IHRoZSBicmVha3BvaW50cyB3aXRoaW4gdGhlIHBhZ2UgZWxlbWVudCBpbnN0ZWFkIG9mIHRoZSB3aW5kb3cuXG4gKiBUaGlzIGlzIGhlbHBmdWwgaWYgdGhlcmUgaXMgb3RoZXIgY29udGVudCB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcGFnZS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LXBhZ2UnLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50IC8+YCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UsXG4gICAgU2t5TGF5b3V0SG9zdFNlcnZpY2UsXG4gICAgU2t5UmVzaXplT2JzZXJ2ZXJNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBTa3lNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICAgIHVzZUV4aXN0aW5nOiBTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNreVBhZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUaGUgcGFnZSBsYXlvdXQgdGhhdCBhcHBsaWVzIHNwYWNpbmcgdG8gdGhlIHBhZ2UgaGVhZGVyIGFuZCBjb250ZW50LiBVc2UgdGhlIGxheW91dFxuICAgKiB0aGF0IGNvcnJlc3BvbmRzIHdpdGggdGhlIHRvcC1sZXZlbCBjb21wb25lbnQgdHlwZSB1c2VkIG9uIHRoZSBwYWdlLCBvciB1c2UgYGZpdGAgdG9cbiAgICogY29uc3RyYWluIHRoZSBwYWdlIGNvbnRlbnRzIHRvIHRoZSBhdmFpbGFibGUgdmlld3BvcnQuXG4gICAqIFVzZSBgbm9uZWAgZm9yIGN1c3RvbSBjb250ZW50IHRoYXQgZG9lcyBub3QgYWRoZXJlIHRvIHByZWRlZmluZWQgc3BhY2luZyBvciBjb25zdHJhaW50cy5cbiAgICogQGRlZmF1bHQgXCJub25lXCJcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgbGF5b3V0KHZhbHVlOiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI2xheW91dCA9IHZhbHVlO1xuICAgIHRoaXMuI3VwZGF0ZUNzc0NsYXNzKCk7XG4gIH1cblxuICAvKipcbiAgICogQSBoZWxwIGtleSB0aGF0IGlkZW50aWZpZXMgdGhlIHBhZ2UncyBkZWZhdWx0IFtnbG9iYWwgaGVscF0oaHR0cHM6Ly9kZXZlbG9wZXIuYmxhY2tiYXVkLmNvbS9za3l1eC9sZWFybi9kZXZlbG9wL2dsb2JhbC1oZWxwKSBjb250ZW50IHRvIGRpc3BsYXkuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGhlbHBLZXkodmFsdWU6IHN0cmluZyB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI2hlbHBTdmM/LnVwZGF0ZUhlbHAoeyBwYWdlRGVmYXVsdEhlbHBLZXk6IHZhbHVlIH0pO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIHB1YmxpYyBjc3NDbGFzcyA9IExBWU9VVF9DTEFTU19ERUZBVUxUO1xuXG4gICNsYXlvdXQ6IFNreVBhZ2VMYXlvdXRUeXBlIHwgdW5kZWZpbmVkO1xuICAjbGF5b3V0Rm9yQ2hpbGQ6IFNreVBhZ2VMYXlvdXRUeXBlIHwgdW5kZWZpbmVkO1xuXG4gICNuZ1Vuc3Vic2NyaWJlID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAjdGhlbWVBZGFwdGVyID0gaW5qZWN0KFNreVBhZ2VUaGVtZUFkYXB0ZXJTZXJ2aWNlKTtcbiAgI2xheW91dEhvc3RTdmMgPSBpbmplY3QoU2t5TGF5b3V0SG9zdFNlcnZpY2UpO1xuICAjaGVscFN2YyA9IGluamVjdChTa3lIZWxwU2VydmljZSwgeyBvcHRpb25hbDogdHJ1ZSB9KTtcbiAgcmVhZG9ubHkgI2VsZW1lbnRSZWYgPSBpbmplY3QoRWxlbWVudFJlZik7XG4gIHJlYWRvbmx5ICNyZXNpemVPYnNlcnZlclN2YyA9IGluamVjdChTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLCB7XG4gICAgc2VsZjogdHJ1ZSxcbiAgfSk7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5hZGRUaGVtZSgpO1xuXG4gICAgdGhpcy4jbGF5b3V0SG9zdFN2Yy5ob3N0TGF5b3V0Rm9yQ2hpbGRcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLiNuZ1Vuc3Vic2NyaWJlKSlcbiAgICAgIC5zdWJzY3JpYmUoKGFyZ3M6IFNreUxheW91dEhvc3RGb3JDaGlsZEFyZ3MpID0+IHtcbiAgICAgICAgdGhpcy4jbGF5b3V0Rm9yQ2hpbGQgPSBhcmdzLmxheW91dCBhcyBTa3lQYWdlTGF5b3V0VHlwZTtcbiAgICAgICAgdGhpcy4jdXBkYXRlQ3NzQ2xhc3MoKTtcbiAgICAgIH0pO1xuXG4gICAgdGhpcy4jcmVzaXplT2JzZXJ2ZXJTdmMub2JzZXJ2ZSh0aGlzLiNlbGVtZW50UmVmKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLiN0aGVtZUFkYXB0ZXIucmVtb3ZlVGhlbWUoKTtcbiAgICB0aGlzLiNyZXNpemVPYnNlcnZlclN2Yy5kZXN0cm95KCk7XG5cbiAgICB0aGlzLiNuZ1Vuc3Vic2NyaWJlLm5leHQoKTtcbiAgICB0aGlzLiNuZ1Vuc3Vic2NyaWJlLmNvbXBsZXRlKCk7XG5cbiAgICB0aGlzLiNoZWxwU3ZjPy51cGRhdGVIZWxwKHsgcGFnZURlZmF1bHRIZWxwS2V5OiB1bmRlZmluZWQgfSk7XG4gIH1cblxuICAjdXBkYXRlQ3NzQ2xhc3MoKTogdm9pZCB7XG4gICAgbGV0IGNzc0NsYXNzID0gdGhpcy4jbGF5b3V0XG4gICAgICA/IGAke0xBWU9VVF9DTEFTU19QUkVGSVh9JHt0aGlzLiNsYXlvdXR9YFxuICAgICAgOiBMQVlPVVRfQ0xBU1NfREVGQVVMVDtcblxuICAgIGlmICh0aGlzLiNsYXlvdXRGb3JDaGlsZCkge1xuICAgICAgY3NzQ2xhc3MgPSBgJHtjc3NDbGFzc30gJHtMQVlPVVRfRk9SX0NISUxEX0NMQVNTX1BSRUZJWH0ke3RoaXMuI2xheW91dEZvckNoaWxkfWA7XG4gICAgfVxuXG4gICAgdGhpcy5jc3NDbGFzcyA9IGNzc0NsYXNzO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUdMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsOEJBQThCLEVBQzlCLGNBQWMsRUFFZCxvQkFBb0IsRUFDcEIsNEJBQTRCLEdBQzdCLE1BQU0sYUFBYSxDQUFDO0FBRXJCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQUcxRSxNQUFNLGNBQWMsR0FBc0IsTUFBTSxDQUFDO0FBRWpELE1BQU0sNkJBQTZCLEdBQUcsNEJBQTRCLENBQUM7QUFDbkUsTUFBTSxtQkFBbUIsR0FBRyxrQkFBa0IsQ0FBQztBQUMvQyxNQUFNLG9CQUFvQixHQUFHLEdBQUcsbUJBQW1CLEdBQUcsY0FBYyxFQUFFLENBQUM7QUFFdkU7Ozs7R0FJRztBQVVILE1BQU0sT0FBTyxnQkFBZ0I7SUFUN0I7UUFnQ1MsYUFBUSxHQUFHLG9CQUFvQixDQUFDO1FBS3ZDLG1CQUFjLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUVyQyxrQkFBYSxHQUFHLE1BQU0sQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBQ25ELG1CQUFjLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDOUMsYUFBUSxHQUFHLE1BQU0sQ0FBQyxjQUFjLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztLQWlDdkQ7SUFoRUM7Ozs7OztPQU1HO0lBQ0gsSUFDVyxNQUFNLENBQUMsS0FBb0M7UUFDcEQsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQ1csT0FBTyxDQUFDLEtBQXlCO1FBQzFDLElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBS0QsT0FBTyxDQUFnQztJQUN2QyxlQUFlLENBQWdDO0lBRS9DLGNBQWMsQ0FBdUI7SUFFckMsYUFBYSxDQUFzQztJQUNuRCxjQUFjLENBQWdDO0lBQzlDLFFBQVEsQ0FBOEM7SUFFL0MsUUFBUTtRQUNiLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFOUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxrQkFBa0I7YUFDbkMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7YUFDcEMsU0FBUyxDQUFDLENBQUMsSUFBK0IsRUFBRSxFQUFFO1lBQzdDLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE1BQTJCLENBQUM7WUFDeEQsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUVqQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFL0IsSUFBSSxDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsRUFBRSxrQkFBa0IsRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU87WUFDekIsQ0FBQyxDQUFDLEdBQUcsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUN6QyxDQUFDLENBQUMsb0JBQW9CLENBQUM7UUFFekIsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDekIsUUFBUSxHQUFHLEdBQUcsUUFBUSxJQUFJLDZCQUE2QixHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNuRixDQUFDO1FBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7SUFDM0IsQ0FBQzs4R0FoRVUsZ0JBQWdCO2tHQUFoQixnQkFBZ0IseUlBTmhCO1lBQ1QsMEJBQTBCO1lBQzFCLG9CQUFvQjtZQUNwQiw0QkFBNEIsQ0FBQyw4QkFBOEIsQ0FBQztTQUM3RCwwQkFMUyxnQkFBZ0I7OzJGQU9mLGdCQUFnQjtrQkFUNUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsVUFBVTtvQkFDcEIsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsU0FBUyxFQUFFO3dCQUNULDBCQUEwQjt3QkFDMUIsb0JBQW9CO3dCQUNwQiw0QkFBNEIsQ0FBQyw4QkFBOEIsQ0FBQztxQkFDN0Q7aUJBQ0Y7OEJBVVksTUFBTTtzQkFEaEIsS0FBSztnQkFVSyxPQUFPO3NCQURqQixLQUFLO2dCQU1DLFFBQVE7c0JBRGQsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5Q29udGFpbmVyQnJlYWtwb2ludE9ic2VydmVyLFxuICBTa3lIZWxwU2VydmljZSxcbiAgU2t5TGF5b3V0SG9zdEZvckNoaWxkQXJncyxcbiAgU2t5TGF5b3V0SG9zdFNlcnZpY2UsXG4gIHByb3ZpZGVTa3lCcmVha3BvaW50T2JzZXJ2ZXIsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSB9IGZyb20gJy4vcGFnZS10aGVtZS1hZGFwdGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgU2t5UGFnZUxheW91dFR5cGUgfSBmcm9tICcuL3R5cGVzL3BhZ2UtbGF5b3V0LXR5cGUnO1xuXG5jb25zdCBMQVlPVVRfREVGQVVMVDogU2t5UGFnZUxheW91dFR5cGUgPSAnbm9uZSc7XG5cbmNvbnN0IExBWU9VVF9GT1JfQ0hJTERfQ0xBU1NfUFJFRklYID0gJ3NreS1sYXlvdXQtaG9zdC1mb3ItY2hpbGQtJztcbmNvbnN0IExBWU9VVF9DTEFTU19QUkVGSVggPSAnc2t5LWxheW91dC1ob3N0LSc7XG5jb25zdCBMQVlPVVRfQ0xBU1NfREVGQVVMVCA9IGAke0xBWU9VVF9DTEFTU19QUkVGSVh9JHtMQVlPVVRfREVGQVVMVH1gO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgcGFnZSB1c2luZyB0aGUgc3BlY2lmaWVkIGxheW91dC4gVGhlIHBhZ2UgY29tcG9uZW50IGlzIGEgcmVzcG9uc2l2ZSBjb250YWluZXIsXG4gKiBtZWFuaW5nIGNvbnRlbnQgd2lsbCByZXNwZWN0IHRoZSBicmVha3BvaW50cyB3aXRoaW4gdGhlIHBhZ2UgZWxlbWVudCBpbnN0ZWFkIG9mIHRoZSB3aW5kb3cuXG4gKiBUaGlzIGlzIGhlbHBmdWwgaWYgdGhlcmUgaXMgb3RoZXIgY29udGVudCB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcGFnZS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LXBhZ2UnLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50IC8+YCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UsXG4gICAgU2t5TGF5b3V0SG9zdFNlcnZpY2UsXG4gICAgcHJvdmlkZVNreUJyZWFrcG9pbnRPYnNlcnZlcihTa3lDb250YWluZXJCcmVha3BvaW50T2JzZXJ2ZXIpLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lQYWdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogVGhlIHBhZ2UgbGF5b3V0IHRoYXQgYXBwbGllcyBzcGFjaW5nIHRvIHRoZSBwYWdlIGhlYWRlciBhbmQgY29udGVudC4gVXNlIHRoZSBsYXlvdXRcbiAgICogdGhhdCBjb3JyZXNwb25kcyB3aXRoIHRoZSB0b3AtbGV2ZWwgY29tcG9uZW50IHR5cGUgdXNlZCBvbiB0aGUgcGFnZSwgb3IgdXNlIGBmaXRgIHRvXG4gICAqIGNvbnN0cmFpbiB0aGUgcGFnZSBjb250ZW50cyB0byB0aGUgYXZhaWxhYmxlIHZpZXdwb3J0LlxuICAgKiBVc2UgYG5vbmVgIGZvciBjdXN0b20gY29udGVudCB0aGF0IGRvZXMgbm90IGFkaGVyZSB0byBwcmVkZWZpbmVkIHNwYWNpbmcgb3IgY29uc3RyYWludHMuXG4gICAqIEBkZWZhdWx0IFwibm9uZVwiXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGxheW91dCh2YWx1ZTogU2t5UGFnZUxheW91dFR5cGUgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNsYXlvdXQgPSB2YWx1ZTtcbiAgICB0aGlzLiN1cGRhdGVDc3NDbGFzcygpO1xuICB9XG5cbiAgLyoqXG4gICAqIEEgaGVscCBrZXkgdGhhdCBpZGVudGlmaWVzIHRoZSBwYWdlJ3MgZGVmYXVsdCBbZ2xvYmFsIGhlbHBdKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvbGVhcm4vZGV2ZWxvcC9nbG9iYWwtaGVscCkgY29udGVudCB0byBkaXNwbGF5LlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBoZWxwS2V5KHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNoZWxwU3ZjPy51cGRhdGVIZWxwKHsgcGFnZURlZmF1bHRIZWxwS2V5OiB2YWx1ZSB9KTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwdWJsaWMgY3NzQ2xhc3MgPSBMQVlPVVRfQ0xBU1NfREVGQVVMVDtcblxuICAjbGF5b3V0OiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZDtcbiAgI2xheW91dEZvckNoaWxkOiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZDtcblxuICAjbmdVbnN1YnNjcmliZSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgI3RoZW1lQWRhcHRlciA9IGluamVjdChTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSk7XG4gICNsYXlvdXRIb3N0U3ZjID0gaW5qZWN0KFNreUxheW91dEhvc3RTZXJ2aWNlKTtcbiAgI2hlbHBTdmMgPSBpbmplY3QoU2t5SGVscFNlcnZpY2UsIHsgb3B0aW9uYWw6IHRydWUgfSk7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5hZGRUaGVtZSgpO1xuXG4gICAgdGhpcy4jbGF5b3V0SG9zdFN2Yy5ob3N0TGF5b3V0Rm9yQ2hpbGRcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLiNuZ1Vuc3Vic2NyaWJlKSlcbiAgICAgIC5zdWJzY3JpYmUoKGFyZ3M6IFNreUxheW91dEhvc3RGb3JDaGlsZEFyZ3MpID0+IHtcbiAgICAgICAgdGhpcy4jbGF5b3V0Rm9yQ2hpbGQgPSBhcmdzLmxheW91dCBhcyBTa3lQYWdlTGF5b3V0VHlwZTtcbiAgICAgICAgdGhpcy4jdXBkYXRlQ3NzQ2xhc3MoKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5yZW1vdmVUaGVtZSgpO1xuXG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5uZXh0KCk7XG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5jb21wbGV0ZSgpO1xuXG4gICAgdGhpcy4jaGVscFN2Yz8udXBkYXRlSGVscCh7IHBhZ2VEZWZhdWx0SGVscEtleTogdW5kZWZpbmVkIH0pO1xuICB9XG5cbiAgI3VwZGF0ZUNzc0NsYXNzKCk6IHZvaWQge1xuICAgIGxldCBjc3NDbGFzcyA9IHRoaXMuI2xheW91dFxuICAgICAgPyBgJHtMQVlPVVRfQ0xBU1NfUFJFRklYfSR7dGhpcy4jbGF5b3V0fWBcbiAgICAgIDogTEFZT1VUX0NMQVNTX0RFRkFVTFQ7XG5cbiAgICBpZiAodGhpcy4jbGF5b3V0Rm9yQ2hpbGQpIHtcbiAgICAgIGNzc0NsYXNzID0gYCR7Y3NzQ2xhc3N9ICR7TEFZT1VUX0ZPUl9DSElMRF9DTEFTU19QUkVGSVh9JHt0aGlzLiNsYXlvdXRGb3JDaGlsZH1gO1xuICAgIH1cblxuICAgIHRoaXMuY3NzQ2xhc3MgPSBjc3NDbGFzcztcbiAgfVxufVxuIl19

package/esm2022/lib/modules/page-header/page-header-avatar.component.mjs

@@ -1,5 +1,6 @@
 import { Component, inject } from '@angular/core';
-import { SkyDefaultInputProvider, SkyMediaBreakpoints, SkyMediaQueryService, } from '@skyux/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SkyDefaultInputProvider, SkyMediaQueryService } from '@skyux/core';
 import * as i0 from "@angular/core";
 /**
  * Displays an avatar within the page header to the left of the page title.
@@ -7,22 +8,19 @@ import * as i0 from "@angular/core";
  * small on xs breakpoints and size large on small and above breakpoints.
  */
 export class SkyPageHeaderAvatarComponent {
-    #defaultInputProvider = inject(SkyDefaultInputProvider);
-    #mediaQueryService = inject(SkyMediaQueryService);
-    #mediaQuerySubscription;
     constructor() {
-        this.#mediaQuerySubscription = this.#mediaQueryService.subscribe((args) => {
-            if (args === SkyMediaBreakpoints.xs) {
-                this.#defaultInputProvider.setValue('avatar', 'size', 'small');
+        const defaultInputProvider = inject(SkyDefaultInputProvider);
+        inject(SkyMediaQueryService)
+            .breakpointChange.pipe(takeUntilDestroyed())
+            .subscribe((breakpoint) => {
+            if (breakpoint === 'xs') {
+                defaultInputProvider.setValue('avatar', 'size', 'small');
             }
             else {
-                this.#defaultInputProvider.setValue('avatar', 'size', 'large');
+                defaultInputProvider.setValue('avatar', 'size', 'large');
             }
         });
     }
-    ngOnDestroy() {
-        this.#mediaQuerySubscription.unsubscribe();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageHeaderAvatarComponent, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }); }
 }
@@ -30,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             type: Component,
             args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }]
         }], ctorParameters: () => [] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWEsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsbUJBQW1CLEVBQ25CLG9CQUFvQixHQUNyQixNQUFNLGFBQWEsQ0FBQzs7QUFJckI7Ozs7R0FJRztBQU9ILE1BQU0sT0FBTyw0QkFBNEI7SUFDdkMscUJBQXFCLEdBQUcsTUFBTSxDQUFDLHVCQUF1QixDQUFDLENBQUM7SUFDeEQsa0JBQWtCLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7SUFDbEQsdUJBQXVCLENBQWU7SUFFdEM7UUFDRSxJQUFJLENBQUMsdUJBQXVCLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFNBQVMsQ0FDOUQsQ0FBQyxJQUF5QixFQUFFLEVBQUU7WUFDNUIsSUFBSSxJQUFJLEtBQUssbUJBQW1CLENBQUMsRUFBRSxFQUFFLENBQUM7Z0JBQ3BDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLE1BQU0sRUFBRSxPQUFPLENBQUMsQ0FBQztZQUNqRSxDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLHFCQUFxQixDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQ2pFLENBQUM7UUFDSCxDQUFDLENBQ0YsQ0FBQztJQUNKLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM3QyxDQUFDOzhHQW5CVSw0QkFBNEI7a0dBQTVCLDRCQUE0QixpREFGNUIsQ0FBQyx1QkFBdUIsQ0FBQywwQkNsQnRDLGtCQUNBOzsyRkRtQmEsNEJBQTRCO2tCQU54QyxTQUFTOytCQUNFLHdCQUF3QixhQUd2QixDQUFDLHVCQUF1QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkRlc3Ryb3ksIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5RGVmYXVsdElucHV0UHJvdmlkZXIsXG4gIFNreU1lZGlhQnJlYWtwb2ludHMsXG4gIFNreU1lZGlhUXVlcnlTZXJ2aWNlLFxufSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG4vKipcbiAqIERpc3BsYXlzIGFuIGF2YXRhciB3aXRoaW4gdGhlIHBhZ2UgaGVhZGVyIHRvIHRoZSBsZWZ0IG9mIHRoZSBwYWdlIHRpdGxlLlxuICogSWYgbm8gc2l6ZSBpcyBzcGVjaWZpZWQgZm9yIHRoZSBhdmF0YXIgY29tcG9uZW50IGl0IHdpbGwgZGlzcGxheSBhdCBzaXplXG4gKiBzbWFsbCBvbiB4cyBicmVha3BvaW50cyBhbmQgc2l6ZSBsYXJnZSBvbiBzbWFsbCBhbmQgYWJvdmUgYnJlYWtwb2ludHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1wYWdlLWhlYWRlci1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1NreURlZmF1bHRJbnB1dFByb3ZpZGVyXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5UGFnZUhlYWRlckF2YXRhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICNkZWZhdWx0SW5wdXRQcm92aWRlciA9IGluamVjdChTa3lEZWZhdWx0SW5wdXRQcm92aWRlcik7XG4gICNtZWRpYVF1ZXJ5U2VydmljZSA9IGluamVjdChTa3lNZWRpYVF1ZXJ5U2VydmljZSk7XG4gICNtZWRpYVF1ZXJ5U3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy4jbWVkaWFRdWVyeVN1YnNjcmlwdGlvbiA9IHRoaXMuI21lZGlhUXVlcnlTZXJ2aWNlLnN1YnNjcmliZShcbiAgICAgIChhcmdzOiBTa3lNZWRpYUJyZWFrcG9pbnRzKSA9PiB7XG4gICAgICAgIGlmIChhcmdzID09PSBTa3lNZWRpYUJyZWFrcG9pbnRzLnhzKSB7XG4gICAgICAgICAgdGhpcy4jZGVmYXVsdElucHV0UHJvdmlkZXIuc2V0VmFsdWUoJ2F2YXRhcicsICdzaXplJywgJ3NtYWxsJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy4jZGVmYXVsdElucHV0UHJvdmlkZXIuc2V0VmFsdWUoJ2F2YXRhcicsICdzaXplJywgJ2xhcmdlJyk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLiNtZWRpYVF1ZXJ5U3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50IC8+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFFNUU7Ozs7R0FJRztBQU9ILE1BQU0sT0FBTyw0QkFBNEI7SUFDdkM7UUFDRSxNQUFNLG9CQUFvQixHQUFHLE1BQU0sQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDO1FBRTdELE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQzthQUN6QixnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQzthQUMzQyxTQUFTLENBQUMsQ0FBQyxVQUFVLEVBQUUsRUFBRTtZQUN4QixJQUFJLFVBQVUsS0FBSyxJQUFJLEVBQUUsQ0FBQztnQkFDeEIsb0JBQW9CLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxNQUFNLEVBQUUsT0FBTyxDQUFDLENBQUM7WUFDM0QsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLG9CQUFvQixDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsTUFBTSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1lBQzNELENBQUM7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7OEdBYlUsNEJBQTRCO2tHQUE1Qiw0QkFBNEIsaURBRjVCLENBQUMsdUJBQXVCLENBQUMsMEJDYnRDLGtCQUNBOzsyRkRjYSw0QkFBNEI7a0JBTnhDLFNBQVM7K0JBQ0Usd0JBQXdCLGFBR3ZCLENBQUMsdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgU2t5RGVmYXVsdElucHV0UHJvdmlkZXIsIFNreU1lZGlhUXVlcnlTZXJ2aWNlIH0gZnJvbSAnQHNreXV4L2NvcmUnO1xuXG4vKipcbiAqIERpc3BsYXlzIGFuIGF2YXRhciB3aXRoaW4gdGhlIHBhZ2UgaGVhZGVyIHRvIHRoZSBsZWZ0IG9mIHRoZSBwYWdlIHRpdGxlLlxuICogSWYgbm8gc2l6ZSBpcyBzcGVjaWZpZWQgZm9yIHRoZSBhdmF0YXIgY29tcG9uZW50IGl0IHdpbGwgZGlzcGxheSBhdCBzaXplXG4gKiBzbWFsbCBvbiB4cyBicmVha3BvaW50cyBhbmQgc2l6ZSBsYXJnZSBvbiBzbWFsbCBhbmQgYWJvdmUgYnJlYWtwb2ludHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1wYWdlLWhlYWRlci1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXItYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1NreURlZmF1bHRJbnB1dFByb3ZpZGVyXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5UGFnZUhlYWRlckF2YXRhckNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGNvbnN0IGRlZmF1bHRJbnB1dFByb3ZpZGVyID0gaW5qZWN0KFNreURlZmF1bHRJbnB1dFByb3ZpZGVyKTtcblxuICAgIGluamVjdChTa3lNZWRpYVF1ZXJ5U2VydmljZSlcbiAgICAgIC5icmVha3BvaW50Q2hhbmdlLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKCkpXG4gICAgICAuc3Vic2NyaWJlKChicmVha3BvaW50KSA9PiB7XG4gICAgICAgIGlmIChicmVha3BvaW50ID09PSAneHMnKSB7XG4gICAgICAgICAgZGVmYXVsdElucHV0UHJvdmlkZXIuc2V0VmFsdWUoJ2F2YXRhcicsICdzaXplJywgJ3NtYWxsJyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgZGVmYXVsdElucHV0UHJvdmlkZXIuc2V0VmFsdWUoJ2F2YXRhcicsICdzaXplJywgJ2xhcmdlJyk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICB9XG59XG4iLCI8bmctY29udGVudCAvPlxuIl19

package/esm2022/lib/modules/page-header/page-header.component.mjs

@@ -1,20 +1,22 @@
 import { Component, Input } from '@angular/core';
+import { SkyResponsiveHostDirective } from '@skyux/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@skyux/router";
-import * as i2 from "@skyux/icon";
+import * as i1 from "@skyux/core";
+import * as i2 from "@skyux/router";
+import * as i3 from "@skyux/icon";
 /**
  * Displays page heading's contents using spacing that corresponds to the parent page's layout
  */
 export class SkyPageHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i1.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
         }], propDecorators: { parentLink: [{
                 type: Input
             }], pageTitle: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3BhZ2VzL3NyYy9saWIvbW9kdWxlcy9wYWdlLWhlYWRlci9wYWdlLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBSWpEOztHQUVHO0FBTUgsTUFBTSxPQUFPLHNCQUFzQjs4R0FBdEIsc0JBQXNCO2tHQUF0QixzQkFBc0IscUhDWm5DLG84REErQ0E7OzJGRG5DYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQVNwQixVQUFVO3NCQURoQixLQUFLO2dCQU9DLFNBQVM7c0JBRGYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU2t5UGFnZUxpbmsgfSBmcm9tICcuLi9hY3Rpb24taHViL3R5cGVzL3BhZ2UtbGluayc7XG5cbi8qKlxuICogRGlzcGxheXMgcGFnZSBoZWFkaW5nJ3MgY29udGVudHMgdXNpbmcgc3BhY2luZyB0aGF0IGNvcnJlc3BvbmRzIHRvIHRoZSBwYXJlbnQgcGFnZSdzIGxheW91dFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktcGFnZS1oZWFkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYWdlLWhlYWRlci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lQYWdlSGVhZGVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIEEgbGluayB0byB0aGUgcGFyZW50IHBhZ2Ugb2YgdGhlIGN1cnJlbnQgcGFnZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBwYXJlbnRMaW5rPzogU2t5UGFnZUxpbms7XG5cbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBvZiB0aGUgY3VycmVudCBwYWdlLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHBhZ2VUaXRsZT86IHN0cmluZztcbn1cbiIsIjxkaXYgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXJcIj5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LXBhZ2UtaGVhZGVyLWFsZXJ0c1wiIC8+XG4gIDxkaXYgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItaW5mb1wiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1wYWdlLWhlYWRlci1hdmF0YXJcIiAvPlxuICAgIDxkaXYgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItdGV4dC1hbmQtY29udGVudFwiPlxuICAgICAgPGgxIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLXRleHRcIj5cbiAgICAgICAgQGlmIChwYXJlbnRMaW5rKSB7XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItcGFyZW50LWxpbmstd3JhcHBlclwiPlxuICAgICAgICAgICAgQGlmIChwYXJlbnRMaW5rLnBlcm1hbGluaz8ucm91dGU7IGFzIHBlcm1hbGlua1JvdXRlKSB7XG4gICAgICAgICAgICAgIDxhXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJza3ktZm9udC1oZWFkaW5nLTEgc2t5LXBhZ2UtaGVhZGVyLXBhcmVudC1saW5rXCJcbiAgICAgICAgICAgICAgICBbc2t5QXBwTGlua109XCJwZXJtYWxpbmtSb3V0ZS5jb21tYW5kc1wiXG4gICAgICAgICAgICAgICAgW3F1ZXJ5UGFyYW1zXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8ucXVlcnlQYXJhbXNcIlxuICAgICAgICAgICAgICAgIFtxdWVyeVBhcmFtc0hhbmRsaW5nXT1cIlxuICAgICAgICAgICAgICAgICAgcGVybWFsaW5rUm91dGUuZXh0cmFzPy5xdWVyeVBhcmFtc0hhbmRsaW5nXG4gICAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgICAgICBbZnJhZ21lbnRdPVwicGVybWFsaW5rUm91dGUuZXh0cmFzPy5mcmFnbWVudFwiXG4gICAgICAgICAgICAgICAgW3ByZXNlcnZlRnJhZ21lbnRdPVwicGVybWFsaW5rUm91dGUuZXh0cmFzPy5wcmVzZXJ2ZUZyYWdtZW50XCJcbiAgICAgICAgICAgICAgICBbc2tpcExvY2F0aW9uQ2hhbmdlXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8uc2tpcExvY2F0aW9uQ2hhbmdlXCJcbiAgICAgICAgICAgICAgICBbcmVwbGFjZVVybF09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnJlcGxhY2VVcmxcIlxuICAgICAgICAgICAgICAgIFtzdGF0ZV09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnN0YXRlXCJcbiAgICAgICAgICAgICAgICA+e3sgcGFyZW50TGluay5sYWJlbCB9fTwvYVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICB9IEBlbHNlIGlmIChwYXJlbnRMaW5rLnBlcm1hbGluaz8udXJsKSB7XG4gICAgICAgICAgICAgIDxhXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJza3ktZm9udC1oZWFkaW5nLTEgc2t5LXBhZ2UtaGVhZGVyLXBhcmVudC1saW5rXCJcbiAgICAgICAgICAgICAgICBbc2t5SHJlZl09XCJwYXJlbnRMaW5rLnBlcm1hbGluay51cmxcIlxuICAgICAgICAgICAgICAgID57eyBwYXJlbnRMaW5rLmxhYmVsIH19PC9hXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLWNoZXZyb25cIj5cbiAgICAgICAgICAgICAgPHNreS1pY29uIGljb249XCJjaGV2cm9uLXJpZ2h0XCIgLz5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPHdiciAvPlxuICAgICAgICB9XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLXBhZ2UtdGl0bGUgc2t5LWZvbnQtaGVhZGluZy0xXCI+XG4gICAgICAgICAge3sgcGFnZVRpdGxlIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvaDE+XG4gICAgICA8ZGl2IGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLWNvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LXBhZ2UtaGVhZGVyLWRldGFpbHNcIiAvPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktcGFnZS1oZWFkZXItYWN0aW9uc1wiIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3BhZ2VzL3NyYy9saWIvbW9kdWxlcy9wYWdlLWhlYWRlci9wYWdlLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGFBQWEsQ0FBQzs7Ozs7QUFJekQ7O0dBRUc7QUFPSCxNQUFNLE9BQU8sc0JBQXNCOzhHQUF0QixzQkFBc0I7a0dBQXRCLHNCQUFzQixxTENkbkMsbzhEQStDQTs7MkZEakNhLHNCQUFzQjtrQkFObEMsU0FBUztxQ0FDUSxDQUFDLDBCQUEwQixDQUFDLFlBQ2xDLGlCQUFpQjs4QkFTcEIsVUFBVTtzQkFEaEIsS0FBSztnQkFPQyxTQUFTO3NCQURmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTa3lSZXNwb25zaXZlSG9zdERpcmVjdGl2ZSB9IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU2t5UGFnZUxpbmsgfSBmcm9tICcuLi9hY3Rpb24taHViL3R5cGVzL3BhZ2UtbGluayc7XG5cbi8qKlxuICogRGlzcGxheXMgcGFnZSBoZWFkaW5nJ3MgY29udGVudHMgdXNpbmcgc3BhY2luZyB0aGF0IGNvcnJlc3BvbmRzIHRvIHRoZSBwYXJlbnQgcGFnZSdzIGxheW91dFxuICovXG5AQ29tcG9uZW50KHtcbiAgaG9zdERpcmVjdGl2ZXM6IFtTa3lSZXNwb25zaXZlSG9zdERpcmVjdGl2ZV0sXG4gIHNlbGVjdG9yOiAnc2t5LXBhZ2UtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5UGFnZUhlYWRlckNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBBIGxpbmsgdG8gdGhlIHBhcmVudCBwYWdlIG9mIHRoZSBjdXJyZW50IHBhZ2UuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgcGFyZW50TGluazogU2t5UGFnZUxpbmsgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBvZiB0aGUgY3VycmVudCBwYWdlLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHBhZ2VUaXRsZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xufVxuIiwiPGRpdiBjbGFzcz1cInNreS1wYWdlLWhlYWRlclwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktcGFnZS1oZWFkZXItYWxlcnRzXCIgLz5cbiAgPGRpdiBjbGFzcz1cInNreS1wYWdlLWhlYWRlci1pbmZvXCI+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LXBhZ2UtaGVhZGVyLWF2YXRhclwiIC8+XG4gICAgPGRpdiBjbGFzcz1cInNreS1wYWdlLWhlYWRlci10ZXh0LWFuZC1jb250ZW50XCI+XG4gICAgICA8aDEgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItdGV4dFwiPlxuICAgICAgICBAaWYgKHBhcmVudExpbmspIHtcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNreS1wYWdlLWhlYWRlci1wYXJlbnQtbGluay13cmFwcGVyXCI+XG4gICAgICAgICAgICBAaWYgKHBhcmVudExpbmsucGVybWFsaW5rPy5yb3V0ZTsgYXMgcGVybWFsaW5rUm91dGUpIHtcbiAgICAgICAgICAgICAgPGFcbiAgICAgICAgICAgICAgICBjbGFzcz1cInNreS1mb250LWhlYWRpbmctMSBza3ktcGFnZS1oZWFkZXItcGFyZW50LWxpbmtcIlxuICAgICAgICAgICAgICAgIFtza3lBcHBMaW5rXT1cInBlcm1hbGlua1JvdXRlLmNvbW1hbmRzXCJcbiAgICAgICAgICAgICAgICBbcXVlcnlQYXJhbXNdPVwicGVybWFsaW5rUm91dGUuZXh0cmFzPy5xdWVyeVBhcmFtc1wiXG4gICAgICAgICAgICAgICAgW3F1ZXJ5UGFyYW1zSGFuZGxpbmddPVwiXG4gICAgICAgICAgICAgICAgICBwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnF1ZXJ5UGFyYW1zSGFuZGxpbmdcbiAgICAgICAgICAgICAgICBcIlxuICAgICAgICAgICAgICAgIFtmcmFnbWVudF09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LmZyYWdtZW50XCJcbiAgICAgICAgICAgICAgICBbcHJlc2VydmVGcmFnbWVudF09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnByZXNlcnZlRnJhZ21lbnRcIlxuICAgICAgICAgICAgICAgIFtza2lwTG9jYXRpb25DaGFuZ2VdPVwicGVybWFsaW5rUm91dGUuZXh0cmFzPy5za2lwTG9jYXRpb25DaGFuZ2VcIlxuICAgICAgICAgICAgICAgIFtyZXBsYWNlVXJsXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8ucmVwbGFjZVVybFwiXG4gICAgICAgICAgICAgICAgW3N0YXRlXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8uc3RhdGVcIlxuICAgICAgICAgICAgICAgID57eyBwYXJlbnRMaW5rLmxhYmVsIH19PC9hXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgIH0gQGVsc2UgaWYgKHBhcmVudExpbmsucGVybWFsaW5rPy51cmwpIHtcbiAgICAgICAgICAgICAgPGFcbiAgICAgICAgICAgICAgICBjbGFzcz1cInNreS1mb250LWhlYWRpbmctMSBza3ktcGFnZS1oZWFkZXItcGFyZW50LWxpbmtcIlxuICAgICAgICAgICAgICAgIFtza3lIcmVmXT1cInBhcmVudExpbmsucGVybWFsaW5rLnVybFwiXG4gICAgICAgICAgICAgICAgPnt7IHBhcmVudExpbmsubGFiZWwgfX08L2FcbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItY2hldnJvblwiPlxuICAgICAgICAgICAgICA8c2t5LWljb24gaWNvbj1cImNoZXZyb24tcmlnaHRcIiAvPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICA8d2JyIC8+XG4gICAgICAgIH1cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItcGFnZS10aXRsZSBza3ktZm9udC1oZWFkaW5nLTFcIj5cbiAgICAgICAgICB7eyBwYWdlVGl0bGUgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9oMT5cbiAgICAgIDxkaXYgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItY29udGVudFwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktcGFnZS1oZWFkZXItZGV0YWlsc1wiIC8+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1wYWdlLWhlYWRlci1hY3Rpb25zXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/fesm2022/skyux-pages.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ElementRef, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
+import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
 import * as i3 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
 import * as i3$1 from '@skyux/layout';
@@ -14,11 +14,13 @@ import * as i1$1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule, DOCUMENT } from '@angular/common';
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyMediaBreakpoints, SkyResizeObserverMediaQueryService, SkyLayoutHostService, SkyHelpService } from '@skyux/core';
+import * as i1$2 from '@skyux/core';
+import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyResponsiveHostDirective, SkyLayoutHostService, SkyHelpService, provideSkyBreakpointObserver, SkyContainerBreakpointObserver } from '@skyux/core';
 import { SkyModalService, SkyModalLegacyService } from '@skyux/modals';
 import * as i4 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import { RouterModule } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const RECENTLY_ACCESSED_LIMIT = 5;
 function getRecentLinksSorted(recentLinks) {
@@ -502,22 +504,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * small on xs breakpoints and size large on small and above breakpoints.
  */
 class SkyPageHeaderAvatarComponent {
-    #defaultInputProvider = inject(SkyDefaultInputProvider);
-    #mediaQueryService = inject(SkyMediaQueryService);
-    #mediaQuerySubscription;
     constructor() {
-        this.#mediaQuerySubscription = this.#mediaQueryService.subscribe((args) => {
-            if (args === SkyMediaBreakpoints.xs) {
-                this.#defaultInputProvider.setValue('avatar', 'size', 'small');
+        const defaultInputProvider = inject(SkyDefaultInputProvider);
+        inject(SkyMediaQueryService)
+            .breakpointChange.pipe(takeUntilDestroyed())
+            .subscribe((breakpoint) => {
+            if (breakpoint === 'xs') {
+                defaultInputProvider.setValue('avatar', 'size', 'small');
             }
             else {
-                this.#defaultInputProvider.setValue('avatar', 'size', 'large');
+                defaultInputProvider.setValue('avatar', 'size', 'large');
             }
         });
     }
-    ngOnDestroy() {
-        this.#mediaQuerySubscription.unsubscribe();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageHeaderAvatarComponent, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }); }
 }
@@ -544,11 +543,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  */
 class SkyPageHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$2.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
         }], propDecorators: { parentLink: [{
                 type: Input
             }], pageTitle: [{
@@ -608,36 +607,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * page's layout.
  */
 class SkyPageContentComponent {
-    #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService, {
-        self: true,
-    });
-    ngOnInit() {
-        this.#mediaQueryService.observe(this.#elementRef, {
-            updateResponsiveClasses: true,
-        });
-    }
-    ngOnDestroy() {
-        this.#mediaQueryService.unobserve();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageContentComponent, selector: "sky-page-content", providers: [
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageContentComponent, selector: "sky-page-content", hostDirectives: [{ directive: i1$2.SkyResponsiveHostDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
-                    ], styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"] }]
         }] });
 
 /**
@@ -710,10 +685,6 @@ class SkyPageComponent {
         this.#themeAdapter = inject(SkyPageThemeAdapterService);
         this.#layoutHostSvc = inject(SkyLayoutHostService);
         this.#helpSvc = inject(SkyHelpService, { optional: true });
-        this.#elementRef = inject(ElementRef);
-        this.#resizeObserverSvc = inject(SkyResizeObserverMediaQueryService, {
-            self: true,
-        });
     }
     /**
      * The page layout that applies spacing to the page header and content. Use the layout
@@ -738,8 +709,6 @@ class SkyPageComponent {
     #themeAdapter;
     #layoutHostSvc;
     #helpSvc;
-    #elementRef;
-    #resizeObserverSvc;
     ngOnInit() {
         this.#themeAdapter.addTheme();
         this.#layoutHostSvc.hostLayoutForChild
@@ -748,11 +717,9 @@ class SkyPageComponent {
             this.#layoutForChild = args.layout;
             this.#updateCssClass();
         });
-        this.#resizeObserverSvc.observe(this.#elementRef);
     }
     ngOnDestroy() {
         this.#themeAdapter.removeTheme();
-        this.#resizeObserverSvc.destroy();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
         this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
@@ -770,11 +737,7 @@ class SkyPageComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [
             SkyPageThemeAdapterService,
             SkyLayoutHostService,
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
+            provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
         ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, decorators: [{
@@ -785,11 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     providers: [
                         SkyPageThemeAdapterService,
                         SkyLayoutHostService,
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
+                        provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
                     ],
                 }]
         }], propDecorators: { layout: [{