[CL-319] custom back action in popup header component (#9829)

* expose FunctionReturningAwaitable from CL lib

* expose backAction as input on popup header component

apps/browser/src/platform/popup/layout/popup-header.component.html

@@ -9,7 +9,7 @@
         *ngIf="showBackButton"
         [title]="'back' | i18n"
         [ariaLabel]="'back' | i18n"
-        (click)="back()"
+        [bitAction]="backAction"
       ></button>
       <h1 bitTypography="h3" class="!tw-mb-0.5 tw-text-headers">{{ pageTitle }}</h1>
     </div>

apps/browser/src/platform/popup/layout/popup-header.component.ts

@@ -3,13 +3,18 @@ import { CommonModule, Location } from "@angular/common";
 import { Component, Input } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { IconButtonModule, TypographyModule } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  FunctionReturningAwaitable,
+  IconButtonModule,
+  TypographyModule,
+} from "@bitwarden/components";
 
 @Component({
   selector: "popup-header",
   templateUrl: "popup-header.component.html",
   standalone: true,
-  imports: [TypographyModule, CommonModule, IconButtonModule, JslibModule],
+  imports: [TypographyModule, CommonModule, IconButtonModule, JslibModule, AsyncActionsModule],
 })
 export class PopupHeaderComponent {
   /** Display the back button, which uses Location.back() to go back one page in history */
@@ -26,9 +31,15 @@ export class PopupHeaderComponent {
   /** Title string that will be inserted as an h1 */
   @Input({ required: true }) pageTitle: string;
 
-  constructor(private location: Location) {}
+  /**
-
+   * Async action that occurs when clicking the back button
-  back() {
+   *
+   * If unset, will call `location.back()`
+   **/
+  @Input()
+  backAction: FunctionReturningAwaitable = async () => {
     this.location.back();
-  }
+  };
+
+  constructor(private location: Location) {}
 }

libs/components/src/index.ts

@@ -35,4 +35,4 @@ export * from "./tabs";
 export * from "./toast";
 export * from "./toggle-group";
 export * from "./typography";
-export * from "./utils/i18n-mock.service";
+export * from "./utils";

libs/components/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./function-to-observable";
+export * from "./i18n-mock.service";