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 @@
Components
+
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 }}
+ } @else if (link | linkAs: 'button') {
+
} @else if (link.modal) {