@skyux/pages 14.4.0 → 15.0.0-alpha.0

package/fesm2022/skyux-pages.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Optional, Pipe, NgModule, Component, input, contentChildren, computed, inject, isStandalone, effect, ViewEncapsulation, Input, ChangeDetectionStrategy, DOCUMENT, CSP_NONCE, Injectable } from '@angular/core';
+import { Optional, Pipe, NgModule, ChangeDetectionStrategy, Component, input, contentChildren, computed, inject, isStandalone, effect, ViewEncapsulation, Input, DOCUMENT, CSP_NONCE, Injectable } from '@angular/core';
 import * as i3 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/layout';
@@ -104,10 +104,10 @@ class SkyActionHubRecentLinksResolvePipe {
             getRecentLinksSorted(recentLinksResolved);
         this.#changeDetector.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.SkyRecentlyAccessedService, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, isStandalone: true, name: "skyActionHubRecentLinksResolve", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.SkyRecentlyAccessedService, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, isStandalone: true, name: "skyActionHubRecentLinksResolve", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyActionHubRecentLinksResolve',
@@ -135,10 +135,10 @@ class LinkAsPipe {
                 return false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkAsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: LinkAsPipe, isStandalone: true, name: "linkAs" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LinkAsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: LinkAsPipe, isStandalone: true, name: "linkAs" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkAsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LinkAsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'linkAs',
@@ -146,11 +146,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 
 class LinkAsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkAsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: LinkAsModule, imports: [LinkAsPipe], exports: [LinkAsPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkAsModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LinkAsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: LinkAsModule, imports: [LinkAsPipe], exports: [LinkAsPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LinkAsModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LinkAsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LinkAsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LinkAsPipe],
@@ -162,14 +162,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * A wrapper for each link in a link list.
  */
 class SkyLinkListItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyLinkListItemComponent, isStandalone: true, selector: "sky-link-list-item", host: { properties: { "attr.role": "\"listitem\"" } }, hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyLinkListItemComponent, isStandalone: true, selector: "sky-link-list-item", host: { properties: { "attr.role": "\"listitem\"" } }, hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-link-list-item', template: `<ng-content />`, host: {
                         '[attr.role]': '"listitem"',
-                    }, hostDirectives: [SkyThemeComponentClassDirective], styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"] }]
         }] });
 
 /**
@@ -180,12 +180,15 @@ class SkyLinkListComponent {
         /**
          * The text to display as the list's heading.
          */
-        this.headingText = input(...(ngDevMode ? [undefined, { debugName: "headingText" }] : []));
+        this.headingText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headingText" }] : /* istanbul ignore next */ []));
         /**
          * Option to pass links as an array of `SkyPageLink` objects or `'loading'` to display a loading indicator.
          */
-        this.links = input(...(ngDevMode ? [undefined, { debugName: "links" }] : []));
-        this.linkItems = contentChildren(SkyLinkListItemComponent, ...(ngDevMode ? [{ debugName: "linkItems" }] : []));
+        this.links = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "links" }] : /* istanbul ignore next */ []));
+        this.linkItems = contentChildren(SkyLinkListItemComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkItems" }] : /* istanbul ignore next */ []));
         this.hasLinks = computed(() => {
             const linkItems = this.linkItems();
             const links = this.links();
@@ -193,19 +196,21 @@ class SkyLinkListComponent {
                 return true;
             }
             return Array.isArray(links) && links.length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasLinks" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasLinks" }] : /* istanbul ignore next */ []));
         this.linksArray = computed(() => {
             const links = this.links();
             if (Array.isArray(links)) {
                 return links;
             }
             return [];
-        }, ...(ngDevMode ? [{ debugName: "linksArray" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linksArray" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLinkListComponent, isStandalone: true, selector: "sky-link-list", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "linkItems", predicate: SkyLinkListItemComponent, isSignal: true }], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "ngmodule", type: LinkAsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyLinkListComponent, isStandalone: true, selector: "sky-link-list", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "linkItems", predicate: SkyLinkListItemComponent, isSignal: true }], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "ngmodule", type: LinkAsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-link-list', imports: [
                         LinkAsModule,
@@ -213,7 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyAppLinkModule,
                         SkyHrefModule,
                         SkyWaitModule,
-                    ], hostDirectives: [SkyThemeComponentClassDirective], template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
         }], propDecorators: { headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], linkItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyLinkListItemComponent), { isSignal: true }] }] } });
 
 /* istanbul ignore file */
