[PM-6967] Replace app-callouts with bit-callouts on desktop (#8415)

* Enable usage of the bit-callout within desktop

Adding this should be temporary, with the vision being: All components are standalone and they'd depend/import the CalloutModule themselves if they need it

* Replace vaultTimeoutPolicy callout in settings

* Replace OwnershipPolicy callout in add-edit cipher

* Replace vaultExportDisabled policy callout in export

* Replace generator policy callout in generator

* Replace policy callouts in add/edit Sends

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/desktop/src/app/accounts/settings.component.html

@@ -30,7 +30,7 @@
               </button>
             </h2>
             <ng-container *ngIf="showSecurity">
-              <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
+              <bit-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
                 <span *ngIf="policy.timeout && policy.action">
                   {{
                     "vaultTimeoutPolicyWithActionInEffect"
@@ -46,7 +46,7 @@
                 <span *ngIf="!policy.timeout && policy.action">
                   {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
                 </span>
-              </app-callout>
+              </bit-callout>
               <app-vault-timeout-input
                 [vaultTimeoutOptions]="vaultTimeoutOptions"
                 [formControl]="form.controls.vaultTimeout"

apps/desktop/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { NgModule } from "@angular/core";
 
 import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
 import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
-import { DialogModule } from "@bitwarden/components";
+import { DialogModule, CalloutModule } from "@bitwarden/components";
 import { ExportScopeCalloutComponent } from "@bitwarden/vault-export-ui";
 
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
@@ -60,6 +60,7 @@ import { SendComponent } from "./tools/send/send.component";
     VaultFilterModule,
     LoginModule,
     DialogModule,
+    CalloutModule,
     DeleteAccountComponent,
     UserVerificationComponent,
     ExportScopeCalloutComponent,

apps/desktop/src/app/tools/export/export.component.html

@@ -2,13 +2,13 @@
   <div class="modal-dialog" role="document">
     <form class="modal-content" #form (ngSubmit)="submit()" [formGroup]="exportForm">
       <div class="modal-body">
-        <app-callout
+        <bit-callout
           type="warning"
           title="{{ 'vaultExportDisabled' | i18n }}"
           *ngIf="disabledByPolicy"
         >
           {{ "personalVaultExportPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
         <tools-export-scope-callout *ngIf="!disabledByPolicy"></tools-export-scope-callout>
         <div class="box">
           <h1 class="box-header" id="exportTitle">

apps/desktop/src/app/tools/generator.component.html

@@ -5,12 +5,12 @@
         <h1 class="modal-title" id="generatorTitle">
           {{ "generator" | i18n }}
         </h1>
-        <app-callout
+        <bit-callout
           type="info"
           *ngIf="enforcedPasswordPolicyOptions?.inEffect() && type === 'password'"
         >
           {{ "passwordGeneratorPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
         <div class="generated-block" *ngIf="type === 'password'">
           <div
             class="generated-wrapper"

apps/desktop/src/app/tools/send/add-edit.component.html

@@ -2,12 +2,12 @@
   <div class="content">
     <div class="inner-content" *ngIf="send">
       <div class="box">
-        <app-callout *ngIf="disableSend">
+        <bit-callout *ngIf="disableSend">
           <span>{{ "sendDisabledWarning" | i18n }}</span>
-        </app-callout>
-        <app-callout type="info" *ngIf="disableHideEmail && !disableSend">
+        </bit-callout>
+        <bit-callout type="info" *ngIf="disableHideEmail && !disableSend">
           {{ "sendOptionsPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
       </div>
       <div class="box">
         <h2 class="box-header">

apps/desktop/src/vault/app/vault/add-edit.component.html

@@ -2,9 +2,9 @@
   <div class="content">
     <div class="inner-content" *ngIf="cipher">
       <div class="box">
-        <app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
+        <bit-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
           {{ "personalOwnershipPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
         <h2 class="box-header">
           {{ title }}
         </h2>