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