@skyux/pages 11.7.0 → 11.9.0

package/fesm2022/skyux-pages.mjs

@@ -1,24 +1,120 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, Component, Input, inject, isStandalone, ViewEncapsulation, ElementRef, Optional, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
+import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ElementRef, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
 import * as i3 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
 import * as i3$1 from '@skyux/layout';
 import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import * as i5 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import * as i2 from '@skyux/router';
 import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
+import * as i1$1 from '@angular/common';
+import { NgTemplateOutlet, CommonModule, DOCUMENT } from '@angular/common';
+import * as i1 from '@skyux/i18n';
+import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyMediaBreakpoints, SkyResizeObserverMediaQueryService, SkyLayoutHostService, SkyHelpService } from '@skyux/core';
 import { SkyModalService, SkyModalLegacyService } from '@skyux/modals';
 import * as i4 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i6 from '@skyux/i18n';
-import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { RouterModule } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+
+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: "18.2.5", 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: "18.2.5", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, isStandalone: true, name: "skyActionHubRecentLinksResolve", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyActionHubRecentLinksResolve',
+                    pure: false,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.SkyRecentlyAccessedService, decorators: [{
+                    type: Optional
+                }] }] });
 
 class LinkAsPipe {
     transform(value, linkAs) {
@@ -60,57 +156,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
+/**
+ * A wrapper for each link in a link list.
+ */
+class SkyLinkListItemComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: SkyLinkListItemComponent, isStandalone: true, selector: "sky-link-list-item", host: { properties: { "attr.role": "\"listitem\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;margin:0 0 var(--sky-margin-stacked-sm) 0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sky-link-list-item', template: `<ng-content />`, host: {
+                        '[attr.role]': '"listitem"',
+                    }, styles: [":host{display:block;margin:0 0 var(--sky-margin-stacked-sm) 0}\n"] }]
+        }] });
+
+/**
+ * A component that displays a list of links, such as within a `<sky-page-links>` component.
+ */
 class SkyLinkListComponent {
     constructor() {
-        this.linksArray = [];
-    }
-    set links(value) {
-        this.#_links = value;
-        this.linksArray = Array.isArray(value) ? value : [];
-    }
-    get links() {
-        return this.#_links;
+        /**
+         * The text to display as the list's heading.
+         */
+        this.headingText = input();
+        /**
+         * Option to pass links as an array of `SkyPageLink` objects or `'loading'` to display a loading indicator.
+         */
+        this.links = input();
+        this.linkItems = contentChildren(SkyLinkListItemComponent);
+        this.hasLinks = computed(() => {
+            const linkItems = this.linkItems();
+            const links = this.links();
+            if (linkItems.length > 0) {
+                return true;
+            }
+            return Array.isArray(links) && links.length > 0;
+        });
+        this.linksArray = computed(() => {
+            const links = this.links();
+            if (Array.isArray(links)) {
+                return links;
+            }
+            return [];
+        });
     }
-    #_links;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyLinkListComponent, selector: "sky-link-list", inputs: { links: "links", title: "title" }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links === 'loading'\" />\n@if (links === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray.length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray; track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}\n"], dependencies: [{ 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", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyLinkListComponent, isStandalone: true, selector: "sky-link-list", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "linkItems", predicate: SkyLinkListItemComponent, isSignal: true }], ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: ["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: "ngmodule", type: LinkAsModule }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-link-list', template: "<sky-wait [isWaiting]=\"links === 'loading'\" />\n@if (links === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray.length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray; track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}\n"] }]
-        }], propDecorators: { links: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
+            args: [{ standalone: true, selector: 'sky-link-list', imports: [
+                        LinkAsModule,
+                        NgTemplateOutlet,
+                        SkyAppLinkModule,
+                        SkyHrefModule,
+                        SkyWaitModule,
+                    ], template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (hasLinks()) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray(); track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          }\n        </li>\n      }\n      <ng-content select=\"sky-link-list-item\" />\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: ["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"] }]
+        }] });
+
+/* istanbul ignore file */
+/**
+ * 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',
+        },
+    },
+};
+SkyLibResourcesService.addResources(RESOURCES);
+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: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyPagesResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyPagesResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * A component that displays a list of recently accessed links, such as within a `<sky-page-links>` component.
+ */
+class SkyLinkListRecentlyAccessedComponent {
+    constructor() {
+        /**
+         * Option to pass links as an array of `SkyRecentLink` objects,
+         * a `SkyRecentlyAccessedGetLinksArgs` object for `SkyRecentlyAccessedService`,
+         * or `'loading'` to display a loading indicator.
+         */
+        this.recentLinks = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: SkyLinkListRecentlyAccessedComponent, isStandalone: true, selector: "sky-link-list-recently-accessed", inputs: { recentLinks: { classPropertyName: "recentLinks", publicName: "recentLinks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <sky-link-list
+      [links]="recentLinks() | skyActionHubRecentLinksResolve"
+      [headingText]="'sky_action_hub_recent_links' | skyLibResources"
+    />
+  `, isInline: true, dependencies: [{ kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-link-list-recently-accessed',
+                    standalone: true,
+                    imports: [
+                        SkyActionHubRecentLinksResolvePipe,
+                        SkyLinkListComponent,
+                        SkyPagesResourcesModule,
+                    ],
+                    template: `
+    <sky-link-list
+      [links]="recentLinks() | skyActionHubRecentLinksResolve"
+      [headingText]="'sky_action_hub_recent_links' | skyLibResources"
+    />
+  `,
+                }]
+        }] });
 
 class SkyLinkListModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, declarations: [SkyLinkListComponent], imports: [CommonModule,
-            SkyAppLinkModule,
-            SkyHrefModule,
-            SkyThemeModule,
-            SkyWaitModule,
-            LinkAsModule], exports: [SkyLinkListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, imports: [CommonModule,
-            SkyAppLinkModule,
-            SkyHrefModule,
-            SkyThemeModule,
-            SkyWaitModule,
-            LinkAsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
+            SkyLinkListItemComponent,
+            SkyLinkListRecentlyAccessedComponent], exports: [SkyLinkListComponent,
+            SkyLinkListItemComponent,
+            SkyLinkListRecentlyAccessedComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, imports: [SkyLinkListComponent,
+            SkyLinkListRecentlyAccessedComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyLinkListModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyLinkListComponent],
-                    exports: [SkyLinkListComponent],
+                    exports: [
+                        SkyLinkListComponent,
+                        SkyLinkListItemComponent,
+                        SkyLinkListRecentlyAccessedComponent,
+                    ],
                     imports: [
-                        CommonModule,
-                        SkyAppLinkModule,
-                        SkyHrefModule,
-                        SkyThemeModule,
-                        SkyWaitModule,
-                        LinkAsModule,
+                        SkyLinkListComponent,
+                        SkyLinkListItemComponent,
+                        SkyLinkListRecentlyAccessedComponent,
                     ],
                 }]
         }] });
@@ -147,7 +363,7 @@ class SkyModalLinkListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyModalLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: { links: "links", title: "title" }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links === 'loading'\" />\n@if (links === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray.length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray; track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}\n"], dependencies: [{ 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", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: { links: "links", title: "title" }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links === 'loading'\" />\n@if (links === 'loading') {\n  <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n  @if (linksArray.length > 0) {\n    <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n    <ul class=\"sky-link-list\">\n      @for (link of linksArray; track link) {\n        <li>\n          @if (link | linkAs: 'skyHref') {\n            <a [skyHref]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link | linkAs: 'href') {\n            <a [href]=\"link.permalink?.url\">\n              {{ link.label }}\n            </a>\n          } @else if (link.permalink && link.permalink.route) {\n            <a\n              [skyAppLink]=\"link.permalink.route.commands\"\n              [queryParams]=\"link.permalink.route.extras?.queryParams\"\n              [queryParamsHandling]=\"\n                link.permalink.route.extras?.queryParamsHandling\n              \"\n              [fragment]=\"link.permalink.route.extras?.fragment\"\n              [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n              [skipLocationChange]=\"\n                link.permalink.route.extras?.skipLocationChange\n              \"\n              [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n              [state]=\"link.permalink.route.extras?.state\"\n            >\n              {{ link.label }}\n            </a>\n          } @else if (link.modal) {\n            <button\n              class=\"sky-btn sky-btn-link-inline\"\n              type=\"button\"\n              (click)=\"openModal(link)\"\n            >\n              {{ link.label }}\n            </button>\n          }\n        </li>\n      }\n    </ul>\n  }\n}\n\n<ng-template #headingTemplateRef>\n  <h2 class=\"sky-font-heading-4\">\n    {{ title }}\n  </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
             type: Component,
@@ -186,58 +402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
-/* istanbul ignore file */
-/**
- * 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',
-        },
-    },
-};
-SkyLibResourcesService.addResources(RESOURCES);
-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: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPagesResourcesModule, providers: [
-            {
-                provide: SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyPagesResourcesProvider,
-                multi: true,
-            },
-        ], imports: [SkyI18nModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", 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;
@@ -255,7 +419,7 @@ class SkyNeedsAttentionComponent {
     #items;
     #logService = inject(SkyLogService);
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i3$1.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n  <sky-box-header>\n    <h2 class=\"sky-font-heading-2\">\n      {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n    </h2>\n  </sky-box-header>\n  <sky-box-content>\n    @if (items?.length === 0) {\n      {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n    } @else {\n      <ul>\n        @for (item of items; track item; let isLast = $last) {\n          <li\n            class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n            [ngClass]=\"{\n              'sky-border-bottom-row': !isLast\n            }\"\n          >\n            @if (\n              (item | linkAs: 'skyAppLink') && item.permalink?.route;\n              as permalinkRoute\n            ) {\n              <a\n                class=\"sky-needs-attention-item\"\n                [skyAppLink]=\"permalinkRoute.commands\"\n                [queryParams]=\"permalinkRoute.extras?.queryParams\"\n                [queryParamsHandling]=\"\n                  permalinkRoute.extras?.queryParamsHandling\n                \"\n                [fragment]=\"permalinkRoute.extras?.fragment\"\n                [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n                [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n                [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n                [state]=\"permalinkRoute.extras?.state\"\n                >{{ item.title }} {{ item.message }}</a\n              >\n            } @else if (item.permalink) {\n              @if (item | linkAs: 'skyHref') {\n                <a\n                  class=\"sky-needs-attention-item\"\n                  [skyHref]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              } @else if (item | linkAs: 'href') {\n                <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n                  >{{ item.title }} {{ item.message }}</a\n                >\n              }\n            } @else if (item | linkAs: 'button') {\n              <button\n                class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n                type=\"button\"\n                (click)=\"item?.click({ item })\"\n              >\n                {{ item.title }} {{ item.message }}\n              </button>\n            }\n            <sky-icon\n              *skyThemeIf=\"'default'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"caret-right\"\n            />\n            <sky-icon\n              *skyThemeIf=\"'modern'\"\n              class=\"sky-needs-attention-item-icon\"\n              icon=\"chevron-right\"\n            />\n          </li>\n        }\n      </ul>\n    }\n  </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i3$1.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
             type: Component,
@@ -492,101 +656,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             args: [{ selector: 'sky-action-hub-content', template: "<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: "18.2.5", 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: "18.2.5", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve", pure: false }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyActionHubRecentLinksResolvePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'skyActionHubRecentLinksResolve',
-                    pure: false,
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.SkyRecentlyAccessedService, decorators: [{
-                    type: Optional
-                }] }] });
-
 class SkyActionHubRelatedLinksSortPipe {
     transform(relatedLinks) {
         if (relatedLinks === 'loading') {
@@ -651,11 +720,11 @@ class SkyActionHubComponent {
     }
     #_needsAttention;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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        [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list\n        [links]=\"recentLinks | skyActionHubRecentLinksResolve\"\n        [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n      />\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: ["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: i3.λ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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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.5", 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        [title]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list\n        [links]=\"recentLinks | skyActionHubRecentLinksResolve\"\n        [title]=\"'sky_action_hub_recent_links' | skyLibResources\"\n      />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
+            args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n  <sky-row>\n    <sky-column>\n      <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n    </sky-column>\n  </sky-row>\n  <sky-row>\n    <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-buttons\" />\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n        @if (needsAttention !== 'loading') {\n          <sky-needs-attention [items]=\"needsAttentionArray\" />\n        }\n      </div>\n\n      <div class=\"sky-margin-stacked-xl\">\n        <ng-content select=\"sky-action-hub-content\" />\n      </div>\n    </sky-column>\n    <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n      <sky-link-list\n        [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n        [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n      />\n      <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n      <sky-modal-link-list\n        [links]=\"settingsLinks\"\n        [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n      />\n    </sky-column>\n  </sky-row>\n</sky-fluid-grid>\n", styles: [":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: [{
@@ -675,8 +744,8 @@ class SkyActionHubModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
             SkyActionHubComponent,
             SkyActionHubContentComponent,
-            SkyActionHubRecentLinksResolvePipe,
-            SkyActionHubRelatedLinksSortPipe], imports: [SkyBoxModule,
+            SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
+            SkyBoxModule,
             SkyFluidGridModule,
             SkyLinkListModule,
             SkyModalLinkListModule,
@@ -701,6 +770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             type: NgModule,
             args: [{
                     imports: [
+                        SkyActionHubRecentLinksResolvePipe,
                         SkyBoxModule,
                         SkyFluidGridModule,
                         SkyLinkListModule,
@@ -715,7 +785,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         SkyActionHubButtonsComponent,
                         SkyActionHubComponent,
                         SkyActionHubContentComponent,
-                        SkyActionHubRecentLinksResolvePipe,
                         SkyActionHubRelatedLinksSortPipe,
                     ],
                     exports: [
@@ -762,8 +831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
         }] });
 
 /**
- * Displays page links within a block page layout.
- * @internal
+ * Displays page links on the right side of the page, or below the page content
+ * on mobile devices.
  */
 class SkyPageLinksComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPageLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -900,18 +969,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 
 class SkyPageModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [CommonModule, SkyPageLinksComponent], exports: [SkyPageComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [SkyPageLinksComponent,
+            SkyLinkListComponent,
+            SkyLinkListItemComponent,
+            SkyLinkListRecentlyAccessedComponent], exports: [SkyLinkListComponent,
+            SkyLinkListItemComponent,
+            SkyLinkListRecentlyAccessedComponent,
+            SkyPageComponent,
             SkyPageHeaderModule,
             SkyPageContentComponent,
             SkyPageLinksComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, imports: [CommonModule, SkyPageHeaderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, imports: [SkyLinkListComponent,
+            SkyLinkListRecentlyAccessedComponent, SkyPageHeaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyPageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyPageComponent, SkyPageContentComponent],
-                    imports: [CommonModule, SkyPageLinksComponent],
+                    imports: [
+                        SkyPageLinksComponent,
+                        SkyLinkListComponent,
+                        SkyLinkListItemComponent,
+                        SkyLinkListRecentlyAccessedComponent,
+                    ],
                     exports: [
+                        SkyLinkListComponent,
+                        SkyLinkListItemComponent,
+                        SkyLinkListRecentlyAccessedComponent,
                         SkyPageComponent,
                         SkyPageHeaderModule,
                         SkyPageContentComponent,
@@ -924,5 +1008,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyActionHubModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyPageLinksComponent as λ12, SkyActionHubButtonsComponent as λ2, SkyActionHubContentComponent as λ3, SkyPageHeaderComponent as λ4, SkyModalLinkListComponent as λ5, SkyPageComponent as λ6, SkyPageContentComponent as λ7, SkyPageHeaderDetailsComponent as λ8, SkyPageHeaderActionsComponent as λ9 };
+export { SkyActionHubModule, SkyLinkListModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyPageLinksComponent as λ12, SkyLinkListComponent as λ13, SkyLinkListItemComponent as λ14, SkyLinkListRecentlyAccessedComponent as λ15, 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