sdk-select/README.md

Simple to use (Angular) select option.

<img src="https://www.soodohkohd.com/assets/images/logo.png" title="soo-doh-kohd" height="200"/>

## Description:
The sdk-select component is a versatile dropdown element that includes single and multi-select capabilities.

## Angular Compatibility Chart

| Version | Compatibility |
|---------|---------------|
| 16      | EOL 2025      |
| 17      | EOL 2025      |
| 18      | ✔             |
| 19      | ✔             |
| 20      | Q3 2025       |

**NOTE: This package leverages the [sdk-core-library](https://www.npmjs.com/package/sdk-core-library) for core configurations (i.e., colors, icons, etc.).**

## INSTALLATION:
Using NPM:

```bash
npm install --save sdk-select
```

## CONFIGURATION:
To configure the ```sdk-select``` for your application, add the following lines to your app.module.ts file:

```typescript
import { SDKSelectModule } from 'sdk-select';

@NgModule({
    imports: [
        SDKSelectModule
    ]
})
export class AppModule { }
```

## PROPERTIES:
```typescript
// Inputs:
// Required
options: any; // Values to select from. This is the RAW data. Not necessarily viewed by the the user.

// Optional
selectedOptions: any; // Values (RAW data) pre-selected in dropdown.
hoverColor: any; // Color used when mouse hovers over values.
selectedColor: any; // Font color used to indicate selected value (single selection dropdown ONLY).
selectedBackground: any; //  Background color used to indicate selected value (single selection dropdown ONLY).

label: any; // Text to display to the left/top of dropdown.
labelPosition: string = "left"; // Text located to the 'left' or 'top' position of dropdown.
labelStyle: any; // Style applied to 'label'.

optionStyle: any; // Main styling for the dropdown (e.g., font, border, colors, etc.).
optionValuesStyle: any; // Main styling for the dropdown values list (e.g., max-height, overflow, etc.).

noValueLabel: string = "..."; // 'No Value' label.
noValueDisabled: boolean = true; // Prevent 'No Value' from being selected.

displayValue: any; // Property (key) to display as the value if options are of type 'object'.
displayGroup: any; // Property (key) to display as the group if options are of type 'object'.
resetLabel: string = "[clear]"; // Text to display for 'clearing/resetting' selected options.

multiSelect: boolean = false; // Indicates single or multiple selections.
multiValues: boolean = true; // Show multiple values in the dropdown display or 'n selected' message after 2+ values selected.

// Output:
selectChangeEvent: EventEmitter<any> = new EventEmitter(); // Event triggered on selections.
```

## USAGE:
```typescript
textArrayValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
textArray = [
    {
        id: 1,
        name: "a"
    },
    {
        id: 2,
        name: "b"
    },
    {
        id: 3,
        name: "c"
    },
    {
        id: 4,
        name: "d"
    },
    {
        id: 5,
        name: "e"
    }
];

public groupOptions: any = [
    {
        id: 1,
        name: "a",
        group: "Group 1"
    },
    {
        id: 2,
        name: "b",
        group: "Group 1"
    },
    {
        id: 6,
        name: "z",
        group: "Group 2"
    },
    {
        id: 3,
        name: "c",
        group: "Group 1"
    },
    {
        id: 4,
        name: "x",
        group: "Group 2"
    },
    {
        id: 5,
        name: "y",
        group: "Group 2"
    }
];
public selectedGroupOptions: any = [
    {
        id: 1,
        name: "a",
        group: "Group 1"
    },
    {
        id: 2,
        name: "b",
        group: "Group 1"
    }
];
```

**Note:** Grouped options MUST match selected grouped options in structure.

```html
<sdk-select 
    [label]="'My Data'"
    [labelStyle]="'font-family: Courier New; white-space: nowrap;'"
    [optionStyle]="'height: 30px; width: 100%;'" 
    [options]="textArrayValues" 
    noValueLabel="ALL"
    [noValueDisabled]=false 
    [selectedOptions]="5"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<br />

<sdk-select 
    [options]="textArray"
    displayValue="name"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<sdk-select 
    [options]="groupOptions"
    displayValue="name"
    displayGroup="group" 
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<sdk-select 
    [options]="textArray" 
    displayValue="[id]: [name]"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<br />

<sdk-select 
    label="My Data" 
    labelPosition="top"
    labelStyle="white-space: nowrap; padding-bottom: 5px; font-weight: 700;" 
    [options]="textArray"
    optionStyle="font-family: Courier New; height: 40px; width: 500px; border: 1px solid red; background-color: yellow;"
    noValueLabel="ALL" 
    [multiSelect]=true 
    displayValue="name" 
    [selectedOptions]="['b', 'c']"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<sdk-select 
    label="My Grouped Data" 
    labelPosition="top"
    labelStyle="white-space: nowrap; padding-bottom: 5px; font-weight: 700;" 
    [options]="groupOptions"
    optionStyle="font-family: Courier New; height: 40px; width: 500px; border: 1px solid red; background-color: yellow;"
    noValueLabel="ALL" 
    [multiSelect]=true 
    displayValue="name" 
    displayGroup="group" 
    [selectedOptions]="selectedGroupOptions"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<sdk-select 
    [options]="textArray" 
    [multiSelect]=true 
    [multiValues]=false 
    optionStyle="height: 40px; width: 100px;"
    displayValue="[id]: [name]"
    [selectedOptions]="['4: d', '2: b']" 
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>

<sdk-select 
    [options]="textArray" 
    [multiSelect]=true 
    optionStyle="height: 100%; width: 100%;"
    displayValue="[id]: [name]" 
    [selectedOptions]="['1: a', '3: c', '4: d', '2: b']"
    (selectChangeEvent)="selectedValue($event)">
</sdk-select>
```

NOTE: Use brackets [] in the ```displayValue``` parameter to indicate properties (keys) used in the ```options``` array.