@syncfusion/ej2-dropdowns - npm Package Compare versions

Comparing version 15.4.27 to 16.1.24

CHANGELOG.md

@@ -5,2 +5,42 @@ # Changelog
 
+### Common
+
+#### Breaking changes
+
+- Locale key changed from `dropdownlist` to `dropdowns`.
+
+- Changed the fields property type as `FieldSettingsModel`.
+
+- Changed the Angular component selector, component name prefix with `ejs` e.g : `ejs-dropdownlist`.
+
+#### New Features
+
+- Given in-built filtering support without using `filtering` event.
+
+- Diacritics filtering works on enabling the `ignoreAccent`.
+
+- Provided the `zIndex` property to set custom `zIndex` value.
+
+- High contrast theme support.
+
+### MultiSelect
+
+#### New Features
+
+- CheckBox support.
+
+- Prevent the Popup open on component click while `openOnClick` property set as false.
+
+- Provided `chipSelect` event for chip selection action.
+
+#### Breaking changes
+
+- Pascal casing change to mode property values (`Default`, `Box`, `Delimiter`, `CheckBox`).
+
+- Changed the `maximumSelectionLength` behaviour.
+
+#### Bug fix
+
+- Value preselect not working in remote data, this issue has been fixed.
+
 ### DropDownList
@@ -10,2 +50,10 @@
 
+- Console error thrown while navigating the angular routing in DropDownList change event, this issue has been fixed.
+
+## 15.4.27-preview (2018-01-30)
+
+### DropDownList
+
+#### Bug fix
+
 - DropDownList value property gets as an object if selected value as 0, this issue has been fixed.
@@ -12,0 +60,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 15.4.26
+*  version : 15.4.27
 *  Copyright Syncfusion Inc. 2001 - 2017. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "15.4.27",
+  "version": "16.1.24",
   "description": "Essential JS 2 DropDown Components",
@@ -11,7 +11,7 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.23",
-    "@syncfusion/ej2-data": "^15.4.23",
-    "@syncfusion/ej2-inputs": "^15.4.24",
-    "@syncfusion/ej2-lists": "^15.4.26",
-    "@syncfusion/ej2-popups": "^15.4.27"
+    "@syncfusion/ej2-base": "^16.1.24",
+    "@syncfusion/ej2-data": "^16.1.24",
+    "@syncfusion/ej2-inputs": "^16.1.24",
+    "@syncfusion/ej2-lists": "^16.1.24",
+    "@syncfusion/ej2-popups": "^16.1.24"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

src/auto-complete/auto-complete-model.d.ts

