@sebgroup/green-core-ng 2.37.0 → 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';
@@ -54,7 +55,6 @@ import { GdsFilterChip } from '@sebgroup/green-core/components/filter-chips/filt
 import { GdsFormattedAccount } from '@sebgroup/green-core/components/formatted-text/account/formatted-account.component.js';
 import { GdsFormattedDate } from '@sebgroup/green-core/components/formatted-text/date/formatted-date.component.js';
 import { GdsFormattedNumber } from '@sebgroup/green-core/components/formatted-text/number/formatted-number.component.js';
-import { GdsRadioGroup } from '@sebgroup/green-core/components/radio/radio-group/radio-group.component.js';
 import { IconAi } from '@sebgroup/green-core/components/icon/icons/ai.component.js';
 import { IconAirplaneUp } from '@sebgroup/green-core/components/icon/icons/airplane-up.component.js';
 import { IconArchive } from '@sebgroup/green-core/components/icon/icons/archive.component.js';
@@ -394,11 +394,11 @@ import { IconYoutube } from '@sebgroup/green-core/components/icon/icons/youtube.
 import { IconZap } from '@sebgroup/green-core/components/icon/icons/zap.component.js';
 import { IconZoomIn } from '@sebgroup/green-core/components/icon/icons/zoom-in.component.js';
 import { IconZoomOut } from '@sebgroup/green-core/components/icon/icons/zoom-out.component.js';
+import { GdsRadioGroup } from '@sebgroup/green-core/components/radio/radio-group/radio-group.component.js';
 import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/segment/segment.component.js';
 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());
+        }
     }
     /**
-     * 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
@@ -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());
+        }
+    }
+    /**
+     * 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
@@ -6821,139 +7171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Auto-generated from Custom Elements Manifest
  */
 
-/**
- * Angular wrapper for the gds-radio-group web component
- *
- */
-let GdsRadioGroupComponent = class GdsRadioGroupComponent extends GdsFormControlBase {
-    constructor() {
-        super(...arguments);
-        /** Fired when a radio button selection changes */
-        this.change = new EventEmitter();
-        /** Fired when a radio button selection changes */
-        this.input = new EventEmitter();
-    }
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        // Define the custom element
-        try {
-            GdsRadioGroup.define();
-        }
-        catch (e) {
-            // Component may not be available in this version of green-core
-            console.warn('Failed to define gds-radio-group:', e);
-        }
-    }
-    ngOnChanges(changes) {
-        // Implementation added by @ProxyInputs decorator
-    }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GdsRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.18", type: GdsRadioGroupComponent, isStandalone: true, selector: "gds-radio-group", inputs: { alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", size: "size", direction: "direction", supportingText: "supportingText", showExtendedSupportingText: ["showExtendedSupportingText", "showExtendedSupportingText", booleanAttribute], validator: "validator", required: ["required", "required", booleanAttribute], errorMessage: "errorMessage", invalid: "invalid", label: "label", value: "value", name: "name", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change", input: "input" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => GdsRadioGroupComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-GdsRadioGroupComponent = __decorate([
-    ProxyInputs(['align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'margin', 'margin-inline', 'margin-block', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'size', 'direction', 'supportingText', 'showExtendedSupportingText', 'validator', 'required', 'errorMessage', 'invalid', 'label', 'value', 'name', 'disabled'])
-], GdsRadioGroupComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GdsRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gds-radio-group',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content></ng-content>`,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => GdsRadioGroupComponent),
-                            multi: true,
-                        },
-                    ]
-                }]
-        }], propDecorators: { alignSelf: [{
-                type: Input
-            }], justifySelf: [{
-                type: Input
-            }], placeSelf: [{
-                type: Input
-            }], gridColumn: [{
-                type: Input
-            }], gridRow: [{
-                type: Input
-            }], gridArea: [{
-                type: Input
-            }], flex: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], marginInline: [{
-                type: Input
-            }], marginBlock: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], inlineSize: [{
-                type: Input
-            }], minInlineSize: [{
-                type: Input
-            }], maxInlineSize: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], direction: [{
-                type: Input
-            }], supportingText: [{
-                type: Input
-            }], showExtendedSupportingText: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], validator: [{
-                type: Input
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], errorMessage: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], change: [{
-                type: Output
-            }], input: [{
-                type: Output
-            }] } });
-
-/**
- * GdsRadioGroupComponent - Angular wrapper for gds-radio-group
- *
- *
- * Auto-generated from Custom Elements Manifest
- */
-
 /**
  * Angular wrapper for the gds-icon-ai web component
  *
@@ -37125,6 +37342,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
  * Auto-generated from Custom Elements Manifest
  */
 
