fix(core): split the external link and router link into separate options

projects/core/src/lib/action-anchor/action-anchor.model.ts

@@ -18,7 +18,14 @@ export type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';
 /**
  * `ActionAnchor` specific options, extending abstract options with it's specific properties
  */
-export interface ActionAnchorOptions extends ActionAbstractOptions {
-  readonly href?: UrlTree | string | string[];
-  readonly target?: AnchorTarget;
-}
+export type ActionAnchorOptions = ActionAbstractOptions &
+  (
+    | {
+        readonly href: string;
+        readonly target?: AnchorTarget;
+      }
+    | {
+        readonly routerLink: string | readonly string[] | UrlTree;
+        readonly target?: AnchorTarget;
+      }
+  );

projects/core/src/lib/action-anchor/action-anchor.spec.ts

@@ -28,16 +28,16 @@ describe('Class: ActionAnchor', function (): void {
   });
 
   it('should properly differentiate external url and router links', function (this: TestContext): void {
-    this.action.setHref('/home');
+    this.action.setRouterLink('/home');
     expect(this.action.isExternalLink()).toBeFalse();
 
-    this.action.setHref('home');
+    this.action.setRouterLink('home');
     expect(this.action.isExternalLink()).toBeFalse();
 
-    this.action.setHref(['user', '11111', 'overview']);
+    this.action.setRouterLink(['user', '11111', 'overview']);
     expect(this.action.isExternalLink()).toBeFalse();
 
-    this.action.setHref(new UrlTree());
+    this.action.setRouterLink(new UrlTree());
     expect(this.action.isExternalLink()).toBeFalse();
 
     this.action.setHref('www.external.com');
@@ -48,13 +48,14 @@ describe('Class: ActionAnchor', function (): void {
   });
 
   it('should notify every change with changes$', function (this: TestContext): void {
-    const marble = '(tivdlg)';
+    const marble = '(tivdhrg)';
     const values = {
       t: { title: 'Test Title' },
       i: { icon: 'test-icon' },
       v: { visible: true },
       d: { disabled: false },
-      l: { link: '/home' },
+      r: { routerLink: null },
+      h: { href: '/home' },
       g: { target: '_blank' },
     };
 

projects/core/src/lib/action-anchor/action-anchor.ts

@@ -10,7 +10,7 @@ import { ActionAnchorComponentImpl, ActionAnchorOptions, AnchorTarget } from './
  * Default options for `ActionAnchor`
  * Extended by provided options in action `constructor`
  */
-const defaultButtonOptions: ActionAnchorOptions = {};
+const defaultButtonOptions = <ActionAnchorOptions>{};
 
 /**
  * `ActionAnchor` used to create basic link
@@ -47,10 +47,12 @@ export class ActionAnchor extends ActionAbstract<ActionAnchorOptions, null> {
    */
   readonly changes$: Observable<ActionAnchorOptions>;
 
-  readonly href$: Observable<UrlTree | string | string[] | null>;
+  readonly href$: Observable<string | null>;
+  readonly routerLink$: Observable<UrlTree | string | readonly string[] | null>;
   readonly target$: Observable<AnchorTarget | null>;
 
-  protected href: BehaviorSubject<UrlTree | string | string[] | null>;
+  protected href: BehaviorSubject<string | null>;
+  protected routerLink: BehaviorSubject<UrlTree | string | readonly string[] | null>;
   protected target: BehaviorSubject<AnchorTarget | null>;
 
   /**
@@ -62,18 +64,21 @@ export class ActionAnchor extends ActionAbstract<ActionAnchorOptions, null> {
   constructor(options: ActionAnchorOptions = defaultButtonOptions, component?: Type<ActionAnchorComponentImpl>) {
     super({ ...defaultButtonOptions, ...options }, component);
 
-    this.href = new BehaviorSubject(options.href ?? null);
+    this.href = new BehaviorSubject('href' in options ? options.href : null);
+    this.routerLink = new BehaviorSubject('routerLink' in options ? options.routerLink : null);
     this.target = new BehaviorSubject(options.target ?? null);
 
     this.href$ = this.handleLivecycleDistinct(this.href.asObservable(), false);
+    this.routerLink$ = this.handleLivecycleDistinct(this.routerLink.asObservable(), false);
     this.target$ = this.handleLivecycleDistinct(this.target.asObservable(), false);
     this.changes$ = this.handleLivecycle(
       merge(
         this.title$.pipe(map(title => <ActionAnchorOptions>{ title })),
         this.icon$.pipe(map(icon => <ActionAnchorOptions>{ icon })),
         this.visible$.pipe(map(visible => <ActionAnchorOptions>{ visible })),
         this.disabled$.pipe(map(disabled => <ActionAnchorOptions>{ disabled })),
-        this.href$.pipe(map(href => <ActionAnchorOptions>{ link: href })),
+        this.href$.pipe(map(href => <ActionAnchorOptions>{ href })),
+        this.routerLink$.pipe(map(routerLink => <ActionAnchorOptions>{ routerLink })),
         this.target$.pipe(map(target => <ActionAnchorOptions>{ target })),
       ),
     );
@@ -83,8 +88,15 @@ export class ActionAnchor extends ActionAbstract<ActionAnchorOptions, null> {
     return this;
   }
 
-  setHref(link: UrlTree | string | string[] | null) {
-    this.href.next(link);
+  setHref(href: string | null) {
+    this.href.next(href);
+    this.routerLink.next(null);
+    return this;
+  }
+
+  setRouterLink(routerLink: UrlTree | string | readonly string[] | null) {
+    this.routerLink.next(routerLink);
+    this.href.next(null);
     return this;
   }
 
@@ -104,7 +116,6 @@ export class ActionAnchor extends ActionAbstract<ActionAnchorOptions, null> {
   }
 
   isExternalLink() {
-    const link = this.href.getValue();
-    return typeof link === 'string' && (link.startsWith('http') || link.startsWith('www'));
+    return this.href.getValue() !== null;
   }
 }

projects/playground/src/app/app.component.ts

@@ -14,7 +14,8 @@ export class AppComponent {
   });
   link1 = new ActionAnchor({
     title: 'Hello route (this tab)',
-    href: ['hello'],
+    routerLink: ['hello'],
+    target: '_blank',
   });
   menuItem1 = new ActionButton({
     title: 'Menu item 1',
@@ -56,16 +57,16 @@ export class AppComponent {
         children: [
           new ActionAnchor({
             title: 'Hello route (new tab)',
-            href: ['hello'],
+            routerLink: ['hello'],
             target: '_blank',
           }),
           new ActionAnchor({
             title: 'Home route (this tab)',
-            href: ['home'],
+            routerLink: ['home'],
           }),
           new ActionAnchor({
             title: 'Home route (new tab)',
-            href: ['home'],
+            routerLink: ['home'],
             target: '_blank',
           }),
           new ActionAnchor({