{"size": 2860, "ext": "js", "max_stars_repo_path": "src/obap-selector/obap-selector.js", "max_stars_repo_name": "openbap/obap-elements", "max_stars_repo_stars_event_min_datetime": "2020-07-09T08:48:22.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-18T05:40:11.000Z", "max_issues_repo_path": "src/obap-selector/obap-selector.js", "max_issues_repo_name": "openbap/obap-elements", "max_issues_repo_issues_event_min_datetime": "2020-09-15T08:16:33.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-13T12:32:31.000Z", "max_forks_repo_path": "src/obap-selector/obap-selector.js", "max_forks_repo_name": "openbap/obap-elements", "max_forks_repo_forks_event_min_datetime": "2020-07-09T22:36:06.000Z", "max_forks_repo_forks_event_max_datetime": "2020-07-09T22:36:06.000Z"}
{"max_stars_count": 11, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 36.6666666667, "max_line_length": 593, "alphanum_fraction": 0.672027972}
/*
@license
Copyright (c) 2021 Paul H Mason. All rights reserved.
*/
import { html, css, ObapElement } from '../obap-element/obap-element.js';
import { ObapRangeSelectorController } from './obap-range-selector-controller.js';

/**
 `ObapSelector` is an element that allows you to manage a list of elements that can be selected. Clicking on a element selects it, and in the case of a multi select list, a second click deselects it. A range select list selects a consecutive range of items between 2 clicks  The `selected` property indicates which element is selected and defaults to the index. The default is single select and you can enable multi or range select modes with the `selector-type` attribute. The collection of selected items is contained in the `selectedItems` array property for multi and range selector types.

 The selected item(s) can be styled by providing a selector for the `obap-selected` class, which is set on selected items by default. You can change the class name using the `selected-class` attribute, or you can style based on attribute by providing a selected attribute using the `selected-attribute` property.

 If you want items in the list to be unselectable, such as a divider or heading, add a `no-select` attribute to the element.

 ## Usage

```html
import '@obap/obap-elements/obap-selector/obap-selector.js';

<style>
    .obap-selected {
        background: var(--obap-selection-color);
        color: var(--obap-on-selection-color);
    }
</style>

<!-- Single Select (default) -->
<obap-selector selected-index="0" selector-type="single">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="separator" no-select></div>
    <div class="item">Four</div>
    <div class="item">Five</div>
</obap-selector>

<!-- Multi Select -->
<obap-selector selector-type="multi" .selectedItems="${this.someArray}">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="separator" no-select></div>
    <div class="item">Four</div>
    <div class="item">Five</div>
</obap-selector>

<!-- Range Select -->
<obap-selector selector-type="range" start-index="0" end-index="2">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="separator" no-select></div>
    <div class="item">Four</div>
    <div class="item">Five</div>
</obap-selector>
```

@slot - - Default slot
 */
class ObapSelector extends ObapRangeSelectorController(ObapElement) {
    static get styles() {
        return css`
            :host {
                display: block;
            }

            :host[hidden] {
                display: none;
            }
        `;
    }

    render() {
        return html`<slot></slot>`;
    }
}

customElements.define('obap-selector', ObapSelector);