@skyux/pages 11.11.2 → 11.13.0

package/fesm2022/skyux-pages.mjs

@@ -539,39 +539,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             args: [{ selector: 'sky-page-header-details', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }]
         }] });
 
-let parentLink;
 /**
  * Displays page heading's contents using spacing that corresponds to the parent page's layout
  */
 class SkyPageHeaderComponent {
-    #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService);
-    ngOnInit() {
-        this.#mediaQueryService.observe(this.#elementRef, {
-            updateResponsiveClasses: true,
-        });
-    }
-    ngOnDestroy() {
-        this.#mediaQueryService.unobserve();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, providers: [
-            SkyResizeObserverMediaQueryService,
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkyResizeObserverMediaQueryService,
-            },
-        ], ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-header', providers: [
-                        SkyResizeObserverMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyResizeObserverMediaQueryService,
-                        },
-                    ], template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
+            args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n  <ng-content select=\"sky-page-header-alerts\" />\n  <div class=\"sky-page-header-info\">\n    <ng-content select=\"sky-page-header-avatar\" />\n    <div class=\"sky-page-header-text-and-content\">\n      <h1 class=\"sky-page-header-text\">\n        @if (parentLink) {\n          <span class=\"sky-page-header-parent-link-wrapper\">\n            @if (parentLink.permalink?.route; as permalinkRoute) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ parentLink.label }}</a\n              >\n            } @else if (parentLink.permalink?.url) {\n              <a\n                class=\"sky-font-heading-1 sky-page-header-parent-link\"\n                [skyHref]=\"parentLink.permalink.url\"\n                >{{ parentLink.label }}</a\n              >\n            }\n            <span class=\"sky-page-header-chevron\">\n              <sky-icon icon=\"chevron-right\" />\n            </span>\n          </span>\n          <wbr />\n        }\n        <span class=\"sky-page-header-page-title sky-font-heading-1\">\n          {{ pageTitle }}\n        </span>\n      </h1>\n      <div class=\"sky-page-header-content\">\n        <ng-content select=\"sky-page-header-details\" />\n        <ng-content select=\"sky-page-header-actions\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
         }], propDecorators: { parentLink: [{
                 type: Input
             }], pageTitle: [{
@@ -626,182 +603,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/**
- * 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: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<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: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-action-hub-buttons', template: "<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: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-action-hub-content', template: "<ng-content />\n" }]
-        }] });
-
-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: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: i3$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i3$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3$1.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: SkyLinkListRecentlyAccessedComponent, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
-        }], 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: "18.2.8", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
-            SkyActionHubComponent,
-            SkyActionHubContentComponent,
-            SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
-            SkyBoxModule,
-            SkyFluidGridModule,
-            SkyLinkListModule,
-            SkyModalLinkListModule,
-            SkyNeedsAttentionModule,
-            SkyPageHeaderModule,
-            SkyPagesResourcesModule,
-            SkyThemeModule,
-            SkyWaitModule], exports: [SkyActionHubButtonsComponent,
-            SkyActionHubComponent,
-            SkyActionHubContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
-            SkyFluidGridModule,
-            SkyLinkListModule,
-            SkyModalLinkListModule,
-            SkyNeedsAttentionModule,
-            SkyPageHeaderModule,
-            SkyPagesResourcesModule,
-            SkyThemeModule,
-            SkyWaitModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        SkyActionHubRecentLinksResolvePipe,
-                        SkyBoxModule,
-                        SkyFluidGridModule,
-                        SkyLinkListModule,
-                        SkyModalLinkListModule,
-                        SkyNeedsAttentionModule,
-                        SkyPageHeaderModule,
-                        SkyPagesResourcesModule,
-                        SkyThemeModule,
-                        SkyWaitModule,
-                    ],
-                    declarations: [
-                        SkyActionHubButtonsComponent,
-                        SkyActionHubComponent,
-                        SkyActionHubContentComponent,
-                        SkyActionHubRelatedLinksSortPipe,
-                    ],
-                    exports: [
-                        SkyActionHubButtonsComponent,
-                        SkyActionHubComponent,
-                        SkyActionHubContentComponent,
-                    ],
-                }]
-        }] });
-
 /**
  * Displays page contents using spacing that corresponds to the parent
  * page's layout.
  */
 class SkyPageContentComponent {
     #elementRef = inject(ElementRef);
-    #mediaQueryService = inject(SkyResizeObserverMediaQueryService);
+    #mediaQueryService = inject(SkyResizeObserverMediaQueryService, {
+        self: true,
+    });
     ngOnInit() {
         this.#mediaQueryService.observe(this.#elementRef, {
             updateResponsiveClasses: true,
@@ -900,6 +710,10 @@ class SkyPageComponent {
         this.#themeAdapter = inject(SkyPageThemeAdapterService);
         this.#layoutHostSvc = inject(SkyLayoutHostService);
         this.#helpSvc = inject(SkyHelpService, { optional: true });
+        this.#elementRef = inject(ElementRef);
+        this.#resizeObserverSvc = inject(SkyResizeObserverMediaQueryService, {
+            self: true,
+        });
     }
     /**
      * The page layout that applies spacing to the page header and content. Use the layout
@@ -924,6 +738,8 @@ class SkyPageComponent {
     #themeAdapter;
     #layoutHostSvc;
     #helpSvc;
+    #elementRef;
+    #resizeObserverSvc;
     ngOnInit() {
         this.#themeAdapter.addTheme();
         this.#layoutHostSvc.hostLayoutForChild
@@ -932,9 +748,11 @@ class SkyPageComponent {
             this.#layoutForChild = args.layout;
             this.#updateCssClass();
         });
+        this.#resizeObserverSvc.observe(this.#elementRef);
     }
     ngOnDestroy() {
         this.#themeAdapter.removeTheme();
+        this.#resizeObserverSvc.destroy();
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
         this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
@@ -949,14 +767,30 @@ class SkyPageComponent {
         this.cssClass = cssClass;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [SkyPageThemeAdapterService, SkyLayoutHostService], ngImport: i0, template: `<ng-content />`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [
+            SkyPageThemeAdapterService,
+            SkyLayoutHostService,
+            SkyResizeObserverMediaQueryService,
+            {
+                provide: SkyMediaQueryService,
+                useExisting: SkyResizeObserverMediaQueryService,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-page',
                     template: `<ng-content />`,
-                    providers: [SkyPageThemeAdapterService, SkyLayoutHostService],
+                    providers: [
+                        SkyPageThemeAdapterService,
+                        SkyLayoutHostService,
+                        SkyResizeObserverMediaQueryService,
+                        {
+                            provide: SkyMediaQueryService,
+                            useExisting: SkyResizeObserverMediaQueryService,
+                        },
+                    ],
                 }]
         }], propDecorators: { layout: [{
                 type: Input
@@ -1004,6 +838,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
+/**
+ * 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: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub-buttons', 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: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub-content', template: "<ng-content />\n" }]
+        }] });
+
+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: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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: "18.2.8", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-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      [title]=\"'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", "title"] }, { 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.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-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      [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n    />\n  </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\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: "18.2.8", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
+            SkyActionHubComponent,
+            SkyActionHubContentComponent,
+            SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
+            SkyBoxModule,
+            SkyFluidGridModule,
+            SkyLinkListModule,
+            SkyModalLinkListModule,
+            SkyNeedsAttentionModule,
+            SkyPageHeaderModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyWaitModule,
+            SkyPageModule], exports: [SkyActionHubButtonsComponent,
+            SkyActionHubComponent,
+            SkyActionHubContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
+            SkyFluidGridModule,
+            SkyLinkListModule,
+            SkyModalLinkListModule,
+            SkyNeedsAttentionModule,
+            SkyPageHeaderModule,
+            SkyPagesResourcesModule,
+            SkyThemeModule,
+            SkyWaitModule,
+            SkyPageModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SkyActionHubRecentLinksResolvePipe,
+                        SkyBoxModule,
+                        SkyFluidGridModule,
+                        SkyLinkListModule,
+                        SkyModalLinkListModule,
+                        SkyNeedsAttentionModule,
+                        SkyPageHeaderModule,
+                        SkyPagesResourcesModule,
+                        SkyThemeModule,
+                        SkyWaitModule,
+                        SkyPageModule,
+                    ],
+                    declarations: [
+                        SkyActionHubButtonsComponent,
+                        SkyActionHubComponent,
+                        SkyActionHubContentComponent,
+                        SkyActionHubRelatedLinksSortPipe,
+                    ],
+                    exports: [
+                        SkyActionHubButtonsComponent,
+                        SkyActionHubComponent,
+                        SkyActionHubContentComponent,
+                    ],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */