npm package: @forter/dropdown
Description: Dropdown from Forter Components
Author: Forter Developers
Latest version: 4.3.33

# fc-dropdown

Control for picking values from a list.
<!-- Author: Benny Powers <benny.powers@forter.com> -->


⚠️⚠️ This component is deprecated and might be unstable. please use [fc-select](https://www.npmjs.com/package/@forter/select) or [fc-popover](https://www.npmjs.com/package/@forter/popover). ⚠️⚠️
`<fc-dropdown>` makes use of [`flatMap`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap), so users should take care to polyfill if they need to serve dropdowns to legacy browsers.

## Usage
```html
<fc-dropdown>
   <fc-dropdown-item>Eenie</fc-dropdown-item>
   <fc-dropdown-item>Meenie</fc-dropdown-item>
   <fc-dropdown-item>Miny</fc-dropdown-item>
   <fc-dropdown-item>Mo</fc-dropdown-item>
</fc-dropdown>
```

  ## Examples

```html
<!-- header -->
<fc-dropdown no-close-on-select>
   <fc-dropdown-header>Finance</fc-dropdown-header>
   <fc-dropdown-header>Support</fc-dropdown-header>
  </fc-dropdown>

<!-- icon -->

<fc-dropdown
    on-dropdown-opened="${onDropdownOpen}"
    on-dropdown-closed="${onDropdownClose}"
    on-select="${onSelect}">
  <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
  <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
  <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
  <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

<!-- filterableItems -->

<fc-dropdown no-close-on-select no-close-on-focusout label="Users" multi>
   <fc-button slot="trigger" icon="user">Assign to User</fc-button>

   <fc-input slot="filter" label="Filter" flat>
     <fc-icon icon="search" slot="prefix"></fc-icon>
   </fc-input>

   <fc-dropdown-header>Finance</fc-dropdown-header>

   <fc-dropdown-header>Support</fc-dropdown-header>

   <fc-button slot="action" intent="apply">Assign</fc-button>
</fc-dropdown>

<!-- stayOpened -->
<fc-dropdown
     no-close-on-select
     no-close-on-focusout
     on-dropdown-opened="${onDropdownOpen}"
     on-dropdown-closed="${onDropdownClose}"
     on-select="${onSelect}">
   <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

<!-- topLeft -->
<fc-dropdown style="position: fixed; bottom: calc(100vh - 50px)">
   <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

<!-- topRight -->
<fc-dropdown style="position: fixed; buttom: calc(100vh - 50px); left: calc(100vw - 50px);">
   <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

<!-- buttomLeft -->
<fc-dropdown style="position: fixed; top: calc(100vh - 50px)">
   <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

<!-- buttomRight -->
<fc-dropdown style="position: fixed; top: calc(100vh - 50px); left: calc(100vw - 50px);">
   <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
   <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
</fc-dropdown>

```

```js
import { html, render } from 'lit-html';
import '@forter/dropdown';

const itemTemplate = ({ icon, label = '' }) => html`
   <fc-dropdown-icon-item value="${label.toLowerCase()}">
     ${label}
   </fc-dropdown-icon-item>`

const dropDownTemplate = items => html`
   <fc-dropdown
       \@dropdown-open="${onDropdownOpen}"
       \@dropdown-close="${onDropdownClose}"
       \@select="${onSelect}">
     ${items.map(itemTemplate)}
   </fc-dropdown>
`;
render(dropDownTemplate([
   { icon: 'star', label: 'Eenie' },
   { icon: 'home', label: 'Meenie' },
   { icon: 'user', label: 'Miny' },
   { icon: 'add', label: 'Mo }',
]), document.body)
```

## Properties

| Property            | Attribute              | Type                                            | Default | Description                                      |
|---------------------|------------------------|-------------------------------------------------|---------|--------------------------------------------------|
| `delegateFilter`    | `delegate-filter`      | `boolean`                                       |         | When true, instead of filtering the list client side,<br />fire an event, in order to receive a new list from without. |
| `filter`            | `filter`               | `string`                                        |         |                                                  |
| `filterPredicate`   |                        | `(value: string, item: HTMLElement) => boolean` |         | Default predicate by which to filter items       |
| `horizontalOffset`  | `horizontal-offset`    | `number`                                        | 0       | Number of pixels on the horizontal axis to offset the dropdown list by. example: `50` |
| `label`             | `label`                | `string`                                        | "Items" | Label that describes the list of the items       |
| `noCloseOnFocusout` | `no-close-on-focusout` | `boolean`                                       | false   | When true, focusing outside the dropdown menu will not close the dropdown. |
| `noCloseOnSelect`   | `no-close-on-select`   | `boolean`                                       | false   | When true, selecting an item will not close the dropdown. |
| `opened`            | `opened`               | `"dropdown-opened" \| "dropdown-closed"`        |         |                                                  |
| `triggerLabel`      | `trigger-label`        | `string`                                        |         | Label for the default trigger                    |
| `verticalOffset`    | `vertical-offset`      | `number`                                        |         | Number of pixels on the vertical axis to offset the dropdown list by. example: `50` |

## Events

| Event             | Description                    |
|-------------------|--------------------------------|
| `dropdown-closed` | fired when the dropdown closes |
| `dropdown-opened` | fired when the dropdown opens  |

## Slots

| Name      | Description                      |
|-----------|----------------------------------|
|           | dropdown content                 |
| `trigger` | custom trigger button (optional) |

## CSS Custom Properties

| Property                           | Description                                      |
|------------------------------------|--------------------------------------------------|
| `--fc-dropdown-horizontal-padding` | dropdown content horizontal-padding. default: `20px` |
| `--fc-dropdown-width`              | dropdown's width. default: `auto`                |


# fc-dropdown-item

Control for picking values from a list.
<!-- Author: Benny Powers <benny.powers@forter.com> -->

## Usage

```html
<fc-dropdown-item value="Hello World"></fc-dropdown-item>
```

## Properties

| Property   | Attribute  | Type      | Default | Description                  |
|------------|------------|-----------|---------|------------------------------|
| `selected` | `selected` | `boolean` | false   | Whether the item is selected |
| `tabIndex` |            | `number`  |         |                              |
| `value`    | `value`    | `string`  |         | Value for the item           |

## Events

| Event                                          |
|------------------------------------------------|
| `item-selected fired when an item is selected` |

## Slots

| Name |
|------|
|      |

## CSS Custom Properties

| Property                                | Description                                      |
|-----------------------------------------|--------------------------------------------------|
| `--fc-dropdown-item-justify`            | flex justification for item content. default: `space-between` |
| `--fc-dropdown-item-padding-horizontal` | horizontal padding. default: `25px`              |
| `--fc-dropdown-item-padding-vertical`   | vertical padding. default: `20px`                |


# fc-dropdown-icon-item

Just like a dropdown item, but with a stylish icon.
<!-- Author: Benny Powers <benny.powers@forter.com> -->

## Usage
```html
<fc-dropdown-icon-item icon="star" value="hello"></fc-dropdown-icon-item>
```

## Properties

| Property   | Attribute  | Type      | Default | Description                  |
|------------|------------|-----------|---------|------------------------------|
| `icon`     | `icon`     | `string`  |         | The icon to use for the item |
| `selected` | `selected` | `boolean` | false   | Whether the item is selected |
| `tabIndex` |            | `number`  |         |                              |
| `value`    | `value`    | `string`  |         | Value for the item           |

## Events

| Event                                          |
|------------------------------------------------|
| `item-selected fired when an item is selected` |

## Slots

| Name |
|------|
|      |

## CSS Custom Properties

| Property                                | Description                                      |
|-----------------------------------------|--------------------------------------------------|
| `--fc-dropdown-item-justify`            | flex justification for item content. default: `space-between` |
| `--fc-dropdown-item-padding-horizontal` | horizontal padding. default: `25px`              |
| `--fc-dropdown-item-padding-vertical`   | vertical padding. default: `20px`                |