@@ -250,11 +255,11 @@ SkyLibResourcesService.addResources(RESOURCES);
  * Import into any component library module that needs to use resource strings.
  */
 class SkyPagesResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPagesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyPagesResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPagesResourcesModule, imports: [SkyI18nModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPagesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyPagesResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPagesResourcesModule, imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPagesResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPagesResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -271,17 +276,18 @@ class SkyLinkListRecentlyAccessedComponent {
          * a `SkyRecentlyAccessedGetLinksArgs` object for `SkyRecentlyAccessedService`,
          * or `'loading'` to display a loading indicator.
          */
-        this.recentLinks = input(...(ngDevMode ? [undefined, { debugName: "recentLinks" }] : []));
+        this.recentLinks = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "recentLinks" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyLinkListRecentlyAccessedComponent, isStandalone: true, selector: "sky-link-list-recently-accessed", inputs: { recentLinks: { classPropertyName: "recentLinks", publicName: "recentLinks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: SkyLinkListRecentlyAccessedComponent, isStandalone: true, selector: "sky-link-list-recently-accessed", inputs: { recentLinks: { classPropertyName: "recentLinks", publicName: "recentLinks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <sky-link-list
       [links]="recentLinks() | skyActionHubRecentLinksResolve"
       [headingText]="'sky_action_hub_recent_links' | skyLibResources"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-link-list-recently-accessed',
@@ -290,6 +296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyLinkListComponent,
                         SkyPagesResourcesModule,
                     ],
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     template: `
     <sky-link-list
       [links]="recentLinks() | skyActionHubRecentLinksResolve"
@@ -300,16 +307,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], propDecorators: { recentLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "recentLinks", required: false }] }] } });
 
 class SkyLinkListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
             SkyLinkListItemComponent,
             SkyLinkListRecentlyAccessedComponent], exports: [SkyLinkListComponent,
             SkyLinkListItemComponent,
             SkyLinkListRecentlyAccessedComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
             SkyLinkListRecentlyAccessedComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLinkListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyLinkListModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -333,11 +340,13 @@ class SkyModalLinkListComponent {
         /**
          * Option to pass links as an array of `SkyPageModalLink` objects or `'loading'` to display a loading indicator.
          */
-        this.links = input(...(ngDevMode ? [undefined, { debugName: "links" }] : []));
+        this.links = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "links" }] : /* istanbul ignore next */ []));
         /**
          * The text to display as the list's heading.
          */
-        this.headingText = input(...(ngDevMode ? [undefined, { debugName: "headingText" }] : []));
+        this.headingText = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headingText" }] : /* istanbul ignore next */ []));
         this.linksArray = computed(() => {
             const links = this.links();
             if (Array.isArray(links)) {
@@ -346,7 +355,8 @@ class SkyModalLinkListComponent {
             else {
                 return [];
             }
-        }, ...(ngDevMode ? [{ debugName: "linksArray" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linksArray" }] : /* istanbul ignore next */ []));
         this.#logger = inject(SkyLogService, { optional: true });
         this.#modalSvc = inject(SkyModalService);
     }
@@ -365,28 +375,28 @@ class SkyModalLinkListComponent {
             this.#modalSvc.open(modal.component, modal.config);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyModalLinkListComponent, isStandalone: false, selector: "sky-modal-link-list", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray().length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'button') {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"link.click({ item: link })\"\n            >\n              {{ link.label }}\n            </button>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ headingText() }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyModalLinkListComponent, isStandalone: false, selector: "sky-modal-link-list", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray().length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'button') {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"link.click({ item: link })\"\n            >\n              {{ link.label }}\n            </button>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ headingText() }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal-link-list', standalone: false, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray().length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'button') {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"link.click({ item: link })\"\n            >\n              {{ link.label }}\n            </button>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ headingText() }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
+            args: [{ selector: 'sky-modal-link-list', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray().length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link.label) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              class=\"sky-link-list-item\"\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'button') {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"link.click({ item: link })\"\n            >\n              {{ link.label }}\n            </button>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ headingText() }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: false }] }] } });
 
 class SkyModalLinkListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListModule, declarations: [SkyModalLinkListComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListModule, declarations: [SkyModalLinkListComponent], imports: [CommonModule,
             SkyAppLinkModule,
             SkyHrefModule,
             SkyWaitModule,
             LinkAsModule], exports: [SkyModalLinkListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListModule, imports: [CommonModule,
             SkyAppLinkModule,
             SkyHrefModule,
             SkyWaitModule,
             LinkAsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyModalLinkListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyModalLinkListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyModalLinkListComponent],
@@ -408,7 +418,8 @@ class SkyNeedsAttentionComponent {
     #logService;
     #resolver;
     constructor() {
-        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.displayItems = toObservable(this.items).pipe(switchMap((items) => {
             if (!items?.length) {
                 return of([]);
@@ -438,12 +449,12 @@ class SkyNeedsAttentionComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyNeedsAttentionComponent, isStandalone: true, selector: "sky-needs-attention", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, 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    @let itemsToDisplay = displayItems | async;\n    @if (!itemsToDisplay?.length) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul class=\"sky-needs-attention-list\">\n        @for (\n          item of itemsToDisplay;\n          track displayItemsTrackByFn(item);\n          let isLast = $last\n        ) {\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 | linkAs: 'skyHref') {\n              <a class=\"sky-needs-attention-item\" [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            } @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              class=\"sky-needs-attention-item-icon\"\n              iconName=\"chevron-right\"\n              iconSize=\"s\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [".sky-needs-attention-list:not(.sky-theme-modern *){--sky-override-needs-attention-item-icon-color: #686c73;--sky-override-needs-attention-item-wrapper-padding: var( --sky-margin-stacked-lg )}:host{display:block}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-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:has(a[hidden]){display:none}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;margin-left:auto;color:#686c73}.sky-needs-attention-item-icon .sky-needs-attention-item-icon{color:var(--sky-override-needs-attention-item-icon-color, var(--sky-color-icon-deemphasized))}.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}\n"], dependencies: [{ kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i2$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i2$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i2$1.λ43, selector: "sky-box-content" }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "ngmodule", type: LinkAsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyNeedsAttentionComponent, isStandalone: true, selector: "sky-needs-attention", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, 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    @let itemsToDisplay = displayItems | async;\n    @if (!itemsToDisplay?.length) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul class=\"sky-needs-attention-list\">\n        @for (\n          item of itemsToDisplay;\n          track displayItemsTrackByFn(item);\n          let isLast = $last\n        ) {\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 | linkAs: 'skyHref') {\n              <a class=\"sky-needs-attention-item\" [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            } @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              class=\"sky-needs-attention-item-icon\"\n              iconName=\"chevron-right\"\n              iconSize=\"s\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [".sky-needs-attention-list:not(.sky-theme-modern *){--sky-override-needs-attention-item-icon-color: #686c73;--sky-override-needs-attention-item-wrapper-padding: var( --sky-margin-stacked-lg )}:host{display:block}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-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:has(a[hidden]){display:none}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;margin-left:auto;color:#686c73}.sky-needs-attention-item-icon .sky-needs-attention-item-icon{color:var(--sky-override-needs-attention-item-icon-color, var(--sky-color-icon-deemphasized))}.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}\n"], dependencies: [{ kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i2$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i2$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i2$1.λ43, selector: "sky-box-content" }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "ngmodule", type: LinkAsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-needs-attention', imports: [
+            args: [{ selector: 'sky-needs-attention', changeDetection: ChangeDetectionStrategy.Eager, imports: [
                         SkyAppLinkModule,
                         SkyBoxModule,
                         SkyHrefModule,
@@ -462,11 +473,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @internal
  */
 class SkyNeedsAttentionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionModule, imports: [SkyNeedsAttentionComponent], exports: [SkyNeedsAttentionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionModule, imports: [SkyNeedsAttentionComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionModule, imports: [SkyNeedsAttentionComponent], exports: [SkyNeedsAttentionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionModule, imports: [SkyNeedsAttentionComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyNeedsAttentionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyNeedsAttentionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkyNeedsAttentionComponent],
@@ -479,24 +490,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Appears below the page header details.
  */
 class SkyPageHeaderActionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageHeaderActionsComponent, isStandalone: false, selector: "sky-page-header-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageHeaderActionsComponent, isStandalone: false, selector: "sky-page-header-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header-actions', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"] }]
+            args: [{ selector: 'sky-page-header-actions', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"] }]
         }] });
 
 /**
  * Displays alerts within the page header and applies spacing between alerts. Appears above the page title.
  */
 class SkyPageHeaderAlertsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageHeaderAlertsComponent, isStandalone: false, selector: "sky-page-header-alerts", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageHeaderAlertsComponent, isStandalone: false, selector: "sky-page-header-alerts", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderAlertsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderAlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header-alerts', standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"] }]
+            args: [{ selector: 'sky-page-header-alerts', standalone: false, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"] }]
         }] });
 
 /**
@@ -518,12 +529,12 @@ class SkyPageHeaderAvatarComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageHeaderAvatarComponent, isStandalone: false, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media(min-width:768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageHeaderAvatarComponent, isStandalone: false, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media(min-width:768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media(min-width:768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"] }]
+            args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], standalone: false, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media(min-width:768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -531,24 +542,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Appears below the title and above the page actions.
  */
 class SkyPageHeaderDetailsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageHeaderDetailsComponent, isStandalone: false, selector: "sky-page-header-details", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageHeaderDetailsComponent, isStandalone: false, selector: "sky-page-header-details", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header-details', standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"] }]
+            args: [{ selector: 'sky-page-header-details', standalone: false, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"] }]
         }] });
 
 /**
  * Displays page heading's contents using spacing that corresponds to the parent page's layout
  */
 class SkyPageHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$3.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 iconName=\"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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-and-content{flex-grow:1}.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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$3.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 iconName=\"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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-and-content{flex-grow:1}.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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', standalone: false, 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 iconName=\"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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-and-content{flex-grow:1}.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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"] }]
+            args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, 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 iconName=\"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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-and-content{flex-grow:1}.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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"] }]
         }], propDecorators: { parentLink: [{
                 type: Input
             }], pageTitle: [{
@@ -556,8 +567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class SkyPageHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderModule, declarations: [SkyPageHeaderActionsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderModule, declarations: [SkyPageHeaderActionsComponent,
             SkyPageHeaderAlertsComponent,
             SkyPageHeaderAvatarComponent,
             SkyPageHeaderComponent,
@@ -570,13 +581,13 @@ class SkyPageHeaderModule {
             SkyPageHeaderAvatarComponent,
             SkyPageHeaderComponent,
             SkyPageHeaderDetailsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderModule, imports: [RouterModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderModule, imports: [RouterModule,
             SkyAppLinkModule,
             SkyIconModule,
             SkyThemeModule,
             SkyHrefModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -608,10 +619,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * page's layout.
  */
 class SkyPageContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageContentComponent, isStandalone: false, selector: "sky-page-content", hostDirectives: [{ directive: i1$3.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageContentComponent, isStandalone: false, selector: "sky-page-content", hostDirectives: [{ directive: i1$3.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: "21.2.0", ngImport: i0, type: SkyPageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageContentComponent, decorators: [{
             type: Component,
             args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
         }] });
@@ -621,12 +632,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * on mobile devices.
  */
 class SkyPageLinksComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageLinksComponent, isStandalone: true, selector: "sky-page-links", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:var(--sky-layout-host-links-display, block);margin:var(--sky-layout-host-links-spacing, 0)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyPageLinksComponent, isStandalone: true, selector: "sky-page-links", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:var(--sky-layout-host-links-display, block);margin:var(--sky-layout-host-links-spacing, 0)}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageLinksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageLinksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-links', template: '<ng-content />', styles: [":host{display:var(--sky-layout-host-links-display, block);margin:var(--sky-layout-host-links-spacing, 0)}\n"] }]
+            args: [{ selector: 'sky-page-links', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:var(--sky-layout-host-links-display, block);margin:var(--sky-layout-host-links-spacing, 0)}\n"] }]
         }] });
 
 /**
@@ -657,10 +668,10 @@ class SkyPageThemeAdapterService {
             this.#styleEl = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageThemeAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageThemeAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageThemeAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageThemeAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
             type: Injectable
         }] });
 
@@ -678,7 +689,8 @@ class SkyPageComponent {
          * Use `none` for custom content that does not adhere to predefined spacing or constraints.
          * @default "none"
          */
-        this.layout = input('none', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.layout = input('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.#themeAdapter = inject(SkyPageThemeAdapterService);
         this.#helpSvc = inject(SkyHelpService, { optional: true });
     }
@@ -697,18 +709,18 @@ class SkyPageComponent {
         this.#themeAdapter.removeTheme();
         this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyPageComponent, isStandalone: false, selector: "sky-page", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: SkyPageComponent, isStandalone: false, selector: "sky-page", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             SkyPageThemeAdapterService,
             provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
-        ], hostDirectives: [{ directive: i1$3.SkyLayoutHostDirective, inputs: ["layout", "layout"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host.sky-layout-host-list,:host.sky-layout-host-fit{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}\n"] }); }
+        ], hostDirectives: [{ directive: i1$3.SkyLayoutHostDirective, inputs: ["layout", "layout"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host.sky-layout-host-list,:host.sky-layout-host-fit{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-page', template: `<ng-content />`, providers: [
                         SkyPageThemeAdapterService,
                         provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
-                    ], standalone: false, hostDirectives: [
+                    ], standalone: false, changeDetection: ChangeDetectionStrategy.Eager, hostDirectives: [
                         {
                             directive: SkyLayoutHostDirective,
                             inputs: ['layout'],
@@ -719,8 +731,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class SkyPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [SkyLinkListModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [SkyLinkListModule,
             SkyPageLinksComponent,
             SkyLinkListComponent,
             SkyLinkListItemComponent,
@@ -734,14 +746,14 @@ class SkyPageModule {
             SkyPageHeaderModule,
             SkyPageContentComponent,
             SkyPageLinksComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageModule, imports: [SkyLinkListModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageModule, imports: [SkyLinkListModule,
             SkyLinkListComponent,
             SkyLinkListRecentlyAccessedComponent,
             SkyModalLinkListModule, SkyLinkListModule,
             SkyModalLinkListModule,
             SkyPageHeaderModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyPageComponent, SkyPageContentComponent],
@@ -775,24 +787,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * ```
  */
 class SkyActionHubButtonsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyActionHubButtonsComponent, isStandalone: false, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyActionHubButtonsComponent, isStandalone: false, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-action-hub-buttons', standalone: false, template: "<ng-content />\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'sky-action-hub-buttons', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ng-content />\n", styles: [":host{display:block}\n"] }]
         }] });
 
 /**
  * Displays additional content after the action items.
  */
 class SkyActionHubContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyActionHubContentComponent, isStandalone: false, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: SkyActionHubContentComponent, isStandalone: false, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-action-hub-content', standalone: false, template: "<ng-content />\n" }]