@@ -1,2 +0,2 @@
-import { Property, addClass, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach, Event, EmitType } from '@syncfusion/ej2-base';import { removeClass, attributes, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { dropDownListClasses, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { ComboBox } from '../combo-box/combo-box';import { highlightSearch } from '../common/highlight-search';import { Search } from '../common/incremental-search';import { FieldSettings } from '../drop-down-base/drop-down-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { SortOrder } from '@syncfusion/ej2-lists';import { DataManager, Query } from '@syncfusion/ej2-data';
+import { Property, addClass, EventHandler, KeyboardEventArgs, isNullOrUndefined, detach } from '@syncfusion/ej2-base';import { Event, EmitType, Complex } from '@syncfusion/ej2-base';import { removeClass, attributes, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';import { dropDownListClasses, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { ComboBox } from '../combo-box/combo-box';import { highlightSearch } from '../common/highlight-search';import { Search } from '../common/incremental-search';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { FieldSettings } from '../drop-down-base/drop-down-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { FloatLabelType, Input } from '@syncfusion/ej2-inputs';import { SortOrder } from '@syncfusion/ej2-lists';import { DataManager, Query } from '@syncfusion/ej2-data';
 import {FilterType,FilteringArgs} from "./auto-complete";
@@ -12,9 +12,16 @@ import {ComboBoxModel} from "../combo-box/combo-box-model";
      * The `fields` property maps the columns of the data table and binds the data to the component.
+     * * text - Maps the text column from data table for each list item
+     * * value - Maps the value column from data table for each list item
+     * * iconCss - Maps the icon class column from data table for each list item
+     * * groupBy - Group the list items with it's related items by mapping groupBy field
+     * 
+     * > For more details about the field mapping refer to [`Data binding`](./data-binding.html) documentation.
      * @default { value: null, iconCss: null, groupBy: null}
      */
-    fields?: FieldSettings;
+    fields?: FieldSettingsModel;
 
     /**
-     * When set to ‘false’, consider the case-sensitive on performing the search to find suggestions.
-     * By default not consider the casing.
+     * When set to ‘false’, consider the [`case-sensitive`](./filtering.html#case-sensitive-filtering) 
+     * on performing the search to find suggestions.
+     * By default consider the casing.
      * @default true.
@@ -32,2 +39,3 @@ */
      * When set to ‘true’, highlight the searched characters on suggested list items.
+     * > For more details about the highlight refer to [`Custom highlight search`](./how-to.html#custom-highlight-search) documentation. 
      * @default false.
@@ -38,3 +46,4 @@ */
     /**
-     * Display the specified number of list items on the suggestion popup.
+     * Supports the [`specified number`](./filtering.html#filter-item-count) 
+     * of list items on the suggestion popup.
      * @default 20.
@@ -47,12 +56,6 @@ */
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let games: AutoComplete = new AutoComplete({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   games.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="autocomplete/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="autocomplete/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}.
@@ -63,18 +66,8 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`query`](./api-query.html)
      * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]   
-     *   let customers: AutoComplete = new AutoComplete({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="autocomplete/query-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="autocomplete/query-api/index.html" %}{% endcodeBlock %}
      * @default null.
@@ -85,3 +78,5 @@ */
     /**
-     * Allows you to set the minimum search character length, the search action will perform after typed minimum characters.
+     * Allows you to set [`the minimum search character length']
+     * (./filtering.html#limit-the-minimum-filter-character),
+     * the search action will perform after typed minimum characters.
      * @default 1.
@@ -93,3 +88,4 @@ */
      * Determines on which filter type, the component needs to be considered on search action. 
-     * The available `filterType` and its supported data types are 
+     * The available [`FilterType`](./filtering.html#change-the-filter-type) 
+     * and its supported data types are 
      * 
@@ -119,3 +115,7 @@ * <table>
      * 
-     * The default value set to ‘Contains’, all the suggestion items which contain typed characters to listed in the suggestion popup.
+     * {% codeBlock src="autocomplete/filter-type-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="autocomplete/filter-type-api/index.html" %}{% endcodeBlock %}
+     * 
+     * The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
      * @default 'Contains'.
@@ -139,2 +139,17 @@ */
     /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     * 
+     * {% codeBlock src="autocomplete/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="autocomplete/float-label-type-api/index.html" %}{% endcodeBlock %}
+     * 
+     *  @default 'Never'.
+     */
+    floatLabelType?: FloatLabelType;
+
+    /**
      * Not applicable to this component.
@@ -141,0 +156,0 @@ * @default null.

src/auto-complete/auto-complete.d.ts

 /// <reference path="../combo-box/combo-box-model.d.ts" />
-import { KeyboardEventArgs, EmitType } from '@syncfusion/ej2-base';
+import { KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { EmitType } from '@syncfusion/ej2-base';
 import { FilteringEventArgs } from '../drop-down-list/drop-down-list';
 import { ComboBox } from '../combo-box/combo-box';
 import { AutoCompleteModel } from '../auto-complete/auto-complete-model';
-import { FieldSettings } from '../drop-down-base/drop-down-base';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
+import { FloatLabelType } from '@syncfusion/ej2-inputs';
 import { Query } from '@syncfusion/ej2-data';
@@ -24,8 +26,15 @@ export declare type FilterType = 'Contains' | 'StartsWith' | 'EndsWith';
      * The `fields` property maps the columns of the data table and binds the data to the component.
+     * * text - Maps the text column from data table for each list item
+     * * value - Maps the value column from data table for each list item
+     * * iconCss - Maps the icon class column from data table for each list item
+     * * groupBy - Group the list items with it's related items by mapping groupBy field
+     *
+     * > For more details about the field mapping refer to [`Data binding`](./data-binding.html) documentation.
      * @default { value: null, iconCss: null, groupBy: null}
      */
-    fields: FieldSettings;
+    fields: FieldSettingsModel;
     /**
-     * When set to ‘false’, consider the case-sensitive on performing the search to find suggestions.
-     * By default not consider the casing.
+     * When set to ‘false’, consider the [`case-sensitive`](./filtering.html#case-sensitive-filtering)
+     * on performing the search to find suggestions.
+     * By default consider the casing.
      * @default true.
@@ -41,2 +50,3 @@ */
      * When set to ‘true’, highlight the searched characters on suggested list items.
+     * > For more details about the highlight refer to [`Custom highlight search`](./how-to.html#custom-highlight-search) documentation.
      * @default false.
@@ -46,3 +56,4 @@ */
     /**
-     * Display the specified number of list items on the suggestion popup.
+     * Supports the [`specified number`](./filtering.html#filter-item-count)
+     * of list items on the suggestion popup.
      * @default 20.
@@ -54,12 +65,6 @@ */
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let games: AutoComplete = new AutoComplete({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   games.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="autocomplete/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}.
@@ -71,18 +76,8 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`query`](./api-query.html)
      * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]
-     *   let customers: AutoComplete = new AutoComplete({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="autocomplete/query-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/query-api/index.html" %}{% endcodeBlock %}
      * @default null.
@@ -92,3 +87,5 @@ */
     /**
-     * Allows you to set the minimum search character length, the search action will perform after typed minimum characters.
+     * Allows you to set [`the minimum search character length']
+     * (./filtering.html#limit-the-minimum-filter-character),
+     * the search action will perform after typed minimum characters.
      * @default 1.
@@ -99,3 +96,4 @@ */
      * Determines on which filter type, the component needs to be considered on search action.
-     * The available `filterType` and its supported data types are
+     * The available [`FilterType`](./filtering.html#change-the-filter-type)
+     * and its supported data types are
      *
@@ -125,3 +123,7 @@ * <table>
      *
-     * The default value set to ‘Contains’, all the suggestion items which contain typed characters to listed in the suggestion popup.
+     * {% codeBlock src="autocomplete/filter-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/filter-type-api/index.html" %}{% endcodeBlock %}
+     *
+     * The default value set to `Contains`, all the suggestion items which contain typed characters to listed in the suggestion popup.
      * @default 'Contains'.
@@ -142,2 +144,16 @@ */
     /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     *
+     * {% codeBlock src="autocomplete/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="autocomplete/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     *  @default 'Never'.
+     */
+    floatLabelType: FloatLabelType;
+    /**
      * Not applicable to this component.
@@ -144,0 +160,0 @@ * @default null.

src/auto-complete/auto-complete.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../drop-down-list/drop-down-list", "../combo-box/combo-box", "../common/highlight-search", "../common/incremental-search", "@syncfusion/ej2-popups", "@syncfusion/ej2-inputs", "@syncfusion/ej2-data"], function (require, exports, ej2_base_1, ej2_base_2, drop_down_list_1, combo_box_1, highlight_search_1, incremental_search_1, ej2_popups_1, ej2_inputs_1, ej2_data_1) {
+define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../drop-down-list/drop-down-list", "../combo-box/combo-box", "../common/highlight-search", "../common/incremental-search", "../drop-down-base/drop-down-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-inputs", "@syncfusion/ej2-data"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, drop_down_list_1, combo_box_1, highlight_search_1, incremental_search_1, drop_down_base_1, ej2_popups_1, ej2_inputs_1, ej2_data_1) {
     "use strict";
@@ -36,3 +36,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         AutoComplete.prototype.getNgDirective = function () {
-            return 'EJ-AUTOCOMPLETE';
+            return 'EJS-AUTOCOMPLETE';
         };
@@ -47,7 +47,7 @@ AutoComplete.prototype.getQuery = function (query) {
                 if (!(this.dataSource instanceof ej2_data_1.DataManager) && dataType === 'string' || dataType === 'number') {
-                    filterQuery.where('', this.filterType, this.queryString, this.ignoreCase);
+                    filterQuery.where('', this.filterType, this.queryString, this.ignoreCase, this.ignoreAccent);
                 }
                 else {
-                    var fields = this.fields;
-                    filterQuery.where(!ej2_base_1.isNullOrUndefined(fields.value) ? fields.value : '', this.filterType, this.queryString, this.ignoreCase);
+                    var mapping = !ej2_base_1.isNullOrUndefined(this.fields.value) ? this.fields.value : '';
+                    filterQuery.where(mapping, this.filterType, this.queryString, this.ignoreCase, this.ignoreAccent);
                 }
@@ -81,7 +81,14 @@ }
                 updateData: function (dataSource, query, fields) {
+                    if (eventArgs.cancel) {
+                        return;
+                    }
                     _this.isFiltered = true;
                     _this.filterAction(dataSource, query, fields);
-                }
+                },
+                cancel: false
             };
             this.trigger('filtering', eventArgs);
+            if (eventArgs.cancel) {
+                return;
+            }
             if (!this.isFiltered && !eventArgs.preventDefaultAction) {
@@ -113,3 +120,3 @@ this.filterAction(this.dataSource, null, this.fields);
             if (!ej2_base_1.isNullOrUndefined(item)) {
-                ej2_base_2.removeClass([item], drop_down_list_1.dropDownListClasses.focus);
+                ej2_base_3.removeClass([item], drop_down_list_1.dropDownListClasses.focus);
             }
@@ -144,3 +151,3 @@ this.postBackAction();
                 }
-                ej2_base_2.attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
+                ej2_base_3.attributes(this.inputElement, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });
             }
@@ -158,3 +165,3 @@ else {
                     target: this.spinnerElement,
-                    width: ej2_base_2.Browser.isDevice ? '16px' : '14px'
+                    width: ej2_base_3.Browser.isDevice ? '16px' : '14px'
                 });
@@ -167,3 +174,3 @@ ej2_popups_1.showSpinner(this.spinnerElement);
                 ej2_popups_1.hideSpinner(this.spinnerElement);
-                ej2_base_2.removeClass([this.spinnerElement], drop_down_list_1.dropDownListClasses.disableIcon);
+                ej2_base_3.removeClass([this.spinnerElement], drop_down_list_1.dropDownListClasses.disableIcon);
                 if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {
@@ -189,3 +196,3 @@ ej2_base_1.detach(this.spinnerElement);
         AutoComplete.prototype.isEditTextBox = function () {
-            return true;
+            return true && this.inputElement.value.trim() !== '';
         };
@@ -248,3 +255,3 @@ AutoComplete.prototype.isPopupButton = function () {
         __decorate([
-            ej2_base_1.Property({ value: null, iconCss: null, groupBy: null })
+            ej2_base_2.Complex({ value: null, iconCss: null, groupBy: null }, drop_down_base_1.FieldSettings)
         ], AutoComplete.prototype, "fields", void 0);
@@ -276,3 +283,3 @@ __decorate([
         __decorate([
-            ej2_base_1.Event()
+            ej2_base_2.Event()
         ], AutoComplete.prototype, "filtering", void 0);
@@ -283,2 +290,5 @@ __decorate([
         __decorate([
+            ej2_base_1.Property('Never')
+        ], AutoComplete.prototype, "floatLabelType", void 0);
+        __decorate([
             ej2_base_1.Property(null)
@@ -296,3 +306,3 @@ ], AutoComplete.prototype, "valueTemplate", void 0);
         AutoComplete = __decorate([
-            ej2_base_2.NotifyPropertyChanges
+            ej2_base_3.NotifyPropertyChanges
         ], AutoComplete);
@@ -299,0 +309,0 @@ return AutoComplete;

src/combo-box/combo-box-model.d.ts

@@ -1,2 +0,2 @@
-import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { FieldSettings } from '../drop-down-base/drop-down-base';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { SortOrder } from '@syncfusion/ej2-lists';import { DataManager, Query } from '@syncfusion/ej2-data';
+import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { SortOrder } from '@syncfusion/ej2-lists';import { DataManager, Query } from '@syncfusion/ej2-data';
 import {CustomValueSpecifierEventArgs} from "./combo-box";
@@ -25,12 +25,6 @@ import {DropDownListModel} from "../drop-down-list/drop-down-list-model";
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let games: ComboBox = new ComboBox({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   games.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="combobox/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="combobox/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}.
@@ -45,20 +39,6 @@ */
      * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]   
-     *   let countries: ComboBox = new ComboBox({
-     *      dataSource: searchData,
-     *      fields: { text: "country", value: "id" },
-     *      allowFiltering: true,
-     *      filtering: function (e: FilteringEventArgs) {
-     *          let query = new Query();
-     *          query = (e.text != "") ? query.where("country", "startswith", e.text, true) : query;
-     *          e.updateData(searchData, query);
-     *      }
-     *   });
-     *   countries.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="combobox/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="combobox/allow-filtering-api/index.html" %}{% endcodeBlock %}
      * @default false.
@@ -69,18 +49,8 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
-     * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]   
-     *   let customers: ComboBox = new ComboBox({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     * Accepts the external [`Query`](./api-query.html)
+     * that execute along with [`data processing`](./data-binding.html).
+     * 
+     * {% codeBlock src="combobox/query-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="combobox/query-api/index.html" %}{% endcodeBlock %}
      * @default null.
@@ -91,2 +61,13 @@ */
     /**
+     * Gets or sets the index of the selected item in the component.
+     * 
+     * {% codeBlock src="combobox/index-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
+     * 
+     * @default null.
+     */
+    index?: number;
+
+    /**
      * Specifies whether to show or hide the clear button. 
@@ -99,3 +80,4 @@ * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
     /**
-     * Triggers on set a custom value to this component.
+     * Triggers on set a 
+     * [`custom value`](./getting-started.html#custom-values) to this component.
      * @event
@@ -107,2 +89,3 @@ */
      * Triggers on typing a character in the component.
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
      * @event
@@ -120,2 +103,17 @@ */
     /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     * 
+     * {% codeBlock src="combobox/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="combobox/float-label-type-api/index.html" %}{% endcodeBlock %}
+     * 
+     *  @default 'Never'.
+     */
+    floatLabelType?: FloatLabelType;
+
+    /**
      * Not applicable to this component.
@@ -122,0 +120,0 @@ * @default null.

src/combo-box/combo-box.d.ts

@@ -5,3 +5,3 @@ /// <reference path="../drop-down-list/drop-down-list-model.d.ts" />
 import { ComboBoxModel } from '../combo-box/combo-box-model';
-import { InputObject } from '@syncfusion/ej2-inputs';
+import { InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';
 import { Query } from '@syncfusion/ej2-data';
@@ -38,12 +38,6 @@ /**
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let games: ComboBox = new ComboBox({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   games.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="combobox/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}.
@@ -59,20 +53,6 @@ */
      * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]
-     *   let countries: ComboBox = new ComboBox({
-     *      dataSource: searchData,
-     *      fields: { text: "country", value: "id" },
-     *      allowFiltering: true,
-     *      filtering: function (e: FilteringEventArgs) {
-     *          let query = new Query();
-     *          query = (e.text != "") ? query.where("country", "startswith", e.text, true) : query;
-     *          e.updateData(searchData, query);
-     *      }
-     *   });
-     *   countries.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="combobox/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/allow-filtering-api/index.html" %}{% endcodeBlock %}
      * @default false.
@@ -82,18 +62,8 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
-     * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]
-     *   let customers: ComboBox = new ComboBox({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     * Accepts the external [`Query`](./api-query.html)
+     * that execute along with [`data processing`](./data-binding.html).
+     *
+     * {% codeBlock src="combobox/query-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/query-api/index.html" %}{% endcodeBlock %}
      * @default null.
@@ -103,2 +73,12 @@ */
     /**
+     * Gets or sets the index of the selected item in the component.
+     *
+     * {% codeBlock src="combobox/index-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/index-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default null.
+     */
+    index: number;
+    /**
      * Specifies whether to show or hide the clear button.
@@ -110,3 +90,4 @@ * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
     /**
-     * Triggers on set a custom value to this component.
+     * Triggers on set a
+     * [`custom value`](./getting-started.html#custom-values) to this component.
      * @event
@@ -117,2 +98,3 @@ */
      * Triggers on typing a character in the component.
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
      * @event
@@ -128,2 +110,16 @@ */
     /**
+     * Specifies whether to display the floating label above the input element.
+     * Possible values are:
+     * * Never: The label will never float in the input when the placeholder is available.
+     * * Always: The floating label will always float above the input.
+     * * Auto: The floating label will float above the input after focusing or entering a value in the input.
+     *
+     * {% codeBlock src="combobox/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="combobox/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     *  @default 'Never'.
+     */
+    floatLabelType: FloatLabelType;
+    /**
      * Not applicable to this component.
@@ -130,0 +126,0 @@ * @default null.

src/combo-box/combo-box.js

@@ -150,3 +150,3 @@ var __extends = (this && this.__extends) || (function () {
         ComboBox.prototype.getNgDirective = function () {
-            return 'EJ-COMBOBOX';
+            return 'EJS-COMBOBOX';
         };
@@ -361,3 +361,6 @@ ComboBox.prototype.setSearchBox = function () {
             }
-            if (this.isTyped && !this.isSelected && ej2_base_2.isNullOrUndefined(li)) {
+            if (e.action === 'enter' && this.inputElement.value.trim() === '') {
+                this.clear(e);
+            }
+            else if (this.isTyped && !this.isSelected && ej2_base_2.isNullOrUndefined(li)) {
                 this.customValue();
@@ -411,4 +414,4 @@ }
                     else {
-                        dataItem[fields.text] = value_1;
-                        dataItem[fields.value] = value_1;
+                        ej2_base_2.setValue(fields.text, value_1, dataItem);
+                        ej2_base_2.setValue(fields.value, value_1, dataItem);
                     }
@@ -433,2 +436,5 @@ this.itemData = dataItem;
             }
+            else if (this.allowCustom) {
+                this.isSelectCustom = true;
+            }
         };
@@ -538,2 +544,5 @@ ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
         __decorate([
+            ej2_base_1.Property(null)
+        ], ComboBox.prototype, "index", void 0);
+        __decorate([
             ej2_base_1.Property(true)
@@ -551,2 +560,5 @@ ], ComboBox.prototype, "showClearButton", void 0);
         __decorate([
+            ej2_base_1.Property('Never')
+        ], ComboBox.prototype, "floatLabelType", void 0);
+        __decorate([
             ej2_base_1.Property(null)
@@ -553,0 +565,0 @@ ], ComboBox.prototype, "filterBarPlaceholder", void 0);

src/common/index.d.ts

 /**
- * Drop-Downs common module
+ * Common source
  */
 export * from './incremental-search';
 export * from './highlight-search';

src/drop-down-base/drop-down-base-model.d.ts

@@ -1,6 +0,37 @@
-import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile } from '@syncfusion/ej2-base';import { setStyleAttribute, removeClass, createElement, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions } from '@syncfusion/ej2-data';import { ListBase, SortOrder, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
-import {FieldSettings,SelectEventArgs} from "./drop-down-base";
+import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile } from '@syncfusion/ej2-base';import { setStyleAttribute, extend, removeClass, createElement, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions, ChildProperty, Complex } from '@syncfusion/ej2-base';import { DataManager, Query, DataOptions } from '@syncfusion/ej2-data';import { ListBase, SortOrder, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
+import {SelectEventArgs} from "./drop-down-base";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
+ * Interface for a class FieldSettings
+ */
+export interface FieldSettingsModel {
+
+    /**
+     * Maps the text column from data table for each list item
+     * @default null.
+     */
+    text?: string;
+
+    /**
+     * Maps the value column from data table for each list item
+     * @default null.
+     */
+    value?: string;
+
+    /**
+     * Maps the icon class column from data table for each list item.
+     * @default null.
+     */
+    iconCss?: string;
+
+    /**
+     * Group the list items with it's related items by mapping groupBy field.
+     * @default null.
+     */
+    groupBy?: string;
+
+}
+
+/**
  * Interface for a class DropDownBase
@@ -12,5 +43,21 @@ */
      * The `fields` property maps the columns of the data table and binds the data to the component.
+     * * text - Maps the text column from data table for each list item.
+     * * value - Maps the value column from data table for each list item.
+     * * iconCss - Maps the icon class column from data table for each list item.
+     * * groupBy - Group the list items with it's related items by mapping groupBy field.
+     * ```html
+     * <input type="text" tabindex="1" id="list"> </input>
+     * ```
+     * ```typescript  
+     *   let customers: DropDownList = new DropDownList({
+     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
+     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
+     *      fields: { text: 'ContactName', value: 'CustomerID' },
+     *      placeholder: 'Select a customer'
+     *   });
+     *   customers.appendTo("#list");
+     * ```
      * @default {text: null, value: null, iconCss: null, groupBy: null}
      */
-    fields?: FieldSettings;
+    fields?: FieldSettingsModel;
 
@@ -34,2 +81,6 @@ /**
      * Accepts the template design and assigns it to each list item present in the popup.
+     * We have built-in [`template engine`](./template-engine.html)
+     * 
+     * which provides options to compile template string into a executable function. 
+     * For EX: We have expression evolution as like ES6 expression string literals. 
      * @default null.
@@ -77,3 +128,3 @@ */
      * It can be an array of JSON Objects or an instance of
-     * [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html).
+     * [`DataManager`](./api-dataManager.html).
      * @default [].
@@ -84,3 +135,3 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`Query`](./api-query.html)
      * which will execute along with the data processing.
@@ -92,2 +143,13 @@ * @default null.
     /**
+     * specifies the z-index value of the component popup element.
+     * @default 1000
+     */
+    zIndex?: number;
+
+    /**
+     * ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
+     */
+    ignoreAccent?: boolean;
+
+    /**
      * Triggers before fetching data from the remote server.
@@ -111,3 +173,3 @@ * @event
     /**
-     * Triggers when an item in the popup is selected.
+     * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
      * @event
@@ -114,0 +176,0 @@ */

src/drop-down-base/drop-down-base.d.ts

 import { Component, KeyboardEvents, EmitType, L10n } from '@syncfusion/ej2-base';
-import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { SortOrder } from '@syncfusion/ej2-lists';
-import { DropDownBaseModel } from './drop-down-base-model';
-export interface FieldSettings {
+import { DropDownBaseModel, FieldSettingsModel } from './drop-down-base-model';
+export declare class FieldSettings extends ChildProperty<FieldSettings> {
     /**
      * Maps the text column from data table for each list item
+     * @default null.
      */
-    text?: string;
+    text: string;
     /**
      * Maps the value column from data table for each list item
+     * @default null.
      */
-    value?: string;
+    value: string;
     /**
      * Maps the icon class column from data table for each list item.
+     * @default null.
      */
-    iconCss?: string;
+    iconCss: string;
     /**
      * Group the list items with it's related items by mapping groupBy field.
+     * @default null.
      */
-    groupBy?: string;
+    groupBy: string;
 }
@@ -51,3 +55,3 @@ export declare const dropDownBaseClasses: DropDownBaseClassList;
      */
-    itemData: FieldSettings;
+    itemData: FieldSettingsModel;
     /**
@@ -57,2 +61,6 @@ * Specifies the original event arguments.
     e: MouseEvent | KeyboardEvent | TouchEvent;
+    /**
+     * Illustrates whether the current action needs to be prevented or not.
+     */
+    cancel?: boolean;
 }
@@ -85,5 +93,21 @@ /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
+     * * text - Maps the text column from data table for each list item.
+     * * value - Maps the value column from data table for each list item.
+     * * iconCss - Maps the icon class column from data table for each list item.
+     * * groupBy - Group the list items with it's related items by mapping groupBy field.
+     * ```html
+     * <input type="text" tabindex="1" id="list"> </input>
+     * ```
+     * ```typescript
+     *   let customers: DropDownList = new DropDownList({
+     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
+     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
+     *      fields: { text: 'ContactName', value: 'CustomerID' },
+     *      placeholder: 'Select a customer'
+     *   });
+     *   customers.appendTo("#list");
+     * ```
      * @default {text: null, value: null, iconCss: null, groupBy: null}
      */
-    fields: FieldSettings;
+    fields: FieldSettingsModel;
     /**
@@ -104,2 +128,6 @@ * When set to true, enables RTL mode of the component that
      * Accepts the template design and assigns it to each list item present in the popup.
+     * We have built-in [`template engine`](./template-engine.html)
+     *
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null.
@@ -141,3 +169,3 @@ */
      * It can be an array of JSON Objects or an instance of
-     * [`DataManager`](http://ej2.syncfusion.com/documentation/data/api-dataManager.html).
+     * [`DataManager`](./api-dataManager.html).
      * @default [].
@@ -149,3 +177,3 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`Query`](./api-query.html)
      * which will execute along with the data processing.
@@ -156,2 +184,11 @@ * @default null.
     /**
+     * specifies the z-index value of the component popup element.
+     * @default 1000
+     */
+    zIndex: number;
+    /**
+     * ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
+     */
+    ignoreAccent: boolean;
+    /**
      * Triggers before fetching data from the remote server.
@@ -172,3 +209,3 @@ * @event
     /**
-     * Triggers when an item in the popup is selected.
+     * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
      * @event
@@ -189,3 +226,3 @@ */
     protected getValueByText(text: string, ignoreCase?: boolean): string | number;
-    private l10nUpdate(actionFailure?);
+    protected l10nUpdate(actionFailure?: boolean): void;
     protected getTextByValue(value: string | number): string;
@@ -241,2 +278,5 @@ protected getFormattedValue(value: string): string | number;
     private createListItems(dataSource, fields);
+    protected listOption(dataSource: {
+        [key: string]: Object;
+    }[], fields: FieldSettingsModel): FieldSettingsModel;
     protected setFloatingHeader(e: Event): void;
@@ -248,2 +288,5 @@ private scrollStop(e);
     private renderItems(listData, fields);
+    protected templateListItem(dataSource: {
+        [key: string]: Object;
+    }[], fields: FieldSettingsModel): HTMLElement;
     protected typeOfData(items: {
@@ -273,3 +316,3 @@ [key: string]: Object;
         [key: string]: Object;
-    }[] | DataManager | string[] | number[], fields?: FieldSettings, query?: Query): void;
+    }[] | DataManager | string[] | number[], fields?: FieldSettingsModel, query?: Query): void;
     protected updateSelection(): void;
@@ -313,2 +356,3 @@ protected renderList(): void;
     }, itemIndex?: number): void;
+    protected setZIndex(): void;
     protected updateActionCompleteData(li: HTMLElement, item: {
@@ -315,0 +359,0 @@ [key: string]: Object;

src/drop-down-base/drop-down-base.js

@@ -20,2 +20,22 @@ var __extends = (this && this.__extends) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
+    var FieldSettings = (function (_super) {
+        __extends(FieldSettings, _super);
+        function FieldSettings() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        __decorate([
+            ej2_base_1.Property()
+        ], FieldSettings.prototype, "text", void 0);
+        __decorate([
+            ej2_base_1.Property()
+        ], FieldSettings.prototype, "value", void 0);
+        __decorate([
+            ej2_base_1.Property()
+        ], FieldSettings.prototype, "iconCss", void 0);
+        __decorate([
+            ej2_base_1.Property()
+        ], FieldSettings.prototype, "groupBy", void 0);
+        return FieldSettings;
+    }(ej2_base_3.ChildProperty));
+    exports.FieldSettings = FieldSettings;
     exports.dropDownBaseClasses = {
@@ -38,7 +58,3 @@ root: 'e-dropdownbase',
         function DropDownBase(options, element) {
-            var _this = _super.call(this, options, element) || this;
-            _this.scrollTimer = -1;
-            _this.enableRtlElements = [];
-            _this.isRequested = false;
-            return _this;
+            return _super.call(this, options, element) || this;
         }
@@ -115,3 +131,3 @@ ;
                 var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };
-                this.l10n = new ej2_base_1.L10n('dropdownlist', l10nLocale, this.locale);
+                this.l10n = new ej2_base_1.L10n('dropdowns', l10nLocale, this.locale);
                 this.list.innerHTML = actionFailure ?
@@ -228,2 +244,5 @@ this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
         DropDownBase.prototype.preRender = function () {
+            this.scrollTimer = -1;
+            this.enableRtlElements = [];
+            this.isRequested = false;
         };
@@ -302,3 +321,3 @@ DropDownBase.prototype.setListData = function (dataSource, fields, query) {
                 var headerItems = listEle.querySelectorAll('.' + exports.dropDownBaseClasses.group);
-                var tempHeaders = ej2_lists_1.ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields, headerItems);
+                var tempHeaders = ej2_lists_1.ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems);
             }
@@ -309,3 +328,3 @@ };
                 if (fields.groupBy) {
-                    dataSource = ej2_lists_1.ListBase.groupDataSource(dataSource, fields);
+                    dataSource = ej2_lists_1.ListBase.groupDataSource(dataSource, fields.properties);
                 }
@@ -317,7 +336,13 @@ ej2_base_1.addClass([this.list], exports.dropDownBaseClasses.grouping);
             }
+            var options = this.listOption(dataSource, fields);
+            return ej2_lists_1.ListBase.createList(dataSource, options, true);
+        };
+        ;
+        DropDownBase.prototype.listOption = function (dataSource, fields) {
             var iconCss = ej2_base_2.isNullOrUndefined(fields.iconCss) ? false : true;
             var options = (fields.text !== null || fields.value !== null) ? {
-                fields: fields, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }
+                fields: fields.properties,
+                showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }
             } : { fields: { value: 'text' } };
-            return ej2_lists_1.ListBase.createList(dataSource, options, true);
+            return ej2_base_2.extend({}, options, fields, true);
         };
@@ -361,3 +386,3 @@ ;
                 if (dataSource && fields.groupBy) {
-                    dataSource = ej2_lists_1.ListBase.groupDataSource(dataSource, fields, this.sortOrder);
+                    dataSource = ej2_lists_1.ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);
                 }
@@ -367,3 +392,3 @@ else {
                 }
-                ulElement = ej2_lists_1.ListBase.renderContentTemplate(this.itemTemplate, dataSource, fields);
+                ulElement = this.templateListItem(dataSource, fields);
             }
@@ -376,2 +401,6 @@ else {
         ;
+        DropDownBase.prototype.templateListItem = function (dataSource, fields) {
+            var option = this.listOption(dataSource, fields);
+            return ej2_lists_1.ListBase.renderContentTemplate(this.itemTemplate, dataSource, fields.properties, option);
+        };
         DropDownBase.prototype.typeOfData = function (items) {
@@ -477,2 +506,6 @@ var item = { typeof: null, item: null };
                         break;
+                    case 'zIndex':
+                        this.setProperties({ zIndex: newProp.zIndex }, true);
+                        this.setZIndex();
+                        break;
                 }
@@ -562,2 +595,4 @@ }
         };
