# @coffeekraken/select-webcomponent

> Provide a nice and fully customizable select webcomponent that use a real select as source of truth

Latest version **0.0.4** (published 2019-12-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @coffeekraken/select-webcomponent
pnpm add @coffeekraken/select-webcomponent
yarn add @coffeekraken/select-webcomponent
bun add @coffeekraken/select-webcomponent
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2019-12-15 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1012.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 0 |
| Author | Coffeekraken |
| Maintainers | olivierbossel |
| Keywords | coffee, kraken, coffeekraken, select, webcomponent, component, html, sugar |

## Links

- npm: https://www.npmjs.com/package/@coffeekraken/select-webcomponent
- Repository: https://github.com/Coffeekraken/coffeekraken/tree/master/webcomponent/select-webcomponent
- Homepage: http://coffeekraken.io
- npm.io page: https://npm.io/package/@coffeekraken/select-webcomponent

## Dependencies (2)

- [@coffeekraken/sugar](https://npm.io/package/@coffeekraken/sugar.md) ^1.0.2
- [@coffeekraken/form-style](https://npm.io/package/@coffeekraken/form-style.md) 0.0.2

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2019-12-15
- 0.0.3 — 2019-12-10
- 0.0.2 — 2019-12-10
- 0.0.1 — 2019-12-09

## README

# Coffeekraken s-select-component <img src=".resources/coffeekraken-logo.jpg" height="25px" />

![npm](https://img.shields.io/npm/l/@coffeekraken/s-select-component?style=flat-square)
![npm](https://img.shields.io/npm/v/@coffeekraken/s-select-component?style=flat-square)
![npm](https://img.shields.io/npm/dw/@coffeekraken/s-select-component?style=flat-square)

Provide a nice and fully customizable select webcomponent that use a real select as source of truth

## Table of content

2. [Install](#readme-install)
3. [Get Started](#readme-get-started)
4. [Javascript API](doc/api/js/SSelectComponent.md)
5. [SASS API](doc/api/scss)
6. [Sugar Web Components Documentation](https://github.com/Coffeekraken/coffeekraken/blob/master/utils/sugar/doc/js/webcomponents.md)

<a name="readme-install"></a>

## Install

```
npm install @coffeekraken/select-webcomponent --save
```

<a name="readme-get-started"></a>
## Get Started

First, import the component into your javascript file like so:

```js
import SelectWebcomponent from "@coffeekraken/select-webcomponent";
```

Then simply use it inside your html like so:

```html
<select is="ck-select">
  <option value="value1">Hello</option>
  <option value="value2">World</option>
  <optgroup label="My Cool Group">
    <option value="value3">My Cool Option</option>
  </optgroup>
</select>
```

The generated html will look like that:

```html
<!-- multiple -->
<div class="ck-select ck-select--multiple">
  <div class="ck-select__selection-container">
    <div class="ck-select__selection-tag">
      Hello
      <span class="ck-select__selection-tag-close"></span>
    </div>
  </div>
  <button type="button" class="ck-select__reset"></button>
  <div class="ck-select__dropdown" style="font-size: 1rem;">
    <div class="ck-select__search-container">
      <input type="search" placeholder="Search..." class="ck-select__search-field" empty="true">
    </div>
    <div class="ck-select__options">
      <div class="ck-select__option ck-select__option--selected">Hello</div>
      <div class="ck-select__option">World</div>
      <div class="ck-select__optgroup">My Cool Group</div>
      <div class="ck-select__option ck-select__option--in-optgroup">My Cool Option</div>
    </div>
  </div>
</div>

<!-- default -->
<div class="ck-select ck-select--opened">
  <div class="ck-select__selection-container">
    <div class="ck-select__selection">Hello</div>
  </div>
  <button type="button" class="ck-select__reset"></button>
  <div class="ck-select__dropdown" style="font-size: 1rem;">
    <div class="ck-select__search-container">
      <input type="search" placeholder="Search..." class="ck-select__search-field" empty="true">
    </div>
    <div class="ck-select__options" style="height: auto; pointer-events: all;">
      <div class="ck-select__option ck-select__option--selected">Hello</div>
      <div class="ck-select__option">World</div>
      <div class="ck-select__optgroup">My Cool Group</div>
      <div class="ck-select__option ck-select__option--in-optgroup">My Cool Option</div>
    </div>
  </div>
</div>
```

If you need some styling to start with, you can generate it like so:

```scss
@use "node_modules/@coffeekraken/select-webcomponent/index" as select-webcomponent;
// only a base bare styling
@include select-webcomponent.classes-bare();
// ...and optionally the visual styles
@include select-webcomponent.classes-style($colors: default primary secondary);
// ...or generate directly the bare and style classes
@include select-webcomponent.classes($colors: default primary secondary);
```

<a name="readme-coffeekraken"></a>

# Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose.
All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...

[![Coffeekraken](.resources/coffeekraken-logo.jpg)](https://coffeekraken.io)

---
_Source: https://npm.io/package/@coffeekraken/select-webcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._