[PM-5820] Upgrade angular to 16 (#7638)

Upgrade Angular and related dependencies to v16.

bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html

@@ -4,21 +4,41 @@
   </a>
 
   <org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
-  <bit-nav-item icon="bwi-collection" [text]="'projects' | i18n" route="projects"></bit-nav-item>
+  <bit-nav-item
-  <bit-nav-item icon="bwi-key" [text]="'secrets' | i18n" route="secrets"></bit-nav-item>
+    icon="bwi-collection"
+    [text]="'projects' | i18n"
+    route="projects"
+    [relativeTo]="route.parent"
+  ></bit-nav-item>
+  <bit-nav-item
+    icon="bwi-key"
+    [text]="'secrets' | i18n"
+    route="secrets"
+    [relativeTo]="route.parent"
+  ></bit-nav-item>
   <bit-nav-item
     icon="bwi-wrench"
     [text]="'serviceAccounts' | i18n"
     route="service-accounts"
+    [relativeTo]="route.parent"
   ></bit-nav-item>
   <bit-nav-item
     icon="bwi-trash"
     [text]="'trash' | i18n"
     route="trash"
+    [relativeTo]="route.parent"
     *ngIf="isAdmin$ | async"
   ></bit-nav-item>
   <bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" *ngIf="isAdmin$ | async">
-    <bit-nav-item [text]="'importData' | i18n" route="settings/import"></bit-nav-item>
+    <bit-nav-item
-    <bit-nav-item [text]="'exportData' | i18n" route="settings/export"></bit-nav-item>
+      [text]="'importData' | i18n"
+      route="settings/import"
+      [relativeTo]="route.parent"
+    ></bit-nav-item>
+    <bit-nav-item
+      [text]="'exportData' | i18n"
+      route="settings/export"
+      [relativeTo]="route.parent"
+    ></bit-nav-item>
   </bit-nav-group>
 </nav>

bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.ts

@@ -18,7 +18,7 @@ export class NavigationComponent {
   );
 
   constructor(
-    private route: ActivatedRoute,
+    protected route: ActivatedRoute,
     private organizationService: OrganizationService,
   ) {}
 }

libs/components/src/dialog/directives/dialog-title-container.directive.ts

@@ -23,8 +23,8 @@ export class DialogTitleContainerDirective implements OnInit {
       Promise.resolve().then(() => {
         const container = this.dialogRef.containerInstance as CdkDialogContainer;
 
-        if (container && !container._ariaLabelledBy) {
+        if (container && container._ariaLabelledByQueue.length === 0) {
-          container._ariaLabelledBy = this.id;
+          container._ariaLabelledByQueue.push(this.id);
         }
       });
     }

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

@@ -1,4 +1,5 @@
 import { Directive, EventEmitter, Input, Output } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 
 /**
  * Base class used in `NavGroupComponent` and `NavItemComponent`
@@ -25,6 +26,11 @@ export abstract class NavBaseComponent {
    */
   @Input() route: string | any[];
 
+  /**
+   * Passed to internal `routerLink`
+   */
+  @Input() relativeTo?: ActivatedRoute | null;
+
   /**
    * If this item is used within a tree, set `variant` to `"tree"`
    */

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

@@ -3,6 +3,7 @@
   [text]="text"
   [icon]="icon"
   [route]="route"
+  [relativeTo]="relativeTo"
   [variant]="variant"
   (mainContentClicked)="toggle()"
   [treeDepth]="treeDepth"

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

@@ -51,6 +51,7 @@
       <a
         class="fvw tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&>:not(.bwi)]:hover:tw-underline"
         [routerLink]="route"
+        [relativeTo]="relativeTo"
         [attr.aria-label]="ariaLabel || text"
         routerLinkActive
         [routerLinkActiveOptions]="rlaOptions"

package.json

@@ -34,24 +34,24 @@
     "libs/*"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.10",
+    "@angular-devkit/build-angular": "16.2.11",
-    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/template-parser": "15.2.1",
+    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "15.2.10",
+    "@angular/cli": "16.2.11",
-    "@angular/compiler-cli": "15.2.10",
+    "@angular/compiler-cli": "16.2.12",
-    "@angular/elements": "15.2.10",
+    "@angular/elements": "16.2.12",
     "@compodoc/compodoc": "1.1.23",
     "@electron/notarize": "2.2.1",
     "@electron/rebuild": "3.6.0",
-    "@ngtools/webpack": "15.2.10",
+    "@ngtools/webpack": "16.2.11",
     "@storybook/addon-a11y": "7.6.4",
     "@storybook/addon-actions": "7.6.4",
     "@storybook/addon-designs": "7.0.7",
     "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
     "@storybook/addon-links": "7.6.4",
     "@storybook/angular": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
     "@storybook/jest": "0.2.3",
     "@storybook/testing-library": "0.2.2",
     "@types/argon2-browser": "1.18.1",
@@ -149,20 +149,20 @@
     "webpack-node-externals": "3.0.0"
   },
   "dependencies": {
-    "@angular/animations": "15.2.10",
+    "@angular/animations": "16.2.12",
-    "@angular/cdk": "15.2.9",
+    "@angular/cdk": "16.2.13",
-    "@angular/common": "15.2.10",
+    "@angular/common": "16.2.12",
-    "@angular/compiler": "15.2.10",
+    "@angular/compiler": "16.2.12",
-    "@angular/core": "15.2.10",
+    "@angular/core": "16.2.12",
-    "@angular/forms": "15.2.10",
+    "@angular/forms": "16.2.12",
-    "@angular/platform-browser": "15.2.10",
+    "@angular/platform-browser": "16.2.12",
-    "@angular/platform-browser-dynamic": "15.2.10",
+    "@angular/platform-browser-dynamic": "16.2.12",
-    "@angular/router": "15.2.10",
+    "@angular/router": "16.2.12",
     "@koa/multer": "3.0.2",
     "@koa/router": "12.0.1",
     "@microsoft/signalr": "8.0.0",
     "@microsoft/signalr-protocol-msgpack": "8.0.0",
-    "@ng-select/ng-select": "10.0.4",
+    "@ng-select/ng-select": "11.2.0",
     "argon2": "0.31.0",
     "argon2-browser": "1.18.0",
     "big-integer": "1.6.51",
@@ -186,8 +186,8 @@
     "lowdb": "1.0.0",
     "lunr": "2.3.9",
     "multer": "1.4.5-lts.1",
-    "ngx-infinite-scroll": "15.0.0",
+    "ngx-infinite-scroll": "16.0.0",
-    "ngx-toastr": "16.2.0",
+    "ngx-toastr": "17.0.2",
     "node-fetch": "2.6.12",
     "node-forge": "1.3.1",
     "nord": "0.2.1",
@@ -203,13 +203,13 @@
     "tabbable": "6.2.0",
     "tldts": "6.1.8",
     "utf-8-validate": "6.0.3",
-    "zone.js": "0.12.0",
+    "zone.js": "0.13.3",
     "zxcvbn": "4.4.2"
   },
   "overrides": {
     "tailwindcss": "$tailwindcss",
     "@storybook/angular": {
-      "zone.js": "0.12.0"
+      "zone.js": "$zone.js"
     },
     "replacestream": "4.0.3"
   },