@ni/nimble-angular 16.0.5 → 16.0.7

package/directives/breadcrumb-item/nimble-breadcrumb-item-router-link-with-href.directive.d.ts

@@ -1,4 +1,6 @@
+import { ElementRef, Injector } from '@angular/core';
 import { RouterLinkWithHref } from '@angular/router';
+import type { BreadcrumbItem } from '@ni/nimble-components/dist/esm/breadcrumb-item';
 import * as i0 from "@angular/core";
 /**
  * Selectors used for built-in Angular RouterLink directives:
@@ -13,7 +15,11 @@ import * as i0 from "@angular/core";
  * won't also be an active RouterLink directive incorrectly handling navigation.
  */
 export declare class NimbleBreadcrumbItemRouterLinkWithHrefDirective extends RouterLinkWithHref {
+    private readonly elementRef;
     set nimbleRouterLink(commands: never[] | string | null | undefined);
+    constructor(injector: Injector, elementRef: ElementRef<BreadcrumbItem>);
+    onClick(_button: number, _ctrlKey: boolean, _shiftKey: boolean, _altKey: boolean, _metaKey: boolean): boolean;
+    nimbleOnClick(event: MouseEvent): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NimbleBreadcrumbItemRouterLinkWithHrefDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NimbleBreadcrumbItemRouterLinkWithHrefDirective, "nimble-breadcrumb-item[nimbleRouterLink]", never, { "nimbleRouterLink": "nimbleRouterLink"; }, {}, never, never, false>;
 }

package/esm2020/directives/breadcrumb-item/nimble-breadcrumb-item-router-link-with-href.directive.mjs

@@ -1,5 +1,6 @@
-import { Directive, Input } from '@angular/core';
-import { RouterLinkWithHref } from '@angular/router';
+import { LocationStrategy } from '@angular/common';
+import { Directive, HostListener, Input } from '@angular/core';
+import { ActivatedRoute, Router, RouterLinkWithHref } from '@angular/router';
 import * as i0 from "@angular/core";
 /**
  * Selectors used for built-in Angular RouterLink directives:
@@ -14,16 +15,37 @@ import * as i0 from "@angular/core";
  * won't also be an active RouterLink directive incorrectly handling navigation.
  */
 export class NimbleBreadcrumbItemRouterLinkWithHrefDirective extends RouterLinkWithHref {
+    constructor(injector, elementRef) {
+        super(injector.get(Router), injector.get(ActivatedRoute), injector.get(LocationStrategy));
+        this.elementRef = elementRef;
+    }
     set nimbleRouterLink(commands) {
         this.routerLink = commands;
     }
+    onClick(_button, _ctrlKey, _shiftKey, _altKey, _metaKey) {
+        // onClick is the 'click' @HostListener handler in RouterLinkWithHref. Override it to do nothing so that this directive
+        // can be in control of when the click handler is called. This allows RouterLinkWithHref's onClick to only be called
+        // when the link within the element is clicked rather than any part of the element.
+        return true;
+    }
+    nimbleOnClick(event) {
+        // Call onClick on the base class only when the anchor within the breadcrumb item was clicked.
+        if (event.composedPath().some(el => el === this.elementRef.nativeElement.control)) {
+            return super.onClick(event.button, event.ctrlKey, event.shiftKey, event.altKey, event.metaKey);
+        }
+        return true;
+    }
 }
-NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, selector: "nimble-breadcrumb-item[nimbleRouterLink]", inputs: { nimbleRouterLink: "nimbleRouterLink" }, usesInheritance: true, ngImport: i0 });
+NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, selector: "nimble-breadcrumb-item[nimbleRouterLink]", inputs: { nimbleRouterLink: "nimbleRouterLink" }, host: { listeners: { "click": "nimbleOnClick($event,$event.button,$event.ctrlKey,$event.shiftKey,$event.altKey,$event.metaKey)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'nimble-breadcrumb-item[nimbleRouterLink]' }]
-        }], propDecorators: { nimbleRouterLink: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { nimbleRouterLink: [{
                 type: Input
+            }], nimbleOnClick: [{
+                type: HostListener,
+                args: ['click',
+                    ['$event', '$event.button', '$event.ctrlKey', '$event.shiftKey', '$event.altKey', '$event.metaKey']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmltYmxlLWJyZWFkY3J1bWItaXRlbS1yb3V0ZXItbGluay13aXRoLWhyZWYuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmkvbmltYmxlLWFuZ3VsYXIvc3JjL2RpcmVjdGl2ZXMvYnJlYWRjcnVtYi1pdGVtL25pbWJsZS1icmVhZGNydW1iLWl0ZW0tcm91dGVyLWxpbmstd2l0aC1ocmVmLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFFckQ7Ozs7OztHQU1HO0FBRUg7Ozs7R0FJRztBQUVILE1BQU0sT0FBTywrQ0FBZ0QsU0FBUSxrQkFBa0I7SUFDbkYsSUFDVyxnQkFBZ0IsQ0FBQyxRQUE2QztRQUNyRSxJQUFJLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztJQUMvQixDQUFDOzs2SUFKUSwrQ0FBK0M7aUlBQS9DLCtDQUErQzs0RkFBL0MsK0NBQStDO2tCQUQzRCxTQUFTO21CQUFDLEVBQUUsUUFBUSxFQUFFLDBDQUEwQyxFQUFFOzhCQUdwRCxnQkFBZ0I7c0JBRDFCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSb3V0ZXJMaW5rV2l0aEhyZWYgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuXG4vKipcbiAqIFNlbGVjdG9ycyB1c2VkIGZvciBidWlsdC1pbiBBbmd1bGFyIFJvdXRlckxpbmsgZGlyZWN0aXZlczpcbiAqIFJvdXRlckxpbms6ICc6bm90KGEpOm5vdChhcmVhKVtyb3V0ZXJMaW5rXSdcbiAqIFJvdXRlckxpbmtXaXRoSHJlZjogJ2Fbcm91dGVyTGlua10sYXJlYVtyb3V0ZXJMaW5rXSdcbiAqXG4gKiBTZWUgaHR0cHM6Ly9naXRodWIuY29tL2FuZ3VsYXIvYW5ndWxhci9ibG9iLzU5NTdmZjQxNjNmNTVkODE0YmUyY2Y4MGI5OTA5MjQ0ZjFjZTUyNjIvcGFja2FnZXMvcm91dGVyL3NyYy9kaXJlY3RpdmVzL3JvdXRlcl9saW5rLnRzXG4gKi9cblxuLyoqXG4gKiBEaXJlY3RpdmUgdG8gaGFuZGxlIG5pbWJsZS1icmVhZGNydW1iLWl0ZW0gUm91dGVyTGluayBzdXBwb3J0LlxuICogTm90ZTogQ2xpZW50cyBuZWVkIHRvIHVzZSBbbmltYmxlUm91dGVyTGlua10gaW5zdGVhZCBvZiBbcm91dGVyTGlua10sIHNvIHRoYXQgdGhlcmVcbiAqIHdvbid0IGFsc28gYmUgYW4gYWN0aXZlIFJvdXRlckxpbmsgZGlyZWN0aXZlIGluY29ycmVjdGx5IGhhbmRsaW5nIG5hdmlnYXRpb24uXG4gKi9cbkBEaXJlY3RpdmUoeyBzZWxlY3RvcjogJ25pbWJsZS1icmVhZGNydW1iLWl0ZW1bbmltYmxlUm91dGVyTGlua10nIH0pXG5leHBvcnQgY2xhc3MgTmltYmxlQnJlYWRjcnVtYkl0ZW1Sb3V0ZXJMaW5rV2l0aEhyZWZEaXJlY3RpdmUgZXh0ZW5kcyBSb3V0ZXJMaW5rV2l0aEhyZWYge1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNldCBuaW1ibGVSb3V0ZXJMaW5rKGNvbW1hbmRzOiBuZXZlcltdIHwgc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZCkge1xuICAgICAgICB0aGlzLnJvdXRlckxpbmsgPSBjb21tYW5kcztcbiAgICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmltYmxlLWJyZWFkY3J1bWItaXRlbS1yb3V0ZXItbGluay13aXRoLWhyZWYuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmkvbmltYmxlLWFuZ3VsYXIvc3JjL2RpcmVjdGl2ZXMvYnJlYWRjcnVtYi1pdGVtL25pbWJsZS1icmVhZGNydW1iLWl0ZW0tcm91dGVyLWxpbmstd2l0aC1ocmVmLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBWSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFHN0U7Ozs7OztHQU1HO0FBRUg7Ozs7R0FJRztBQUVILE1BQU0sT0FBTywrQ0FBZ0QsU0FBUSxrQkFBa0I7SUFNbkYsWUFBbUIsUUFBa0IsRUFBbUIsVUFBc0M7UUFDMUYsS0FBSyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsUUFBUSxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsRUFBRSxRQUFRLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQztRQUR0QyxlQUFVLEdBQVYsVUFBVSxDQUE0QjtJQUU5RixDQUFDO0lBUEQsSUFDVyxnQkFBZ0IsQ0FBQyxRQUE2QztRQUNyRSxJQUFJLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztJQUMvQixDQUFDO0lBTWUsT0FBTyxDQUFDLE9BQWUsRUFBRSxRQUFpQixFQUFFLFNBQWtCLEVBQUUsT0FBZ0IsRUFBRSxRQUFpQjtRQUMvRyx1SEFBdUg7UUFDdkgsb0hBQW9IO1FBQ3BILG1GQUFtRjtRQUNuRixPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0lBTU0sYUFBYSxDQUFDLEtBQWlCO1FBQ2xDLDhGQUE4RjtRQUM5RixJQUFJLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDL0UsT0FBTyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsUUFBUSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQ2xHO1FBRUQsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQzs7NklBNUJRLCtDQUErQztpSUFBL0MsK0NBQStDOzRGQUEvQywrQ0FBK0M7a0JBRDNELFNBQVM7bUJBQUMsRUFBRSxRQUFRLEVBQUUsMENBQTBDLEVBQUU7d0hBR3BELGdCQUFnQjtzQkFEMUIsS0FBSztnQkFvQkMsYUFBYTtzQkFKbkIsWUFBWTt1QkFDVCxPQUFPO29CQUNQLENBQUMsUUFBUSxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxpQkFBaUIsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBMb2NhdGlvblN0cmF0ZWd5IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbmplY3RvciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFjdGl2YXRlZFJvdXRlLCBSb3V0ZXIsIFJvdXRlckxpbmtXaXRoSHJlZiB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgdHlwZSB7IEJyZWFkY3J1bWJJdGVtIH0gZnJvbSAnQG5pL25pbWJsZS1jb21wb25lbnRzL2Rpc3QvZXNtL2JyZWFkY3J1bWItaXRlbSc7XG5cbi8qKlxuICogU2VsZWN0b3JzIHVzZWQgZm9yIGJ1aWx0LWluIEFuZ3VsYXIgUm91dGVyTGluayBkaXJlY3RpdmVzOlxuICogUm91dGVyTGluazogJzpub3QoYSk6bm90KGFyZWEpW3JvdXRlckxpbmtdJ1xuICogUm91dGVyTGlua1dpdGhIcmVmOiAnYVtyb3V0ZXJMaW5rXSxhcmVhW3JvdXRlckxpbmtdJ1xuICpcbiAqIFNlZSBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9hbmd1bGFyL2Jsb2IvNTk1N2ZmNDE2M2Y1NWQ4MTRiZTJjZjgwYjk5MDkyNDRmMWNlNTI2Mi9wYWNrYWdlcy9yb3V0ZXIvc3JjL2RpcmVjdGl2ZXMvcm91dGVyX2xpbmsudHNcbiAqL1xuXG4vKipcbiAqIERpcmVjdGl2ZSB0byBoYW5kbGUgbmltYmxlLWJyZWFkY3J1bWItaXRlbSBSb3V0ZXJMaW5rIHN1cHBvcnQuXG4gKiBOb3RlOiBDbGllbnRzIG5lZWQgdG8gdXNlIFtuaW1ibGVSb3V0ZXJMaW5rXSBpbnN0ZWFkIG9mIFtyb3V0ZXJMaW5rXSwgc28gdGhhdCB0aGVyZVxuICogd29uJ3QgYWxzbyBiZSBhbiBhY3RpdmUgUm91dGVyTGluayBkaXJlY3RpdmUgaW5jb3JyZWN0bHkgaGFuZGxpbmcgbmF2aWdhdGlvbi5cbiAqL1xuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnbmltYmxlLWJyZWFkY3J1bWItaXRlbVtuaW1ibGVSb3V0ZXJMaW5rXScgfSlcbmV4cG9ydCBjbGFzcyBOaW1ibGVCcmVhZGNydW1iSXRlbVJvdXRlckxpbmtXaXRoSHJlZkRpcmVjdGl2ZSBleHRlbmRzIFJvdXRlckxpbmtXaXRoSHJlZiB7XG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2V0IG5pbWJsZVJvdXRlckxpbmsoY29tbWFuZHM6IG5ldmVyW10gfCBzdHJpbmcgfCBudWxsIHwgdW5kZWZpbmVkKSB7XG4gICAgICAgIHRoaXMucm91dGVyTGluayA9IGNvbW1hbmRzO1xuICAgIH1cblxuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcihpbmplY3RvcjogSW5qZWN0b3IsIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZjogRWxlbWVudFJlZjxCcmVhZGNydW1iSXRlbT4pIHtcbiAgICAgICAgc3VwZXIoaW5qZWN0b3IuZ2V0KFJvdXRlciksIGluamVjdG9yLmdldChBY3RpdmF0ZWRSb3V0ZSksIGluamVjdG9yLmdldChMb2NhdGlvblN0cmF0ZWd5KSk7XG4gICAgfVxuXG4gICAgcHVibGljIG92ZXJyaWRlIG9uQ2xpY2soX2J1dHRvbjogbnVtYmVyLCBfY3RybEtleTogYm9vbGVhbiwgX3NoaWZ0S2V5OiBib29sZWFuLCBfYWx0S2V5OiBib29sZWFuLCBfbWV0YUtleTogYm9vbGVhbik6IGJvb2xlYW4ge1xuICAgICAgICAvLyBvbkNsaWNrIGlzIHRoZSAnY2xpY2snIEBIb3N0TGlzdGVuZXIgaGFuZGxlciBpbiBSb3V0ZXJMaW5rV2l0aEhyZWYuIE92ZXJyaWRlIGl0IHRvIGRvIG5vdGhpbmcgc28gdGhhdCB0aGlzIGRpcmVjdGl2ZVxuICAgICAgICAvLyBjYW4gYmUgaW4gY29udHJvbCBvZiB3aGVuIHRoZSBjbGljayBoYW5kbGVyIGlzIGNhbGxlZC4gVGhpcyBhbGxvd3MgUm91dGVyTGlua1dpdGhIcmVmJ3Mgb25DbGljayB0byBvbmx5IGJlIGNhbGxlZFxuICAgICAgICAvLyB3aGVuIHRoZSBsaW5rIHdpdGhpbiB0aGUgZWxlbWVudCBpcyBjbGlja2VkIHJhdGhlciB0aGFuIGFueSBwYXJ0IG9mIHRoZSBlbGVtZW50LlxuICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKFxuICAgICAgICAnY2xpY2snLFxuICAgICAgICBbJyRldmVudCcsICckZXZlbnQuYnV0dG9uJywgJyRldmVudC5jdHJsS2V5JywgJyRldmVudC5zaGlmdEtleScsICckZXZlbnQuYWx0S2V5JywgJyRldmVudC5tZXRhS2V5J11cbiAgICApXG4gICAgcHVibGljIG5pbWJsZU9uQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpOiBib29sZWFuIHtcbiAgICAgICAgLy8gQ2FsbCBvbkNsaWNrIG9uIHRoZSBiYXNlIGNsYXNzIG9ubHkgd2hlbiB0aGUgYW5jaG9yIHdpdGhpbiB0aGUgYnJlYWRjcnVtYiBpdGVtIHdhcyBjbGlja2VkLlxuICAgICAgICBpZiAoZXZlbnQuY29tcG9zZWRQYXRoKCkuc29tZShlbCA9PiBlbCA9PT0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udHJvbCkpIHtcbiAgICAgICAgICAgIHJldHVybiBzdXBlci5vbkNsaWNrKGV2ZW50LmJ1dHRvbiwgZXZlbnQuY3RybEtleSwgZXZlbnQuc2hpZnRLZXksIGV2ZW50LmFsdEtleSwgZXZlbnQubWV0YUtleSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gdHJ1ZTtcbiAgICB9XG59XG4iXX0=

package/fesm2015/ni-nimble-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, forwardRef, HostListener, Inject, Optional, Host, Injectable, EventEmitter, Output } from '@angular/core';
-import { RouterLinkWithHref } from '@angular/router';
+import { Directive, Input, NgModule, HostListener, forwardRef, Inject, Optional, Host, Injectable, EventEmitter, Output } from '@angular/core';
+import { RouterLinkWithHref, Router, ActivatedRoute } from '@angular/router';
 export { AnchorAppearance } from '@ni/nimble-components/dist/esm/anchor/types';
-import { CommonModule } from '@angular/common';
+import { CommonModule, LocationStrategy } from '@angular/common';
 import '@ni/nimble-components/dist/esm/anchor';
 import '@ni/nimble-components/dist/esm/anchor-button';
 import '@ni/nimble-components/dist/esm/anchor-tab';
@@ -699,17 +699,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * won't also be an active RouterLink directive incorrectly handling navigation.
  */
 class NimbleBreadcrumbItemRouterLinkWithHrefDirective extends RouterLinkWithHref {
+    constructor(injector, elementRef) {
+        super(injector.get(Router), injector.get(ActivatedRoute), injector.get(LocationStrategy));
+        this.elementRef = elementRef;
+    }
     set nimbleRouterLink(commands) {
         this.routerLink = commands;
     }
+    onClick(_button, _ctrlKey, _shiftKey, _altKey, _metaKey) {
+        // onClick is the 'click' @HostListener handler in RouterLinkWithHref. Override it to do nothing so that this directive
+        // can be in control of when the click handler is called. This allows RouterLinkWithHref's onClick to only be called
+        // when the link within the element is clicked rather than any part of the element.
+        return true;
+    }
+    nimbleOnClick(event) {
+        // Call onClick on the base class only when the anchor within the breadcrumb item was clicked.
+        if (event.composedPath().some(el => el === this.elementRef.nativeElement.control)) {
+            return super.onClick(event.button, event.ctrlKey, event.shiftKey, event.altKey, event.metaKey);
+        }
+        return true;
+    }
 }
-NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, selector: "nimble-breadcrumb-item[nimbleRouterLink]", inputs: { nimbleRouterLink: "nimbleRouterLink" }, usesInheritance: true, ngImport: i0 });
+NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+NimbleBreadcrumbItemRouterLinkWithHrefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, selector: "nimble-breadcrumb-item[nimbleRouterLink]", inputs: { nimbleRouterLink: "nimbleRouterLink" }, host: { listeners: { "click": "nimbleOnClick($event,$event.button,$event.ctrlKey,$event.shiftKey,$event.altKey,$event.metaKey)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NimbleBreadcrumbItemRouterLinkWithHrefDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'nimble-breadcrumb-item[nimbleRouterLink]' }]
-        }], propDecorators: { nimbleRouterLink: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { nimbleRouterLink: [{
                 type: Input
+            }], nimbleOnClick: [{
+                type: HostListener,
+                args: ['click',
+                    ['$event', '$event.button', '$event.ctrlKey', '$event.shiftKey', '$event.altKey', '$event.metaKey']]
             }] } });
 
 /**