+        DropDownBase.prototype.setZIndex = function () {
+        };
         DropDownBase.prototype.updateActionCompleteData = function (li, item) {
@@ -597,3 +632,3 @@ };
         __decorate([
-            ej2_base_1.Property({ text: null, value: null, iconCss: null, groupBy: null })
+            ej2_base_3.Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
         ], DropDownBase.prototype, "fields", void 0);
@@ -631,2 +666,8 @@ __decorate([
         __decorate([
+            ej2_base_1.Property(1000)
+        ], DropDownBase.prototype, "zIndex", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], DropDownBase.prototype, "ignoreAccent", void 0);
+        __decorate([
             ej2_base_1.Event()
@@ -633,0 +674,0 @@ ], DropDownBase.prototype, "actionBegin", void 0);

src/drop-down-list/drop-down-list-model.d.ts

@@ -1,2 +0,2 @@
-import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, createElement, append } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, setStyleAttribute, closest, prepend, detach, classList } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FieldSettings } from '../drop-down-base/drop-down-base';import { DropDownListModel } from '../drop-down-list';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';
+import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, createElement, append } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, setStyleAttribute, closest, prepend, detach, classList } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DropDownListModel } from '../drop-down-list';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';
 import {FilteringEventArgs,ChangeEventArgs,PopupEventArgs} from "./drop-down-list";
