# @anypoint-web-components/anypoint-selector

> Port of iron-selector that works with ES6 classes. Manages a list of elements that can be selected.

Latest version **1.1.8** (published 2021-08-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/anypoint-selector
pnpm add @anypoint-web-components/anypoint-selector
yarn add @anypoint-web-components/anypoint-selector
bun add @anypoint-web-components/anypoint-selector
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2021-08-27 |
| First published | 2019-08-03 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 98.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | web-components, anypoint-web-components, selection, list |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/anypoint-selector
- Repository: https://github.com/anypoint-web-components/anypoint-selector
- Homepage: https://github.com/anypoint-web-components/anypoint-selector#readme
- Issues: https://github.com/anypoint-web-components/anypoint-selector/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/anypoint-selector

## Dependencies (3)

- [lit-html](https://npm.io/package/lit-html.md) ^1.3.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0

## Recent versions

- 1.1.8 (latest) — 2021-08-27
- 1.1.7 — 2020-12-12
- 1.1.6 — 2020-11-21
- 1.1.5 — 2020-09-27
- 1.1.3 — 2020-06-19
- 1.1.2 — 2020-05-17
- 1.1.1 — 2020-05-17
- 1.1.0 — 2020-05-17
- 1.0.2 — 2019-08-30
- 1.0.1 — 2019-08-04
- 1.0.0 — 2019-08-03

## README

[![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-selector.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-selector)

[![Build Status](https://travis-ci.com/anypoint-web-components/anypoint-selector.svg)](https://travis-ci.com/anypoint-web-components/anypoint-selector)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/anypoint-web-components/anypoint-selector)

# anypoint-selector

This is a port of [iron-selector](https://github.com/PolymerElements/iron-selector) that works with LitElement and ES6 classes, originally developed by Polymer team.


## <anypoint-selector>, `AnypointSelectableMixin`, `AnypointMultiSelectableMixin`

`anypoint-selector` is an element which can be used to manage a list of elements that can be selected.
Tapping on the item will make the item selected. The `selected` indicates which item is being selected.
The default is to use the index of the item. `anypoint-selector`'s functionality is entirely defined by `AnypointMultiSelectableMixin`.

`AnypointSelectableMixin` gives an element the concept of a selected child element. By default, the element will select one of its selectable children
when a click event is dispatched to it.

`AnypointSelectableMixin` lets you ...

-   decide which children should be considered selectable (`selectable`),
-   retrieve the currently selected element (`selectedItem`) and all elements
    in the selectable set (`items`),
-   change the selection (`select`, `selectNext`, etc.),
-   decide how selected elements are modified to indicate their selected state (`selectedClass`, `selectedAttribute`),

... among other things.

`AnypointMultiSelectableMixin` includes all the features of `AnypointSelectableMixin` as well as a `multi` property, which can be set to `true` to indicate that the element can have multiple selected child elements.
It also includes the `selectedItems` and `selectedValues` properties for working with arrays of selectable elements and their corresponding values (`multi` is `true`) - similar to the single-item versions provided by `AnypointSelectableMixin`: `selectedItem` and `selected`.

The element has no own shadow DOM. Items are rendered as is. The element also covers a case where the selector is used in another custom element and a `<slot>` is passed as a child (e.g. dropdown list wit children defined in light DOM).


## Usage

### Installation
```
npm install --save @anypoint-web-components/anypoint-selector
```

### In an html file

```html
<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-selector/anypoint-selector.js';
    </script>
  </head>
  <body>
    <anypoint-selector selected="0">
      <div>Item 0</div>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
    </anypoint-selector>
    <script>
    {
      document.querySelector('files-payload-editor').onselect = (e) => {
        console.log(e.detail.value);
      };
    }
    </script>
  </body>
</html>
```

### In a LitElement template

```javascript
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-selector/anypoint-selector.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <anypoint-selector @select="${this._selectedHandler}"></anypoint-selector>
    `;
  }

  _selectedHandler(e) {
    console.log('current selection:', e.detail.item);
  }
}
customElements.define('sample-element', SampleElement);
```

## Development

```sh
git clone https://github.com/anypoint-web-components/anypoint-selector
cd anypoint-selector
npm install
```

### Running the demo locally

```sh
npm start
```

### Running the tests

```sh
npm test
```

---
_Source: https://npm.io/package/@anypoint-web-components/anypoint-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._