[CL-27] [EC-455] Ng-Select Integration (#3383)

* [CL-27] Select -> Library initial commit

* [EC-455] NG-Select Integration

* Prettier

* [EC-455] [CL-27] Add option for removing items on close // Added loading/no item found text defaults // Fixed disabled bg color // Added templated loading icon

* [EC-455] [CL-27] Removed enter override // Fixed backspace removal // Clearing search on add // Gave label select states

* [EC-455] [CL-27] Added copy from text to theme

* [EC-455] [CL-27] Changed SimpleItemView to type - removed creation logic to shift responsibility to hosting component

* [EC-455] [CL-27] Updated custom theme to include CSS variable colors

* [CL-27] [EC-455] Initial pass at form field control // initial template for custom value accessor

* [EC-455] working baseItem input

* [EC-455] working value accessor

* [EC-455] Completed FormFieldControl implemntation // fixed badge disabled bug

* [EC-455] Prettier

* [EC-455] Removed obsolete variables

* [EC-455] Private value accessor functions

* [EC-455] Cleaned up default variables

* [EC-455] Imported Shared module to access i18n pipe // cleaned up string refs

* [EC-455] Adjusted padding for clear button // Changed hover color to text-main // Fixed pipe import on stories

* [EC-455] FormObj factory

* [EC-455] FormObj factory

* [EC-455] Updated FormFieldModule import/export statements

* [EC-455] Null check ngControl // added strings

* [EC-455] Fixed remaining null check // Added standalone story & input

* [EC-455] Actually adding the null check

* [EC-455] Removed injector logic // Removed Value Accessor PROVIDER // Self-assigned value accessor

* [EC-455] Fixed ID copy pasta // Forwarded desribed by to focusable input // Abstracted input for label

* [EC-455] Prettier

apps/web/src/locales/en/messages.json

@@ -5390,5 +5390,17 @@
   },
   "numberOfUsers": {
     "message": "Number of users"
+  },
+  "multiSelectPlaceholder": {
+    "message": "-- Type to Filter --"
+  },
+  "multiSelectLoading": {
+    "message": "Retrieving options..."
+  },
+  "multiSelectNotFound": {
+    "message": "No items found"
+  },
+  "multiSelectClearAll": {
+    "message": "Clear all"
   }
 }

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/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/styles.scss

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

package-lock.json

@@ -27,6 +27,7 @@
         "@koa/router": "^10.1.1",
         "@microsoft/signalr": "^6.0.7",
         "@microsoft/signalr-protocol-msgpack": "^6.0.7",
+        "@ng-select/ng-select": "^9.0.2",
         "big-integer": "^1.6.51",
         "bootstrap": "4.6.0",
         "braintree-web-drop-in": "^1.33.1",
@@ -5216,6 +5217,23 @@
         "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
+    "node_modules/@ng-select/ng-select": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-9.0.2.tgz",
+      "integrity": "sha512-xdNiz/kgkMWYW1qFtk/337xDk/cmfEbSVtTFxWIM2OnIX1XsQOnTlGiBYces1TsMfqS68HjAvljEkj8QIGN2Lg==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 12.20.0",
+        "npm": ">= 6.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "<15.0.0",
+        "@angular/core": "<15.0.0",
+        "@angular/forms": "<15.0.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.1.0.tgz",
@@ -46775,6 +46793,14 @@
       "integrity": "sha512-Rscrg0BO4AKqFX2mKd8C68Wh3TkSHXqF2PZp+utVoLV+PTQnGVMwHedtIHBcFoq1Ij3I4yETMgSFSdAR+lp++Q==",
       "dev": true
     },
+    "@ng-select/ng-select": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-9.0.2.tgz",
+      "integrity": "sha512-xdNiz/kgkMWYW1qFtk/337xDk/cmfEbSVtTFxWIM2OnIX1XsQOnTlGiBYces1TsMfqS68HjAvljEkj8QIGN2Lg==",
+      "requires": {
+        "tslib": "^2.3.1"
+      }
+    },
     "@ngtools/webpack": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.1.0.tgz",
@@ -47213,7 +47239,7 @@
         "postcss": "^7.0.36",
         "postcss-loader": "^4.2.0",
         "raw-loader": "^4.0.2",
-        "react": "^18.0.0",
+        "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "read-pkg-up": "^7.0.1",
         "regenerator-runtime": "^0.13.7",

package.json

@@ -152,6 +152,7 @@
     "@koa/router": "^10.1.1",
     "@microsoft/signalr": "^6.0.7",
     "@microsoft/signalr-protocol-msgpack": "^6.0.7",
+    "@ng-select/ng-select": "^9.0.2",
     "big-integer": "^1.6.51",
     "bootstrap": "4.6.0",
     "braintree-web-drop-in": "^1.33.1",