Merge branch 'master' into feature/org-admin-refresh

libs/components/src/async-actions/async-actions.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+
+import { SharedModule } from "../shared";
+
+import { BitActionDirective } from "./bit-action.directive";
+import { BitSubmitDirective } from "./bit-submit.directive";
+import { BitFormButtonDirective } from "./form-button.directive";
+
+@NgModule({
+  imports: [SharedModule],
+  declarations: [BitActionDirective, BitFormButtonDirective, BitSubmitDirective],
+  exports: [BitActionDirective, BitFormButtonDirective, BitSubmitDirective],
+})
+export class AsyncActionsModule {}

libs/components/src/async-actions/bit-action.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, HostListener, Input, OnDestroy, Optional } from "@angular/core";
+import { BehaviorSubject, finalize, Subject, takeUntil, tap } from "rxjs";
+
+import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
+
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { FunctionReturningAwaitable, functionToObservable } from "../utils/function-to-observable";
+
+/**
+ * Allow a single button to perform async actions on click and reflect the progress in the UI by automatically
+ * activating the loading effect while the action is processed.
+ */
+@Directive({
+  selector: "[bitAction]",
+})
+export class BitActionDirective implements OnDestroy {
+  private destroy$ = new Subject<void>();
+  private _loading$ = new BehaviorSubject<boolean>(false);
+
+  @Input("bitAction") protected handler: FunctionReturningAwaitable;
+
+  readonly loading$ = this._loading$.asObservable();
+
+  constructor(
+    private buttonComponent: ButtonLikeAbstraction,
+    @Optional() private validationService?: ValidationService
+  ) {}
+
+  get loading() {
+    return this._loading$.value;
+  }
+
+  set loading(value: boolean) {
+    this._loading$.next(value);
+    this.buttonComponent.loading = value;
+  }
+
+  @HostListener("click")
+  protected async onClick() {
+    if (!this.handler) {
+      return;
+    }
+
+    this.loading = true;
+    functionToObservable(this.handler)
+      .pipe(
+        tap({ error: (err: unknown) => this.validationService?.showError(err) }),
+        finalize(() => (this.loading = false)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

libs/components/src/async-actions/bit-submit.directive.ts

@@ -0,0 +1,82 @@
+import { Directive, Input, OnDestroy, OnInit, Optional } from "@angular/core";
+import { FormGroupDirective } from "@angular/forms";
+import { BehaviorSubject, catchError, filter, of, Subject, switchMap, takeUntil } from "rxjs";
+
+import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
+
+import { FunctionReturningAwaitable, functionToObservable } from "../utils/function-to-observable";
+
+/**
+ * Allow a form to perform async actions on submit, disabling the form while the action is processing.
+ */
+@Directive({
+  selector: "[formGroup][bitSubmit]",
+})
+export class BitSubmitDirective implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+  private _loading$ = new BehaviorSubject<boolean>(false);
+  private _disabled$ = new BehaviorSubject<boolean>(false);
+
+  @Input("bitSubmit") protected handler: FunctionReturningAwaitable;
+
+  readonly loading$ = this._loading$.asObservable();
+  readonly disabled$ = this._disabled$.asObservable();
+
+  constructor(
+    private formGroupDirective: FormGroupDirective,
+    @Optional() validationService?: ValidationService
+  ) {
+    formGroupDirective.ngSubmit
+      .pipe(
+        filter(() => !this.disabled),
+        switchMap(() => {
+          // Calling functionToObservable exectues the sync part of the handler
+          // allowing the function to check form validity before it gets disabled.
+          const awaitable = functionToObservable(this.handler);
+
+          // Disable form
+          this.loading = true;
+
+          return awaitable.pipe(
+            catchError((err: unknown) => {
+              validationService?.showError(err);
+              return of(undefined);
+            })
+          );
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe({
+        next: () => (this.loading = false),
+        complete: () => (this.loading = false),
+      });
+  }
+
+  ngOnInit(): void {
+    this.formGroupDirective.statusChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((c) => this._disabled$.next(c === "DISABLED"));
+  }
+
+  get disabled() {
+    return this._disabled$.value;
+  }
+
+  set disabled(value: boolean) {
+    this._disabled$.next(value);
+  }
+
+  get loading() {
+    return this._loading$.value;
+  }
+
+  set loading(value: boolean) {
+    this.disabled = value;
+    this._loading$.next(value);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

libs/components/src/async-actions/form-button.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, Input, OnDestroy, Optional } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";
+
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+
+import { BitSubmitDirective } from "./bit-submit.directive";
+
+import { BitActionDirective } from ".";
+
+/**
+ * This directive has two purposes:
+ *
+ * When attached to a submit button:
+ * - Activates the button loading effect while the form is processing an async submit action.
+ * - Disables the button while a `bitAction` directive on another button is being processed.
+ *
+ * When attached to a standalone button with `bitAction` directive:
+ * - Disables the form while the `bitAction` directive is processing an async submit action.
+ */
+@Directive({
+  selector: "button[bitFormButton]",
+})
+export class BitFormButtonDirective implements OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  @Input() type: string;
+
+  constructor(
+    buttonComponent: ButtonLikeAbstraction,
+    @Optional() submitDirective?: BitSubmitDirective,
+    @Optional() actionDirective?: BitActionDirective
+  ) {
+    if (submitDirective && buttonComponent) {
+      submitDirective.loading$.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+        if (this.type === "submit") {
+          buttonComponent.loading = loading;
+        } else {
+          buttonComponent.disabled = loading;
+        }
+      });
+
+      submitDirective.disabled$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
+        buttonComponent.disabled = disabled;
+      });
+    }
+
+    if (submitDirective && actionDirective) {
+      actionDirective.loading$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
+        submitDirective.disabled = disabled;
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

libs/components/src/async-actions/in-forms.stories.mdx

@@ -0,0 +1,114 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Component Library/Async Actions/In Forms/Documentation" />
+
+# Async Actions In Forms
+
+These directives should be used when building forms with buttons that trigger long running tasks in the background,
+eg. Submit or Delete buttons. For buttons that are not associated with a form see [Standalone Async Actions](?path=/story/component-library-async-actions-standalone-documentation--page).
+
+There are two separately supported use-cases: Submit buttons and standalone form buttons (eg. Delete buttons).
+
+## Usage: Submit buttons
+
+Adding async actions to submit buttons requires the following 3 steps
+
+### 1. Add a handler to your `Component`
+
+A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is
+useful for aborting an action.
+
+**NOTE:**
+
+- Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent
+  component using the variable `this`.
+- `formGroup.invalid` will always return `true` after the first `await` operation, event if the form is not actually
+  invalid. This is due to the form getting disabled by the `bitSubmit` directive while waiting for the async action to complete.
+
+```ts
+@Component({...})
+class Component {
+  formGroup = this.formBuilder.group({...});
+
+  // submit can also return Observable instead of Promise
+  submit = async () => {
+    if (this.formGroup.invalid) {
+      return;
+    }
+
+    await this.cryptoService.encrypt(/* ... */);
+
+    // `formGroup.invalid` will always return `true` here
+
+    await this.apiService.post(/* ... */);
+  }
+}
+```
+
+### 2. Add directive to the `form` element
+
+Add the `bitSubmit` directive and supply the handler defined in step 1.
+
+**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`.
+This is different from how submit handlers are usually defined with the output syntax `(ngSubmit)="handler()"`.
+
+```html
+<form [formGroup]="formGroup" [bitSubmit]="submit">...</form>
+```
+
+### 3. Add directive to the `type="submit"` button
+
+Add both `bitButton` and `bitFormButton` directives to the button.
+
+```html
+<button type="submit" bitButton bitFormButton>{{ "submit" | i18n }}</button>
+```
+
+## Usage: Standalone form buttons
+
+Adding async actions to standalone form buttons requires the following 3 steps.
+
+### 1. Add a handler to your `Component`
+
+A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is
+useful for aborting an action.
+
+**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent
+component using the variable `this`.
+
+```ts
+@Component({...})
+class Component {
+  formGroup = this.formBuilder.group({...});
+
+  submit = async () => {
+    // not relevant for this example
+  }
+
+  // action can also return Observable instead of Promise
+  handler = async () => {
+    if (/* perform guard check */) {
+      return;
+    }
+
+    await this.apiService.post(/* ... */);
+  };
+}
+```
+
+### 2. Add directive to the `form` element
+
+The `bitSubmit` directive is required beacuse of its coordinating role.
+
+```html
+<form [formGroup]="formGroup" [bitSubmit]="submit">...</form>
+```
+
+### 3. Add directives to the `button` element
+
+Add `bitButton`, `bitFormButton`, `bitAction` directives to the button. Make sure to supply a handler.
+
+```html
+<button type="button" bitFormButton bitButton [bitAction]="handler">Do action</button>
+<button type="button" bitFormButton bitIconButton="bwi-star" [bitAction]="handler"></button>
+```

libs/components/src/async-actions/in-forms.stories.ts

@@ -0,0 +1,149 @@
+import { Component } from "@angular/core";
+import { FormsModule, ReactiveFormsModule, Validators, FormBuilder } from "@angular/forms";
+import { action } from "@storybook/addon-actions";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { delay, of } from "rxjs";
+
+import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
+import { I18nService } from "@bitwarden/common/src/abstractions/i18n.service";
+
+import { ButtonModule } from "../button";
+import { FormFieldModule } from "../form-field";
+import { IconButtonModule } from "../icon-button";
+import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { BitActionDirective } from "./bit-action.directive";
+import { BitSubmitDirective } from "./bit-submit.directive";
+import { BitFormButtonDirective } from "./form-button.directive";
+
+const template = `
+  <form [formGroup]="formObj" [bitSubmit]="submit">
+    <bit-form-field>
+      <bit-label>Name</bit-label>
+      <input bitInput formControlName="name" />
+    </bit-form-field>
+
+    <bit-form-field>
+      <bit-label>Email</bit-label>
+      <input bitInput formControlName="email" />
+    </bit-form-field>
+
+    <button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
+    <button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
+    <button class="tw-mr-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
+    <button class="tw-mr-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
+  </form>`;
+
+@Component({
+  selector: "app-promise-example",
+  template,
+})
+class PromiseExampleComponent {
+  formObj = this.formBuilder.group({
+    name: ["", [Validators.required]],
+    email: ["", [Validators.required, Validators.email]],
+  });
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  submit = async () => {
+    this.formObj.markAllAsTouched();
+
+    if (!this.formObj.valid) {
+      return;
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(resolve, 2000);
+    });
+  };
+
+  delete = async () => {
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(resolve, 2000);
+    });
+  };
+}
+
+@Component({
+  selector: "app-observable-example",
+  template,
+})
+class ObservableExampleComponent {
+  formObj = this.formBuilder.group({
+    name: ["", [Validators.required]],
+    email: ["", [Validators.required, Validators.email]],
+  });
+
+  constructor(private formBuilder: FormBuilder) {}
+
+  submit = () => {
+    this.formObj.markAllAsTouched();
+
+    if (!this.formObj.valid) {
+      return undefined;
+    }
+
+    return of("fake observable").pipe(delay(2000));
+  };
+
+  delete = () => {
+    return of("fake observable").pipe(delay(2000));
+  };
+}
+
+export default {
+  title: "Component Library/Async Actions/In Forms",
+  decorators: [
+    moduleMetadata({
+      declarations: [
+        BitSubmitDirective,
+        BitFormButtonDirective,
+        PromiseExampleComponent,
+        ObservableExampleComponent,
+        BitActionDirective,
+      ],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        FormFieldModule,
+        InputModule,
+        ButtonModule,
+        IconButtonModule,
+      ],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              required: "required",
+              inputRequired: "Input is required.",
+              inputEmail: "Input is not an email-address.",
+            });
+          },
+        },
+        {
+          provide: ValidationService,
+          useValue: {
+            showError: action("ValidationService.showError"),
+          } as Partial<ValidationService>,
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+const PromiseTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
+  props: args,
+  template: `<app-promise-example></app-promise-example>`,
+});
+
+export const UsingPromise = PromiseTemplate.bind({});
+
+const ObservableTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
+  props: args,
+  template: `<app-observable-example></app-observable-example>`,
+});
+
+export const UsingObservable = ObservableTemplate.bind({});

libs/components/src/async-actions/index.ts

@@ -0,0 +1,3 @@
+export * from "./async-actions.module";
+export * from "./bit-action.directive";
+export * from "./form-button.directive";

libs/components/src/async-actions/overview.stories.mdx

@@ -0,0 +1,26 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Component Library/Async Actions/Overview" />
+
+# Async Actions
+
+The directives in this module makes it easier for developers to reflect the progress of async actions in the UI when using
+buttons, while also providing robust and standardized error handling.
+
+These buttons can either be standalone (such as Refresh buttons), submit buttons for forms or as standalone buttons
+that are part of a form (such as Delete buttons).
+
+These directives are meant to replace the older `appApiAction` directive, providing the option to use `observables` and reduce
+clutter inside our view `components`.
+
+## When to use?
+
+When building a button that triggers a long running task in the background eg. server API calls.
+
+## Why?
+
+To better visualize that the application is processing their request.
+
+## What does it do?
+
+It disables buttons and show a spinning animation.

libs/components/src/async-actions/standalone.stories.mdx

@@ -0,0 +1,63 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Component Library/Async Actions/Standalone/Documentation" />
+
+# Standalone Async Actions
+
+These directives should be used when building a standalone button that triggers a long running task in the background,
+eg. Refresh buttons. For non-submit buttons that are associated with forms see [Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page).
+
+## Usage
+
+Adding async actions to standalone buttons requires the following 2 steps
+
+### 1. Add a handler to your `Component`
+
+A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is
+useful for aborting an action.
+
+**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent
+component using the variable `this`.
+
+#### Example using promises
+
+```ts
+@Component({...})
+class PromiseExampleComponent {
+  handler = async () => {
+    if (/* perform guard check */) {
+      return;
+    }
+
+    await this.apiService.post(/* ... */);
+  };
+}
+```
+
+#### Example using observables
+
+```ts
+@Component({...})
+class Component {
+  handler = () => {
+    if (/* perform guard check */) {
+      return;
+    }
+
+    return this.apiService.post$(/* ... */);
+  };
+}
+```
+
+### 2. Add directive to the DOM element
+
+Add the `bitAction` directive and supply the handler defined in step 1.
+
+**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`.
+This is different from how click handlers are usually defined with the output syntax `(click)="handler()"`.
+
+```html
+<button bitButton [bitAction]="handler">Do action</button>
+
+<button bitIconButton="bwi-trash" [bitAction]="handler"></button>`;
+```

libs/components/src/async-actions/standalone.stories.ts

@@ -0,0 +1,97 @@
+import { Component } from "@angular/core";
+import { action } from "@storybook/addon-actions";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+import { delay, of } from "rxjs";
+
+import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
+
+import { ButtonModule } from "../button";
+import { IconButtonModule } from "../icon-button";
+
+import { BitActionDirective } from "./bit-action.directive";
+
+const template = `
+  <button bitButton buttonType="primary" [bitAction]="action" class="tw-mr-2">
+    Perform action
+  </button>
+  <button bitIconButton="bwi-trash" buttonType="danger" [bitAction]="action"></button>`;
+
+@Component({
+  template,
+  selector: "app-promise-example",
+})
+class PromiseExampleComponent {
+  action = async () => {
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(resolve, 2000);
+    });
+  };
+}
+
+@Component({
+  template,
+  selector: "app-observable-example",
+})
+class ObservableExampleComponent {
+  action = () => {
+    return of("fake observable").pipe(delay(2000));
+  };
+}
+
+@Component({
+  template,
+  selector: "app-rejected-promise-example",
+})
+class RejectedPromiseExampleComponent {
+  action = async () => {
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(() => reject(new Error("Simulated error")), 2000);
+    });
+  };
+}
+
+export default {
+  title: "Component Library/Async Actions/Standalone",
+  decorators: [
+    moduleMetadata({
+      declarations: [
+        BitActionDirective,
+        PromiseExampleComponent,
+        ObservableExampleComponent,
+        RejectedPromiseExampleComponent,
+      ],
+      imports: [ButtonModule, IconButtonModule],
+      providers: [
+        {
+          provide: ValidationService,
+          useValue: {
+            showError: action("ValidationService.showError"),
+          } as Partial<ValidationService>,
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+const PromiseTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
+  props: args,
+  template: `<app-promise-example></app-promise-example>`,
+});
+
+export const UsingPromise = PromiseTemplate.bind({});
+
+const ObservableTemplate: Story<ObservableExampleComponent> = (
+  args: ObservableExampleComponent
+) => ({
+  template: `<app-observable-example></app-observable-example>`,
+});
+
+export const UsingObservable = ObservableTemplate.bind({});
+
+const RejectedPromiseTemplate: Story<ObservableExampleComponent> = (
+  args: ObservableExampleComponent
+) => ({
+  template: `<app-rejected-promise-example></app-rejected-promise-example>`,
+});
+
+export const RejectedPromise = RejectedPromiseTemplate.bind({});

libs/components/src/button/button.component.html

@@ -2,7 +2,10 @@
   <span [ngClass]="{ 'tw-invisible': loading }">
     <ng-content></ng-content>
   </span>
-  <span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
-    <i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
+  <span
+    class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
+    [ngClass]="{ 'tw-invisible': !loading }"
+  >
+    <i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
   </span>
 </span>

libs/components/src/button/button.component.ts

@@ -1,5 +1,7 @@
 import { Input, HostBinding, Component } from "@angular/core";
 
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+
 export type ButtonTypes = "primary" | "secondary" | "danger";
 
 const buttonStyles: Record<ButtonTypes, string[]> = {
@@ -41,8 +43,9 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
 @Component({
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
+  providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
 })
-export class ButtonComponent {
+export class ButtonComponent implements ButtonLikeAbstraction {
   @HostBinding("class") get classList() {
     return [
       "tw-font-semibold",

libs/components/src/form-field/form-field-control.ts

@@ -0,0 +1,8 @@
+export abstract class BitFormFieldControl {
+  ariaDescribedBy: string;
+  id: string;
+  labelForId: string;
+  required: boolean;
+  hasError: boolean;
+  error: [string, any];
+}

libs/components/src/form-field/form-field.component.html

@@ -1,4 +1,4 @@
-<label class="tw-mb-1 tw-block tw-font-semibold tw-text-main" [attr.for]="input.id">
+<label class="tw-mb-1 tw-block tw-font-semibold tw-text-main" [attr.for]="input.labelForId">
   <ng-content select="bit-label"></ng-content>
   <span *ngIf="input.required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
 </label>

libs/components/src/form-field/form-field.component.ts

@@ -7,9 +7,8 @@ import {
   ViewChild,
 } from "@angular/core";
 
-import { BitInputDirective } from "../input/input.directive";
-
 import { BitErrorComponent } from "./error.component";
+import { BitFormFieldControl } from "./form-field-control";
 import { BitHintComponent } from "./hint.component";
 import { BitPrefixDirective } from "./prefix.directive";
 import { BitSuffixDirective } from "./suffix.directive";
@@ -22,7 +21,7 @@ import { BitSuffixDirective } from "./suffix.directive";
   },
 })
 export class BitFormFieldComponent implements AfterContentChecked {
-  @ContentChild(BitInputDirective) input: BitInputDirective;
+  @ContentChild(BitFormFieldControl) input: BitFormFieldControl;
   @ContentChild(BitHintComponent) hint: BitHintComponent;
 
   @ViewChild(BitErrorComponent) error: BitErrorComponent;

libs/components/src/form-field/form-field.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from "@angular/core";
 
 import { BitInputDirective } from "../input/input.directive";
 import { InputModule } from "../input/input.module";
+import { MultiSelectComponent } from "../multi-select/multi-select.component";
+import { MultiSelectModule } from "../multi-select/multi-select.module";
 import { SharedModule } from "../shared";
 
 import { BitErrorSummary } from "./error-summary.component";
@@ -13,16 +15,17 @@ import { BitPrefixDirective } from "./prefix.directive";
 import { BitSuffixDirective } from "./suffix.directive";
 
 @NgModule({
-  imports: [SharedModule, InputModule],
+  imports: [SharedModule, InputModule, MultiSelectModule],
   exports: [
     BitErrorComponent,
     BitErrorSummary,
     BitFormFieldComponent,
     BitHintComponent,
-    BitInputDirective,
     BitLabel,
     BitPrefixDirective,
     BitSuffixDirective,
+    BitInputDirective,
+    MultiSelectComponent,
   ],
   declarations: [
     BitErrorComponent,

libs/components/src/form-field/index.ts

@@ -1,2 +1,3 @@
 export * from "./form-field.module";
 export * from "./form-field.component";
+export * from "./form-field-control";

libs/components/src/form-field/multi-select.stories.ts

@@ -0,0 +1,283 @@
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  FormBuilder,
+  Validators,
+  FormGroup,
+} from "@angular/forms";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { action } from "@storybook/addon-actions";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { BadgeModule } from "../badge";
+import { ButtonModule } from "../button";
+import { InputModule } from "../input/input.module";
+import { MultiSelectComponent } from "../multi-select/multi-select.component";
+import { SharedModule } from "../shared";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { FormFieldModule } from "./form-field.module";
+
+export default {
+  title: "Component Library/Form/Multi Select",
+  excludeStories: /.*Data$/,
+  component: MultiSelectComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ButtonModule,
+        FormsModule,
+        NgSelectModule,
+        FormFieldModule,
+        InputModule,
+        ReactiveFormsModule,
+        BadgeModule,
+        SharedModule,
+      ],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              multiSelectPlaceholder: "-- Type to Filter --",
+              multiSelectLoading: "Retrieving options...",
+              multiSelectNotFound: "No items found",
+              multiSelectClearAll: "Clear all",
+              required: "required",
+              inputRequired: "Input is required.",
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17689",
+    },
+  },
+} as Meta;
+
+export const actionsData = {
+  onItemsConfirmed: action("onItemsConfirmed"),
+};
+
+const fb = new FormBuilder();
+const formObjFactory = () =>
+  fb.group({
+    select: [[], [Validators.required]],
+  });
+
+function submit(formObj: FormGroup) {
+  formObj.markAllAsTouched();
+}
+
+const MultiSelectTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
+  props: {
+    formObj: formObjFactory(),
+    submit: submit,
+    ...args,
+    onItemsConfirmed: actionsData.onItemsConfirmed,
+  },
+  template: `
+    <form [formGroup]="formObj" (ngSubmit)="submit(formObj)">
+      <bit-form-field>
+        <bit-label>{{ name }}</bit-label>
+        <bit-multi-select
+          class="tw-w-full"
+          formControlName="select"
+          [baseItems]="baseItems"
+          [removeSelectedItems]="removeSelectedItems"
+          [loading]="loading"
+          [disabled]="disabled"
+          (onItemsConfirmed)="onItemsConfirmed($event)">
+        </bit-multi-select>
+        <bit-hint>{{ hint }}</bit-hint>
+      </bit-form-field>
+      <button type="submit" bitButton buttonType="primary">Submit</button>
+    </form>
+  `,
+});
+
+export const Loading = MultiSelectTemplate.bind({});
+Loading.args = {
+  baseItems: [],
+  name: "Loading",
+  hint: "This is what a loading multi-select looks like",
+  loading: "true",
+};
+
+export const Disabled = MultiSelectTemplate.bind({});
+Disabled.args = {
+  name: "Disabled",
+  disabled: "true",
+  hint: "This is what a disabled multi-select looks like",
+};
+
+export const Groups = MultiSelectTemplate.bind({});
+Groups.args = {
+  name: "Select groups",
+  hint: "Groups will be assigned to the associated member",
+  baseItems: [
+    { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+    { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+    { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+    { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+    { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+    { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
+    { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
+  ],
+};
+
+export const Members = MultiSelectTemplate.bind({});
+Members.args = {
+  name: "Select members",
+  hint: "Members will be assigned to the associated group/collection",
+  baseItems: [
+    { id: "1", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
+    {
+      id: "2",
+      listName: "Tania Stone (tstone@mail.me)",
+      labelName: "Tania Stone",
+      icon: "bwi-user",
+    },
+    {
+      id: "3",
+      listName: "Matt Matters (mmatters@mail.me)",
+      labelName: "Matt Matters",
+      icon: "bwi-user",
+    },
+    {
+      id: "4",
+      listName: "Bob Robertson (brobertson@mail.me)",
+      labelName: "Bob Robertson",
+      icon: "bwi-user",
+    },
+    {
+      id: "5",
+      listName: "Ashley Fletcher (aflectcher@mail.me)",
+      labelName: "Ashley Fletcher",
+      icon: "bwi-user",
+    },
+    { id: "6", listName: "Rita Olson (rolson@mail.me)", labelName: "Rita Olson", icon: "bwi-user" },
+    {
+      id: "7",
+      listName: "Final listName (fname@mail.me)",
+      labelName: "(fname@mail.me)",
+      icon: "bwi-user",
+    },
+  ],
+};
+
+export const Collections = MultiSelectTemplate.bind({});
+Collections.args = {
+  name: "Select collections",
+  hint: "Collections will be assigned to the associated member",
+  baseItems: [
+    { id: "1", listName: "Collection 1", labelName: "Collection 1", icon: "bwi-collection" },
+    { id: "2", listName: "Collection 2", labelName: "Collection 2", icon: "bwi-collection" },
+    { id: "3", listName: "Collection 3", labelName: "Collection 3", icon: "bwi-collection" },
+    {
+      id: "3.5",
+      listName: "Child Collection 1 for Parent 1",
+      labelName: "Child Collection 1 for Parent 1",
+      icon: "bwi-collection",
+      parentGrouping: "Parent 1",
+    },
+    {
+      id: "3.55",
+      listName: "Child Collection 2 for Parent 1",
+      labelName: "Child Collection 2 for Parent 1",
+      icon: "bwi-collection",
+      parentGrouping: "Parent 1",
+    },
+    {
+      id: "3.59",
+      listName: "Child Collection 3 for Parent 1",
+      labelName: "Child Collection 3 for Parent 1",
+      icon: "bwi-collection",
+      parentGrouping: "Parent 1",
+    },
+    {
+      id: "3.75",
+      listName: "Child Collection 1 for Parent 2",
+      labelName: "Child Collection 1 for Parent 2",
+      icon: "bwi-collection",
+      parentGrouping: "Parent 2",
+    },
+    { id: "4", listName: "Collection 4", labelName: "Collection 4", icon: "bwi-collection" },
+    { id: "5", listName: "Collection 5", labelName: "Collection 5", icon: "bwi-collection" },
+    { id: "6", listName: "Collection 6", labelName: "Collection 6", icon: "bwi-collection" },
+    { id: "7", listName: "Collection 7", labelName: "Collection 7", icon: "bwi-collection" },
+  ],
+};
+
+export const MembersAndGroups = MultiSelectTemplate.bind({});
+MembersAndGroups.args = {
+  name: "Select groups and members",
+  hint: "Members/Groups will be assigned to the associated collection",
+  baseItems: [
+    { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+    { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+    { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+    { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+    { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+    { id: "6", listName: "Joe Smith (jsmith@mail.me)", labelName: "Joe Smith", icon: "bwi-user" },
+    {
+      id: "7",
+      listName: "Tania Stone (tstone@mail.me)",
+      labelName: "(tstone@mail.me)",
+      icon: "bwi-user",
+    },
+  ],
+};
+
+export const RemoveSelected = MultiSelectTemplate.bind({});
+RemoveSelected.args = {
+  name: "Select groups",
+  hint: "Groups will be removed from the list once the dropdown is closed",
+  baseItems: [
+    { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+    { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+    { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+    { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+    { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+    { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
+    { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
+  ],
+  removeSelectedItems: "true",
+};
+
+const StandaloneTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
+  props: {
+    ...args,
+    onItemsConfirmed: actionsData.onItemsConfirmed,
+  },
+  template: `
+    <bit-multi-select
+      class="tw-w-full"
+      [baseItems]="baseItems"
+      [removeSelectedItems]="removeSelectedItems"
+      [loading]="loading"
+      [disabled]="disabled"
+      (onItemsConfirmed)="onItemsConfirmed($event)">
+    </bit-multi-select>
+  `,
+});
+
+export const Standalone = StandaloneTemplate.bind({});
+Standalone.args = {
+  baseItems: [
+    { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+    { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+    { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+    { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+    { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+    { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
+    { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
+  ],
+  removeSelectedItems: "true",
+};

libs/components/src/icon-button/icon-button.component.html

@@ -0,0 +1,15 @@
+<span class="tw-relative">
+  <span [ngClass]="{ 'tw-invisible': loading }">
+    <i class="bwi" [ngClass]="iconClass" aria-hidden="true"></i>
+  </span>
+  <span
+    class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
+    [ngClass]="{ 'tw-invisible': !loading }"
+  >
+    <i
+      class="bwi bwi-spinner bwi-spin"
+      aria-hidden="true"
+      [ngClass]="{ 'bwi-lg': size === 'default' }"
+    ></i>
+  </span>
+</span>

libs/components/src/icon-button/icon-button.component.ts

@@ -1,8 +1,10 @@
 import { Component, HostBinding, Input } from "@angular/core";
 
-export type IconButtonStyle = "contrast" | "main" | "muted" | "primary" | "secondary" | "danger";
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 
-const styles: Record<IconButtonStyle, string[]> = {
+export type IconButtonType = "contrast" | "main" | "muted" | "primary" | "secondary" | "danger";
+
+const styles: Record<IconButtonType, string[]> = {
   contrast: [
     "tw-bg-transparent",
     "!tw-text-contrast",
@@ -10,6 +12,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-contrast",
     "focus-visible:before:tw-ring-text-contrast",
+    "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
   ],
   main: [
@@ -19,6 +22,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-main",
     "focus-visible:before:tw-ring-text-main",
+    "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
   ],
   muted: [
@@ -28,6 +32,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-primary-700",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
   ],
   primary: [
@@ -37,6 +42,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:tw-bg-primary-700",
     "hover:tw-border-primary-700",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:hover:tw-border-primary-500",
     "disabled:hover:tw-bg-primary-500",
   ],
   secondary: [
@@ -46,6 +52,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:!tw-text-contrast",
     "hover:tw-bg-text-muted",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:hover:tw-border-text-muted",
     "disabled:hover:tw-bg-transparent",
     "disabled:hover:!tw-text-muted",
     "disabled:hover:tw-border-text-muted",
@@ -57,6 +64,7 @@ const styles: Record<IconButtonStyle, string[]> = {
     "hover:!tw-text-contrast",
     "hover:tw-bg-danger-500",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:hover:tw-border-danger-500",
     "disabled:hover:tw-bg-transparent",
     "disabled:hover:!tw-text-danger",
     "disabled:hover:tw-border-danger-500",
@@ -72,12 +80,13 @@ const sizes: Record<IconButtonSize, string[]> = {
 
 @Component({
   selector: "button[bitIconButton]",
-  template: `<i class="bwi" [ngClass]="iconClass" aria-hidden="true"></i>`,
+  templateUrl: "icon-button.component.html",
+  providers: [{ provide: ButtonLikeAbstraction, useExisting: BitIconButtonComponent }],
 })
-export class BitIconButtonComponent {
+export class BitIconButtonComponent implements ButtonLikeAbstraction {
   @Input("bitIconButton") icon: string;
 
-  @Input() buttonType: IconButtonStyle = "main";
+  @Input() buttonType: IconButtonType = "main";
 
   @Input() size: IconButtonSize = "default";
 
@@ -90,7 +99,6 @@ export class BitIconButtonComponent {
       "tw-transition",
       "hover:tw-no-underline",
       "disabled:tw-opacity-60",
-      "disabled:hover:tw-border-transparent",
       "focus:tw-outline-none",
 
       // Workaround for box-shadow with transparent offset issue:
@@ -117,4 +125,13 @@ export class BitIconButtonComponent {
   get iconClass() {
     return [this.icon, "!tw-m-0"];
   }
+
+  @HostBinding("attr.disabled")
+  get disabledAttr() {
+    const disabled = this.disabled != null && this.disabled !== false;
+    return disabled || this.loading ? true : null;
+  }
+
+  @Input() loading = false;
+  @Input() disabled = false;
 }

libs/components/src/icon-button/icon-button.stories.ts

@@ -1,59 +1,91 @@
 import { Meta, Story } from "@storybook/angular";
 
-import { BitIconButtonComponent } from "./icon-button.component";
+import { BitIconButtonComponent, IconButtonType } from "./icon-button.component";
+
+const buttonTypes: IconButtonType[] = [
+  "contrast",
+  "main",
+  "muted",
+  "primary",
+  "secondary",
+  "danger",
+];
 
 export default {
   title: "Component Library/Icon Button",
   component: BitIconButtonComponent,
   args: {
     bitIconButton: "bwi-plus",
-    buttonType: "primary",
     size: "default",
     disabled: false,
   },
+  argTypes: {
+    buttonTypes: { table: { disable: true } },
+  },
 } as Meta;
 
 const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) => ({
-  props: args,
+  props: { ...args, buttonTypes },
   template: `
-  <div class="tw-p-5" [class.tw-bg-primary-500]="buttonType === 'contrast'">
-    <button
-      [bitIconButton]="bitIconButton"
-      [buttonType]="buttonType"
-      [size]="size"
-      [disabled]="disabled"
-      title="Example icon button"
-      aria-label="Example icon button"></button>
-  </div>
+  <table class="tw-border-spacing-2 tw-text-center tw-text-main">
+    <thead>
+      <tr>
+        <td></td>
+        <td *ngFor="let buttonType of buttonTypes" class="tw-capitalize tw-font-bold tw-p-4"
+          [class.tw-text-contrast]="buttonType === 'contrast'"
+          [class.tw-bg-primary-500]="buttonType === 'contrast'">{{buttonType}}</td>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class="tw-font-bold tw-p-4 tw-text-left">Default</td>
+          <td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
+            <button
+              [bitIconButton]="bitIconButton"
+              [buttonType]="buttonType"
+              [size]="size"
+              title="Example icon button"
+              aria-label="Example icon button"></button>
+          </td>
+      </tr>
+
+      <tr>
+        <td class="tw-font-bold tw-p-4 tw-text-left">Disabled</td>
+          <td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
+            <button
+              [bitIconButton]="bitIconButton"
+              [buttonType]="buttonType"
+              [size]="size"
+              disabled
+              title="Example icon button"
+              aria-label="Example icon button"></button>
+          </td>
+      </tr>
+
+      <tr>
+        <td class="tw-font-bold tw-p-4 tw-text-left">Loading</td>
+          <td *ngFor="let buttonType of buttonTypes" class="tw-p-2" [class.tw-bg-primary-500]="buttonType === 'contrast'">
+            <button
+              [bitIconButton]="bitIconButton"
+              [buttonType]="buttonType"
+              [size]="size"
+              loading="true"
+              title="Example icon button"
+              aria-label="Example icon button"></button>
+          </td>
+      </tr>
+    </tbody>
+  </table>
   `,
 });
 
-export const Contrast = Template.bind({});
-Contrast.args = {
-  buttonType: "contrast",
+export const Default = Template.bind({});
+Default.args = {
+  size: "default",
 };
 
-export const Main = Template.bind({});
-Main.args = {
-  buttonType: "main",
-};
-
-export const Muted = Template.bind({});
-Muted.args = {
-  buttonType: "muted",
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  buttonType: "primary",
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  buttonType: "secondary",
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  buttonType: "danger",
+export const Small = Template.bind({});
+Small.args = {
+  size: "small",
 };

libs/components/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./async-actions";
 export * from "./badge";
 export * from "./banner";
 export * from "./button";

libs/components/src/input/input.directive.ts

@@ -1,13 +1,16 @@
 import { Directive, HostBinding, Input, Optional, Self } from "@angular/core";
 import { NgControl, Validators } from "@angular/forms";
 
+import { BitFormFieldControl } from "../form-field/form-field-control";
+
 // Increments for each instance of this component
 let nextId = 0;
 
 @Directive({
   selector: "input[bitInput], select[bitInput], textarea[bitInput]",
+  providers: [{ provide: BitFormFieldControl, useExisting: BitInputDirective }],
 })
-export class BitInputDirective {
+export class BitInputDirective implements BitFormFieldControl {
   @HostBinding("class") @Input() get classList() {
     return [
       "tw-block",
@@ -38,6 +41,10 @@ export class BitInputDirective {
 
   @HostBinding("attr.aria-describedby") ariaDescribedBy: string;
 
+  get labelForId(): string {
+    return this.id;
+  }
+
   @HostBinding("attr.aria-invalid") get ariaInvalid() {
     return this.hasError ? true : undefined;
   }

libs/components/src/multi-select/models/select-item-view.ts

@@ -0,0 +1,7 @@
+export type SelectItemView = {
+  id: string; // Unique ID used for comparisons
+  listName: string; // Default bindValue -> this is what will be displayed in list items
+  labelName: string; // This is what will be displayed in the selection option badge
+  icon: string; // Icon to display within the list
+  parentGrouping: string; // Used to group items by parent
+};

libs/components/src/multi-select/multi-select.component.html

@@ -0,0 +1,55 @@
+<ng-select
+  [items]="baseItems"
+  [(ngModel)]="selectedItems"
+  (ngModelChange)="onChange($event)"
+  (blur)="onBlur()"
+  bindLabel="listName"
+  groupBy="parentGrouping"
+  [placeholder]="placeholder"
+  [loading]="loading"
+  [loadingText]="loadingText"
+  notFoundText="{{ 'multiSelectNotFound' | i18n }}"
+  clearAllText="{{ 'multiSelectClearAll' | i18n }}"
+  [multiple]="true"
+  [selectOnTab]="true"
+  [closeOnSelect]="false"
+  (close)="onDropdownClosed()"
+  [disabled]="disabled"
+  [clearSearchOnAdd]="true"
+  [labelForId]="labelForId"
+>
+  <ng-template ng-loadingspinner-tmp>
+    <i class="bwi bwi-spinner bwi-spin tw-mr-1" [title]="loadingText" aria-hidden="true"></i>
+  </ng-template>
+  <ng-template ng-label-tmp let-item="item" let-clear="clear">
+    <button
+      type="button"
+      bitBadge
+      badgeType="primary"
+      class="tw-mr-1 disabled:tw-border-0"
+      [disabled]="disabled"
+      (click)="clear(item)"
+    >
+      <i
+        *ngIf="item.icon != null"
+        class="tw-mr-1 bwi bwi-fw {{ item.icon }}"
+        aria-hidden="true"
+      ></i>
+      {{ item.labelName }}
+      <i class="bwi bwi-fw bwi-close bwi-sm tw-ml-1" aria-hidden="true"></i>
+    </button>
+  </ng-template>
+  <ng-template ng-option-tmp let-item="item">
+    <div class="tw-flex">
+      <div class="tw-w-7 tw-flex-none">
+        <i *ngIf="isSelected(item)" class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+      </div>
+      <div class="tw-mr-2 tw-flex-initial">
+        <i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
+      </div>
+      <div class="tw-flex-1">
+        {{ item.listName }}
+      </div>
+    </div>
+  </ng-template>
+</ng-select>

libs/components/src/multi-select/multi-select.component.ts

@@ -0,0 +1,179 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+  EventEmitter,
+  HostBinding,
+  Optional,
+  Self,
+} from "@angular/core";
+import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
+import { NgSelectComponent } from "@ng-select/ng-select";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { BitFormFieldControl } from "../form-field/form-field-control";
+
+import { SelectItemView } from "./models/select-item-view";
+
+// Increments for each instance of this component
+let nextId = 0;
+
+@Component({
+  selector: "bit-multi-select",
+  templateUrl: "./multi-select.component.html",
+  providers: [{ provide: BitFormFieldControl, useExisting: MultiSelectComponent }],
+})
+/**
+ * This component has been implemented to only support Multi-select list events
+ */
+export class MultiSelectComponent implements OnInit, BitFormFieldControl, ControlValueAccessor {
+  @ViewChild(NgSelectComponent) select: NgSelectComponent;
+
+  // Parent component should only pass selectable items (complete list - selected items = baseItems)
+  @Input() baseItems: SelectItemView[];
+  // Defaults to native ng-select behavior - set to "true" to clear selected items on dropdown close
+  @Input() removeSelectedItems = false;
+  @Input() placeholder: string;
+  @Input() loading = false;
+  @Input() disabled = false;
+
+  // Internal tracking of selected items
+  @Input() selectedItems: SelectItemView[];
+
+  // Default values for our implementation
+  loadingText: string;
+
+  protected searchInputId = `search-input-${nextId++}`;
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  private notifyOnChange?: (value: SelectItemView[]) => void;
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  private notifyOnTouched?: () => void;
+
+  @Output() onItemsConfirmed = new EventEmitter<any[]>();
+
+  constructor(private i18nService: I18nService, @Optional() @Self() private ngControl?: NgControl) {
+    if (ngControl != null) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  ngOnInit(): void {
+    // Default Text Values
+    this.placeholder = this.placeholder ?? this.i18nService.t("multiSelectPlaceholder");
+    this.loadingText = this.i18nService.t("multiSelectLoading");
+  }
+
+  /** Helper method for showing selected state in custom template */
+  isSelected(item: any): boolean {
+    return this.selectedItems?.find((selected) => selected.id === item.id) != undefined;
+  }
+
+  /**
+   * The `close` callback will act as the only trigger for signifying the user's intent of completing the selection
+   * of items. Selected items will be emitted to the parent component in order to allow for separate data handling.
+   */
+  onDropdownClosed(): void {
+    // Early exit
+    if (this.selectedItems == null || this.selectedItems.length == 0) {
+      return;
+    }
+
+    // Emit results to parent component
+    this.onItemsConfirmed.emit(this.selectedItems);
+
+    // Remove selected items from base list based on input property
+    if (this.removeSelectedItems) {
+      let updatedBaseItems = this.baseItems;
+      this.selectedItems.forEach((selectedItem) => {
+        updatedBaseItems = updatedBaseItems.filter((item) => selectedItem.id !== item.id);
+      });
+
+      // Reset Lists
+      this.selectedItems = null;
+      this.baseItems = updatedBaseItems;
+    }
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  writeValue(obj: SelectItemView[]): void {
+    this.selectedItems = obj;
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  registerOnChange(fn: (value: SelectItemView[]) => void): void {
+    this.notifyOnChange = fn;
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  registerOnTouched(fn: any): void {
+    this.notifyOnTouched = fn;
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  protected onChange(items: SelectItemView[]) {
+    if (!this.notifyOnChange) {
+      return;
+    }
+
+    this.notifyOnChange(items);
+  }
+
+  /**Implemented as part of NG_VALUE_ACCESSOR */
+  protected onBlur() {
+    if (!this.notifyOnTouched) {
+      return;
+    }
+
+    this.notifyOnTouched();
+  }
+
+  /**Implemented as part of BitFormFieldControl */
+  @HostBinding("attr.aria-describedby")
+  get ariaDescribedBy() {
+    return this._ariaDescribedBy;
+  }
+  set ariaDescribedBy(value: string) {
+    this._ariaDescribedBy = value;
+    this.select?.searchInput.nativeElement.setAttribute("aria-describedby", value);
+  }
+  private _ariaDescribedBy: string;
+
+  /**Implemented as part of BitFormFieldControl */
+  get labelForId() {
+    return this.searchInputId;
+  }
+
+  /**Implemented as part of BitFormFieldControl */
+  @HostBinding() @Input() id = `bit-multi-select-${nextId++}`;
+
+  /**Implemented as part of BitFormFieldControl */
+  @HostBinding("attr.required")
+  @Input()
+  get required() {
+    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+  }
+  set required(value: any) {
+    this._required = value != null && value !== false;
+  }
+  private _required: boolean;
+
+  /**Implemented as part of BitFormFieldControl */
+  get hasError() {
+    return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
+  }
+
+  /**Implemented as part of BitFormFieldControl */
+  get error(): [string, any] {
+    const key = Object.keys(this.ngControl?.errors)[0];
+    return [key, this.ngControl?.errors[key]];
+  }
+}

libs/components/src/multi-select/multi-select.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { NgSelectModule } from "@ng-select/ng-select";
+
+import { BadgeModule } from "../badge";
+import { SharedModule } from "../shared";
+
+import { MultiSelectComponent } from "./multi-select.component";
+
+@NgModule({
+  imports: [CommonModule, FormsModule, NgSelectModule, BadgeModule, SharedModule],
+  exports: [MultiSelectComponent],
+  declarations: [MultiSelectComponent],
+})
+export class MultiSelectModule {}

libs/components/src/multi-select/scss/bw.theme.scss

@@ -0,0 +1,394 @@
+// Default theme copied from https://github.com/ng-select/ng-select/blob/master/src/ng-select/themes/default.theme.scss
+@mixin rtl {
+  @at-root [dir="rtl"] #{&} {
+    @content;
+  }
+}
+
+$ng-select-highlight: rgb(var(--color-primary-700)) !default;
+$ng-select-primary-text: rgb(var(--color-text-main)) !default;
+$ng-select-disabled-text: rgb(var(--color-secondary-100)) !default;
+$ng-select-border: rgb(var(--color-secondary-500)) !default;
+$ng-select-border-radius: 4px !default;
+$ng-select-bg: rgb(var(--color-background-alt)) !default;
+$ng-select-selected: transparent !default;
+$ng-select-selected-text: $ng-select-primary-text !default;
+
+$ng-select-marked: rgb(var(--color-text-main) / 0.12) !default;
+$ng-select-marked-text: $ng-select-primary-text !default;
+
+$ng-select-box-shadow: none !default;
+$ng-select-placeholder: rgb(var(--color-text-muted)) !default;
+$ng-select-height: 36px !default;
+$ng-select-value-padding-left: 10px !default;
+$ng-select-value-font-size: 0.9em !default;
+$ng-select-value-text: $ng-select-primary-text !default;
+
+$ng-select-dropdown-bg: $ng-select-bg !default;
+$ng-select-dropdown-border: $ng-select-border !default;
+$ng-select-dropdown-optgroup-text: rgb(var(--color-text-muted)) !default;
+$ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
+$ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
+$ng-select-dropdown-option-text: $ng-select-primary-text !default;
+$ng-select-dropdown-option-disabled: rgb(var(--color-text-muted) / 0.6) !default;
+
+$ng-select-input-text: $ng-select-primary-text !default;
+
+// Custom color variables
+$ng-select-arrow-hover: rgb(var(--color-secondary-700)) !default;
+$ng-clear-icon-hover: rgb(var(--color-text-main)) !default;
+$ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
+
+.ng-select {
+  &.ng-select-opened {
+    > .ng-select-container {
+      background: $ng-select-bg;
+      border-color: $ng-select-border;
+      &:hover {
+        box-shadow: none;
+      }
+      .ng-arrow {
+        top: -2px;
+        border-color: transparent transparent $ng-select-arrow-hover;
+        border-width: 0 5px 5px;
+        &:hover {
+          border-color: transparent transparent $ng-select-arrow-hover;
+        }
+      }
+    }
+    &.ng-select-top {
+      > .ng-select-container {
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+      }
+    }
+    &.ng-select-right {
+      > .ng-select-container {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    &.ng-select-bottom {
+      > .ng-select-container {
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    &.ng-select-left {
+      > .ng-select-container {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+  &.ng-select-focused {
+    &:not(.ng-select-opened) > .ng-select-container {
+      border-color: $ng-select-highlight;
+      box-shadow: $ng-select-box-shadow;
+    }
+  }
+  &.ng-select-disabled {
+    > .ng-select-container {
+      background-color: $ng-select-disabled-text;
+    }
+  }
+  .ng-has-value .ng-placeholder {
+    display: none;
+  }
+  .ng-select-container {
+    color: $ng-select-primary-text;
+    background-color: $ng-select-bg;
+    border-radius: $ng-select-border-radius;
+    border: 1px solid $ng-select-border;
+    min-height: $ng-select-height;
+    align-items: center;
+    &:hover {
+      box-shadow: 0 1px 0 $ng-dropdown-shadow;
+    }
+    .ng-value-container {
+      align-items: center;
+      padding-left: $ng-select-value-padding-left;
+      @include rtl {
+        padding-right: $ng-select-value-padding-left;
+        padding-left: 0;
+      }
+      .ng-placeholder {
+        color: $ng-select-placeholder;
+      }
+    }
+  }
+  &.ng-select-single {
+    .ng-select-container {
+      height: $ng-select-height;
+      .ng-value-container {
+        .ng-input {
+          top: 5px;
+          left: 0;
+          padding-left: $ng-select-value-padding-left;
+          padding-right: 50px;
+          @include rtl {
+            padding-right: $ng-select-value-padding-left;
+            padding-left: 50px;
+          }
+        }
+      }
+    }
+  }
+  &.ng-select-multiple {
+    &.ng-select-disabled {
+      > .ng-select-container .ng-value-container .ng-value {
+        background-color: $ng-select-disabled-text;
+        border: 0px solid $ng-select-border; // Removing border on slected value when disabled
+        .ng-value-label {
+          padding: 0 5px;
+        }
+      }
+    }
+    .ng-select-container {
+      .ng-value-container {
+        padding-top: 5px;
+        padding-left: 7px;
+        @include rtl {
+          padding-right: 7px;
+          padding-left: 0;
+        }
+        .ng-value {
+          font-size: $ng-select-value-font-size;
+          margin-bottom: 5px;
+          color: $ng-select-value-text;
+          background-color: $ng-select-selected;
+          border-radius: 2px;
+          margin-right: 5px;
+          @include rtl {
+            margin-right: 0;
+            margin-left: 5px;
+          }
+          &.ng-value-disabled {
+            background-color: $ng-select-disabled-text;
+            .ng-value-label {
+              padding-left: 5px;
+              @include rtl {
+                padding-left: 0;
+                padding-right: 5px;
+              }
+            }
+          }
+          .ng-value-label {
+            display: inline-block;
+            padding: 1px 5px;
+          }
+          .ng-value-icon {
+            display: inline-block;
+            padding: 1px 5px;
+            &:hover {
+              background-color: $ng-select-arrow-hover;
+            }
+            &.left {
+              border-right: 1px solid $ng-select-selected;
+              @include rtl {
+                border-left: 1px solid $ng-select-selected;
+                border-right: none;
+              }
+            }
+            &.right {
+              border-left: 1px solid $ng-select-selected;
+              @include rtl {
+                border-left: 0;
+                border-right: 1px solid $ng-select-selected;
+              }
+            }
+          }
+        }
+        .ng-input {
+          padding: 0 0 3px 3px;
+          @include rtl {
+            padding: 0 3px 3px 0;
+          }
+          > input {
+            color: $ng-select-input-text;
+          }
+        }
+        .ng-placeholder {
+          top: 5px;
+          padding-bottom: 5px;
+          padding-left: 3px;
+          @include rtl {
+            padding-right: 3px;
+            padding-left: 0;
+          }
+        }
+      }
+    }
+  }
+  .ng-clear-wrapper {
+    color: $ng-select-placeholder;
+    padding-top: 2.5px;
+    &:hover .ng-clear {
+      color: $ng-clear-icon-hover;
+    }
+  }
+  .ng-spinner-zone {
+    padding: 5px 5px 0 0;
+
+    @include rtl {
+      padding: 5px 0 0 5px;
+    }
+  }
+  .ng-arrow-wrapper {
+    width: 25px;
+    padding-right: 5px;
+    @include rtl {
+      padding-left: 5px;
+      padding-right: 0;
+    }
+    &:hover {
+      .ng-arrow {
+        border-top-color: $ng-select-arrow-hover;
+      }
+    }
+    .ng-arrow {
+      border-color: $ng-select-placeholder transparent transparent;
+      border-style: solid;
+      border-width: 5px 5px 2.5px;
+    }
+  }
+}
+
+.ng-dropdown-panel {
+  background-color: $ng-select-dropdown-bg;
+  border: 1px solid $ng-select-dropdown-border;
+  box-shadow: 0 1px 0 $ng-dropdown-shadow;
+  left: 0;
+  &.ng-select-top {
+    bottom: 100%;
+    border-top-right-radius: $ng-select-border-radius;
+    border-top-left-radius: $ng-select-border-radius;
+    border-bottom-color: $ng-select-border;
+    margin-bottom: -1px;
+    .ng-dropdown-panel-items {
+      .ng-option {
+        &:first-child {
+          border-top-right-radius: $ng-select-border-radius;
+          border-top-left-radius: $ng-select-border-radius;
+        }
+      }
+    }
+  }
+  &.ng-select-right {
+    left: 100%;
+    top: 0;
+    border-top-right-radius: $ng-select-border-radius;
+    border-bottom-right-radius: $ng-select-border-radius;
+    border-bottom-left-radius: $ng-select-border-radius;
+    border-bottom-color: $ng-select-border;
+    margin-bottom: -1px;
+    .ng-dropdown-panel-items {
+      .ng-option {
+        &:first-child {
+          border-top-right-radius: $ng-select-border-radius;
+        }
+      }
+    }
+  }
+  &.ng-select-bottom {
+    top: 100%;
+    border-bottom-right-radius: $ng-select-border-radius;
+    border-bottom-left-radius: $ng-select-border-radius;
+    border-top-color: $ng-select-border;
+    margin-top: -1px;
+    .ng-dropdown-panel-items {
+      .ng-option {
+        &:last-child {
+          border-bottom-right-radius: $ng-select-border-radius;
+          border-bottom-left-radius: $ng-select-border-radius;
+        }
+      }
+    }
+  }
+  &.ng-select-left {
+    left: -100%;
+    top: 0;
+    border-top-left-radius: $ng-select-border-radius;
+    border-bottom-right-radius: $ng-select-border-radius;
+    border-bottom-left-radius: $ng-select-border-radius;
+    border-bottom-color: $ng-select-border;
+    margin-bottom: -1px;
+    .ng-dropdown-panel-items {
+      .ng-option {
+        &:first-child {
+          border-top-left-radius: $ng-select-border-radius;
+        }
+      }
+    }
+  }
+  .ng-dropdown-header {
+    border-bottom: 1px solid $ng-select-border;
+    padding: 5px 7px;
+  }
+  .ng-dropdown-footer {
+    border-top: 1px solid $ng-select-border;
+    padding: 5px 7px;
+  }
+  .ng-dropdown-panel-items {
+    .ng-optgroup {
+      user-select: none;
+      padding: 8px 10px;
+      font-weight: 500;
+      color: $ng-select-dropdown-optgroup-text;
+      cursor: pointer;
+      &.ng-option-disabled {
+        cursor: default;
+      }
+      &.ng-option-marked {
+        background-color: $ng-select-marked;
+      }
+      &.ng-option-selected,
+      &.ng-option-selected.ng-option-marked {
+        color: $ng-select-dropdown-optgroup-marked;
+        background-color: $ng-select-selected;
+        font-weight: 600;
+      }
+    }
+    .ng-option {
+      background-color: $ng-select-dropdown-option-bg;
+      color: $ng-select-dropdown-option-text;
+      padding: 8px 10px;
+      &.ng-option-selected,
+      &.ng-option-selected.ng-option-marked {
+        color: $ng-select-selected-text;
+        background-color: $ng-select-selected;
+        .ng-option-label {
+          font-weight: 600;
+        }
+      }
+      &.ng-option-marked {
+        background-color: $ng-select-marked;
+        color: $ng-select-marked-text;
+      }
+      &.ng-option-disabled {
+        color: $ng-select-dropdown-option-disabled;
+      }
+      &.ng-option-child {
+        padding-left: 22px;
+        @include rtl {
+          padding-right: 22px;
+          padding-left: 0;
+        }
+      }
+      .ng-tag-label {
+        font-size: 80%;
+        font-weight: 400;
+        padding-right: 5px;
+        @include rtl {
+          padding-left: 5px;
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  @include rtl {
+    direction: rtl;
+    text-align: right;
+  }
+}

libs/components/src/shared/button-like.abstraction.ts

@@ -0,0 +1,4 @@
+export abstract class ButtonLikeAbstraction {
+  loading: boolean;
+  disabled: boolean;
+}

libs/components/src/stories/colors.stories.mdx

@@ -49,11 +49,18 @@ export const Table = (args) => (
       {Row("info-500")}
       {Row("info-700")}
     </tbody>
+    <thead>
+      <tr>
+        <th>Text</th>
+        <th class="tw-w-20"></th>
+      </tr>
+    </thead>
     <tbody>
       {Row("text-main")}
       {Row("text-muted")}
       {Row("text-contrast")}
       {Row("text-alt2")}
+      {Row("text-code")}
     </tbody>
   </table>
 );

libs/components/src/styles.scss

@@ -8,40 +8,42 @@ $card-icons-base: "../images/cards/";
 
 @import "@angular/cdk/overlay-prebuilt.css";
 
-@import "~bootstrap/scss/_functions";
-@import "~bootstrap/scss/_variables";
-@import "~bootstrap/scss/_mixins";
-@import "~bootstrap/scss/_root";
-@import "~bootstrap/scss/_reboot";
-@import "~bootstrap/scss/_type";
-@import "~bootstrap/scss/_images";
-@import "~bootstrap/scss/_code";
-@import "~bootstrap/scss/_grid";
-@import "~bootstrap/scss/_tables";
-@import "~bootstrap/scss/_forms";
-@import "~bootstrap/scss/_buttons";
-@import "~bootstrap/scss/_transitions";
-@import "~bootstrap/scss/_dropdown";
-@import "~bootstrap/scss/_button-group";
-@import "~bootstrap/scss/_input-group";
-@import "~bootstrap/scss/_custom-forms";
-@import "~bootstrap/scss/_nav";
-@import "~bootstrap/scss/_navbar";
-@import "~bootstrap/scss/_card";
-@import "~bootstrap/scss/_breadcrumb";
-@import "~bootstrap/scss/_pagination";
-@import "~bootstrap/scss/_badge";
-@import "~bootstrap/scss/_jumbotron";
-@import "~bootstrap/scss/_alert";
-@import "~bootstrap/scss/_progress";
-@import "~bootstrap/scss/_media";
-@import "~bootstrap/scss/_list-group";
-@import "~bootstrap/scss/_close";
-//@import "~bootstrap/scss/_toasts";
-@import "~bootstrap/scss/_modal";
-@import "~bootstrap/scss/_tooltip";
-@import "~bootstrap/scss/_popover";
-@import "~bootstrap/scss/_carousel";
-@import "~bootstrap/scss/_spinners";
-@import "~bootstrap/scss/_utilities";
-@import "~bootstrap/scss/_print";
+@import "bootstrap/scss/_functions";
+@import "bootstrap/scss/_variables";
+@import "bootstrap/scss/_mixins";
+@import "bootstrap/scss/_root";
+@import "bootstrap/scss/_reboot";
+@import "bootstrap/scss/_type";
+@import "bootstrap/scss/_images";
+@import "bootstrap/scss/_code";
+@import "bootstrap/scss/_grid";
+@import "bootstrap/scss/_tables";
+@import "bootstrap/scss/_forms";
+@import "bootstrap/scss/_buttons";
+@import "bootstrap/scss/_transitions";
+@import "bootstrap/scss/_dropdown";
+@import "bootstrap/scss/_button-group";
+@import "bootstrap/scss/_input-group";
+@import "bootstrap/scss/_custom-forms";
+@import "bootstrap/scss/_nav";
+@import "bootstrap/scss/_navbar";
+@import "bootstrap/scss/_card";
+@import "bootstrap/scss/_breadcrumb";
+@import "bootstrap/scss/_pagination";
+@import "bootstrap/scss/_badge";
+@import "bootstrap/scss/_jumbotron";
+@import "bootstrap/scss/_alert";
+@import "bootstrap/scss/_progress";
+@import "bootstrap/scss/_media";
+@import "bootstrap/scss/_list-group";
+@import "bootstrap/scss/_close";
+//@import "bootstrap/scss/_toasts";
+@import "bootstrap/scss/_modal";
+@import "bootstrap/scss/_tooltip";
+@import "bootstrap/scss/_popover";
+@import "bootstrap/scss/_carousel";
+@import "bootstrap/scss/_spinners";
+@import "bootstrap/scss/_utilities";
+@import "bootstrap/scss/_print";
+
+@import "multi-select/scss/bw.theme.scss";

libs/components/src/tw-theme.css

@@ -30,6 +30,7 @@
   --color-text-muted: 109 117 126;
   --color-text-contrast: 255 255 255;
   --color-text-alt2: 255 255 255;
+  --color-text-code: 192 17 118;
 
   --tw-ring-offset-color: #ffffff;
 }
@@ -70,6 +71,7 @@
   --color-text-muted: 186 192 206;
   --color-text-contrast: 25 30 38;
   --color-text-alt2: 255 255 255;
+  --color-text-code: 240 141 199;
 
   --tw-ring-offset-color: #1f242e;
 }

libs/components/src/utils/function-to-observable.spec.ts

@@ -0,0 +1,103 @@
+import { lastValueFrom, Observable, of, throwError } from "rxjs";
+
+import { functionToObservable } from "./function-to-observable";
+
+describe("functionToObservable", () => {
+  it("should execute function when calling", () => {
+    const func = jest.fn();
+
+    functionToObservable(func);
+
+    expect(func).toHaveBeenCalled();
+  });
+
+  it("should not subscribe when calling", () => {
+    let hasSubscribed = false;
+    const underlyingObservable = new Observable(() => {
+      hasSubscribed = true;
+    });
+    const funcReturningObservable = () => underlyingObservable;
+
+    functionToObservable(funcReturningObservable);
+
+    expect(hasSubscribed).toBe(false);
+  });
+
+  it("should subscribe to underlying when subscribing to outer", () => {
+    let hasSubscribed = false;
+    const underlyingObservable = new Observable(() => {
+      hasSubscribed = true;
+    });
+    const funcReturningObservable = () => underlyingObservable;
+    const outerObservable = functionToObservable(funcReturningObservable);
+
+    outerObservable.subscribe();
+
+    expect(hasSubscribed).toBe(true);
+  });
+
+  it("should return value when using sync function", async () => {
+    const value = Symbol();
+    const func = () => value;
+    const observable = functionToObservable(func);
+
+    const result = await lastValueFrom(observable);
+
+    expect(result).toBe(value);
+  });
+
+  it("should return value when using async function", async () => {
+    const value = Symbol();
+    const func = () => Promise.resolve(value);
+    const observable = functionToObservable(func);
+
+    const result = await lastValueFrom(observable);
+
+    expect(result).toBe(value);
+  });
+
+  it("should return value when using observable", async () => {
+    const value = Symbol();
+    const func = () => of(value);
+    const observable = functionToObservable(func);
+
+    const result = await lastValueFrom(observable);
+
+    expect(result).toBe(value);
+  });
+
+  it("should throw error when using sync function", async () => {
+    const error = new Error();
+    const func = () => {
+      throw error;
+    };
+    const observable = functionToObservable(func);
+
+    let thrown: unknown;
+    observable.subscribe({ error: (err: unknown) => (thrown = err) });
+
+    expect(thrown).toBe(thrown);
+  });
+
+  it("should return value when using async function", async () => {
+    const error = new Error();
+    const func = () => Promise.reject(error);
+    const observable = functionToObservable(func);
+
+    let thrown: unknown;
+    observable.subscribe({ error: (err: unknown) => (thrown = err) });
+
+    expect(thrown).toBe(thrown);
+  });
+
+  it("should return value when using observable", async () => {
+    const error = new Error();
+    const func = () => throwError(() => error);
+    const observable = functionToObservable(func);
+
+    let thrown: unknown;
+    observable.subscribe({ error: (err: unknown) => (thrown = err) });
+
+    expect(thrown).toBe(thrown);
+  });
+});

libs/components/src/utils/function-to-observable.ts

@@ -0,0 +1,27 @@
+import { from, Observable, of, throwError } from "rxjs";
+
+import { Utils } from "@bitwarden/common/misc/utils";
+
+export type FunctionReturningAwaitable =
+  | (() => unknown)
+  | (() => Promise<unknown>)
+  | (() => Observable<unknown>);
+
+export function functionToObservable(func: FunctionReturningAwaitable): Observable<unknown> {
+  let awaitable: unknown;
+  try {
+    awaitable = func();
+  } catch (error) {
+    return throwError(() => error);
+  }
+
+  if (Utils.isPromise(awaitable)) {
+    return from(awaitable);
+  }
+
+  if (awaitable instanceof Observable) {
+    return awaitable;
+  }
+
+  return of(awaitable);
+}

libs/components/tailwind.config.base.js

@@ -50,6 +50,7 @@ module.exports = {
         muted: rgba("--color-text-muted"),
         contrast: rgba("--color-text-contrast"),
         alt2: rgba("--color-text-alt2"),
+        code: rgba("--color-text-code"),
       },
       background: {
         DEFAULT: rgba("--color-background"),
@@ -62,6 +63,7 @@ module.exports = {
       muted: rgba("--color-text-muted"),
       contrast: rgba("--color-text-contrast"),
       alt2: rgba("--color-text-alt2"),
+      code: rgba("--color-text-code"),
       success: rgba("--color-success-500"),
       danger: rgba("--color-danger-500"),
       warning: rgba("--color-warning-500"),