sdk-select

Description:

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

NOTE: This package leverages the sdk-core-library for core configurations (i.e., colors, icons, etc.).

INSTALLATION:

Using NPM:

npm install --save sdk-select

CONFIGURATION:

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

import { SDKSelectModule } from 'sdk-select';

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

PROPERTIES:

// 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 value 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:

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"
    }
];

<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]="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 
    [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.