About The Project

Chip selector is a universal tool that helps you display a chip selector to your project. The chip selector has an input where you can filter out results. It can be linked to a form <input type="checkbox"> that can be manipulated in real time.

Getting Started

Clone the repository and install dependencies:

• npm

  git clone <repo-url>
  cd dzs-chip-selector
  npm install

Start the development build:

• npm

  npm run dev

• Open src/demo.html in a browser to see the component in action.

Usage

1. Initialize via the global function dzs_initDzsChipSelector or by importing the module in TypeScript.

2. Feed options through a form’s checkboxes or via the data-persistentOptions attribute on the root element.

3. Available configuration options include:

• placeholderNoItemsFound – text when filtering yields no results.

• middlewareFilterResults – custom function for filtering.

• viewSkin – choose a skin such as skin-default or skin-flat.

• inputPlaceholderText – placeholder for the filter input.

See the documentation in README.md and explore src/demo.html for practical examples.

Important Files

src/dzs-chip-selector/dzs-chip-selector.ts – main component class.

src/dzs-chip-selector/config/ – default configuration and class names.

src/dzs-chip-selector/js_common/ – shared DOM utilities.

src/dzs-chip-selector/jsinc/ – event listeners and initial DOM setup.

Unit tests – located alongside the source files (*.spec.ts).

Learning Next

Examine the interface ChipSelectorOptions in src/dzs-chip-selector/dzs-chip-selector.type.ts for available settings.

Review the SCSS themes under src/dzs-chip-selector/style/skins/ to customize the look and feel.

Explore unit tests in src/dzs-chip-selector/*.spec.ts to understand expected behavior and how the component handles option updates and autocomplete filtering.

This overview should help newcomers quickly orient themselves in the codebase and know where to look for configuration, demos, and tests.

Works With

This component has been made to be versatile, it includes both ES6 and UMD builds ( module / bundled ).

• Vanilla javascript / html via UMD embed
• Typescript
• • example - Functional
• Next.js
• React.js
• • example - Functional
• Angular
• Bootstrap
• JQuery

Getting Started

Git clone this repository.

Prerequisites

Install npm - tested with at least version 8.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Clone the repo

   git clone https://github.com/raduzoom/dzs-chip-selector

2. Install NPM packages

   npm install

3. To develop -

   npm run dev

Projects

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

Code explanation

Can be used as a web component for creating a chip selector.

Allows the chip selector to feed from multiple origins. The chip selector allows the user to select one or more options from a list of items. It can either get the options from a form element or from the "data-persistentOptions" attribute on the main element.

The class has various methods for initializing the structure of the component, handling user input, and updating the view. The class also uses several imported functions and constants from other modules for specific tasks such as removing children from a DOM element, getting the computed style of an element, and inserting HTML.

The class also extends the HTMLElement interface to add a webComponent property and the Window interface to add a global function "dzs_initDzsChipSelector" which can be used to initialize the component on an HTML element.

Options

Public Methods and Properties

The DzsChipSelector class now exposes a public onUpdate() method and assignOnUpdateFunction property that can be used externally:

import { DzsChipSelector, ChipSelectorOptions } from 'chip-selector';

// Create chip selector with onUpdate callback
const options: ChipSelectorOptions = {
  onUpdateFunction: (persistentOptions) => {
    console.log('Chip selector updated:', persistentOptions);
  }
};

const chipSelector = new DzsChipSelector(element, options);

// Assign an update function directly to the instance
chipSelector.assignOnUpdateFunction = (persistentOptions) => {
  console.log('Custom update function called:', persistentOptions);
};

// Manually trigger the onUpdate callback
chipSelector.onUpdate();

Roadmap

• [x] Add Changelog
• [x] Add back to top links
• [] Add Additional Templates w/ Examples

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

X - @ZoomItFlash Site - digitalzoomstudio.net

Project Link: https://github.com/raduzoom/dzs-chip-selector#readme