EWC Select

A customizable select component built with LitElement and TailwindCSS. This component allows users to do a selection of provided options.

Features

• Keyboard Navigation: Supports navigation using arrow keys, Enter, Space, Tab, and Escape.
• Accessible: Uses appropriate ARIA roles and attributes for accessibility.
• invertColors: When embedded on a dark background, the component will be inverted to be more readable.

Installation

To install the component, use NPM:

npm install @ewc-lib/ewc-select

Usage

Import the component in your project and use it in your HTML:

Importing in a JavaScript or TypeScript File

import '@ewc-lib/ewc-select';

Using in JavaScript/Typescript

See the main.js file in the site/src folder.

Using in html

• Not tested

<my-select
options = [
  { value: 0, name: "Total" },
  { value: 1, name: "Female" },
  { value: 2, name: "Male" }
]
  selected="0"
  invertColors="false"
></my-select>

Attributes

• options: the options to be displayed in the select
• selected: the option that should be selected on appearance
• invertColors: change the focus colors when embedded on a dark background

Events

The component dispatches custom events for interactions:

• option-selected: Fired when selections are changed.

select.addEventListener("option-selected", (event) => {
  console.log('Option selected:', (event as CustomEvent).detail.value);
});

Development

Building the Project

Start a watch server for the select

Compile the TypeScript code to JavaScript and watch for changes.

cd lib
npm run watch

Start a server for the site to see development changes

cd site
npm run dev

Change the site source code and see changes in the browser

Now, code changes are directly reflected in the browser. As the sourcemaps are also generated, it is possible to debug through the lib code.

Testing Locally

Before publishing, test the package locally:

1. Run npm pack to create a tarball.
2. Install it in another project with npm install ../path-to-your-package/@ewc-lib/ewc-select-x.y.z.tgz.

License

This project is licensed under the EUPL License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Changelog

[1.0.0] - Initial Release

• Initial version with complete select component.