[CL-324] migrate app-callout internals to bit-callout (#9925)

libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html

@@ -141,7 +141,7 @@
   </ng-container>
   <!-- Account Credit -->
   <ng-container *ngIf="showAccountCredit && usingAccountCredit">
-    <app-callout type="note">
+    <app-callout type="info">
       {{ "makeSureEnoughCredit" | i18n }}
     </app-callout>
   </ng-container>

libs/angular/src/components/callout.component.html

@@ -1,14 +1,5 @@
-<div
-  #callout
-  class="callout callout-{{ calloutStyle }}"
-  [ngClass]="{ clickable: clickable }"
-  [attr.role]="useAlertRole ? 'alert' : null"
->
-  <h3 class="callout-heading" *ngIf="title">
-    <i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
-    {{ title }}
-  </h3>
-  <div class="enforced-policy-options" *ngIf="enforcedPolicyOptions">
+<bit-callout [icon]="icon" [title]="title" [type]="$any(type)" [useAlertRole]="useAlertRole">
+  <div class="tw-pl-7 tw-m-0" *ngIf="enforcedPolicyOptions">
     {{ enforcedPolicyMessage }}
     <ul>
       <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
@@ -32,4 +23,4 @@
     </ul>
   </div>
   <ng-content></ng-content>
-</div>
+</bit-callout>

libs/angular/src/components/callout.component.ts

@@ -2,16 +2,19 @@ import { Component, Input, OnInit } from "@angular/core";
 
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CalloutTypes } from "@bitwarden/components";
 
+/**
+ * @deprecated use the CL's `CalloutComponent` instead
+ */
 @Component({
   selector: "app-callout",
   templateUrl: "callout.component.html",
 })
-export class CalloutComponent implements OnInit {
-  @Input() type = "info";
+export class DeprecatedCalloutComponent implements OnInit {
+  @Input() type: CalloutTypes = "info";
   @Input() icon: string;
   @Input() title: string;
-  @Input() clickable: boolean;
   @Input() enforcedPolicyOptions: MasterPasswordPolicyOptions;
   @Input() enforcedPolicyMessage: string;
   @Input() useAlertRole = false;
@@ -26,34 +29,6 @@ export class CalloutComponent implements OnInit {
     if (this.enforcedPolicyMessage === undefined) {
       this.enforcedPolicyMessage = this.i18nService.t("masterPasswordPolicyInEffect");
     }
-
-    if (this.type === "warning" || this.type === "danger") {
-      if (this.type === "danger") {
-        this.calloutStyle = "danger";
-      }
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("warning");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-exclamation-triangle";
-      }
-    } else if (this.type === "error") {
-      this.calloutStyle = "danger";
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("error");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-error";
-      }
-    } else if (this.type === "tip") {
-      this.calloutStyle = "success";
-      if (this.title === undefined) {
-        this.title = this.i18nService.t("tip");
-      }
-      if (this.icon === undefined) {
-        this.icon = "bwi-lightbulb";
-      }
-    }
   }
 
   getPasswordScoreAlertDisplay() {

libs/angular/src/jslib.module.ts

@@ -14,6 +14,7 @@ import {
   AsyncActionsModule,
   AutofocusDirective,
   ButtonModule,
+  CalloutModule,
   CheckboxModule,
   DialogModule,
   FormFieldModule,
@@ -29,7 +30,7 @@ import {
 } from "@bitwarden/components";
 
 import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
-import { CalloutComponent } from "./components/callout.component";
+import { DeprecatedCalloutComponent } from "./components/callout.component";
 import { A11yInvalidDirective } from "./directives/a11y-invalid.directive";
 import { A11yTitleDirective } from "./directives/a11y-title.directive";
 import { ApiActionDirective } from "./directives/api-action.directive";
@@ -72,6 +73,7 @@ import { IconComponent } from "./vault/components/icon.component";
     FormFieldModule,
     SelectModule,
     ButtonModule,
+    CalloutModule,
     CheckboxModule,
     DialogModule,
     TypographyModule,
@@ -88,7 +90,7 @@ import { IconComponent } from "./vault/components/icon.component";
     ApiActionDirective,
     AutofocusDirective,
     BoxRowDirective,
-    CalloutComponent,
+    DeprecatedCalloutComponent,
     CopyTextDirective,
     CreditCardNumberPipe,
     EllipsisPipe,
@@ -125,7 +127,7 @@ import { IconComponent } from "./vault/components/icon.component";
     AutofocusDirective,
     ToastModule,
     BoxRowDirective,
-    CalloutComponent,
+    DeprecatedCalloutComponent,
     CopyTextDirective,
     CreditCardNumberPipe,
     EllipsisPipe,