@@ -11,3 +11,3 @@ import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
     /**
-     * Sets CSS classes to the root element of the component that helps customize the UI styles.
+     * Sets CSS classes to the root element of the component that allows customization of appearance.
      * @default null.
@@ -25,3 +25,5 @@ */
     /**
-     * Specifies the height of the popup list.
+     * Specifies the height of the popup list.  
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
      * @default '300px'.
@@ -34,2 +36,4 @@ */
      * the component.
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
      * @default '100%'.
@@ -40,3 +44,3 @@ */
     /**
-     * Accepts the value to be displayed as a watermark text on the component input.
+     * Specifies a short hint that describes the expected value of the DropDownList component.
      * @default null.
@@ -55,12 +59,7 @@ */
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let dropDownListObj: DropDownList = new DropDownList({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   dropDownListObj.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="dropdownlist/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/html-attributes-api/index.html" %}{% endcodeBlock %}
+     *
      * @default {}.
@@ -71,16 +70,9 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`Query`](./api-query.html)
      * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript  
-     *   let customers: DropDownList = new DropDownList({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     * 
+     * {% codeBlock src="dropdownlist/query-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/query-api/index.html" %}{% endcodeBlock %}
+     * 
      * @default null.
@@ -92,2 +84,8 @@ */
      * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to 
+     * [`Template`](./templates.html) documentation.
+     * 
+     * We have built-in [`template engine`](./template-engine.html) 
+     * which provides options to compile template string into a executable function. 
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null.
@@ -99,2 +97,3 @@ */
      * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
      * @default null.
@@ -106,2 +105,3 @@ */
      * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
      * @default null.
@@ -115,21 +115,9 @@ */
      * the characters typed in the search TextBox.
+     * 
      * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]   
-     *   let listObj: DropDownList = new DropDownList({
-     *      dataSource: searchData,
-     *      fields: { text: "country", value: "id" },
-     *      allowFiltering: true,
-     *      filtering: function (e: FilteringEventArgs) {
-     *          let query = new Query();
-     *          query = (e.text != "") ? query.where("country", "startswith", e.text, true) : query;
-     *          e.updateData(searchData, query);
-     *      }
-     *   });
-     *   listObj.appendTo("#list");
-     * ```
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
+     * 
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
      * @default false.
@@ -159,2 +147,7 @@ */
      * Gets or sets the index of the selected item in the component.
+     * 
+     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
+     * 
      * @default null.
@@ -170,3 +163,8 @@ */
      * * Auto: The floating label will float above the input after focusing or entering a value in the input.
-     * @default 'Never'.
+     * 
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
+     * 
+     *  @default 'Never'.
      */
@@ -183,3 +181,7 @@ floatLabelType?: FloatLabelType;
     /**
-     * Triggers on typing a character in the filter bar.
+     * Triggers on typing a character in the filter bar when the 
+     * [`allowFiltering`](./api-dropDownList.html#allowfiltering) 
+     * is enabled.
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
+     * 
      * @event
@@ -190,3 +192,5 @@ */
     /**
-     * Triggers when an item in a popup is selected or when the model value is changed.
+     * Triggers when an item in a popup is selected or when the model value is changed by user.
+     * Use change event to 
+     * [`Configure the Cascading DropDownList`](./how-to.html#configure-the-cascading-dropdownlist)
      * @event
@@ -193,0 +197,0 @@ */

src/drop-down-list/drop-down-list.d.ts

@@ -6,3 +6,4 @@ /// <reference path="../drop-down-base/drop-down-base-model.d.ts" />
 import { IInput, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';
-import { DropDownBase, SelectEventArgs, FieldSettings } from '../drop-down-base/drop-down-base';
+import { DropDownBase, SelectEventArgs } from '../drop-down-base/drop-down-base';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
 import { DropDownListModel } from '../drop-down-list';
@@ -79,4 +80,5 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
     };
+    protected isCustomFilter: boolean;
     /**
-     * Sets CSS classes to the root element of the component that helps customize the UI styles.
+     * Sets CSS classes to the root element of the component that allows customization of appearance.
      * @default null.
@@ -93,2 +95,4 @@ */
      * Specifies the height of the popup list.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
      * @default '300px'.
@@ -100,2 +104,4 @@ */
      * the component.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
      * @default '100%'.
@@ -105,3 +111,3 @@ */
     /**
-     * Accepts the value to be displayed as a watermark text on the component input.
+     * Specifies a short hint that describes the expected value of the DropDownList component.
      * @default null.
@@ -118,12 +124,7 @@ */
      * accepts n number of attributes in a key-value pair format.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let dropDownListObj: DropDownList = new DropDownList({
-     *      dataSource: ['Tennis', 'FootBall', 'Cricket'],
-     *      htmlAttributes: { title: 'List of games available here.' }
-     *   });
-     *   dropDownListObj.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="dropdownlist/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/html-attributes-api/index.html" %}{% endcodeBlock %}
+     *
      * @default {}.
@@ -135,16 +136,9 @@ */
     /**
-     * Accepts the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
+     * Accepts the external [`Query`](./api-query.html)
      * that execute along with data processing.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let customers: DropDownList = new DropDownList({
-     *      dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
-     *      query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
-     *      fields: { text: 'ContactName', value: 'CustomerID' },
-     *      placeholder: 'Select a customer'
-     *   });
-     *   customers.appendTo("#list");
-     * ```
+     *
+     * {% codeBlock src="dropdownlist/query-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/query-api/index.html" %}{% endcodeBlock %}
+     *
      * @default null.
@@ -155,2 +149,8 @@ */
      * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to
+     * [`Template`](./templates.html) documentation.
+     *
+     * We have built-in [`template engine`](./template-engine.html)
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null.
@@ -161,2 +161,3 @@ */
      * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
      * @default null.
@@ -167,2 +168,3 @@ */
      * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
      * @default null.
@@ -175,21 +177,9 @@ */
      * the characters typed in the search TextBox.
+     *
      * If no match is found, the value of the `noRecordsTemplate` property will be displayed.
-     * ```html
-     * <input type="text" tabindex="1" id="list"> </input>
-     * ```
-     * ```typescript
-     *   let searchData: { [key: string]: Object; }[] = [ {id: 's1', country: 'California'}, {id: 's2', country: 'India'},
-     * {id: 's3', country: 'USA'}, {id: 's4', country: 'England'}]
-     *   let listObj: DropDownList = new DropDownList({
-     *      dataSource: searchData,
-     *      fields: { text: "country", value: "id" },
-     *      allowFiltering: true,
-     *      filtering: function (e: FilteringEventArgs) {
-     *          let query = new Query();
-     *          query = (e.text != "") ? query.where("country", "startswith", e.text, true) : query;
-     *          e.updateData(searchData, query);
-     *      }
-     *   });
-     *   listObj.appendTo("#list");
-     * ```
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
+     *
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/allow-filtering-api/index.html" %}{% endcodeBlock %}
      * @default false.
@@ -215,2 +205,7 @@ */
      * Gets or sets the index of the selected item in the component.
+     *
+     * {% codeBlock src="dropdownlist/index-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/index-api/index.html" %}{% endcodeBlock %}
+     *
      * @default null.
@@ -225,3 +220,8 @@ */
      * * Auto: The floating label will float above the input after focusing or entering a value in the input.
-     * @default 'Never'.
+     *
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="dropdownlist/float-label-type-api/index.html" %}{% endcodeBlock %}
+     *
+     *  @default 'Never'.
      */
