[PM-15535] User with Edit* permission can permanently delete item from more actions menu on extension (#12234)

* Added conditional to check if a cipher can be delete by user

* Added change detection on push

* Added directive to check if user can delete a cipher

* Added directive to check if user can delete a cipher

* Replaced check with directive

* removed takeUntilDestroyed

libs/vault/src/components/can-delete-cipher.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, Input, OnDestroy, TemplateRef, ViewContainerRef } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";
+
+import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
+import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
+
+/**
+ * Only shows the element if the user can delete the cipher.
+ */
+@Directive({
+  selector: "[appCanDeleteCipher]",
+  standalone: true,
+})
+export class CanDeleteCipherDirective implements OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  @Input("appCanDeleteCipher") set cipher(cipher: CipherView) {
+    this.viewContainer.clear();
+
+    this.cipherAuthorizationService
+      .canDeleteCipher$(cipher)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((canDelete: boolean) => {
+        if (canDelete) {
+          this.viewContainer.createEmbeddedView(this.templateRef);
+        } else {
+          this.viewContainer.clear();
+        }
+      });
+  }
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private cipherAuthorizationService: CipherAuthorizationService,
+  ) {}
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

libs/vault/src/index.ts

@@ -2,6 +2,7 @@ export { PasswordRepromptService } from "./services/password-reprompt.service";
 export { CopyCipherFieldService, CopyAction } from "./services/copy-cipher-field.service";
 export { CopyCipherFieldDirective } from "./components/copy-cipher-field.directive";
 export { OrgIconDirective } from "./components/org-icon.directive";
+export { CanDeleteCipherDirective } from "./components/can-delete-cipher.directive";
 
 export * from "./cipher-view";
 export * from "./cipher-form";