ruclib-multi-select

Multi Select box gives user flexibility to select multiple or single select options. It also used as parent child selection. Options are dynamic. Below points are configurable.

Features

• Can be a single or multi select.
• Set a limit on selections
• Disable the whole select box at once.
• Can change appearance
• Maximum height of dropdown box.
• Maximum height of options box.
• Sort element by enabling sortBy.
• Can customize the theme.

Installation guide

Install complete library

npm install @uxpractice/ruc-lib

Install individual component

If users only need the multi select component, they can install it separately npm install @ruc-lib/multi-select

Usage

import required modules

for library import { RuclibMultiSelectModule } from '@uxpractice/ruc-lib/multi-select'

for seperate package import { RuclibMultiSelectModule } from '@ruc-lib/multi-select'

use component selector

<uxp-ruclib-multi-select [dataSource]="dataSourceForMultiSelectData" [rucInputData]="inputObjectDataMulti" [customTheme]="customTheme" (rucEvent)="passEvent($event)"></uxp-ruclib-multi-select>

Input and Output

Inputs

dataSource -> It is data to be passed in the multi-select component.

rucInputData -> It is the configuration to be passed in the multi-select component.

customTheme -> It is the name of the theme.

Output

rucEvent -> is the event which will be fired when selection changes happens in multi-select.

rucInputData (sample object)

Detail definition of the each property can be found in type definition file.

 dataSourceForMultiSelectData = {
  singleSelection: false,
  label: 'Cities',
  showSelectAll: true,
  showSelected: true,
  appearance: 'outline',
  scroll: true,
  placeholder: 'Search or select from dropdown',
  //limit : 5,
  maxDropdownHeight: 200 /** height in px */,
  // inputbox properties
  // width: 100,
  /** width in % */
  maxHeight: 150 /** width in px */,
  disabled: false,
  //sort object
  sortBy: 'id',
  sortOrder: 'desc',
  };

rucInputData (sample object)

inputObjectDataMulti = {
  { text: 'Afghanistan', id: 'AF', isDisable: true },
  { text: 'Åland Islands', id: 'AX', isDisable: false },
  { text: 'Albania', id: 'AL', isDisable: false },
  { text: 'Algeria', id: 'DZ', isDisable: false },
}

Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

Acknowledgements

Thank you for choosing the Multi Select Component Library. If you have any feedback or suggestions, please let us know!