feat(components/pages): modal link list items may provide a click handler (#4169)

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>

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.');
+      },
+    },
+  ];
 }

libs/components/pages/documentation.json

@@ -15,6 +15,8 @@
           "SkyPageLink",
           "SkyPageLinksInput",
           "SkyPageModalLink",
+          "SkyPageModalLinkClickHandler",
+          "SkyPageModalLinkClickHandlerArgs",
           "SkyPageModalLinksInput",
           "SkyRecentLink",
           "SkyRecentLinksInput",

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';

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 {}

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;
 }

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 {}

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':

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"

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', () => {