EWC Multiselect

A customizable multi-select component built with LitElement and TailwindCSS. This component allows users to select multiple countries, mark favorites, and reset selections.

Features

• Multi-Select Dropdown: Allows users to select multiple countries.
• Favorite Functionality: Users can mark one country as a favorite.
• Reset Button: Resets selections to default state.
• Keyboard Navigation: Supports navigation using arrow keys, Enter, Space, Tab, and Escape.
• Accessible: Uses appropriate ARIA roles and attributes for accessibility.
• Country Grouping: Displays countries in groups with dividers.
• Inactive State: Disables selection and favorite functionality for inactive countries.

Installation

To install the component, use NPM:

npm install @ewc-lib/ewc-multiselect

Usage

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

Importing in a JavaScript or TypeScript File

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

Using in JavaScript

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

Using in HTML

<my-multiselect
  enableFavorite="true"
  countries='[
    [{"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"},
      ...
    ]
  ]'
  defaultCountries='["EU27_2020"]'
  maxSelectableCountries="5"
  resetButtonThreshold="3"
  invertColors="false"
  dropdownHeight="200px"
></my-multiselect>

Attributes

• enableFavorite: Set to "true" to enable favorite functionality.
• countries: JSON array of country groups. Each country object should have a code, name, and status.
• defaultCountries: Array of default country codes.
• maxSelectableCountries: Maximum number of selectable countries.
• resetButtonThreshold: Number of selections before the reset button appears.
• invertColors: Use this when embedding the component on a dark background.
• dropdownHeight: Use this, when you want to control the height of the dropdown. Provide number with 'px'.

Events

The component dispatches custom events for interactions:

• country-selected: Fired when a country is selected.
• country-deselected: Fired when a country is deselected.
• favorite-change: Fired when the favorite country changes.
• reset: Fired when selections are reset.

multiSelect.addEventListener("country-selected", (event) => {
  console.log("Country selected:", event.detail.country);
});

multiSelect.addEventListener("country-deselected", (event) => {
  console.log("Country deselected:", event.detail.country);
});

multiSelect.addEventListener("reset", (event) => {
  console.log("Selection reset:", event.detail.selectedCountries);
});

multiSelect.addEventListener("favorite-change", (event) => {
  console.log("Favorite country changed:", event.detail.favoriteCountry);
});

Development

Building the Project

Start a watch server for the multiSelect

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-multiselect-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.18-beta

• latest stable version, without focus changes

[1.0.0] - Initial Release

• Initial version with multi-select, favorite, and reset functionalities.