+/**
+ * Angular wrapper for the gds-radio-group web component
+ *
+ */
+let GdsRadioGroupComponent = class GdsRadioGroupComponent extends GdsFormControlBase {
+    constructor() {
+        super(...arguments);
+        /** Fired when a radio button selection changes */
+        this.change = new EventEmitter();
+        /** Fired when a radio button selection changes */
+        this.input = new EventEmitter();
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // Define the custom element
+        try {
+            GdsRadioGroup.define();
+        }
+        catch (e) {
+            // Component may not be available in this version of green-core
+            console.warn('Failed to define gds-radio-group:', e);
+        }
+    }
+    ngOnChanges(changes) {
+        // Implementation added by @ProxyInputs decorator
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GdsRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.18", type: GdsRadioGroupComponent, isStandalone: true, selector: "gds-radio-group", inputs: { alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", size: "size", direction: "direction", supportingText: "supportingText", showExtendedSupportingText: ["showExtendedSupportingText", "showExtendedSupportingText", booleanAttribute], validator: "validator", required: ["required", "required", booleanAttribute], errorMessage: "errorMessage", invalid: "invalid", label: "label", value: "value", name: "name", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change", input: "input" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GdsRadioGroupComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+GdsRadioGroupComponent = __decorate([
+    ProxyInputs(['align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'margin', 'margin-inline', 'margin-block', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'size', 'direction', 'supportingText', 'showExtendedSupportingText', 'validator', 'required', 'errorMessage', 'invalid', 'label', 'value', 'name', 'disabled'])
+], GdsRadioGroupComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GdsRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gds-radio-group',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content></ng-content>`,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GdsRadioGroupComponent),
+                            multi: true,
+                        },
+                    ]
+                }]
+        }], propDecorators: { alignSelf: [{
+                type: Input
+            }], justifySelf: [{
+                type: Input
+            }], placeSelf: [{
+                type: Input
+            }], gridColumn: [{
+                type: Input
+            }], gridRow: [{
+                type: Input
+            }], gridArea: [{
+                type: Input
+            }], flex: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], marginInline: [{
+                type: Input
+            }], marginBlock: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], inlineSize: [{
+                type: Input
+            }], minInlineSize: [{
+                type: Input
+            }], maxInlineSize: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], supportingText: [{
+                type: Input
+            }], showExtendedSupportingText: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], validator: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], errorMessage: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], change: [{
+                type: Output
+            }], input: [{
+                type: Output
+            }] } });
+
+/**
+ * GdsRadioGroupComponent - Angular wrapper for gds-radio-group
+ *
+ *
+ * Auto-generated from Custom Elements Manifest
+ */
+
 /**
  * Angular wrapper for the gds-segment web component
  *
@@ -38014,7 +38364,6 @@ class GreenCoreNgModule {
             GdsFormattedAccountComponent,
             GdsFormattedDateComponent,
             GdsFormattedNumberComponent,
-            GdsRadioGroupComponent,
             IconAiComponent,
             IconAirplaneUpComponent,
             IconArchiveComponent,
@@ -38354,6 +38703,7 @@ class GreenCoreNgModule {
             IconZapComponent,
             IconZoomInComponent,
             IconZoomOutComponent,
+            GdsRadioGroupComponent,
             GdsSegmentComponent,
             GdsSensitiveAccountComponent,
             GdsSensitiveDateComponent,
@@ -38411,7 +38761,6 @@ class GreenCoreNgModule {
             GdsFormattedAccountComponent,
             GdsFormattedDateComponent,
             GdsFormattedNumberComponent,
-            GdsRadioGroupComponent,
             IconAiComponent,
             IconAirplaneUpComponent,
             IconArchiveComponent,
@@ -38751,6 +39100,7 @@ class GreenCoreNgModule {
             IconZapComponent,
             IconZoomInComponent,
             IconZoomOutComponent,
+            GdsRadioGroupComponent,
             GdsSegmentComponent,
             GdsSensitiveAccountComponent,
             GdsSensitiveDateComponent,
@@ -38815,7 +39165,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         GdsFormattedAccountComponent,
                         GdsFormattedDateComponent,
                         GdsFormattedNumberComponent,
-                        GdsRadioGroupComponent,
                         IconAiComponent,
                         IconAirplaneUpComponent,
                         IconArchiveComponent,
@@ -39155,6 +39504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         IconZapComponent,
                         IconZoomInComponent,
                         IconZoomOutComponent,
+                        GdsRadioGroupComponent,
                         GdsSegmentComponent,
                         GdsSensitiveAccountComponent,
                         GdsSensitiveDateComponent,
@@ -39215,7 +39565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         GdsFormattedAccountComponent,
                         GdsFormattedDateComponent,
                         GdsFormattedNumberComponent,
-                        GdsRadioGroupComponent,
                         IconAiComponent,
                         IconAirplaneUpComponent,
                         IconArchiveComponent,
@@ -39555,6 +39904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         IconZapComponent,
                         IconZoomInComponent,
                         IconZoomOutComponent,
+                        GdsRadioGroupComponent,
                         GdsSegmentComponent,
                         GdsSensitiveAccountComponent,
                         GdsSensitiveDateComponent,