From 00473db62aeaadcd7b7ab6668dbe7421f2e2ba97 Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Fri, 23 Jan 2026 08:55:12 -0500
Subject: [PATCH] feat(components/pages): modal link list items may provide a
 click handler (#4169)

[AB#3682483](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3682483)
---
 .../layouts/blocks-page/blocks-page.component.html  |  1 +
 .../layouts/blocks-page/blocks-page.component.ts    | 11 ++++++++++-
 libs/components/pages/documentation.json            |  2 ++
 libs/components/pages/src/index.ts                  |  4 ++++
 .../types/page-modal-link-click-handler.ts          | 11 +++++++++++
 .../lib/modules/action-hub/types/page-modal-link.ts |  5 +++++
 .../pages/src/lib/modules/link-as/link-as.module.ts |  2 +-
 .../pages/src/lib/modules/link-as/link-as.pipe.ts   |  6 ++++--
 .../modal-link-list/modal-link-list.component.html  |  8 ++++++++
 .../modal-link-list.component.spec.ts               | 13 ++++++++++---
 10 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 libs/components/pages/src/lib/modules/action-hub/types/page-modal-link-click-handler.ts

diff --git a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html
index 4e469a2ea5..553b75e313 100644
--- a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html
+++ b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.html
@@ -52,5 +52,6 @@
         <a href="/">Components</a>
       </sky-link-list-item>
     </sky-link-list>
+    <sky-modal-link-list headingText="Settings" [links]="settingsLinks" />
   </sky-page-links>
 </sky-page>
diff --git a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts
index bb03b02fbc..7b17628ba5 100644
--- a/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts
+++ b/apps/playground/src/app/components/pages/layouts/blocks-page/blocks-page.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
-import { SkyPageModule } from '@skyux/pages';
+import { SkyPageModalLink, SkyPageModule } from '@skyux/pages';
 
 @Component({
   imports: [SkyBoxModule, SkyFluidGridModule, SkyPageModule],
@@ -9,4 +9,13 @@ import { SkyPageModule } from '@skyux/pages';
 })
 export default class BlocksPageComponent {
   protected readonly linksLoading = signal<'loading' | undefined>(undefined);
+
+  protected readonly settingsLinks: SkyPageModalLink[] = [
+    {
+      label: 'Do not click this',
+      click: (): void => {
+        alert('You disappoint me.');
+      },
+    },
+  ];
 }
diff --git a/libs/components/pages/documentation.json b/libs/components/pages/documentation.json
index eec2037c08..6c35bfde38 100644
--- a/libs/components/pages/documentation.json
+++ b/libs/components/pages/documentation.json
@@ -15,6 +15,8 @@
           "SkyPageLink",
           "SkyPageLinksInput",
           "SkyPageModalLink",
+          "SkyPageModalLinkClickHandler",
+          "SkyPageModalLinkClickHandlerArgs",
           "SkyPageModalLinksInput",
           "SkyRecentLink",
           "SkyRecentLinksInput",
diff --git a/libs/components/pages/src/index.ts b/libs/components/pages/src/index.ts
index 07d9a56525..18e954a805 100644
--- a/libs/components/pages/src/index.ts
+++ b/libs/components/pages/src/index.ts
@@ -11,6 +11,10 @@ export { SkyActionHubNeedsAttentionInput } from './lib/modules/action-hub/types/
 export { SkyPageLink } from './lib/modules/action-hub/types/page-link';
 export { SkyPageLinksInput } from './lib/modules/action-hub/types/page-links-input';
 export { SkyPageModalLink } from './lib/modules/action-hub/types/page-modal-link';
+export {
+  SkyPageModalLinkClickHandler,
+  SkyPageModalLinkClickHandlerArgs,
+} from './lib/modules/action-hub/types/page-modal-link-click-handler';
 export { SkyPageModalLinksInput } from './lib/modules/action-hub/types/page-modal-links-input';
 export { SkyRecentLink } from './lib/modules/action-hub/types/recent-link';
 export { SkyRecentLinksInput } from './lib/modules/action-hub/types/recent-links-input';
diff --git a/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link-click-handler.ts b/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link-click-handler.ts
new file mode 100644
index 0000000000..967116a396
--- /dev/null
+++ b/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link-click-handler.ts
@@ -0,0 +1,11 @@
+import {
+  SkyActionHubNeedsAttentionClickHandler,
+  SkyActionHubNeedsAttentionClickHandlerArgs,
+} from './action-hub-needs-attention-click-handler';
+
+export type SkyPageModalLinkClickHandler =
+  SkyActionHubNeedsAttentionClickHandler;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+export interface SkyPageModalLinkClickHandlerArgs
+  extends SkyActionHubNeedsAttentionClickHandlerArgs {}
diff --git a/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts b/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts
index e7328f5f6c..38163c298c 100644
--- a/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts
+++ b/libs/components/pages/src/lib/modules/action-hub/types/page-modal-link.ts
@@ -2,6 +2,7 @@ import { NavigationExtras } from '@angular/router';
 import { SkyModalConfigurationInterface } from '@skyux/modals';
 
 import { SkyPageLinkInterface } from './page-link-interface';
+import { SkyPageModalLinkClickHandler } from './page-modal-link-click-handler';
 
 /**
  * Displays links to related information or recently accessed items.
@@ -24,4 +25,8 @@ export interface SkyPageModalLink extends SkyPageLinkInterface {
     component: any;
     config?: SkyModalConfigurationInterface;
   };
+  /**
+   * The click handler for the link, which should be used to open a modal dialog.
+   */
+  click?: SkyPageModalLinkClickHandler;
 }
diff --git a/libs/components/pages/src/lib/modules/link-as/link-as.module.ts b/libs/components/pages/src/lib/modules/link-as/link-as.module.ts
index 0b1e4084d2..76354161b3 100644
--- a/libs/components/pages/src/lib/modules/link-as/link-as.module.ts
+++ b/libs/components/pages/src/lib/modules/link-as/link-as.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { LinkAsPipe } from './link-as.pipe';
 
 @NgModule({
-  declarations: [LinkAsPipe],
+  imports: [LinkAsPipe],
   exports: [LinkAsPipe],
 })
 export class LinkAsModule {}
diff --git a/libs/components/pages/src/lib/modules/link-as/link-as.pipe.ts b/libs/components/pages/src/lib/modules/link-as/link-as.pipe.ts
index 6436abf39f..849ae32bbb 100644
--- a/libs/components/pages/src/lib/modules/link-as/link-as.pipe.ts
+++ b/libs/components/pages/src/lib/modules/link-as/link-as.pipe.ts
@@ -7,7 +7,6 @@ import { SkyPageModalLink } from '../action-hub/types/page-modal-link';
 
 @Pipe({
   name: 'linkAs',
-  standalone: false,
 })
 export class LinkAsPipe implements PipeTransform {
   public transform(
@@ -59,7 +58,10 @@ export class LinkAsPipe implements PipeTransform {
 
     switch (linkAs) {
       case 'button':
-        return !!(value as SkyActionHubNeedsAttention)?.click && !permalink;
+        return (
+          !!(value as SkyActionHubNeedsAttention | SkyPageModalLink)?.click &&
+          !permalink
+        );
       case 'href':
         return permalinkUrl !== undefined && !permalinkUrl.includes('://');
       case 'skyHref':
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 949156f9ec..783aaa1c35 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
@@ -33,6 +33,14 @@
             >
               {{ link.label }}
             </a>
+          } @else if (link | linkAs: 'button') {
+            <button
+              class="sky-btn sky-btn-link-inline sky-link-list-item"
+              type="button"
+              (click)="link.click({ item: link })"
+            >
+              {{ link.label }}
+            </button>
           } @else if (link.modal) {
             <button
               class="sky-btn sky-btn-link-inline sky-link-list-item"
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 5d7614c0c9..d04f2e09b8 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
@@ -44,19 +44,26 @@ describe('SkyModalLinkListComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    const clickSpy = jasmine.createSpy('click');
     fixture.componentRef.setInput('links', [
       {
         label: 'Link 1',
         modal: { component: MockStandaloneComponent, config: {} },
       },
+      {
+        label: 'Link 2',
+        click: clickSpy,
+      },
     ]);
     fixture.detectChanges();
-    const link = Array.from<HTMLButtonElement>(
+    const modalLinks = Array.from<HTMLButtonElement>(
       fixture.nativeElement.querySelectorAll('button.sky-link-list-item'),
     );
-    expect(link.length).toBe(1);
-    SkyAppTestUtility.fireDomEvent(link[0], 'click');
+    expect(modalLinks).toHaveSize(2);
+    SkyAppTestUtility.fireDomEvent(modalLinks[0], 'click');
     expect(openModalSpy).toHaveBeenCalledWith(MockStandaloneComponent, {});
+    SkyAppTestUtility.fireDomEvent(modalLinks[1], 'click');
+    expect(clickSpy).toHaveBeenCalled();
   });
 
   it('should log when modal is not standalone', () => {