[EC-667] Collection modal add search function (#4291)

* [EC-667] feat: scaffold new select component

* [EC-667] feat: sort of working implementation

* [EC-667] feat: support for using in forms

* [EC-667] feat: add bit-select example to full form

* [EC-667] fix: broken aria label connetion

* [EC-667] fix: web not building

* [EC-667] fix: dropdown getting trapped in dialog

* [EC-667] fix: select not emitting correct value

* [EC-667] feat: add collection icon to options

* [EC-667] feat: add default select placeholder translation

* [EC-667] fix: undefined handling

* [EC-667] fix: value vs options race condition

* [EC-667] feat: remove x and add "no collection" option

* [EC-667] chore: add country list disclaimer

* chore: clean up comments

* [EC-667] chore: cleanup commented import

* [EC-667] fix: input text color not applying to single-select

libs/components/src/form/form.stories.ts

@@ -17,8 +17,11 @@ import { FormControlModule } from "../form-control";
 import { FormFieldModule } from "../form-field";
 import { InputModule } from "../input/input.module";
 import { RadioButtonModule } from "../radio-button";
+import { SelectModule } from "../select";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
+import { countries } from "./countries";
+
 export default {
   title: "Component Library/Form",
   decorators: [
@@ -32,12 +35,14 @@ export default {
         FormControlModule,
         CheckboxModule,
         RadioButtonModule,
+        SelectModule,
       ],
       providers: [
         {
           provide: I18nService,
           useFactory: () => {
             return new I18nMockService({
+              selectPlaceholder: "-- Select --",
               required: "required",
               checkboxRequired: "Option is required",
               inputRequired: "Input is required.",
@@ -60,6 +65,7 @@ const fb = new FormBuilder();
 const exampleFormObj = fb.group({
   name: ["", [Validators.required]],
   email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
+  country: [undefined as string | undefined, [Validators.required]],
   terms: [false, [Validators.requiredTrue]],
   updates: ["yes"],
 });
@@ -90,6 +96,13 @@ const FullExampleTemplate: Story = (args) => ({
         <input bitInput formControlName="email" />
       </bit-form-field>
 
+      <bit-form-field>
+        <bit-label>Country</bit-label>
+        <bit-select formControlName="country">
+          <bit-option *ngFor="let country of countries" [value]="country.value" [label]="country.name"></bit-option>
+        </bit-select>
+      </bit-form-field>
+
       <bit-form-control>
         <bit-label>Agree to terms</bit-label>
         <input type="checkbox" bitCheckbox formControlName="terms">
@@ -115,3 +128,6 @@ const FullExampleTemplate: Story = (args) => ({
 });
 
 export const FullExample = FullExampleTemplate.bind({});
+FullExample.args = {
+  countries,
+};