@ruc-lib/multi-select 2.0.8 → 3.1.0

package/README.md

@@ -1,153 +1,7 @@
 # ruclib-multi-select
 
-A flexible and customizable multi-select dropdown component for Angular applications. It supports single or multiple selections, parent-child relationships, search, sorting, and custom theming.
+This library was generated with [Nx](https://nx.dev).
 
-## Installation Guide
+## Running unit tests
 
-To use the Multi-Select component, you can install the entire RUC library or just this specific component.
-
-### Install the Entire Library
-```bash
-npm install @uxpractice/ruc-lib
-```
-
-### Install Individual Component
-If you only need the Multi-Select component:
-```bash
-npm install @ruc-lib/multi-select
-```
-
-## Usage
-
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibMultiSelectModule`:
-
-```typescript
-import { RuclibMultiSelectModule } from '@ruc-lib/multi-select';
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    RuclibMultiSelectModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
-### 2. Use the Component
-In your component's template, use the `<uxp-ruclib-multi-select>` selector and pass the configuration and data to the respective inputs.
-
-```html
-<uxp-ruclib-multi-select 
-  [dataSource]="dataSourceForMultiSelect" 
-  [rucInputData]="inputObjectDataMulti" 
-  [customTheme]="'custom-theme'"
-  (rucEvent)="handleEvent($event)">
-</uxp-ruclib-multi-select>
-```
-
-## API Reference
-
-### Component Inputs
-
-| Input          | Type               | Description                                      |
-|----------------|--------------------|--------------------------------------------------|
-| `rucInputData` | `DefaultConfig`    | The main configuration object for the component. |
-| `dataSource`   | `ListItem[]`       | An array of items to be displayed in the dropdown. |
-| `customTheme`  | `string`           | An optional CSS class for custom theming.        |
-
-### Component Outputs
-
-| Output     | Type               | Description                                                                 |
-|------------|--------------------|-----------------------------------------------------------------------------|
-| `rucEvent` | `EventEmitter<any>` | Emits an event whenever a selection changes, an item is deselected, or the input is clicked. |
-
-### `DefaultConfig`
-This is the main configuration object for the multi-select component.
-
-| Property            | Type                   | Description                                                                                             |
-|---------------------|------------------------|---------------------------------------------------------------------------------------------------------|
-| `singleSelection`   | `boolean`              | If `true`, allows only a single item to be selected. Defaults to `false`.                               |
-| `label`             | `string`               | The label for the multi-select input field.                                                             |
-| `showSelectAll`     | `boolean`              | If `true`, displays a "Select All" checkbox. Defaults to `true`.                                        |
-| `showSelected`      | `boolean`              | If `true`, displays a "Show Selected" filter. Defaults to `true`.                                       |
-| `appearance`        | `'fill' \| 'outline'`  | The appearance of the form field. Defaults to `'outline'`.                                              |
-| `scroll`            | `boolean`              | Enables or disables scrolling within the dropdown. Defaults to `true`.                                  |
-| `placeholder`       | `string`               | The placeholder text for the search input.                                                              |
-| `limit`             | `number`               | The maximum number of items that can be selected.                                                       |
-| `maxDropdownHeight` | `string`               | The maximum height of the dropdown container (e.g., `'200px'`).                                         |
-| `maxHeight`         | `number`               | The maximum height of the options box in pixels. Defaults to `150`.                                     |
-| `disabled`          | `boolean`              | If `true`, disables the entire component. Defaults to `false`.                                          |
-| `sortBy`            | `string`               | The property of the `ListItem` to sort by (e.g., `'id'`, `'text'`).                                     |
-| `sortOrder`         | `'asc' \| 'desc'`      | The order of sorting.                                                                                   |
-
-### `ListItem`
-This object defines the configuration for each item in the `dataSource`.
-
-| Property     | Type               | Description                                                              |
-|--------------|--------------------|--------------------------------------------------------------------------|
-| `id`         | `string \| number` | A unique identifier for the item.                                        |
-| `text`       | `string`           | The display text for the item.                                           |
-| `isDisabled` | `boolean`          | If `true`, this item will be disabled and cannot be selected.            |
-| `icon`       | `string`           | An optional icon to display next to the item.                            |
-| `childItem`  | `any`              | Used for creating parent-child relationships.                            |
-| `grouped`    | `boolean`          | If `true`, indicates that the item is a group header.                    |
-
-## Example Configuration
-
-Here's an example of how to configure the Multi-Select component in your component's TypeScript file.
-
-```typescript
-import { Component } from '@angular/core';
-import { DefaultConfig, ListItem } from '@ruc-lib/multi-select';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-})
-export class AppComponent {
-  
-  inputObjectDataMulti: DefaultConfig = {
-    singleSelection: false,
-    label: 'Cities',
-    showSelectAll: true,
-    showSelected: true,
-    appearance: 'outline',
-    scroll: true,
-    placeholder: 'Search or select from dropdown',
-    limit: 5,
-    maxDropdownHeight: '200px',
-    maxHeight: 150,
-    disabled: false,
-    sortBy: 'id',
-    sortOrder: 'desc',
-  };
-
-  dataSourceForMultiSelect: ListItem[] = [
-    { text: 'Afghanistan', id: 'AF', isDisabled: true },
-    { text: 'Åland Islands', id: 'AX', isDisabled: false },
-    { text: 'Albania', id: 'AL', isDisabled: false },
-    { text: 'Algeria', id: 'DZ', isDisabled: false },
-  ];
-
-  handleEvent(event: any) {
-    console.log(event.eventName, event.eventOutput);
-  }
-}
-```
-
-## 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. If you have any feedback or suggestions, please let us know!
+Run `nx test ruclib-multi-select` to execute the unit tests.