[PM-17031] Create UI-common (#12831)

Extract core functionality from `libs/angular` to allow teams to depend on `libs/ui-common` instead.

Moves the following functionality to `ui-common`.
- `I18nPipe`. `libs/angular` still has an old copy but `components` depends on the new variant from `ui-common`.
- `safeProvider`, `SafeProvider` and `SafeInjectionToken`. `libs/angular`re-exports these to avoid needing to update all consumers.

libs/components/src/badge-list/badge-list.component.ts

@@ -3,8 +3,9 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnChanges } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { BadgeModule, BadgeVariant } from "../badge";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 @Component({
   selector: "bit-badge-list",

libs/components/src/banner/banner.component.ts

@@ -3,8 +3,9 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { IconButtonModule } from "../icon-button";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 type BannerTypes = "premium" | "info" | "warning" | "danger";
 

libs/components/src/dialog/dialog/dialog.component.ts

@@ -4,8 +4,9 @@ import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
 import { Component, HostBinding, Input } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { BitIconButtonComponent } from "../../icon-button/icon-button.component";
-import { I18nPipe } from "../../shared/i18n.pipe";
 import { TypographyDirective } from "../../typography/typography.directive";
 import { fadeIn } from "../animations";
 import { DialogCloseDirective } from "../directives/dialog-close.directive";

libs/components/src/form-control/form-control.component.ts

@@ -5,8 +5,8 @@ import { NgClass, NgIf } from "@angular/common";
 import { Component, ContentChild, HostBinding, Input } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { I18nPipe } from "@bitwarden/ui-common";
 
-import { I18nPipe } from "../shared/i18n.pipe";
 import { TypographyDirective } from "../typography/typography.directive";
 
 import { BitFormControlAbstraction } from "./form-control.abstraction";

libs/components/src/form-field/error-summary.component.ts

@@ -4,7 +4,7 @@ import { NgIf } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { AbstractControl, UntypedFormGroup } from "@angular/forms";
 
-import { I18nPipe } from "../shared/i18n.pipe";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
   selector: "bit-error-summary",

libs/components/src/form-field/form-field.component.ts

@@ -14,10 +14,11 @@ import {
   signal,
 } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { BitHintComponent } from "../form-control/hint.component";
 import { BitLabel } from "../form-control/label.component";
 import { inputBorderClasses } from "../input/input.directive";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldControl } from "./form-field-control";

libs/components/src/multi-select/multi-select.component.ts

@@ -24,10 +24,10 @@ import {
 import { NgSelectComponent, NgSelectModule } from "@ng-select/ng-select";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { BadgeModule } from "../badge";
 import { BitFormFieldControl } from "../form-field/form-field-control";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 import { SelectItemView } from "./models/select-item-view";
 

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

@@ -12,8 +12,9 @@ import {
   SkipSelf,
 } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { IconButtonModule } from "../icon-button";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 import { NavBaseComponent } from "./nav-base.component";
 import { NavGroupAbstraction, NavItemComponent } from "./nav-item.component";

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

@@ -4,8 +4,9 @@ import { CdkTrapFocus } from "@angular/cdk/a11y";
 import { CommonModule } from "@angular/common";
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { BitIconButtonComponent } from "../icon-button/icon-button.component";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 import { NavDividerComponent } from "./nav-divider.component";
 import { SideNavService } from "./side-nav.service";

libs/components/src/radio-button/radio-group.component.ts

@@ -4,8 +4,9 @@ import { NgIf, NgTemplateOutlet } from "@angular/common";
 import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
+import { I18nPipe } from "@bitwarden/ui-common";
+
 import { BitLabel } from "../form-control/label.component";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 let nextId = 0;
 

libs/components/src/search/search.component.ts

@@ -9,10 +9,10 @@ import {
 } from "@angular/forms";
 
 import { isBrowserSafariApi } from "@bitwarden/platform";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { InputModule } from "../input/input.module";
 import { FocusableElement } from "../shared/focusable-element";
-import { I18nPipe } from "../shared/i18n.pipe";
 
 let nextId = 0;
 

libs/components/src/shared/i18n.pipe.ts

@@ -1,18 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-
-/**
- * Temporarily duplicate this pipe
- */
-@Pipe({
-  name: "i18n",
-  standalone: true,
-})
-export class I18nPipe implements PipeTransform {
-  constructor(private i18nService: I18nService) {}
-
-  transform(id: string, p1?: string, p2?: string, p3?: string): string {
-    return this.i18nService.t(id, p1, p2, p3);
-  }
-}

libs/components/src/shared/shared.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { I18nPipe } from "./i18n.pipe";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 @NgModule({
   imports: [CommonModule, I18nPipe],