@skyux/pages 8.7.0 → 9.0.0-alpha.0

package/fesm2022/skyux-pages.mjs

@@ -0,0 +1,849 @@
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, NgModule, Component, Input, inject, Optional, ChangeDetectionStrategy, Injectable, Inject, HostBinding } from '@angular/core';
+import * as i6 from '@skyux/i18n';
+import { SkyI18nModule, getLibStringForLocale, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i4 from '@skyux/indicators';
+import { SkyWaitModule, SkyIconModule } from '@skyux/indicators';
+import * as i3 from '@skyux/layout';
+import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
+import * as i5 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import * as i2 from '@skyux/router';
+import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
+import * as i1$1 from '@skyux/modals';
+import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyMediaBreakpoints, SkyLayoutHostService } from '@skyux/core';
+import { RouterModule } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+class LinkAsPipe {
+    transform(value, linkAs) {
+        const permalink = value?.permalink;
+        const permalinkUrl = permalink?.url;
+        switch (linkAs) {
+            case 'button':
+                return !!value?.click && !permalink;
+            case 'href':
+                return permalinkUrl !== undefined && !permalinkUrl.includes('://');
+            case 'skyHref':
+                return permalinkUrl !== undefined && permalinkUrl.includes('://');
+            case 'skyAppLink':
+                return !!(permalink && permalinkUrl === undefined && permalink.route);
+            default:
+                return false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkAsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: LinkAsPipe, name: "linkAs" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkAsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'linkAs',
+                }]
+        }] });
+
+class LinkAsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkAsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: LinkAsModule, declarations: [LinkAsPipe], exports: [LinkAsPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkAsModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkAsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LinkAsPipe],
+                    exports: [LinkAsPipe],
+                }]
+        }] });
+
+class SkyLinkListComponent {
+    constructor() {
+        this.linksArray = [];
+    }
+    set links(value) {
+        this.#_links = value;
+        this.linksArray = Array.isArray(value) ? value : [];
+    }
+    get links() {
+        return this.#_links;
+    }
+    #_links;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyLinkListComponent, selector: "sky-link-list", inputs: { links: "links", title: "title" }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links === 'loading'\"></sky-wait>\n<ng-container\n  *ngIf=\"links === 'loading'; then loadingTemplateRef; else linksTemplateRef\"\n></ng-container>\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n<ng-template #loadingTemplateRef>\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n</ng-template>\n<ng-template #linksTemplateRef>\n  <ng-container *ngIf=\"linksArray.length > 0\">\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n    <ul class=\"sky-link-list\">\n      <li *ngFor=\"let link of linksArray\">\n        <a *ngIf=\"link | linkAs : 'skyHref'\" [skyHref]=\"link.permalink.url\">\n          {{ link.label }}\n        </a>\n        <a *ngIf=\"link | linkAs : 'href'\" [href]=\"link.permalink.url\">\n          {{ link.label }}\n        </a>\n        <a\n          *ngIf=\"link.permalink.route\"\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]=\"link.permalink.route.extras?.skipLocationChange\"\n          [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n          [state]=\"link.permalink.route.extras?.state\"\n        >\n          {{ link.label }}\n        </a>\n      </li>\n    </ul>\n  </ng-container>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-link-list', template: "<sky-wait [isWaiting]=\"links === 'loading'\"></sky-wait>\n<ng-container\n  *ngIf=\"links === 'loading'; then loadingTemplateRef; else linksTemplateRef\"\n></ng-container>\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n<ng-template #loadingTemplateRef>\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n</ng-template>\n<ng-template #linksTemplateRef>\n  <ng-container *ngIf=\"linksArray.length > 0\">\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n    <ul class=\"sky-link-list\">\n      <li *ngFor=\"let link of linksArray\">\n        <a *ngIf=\"link | linkAs : 'skyHref'\" [skyHref]=\"link.permalink.url\">\n          {{ link.label }}\n        </a>\n        <a *ngIf=\"link | linkAs : 'href'\" [href]=\"link.permalink.url\">\n          {{ link.label }}\n        </a>\n        <a\n          *ngIf=\"link.permalink.route\"\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]=\"link.permalink.route.extras?.skipLocationChange\"\n          [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n          [state]=\"link.permalink.route.extras?.state\"\n        >\n          {{ link.label }}\n        </a>\n      </li>\n    </ul>\n  </ng-container>\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}\n"] }]
+        }], propDecorators: { links: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class SkyLinkListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListModule, declarations: [SkyLinkListComponent], imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyThemeModule,
+            SkyWaitModule,
+            LinkAsModule], exports: [SkyLinkListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListModule, imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyThemeModule,
+            SkyWaitModule,
+            LinkAsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLinkListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyLinkListComponent],
+                    exports: [SkyLinkListComponent],
+                    imports: [
+                        CommonModule,
+                        SkyAppLinkModule,
+                        SkyHrefModule,
+                        SkyI18nModule,
+                        SkyThemeModule,
+                        SkyWaitModule,
+                        LinkAsModule,
+                    ],
+                }]
+        }] });
+
+class SkyModalLinkListComponent {
+    set links(value) {
+        this.#_links = value;
+        this.linksArray = Array.isArray(value) ? value : [];
+    }
+    get links() {
+        return this.#_links;
+    }
+    #_links;
+    #modalService;
+    constructor(modalService) {
+        this.linksArray = [];
+        this.#modalService = modalService;
+    }
+    openModal(link) {
+        const modal = link.modal;
+        if (modal) {
+            this.#modalService.open(modal.component, modal.config);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListComponent, deps: [{ token: i1$1.SkyModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: { links: "links", title: "title" }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links === 'loading'\"></sky-wait>\n<ng-container\n  *ngIf=\"links === 'loading'; then loadingTemplateRef; else linksTemplateRef\"\n></ng-container>\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n<ng-template #loadingTemplateRef>\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n</ng-template>\n<ng-template #linksTemplateRef>\n  <ng-container *ngIf=\"linksArray.length > 0\">\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n    <ul class=\"sky-link-list\">\n      <li *ngFor=\"let link of linksArray\">\n        <a *ngIf=\"link | linkAs : 'skyHref'\" [skyHref]=\"link.permalink?.url\">\n          {{ link.label }}\n        </a>\n        <a *ngIf=\"link | linkAs : 'href'\" [href]=\"link.permalink?.url\">\n          {{ link.label }}\n        </a>\n        <a\n          *ngIf=\"link.permalink && link.permalink.route\"\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]=\"link.permalink.route.extras?.skipLocationChange\"\n          [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n          [state]=\"link.permalink.route.extras?.state\"\n        >\n          {{ link.label }}\n        </a>\n        <button\n          *ngIf=\"link.modal\"\n          (click)=\"openModal(link)\"\n          class=\"sky-btn sky-btn-link-inline\"\n          type=\"button\"\n        >\n          {{ link.label }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-modal-link-list', template: "<sky-wait [isWaiting]=\"links === 'loading'\"></sky-wait>\n<ng-container\n  *ngIf=\"links === 'loading'; then loadingTemplateRef; else linksTemplateRef\"\n></ng-container>\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n<ng-template #loadingTemplateRef>\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n</ng-template>\n<ng-template #linksTemplateRef>\n  <ng-container *ngIf=\"linksArray.length > 0\">\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\"></ng-container>\n    <ul class=\"sky-link-list\">\n      <li *ngFor=\"let link of linksArray\">\n        <a *ngIf=\"link | linkAs : 'skyHref'\" [skyHref]=\"link.permalink?.url\">\n          {{ link.label }}\n        </a>\n        <a *ngIf=\"link | linkAs : 'href'\" [href]=\"link.permalink?.url\">\n          {{ link.label }}\n        </a>\n        <a\n          *ngIf=\"link.permalink && link.permalink.route\"\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]=\"link.permalink.route.extras?.skipLocationChange\"\n          [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n          [state]=\"link.permalink.route.extras?.state\"\n        >\n          {{ link.label }}\n        </a>\n        <button\n          *ngIf=\"link.modal\"\n          (click)=\"openModal(link)\"\n          class=\"sky-btn sky-btn-link-inline\"\n          type=\"button\"\n        >\n          {{ link.label }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyModalService }]; }, propDecorators: { links: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class SkyModalLinkListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListModule, declarations: [SkyModalLinkListComponent], imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyWaitModule,
+            LinkAsModule], exports: [SkyModalLinkListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListModule, imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyWaitModule,
+            LinkAsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyModalLinkListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyModalLinkListComponent],
+                    exports: [SkyModalLinkListComponent],
+                    imports: [
+                        CommonModule,
+                        SkyAppLinkModule,
+                        SkyHrefModule,
+                        SkyI18nModule,
+                        SkyWaitModule,
+                        LinkAsModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-pages' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        sky_action_hub_related_links: { message: 'Related links' },
+        sky_action_hub_recent_links: { message: 'Recently accessed' },
+        sky_action_hub_settings_links: { message: 'Settings' },
+        sky_action_hub_needs_attention: { message: 'Needs attention' },
+        sky_action_hub_needs_attention_empty: {
+            message: 'No issues currently need attention',
+        },
+    },
+};
+class SkyPagesResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyPagesResourcesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPagesResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagesResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyPagesResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPagesResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyPagesResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class SkyNeedsAttentionComponent {
+    set items(value) {
+        this.#items = value;
+        if (value?.some((c) => c.message)) {
+            this.#logService.deprecated(`SkyActionHubNeedsAttention.message`, {
+                deprecationMajorVersion: 7,
+                replacementRecommendation: 'Use `title` instead.',
+                moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/action-hub?docs-active-tab=development#interface-skyactionhubneedsattention',
+            });
+        }
+    }
+    get items() {
+        return this.#items;
+    }
+    #items;
+    #logService = inject(SkyLogService);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<ng-template #itemsTemplate>\n  <ul>\n    <li\n      *ngFor=\"let item of items; let isLast = last\"\n      class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n      [ngClass]=\"{\n        'sky-border-bottom-row': !isLast\n      }\"\n    >\n      <a\n        *ngIf=\"\n          (item | linkAs : 'skyAppLink') &&\n          item.permalink?.route as permalinkRoute\n        \"\n        [skyAppLink]=\"permalinkRoute.commands\"\n        [queryParams]=\"permalinkRoute.extras?.queryParams\"\n        [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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        class=\"sky-needs-attention-item\"\n        >{{ item.title }} {{ item.message }}</a\n      >\n      <ng-container *ngIf=\"item.permalink as permalink\">\n        <a\n          *ngIf=\"item | linkAs : 'skyHref'\"\n          [skyHref]=\"permalink.url\"\n          class=\"sky-needs-attention-item\"\n          >{{ item.title }} {{ item.message }}</a\n        >\n        <a\n          *ngIf=\"item | linkAs : 'href'\"\n          [href]=\"permalink.url\"\n          class=\"sky-needs-attention-item\"\n          >{{ item.title }} {{ item.message }}</a\n        >\n      </ng-container>\n      <button\n        *ngIf=\"item | linkAs : '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      <sky-icon\n        *skyThemeIf=\"'default'\"\n        class=\"sky-needs-attention-item-icon\"\n        icon=\"caret-right\"\n      ></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        class=\"sky-needs-attention-item-icon\"\n        icon=\"chevron-right\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </li>\n  </ul>\n</ng-template>\n\n<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    <ng-container *ngIf=\"items?.length === 0; else itemsTemplate\">{{\n      'sky_action_hub_needs_attention_empty' | skyLibResources\n    }}</ng-container>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ41, selector: "sky-box", inputs: ["ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3.λ42, selector: "sky-box-header" }, { kind: "component", type: i3.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-needs-attention', template: "<ng-template #itemsTemplate>\n  <ul>\n    <li\n      *ngFor=\"let item of items; let isLast = last\"\n      class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n      [ngClass]=\"{\n        'sky-border-bottom-row': !isLast\n      }\"\n    >\n      <a\n        *ngIf=\"\n          (item | linkAs : 'skyAppLink') &&\n          item.permalink?.route as permalinkRoute\n        \"\n        [skyAppLink]=\"permalinkRoute.commands\"\n        [queryParams]=\"permalinkRoute.extras?.queryParams\"\n        [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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        class=\"sky-needs-attention-item\"\n        >{{ item.title }} {{ item.message }}</a\n      >\n      <ng-container *ngIf=\"item.permalink as permalink\">\n        <a\n          *ngIf=\"item | linkAs : 'skyHref'\"\n          [skyHref]=\"permalink.url\"\n          class=\"sky-needs-attention-item\"\n          >{{ item.title }} {{ item.message }}</a\n        >\n        <a\n          *ngIf=\"item | linkAs : 'href'\"\n          [href]=\"permalink.url\"\n          class=\"sky-needs-attention-item\"\n          >{{ item.title }} {{ item.message }}</a\n        >\n      </ng-container>\n      <button\n        *ngIf=\"item | linkAs : '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      <sky-icon\n        *skyThemeIf=\"'default'\"\n        class=\"sky-needs-attention-item-icon\"\n        icon=\"caret-right\"\n      ></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        class=\"sky-needs-attention-item-icon\"\n        icon=\"chevron-right\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </li>\n  </ul>\n</ng-template>\n\n<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    <ng-container *ngIf=\"items?.length === 0; else itemsTemplate\">{{\n      'sky_action_hub_needs_attention_empty' | skyLibResources\n    }}</ng-container>\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+class SkyNeedsAttentionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionModule, declarations: [SkyNeedsAttentionComponent], imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyBoxModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule,
+            SkyWaitModule,
+            LinkAsModule], exports: [SkyNeedsAttentionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionModule, imports: [CommonModule,
+            SkyAppLinkModule,
+            SkyBoxModule,
+            SkyHrefModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule,
+            SkyWaitModule,
+            LinkAsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyNeedsAttentionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyNeedsAttentionComponent],
+                    exports: [SkyNeedsAttentionComponent],
+                    imports: [
+                        CommonModule,
+                        SkyAppLinkModule,
+                        SkyBoxModule,
+                        SkyHrefModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyPagesResourcesModule,
+                        SkyThemeModule,
+                        SkyTrimModule,
+                        SkyWaitModule,
+                        LinkAsModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Displays buttons within the page header for page actions and applies spacing between buttons.
+ * Appears below the page header details.
+ */
+class SkyPageHeaderActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageHeaderActionsComponent, selector: "sky-page-header-actions", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-xl)}:host:not(:empty) ::ng-deep .sky-btn+.sky-btn{margin-left:var(--sky-margin-inline-sm)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-header-actions', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-xl)}:host:not(:empty) ::ng-deep .sky-btn+.sky-btn{margin-left:var(--sky-margin-inline-sm)}\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: "16.1.7", ngImport: i0, type: SkyPageHeaderAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageHeaderAlertsComponent, selector: "sky-page-header-alerts", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-lg)}:host:not(:empty) ::ng-deep sky-alert+sky-alert{margin-top:var(--sky-margin-stacked-lg)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderAlertsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-header-alerts', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-lg)}:host:not(:empty) ::ng-deep sky-alert+sky-alert{margin-top:var(--sky-margin-stacked-lg)}\n"] }]
+        }] });
+
+/**
+ * Displays an avatar within the page header to the left of the page title.
+ * If no size is specified for the avatar component it will display at size
+ * small on xs breakpoints and size large on small and above breakpoints.
+ */
+class SkyPageHeaderAvatarComponent {
+    #defaultInputProvider = inject(SkyDefaultInputProvider);
+    #mediaQueryService = inject(SkyMediaQueryService);
+    #mediaQuerySubscription;
+    constructor() {
+        this.#mediaQuerySubscription = this.#mediaQueryService.subscribe((args) => {
+            if (args === SkyMediaBreakpoints.xs) {
+                this.#defaultInputProvider.setValue('avatar', 'size', 'small');
+            }
+            else {
+                this.#defaultInputProvider.setValue('avatar', 'size', 'large');
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.#mediaQuerySubscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageHeaderAvatarComponent, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * Displays additional information in the page header, like record details.
+ * Appears below the title and above the page actions.
+ */
+class SkyPageHeaderDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageHeaderDetailsComponent, selector: "sky-page-header-details", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-header-details', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }]
+        }] });
+
+let parentLink;
+/**
+ * Displays page heading's contents using spacing that corresponds to the parent page's layout
+ */
+class SkyPageHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\"></ng-content>\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\"></ng-content>\n    <div>\n      <h1 class=\"sky-page-header-text\">\n        <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n          <a\n            *ngIf=\"parentLink.permalink?.url\"\n            [skyHref]=\"parentLink.permalink.url\"\n            class=\"sky-font-heading-1 sky-page-header-parent-link\"\n            >{{ parentLink.label }}</a\n          >\n          <a\n            *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n            [skyAppLink]=\"permalinkRoute.commands\"\n            [queryParams]=\"permalinkRoute.extras?.queryParams\"\n            [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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            class=\"sky-font-heading-1 sky-page-header-parent-link\"\n            >{{ parentLink.label }}</a\n          >\n          <span class=\"sky-page-header-chevron\">\n            <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n          </span>\n        </span>\n        <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n        <ng-content select=\"sky-page-header-actions\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, var(--sky-compat-page-header-margin-top-and-bottom, 0) 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:-moz-fit-content;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\"></ng-content>\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\"></ng-content>\n    <div>\n      <h1 class=\"sky-page-header-text\">\n        <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n          <a\n            *ngIf=\"parentLink.permalink?.url\"\n            [skyHref]=\"parentLink.permalink.url\"\n            class=\"sky-font-heading-1 sky-page-header-parent-link\"\n            >{{ parentLink.label }}</a\n          >\n          <a\n            *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n            [skyAppLink]=\"permalinkRoute.commands\"\n            [queryParams]=\"permalinkRoute.extras?.queryParams\"\n            [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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            class=\"sky-font-heading-1 sky-page-header-parent-link\"\n            >{{ parentLink.label }}</a\n          >\n          <span class=\"sky-page-header-chevron\">\n            <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n          </span>\n        </span>\n        <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n        <ng-content select=\"sky-page-header-actions\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, var(--sky-compat-page-header-margin-top-and-bottom, 0) 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:-moz-fit-content;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
+        }], propDecorators: { parentLink: [{
+                type: Input
+            }], pageTitle: [{
+                type: Input
+            }] } });
+
+class SkyPageHeaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderModule, declarations: [SkyPageHeaderActionsComponent,
+            SkyPageHeaderAlertsComponent,
+            SkyPageHeaderAvatarComponent,
+            SkyPageHeaderComponent,
+            SkyPageHeaderDetailsComponent], imports: [CommonModule,
+            RouterModule,
+            SkyAppLinkModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyHrefModule], exports: [SkyPageHeaderActionsComponent,
+            SkyPageHeaderAlertsComponent,
+            SkyPageHeaderAvatarComponent,
+            SkyPageHeaderComponent,
+            SkyPageHeaderDetailsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderModule, imports: [CommonModule,
+            RouterModule,
+            SkyAppLinkModule,
+            SkyIconModule,
+            SkyThemeModule,
+            SkyHrefModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyAppLinkModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyHrefModule,
+                    ],
+                    declarations: [
+                        SkyPageHeaderActionsComponent,
+                        SkyPageHeaderAlertsComponent,
+                        SkyPageHeaderAvatarComponent,
+                        SkyPageHeaderComponent,
+                        SkyPageHeaderDetailsComponent,
+                    ],
+                    exports: [
+                        SkyPageHeaderActionsComponent,
+                        SkyPageHeaderAlertsComponent,
+                        SkyPageHeaderAvatarComponent,
+                        SkyPageHeaderComponent,
+                        SkyPageHeaderDetailsComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Displays buttons after the page title.
+ *
+ * Example:
+ *
+ * ```html
+ * <a class="sky-btn sky-btn-default" href="path/to/new">New</a>
+ * ```
+ */
+class SkyActionHubButtonsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-xl)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub-buttons', template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-xl)}\n"] }]
+        }] });
+
+/**
+ * Displays additional content after the action items.
+ */
+class SkyActionHubContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub-content', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+const RECENTLY_ACCESSED_LIMIT = 5;
+function getRecentLinksSorted(recentLinks) {
+    if (recentLinks === 'loading') {
+        return 'loading';
+    }
+    if (!recentLinks || recentLinks.length === 0) {
+        return [];
+    }
+    return recentLinks
+        .slice(0)
+        .sort((a, b) => {
+        const aTime = a.lastAccessed instanceof Date
+            ? a.lastAccessed.toISOString()
+            : a.lastAccessed;
+        const bTime = b.lastAccessed instanceof Date
+            ? b.lastAccessed.toISOString()
+            : b.lastAccessed;
+        if (aTime === bTime) {
+            return 0;
+        }
+        return aTime > bTime ? -1 : 1;
+    })
+        .slice(0, RECENTLY_ACCESSED_LIMIT);
+}
+class SkyActionHubRecentLinksResolvePipe {
+    #currentRecentLinks;
+    #currentRecentLinksResolved = [];
+    #recentlyAccessedSub;
+    #ngUnsubscribe = new Subject();
+    #changeDetector;
+    #recentlyAccessedSvc;
+    constructor(changeDetector, recentlyAccessedSvc) {
+        this.#changeDetector = changeDetector;
+        this.#recentlyAccessedSvc = recentlyAccessedSvc;
+    }
+    transform(recentLinks) {
+        if (recentLinks !== this.#currentRecentLinks) {
+            if (this.#recentlyAccessedSub) {
+                this.#recentlyAccessedSub.unsubscribe();
+            }
+            this.#currentRecentLinks = recentLinks;
+            const getLinksArgs = recentLinks;
+            if (getLinksArgs?.requestedRoutes) {
+                this.#resolveRequestedRoutes(getLinksArgs);
+            }
+            else {
+                this.#updateRecentLinksResolved(recentLinks);
+            }
+        }
+        return this.#currentRecentLinksResolved;
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    #resolveRequestedRoutes(args) {
+        if (this.#recentlyAccessedSvc) {
+            this.#updateRecentLinksResolved('loading');
+            this.#recentlyAccessedSub = this.#recentlyAccessedSvc
+                .getLinks(args)
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe((result) => {
+                this.#recentlyAccessedSub = undefined;
+                const recentLinks = result.links.map((item) => ({
+                    label: item.label,
+                    lastAccessed: item.lastAccessed,
+                    permalink: {
+                        url: item.url,
+                    },
+                }));
+                this.#updateRecentLinksResolved(recentLinks);
+            });
+        }
+        else {
+            this.#updateRecentLinksResolved([]);
+        }
+    }
+    #updateRecentLinksResolved(recentLinksResolved) {
+        this.#currentRecentLinksResolved =
+            getRecentLinksSorted(recentLinksResolved);
+        this.#changeDetector.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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: "16.1.7", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyActionHubRecentLinksResolve',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.SkyRecentlyAccessedService, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+class SkyActionHubRelatedLinksSortPipe {
+    transform(relatedLinks) {
+        if (relatedLinks === 'loading') {
+            return 'loading';
+        }
+        if (!relatedLinks || relatedLinks.length === 0) {
+            return [];
+        }
+        return relatedLinks.slice(0).sort((a, b) => {
+            const aLabel = a.label.trim().toUpperCase();
+            const bLabel = b.label.trim().toUpperCase();
+            if (aLabel === bLabel) {
+                return 0;
+            }
+            return aLabel < bLabel ? -1 : 1;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyActionHubRelatedLinksSort',
+                }]
+        }] });
+
+/**
+ * Creates an action hub to direct user attention to important
+ * actions and provide quick access to common tasks.
+ */
+class SkyActionHubComponent {
+    constructor() {
+        /**
+         * The list of recently accessed links, or `"loading"` to display a wait indicator.
+         */
+        this.recentLinks = [];
+        /**
+         * The list of related links, or `"loading"` to display a wait indicator.
+         */
+        this.relatedLinks = [];
+        /**
+         * The list of settings with modal parameters, or `"loading"` to display a wait indicator.
+         */
+        this.settingsLinks = [];
+        /**
+         * The page title.
+         * @default ""
+         */
+        this.title = '';
+        this.needsAttentionArray = [];
+    }
+    /**
+     * The list of actions that users must perform based on business requirements or best practices, or `"loading"` to display a wait indicator.
+     */
+    set needsAttention(value) {
+        this.#_needsAttention = value;
+        this.needsAttentionArray = Array.isArray(value) ? value : [];
+    }
+    get needsAttention() {
+        return this.#_needsAttention;
+    }
+    #_needsAttention;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header\n        [pageTitle]=\"title\"\n        [parentLink]=\"parentLink\"\n      ></sky-page-header>\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\"></ng-content>\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\"></sky-wait>\n        <sky-needs-attention\n          *ngIf=\"needsAttention !== 'loading'\"\n          [items]=\"needsAttentionArray\"\n        ></sky-needs-attention>\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\"></ng-content>\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n      ></sky-link-list>\n      <sky-link-list\n        [links]=\"recentLinks | skyActionHubRecentLinksResolve\"\n        [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n      ></sky-link-list>\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      ></sky-modal-link-list>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{--sky-compat-page-header-margin-top-and-bottom: 0;display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i3.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header\n        [pageTitle]=\"title\"\n        [parentLink]=\"parentLink\"\n      ></sky-page-header>\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\"></ng-content>\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\"></sky-wait>\n        <sky-needs-attention\n          *ngIf=\"needsAttention !== 'loading'\"\n          [items]=\"needsAttentionArray\"\n        ></sky-needs-attention>\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\"></ng-content>\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n      ></sky-link-list>\n      <sky-link-list\n        [links]=\"recentLinks | skyActionHubRecentLinksResolve\"\n        [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n      ></sky-link-list>\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      ></sky-modal-link-list>\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{--sky-compat-page-header-margin-top-and-bottom: 0;display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
+        }], propDecorators: { needsAttention: [{
+                type: Input
+            }], parentLink: [{
+                type: Input
+            }], recentLinks: [{
+                type: Input
+            }], relatedLinks: [{
+                type: Input
+            }], settingsLinks: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class SkyActionHubModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
+            SkyActionHubComponent,
+            SkyActionHubContentComponent,
+            SkyActionHubRecentLinksResolvePipe,
+            SkyActionHubRelatedLinksSortPipe], imports: [CommonModule,
+            SkyBoxModule,
+            SkyFluidGridModule,
+            SkyI18nModule,
+            SkyLinkListModule,
+            SkyModalLinkListModule,
+            SkyNeedsAttentionModule,
+            SkyPageHeaderModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyWaitModule], exports: [SkyActionHubButtonsComponent,
+            SkyActionHubComponent,
+            SkyActionHubContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubModule, imports: [CommonModule,
+            SkyBoxModule,
+            SkyFluidGridModule,
+            SkyI18nModule,
+            SkyLinkListModule,
+            SkyModalLinkListModule,
+            SkyNeedsAttentionModule,
+            SkyPageHeaderModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionHubModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SkyBoxModule,
+                        SkyFluidGridModule,
+                        SkyI18nModule,
+                        SkyLinkListModule,
+                        SkyModalLinkListModule,
+                        SkyNeedsAttentionModule,
+                        SkyPageHeaderModule,
+                        SkyPagesResourcesModule,
+                        SkyThemeModule,
+                        SkyWaitModule,
+                    ],
+                    declarations: [
+                        SkyActionHubButtonsComponent,
+                        SkyActionHubComponent,
+                        SkyActionHubContentComponent,
+                        SkyActionHubRecentLinksResolvePipe,
+                        SkyActionHubRelatedLinksSortPipe,
+                    ],
+                    exports: [
+                        SkyActionHubButtonsComponent,
+                        SkyActionHubComponent,
+                        SkyActionHubContentComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Displays page contents using spacing that corresponds to the parent
+ * page's layout.
+ */
+class SkyPageContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageContentComponent, selector: "sky-page-content", 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: "16.1.7", ngImport: i0, type: SkyPageContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyPageThemeAdapterService {
+    #styleEl;
+    #document;
+    constructor(document) {
+        this.#document = document;
+    }
+    /**
+     * We can't use ViewEncapsulation.None for this behavior because Angular does
+     * not remove `style` tags from the HEAD element after route changes.
+     * @see https://github.com/angular/angular/issues/16670
+     */
+    addTheme() {
+        if (!this.#styleEl) {
+            this.#styleEl = this.#document.createElement('style');
+            this.#styleEl.appendChild(this.#document.createTextNode('body:not(.sky-theme-modern) { background-color: #fff; }'));
+            this.#document.head.appendChild(this.#styleEl);
+        }
+    }
+    removeTheme() {
+        if (this.#styleEl) {
+            this.#styleEl.remove();
+            this.#styleEl = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+const LAYOUT_DEFAULT = 'none';
+const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
+const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
+const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
+/**
+ * Displays a page using the specified layout.
+ */
+class SkyPageComponent {
+    constructor() {
+        this.cssClass = LAYOUT_CLASS_DEFAULT;
+        this.#ngUnsubscribe = new Subject();
+        this.#themeAdapter = inject(SkyPageThemeAdapterService);
+        this.#layoutHostSvc = inject(SkyLayoutHostService);
+    }
+    /**
+     * The page layout that applies spacing to the page header and content. Use the layout
+     * that corresponds with the top-level component type used on the page, our use `fit` to
+     * constrain the page contents to the available viewport.
+     * Use `none` for custom content that does not adhere to predefined spacing or constraints.
+     * @default "none"
+     */
+    set layout(value) {
+        this.#layout = value;
+        this.#updateCssClass();
+    }
+    #layout;
+    #layoutForChild;
+    #ngUnsubscribe;
+    #themeAdapter;
+    #layoutHostSvc;
+    ngOnInit() {
+        this.#themeAdapter.addTheme();
+        this.#layoutHostSvc.hostLayoutForChild
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((args) => {
+            this.#layoutForChild = args.layout;
+            this.#updateCssClass();
+        });
+    }
+    ngOnDestroy() {
+        this.#themeAdapter.removeTheme();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    #updateCssClass() {
+        let cssClass = this.#layout
+            ? `${LAYOUT_CLASS_PREFIX}${this.#layout}`
+            : LAYOUT_CLASS_DEFAULT;
+        if (this.#layoutForChild) {
+            cssClass = `${cssClass} ${LAYOUT_FOR_CHILD_CLASS_PREFIX}${this.#layoutForChild}`;
+        }
+        this.cssClass = cssClass;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout" }, host: { properties: { "class": "this.cssClass" } }, providers: [SkyPageThemeAdapterService, SkyLayoutHostService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-page',
+                    template: `<ng-content />`,
+                    providers: [SkyPageThemeAdapterService, SkyLayoutHostService],
+                }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SkyPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [CommonModule], exports: [SkyPageComponent, SkyPageHeaderModule, SkyPageContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, imports: [CommonModule, SkyPageHeaderModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPageComponent, SkyPageContentComponent],
+                    imports: [CommonModule],
+                    exports: [SkyPageComponent, SkyPageHeaderModule, SkyPageContentComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyActionHubModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyActionHubButtonsComponent as λ2, SkyActionHubContentComponent as λ3, SkyPageHeaderComponent as λ4, SkyModalLinkListComponent as λ5, SkyPageComponent as λ6, SkyPageContentComponent as λ7, SkyPageHeaderDetailsComponent as λ8, SkyPageHeaderActionsComponent as λ9 };
+//# sourceMappingURL=skyux-pages.mjs.map