@@ -236,3 +236,7 @@ floatLabelType: FloatLabelType;
     /**
-     * Triggers on typing a character in the filter bar.
+     * Triggers on typing a character in the filter bar when the
+     * [`allowFiltering`](./api-dropDownList.html#allowfiltering)
+     * is enabled.
+     * > For more details about the filtering refer to [`Filtering`](./filtering.html) documentation.
+     *
      * @event
@@ -242,3 +246,5 @@ */
     /**
-     * Triggers when an item in a popup is selected or when the model value is changed.
+     * Triggers when an item in a popup is selected or when the model value is changed by user.
+     * Use change event to
+     * [`Configure the Cascading DropDownList`](./how-to.html#configure-the-cascading-dropdownlist)
      * @event
@@ -276,2 +282,4 @@ */
     protected preRender(): void;
+    private initializeData();
+    protected setZIndex(): void;
     protected renderList(isEmptyData?: boolean): void;
@@ -281,3 +289,3 @@ private floatLabelChange();
     protected resetFocusElement(): void;
-    protected clear(e?: MouseEvent, property?: string): void;
+    protected clear(e?: MouseEvent | KeyboardEventArgs, property?: string): void;
     private resetSelection();
@@ -364,2 +372,3 @@ private setHTMLAttributes();
     protected searchLists(e: KeyboardEventArgs): void;