+            args: [{ selector: 'sky-action-hub-content', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ng-content />\n" }]
         }] });
 
 class SkyActionHubRelatedLinksSortPipe {
@@ -812,10 +824,10 @@ class SkyActionHubRelatedLinksSortPipe {
             return aLabel < bLabel ? -1 : 1;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, isStandalone: false, name: "skyActionHubRelatedLinksSort" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, isStandalone: false, name: "skyActionHubRelatedLinksSort" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyActionHubRelatedLinksSort',
@@ -859,10 +871,10 @@ class SkyActionHubComponent {
         return this.#_needsAttention;
     }
     #_needsAttention;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyActionHubComponent, isStandalone: false, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\">\n    <sky-page-header-actions>\n      <div class=\"sky-margin-stacked-sm\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\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-page-content>\n  <sky-page-links>\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      [headingText]=\"'sky_action_hub_settings_links' | skyLibResources\"\n    />\n  </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"], dependencies: [{ 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", "headingText"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderActionsComponent, selector: "sky-page-header-actions" }, { 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: "component", type: SkyPageComponent, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: SkyPageContentComponent, selector: "sky-page-content" }, { kind: "component", type: SkyPageLinksComponent, selector: "sky-page-links" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SkyActionHubComponent, isStandalone: false, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-page layout=\"blocks\">\n  <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\">\n    <sky-page-header-actions>\n      <div class=\"sky-margin-stacked-sm\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\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-page-content>\n  <sky-page-links>\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      [headingText]=\"'sky_action_hub_settings_links' | skyLibResources\"\n    />\n  </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"], dependencies: [{ 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", "headingText"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderActionsComponent, selector: "sky-page-header-actions" }, { 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: "component", type: SkyPageComponent, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: SkyPageContentComponent, selector: "sky-page-content" }, { kind: "component", type: SkyPageLinksComponent, selector: "sky-page-links" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<sky-page layout=\"blocks\">\n  <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\">\n    <sky-page-header-actions>\n      <div class=\"sky-margin-stacked-sm\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n    </sky-page-header-actions>\n  </sky-page-header>\n  <sky-page-content>\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-page-content>\n  <sky-page-links>\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      [headingText]=\"'sky_action_hub_settings_links' | skyLibResources\"\n    />\n  </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { needsAttention: [{
@@ -880,8 +892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class SkyActionHubModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
             SkyActionHubComponent,
             SkyActionHubContentComponent,
             SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
@@ -897,7 +909,7 @@ class SkyActionHubModule {
             SkyPageModule], exports: [SkyActionHubButtonsComponent,
             SkyActionHubComponent,
             SkyActionHubContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
             SkyFluidGridModule,
             SkyLinkListModule,
             SkyModalLinkListModule,
@@ -908,7 +920,7 @@ class SkyActionHubModule {
             SkyWaitModule,
             SkyPageModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionHubModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyActionHubModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [