# ef-tree-select

Dropdown control that allows selection from the tree list

## Attributes

| Attribute             | Type     | Description                        |
|-----------------------|----------|------------------------------------|
| `query-debounce-rate` | `number` | Control query rate in milliseconds |

## Properties

| Property                 | Attribute             | Type                               | Default                                          | Description                                      |
|--------------------------|-----------------------|------------------------------------|--------------------------------------------------|--------------------------------------------------|
| `clears`                 | `clears`              | `boolean`                          | false                                            | Show clears button                               |
| `data`                   |                       | `TreeSelectData[]`                 | []                                               | Data object to be used for creating tree         |
| `filter`                 |                       | `TreeSelectFilter<T> \| null`      | "createDefaultFilter<T>(this)"                   | Custom filter for static data. Set this to null when data is filtered externally, eg XHR |
| `filterCount`            |                       | `number`                           | 0                                                | Tracks the number of filter matches<br /><br />Only needed if internal filtering is unused |
| `max`                    | `max`                 | `string \| null`                   | ""                                               | Set maximum number of selected items             |
| `noRelation`             | `no-relation`         | `boolean`                          | false                                            | Breaks the relationship when multiple<br />selection mode is enabled |
| `opened`                 | `opened`              | `boolean`                          | false                                            | Set dropdown to open                             |
| `placeholder`            | `placeholder`         | `string`                           | ""                                               | Set placeholder text                             |
| `queryDebounceRate`      | `query-debounce-rate` | `number`                           |                                                  | Control query rate in milliseconds               |
| `renderer`               |                       |                                    | "createTreeSelectRenderer<TreeSelectDataItem>(this)" | Renderer used to render tree item elements       |
| `showPills`              | `show-pills`          | `boolean`                          | false                                            | Should the control show pills                    |
| `treeManager (readonly)` |                       | `TreeManager <TreeSelectDataItem>` |                                                  | Tree manager used for item manipulation          |
| `values`                 |                       | `string[]`                         | []                                               | Returns a values collection of the currently<br />selected item values |

## Methods

| Method   | Type       | Description                                      |
|----------|------------|--------------------------------------------------|
| `commit` | `(): void` | Commit the current selection applying it to `values` property. |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `cancel`         | Fired when the user closes a popup by cancelling the new selection. |
| `confirm`        | Fired when the user closes a popup by confirming the new selection. |
| `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
| `query-changed`  | Fired when the user changes value in the input to change a query word. If `query-debounce-rate` is set, this event will be triggered after debounce completion. The event is not triggered if `query` property is changed programmatically. |
| `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |