@sebgroup/green-core-ng 2.37.1 → 2.37.2

package/fesm2022/sebgroup-green-core-ng.mjs

@@ -1,12 +1,13 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, Renderer2, Injector, Directive, forwardRef, NgModule, InjectionToken, ViewContainerRef, TemplateRef, Injectable, RendererFactory2 } from '@angular/core';
+import { inject, ElementRef, NgZone, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, Renderer2, Injector, Directive, DestroyRef, forwardRef, NgModule, InjectionToken, ViewContainerRef, TemplateRef, Injectable, RendererFactory2 } from '@angular/core';
 import { GdsAlert } from '@sebgroup/green-core/components/alert/alert.component.js';
 import { GdsBadge } from '@sebgroup/green-core/components/badge/badge.component.js';
 import { GdsBlur } from '@sebgroup/green-core/components/blur/blur.component.js';
 import { GdsBreadcrumbs } from '@sebgroup/green-core/components/breadcrumbs/breadcrumbs.component.js';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { LocationStrategy, DOCUMENT, CommonModule } from '@angular/common';
+import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { GdsButton } from '@sebgroup/green-core/components/button/button.component.js';
 import { GdsCalendar } from '@sebgroup/green-core/components/calendar/calendar.component.js';
 import { GdsCard } from '@sebgroup/green-core/components/card/card.component.js';
@@ -398,7 +399,6 @@ import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/se
 import { GdsSensitiveAccount } from '@sebgroup/green-core/components/sensitive/account/sensitive-account.component.js';
 import { GdsSensitiveDate } from '@sebgroup/green-core/components/sensitive/date/sensitive-date.component.js';
 import { GdsSensitiveNumber } from '@sebgroup/green-core/components/sensitive/number/sensitive-number.component.js';
-import { DOCUMENT, CommonModule } from '@angular/common';
 import { getScopedTagName } from '@sebgroup/green-core/scoping';
 import { ɵAnimationRendererFactory as _AnimationRendererFactory, ɵAnimationEngine as _AnimationEngine } from '@angular/animations/browser';
 import * as i1 from '@angular/platform-browser';
@@ -895,23 +895,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 let GdsButtonComponent = class GdsButtonComponent extends GdsFormControlBase {
     constructor() {
         super(...arguments);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         /** Fired when the button is clicked. */
         this.click = new EventEmitter();
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     get element() {
         return this.elementRef.nativeElement;
@@ -926,6 +963,19 @@ let GdsButtonComponent = class GdsButtonComponent extends GdsFormControlBase {
             // Component may not be available in this version of green-core
             console.warn('Failed to define gds-button:', e);
         }
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
     }
     ngOnChanges(changes) {
         // Implementation added by @ProxyInputs decorator
@@ -1345,22 +1395,72 @@ let GdsCardLinkedComponent = class GdsCardLinkedComponent {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
         this.renderer = inject(Renderer2);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         this.cdr.detach();
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
+    }
+    /**
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     ngOnInit() {
         // Define the custom element
@@ -2732,21 +2832,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 let GdsFabComponent = class GdsFabComponent extends GdsFormControlBase {
     constructor() {
         super(...arguments);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     get element() {
         return this.elementRef.nativeElement;
@@ -2761,6 +2898,19 @@ let GdsFabComponent = class GdsFabComponent extends GdsFormControlBase {
             // Component may not be available in this version of green-core
             console.warn('Failed to define gds-fab:', e);
         }
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
     }
     ngOnChanges(changes) {
         // Implementation added by @ProxyInputs decorator
@@ -3790,24 +3940,74 @@ let GdsLinkComponent = class GdsLinkComponent {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
         this.renderer = inject(Renderer2);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         /** Fired when the link is clicked. */
         this.click = new EventEmitter();
         this.cdr.detach();
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     ngOnInit() {
         // Define the custom element
@@ -4102,26 +4302,76 @@ let GdsMenuButtonComponent = class GdsMenuButtonComponent {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
         this.renderer = inject(Renderer2);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         /** Fired when the button is clicked. */
         this.click = new EventEmitter();
         this.cdr.detach();
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
         // Subscribe to router link active changes
         this.routerLinkActive?.isActiveChange.subscribe(() => this.setActive());
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     /**
      * Updates the selected state based on RouterLinkActive
@@ -5785,22 +6035,72 @@ let GdsCardPattern01Component = class GdsCardPattern01Component {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
         this.renderer = inject(Renderer2);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         this.cdr.detach();
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     ngOnInit() {
         // Define the custom element
@@ -5938,22 +6238,72 @@ let GdsBreadcrumbComponent = class GdsBreadcrumbComponent {
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
         this.renderer = inject(Renderer2);
+        this.router = inject(Router);
+        this.locationStrategy = inject(LocationStrategy);
+        this.destroyRef = inject(DestroyRef);
         this.routerLink = inject(RouterLink, { optional: true, self: true });
         this.routerLinkActive = inject(RouterLinkActive, { optional: true, self: true });
         this.cdr.detach();
+        if (this.routerLink) {
+            // Prevent the browser from following the href on click – RouterLink
+            // handles navigation via Router.navigateByUrl() but only calls
+            // preventDefault() for native <a> elements.
+            this.preventNativeNavigation();
+            // Keep href in sync after client-side navigations (RouterLink only
+            // does this for native <a> elements).
+            const sub = this.router.events.subscribe((event) => {
+                if (event instanceof NavigationEnd)
+                    this.updateHref();
+            });
+            this.destroyRef.onDestroy(() => sub.unsubscribe());
+        }
     }
     /**
-     * Updates the href attribute from RouterLink
+     * Prevent the browser from following the href when RouterLink handles
+     * navigation. RouterLink calls Router.navigateByUrl() for all elements,
+     * but only calls preventDefault() for native <a> tags. For custom
+     * elements we must do it ourselves, respecting modifier-key and
+     * target-attribute semantics so that ctrl-click / cmd-click / target=_blank
+     * still open a new tab.
+     * @internal
+     */
+    preventNativeNavigation() {
+        // Use capture phase so this runs before Angular's RouterLink host listener.
+        this.elementRef.nativeElement.addEventListener('click', (event) => {
+            if (!this.routerLink?.urlTree)
+                return;
+            // When modifier keys are pressed or target is not _self, stop
+            // RouterLink from navigating (it skips these checks for non-anchor
+            // elements) and let the browser handle the click natively (new tab etc.)
+            if (event.button !== 0 || event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+                event.stopImmediatePropagation();
+                return;
+            }
+            const target = this.elementRef.nativeElement.getAttribute('target');
+            if (target && target !== '_self') {
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Normal left-click: let RouterLink handle navigation via
+            // Router.navigateByUrl(), but prevent the browser from also
+            // following the shadow DOM anchor's href.
+            event.preventDefault();
+        }, true);
+    }
+    /**
+     * Updates the href attribute from RouterLink using only public Angular APIs.
      * @internal
      */
     updateHref() {
         if (!this.routerLink)
             return;
-        // Trick RouterLink into thinking we are an anchor element
-        this.routerLink.isAnchorElement = true;
-        this.routerLink.updateHref();
-        // Set the href attribute on our element
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'href', this.routerLink.href || '');
+        const urlTree = this.routerLink.urlTree;
+        const href = urlTree
+            ? this.locationStrategy.prepareExternalUrl(this.router.serializeUrl(urlTree))
+            : null;
+        if (href) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'href', href);
+        }
     }
     ngOnInit() {
         // Define the custom element