@skyux/pages 11.11.2 → 11.12.0

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, ElementRef, 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';
@@ -419,11 +419,11 @@ class SkyNeedsAttentionComponent {
     #items;
     #logService = inject(SkyLogService);
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\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                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i3$1.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\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                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i3$1.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-needs-attention', template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\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                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"] }]
+            args: [{ selector: 'sky-needs-attention', template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\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                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -519,11 +519,11 @@ class SkyPageHeaderAvatarComponent {
         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"] }); }
+    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: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}: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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
             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"] }]
+            args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], template: "<ng-content />\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}: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: () => [] });
 
 /**
@@ -539,39 +539,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'sky-page-header-details', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }]
         }] });
 
-let parentLink;
 /**
  * Displays page heading's contents using spacing that corresponds to the parent page's layout
  */
 class SkyPageHeaderComponent {
-    #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService);
-    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: 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" }, providers: [
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
-        ], 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" }, 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: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}: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', providers: [
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
-                    ], 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: [{ 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: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}: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: [{
@@ -720,11 +697,11 @@ class SkyActionHubComponent {
     }
     #_needsAttention;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: i3$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i3$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3$1.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: SkyLinkListRecentlyAccessedComponent, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: i3$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i3$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3$1.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: SkyLinkListRecentlyAccessedComponent, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
+            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
         }], propDecorators: { needsAttention: [{
                 type: Input
             }], parentLink: [{
@@ -801,7 +778,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  */
 class SkyPageContentComponent {
     #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService);
+    #mediaQueryService = inject(SkyResizeObserverMediaQueryService, {
+        self: true,
+    });
     ngOnInit() {
         this.#mediaQueryService.observe(this.#elementRef, {
             updateResponsiveClasses: true,
@@ -900,6 +879,10 @@ 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
@@ -924,6 +907,8 @@ class SkyPageComponent {
     #themeAdapter;
     #layoutHostSvc;
     #helpSvc;
+    #elementRef;
+    #resizeObserverSvc;
     ngOnInit() {
         this.#themeAdapter.addTheme();
         this.#layoutHostSvc.hostLayoutForChild
@@ -932,9 +917,11 @@ 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 });
@@ -949,14 +936,30 @@ class SkyPageComponent {
         this.cssClass = cssClass;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+    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,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-page',
                     template: `<ng-content />`,
-                    providers: [SkyPageThemeAdapterService, SkyLayoutHostService],
+                    providers: [
+                        SkyPageThemeAdapterService,
+                        SkyLayoutHostService,
+                        SkyResizeObserverMediaQueryService,
+                        {
+                            provide: SkyMediaQueryService,
+                            useExisting: SkyResizeObserverMediaQueryService,
+                        },
+                    ],
                 }]
         }], propDecorators: { layout: [{
                 type: Input