add new-cipher-menu component (#15467)

* add new-cipher-menu component

* move new cipher menu to vault. clean up template

libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html

@@ -0,0 +1,37 @@
+<ng-container *ngIf="canCreateCipher || canCreateCollection || canCreateFolder">
+  <div>
+    <button
+      bitButton
+      buttonType="primary"
+      type="button"
+      [bitMenuTriggerFor]="addOptions"
+      id="newItemDropdown"
+      [appA11yTitle]="'new' | i18n"
+    >
+      <i class="bwi bwi-plus" aria-hidden="true"></i>
+      {{ "new" | i18n }}
+    </button>
+    <bit-menu #addOptions aria-labelledby="newItemDropdown">
+      @for (item of cipherMenuItems$ | async; track item.type) {
+        <button type="button" bitMenuItem (click)="cipherAdded.emit(item.type)">
+          <i class="bwi {{ item.icon }}" slot="start" aria-hidden="true"></i>
+          {{ item.labelKey | i18n }}
+        </button>
+      }
+      <bit-menu-divider *ngIf="canCreateCipher"></bit-menu-divider>
+      <button *ngIf="canCreateFolder" type="button" bitMenuItem (click)="folderAdded.emit()">
+        <i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
+        {{ "folder" | i18n }}
+      </button>
+      <button
+        *ngIf="canCreateCollection"
+        type="button"
+        bitMenuItem
+        (click)="collectionAdded.emit()"
+      >
+        <i class="bwi bwi-fw bwi-collection-shared" aria-hidden="true"></i>
+        {{ "collection" | i18n }}
+      </button>
+    </bit-menu>
+  </div>
+</ng-container>

libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from "@angular/common";
+import { Component, input, output } from "@angular/core";
+import { map, shareReplay } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
+import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
+import { ButtonModule, MenuModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+@Component({
+  selector: "vault-new-cipher-menu",
+  templateUrl: "new-cipher-menu.component.html",
+  imports: [ButtonModule, CommonModule, MenuModule, I18nPipe, JslibModule],
+})
+export class NewCipherMenuComponent {
+  canCreateCipher = input(false);
+  canCreateFolder = input(false);
+  canCreateCollection = input(false);
+  folderAdded = output();
+  collectionAdded = output();
+  cipherAdded = output<CipherType>();
+
+  constructor(private restrictedItemTypesService: RestrictedItemTypesService) {}
+
+  /**
+   * Returns an observable that emits the cipher menu items, filtered by the restricted types.
+   */
+  cipherMenuItems$ = this.restrictedItemTypesService.restricted$.pipe(
+    map((restrictedTypes) => {
+      return CIPHER_MENU_ITEMS.filter((item) => {
+        return !restrictedTypes.some((restrictedType) => restrictedType.cipherType === item.type);
+      });
+    }),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+}

libs/vault/src/index.ts

@@ -19,6 +19,7 @@ export { DecryptionFailureDialogComponent } from "./components/decryption-failur
 export { openPasswordHistoryDialog } from "./components/password-history/password-history.component";
 export * from "./components/add-edit-folder-dialog/add-edit-folder-dialog.component";
 export * from "./components/carousel";
+export * from "./components/new-cipher-menu/new-cipher-menu.component";
 
 export * as VaultIcons from "./icons";