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

---------

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

apps/browser/src/_locales/en/messages.json

@@ -3229,7 +3229,37 @@
   "errorAssigningTargetFolder": {
     "message": "Error assigning target folder."
   },
+  "viewItemsIn": {
+    "message": "View items in $NAME$",
+    "description": "Button to view the contents of a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
+  "backTo": {
+    "message": "Back to $NAME$",
+    "description": "Navigate back to a previous folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
   "new": {
     "message": "New"
+  },
+  "removeItem": {
+    "message": "Remove $NAME$",
+    "description": "Remove a selected option, such as a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
   }
 }

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

@@ -2822,5 +2822,39 @@
   },
   "errorAssigningTargetFolder": {
     "message": "Error assigning target folder."
+  },
+  "viewItemsIn": {
+    "message": "View items in $NAME$",
+    "description": "Button to view the contents of a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
+  "backTo": {
+    "message": "Back to $NAME$",
+    "description": "Navigate back to a previous folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
+  "back": {
+    "message": "Back",
+    "description": "Button text to navigate back"
+  },
+  "removeItem": {
+    "message": "Remove $NAME$",
+    "description": "Remove a selected option, such as a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
   }
 }

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

@@ -8199,6 +8199,40 @@
   "manageBillingFromProviderPortalMessage": {
     "message": "Manage billing from the Provider Portal"
   },
+  "viewItemsIn": {
+    "message": "View items in $NAME$",
+    "description": "Button to view the contents of a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
+  "backTo": {
+    "message": "Back to $NAME$",
+    "description": "Navigate back to a previous folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
+  "back": {
+    "message": "Back",
+    "description": "Button text to navigate back"
+  },
+  "removeItem": {
+    "message": "Remove $NAME$",
+    "description": "Remove a selected option, such as a folder or collection",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Work"
+      }
+    }
+  },
   "viewInfo": {
     "message": "View info"
   },

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>

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

@@ -0,0 +1,197 @@
+import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+import { ButtonModule } from "../button";
+import { IconButtonModule } from "../icon-button";
+import { MenuModule } from "../menu";
+import { Option } from "../select/option";
+import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
+
+/** An option that will be showed in the overlay menu of `ChipSelectComponent` */
+export type ChipSelectOption<T> = Option<T> & {
+  /** The options that will be nested under this option */
+  children?: ChipSelectOption<T>[];
+};
+
+@Component({
+  selector: "bit-chip-select",
+  templateUrl: "chip-select.component.html",
+  standalone: true,
+  imports: [SharedModule, ButtonModule, IconButtonModule, MenuModule, TypographyModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: ChipSelectComponent,
+      multi: true,
+    },
+  ],
+})
+export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
+  /** Text to show when there is no selected option */
+  @Input({ required: true }) placeholderText: string;
+
+  /** Icon to show when there is no selected option or the selected option does not have an icon */
+  @Input() placeholderIcon: string;
+
+  private _options: ChipSelectOption<T>[];
+  /** The select options to render */
+  @Input({ required: true })
+  get options(): ChipSelectOption<T>[] {
+    return this._options;
+  }
+  set options(value: ChipSelectOption<T>[]) {
+    this._options = value;
+    this.initializeRootTree(value);
+  }
+
+  /** Disables the entire chip */
+  @Input({ transform: booleanAttribute }) disabled = false;
+
+  /**
+   * We have `:focus-within` and `:focus-visible` but no `:focus-visible-within`
+   */
+  protected focusVisibleWithin = signal(false);
+  @HostListener("focusin", ["$event.target"])
+  onFocusIn(target: HTMLElement) {
+    this.focusVisibleWithin.set(target.matches(".fvw-target:focus-visible"));
+  }
+  @HostListener("focusout")
+  onFocusOut() {
+    this.focusVisibleWithin.set(false);
+  }
+
+  /** Tree constructed from `this.options` */
+  private rootTree: ChipSelectOption<T>;
+
+  /** Options that are currently displayed in the menu */
+  protected renderedOptions: ChipSelectOption<T>;
+
+  /** The option that is currently selected by the user */
+  protected selectedOption: ChipSelectOption<T>;
+
+  /** The label to show in the chip button */
+  protected get label(): string {
+    return this.selectedOption?.label || this.placeholderText;
+  }
+
+  /** The icon to show in the chip button */
+  protected get icon(): string {
+    return this.selectedOption?.icon || this.placeholderIcon;
+  }
+
+  protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
+    this.selectedOption = option;
+    this.onChange(option);
+  }
+
+  protected viewOption(option: ChipSelectOption<T>, event: MouseEvent) {
+    this.renderedOptions = option;
+
+    /** We don't want the menu to close */
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+  /** Click handler for the X button */
+  protected clear() {
+    this.renderedOptions = this.rootTree;
+    this.selectedOption = null;
+    this.onChange(null);
+  }
+
+  /**
+   * Find a `ChipSelectOption` by its value
+   * @param tree the root tree to search
+   * @param value the option value to look for
+   * @returns the `ChipSelectOption` associated with the provided value, or null if not found
+   */
+  private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null {
+    let result = null;
+    if (tree.value === value) {
+      return tree;
+    }
+
+    if (Array.isArray(tree.children) && tree.children.length > 0) {
+      tree.children.some((node) => {
+        result = this.findOption(node, value);
+        return result;
+      });
+    }
+    return result;
+  }
+
+  /** Maps child options to their parent, to enable navigating up the tree */
+  private childParentMap = new Map<ChipSelectOption<T>, ChipSelectOption<T>>();
+
+  /** For each descendant in the provided `tree`, update `_parent` to be a refrence to the parent node. This allows us to navigate back in the menu. */
+  private markParents(tree: ChipSelectOption<T>) {
+    tree.children?.forEach((child) => {
+      this.childParentMap.set(child, tree);
+      this.markParents(child);
+    });
+  }
+
+  protected getParent(option: ChipSelectOption<T>): ChipSelectOption<T> | null {
+    return this.childParentMap.get(option);
+  }
+
+  private initializeRootTree(options: ChipSelectOption<T>[]) {
+    /** Since the component is just initialized with an array of options, we need to construct the root tree. */
+    const root: ChipSelectOption<T> = {
+      children: options,
+      value: null,
+    };
+    this.markParents(root);
+    this.rootTree = root;
+    this.renderedOptions = this.rootTree;
+  }
+
+  /** Control Value Accessor */
+
+  private notifyOnChange?: (value: T) => void;
+  private notifyOnTouched?: () => void;
+
+  /** Implemented as part of NG_VALUE_ACCESSOR */
+  writeValue(obj: T): void {
+    this.selectedOption = this.findOption(this.rootTree, obj);
+
+    /** Update the rendered options for next time the menu is opened */
+    this.renderedOptions = this.selectedOption
+      ? this.getParent(this.selectedOption)
+      : this.rootTree;
+  }
+
+  /** Implemented as part of NG_VALUE_ACCESSOR */
+  registerOnChange(fn: (value: T) => 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(option: Option<T> | null) {
+    if (!this.notifyOnChange) {
+      return;
+    }
+
+    this.notifyOnChange(option?.value);
+  }
+
+  /** Implemented as part of NG_VALUE_ACCESSOR */
+  protected onBlur() {
+    if (!this.notifyOnTouched) {
+      return;
+    }
+
+    this.notifyOnTouched();
+  }
+}

libs/components/src/chip-select/chip-select.mdx

@@ -0,0 +1,113 @@
+import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
+
+import * as stories from "./chip-select.stories";
+
+<Meta of={stories} />
+
+```ts
+import { ChipSelectComponent } from "@bitwarden/components";
+```
+
+# Chip Select
+
+`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables.
+
+<Canvas>
+  <Story of={stories.Default} />
+</Canvas>
+
+## Options
+
+Options are passed to the select via an `options` input.
+
+```ts
+@Component({
+  selector: `
+    <bit-chip-select options=[options]></bit-chip-select>
+  `,
+})
+class MyComponent {
+  protected options = [
+    {
+      label: "Foo",
+      value: "foo",
+      icon: "bwi-folder",
+    },
+    {
+      label: "Bar",
+      value: "bar",
+      icon: "bwi-exclamation-triangle tw-text-danger",
+    },
+    {
+      label: "Baz",
+      value: "baz",
+      disabled: true,
+    },
+  ];
+}
+```
+
+### Option Trees
+
+Nested trees of options are also supported by passing an array of options to `children`.
+
+```ts
+const options = [
+  {
+    label: "Foo0",
+    value: "foo0",
+    icon: "bwi-folder",
+    children: [
+      {
+        label: "Foo1",
+        value: "foo1",
+        icon: "bwi-folder",
+        children: [
+          {
+            label: "Foo2",
+            value: "foo2",
+            icon: "bwi-folder",
+            children: [
+              {
+                label: "Foo3",
+                value: "foo3",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Bar",
+    value: "bar",
+    icon: "bwi-folder",
+  },
+  {
+    label: "Baz",
+    value: "baz",
+    icon: "bwi-folder",
+  },
+];
+```
+
+<Canvas>
+  <Story of={stories.NestedOptions} />
+</Canvas>
+
+## Placeholder Content
+
+Placeholder content is shown when no item is selected.
+
+```html
+<bit-chip-select placeholderText="Foo" placeholderIcon="bwi-key"> </bit-chip-select>
+```
+
+## Reading the current value
+
+The component implements `ControlValueAccessor`, so the current selected value can be read via
+`ngModel` or `[formControlName]`.
+
+```html
+<bit-chip-select [(ngModel)]="..."></bit-chip-select>
+```

libs/components/src/chip-select/chip-select.stories.ts

@@ -0,0 +1,160 @@
+import { FormsModule } from "@angular/forms";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { getAllByRole, userEvent } from "@storybook/testing-library";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { MenuModule } from "../menu";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { ChipSelectComponent } from "./chip-select.component";
+
+export default {
+  title: "Component Library/Chip Select",
+  component: ChipSelectComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [MenuModule, FormsModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              viewItemsIn: (name) => `View items in ${name}`,
+              back: "Back",
+              backTo: (name) => `Back to ${name}`,
+              removeItem: (name) => `Remove ${name}`,
+            });
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<ChipSelectComponent & { value: any }>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: /* html */ `
+      <bit-chip-select 
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        [ngModel]="value"
+      ></bit-chip-select>
+    `,
+  }),
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+      },
+      {
+        label: "Bar",
+        value: "bar",
+        icon: "bwi-exclamation-triangle tw-text-danger",
+      },
+      {
+        label: "Baz",
+        value: "baz",
+        disabled: true,
+      },
+    ],
+  },
+  play: async (context) => {
+    const canvas = context.canvasElement;
+    const buttons = getAllByRole(canvas, "button");
+    await userEvent.click(buttons[0]);
+  },
+};
+
+export const NestedOptions: Story = {
+  ...Default,
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+        children: [
+          {
+            label: "Foo1",
+            value: "foo1",
+            icon: "bwi-folder",
+            children: [
+              {
+                label: "Foo2",
+                value: "foo2",
+                icon: "bwi-folder",
+                children: [
+                  {
+                    label: "Foo3",
+                    value: "foo3",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Bar",
+        value: "bar",
+        icon: "bwi-folder",
+      },
+      {
+        label: "Baz",
+        value: "baz",
+        icon: "bwi-folder",
+      },
+    ],
+    value: "foo1",
+  },
+};
+
+export const TextOverflow: Story = {
+  ...Default,
+  args: {
+    options: [
+      {
+        label: "Fooooooooooooooooooooooooooooooooooooooooooooo",
+        value: "foo",
+      },
+    ],
+    value: "foo",
+  },
+};
+
+export const Disabled: Story = {
+  ...Default,
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: /* html */ `
+      <bit-chip-select 
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        [ngModel]="value"
+        disabled
+      ></bit-chip-select>
+    `,
+  }),
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+      },
+    ],
+    value: "foo",
+  },
+};

libs/components/src/chip-select/index.ts

@@ -0,0 +1 @@
+export * from "./chip-select.component";

libs/components/src/index.ts

@@ -9,6 +9,7 @@ export { ButtonType } from "./shared/button-like.abstraction";
 export * from "./callout";
 export * from "./card";
 export * from "./checkbox";
+export * from "./chip-select";
 export * from "./color-password";
 export * from "./container";
 export * from "./dialog";

libs/components/src/menu/menu-item.component.html

@@ -0,0 +1,11 @@
+<div class="tw-flex tw-w-full tw-justify-between tw-items-center tw-gap-2">
+  <span class="tw-flex tw-gap-2 tw-items-center tw-overflow-hidden">
+    <span #startSlot [ngClass]="{ 'tw-hidden': startSlot.childElementCount === 0 }">
+      <ng-content select="[slot=start]"></ng-content>
+    </span>
+    <span class="tw-truncate"><ng-content></ng-content></span>
+  </span>
+  <span #endSlot [ngClass]="{ 'tw-hidden': endSlot.childElementCount === 0 }">
+    <ng-content select="[slot=end]"></ng-content>
+  </span>
+</div>

libs/components/src/menu/menu-item.directive.ts

@@ -1,12 +1,14 @@
 import { FocusableOption } from "@angular/cdk/a11y";
-import { Directive, ElementRef, HostBinding } from "@angular/core";
+import { Component, ElementRef, HostBinding } from "@angular/core";
 
-@Directive({
+@Component({
   selector: "[bitMenuItem]",
+  templateUrl: "menu-item.component.html",
 })
 export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [
     "tw-block",
+    "tw-w-full",
     "tw-py-1",
     "tw-px-4",
     "!tw-text-main",
@@ -24,6 +26,9 @@ export class MenuItemDirective implements FocusableOption {
     "focus-visible:tw-ring-primary-700",
     "active:!tw-ring-0",
     "active:!tw-ring-offset-0",
+    "disabled:!tw-text-muted",
+    "disabled:hover:tw-bg-background",
+    "disabled:tw-cursor-not-allowed",
   ];
   @HostBinding("attr.role") role = "menuitem";
   @HostBinding("tabIndex") tabIndex = "-1";

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -16,13 +16,16 @@ import { MenuComponent } from "./menu.component";
 
 @Directive({
   selector: "[bitMenuTriggerFor]",
+  exportAs: "menuTrigger",
 })
 export class MenuTriggerForDirective implements OnDestroy {
   @HostBinding("attr.aria-expanded") isOpen = false;
   @HostBinding("attr.aria-haspopup") get hasPopup(): "menu" | "dialog" {
     return this.menu?.ariaRole || "menu";
   }
-  @HostBinding("attr.role") role = "button";
+  @HostBinding("attr.role")
+  @Input()
+  role = "button";
 
   @Input("bitMenuTriggerFor") menu: MenuComponent;
 

libs/components/src/menu/menu.mdx

@@ -10,7 +10,26 @@ Menus are used to help organize related options. Menus are most often used for i
 tables.
 
 <Story of={stories.ClosedMenu} />
-<Controls />
+
+<br />
+
+## Slots
+
+`bitMenuItem` supports the following slots:
+
+| Slot           | Description                                         |
+| -------------- | --------------------------------------------------- |
+| default        | primary text or arbitrary content                   |
+| `slot="start"` | commonly an icon or avatar; before the default slot |
+| `slot="end"`   | commonly an icon; after the default slot            |
+
+```html
+<button type="button" bitMenuItem>
+  <i class="bwi bwi-key" slot="start"></i>
+  Menu item with icons
+  <i class="bwi bwi-angle-right" slot="end"></i>
+</button>
+```
 
 ## Accessibility
 

libs/components/src/menu/menu.stories.ts

@@ -35,13 +35,21 @@ type Story = StoryObj<MenuTriggerForDirective>;
 export const OpenMenu: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <bit-menu #myMenu="menuComponent">
         <a href="#" bitMenuItem>Anchor link</a>
         <a href="#" bitMenuItem>Another link</a>
         <button type="button" bitMenuItem>Button</button>
         <bit-menu-divider></bit-menu-divider>
-        <button type="button" bitMenuItem>Button after divider</button>
+        <button type="button" bitMenuItem>
+          <i class="bwi bwi-key" slot="start"></i>
+          Button with icons
+          <i class="bwi bwi-angle-right" slot="end"></i>
+        </button>
+        <button type="button" bitMenuItem disabled>
+          <i class="bwi bwi-clone" slot="start"></i>
+          Disabled button
+        </button>
       </bit-menu>
   
       <div class="tw-h-40">
@@ -55,7 +63,7 @@ export const OpenMenu: Story = {
 export const ClosedMenu: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <div class="tw-h-40">
         <button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
       </div>
@@ -65,7 +73,15 @@ export const ClosedMenu: Story = {
         <a href="#" bitMenuItem>Another link</a>
         <button type="button" bitMenuItem>Button</button>
         <bit-menu-divider></bit-menu-divider>
-        <button type="button" bitMenuItem>Button after divider</button>
+        <button type="button" bitMenuItem>
+          <i class="bwi bwi-key" slot="start"></i>
+          Button with icons
+          <i class="bwi bwi-angle-right" slot="end"></i>
+        </button>
+        <button type="button" bitMenuItem disabled>
+          <i class="bwi bwi-clone" slot="start"></i>
+          Disabled button
+        </button>
       </bit-menu>`,
   }),
 };

libs/components/src/select/option.component.ts

@@ -1,5 +1,4 @@
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Component, Input, booleanAttribute } from "@angular/core";
-import { Component, Input } from "@angular/core";
 
 import { Option } from "./option";
 
@@ -11,18 +10,12 @@ export class OptionComponent<T = unknown> implements Option<T> {
   @Input()
   icon?: string;
 
-  @Input()
+  @Input({ required: true })
-  value?: T = undefined;
+  value: T;
 
-  @Input()
+  @Input({ required: true })
-  label?: string;
+  label: string;
 
-  private _disabled = false;
+  @Input({ transform: booleanAttribute })
-  @Input()
+  disabled: boolean;
-  get disabled() {
-    return this._disabled;
-  }
-  set disabled(value: boolean | "") {
-    this._disabled = coerceBooleanProperty(value);
-  }
 }

libs/components/src/select/option.ts

@@ -1,8 +1,6 @@
-import { TemplateRef } from "@angular/core";
-
 export interface Option<T> {
   icon?: string;
-  value?: T;
+  value: T | null;
   label?: string;
-  content?: TemplateRef<unknown>;
+  disabled?: boolean;
 }