Allow for the web generation dialog to disable the margin of the tools generation components (#11565)

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html

@@ -6,6 +6,7 @@
     <vault-cipher-form-generator
       [type]="params.type"
       (valueGenerated)="onValueGenerated($event)"
+      disableMargin
     ></vault-cipher-form-generator>
   </ng-container>
   <ng-container bitDialogFooter>

libs/tools/generator/components/src/passphrase-settings.component.html

@@ -1,4 +1,4 @@
-<bit-section>
+<bit-section [disableMargin]="disableMargin">
   <bit-section-header *ngIf="showHeader">
     <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
   </bit-section-header>

libs/tools/generator/components/src/passphrase-settings.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { BehaviorSubject, skip, takeUntil, Subject } from "rxjs";
@@ -47,6 +48,9 @@ export class PassphraseSettingsComponent implements OnInit, OnDestroy {
   @Input()
   showHeader: boolean = true;
 
+  /** Removes bottom margin from `bit-section` */
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+
   /** Emits settings updates and completes if the settings become unavailable.
    * @remarks this does not emit the initial settings. If you would like
    *   to receive live settings updates including the initial update,

libs/tools/generator/components/src/password-generator.component.html

@@ -32,6 +32,7 @@
   class="tw-mt-6"
   *ngIf="(algorithm$ | async)?.id === 'password'"
   [userId]="this.userId$ | async"
+  [disableMargin]="disableMargin"
   (onUpdated)="generate$.next()"
 />
 <tools-passphrase-settings
@@ -39,4 +40,5 @@
   *ngIf="(algorithm$ | async)?.id === 'passphrase'"
   [userId]="this.userId$ | async"
   (onUpdated)="generate$.next()"
+  [disableMargin]="disableMargin"
 />

libs/tools/generator/components/src/password-generator.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
 import {
   BehaviorSubject,
@@ -45,6 +46,9 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   @Input()
   userId: UserId | null;
 
+  /** Removes bottom margin, passed to downstream components */
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+
   /** tracks the currently selected credential type */
   protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>(null);
 

libs/tools/generator/components/src/password-settings.component.html

@@ -1,4 +1,4 @@
-<bit-section>
+<bit-section [disableMargin]="disableMargin">
   <bit-section-header *ngIf="showHeader">
     <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
   </bit-section-header>

libs/tools/generator/components/src/password-settings.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { BehaviorSubject, takeUntil, Subject, map, filter, tap, debounceTime, skip } from "rxjs";
@@ -55,6 +56,9 @@ export class PasswordSettingsComponent implements OnInit, OnDestroy {
   @Input()
   waitMs: number = 100;
 
+  /** Removes bottom margin from `bit-section` */
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+
   /** Emits settings updates and completes if the settings become unavailable.
    * @remarks this does not emit the initial settings. If you would like
    *   to receive live settings updates including the initial update,

libs/tools/generator/components/src/username-generator.component.html

@@ -17,11 +17,11 @@
     </button>
   </div>
 </bit-card>
-<bit-section>
+<bit-section [disableMargin]="disableMargin">
   <bit-section-header>
     <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
   </bit-section-header>
-  <div class="tw-mb-4">
+  <div [ngClass]="{ 'tw-mb-4': !disableMargin }">
     <bit-card>
       <form class="box" [formGroup]="credential" class="tw-container">
         <bit-form-field>

libs/tools/generator/components/src/username-generator.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import {
@@ -57,6 +58,9 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
   @Output()
   readonly onGenerated = new EventEmitter<GeneratedCredential>();
 
+  /** Removes bottom margin from internal elements */
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+
   /** Tracks the selected generation algorithm */
   protected credential = this.formBuilder.group({
     type: [null as CredentialAlgorithm],

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.html

@@ -1,8 +1,10 @@
 <tools-password-generator
   *ngIf="type === 'password'"
+  [disableMargin]="disableMargin"
   (onGenerated)="onCredentialGenerated($event)"
 ></tools-password-generator>
 <tools-username-generator
   *ngIf="type === 'username'"
+  [disableMargin]="disableMargin"
   (onGenerated)="onCredentialGenerated($event)"
 ></tools-username-generator>

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.ts

@@ -1,3 +1,4 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
@@ -21,6 +22,9 @@ export class CipherFormGeneratorComponent {
   @Input({ required: true })
   type: "password" | "username";
 
+  /** Removes bottom margin of internal sections */
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+
   /**
    * Emits an event when a new value is generated.
    */