From d75312576f6453a2c566e0e54605828701761efb Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Mon, 10 Feb 2025 14:31:37 -0500
Subject: [PATCH 1/3] feat(components/pages): add `sky-modal-link-list`
 component

---
 libs/components/pages/src/index.ts            |  1 +
 .../modal-link-list.component.html            | 10 ++---
 .../modal-link-list.component.spec.ts         | 35 +++++++++++-----
 .../modal-link-list.component.ts              | 41 +++++++++++--------
 .../pages/src/lib/modules/page/page.module.ts |  6 +++
 5 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/libs/components/pages/src/index.ts b/libs/components/pages/src/index.ts
index 96b13a8143..07d9a56525 100644
--- a/libs/components/pages/src/index.ts
+++ b/libs/components/pages/src/index.ts
@@ -5,6 +5,7 @@ export {
   SkyActionHubNeedsAttentionClickHandlerArgs,
 } from './lib/modules/action-hub/types/action-hub-needs-attention-click-handler';
 export { SkyLinkListModule } from './lib/modules/link-list/link-list.module';
+export { SkyModalLinkListModule } from './lib/modules/modal-link-list/modal-link-list.module';
 export { SkyNeedsAttentionModule } from './lib/modules/needs-attention/needs-attention.module';
 export { SkyActionHubNeedsAttentionInput } from './lib/modules/action-hub/types/action-hub-needs-attention-input';
 export { SkyPageLink } from './lib/modules/action-hub/types/page-link';
