From aaf8b3e2b190b6bd7486850210acb0ac34414cc9 Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:18:16 -0500
Subject: [PATCH] [PM-9921] Add Popout to Add/Edit/View components (#10382)

* add popout component to add/edit component

* add popout component to view cipher components

* fix formatting
---
 .../components/vault-v2/add-edit/add-edit-v2.component.html   | 4 +++-
 .../components/vault-v2/add-edit/add-edit-v2.component.ts     | 2 ++
 .../popup/components/vault-v2/view-v2/view-v2.component.html  | 4 +++-
 .../popup/components/vault-v2/view-v2/view-v2.component.ts    | 2 ++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html
index 863b5e8dc3..a46f5a6955 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.html
@@ -4,7 +4,9 @@
     [pageTitle]="headerText"
     [backAction]="handleBackButton.bind(this)"
     showBackButton
-  ></popup-header>
+  >
+    <app-pop-out slot="end" />
+  </popup-header>
 
   <vault-cipher-form
     *ngIf="!loading"
diff --git a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
index d819440047..cae324fac1 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts
@@ -21,6 +21,7 @@ import {
 } from "@bitwarden/vault";
 
 import BrowserPopupUtils from "../../../../../platform/popup/browser-popup-utils";
+import { PopOutComponent } from "../../../../../platform/popup/components/pop-out.component";
 import { PopupFooterComponent } from "../../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../../platform/popup/layout/popup-page.component";
@@ -118,6 +119,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     PopupFooterComponent,
     CipherFormModule,
     AsyncActionsModule,
+    PopOutComponent,
   ],
 })
 export class AddEditV2Component implements OnInit {
diff --git a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html
index 00a9d3f948..6840924fb0 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.html
@@ -1,5 +1,7 @@
 <popup-page>
-  <popup-header slot="header" [pageTitle]="headerText" showBackButton> </popup-header>
+  <popup-header slot="header" [pageTitle]="headerText" showBackButton>
+    <app-pop-out slot="end" />
+  </popup-header>
 
   <app-cipher-view *ngIf="cipher" [cipher]="cipher"></app-cipher-view>
 
diff --git a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
index bacb90f043..add2efed96 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/view-v2/view-v2.component.ts
@@ -24,6 +24,7 @@ import {
 } from "@bitwarden/components";
 
 import { CipherViewComponent } from "../../../../../../../../libs/vault/src/cipher-view";
+import { PopOutComponent } from "../../../../../platform/popup/components/pop-out.component";
 
 import { PopupFooterComponent } from "./../../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "./../../../../../platform/popup/layout/popup-header.component";
@@ -45,6 +46,7 @@ import { PopupPageComponent } from "./../../../../../platform/popup/layout/popup
     IconButtonModule,
     CipherViewComponent,
     AsyncActionsModule,
+    PopOutComponent,
   ],
 })
 export class ViewV2Component {