+    private filteringAction(dataSource, query?, fields?);
     protected setSearchBox(popupElement: HTMLElement): InputObject;
@@ -480,2 +489,6 @@ protected onInput(): void;
     /**
+     * Illustrates whether the current action needs to be prevented or not.
+     */
+    cancel: boolean;
+    /**
      * Search text value.
@@ -488,3 +501,3 @@ */
      * @param  {Query} query - Specify the query to filter the data.
-     * @param  {FieldSettings} fields - Specify the fields to map the column in the data table.
+     * @param  {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @return {void}.
@@ -494,3 +507,3 @@ */
         [key: string]: Object;
-    }[] | DataManager | string[] | number[], query?: Query, fields?: FieldSettings): void;
+    }[] | DataManager | string[] | number[], query?: Query, fields?: FieldSettingsModel): void;
 }
@@ -502,2 +515,6 @@ export interface PopupEventArgs {
     popup: Popup;
+    /**
+     * Illustrates whether the current action needs to be prevented or not.
+     */
+    cancel?: boolean;
 }

src/multi-select/index.d.ts

@@ -6,1 +6,2 @@ /**
 export * from './multi-select-model';
+export * from './checkbox-selection';

src/multi-select/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./multi-select"], function (require, exports, multi_select_1) {
+define(["require", "exports", "./multi-select", "./checkbox-selection"], function (require, exports, multi_select_1, checkbox_selection_1) {
     "use strict";
@@ -8,2 +8,3 @@ function __export(m) {
     __export(multi_select_1);
+    __export(checkbox_selection_1);
 });

src/multi-select/multi-select-model.d.ts

@@ -1,2 +0,2 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, FieldSettings } from '../drop-down-base/drop-down-base';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput } from '@syncfusion/ej2-inputs';import { attributes } from '@syncfusion/ej2-base';import { NotifyPropertyChanges } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser } from '@syncfusion/ej2-base';import { PopupEventArgs, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { MultiSelectModel } from '../multi-select';import { Search } from '../common/incremental-search';import { createElement, append, addClass, removeClass, setStyleAttribute, closest, detach, remove } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';
+import { DropDownBase, SelectEventArgs, dropDownBaseClasses } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput } from '@syncfusion/ej2-inputs';import { attributes } from '@syncfusion/ej2-base';import { NotifyPropertyChanges } from '@syncfusion/ej2-base';import { EventHandler, Property, Event, compile, L10n, EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, prepend } from '@syncfusion/ej2-base';import { PopupEventArgs, FilteringEventArgs } from '../drop-down-list/drop-down-list';import { MultiSelectModel } from '../multi-select';import { Search } from '../common/incremental-search';import { createElement, append, addClass, removeClass, setStyleAttribute, closest, detach, remove, select } from '@syncfusion/ej2-base';import { getUniqueID, formatUnit, isNullOrUndefined, isUndefined, ModuleDeclaration } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { SortOrder } from '@syncfusion/ej2-lists';import { CheckBoxSelection } from './checkbox-selection';import { IMulitSelect } from './interface';
 import {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,TaggingEventArgs,CustomValueEventArgs} from "./multi-select";
@@ -26,2 +26,5 @@ import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
      * Gets or sets the height of the popup list. By default it renders based on its list item.
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
+     * 
      * @default '300px'
@@ -33,2 +36,5 @@ */
      * Gets or sets the width of the popup list and percentage values has calculated based on input width.
