[PM-8397] Make vault timeout input standalone (#9366)

* Move vault-timeout-input to @bitwarden/auth/angular

Move vault-timeout-input.component.ts to @bitwarden/auth/angular/vault-timeout-input
Expose via barrel file
Fix imports on clients

* Add dependencies to package.json

Not necessary right now, but good practice for once we move to building each package independently

* Make VaultTimeoutInputComponent a standalone component

* Update selector to present team ownership

* Use new standalone on web

Move vault-timeout-input.component.html to @bitwarden/auth/angular/vault-timeout-input/
Delete old vault-timeout-input.component on web
Register new component on loose-components-module
Update used selector in preferences.component

* Remove unneeded export of VaultTimeoutInputComponent

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/browser/src/auth/popup/settings/vault-timeout-input.component.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
+import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/auth/angular";
 
 @Component({
   selector: "app-vault-timeout-input",

apps/desktop/src/app/accounts/vault-timeout-input.component.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
+import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/auth/angular";
 
 @Component({
   selector: "app-vault-timeout-input",

apps/web/src/app/settings/preferences.component.html

@@ -17,12 +17,12 @@
         {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
       </span>
     </bit-callout>
-    <app-vault-timeout-input
+    <auth-vault-timeout-input
       [vaultTimeoutOptions]="vaultTimeoutOptions"
       [formControl]="form.controls.vaultTimeout"
       ngDefaultControl
     >
-    </app-vault-timeout-input>
+    </auth-vault-timeout-input>
     <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
       <bit-radio-group
         formControlName="vaultTimeoutAction"

apps/web/src/app/settings/vault-timeout-input.component.ts

@@ -1,22 +0,0 @@
-import { Component } from "@angular/core";
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
-
-import { VaultTimeoutInputComponent as VaultTimeoutInputComponentBase } from "@bitwarden/angular/components/settings/vault-timeout-input.component";
-
-@Component({
-  selector: "app-vault-timeout-input",
-  templateUrl: "vault-timeout-input.component.html",
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      multi: true,
-      useExisting: VaultTimeoutInputComponent,
-    },
-    {
-      provide: NG_VALIDATORS,
-      multi: true,
-      useExisting: VaultTimeoutInputComponent,
-    },
-  ],
-})
-export class VaultTimeoutInputComponent extends VaultTimeoutInputComponentBase {}

apps/web/src/app/shared/loose-components.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import {
   PasswordCalloutComponent,
   UserVerificationFormInputComponent,
+  VaultTimeoutInputComponent,
 } from "@bitwarden/auth/angular";
 import { LayoutComponent, NavigationModule } from "@bitwarden/components";
 
@@ -70,7 +71,6 @@ import { ProductSwitcherModule } from "../layouts/product-switcher/product-switc
 import { UserLayoutComponent } from "../layouts/user-layout.component";
 import { DomainRulesComponent } from "../settings/domain-rules.component";
 import { PreferencesComponent } from "../settings/preferences.component";
-import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
 import { GeneratorComponent } from "../tools/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/password-generator-history.component";
 import { AddEditComponent as SendAddEditComponent } from "../tools/send/add-edit.component";
@@ -116,6 +116,7 @@ import { SharedModule } from "./shared.module";
     UserLayoutComponent,
     PaymentMethodWarningsModule,
     VerifyRecoverDeleteOrgComponent,
+    VaultTimeoutInputComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
@@ -183,7 +184,6 @@ import { SharedModule } from "./shared.module";
     TwoFactorYubiKeyComponent,
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
-    VaultTimeoutInputComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,
@@ -258,7 +258,6 @@ import { SharedModule } from "./shared.module";
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
     UserLayoutComponent,
-    VaultTimeoutInputComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,

libs/auth/package.json

@@ -16,5 +16,10 @@
     "clean": "rimraf dist",
     "build": "npm run clean && tsc",
     "build:watch": "npm run clean && tsc -watch"
+  },
+  "dependencies": {
+    "@bitwarden/angular": "file:../angular",
+    "@bitwarden/common": "file:../common",
+    "@bitwarden/components": "file:../components"
   }
 }

libs/auth/src/angular/index.ts

@@ -10,6 +10,7 @@ export * from "./anon-layout/anon-layout-wrapper.component";
 export * from "./fingerprint-dialog/fingerprint-dialog.component";
 export * from "./input-password/input-password.component";
 export * from "./password-callout/password-callout.component";
+export * from "./vault-timeout-input/vault-timeout-input.component";
 
 // user verification
 export * from "./user-verification/user-verification-dialog.component";

libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts

@@ -1,13 +1,18 @@
-import { Directive, Input, OnChanges, OnDestroy, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, Input, OnChanges, OnDestroy, OnInit } from "@angular/core";
 import {
   AbstractControl,
   ControlValueAccessor,
   FormBuilder,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
   ValidationErrors,
   Validator,
 } from "@angular/forms";
 import { filter, map, Observable, Subject, takeUntil } from "rxjs";
 
+import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -15,6 +20,7 @@ import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { VaultTimeout, VaultTimeoutOption } from "@bitwarden/common/types/vault-timeout.type";
+import { FormFieldModule, SelectModule } from "@bitwarden/components";
 
 interface VaultTimeoutFormValue {
   vaultTimeout: VaultTimeout | null;
@@ -24,7 +30,24 @@ interface VaultTimeoutFormValue {
   };
 }
 
-@Directive()
+@Component({
+  selector: "auth-vault-timeout-input",
+  templateUrl: "vault-timeout-input.component.html",
+  standalone: true,
+  imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: VaultTimeoutInputComponent,
+    },
+    {
+      provide: NG_VALIDATORS,
+      multi: true,
+      useExisting: VaultTimeoutInputComponent,
+    },
+  ],
+})
 export class VaultTimeoutInputComponent
   implements ControlValueAccessor, Validator, OnInit, OnDestroy, OnChanges
 {