[CL-206] update bit-nav components to active match query params (#8242)

* remove exactMatch input in favor of routerLinkActiveOptions

apps/web/src/app/layouts/org-switcher/org-switcher.component.html

@@ -4,8 +4,8 @@
   [ariaLabel]="['organization' | i18n, activeOrganization.name].join(' ')"
   icon="bwi-business"
   [route]="['../', activeOrganization.id]"
+  [routerLinkActiveOptions]="{ exact: true }"
   [(open)]="open"
-  [exactMatch]="true"
 >
   <i
     slot="end"
@@ -21,7 +21,7 @@
       [ariaLabel]="['organization' | i18n, org.name].join(' ')"
       [route]="['../', org.id]"
       (mainContentClicked)="toggle()"
-      [exactMatch]="true"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
       <i
         slot="end"

libs/components/src/navigation/nav-base.component.ts

@@ -1,8 +1,8 @@
 import { Directive, EventEmitter, Input, Output } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { RouterLink, RouterLinkActive } from "@angular/router";
 
 /**
- * Base class used in `NavGroupComponent` and `NavItemComponent`
+ * `NavGroupComponent` builds upon `NavItemComponent`. This class represents the properties that are passed down to `NavItemComponent`.
  */
 @Directive()
 export abstract class NavBaseComponent {
@@ -22,14 +22,36 @@ export abstract class NavBaseComponent {
   @Input() icon: string;
 
   /**
-   * Route to be passed to internal `routerLink`
+   * Optional route to be passed to internal `routerLink`. If not provided, the nav component will render as a button.
+   *
+   * See: {@link RouterLink.routerLink}
+   *
+   * ---
+   *
+   * We can't name this "routerLink" because Angular will mount the `RouterLink` directive.
+   *
+   * See: {@link https://github.com/angular/angular/issues/24482}
    */
-  @Input() route: string | any[];
+  @Input() route?: RouterLink["routerLink"];
 
   /**
    * Passed to internal `routerLink`
+   *
+   * See {@link RouterLink.relativeTo}
    */
-  @Input() relativeTo?: ActivatedRoute | null;
+  @Input() relativeTo?: RouterLink["relativeTo"];
+
+  /**
+   * Passed to internal `routerLink`
+   *
+   * See {@link RouterLinkActive.routerLinkActiveOptions}
+   */
+  @Input() routerLinkActiveOptions?: RouterLinkActive["routerLinkActiveOptions"] = {
+    paths: "subset",
+    queryParams: "ignored",
+    fragment: "ignored",
+    matrixParams: "ignored",
+  };
 
   /**
    * If this item is used within a tree, set `variant` to `"tree"`

libs/components/src/navigation/nav-group.component.html

@@ -4,12 +4,12 @@
   [icon]="icon"
   [route]="route"
   [relativeTo]="relativeTo"
+  [routerLinkActiveOptions]="routerLinkActiveOptions"
   [variant]="variant"
   (mainContentClicked)="toggle()"
   [treeDepth]="treeDepth"
   (mainContentClicked)="mainContentClicked.emit()"
   [ariaLabel]="ariaLabel"
-  [exactMatch]="exactMatch"
   [hideActiveStyles]="parentHideActiveStyles"
 >
   <ng-template #button>

libs/components/src/navigation/nav-group.component.ts

@@ -39,11 +39,6 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
   @Input()
   open = false;
 
-  /**
-   * if `true`, use `exact` match for path instead of `subset`.
-   */
-  @Input() exactMatch: boolean;
-
   @Output()
   openChange = new EventEmitter<boolean>();
 

libs/components/src/navigation/nav-item.component.html

@@ -54,7 +54,7 @@
         [relativeTo]="relativeTo"
         [attr.aria-label]="ariaLabel || text"
         routerLinkActive
-        [routerLinkActiveOptions]="rlaOptions"
+        [routerLinkActiveOptions]="routerLinkActiveOptions"
         [ariaCurrentWhenActive]="'page'"
         (isActiveChange)="setIsActive($event)"
         (click)="mainContentClicked.emit()"

libs/components/src/navigation/nav-item.component.ts

@@ -1,5 +1,4 @@
-import { Component, HostListener, Input, Optional } from "@angular/core";
+import { Component, HostListener, Optional } from "@angular/core";
-import { IsActiveMatchOptions } from "@angular/router";
 import { BehaviorSubject, map } from "rxjs";
 
 import { NavBaseComponent } from "./nav-base.component";
@@ -24,19 +23,6 @@ export class NavItemComponent extends NavBaseComponent {
   protected get showActiveStyles() {
     return this._isActive && !this.hideActiveStyles;
   }
-  protected rlaOptions: IsActiveMatchOptions = {
-    paths: "subset",
-    queryParams: "exact",
-    fragment: "ignored",
-    matrixParams: "ignored",
-  };
-
-  /**
-   * if `true`, use `exact` match for path instead of `subset`.
-   */
-  @Input() set exactMatch(val: boolean) {
-    this.rlaOptions.paths = val ? "exact" : "subset";
-  }
 
   /**
    * The design spec calls for the an outline to wrap the entire element when the template's anchor/button has :focus-visible.