+     * > For more details about the popup configuration refer to 
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
+     * 
      * @default '100%'
@@ -46,4 +52,14 @@ */
     /**
-     * Gets or sets the additional attribute to `HtmlAttributes` property in DropDownList,
+     * Accepts the value to be displayed as a watermark text on the filter bar. 
+     * @default null.
+     */
+    filterBarPlaceholder?: string;
+
+    /**
+     * Gets or sets the additional attribute to `HtmlAttributes` property in MultiSelect,
      * which helps to add attribute like title, name etc, input should be key value pair.
+     * 
+     * {% codeBlock src="multiselect/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="multiselect/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}
@@ -55,2 +71,8 @@ */
      * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to 
+     * [`Template`](./templates.html) documentation.
+     * 
+     * We have built-in [`template engine`](./template-engine.html) 
+     * which provides options to compile template string into a executable function. 
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null
@@ -62,2 +84,4 @@ */
      * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     * 
      * @default null
@@ -69,2 +93,4 @@ */
      * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     * 
      * @default null
@@ -76,2 +102,7 @@ */
      * Accepts the template design and assigns it to each list item present in the popup.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     * 
+     * We have built-in [`template engine`](./template-engine.html) 
+     * which provides options to compile template string into a executable function. 
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null
@@ -84,3 +115,8 @@ */
      * Filter action performs when type in search box and collect the matched item through `filtering` event.
