EWC Select Enhanced

A customizable select component built with LitElement and TailwindCSS.

Features

• Select Dropdown: Allows users to select an option.
• Keyboard Navigation: Supports navigation using arrow keys, Enter, Space, Tab, and Escape.
• Accessible: Uses appropriate ARIA roles and attributes for accessibility.
• Option Grouping: Displays options in groups with dividers.
• Inactive State: Disables selection and favorite functionality for inactive countries.
• Searching: If more than 10 options in total are available, a search input is provided.

Installation

To install the component, use NPM:

npm install @ewc-lib/ewc-select-enh

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-enh';

Using in JavaScript

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

Using in HTML

<ewc-select-enh
  options='[
    [{"code": "EU27_2020", "name": "European Union", "status": "active"}],
    [
      {"code": "AT", "name": "Austria", "status": "active"},
      {"code": "BE", "name": "Belgium", "status": "active"},
      ...
    ],
    [
      {"code": "NO", "name": "Norway", "status": "active"},
      {"code": "CH", "name": "Switzerland", "status": "active"},
      ...
    ]
  ]'
  defaultOption='["EU27_2020"]'
  invertColors="false"
></ewc-select-enh>

Attributes

• options: JSON array of option groups. Each object should have a code, name, and status.
• defaultOption: Default selected option.
• activeOption: Active selected option ?? Is it needed, as we don't have a RESET button
• invertColors: Use this when embedding the component on a dark background.

Events

The component dispatches custom events for interactions:

• option-selected: Fired when a country is selected.

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

Development

Building the Project

Start a watch server for the select

Compile the TypeScript code to JavaScript and watch for changes.

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.

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-enh-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 of enhanced select with grouping, search and a11y.