Dropdown

Shows Dropdown.

Features/Functionality

Shows dropdown of width: '250px' , height: '50px'.
Height of validation error is fixed to '15px'.
Value will be set in the readableItem object passed.
Disabled dropdown is shown if disabled is true.
Change callback will called on change.
Component is container responsive.
Default 'Select' is shown as placeholder.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

jquery
shared styles
shared scripts

HTML Structure

<require from="{user_path}/dropdowns/dropdown"></require>
<cst-dropdown items.bind="{items}" input-id.bind="{inputid}" readable-item.bind="{readableItem}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-change-callback.bind="{evtChangeCallback}"></cst-dropdown>

Bindable Properties

Property	Data Type	Required	Description
items	array	Yes	Data to be passed to component.
inputId	string/int	No	Selected value's id will be set in inputId. It is two way communication property. Once the data sent will be set, then whatever selected value changes page can get it.(Data type as per optins.propId)
readableItem	object	No	To get selected value in this object. Inisially bind this object as empty.
options	object	No	Basic component options
validations	object	No	To give validations
otherInfo	any	No	Extra info to be passed on event
extDisabled	boolean	No	Disables any functionality on component.
evtChangeCallback	method	No	Method to be called on change event.

Structure of bindable properties

items

items = [
    {
        id: '',            // id is required             
        label: ''
    },...
]

readableItem

readableItem = {}             // If we want selected value in this object, pass it as empty

options

options = {
    propId: '',             // This is the key of items object, which we consider as id. Default value = 'id'.
    propLabel: '',          // This is the key of items object, which we consider as label. Default value = 'label'.
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour porperty
}

validations

vailidations {
    isRequired: true/false
    /* To be developed:
        minLength: '',
        maxLength: '',
        isEmail: true/false,
        regEx: ''
    */
}

evtChangeCallback

evtChangeCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

**setTimeout of 100ms in evtChangeCallback, because in IE11 change event is triggering first and then bindable value property is going to change. If we do not set time out, in _info.value we are not getting latest value.

CSS Overrinding

Following classes are given to override CSS:
- .cst-dropdown-container-override: Container Class
- .cst-dropdown-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./shared/core_comp/dropdowns/dropdown"></require>
  <div>
    <cst-dropdown items.bind="items" input-id.bind="inputId" readable-item.bind="readableItem" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-change-callback.bind="evtChangeCallback"></cst-dropdown>
  </div>
</template>

CSS

.cst-ex-dropdown{
    .cst-dropdown-container-override {
        width: 300px !important;
    }
}

class MyCls{
    constructor(){
        this.items = [
            {
                id:1,
                label: 'Male'
            },
            {
                id:2,
                label: 'Female'
            }
        ];
        this.inputId = 1;
        this.otherInfo = '';
        this.disabled = false;
        this.readableItem = {};
    }

    evtChangeCallback($event, _info) {
    }
}
export { MyCls }