-     * If searching character does not match, `noRecordsTemplate` property value will be shown. 
+     * If searching character does not match, `noRecordsTemplate` property value will be shown.
+     * 
+     * {% codeBlock src="multiselect/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="multiselect/allow-filtering-api/index.html" %}{% endcodeBlock %}
+     * 
      * @default false
@@ -91,3 +127,4 @@ */
     /**
-     * Allows user to add a custom value, the value which is not present in the suggestion list. 
+     * Allows user to add a 
+     * [`custom value`](./custom-value.html), the value which is not present in the suggestion list. 
      * @default false
@@ -145,9 +182,14 @@ */
      * 
-     *   - `box` - selected items will be visualized in chip.
+     *   - `Box` - selected items will be visualized in chip.
      * 
-     *   - `delimiter` - selected items will be visualized in text content.
+     *   - `Delimiter` - selected items will be visualized in text content.
      * 
-     *   - `default` - on `focus in` component will act in `box` mode.
+     *   - `Default` - on `focus in` component will act in `box` mode.
      *    on `blur` component will act in `delimiter` mode.
-     * @default default
+     * 
+     * {% codeBlock src="multiselect/visual-mode-api/index.ts" %}{% endcodeBlock %}
+     * 
+     * {% codeBlock src="multiselect/visual-mode-api/index.html" %}{% endcodeBlock %}
+     * 
+     * @default Default
      */
@@ -163,3 +205,4 @@ mode?: visualMode;
     /**
-     * Sets case sensitive option for filter operation.
+     * Sets [`case sensitive`](./filtering.html#case-sensitive-filtering) 
+     * option for filter operation.
      * @default false
@@ -170,2 +213,43 @@ */
     /**
+     * Allows you to either show or hide the DropDown button on the component
+     * 
+     * @default false
+     */
+    showDropDownIcon?: boolean;
+
+    /**
+     * Allows you to either show or hide the selectAll option on the component.
+     * 
+     * @default false
+     */
+    showSelectAll?: boolean;
+
+    /**
+     * Specifies the selectAllText to be displayed on the component.
+     * 
+     * @default 'select All'
+     */
+    selectAllText?: string;
+
+    /**
+     * Specifies the UnSelectAllText to be displayed on the component.
+     * 
+     * @default 'select All'
+     */
+    unSelectAllText?: string;
+
+    /**
+     * Reorder the selected items in popup visibility state.
+     * 
+     * @default true
+     */
+    enableSelectionOrder?: boolean;
+
+    /**
+     * Whether to automatically open the popup when the control is clicked.
+     * @default true
+     */
+    openOnClick?: boolean;
+
+    /**
      * Fires each time when selection changes happened in list items after model and input value get affected.
@@ -213,3 +297,11 @@ * @event
     /**
+     * Event triggers when the chip selection.
+     * @event
+     */
+    chipSelection?: EmitType<Object>;
+
+    /**
      * Triggers event,when user types a text in search box.
+     * > For more details about filtering, refer to [`Filtering`](./filtering.html) documentation.
+     * 
      * @event
@@ -221,2 +313,4 @@ */
      * Fires before set the selected item as chip in the component.
+     * > For more details about chip customization refer [`Chip Customization`](./chip-customization.html)
+     * 
      * @event
@@ -227,3 +321,3 @@ */
     /**
-     * Triggers when the customValue is selected.
+     * Triggers when the [`customValue`](./custom-value.html) is selected.
      * @event
@@ -230,0 +324,0 @@ */

src/multi-select/multi-select.d.ts

 /// <reference path="../drop-down-base/drop-down-base-model.d.ts" />
-import { DropDownBase, SelectEventArgs, FieldSettings } from '../drop-down-base/drop-down-base';
+import { DropDownBase, SelectEventArgs } from '../drop-down-base/drop-down-base';
+import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';
 import { IInput } from '@syncfusion/ej2-inputs';
@@ -7,2 +8,4 @@ import { EmitType, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { MultiSelectModel } from '../multi-select';
+import { ModuleDeclaration } from '@syncfusion/ej2-base';
+import { Query } from '@syncfusion/ej2-data';
 export interface RemoveEventArgs extends SelectEventArgs {
@@ -32,2 +35,10 @@ }
     private setInitialValue;
+    private setDynValue;
+    private listCurrentOptions;
+    private targetInputElement;
+    private selectAllHeight?;
+    private searchBoxHeight?;
+    private mobFilter?;
+    private isFiltered;
+    private isFirstClick;
     /**
@@ -47,2 +58,5 @@ * Sets the CSS classes to root element of this component which helps to customize the
      * Gets or sets the height of the popup list. By default it renders based on its list item.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
+     *
      * @default '300px'
@@ -53,2 +67,5 @@ */
      * Gets or sets the width of the popup list and percentage values has calculated based on input width.
+     * > For more details about the popup configuration refer to
+     * [`Popup Configuration`](./getting-started.html#configure-the-popup-list) documentation.
+     *
      * @default '100%'
@@ -64,4 +81,13 @@ */
     /**
-     * Gets or sets the additional attribute to `HtmlAttributes` property in DropDownList,
+     * Accepts the value to be displayed as a watermark text on the filter bar.
+     * @default null.
+     */
+    filterBarPlaceholder: string;
+    /**
+     * Gets or sets the additional attribute to `HtmlAttributes` property in MultiSelect,
      * which helps to add attribute like title, name etc, input should be key value pair.
+     *
+     * {% codeBlock src="multiselect/html-attributes-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="multiselect/html-attributes-api/index.html" %}{% endcodeBlock %}
      * @default {}
@@ -74,2 +100,8 @@ */
      * Accepts the template design and assigns it to the selected list item in the input element of the component.
+     * For more details about the available template options refer to
+     * [`Template`](./templates.html) documentation.
+     *
+     * We have built-in [`template engine`](./template-engine.html)
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null
@@ -80,2 +112,4 @@ */
      * Accepts the template design and assigns it to the header container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     *
      * @default null
@@ -86,2 +120,4 @@ */
      * Accepts the template design and assigns it to the footer container of the popup list.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     *
      * @default null
@@ -92,2 +128,7 @@ */
      * Accepts the template design and assigns it to each list item present in the popup.
+     * > For more details about the available template options refer to [`Template`](./templates.html) documentation.
+     *
+     * We have built-in [`template engine`](./template-engine.html)
+     * which provides options to compile template string into a executable function.
+     * For EX: We have expression evolution as like ES6 expression string literals.
      * @default null
@@ -100,2 +141,7 @@ */
      * If searching character does not match, `noRecordsTemplate` property value will be shown.
+     *
+     * {% codeBlock src="multiselect/allow-filtering-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="multiselect/allow-filtering-api/index.html" %}{% endcodeBlock %}
+     *
      * @default false
@@ -105,3 +151,4 @@ */
     /**
-     * Allows user to add a custom value, the value which is not present in the suggestion list.
+     * Allows user to add a
+     * [`custom value`](./custom-value.html), the value which is not present in the suggestion list.
      * @default false
@@ -151,9 +198,14 @@ */
      *
-     *   - `box` - selected items will be visualized in chip.
+     *   - `Box` - selected items will be visualized in chip.
      *
-     *   - `delimiter` - selected items will be visualized in text content.
+     *   - `Delimiter` - selected items will be visualized in text content.
      *
-     *   - `default` - on `focus in` component will act in `box` mode.
+     *   - `Default` - on `focus in` component will act in `box` mode.
      *    on `blur` component will act in `delimiter` mode.
-     * @default default
+     *
+     * {% codeBlock src="multiselect/visual-mode-api/index.ts" %}{% endcodeBlock %}
+     *
+     * {% codeBlock src="multiselect/visual-mode-api/index.html" %}{% endcodeBlock %}
+     *
+     * @default Default
      */
@@ -167,3 +219,4 @@ mode: visualMode;
     /**
-     * Sets case sensitive option for filter operation.
+     * Sets [`case sensitive`](./filtering.html#case-sensitive-filtering)
+     * option for filter operation.
      * @default false
@@ -173,2 +226,37 @@ */
     /**
+     * Allows you to either show or hide the DropDown button on the component
+     *
+     * @default false
+     */
+    showDropDownIcon: boolean;
+    /**
+     * Allows you to either show or hide the selectAll option on the component.
+     *
+     * @default false
+     */
+    showSelectAll: boolean;
+    /**
+     * Specifies the selectAllText to be displayed on the component.
+     *
+     * @default 'select All'
+     */
+    selectAllText: string;
+    /**
+     * Specifies the UnSelectAllText to be displayed on the component.
+     *
+     * @default 'select All'
+     */
+    unSelectAllText: string;
+    /**
+     * Reorder the selected items in popup visibility state.
+     *
+     * @default true
+     */
+    enableSelectionOrder: boolean;
+    /**
+     * Whether to automatically open the popup when the control is clicked.
+     * @default true
+     */
+    openOnClick: boolean;
+    /**
      * Fires each time when selection changes happened in list items after model and input value get affected.
@@ -209,3 +297,10 @@ * @event
     /**
+     * Event triggers when the chip selection.
+     * @event
+     */
+    chipSelection: EmitType<Object>;
+    /**
      * Triggers event,when user types a text in search box.
+     * > For more details about filtering, refer to [`Filtering`](./filtering.html) documentation.
+     *
      * @event
@@ -216,2 +311,4 @@ */
      * Fires before set the selected item as chip in the component.
+     * > For more details about chip customization refer [`Chip Customization`](./chip-customization.html)
+     *
      * @event
@@ -221,3 +318,3 @@ */
     /**
-     * Triggers when the customValue is selected.
+     * Triggers when the [`customValue`](./custom-value.html) is selected.
      * @event
@@ -232,2 +329,3 @@ */
     private mainList;
+    ulElement: HTMLElement;
     private mainData;
@@ -243,2 +341,3 @@ private mainListCollection;
     private overAllClear;
+    private dropIcon;
     private hiddenElement;
@@ -255,3 +354,5 @@ private delimiterWrapper;
     private remoteCustomValue;
+    private filterAction;
     private enableRTL(state);
+    requiredModules(): ModuleDeclaration[];
     private updateHTMLAttribute();
@@ -270,2 +371,3 @@ private updateReadonly(state);
     protected onActionFailure(e: Object): void;
+    protected targetElement(): string;
     protected onActionComplete(ulElement: HTMLElement, list: {
@@ -275,3 +377,6 @@ [key: string]: Object;
     private refreshSelection();
+    private checkSelectAll();
+    private openClick(e);
     private KeyUp(e);
+    protected getQuery(query: Query): Query;
     private dataUpdater(dataSource, query?, fields?);
@@ -324,2 +429,3 @@ private tempQuery;
     private addValue(value, text, eve);
+    private checkMaxSelection();
     private dispatchSelect(value, eve, element, isNotTrigger);
@@ -333,2 +439,7 @@ private addChip(text, value, e?);
     private mouseOut();
+    protected listOption(dataSource: {
+        [key: string]: Object;
+    }[], fields: FieldSettingsModel): {
+        [key: string]: Object;
+    };
     private renderPopup();
@@ -340,2 +451,3 @@ private ClearAll(e);
     protected preRender(): void;
+    private initializeData();
     private updateData(delimiterChar);
@@ -365,3 +477,5 @@ private initialValueUpdate();
     private selectAllItem(state);
+    protected setZIndex(): void;
     protected updateDataSource(prop?: string): void;
+    private onLoadSelect();
     /**
@@ -400,2 +514,3 @@ * Get the properties to be maintained in the persisted state.
     render(): void;
+    private dropDownIcon();
     private initialUpdate();
@@ -414,2 +529,6 @@ /**
     newData: Object;
+    /**
+     * Illustrates whether the current action needs to be prevented or not.
+     */
+    cancel: boolean;
 }
@@ -424,3 +543,3 @@ export interface TaggingEventArgs {
      */
-    itemData: FieldSettings;
+    itemData: FieldSettingsModel;
     /**
@@ -455,2 +574,2 @@ * Specifies the original event arguments.
 }
-export declare type visualMode = 'default' | 'delimiter' | 'box';
+export declare type visualMode = 'Default' | 'Delimiter' | 'Box' | 'CheckBox';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15694347

increased by45.42%

Number of package files

141

increased by12.8%

Lines of code

185147

increased by65.86%

Dependency changes

• + Added@syncfusion/ej2-base@16.4.52(transitive)

• + Added@syncfusion/ej2-buttons@16.4.55(transitive)

• + Added@syncfusion/ej2-data@16.4.52(transitive)

• + Added@syncfusion/ej2-inputs@16.4.55(transitive)

• + Added@syncfusion/ej2-lists@16.4.52(transitive)

• + Added@syncfusion/ej2-popups@16.4.54(transitive)

• + Added@syncfusion/ej2-splitbuttons@16.4.53(transitive)

• - Removed@syncfusion/ej2-base@15.4.23(transitive)

• - Removed@syncfusion/ej2-buttons@15.4.30(transitive)

• - Removed@syncfusion/ej2-data@15.4.30(transitive)

• - Removed@syncfusion/ej2-inputs@15.4.29(transitive)

• - Removed@syncfusion/ej2-lists@15.4.26(transitive)

• - Removed@syncfusion/ej2-popups@15.4.27(transitive)

• Updated@syncfusion/ej2-base@^16.1.24

• Updated@syncfusion/ej2-data@^16.1.24

• Updated@syncfusion/ej2-inputs@^16.1.24

• Updated@syncfusion/ej2-lists@^16.1.24

• Updated@syncfusion/ej2-popups@^16.1.24