[CL-221] Add chip-select component (#9021)

---------

Co-authored-by: William Martin <contact@willmartian.com>

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

@@ -0,0 +1,91 @@
+<div
+  bitTypography="body2"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
+  [ngClass]="[
+    selectedOption
+      ? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
+      : 'tw-bg-transparent tw-text-muted tw-gap-1.5',
+    focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : ''
+  ]"
+>
+  <!-- Primary button -->
+  <button
+    type="button"
+    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
+    [ngClass]="{
+      'tw-cursor-not-allowed': disabled
+    }"
+    [bitMenuTriggerFor]="menu"
+    [disabled]="disabled"
+    [title]="label"
+    #menuTrigger="menuTrigger"
+  >
+    <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
+    <span class="tw-truncate">{{ label }}</span>
+    <i
+      *ngIf="!selectedOption"
+      class="bwi"
+      [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
+    ></i>
+  </button>
+
+  <!-- Close button -->
+  <button
+    *ngIf="selectedOption"
+    type="button"
+    [attr.aria-label]="'removeItem' | i18n: label"
+    [disabled]="disabled"
+    class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
+    [ngClass]="{
+      'tw-cursor-not-allowed': disabled
+    }"
+    (click)="clear()"
+  >
+    <i class="bwi bwi-close tw-text-xs"></i>
+  </button>
+</div>
+
+<bit-menu #menu>
+  <div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
+    <ng-container *ngIf="getParent(renderedOptions) as parent">
+      <button
+        type="button"
+        bitMenuItem
+        (click)="viewOption(parent, $event)"
+        [title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
+      >
+        <i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
+        {{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
+      </button>
+
+      <button
+        type="button"
+        bitMenuItem
+        (click)="selectOption(renderedOptions, $event)"
+        [title]="'viewItemsIn' | i18n: renderedOptions.label"
+      >
+        <i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
+        {{ "viewItemsIn" | i18n: renderedOptions.label }}
+      </button>
+    </ng-container>
+
+    <button
+      type="button"
+      bitMenuItem
+      *ngFor="let option of renderedOptions.children"
+      (click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
+      [disabled]="option.disabled"
+      [title]="option.label"
+    >
+      <i
+        *ngIf="option.icon"
+        slot="start"
+        class="bwi"
+        [ngClass]="option.icon"
+        aria-hidden="true"
+      ></i>
+      {{ option.label }}
+      <i *ngIf="option.children?.length" slot="end" class="bwi bwi-angle-right"></i>
+    </button>
+  </div>
+</bit-menu>