[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>

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.html

@@ -0,0 +1,29 @@
+<div [formGroup]="form">
+  <bit-form-field>
+    <bit-label>{{ "vaultTimeout" | i18n }}</bit-label>
+    <bit-select formControlName="vaultTimeout">
+      <bit-option
+        *ngFor="let o of vaultTimeoutOptions"
+        [value]="o.value"
+        [label]="o.name"
+      ></bit-option>
+    </bit-select>
+    <bit-hint class="tw-text-sm">{{
+      ((canLockVault$ | async) ? "vaultTimeoutDesc" : "vaultTimeoutLogoutDesc") | i18n
+    }}</bit-hint>
+  </bit-form-field>
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4" *ngIf="showCustom" formGroupName="custom">
+    <bit-form-field class="tw-col-span-6">
+      <bit-label>{{ "customVaultTimeout" | i18n }}</bit-label>
+      <input bitInput type="number" min="0" formControlName="hours" />
+      <bit-hint>{{ "hours" | i18n }}</bit-hint>
+    </bit-form-field>
+    <bit-form-field class="tw-col-span-6 tw-self-end">
+      <input bitInput type="number" min="0" name="minutes" formControlName="minutes" />
+      <bit-hint>{{ "minutes" | i18n }}</bit-hint>
+    </bit-form-field>
+  </div>
+  <small *ngIf="!exceedsMinimumTimout" class="tw-text-danger">
+    <i class="bwi bwi-error" aria-hidden="true"></i> {{ "vaultCustomTimeoutMinimum" | i18n }}
+  </small>
+</div>

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
 {