[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

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>