diff --git a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.html b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.html
index 2b5ff769fa..f58dcc6561 100644
--- a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.html
+++ b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.html
@@ -1,11 +1,11 @@
-<sky-wait [isWaiting]="links === 'loading'" />
-@if (links === 'loading') {
+<sky-wait [isWaiting]="links() === 'loading'" />
+@if (links() === 'loading') {
   <ng-container [ngTemplateOutlet]="headingTemplateRef" />
 } @else {
-  @if (linksArray.length > 0) {
+  @if (linksArray().length > 0) {
     <ng-container [ngTemplateOutlet]="headingTemplateRef" />
     <ul class="sky-link-list">
-      @for (link of linksArray; track link) {
+      @for (link of linksArray(); track link) {
         <li>
           @if (link | linkAs: 'skyHref') {
             <a class="sky-link-list-item" [skyHref]="link.permalink?.url">
@@ -50,6 +50,6 @@
 
 <ng-template #headingTemplateRef>
   <h2 class="sky-font-heading-4">
-    {{ title }}
+    {{ headingText() }}
   </h2>
 </ng-template>
diff --git a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
index 912161a0c0..46a36c0a9c 100644
--- a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
+++ b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
@@ -5,6 +5,7 @@ import { SkyModalService } from '@skyux/modals';
 
 import { SkyModalLinkListComponent } from './modal-link-list.component';
 import { SkyModalLinkListModule } from './modal-link-list.module';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
 
 @Component({
   template: '',
@@ -43,10 +44,16 @@ describe('SkyModalLinkListComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
-    component.openModal({
-      label: 'Link 1',
-      modal: { component: MockStandaloneComponent, config: {} },
-    });
+    fixture.componentRef.setInput('links', [
+      {
+        label: 'Link 1',
+        modal: { component: MockStandaloneComponent, config: {} },
+      },
+    ]);
+    fixture.detectChanges();
+    const link = Array.from<HTMLButtonElement>(fixture.nativeElement.querySelectorAll('button.sky-link-list-item'));
+    expect(link.length).toBe(1);
+    SkyAppTestUtility.fireDomEvent(link[0], 'click');
     expect(openModalSpy).toHaveBeenCalledWith(MockStandaloneComponent, {});
   });
 
@@ -54,17 +61,25 @@ describe('SkyModalLinkListComponent', () => {
     const logger = TestBed.inject(SkyLogService);
     spyOn(logger, 'deprecated');
     expect(component).toBeTruthy();
-    component.openModal({
-      label: 'Link 1',
-      modal: { component: MockComponent, config: {} },
-    });
+    fixture.componentRef.setInput('links', [
+      {
+        label: 'Link 1',
+        modal: { component: MockComponent, config: {} },
+      },
+    ]);
+    fixture.detectChanges();
+    const link = Array.from<HTMLButtonElement>(fixture.nativeElement.querySelectorAll('button.sky-link-list-item'));
+    expect(link.length).toBe(1);
+    SkyAppTestUtility.fireDomEvent(link[0], 'click');
     expect(logger.deprecated).toHaveBeenCalled();
     expect(openModalSpy).toHaveBeenCalledWith(MockComponent, {});
   });
 
   it('should handle empty input', () => {
     expect(component).toBeTruthy();
-    component.links = undefined;
-    expect(component.links).toBeUndefined();
+    fixture.componentRef.setInput('links', undefined);
+    fixture.detectChanges();
+    expect(component.links()).toBeUndefined();
+    expect(fixture.nativeElement.querySelector('ul.sky-link-list')).toBeFalsy();
   });
 });
diff --git a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
index 2010fcb6c7..667c2b901e 100644
--- a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
+++ b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
@@ -1,37 +1,42 @@
-import { Component, Input, inject, isStandalone } from '@angular/core';
+import { Component, inject, isStandalone, input, computed } from '@angular/core';
 import { SkyLogService } from '@skyux/core';
 import { SkyModalLegacyService, SkyModalService } from '@skyux/modals';
 
 import { SkyPageModalLink } from '../action-hub/types/page-modal-link';
 import { SkyPageModalLinksInput } from '../action-hub/types/page-modal-links-input';
 
+/**
+ * A component that displays a list of links such as within a `<sky-page-links>` component.
+ */
 @Component({
   selector: 'sky-modal-link-list',
   templateUrl: './modal-link-list.component.html',
   styleUrls: ['./modal-link-list.component.scss'],
 })
 export class SkyModalLinkListComponent {
-  @Input()
-  public set links(value: SkyPageModalLinksInput | undefined) {
-    this.#_links = value;
-    this.linksArray = Array.isArray(value) ? value : [];
-  }
-
-  public get links(): SkyPageModalLinksInput | undefined {
-    return this.#_links;
-  }
-
-  @Input()
-  public title: string | undefined;
-
-  public linksArray: SkyPageModalLink[] = [];
-
-  #_links: SkyPageModalLinksInput | undefined;
+  /**
+   * Option to pass links as an array of `SkyPageModalLink` objects or `'loading'` to display a loading indicator.
+   */
+  public readonly links = input<SkyPageModalLinksInput>();
+
+  /**
+   * The text to display as the list's heading.
+   */
+  public readonly headingText = input<string>();
+
+  protected readonly linksArray = computed<SkyPageModalLink[]>(() => {
+    const links = this.links();
+    if (Array.isArray(links)) {
+      return links;
+    } else {
+      return [];
+    }
+  });
 
   readonly #logger = inject(SkyLogService, { optional: true });
   readonly #modalSvc = inject(SkyModalService);
 
-  public openModal(link: SkyPageModalLink): void {
+  protected openModal(link: SkyPageModalLink): void {
     const modal = link.modal;
 
     if (modal) {
diff --git a/libs/components/pages/src/lib/modules/page/page.module.ts b/libs/components/pages/src/lib/modules/page/page.module.ts
index 4c57d7dc17..d4f1fccb0b 100644
--- a/libs/components/pages/src/lib/modules/page/page.module.ts
+++ b/libs/components/pages/src/lib/modules/page/page.module.ts
@@ -8,19 +8,25 @@ import { SkyPageHeaderModule } from '../page-header/page-header.module';
 import { SkyPageContentComponent } from './page-content.component';
 import { SkyPageLinksComponent } from './page-links.component';
 import { SkyPageComponent } from './page.component';
+import { SkyLinkListModule } from '../link-list/link-list.module';
+import { SkyModalLinkListModule } from '../modal-link-list/modal-link-list.module';
 
 @NgModule({
   declarations: [SkyPageComponent, SkyPageContentComponent],
   imports: [
+    SkyLinkListModule,
     SkyPageLinksComponent,
     SkyLinkListComponent,
     SkyLinkListItemComponent,
     SkyLinkListRecentlyAccessedComponent,
+    SkyModalLinkListModule,
   ],
   exports: [
     SkyLinkListComponent,
     SkyLinkListItemComponent,
     SkyLinkListRecentlyAccessedComponent,
+    SkyLinkListModule,
+    SkyModalLinkListModule,
     SkyPageComponent,
     SkyPageHeaderModule,
     SkyPageContentComponent,

From 56c1ee722a8ac7b35ed99c51db3d431bfbadc39c Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Mon, 10 Feb 2025 14:38:13 -0500
Subject: [PATCH 2/3] Prettier

---
 .../modal-link-list/modal-link-list.component.spec.ts  | 10 +++++++---
 .../modal-link-list/modal-link-list.component.ts       |  8 +++++++-
 .../pages/src/lib/modules/page/page.module.ts          |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
index 46a36c0a9c..605d7f801b 100644
--- a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
+++ b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.spec.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
 import { SkyLogService } from '@skyux/core';
 import { SkyModalService } from '@skyux/modals';
 
 import { SkyModalLinkListComponent } from './modal-link-list.component';
 import { SkyModalLinkListModule } from './modal-link-list.module';
-import { SkyAppTestUtility } from '@skyux-sdk/testing';
 
 @Component({
   template: '',
@@ -51,7 +51,9 @@ describe('SkyModalLinkListComponent', () => {
       },
     ]);
     fixture.detectChanges();
-    const link = Array.from<HTMLButtonElement>(fixture.nativeElement.querySelectorAll('button.sky-link-list-item'));
+    const link = Array.from<HTMLButtonElement>(
+      fixture.nativeElement.querySelectorAll('button.sky-link-list-item'),
+    );
     expect(link.length).toBe(1);
     SkyAppTestUtility.fireDomEvent(link[0], 'click');
     expect(openModalSpy).toHaveBeenCalledWith(MockStandaloneComponent, {});
@@ -68,7 +70,9 @@ describe('SkyModalLinkListComponent', () => {
       },
     ]);
     fixture.detectChanges();
-    const link = Array.from<HTMLButtonElement>(fixture.nativeElement.querySelectorAll('button.sky-link-list-item'));
+    const link = Array.from<HTMLButtonElement>(
+      fixture.nativeElement.querySelectorAll('button.sky-link-list-item'),
+    );
     expect(link.length).toBe(1);
     SkyAppTestUtility.fireDomEvent(link[0], 'click');
     expect(logger.deprecated).toHaveBeenCalled();
diff --git a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
index 667c2b901e..c7f869bdaa 100644
--- a/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
+++ b/libs/components/pages/src/lib/modules/modal-link-list/modal-link-list.component.ts
@@ -1,4 +1,10 @@
-import { Component, inject, isStandalone, input, computed } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  isStandalone,
+} from '@angular/core';
 import { SkyLogService } from '@skyux/core';
 import { SkyModalLegacyService, SkyModalService } from '@skyux/modals';
 
diff --git a/libs/components/pages/src/lib/modules/page/page.module.ts b/libs/components/pages/src/lib/modules/page/page.module.ts
index d4f1fccb0b..36af50b3b3 100644
--- a/libs/components/pages/src/lib/modules/page/page.module.ts
+++ b/libs/components/pages/src/lib/modules/page/page.module.ts
@@ -3,13 +3,13 @@ import { NgModule } from '@angular/core';
 import { SkyLinkListRecentlyAccessedComponent } from '../link-list-recently-accessed/link-list-recently-accessed.component';
 import { SkyLinkListItemComponent } from '../link-list/link-list-item.component';
 import { SkyLinkListComponent } from '../link-list/link-list.component';
+import { SkyLinkListModule } from '../link-list/link-list.module';
+import { SkyModalLinkListModule } from '../modal-link-list/modal-link-list.module';
 import { SkyPageHeaderModule } from '../page-header/page-header.module';
 
 import { SkyPageContentComponent } from './page-content.component';
 import { SkyPageLinksComponent } from './page-links.component';
 import { SkyPageComponent } from './page.component';
-import { SkyLinkListModule } from '../link-list/link-list.module';
-import { SkyModalLinkListModule } from '../modal-link-list/modal-link-list.module';
 
 @NgModule({
   declarations: [SkyPageComponent, SkyPageContentComponent],

From 96f321071791f54d295678f6e9159375c8cdfbe3 Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Mon, 10 Feb 2025 14:51:44 -0500
Subject: [PATCH 3/3] Fix action hub visual regression

---
 .../pages/src/lib/modules/action-hub/action-hub.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html b/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html
index 9d864b7b27..271b06865e 100644
--- a/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html
+++ b/libs/components/pages/src/lib/modules/action-hub/action-hub.component.html
@@ -26,7 +26,7 @@
     <sky-link-list-recently-accessed [recentLinks]="recentLinks" />
     <sky-modal-link-list
       [links]="settingsLinks"
-      [title]="'sky_action_hub_settings_links' | skyLibResources"
+      [headingText]="'sky_action_hub_settings_links' | skyLibResources"
     />
   </sky-page-links>
 </sky-page>