Remove duplicate badge component and org name pipe

libs/vault/src/components/organization-name-badge/organization-name-badge.component.html

@@ -0,0 +1,13 @@
+<button
+  bitBadge
+  type="button"
+  [disabled]="disabled"
+  [style.color]="textColor"
+  [style.background-color]="color"
+  appA11yTitle="{{ organizationName }}"
+  routerLink
+  [queryParams]="{ organizationId: organizationIdLink }"
+  queryParamsHandling="merge"
+>
+  {{ name | ellipsis: 13 }}
+</button>

libs/vault/src/components/organization-name-badge/organization-name-badge.component.ts

@@ -0,0 +1,74 @@
+// FIXME: Update this file to be type safe and remove this and next line
+// @ts-strict-ignore
+import { Component, Input, OnChanges } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { Unassigned } from "@bitwarden/common/admin-console/models/collections";
+import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service";
+import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { BadgeModule } from "@bitwarden/components";
+import { OrganizationId } from "@bitwarden/sdk-internal";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "app-org-badge",
+  templateUrl: "organization-name-badge.component.html",
+  imports: [RouterModule, JslibModule, BadgeModule],
+})
+export class OrganizationNameBadgeComponent implements OnChanges {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() organizationId?: OrganizationId | string;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() organizationName: string;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() disabled: boolean;
+
+  // Need a separate variable or we get weird behavior when used as part of cdk virtual scrolling
+  name: string;
+  color: string;
+  textColor: string;
+  isMe: boolean;
+
+  constructor(
+    private i18nService: I18nService,
+    private avatarService: AvatarService,
+    private tokenService: TokenService,
+  ) {}
+
+  // ngOnChanges is required since this component might be reused as part of
+  // cdk virtual scrolling
+  async ngOnChanges() {
+    this.isMe = this.organizationName == null || this.organizationName === "";
+
+    if (this.isMe) {
+      this.name = this.i18nService.t("me");
+      this.color = await firstValueFrom(this.avatarService.avatarColor$);
+      if (this.color == null) {
+        const userId = await this.tokenService.getUserId();
+        if (userId != null) {
+          this.color = Utils.stringToColor(userId);
+        } else {
+          const userName =
+            (await this.tokenService.getName()) ?? (await this.tokenService.getEmail());
+          this.color = Utils.stringToColor(userName.toUpperCase());
+        }
+      }
+    } else {
+      this.name = this.organizationName;
+      this.color = Utils.stringToColor(this.organizationName.toUpperCase());
+    }
+    this.textColor = Utils.pickTextColorBasedOnBgColor(this.color, 135, true) + "!important";
+  }
+
+  get organizationIdLink() {
+    return this.organizationId ?? Unassigned;
+  }
+}

libs/vault/src/index.ts

@@ -33,6 +33,7 @@ export * from "./components/permit-cipher-details-popover/permit-cipher-details-
 export * from "./components/vault-items-transfer";
 export { VaultItem } from "./components/vault-item";
 export { VaultItemEvent } from "./components/vault-item-event";
+export * from "./components/organization-name-badge/organization-name-badge.component";
 
 export { DefaultSshImportPromptService } from "./services/default-ssh-import-prompt.service";
 export { SshImportPromptService } from "./services/ssh-import-prompt.service";

libs/vault/src/pipes/get-organization-name.pipe.ts

@@ -6,7 +6,6 @@ import { OrganizationId } from "@bitwarden/sdk-internal";
 @Pipe({
   name: "orgNameFromId",
   pure: true,
-  standalone: false,
 })
 export class GetOrgNameFromIdPipe implements PipeTransform {
   transform(value: string | OrganizationId, organizations: Organization[]) {