@syncfusion/ej2-dropdowns - npm Package Compare versions

Comparing version 15.4.19 to 15.4.20

dist/es6/auto-complete/auto-complete.js

@@ -17,2 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
+/// <reference path='../combo-box/combo-box-model.d.ts'/>
 import { Property, addClass, EventHandler, isNullOrUndefined, detach, Event } from '@syncfusion/ej2-base';
@@ -26,9 +27,25 @@ import { removeClass, attributes, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+/* tslint:disable */
 import { Input } from '@syncfusion/ej2-inputs';
 import { DataManager, Query } from '@syncfusion/ej2-data';
+/* tslint:enable */
 var SPINNER_CLASS = 'e-atc-spinner-icon';
 dropDownListClasses.root = 'e-autocomplete';
 dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
-var AutoComplete = (function (_super) {
+/**
+ * The AutoComplete component provides the matched suggestion list when type into the input,
+ * from which the user can select one.
+ * ```html
+ * <input id="list" type="text"/>
+ * ```
+ * ```typescript
+ *   let atcObj:AutoComplete = new AutoComplete();
+ *   atcObj.appendTo("#list");
+ * ```
+ */
+var AutoComplete = /** @class */ (function (_super) {
     __extends(AutoComplete, _super);
+    /**
+     * * Constructor for creating the widget
+     */
     function AutoComplete(options, element) {
@@ -40,2 +57,6 @@ var _this = _super.call(this, options, element) || this;
     ;
+    /**
+     * Initialize the event handler
+     * @private
+     */
     AutoComplete.prototype.preRender = function () {
@@ -199,2 +220,6 @@ _super.prototype.preRender.call(this);
     };
+    /**
+     * Search the entered text and show it in the suggestion list if available.
+     * @returns void.
+     */
     AutoComplete.prototype.showPopup = function () {
@@ -214,2 +239,6 @@ if (this.beforePopupOpen) {
     };
+    /**
+     * Hides the popup if it is in open state.
+     * @returns void.
+     */
     AutoComplete.prototype.hidePopup = function () {
@@ -219,3 +248,8 @@ _super.prototype.hidePopup.call(this);
     };
+    /**
+     * Dynamically change the value of properties.
+     * @private
+     */
     AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {
+        this.setUpdateInitial(['query', 'dataSource'], newProp);
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -243,5 +277,13 @@ var prop = _a[_i];
     };
+    /**
+     * Return the module name of this component.
+     * @private
+     */
     AutoComplete.prototype.getModuleName = function () {
         return 'autocomplete';
     };
+    /**
+     * To initialize the control rendering
+     * @private
+     */
     AutoComplete.prototype.render = function () {
@@ -251,52 +293,52 @@ _super.prototype.render.call(this);
     ;
+    __decorate([
+        Property({ value: null, iconCss: null, groupBy: null })
+    ], AutoComplete.prototype, "fields", void 0);
+    __decorate([
+        Property(true)
+    ], AutoComplete.prototype, "ignoreCase", void 0);
+    __decorate([
+        Property(false)
+    ], AutoComplete.prototype, "showPopupButton", void 0);
+    __decorate([
+        Property(false)
+    ], AutoComplete.prototype, "highlight", void 0);
+    __decorate([
+        Property(20)
+    ], AutoComplete.prototype, "suggestionCount", void 0);
+    __decorate([
+        Property({})
+    ], AutoComplete.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property(null)
+    ], AutoComplete.prototype, "query", void 0);
+    __decorate([
+        Property(1)
+    ], AutoComplete.prototype, "minLength", void 0);
+    __decorate([
+        Property('Contains')
+    ], AutoComplete.prototype, "filterType", void 0);
+    __decorate([
+        Event()
+    ], AutoComplete.prototype, "filtering", void 0);
+    __decorate([
+        Property(null)
+    ], AutoComplete.prototype, "index", void 0);
+    __decorate([
+        Property(null)
+    ], AutoComplete.prototype, "valueTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], AutoComplete.prototype, "filterBarPlaceholder", void 0);
+    __decorate([
+        Property(false)
+    ], AutoComplete.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(null)
+    ], AutoComplete.prototype, "text", void 0);
+    AutoComplete = __decorate([
+        NotifyPropertyChanges
+    ], AutoComplete);
     return AutoComplete;
 }(ComboBox));
-__decorate([
-    Property({ value: null, iconCss: null, groupBy: null })
-], AutoComplete.prototype, "fields", void 0);
-__decorate([
-    Property(true)
-], AutoComplete.prototype, "ignoreCase", void 0);
-__decorate([
-    Property(false)
-], AutoComplete.prototype, "showPopupButton", void 0);
-__decorate([
-    Property(false)
-], AutoComplete.prototype, "highlight", void 0);
-__decorate([
-    Property(20)
-], AutoComplete.prototype, "suggestionCount", void 0);
-__decorate([
-    Property({})
-], AutoComplete.prototype, "htmlAttributes", void 0);
-__decorate([
-    Property(null)
-], AutoComplete.prototype, "query", void 0);
-__decorate([
-    Property(1)
-], AutoComplete.prototype, "minLength", void 0);
-__decorate([
-    Property('Contains')
-], AutoComplete.prototype, "filterType", void 0);
-__decorate([
-    Event()
-], AutoComplete.prototype, "filtering", void 0);
-__decorate([
-    Property(null)
-], AutoComplete.prototype, "index", void 0);
-__decorate([
-    Property(null)
-], AutoComplete.prototype, "valueTemplate", void 0);
-__decorate([
-    Property(null)
-], AutoComplete.prototype, "filterBarPlaceholder", void 0);
-__decorate([
-    Property(false)
-], AutoComplete.prototype, "allowFiltering", void 0);
-__decorate([
-    Property(null)
-], AutoComplete.prototype, "text", void 0);
-AutoComplete = __decorate([
-    NotifyPropertyChanges
-], AutoComplete);
 export { AutoComplete };

dist/es6/auto-complete/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './auto-complete';

dist/es6/combo-box/combo-box.js

@@ -17,2 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
+/// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
 import { EventHandler, Property, Event, addClass, Browser, removeClass } from '@syncfusion/ej2-base';
@@ -24,3 +25,5 @@ import { isNullOrUndefined, NotifyPropertyChanges } from '@syncfusion/ej2-base';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+/* tslint:disable */
 import { Input } from '@syncfusion/ej2-inputs';
+/* tslint:enable */
 dropDownListClasses.root = 'e-combobox';
@@ -31,4 +34,23 @@ var inputObject = {
 };
-var ComboBox = (function (_super) {
+/**
+ * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.
+ * ```html
+ * <select id="list">
+ *      <option value='1'>Badminton</option>
+ *      <option value='2'>Basketball</option>
+ *      <option value='3'>Cricket</option>
+ *      <option value='4'>Football</option>
+ *      <option value='5'>Tennis</option>
+ * </select>
+ * ```
+ * ```typescript
+ *   let games:ComboBox = new ComboBox();
+ *   games.appendTo("#list");
+ * ```
+ */
+var ComboBox = /** @class */ (function (_super) {
     __extends(ComboBox, _super);
+    /**
+     * *Constructor for creating the component
+     */
     function ComboBox(options, element) {
@@ -38,2 +60,6 @@ return _super.call(this, options, element) || this;
     ;
+    /**
+     * Initialize the event handler
+     * @private
+     */
     ComboBox.prototype.preRender = function () {
@@ -434,3 +460,8 @@ _super.prototype.preRender.call(this);
     };
+    /**
+     * Dynamically change the value of properties.
+     * @private
+     */
     ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
+        this.setUpdateInitial(['query', 'dataSource'], newProp);
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -463,2 +494,6 @@ var prop = _a[_i];
     };
+    /**
+     * To initialize the control rendering.
+     * @private
+     */
     ComboBox.prototype.render = function () {
@@ -472,5 +507,13 @@ _super.prototype.render.call(this);
     ;
+    /**
+     * Return the module name of this component.
+     * @private
+     */
     ComboBox.prototype.getModuleName = function () {
         return 'combobox';
     };
+    /**
+     * Hides the popup if it is in open state.
+     * @returns void.
+     */
     ComboBox.prototype.hidePopup = function () {
@@ -517,2 +560,6 @@ if (!isNullOrUndefined(this.listData)) {
     };
+    /**
+     * Sets the focus to the component for interaction.
+     * @returns void.
+     */
     ComboBox.prototype.focusIn = function () {
@@ -524,37 +571,37 @@ if (Browser.isDevice && !this.allowFiltering) {
     };
+    __decorate([
+        Property(false)
+    ], ComboBox.prototype, "autofill", void 0);
+    __decorate([
+        Property(true)
+    ], ComboBox.prototype, "allowCustom", void 0);
+    __decorate([
+        Property({})
+    ], ComboBox.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property(false)
+    ], ComboBox.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(null)
+    ], ComboBox.prototype, "query", void 0);
+    __decorate([
+        Property(true)
+    ], ComboBox.prototype, "showClearButton", void 0);
+    __decorate([
+        Event()
+    ], ComboBox.prototype, "customValueSpecifier", void 0);
+    __decorate([
+        Event()
+    ], ComboBox.prototype, "filtering", void 0);
+    __decorate([
+        Property(null)
+    ], ComboBox.prototype, "valueTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], ComboBox.prototype, "filterBarPlaceholder", void 0);
+    ComboBox = __decorate([
+        NotifyPropertyChanges
+    ], ComboBox);
     return ComboBox;
 }(DropDownList));
-__decorate([
-    Property(false)
-], ComboBox.prototype, "autofill", void 0);
-__decorate([
-    Property(true)
-], ComboBox.prototype, "allowCustom", void 0);
-__decorate([
-    Property({})
-], ComboBox.prototype, "htmlAttributes", void 0);
-__decorate([
-    Property(false)
-], ComboBox.prototype, "allowFiltering", void 0);
-__decorate([
-    Property(null)
-], ComboBox.prototype, "query", void 0);
-__decorate([
-    Property(true)
-], ComboBox.prototype, "showClearButton", void 0);
-__decorate([
-    Event()
-], ComboBox.prototype, "customValueSpecifier", void 0);
-__decorate([
-    Event()
-], ComboBox.prototype, "filtering", void 0);
-__decorate([
-    Property(null)
-], ComboBox.prototype, "valueTemplate", void 0);
-__decorate([
-    Property(null)
-], ComboBox.prototype, "filterBarPlaceholder", void 0);
-ComboBox = __decorate([
-    NotifyPropertyChanges
-], ComboBox);
 export { ComboBox };

dist/es6/combo-box/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './combo-box';

dist/es6/common/highlight-search.js

@@ -0,1 +1,8 @@
+/**
+ * Function helps to find which highlightSearch is to call based on your data.
+ * @param  {HTMLElement} content - Specifies an content element.
+ * @param  {string} query - Specifies the string to be highlighted.
+ * @param  {boolean} ignoreCase - Specifies the ignoreCase option.
+ * @param  {HightLightType} type - Specifies the type of highlight.
+ */
 export function highlightSearch(content, query, ignoreCase, type) {
@@ -18,2 +25,6 @@ revert(content);
 }
+/**
+ * Function helps to remove highlighted element based on your data.
+ * @param  {HTMLElement} id - Specifies an id of list data.
+ */
 function revert(content) {
@@ -20,0 +31,0 @@ var contentElement = content.querySelectorAll('.e-highlight');

dist/es6/common/incremental-search.js

@@ -0,1 +1,4 @@
+/**
+ * IncrementalSearch module file
+ */
 var queryString = '';
@@ -5,2 +8,10 @@ var prevString = '';
 var activeClass = 'e-active';
+/**
+ * Search and focus the list item based on key code matches with list text content
+ * @param  { number } keyCode - Specifies the key code which pressed on keyboard events.
+ * @param  { HTMLElement[]] } items - Specifies an array of HTMLElement, from which matches find has done.
+ * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen
+ * after selected item otherwise it will do from initial.
+ * @param  { boolean } ignoreCase - Specifies the case consideration when search has done.
+ */
 export function incrementalSearch(keyCode, items, selectedIndex, ignoreCase) {
@@ -7,0 +18,0 @@ queryString += String.fromCharCode(keyCode);

dist/es6/common/index.js

@@ -0,2 +1,5 @@
+/**
+ * Drop-Downs common module
+ */
 export * from './incremental-search';
 export * from './highlight-search';

dist/es6/drop-down-base/drop-down-base.js

@@ -37,4 +37,10 @@ var __extends = (this && this.__extends) || (function () {
 };
-var DropDownBase = (function (_super) {
+/**
+ * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
+ */
+var DropDownBase = /** @class */ (function (_super) {
     __extends(DropDownBase, _super);
+    /**
+     * * Constructor for DropDownBase class
+     */
     function DropDownBase(options, element) {
@@ -51,2 +57,3 @@ var _this = _super.call(this, options, element) || this;
         var oldProperty = new Object();
+        // tslint:disable-next-line:no-function-constructor-with-string-args
         var propName = new Function('prop', 'return prop');
@@ -156,2 +163,5 @@ newProperty[propName(prop)] = newProp[propName(prop)];
     };
+    /**
+     * Sets RTL to dropdownbase wrapper
+     */
     DropDownBase.prototype.setEnableRtl = function () {
@@ -165,2 +175,5 @@ if (this.list) {
     ;
+    /**
+     * Initialize the Component.
+     */
     DropDownBase.prototype.initialize = function () {
@@ -185,2 +198,5 @@ this.bindEvent = true;
     ;
+    /**
+     * Get the properties to be maintained in persisted state.
+     */
     DropDownBase.prototype.getPersistData = function () {
@@ -190,2 +206,5 @@ return this.addOnPersist([]);
     ;
+    /**
+     * Sets the enabled state to DropDownBase.
+     */
     DropDownBase.prototype.setEnabled = function () {
@@ -232,4 +251,12 @@ if (this.enabled) {
     };
+    /**
+     * Execute before render the list items
+     * @private
+     */
     DropDownBase.prototype.preRender = function () {
+        // there is no event handler
     };
+    /**
+     * Creates the list items of DropDownBase component.
+     */
     DropDownBase.prototype.setListData = function (dataSource, fields, query) {
@@ -266,4 +293,6 @@ var _this = this;
     DropDownBase.prototype.showSpinner = function () {
+        // Used this method in component side.
     };
     DropDownBase.prototype.hideSpinner = function () {
+        // Used this method in component side.
     };
@@ -301,5 +330,11 @@ DropDownBase.prototype.onActionFailure = function (e) {
     };
+    /**
+     * Get the query to do the data operation before list item generation.
+     */
     DropDownBase.prototype.getQuery = function (query) {
         return query ? query : this.query ? this.query : new Query();
     };
+    /**
+     * To render the template content for group header element.
+     */
     DropDownBase.prototype.renderGroupTemplate = function (listEle) {
@@ -312,2 +347,5 @@ if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {
     };
+    /**
+     * To create the ul li list items
+     */
     DropDownBase.prototype.createListItems = function (dataSource, fields) {
@@ -358,2 +396,5 @@ if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {
     };
+    /**
+     * To render the list items
+     */
     DropDownBase.prototype.renderItems = function (listData, fields) {
@@ -401,2 +442,5 @@ var ulElement;
     };
+    /**
+     * Return the index of item which matched with given value in data source
+     */
     DropDownBase.prototype.getIndexByValue = function (value) {
@@ -414,2 +458,5 @@ var index;
     ;
+    /**
+     * To dispatch the event manually
+     */
     DropDownBase.prototype.dispatchEvent = function (element, type) {
@@ -420,2 +467,5 @@ var evt = document.createEvent('HTMLEvents');
     };
+    /**
+     * To set the current fields
+     */
     DropDownBase.prototype.setFields = function () {
@@ -433,2 +483,5 @@ var fields = this.fields;
     };
+    /**
+     * reset the items list.
+     */
     DropDownBase.prototype.resetList = function (dataSource, fields, query) {
@@ -440,10 +493,32 @@ if (this.list) {
     DropDownBase.prototype.updateSelection = function () {
+        // This is for after added the item, need to update the selected index values.
     };
     DropDownBase.prototype.renderList = function () {
+        // This is for render the list items.
         this.render();
     };
+    DropDownBase.prototype.updateDataSource = function (prop) {
+        this.resetList(this.dataSource);
+    };
+    DropDownBase.prototype.setUpdateInitial = function (props, newProp) {
+        for (var j = 0; props.length > j; j++) {
+            if (newProp[props[j]]) {
+                this.updateDataSource(props[j]);
+            }
+        }
+    };
+    /**
+     * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
+     * @private
+     */
     DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {
+        this.setUpdateInitial(['query', 'sortOrder', 'dataSource', 'itemTemplate'], newProp);
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
+                case 'query':
+                case 'sortOrder':
+                case 'dataSource':
+                case 'itemTemplate':
+                    break;
                 case 'enableRtl':
@@ -455,8 +530,2 @@ this.setEnableRtl();
                     break;
-                case 'query':
-                case 'sortOrder':
-                case 'dataSource':
-                case 'itemTemplate':
-                    this.resetList(this.dataSource);
-                    break;
                 case 'groupTemplate':
@@ -466,3 +535,3 @@ this.renderGroupTemplate(this.list);
                 case 'locale':
-                    if (this.list) {
+                    if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {
                         this.l10nUpdate();
@@ -475,2 +544,6 @@ }
     ;
+    /**
+     * Build and render the component
+     * @private
+     */
     DropDownBase.prototype.render = function (isEmptyData) {
@@ -504,2 +577,6 @@ this.list = createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });
     ;
+    /**
+     * Return the module name of this component.
+     * @private
+     */
     DropDownBase.prototype.getModuleName = function () {
@@ -509,2 +586,6 @@ return 'dropdownbase';
     ;
+    /**
+     * Gets all the list items bound on this component.
+     * @returns Element[].
+     */
     DropDownBase.prototype.getItems = function () {
@@ -514,2 +595,9 @@ return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
     ;
+    /**
+     * Adds a new item to the popup list. By default, new item appends to the list as the last item,
+     * but you can insert based on the index parameter.
+     * @param  { Object[] } items - Specifies an array of JSON data or a JSON data.
+     * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.
+     * @return {void}.
+     */
     DropDownBase.prototype.addItem = function (items, itemIndex) {
@@ -560,3 +648,9 @@ if (!this.list || this.list.textContent === this.noRecordsTemplate) {
     DropDownBase.prototype.updateActionCompleteData = function (li, item) {
+        // this is for combobox custom value
     };
+    /**
+     * Gets the data Object that matches the given value.
+     * @param { string | number } value - Specifies the value of the list item.
+     * @returns Object.
+     */
     DropDownBase.prototype.getDataByValue = function (value) {
@@ -582,2 +676,7 @@ var type = this.typeOfData(this.listData).typeof;
     };
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.
+     * @method destroy
+     * @return {void}.
+     */
     DropDownBase.prototype.destroy = function () {
@@ -594,52 +693,52 @@ if (document.body.contains(this.list)) {
     ;
+    __decorate([
+        Property({ text: null, value: null, iconCss: null, groupBy: null })
+    ], DropDownBase.prototype, "fields", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownBase.prototype, "enableRtl", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownBase.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(null)
+    ], DropDownBase.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(null)
+    ], DropDownBase.prototype, "groupTemplate", void 0);
+    __decorate([
+        Property('No Records Found')
+    ], DropDownBase.prototype, "noRecordsTemplate", void 0);
+    __decorate([
+        Property('The Request Failed')
+    ], DropDownBase.prototype, "actionFailureTemplate", void 0);
+    __decorate([
+        Property('None')
+    ], DropDownBase.prototype, "sortOrder", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownBase.prototype, "enabled", void 0);
+    __decorate([
+        Property([])
+    ], DropDownBase.prototype, "dataSource", void 0);
+    __decorate([
+        Property(null)
+    ], DropDownBase.prototype, "query", void 0);
+    __decorate([
+        Event()
+    ], DropDownBase.prototype, "actionBegin", void 0);
+    __decorate([
+        Event()
+    ], DropDownBase.prototype, "actionComplete", void 0);
+    __decorate([
+        Event()
+    ], DropDownBase.prototype, "actionFailure", void 0);
+    __decorate([
+        Event()
+    ], DropDownBase.prototype, "select", void 0);
+    DropDownBase = __decorate([
+        NotifyPropertyChanges
+    ], DropDownBase);
     return DropDownBase;
 }(Component));
-__decorate([
-    Property({ text: null, value: null, iconCss: null, groupBy: null })
-], DropDownBase.prototype, "fields", void 0);
-__decorate([
-    Property(false)
-], DropDownBase.prototype, "enableRtl", void 0);
-__decorate([
-    Property(false)
-], DropDownBase.prototype, "enablePersistence", void 0);
-__decorate([
-    Property(null)
-], DropDownBase.prototype, "itemTemplate", void 0);
-__decorate([
-    Property(null)
-], DropDownBase.prototype, "groupTemplate", void 0);
-__decorate([
-    Property('No Records Found')
-], DropDownBase.prototype, "noRecordsTemplate", void 0);
-__decorate([
-    Property('The Request Failed')
-], DropDownBase.prototype, "actionFailureTemplate", void 0);
-__decorate([
-    Property('None')
-], DropDownBase.prototype, "sortOrder", void 0);
-__decorate([
-    Property(true)
-], DropDownBase.prototype, "enabled", void 0);
-__decorate([
-    Property([])
-], DropDownBase.prototype, "dataSource", void 0);
-__decorate([
-    Property(null)
-], DropDownBase.prototype, "query", void 0);
-__decorate([
-    Event()
-], DropDownBase.prototype, "actionBegin", void 0);
-__decorate([
-    Event()
-], DropDownBase.prototype, "actionComplete", void 0);
-__decorate([
-    Event()
-], DropDownBase.prototype, "actionFailure", void 0);
-__decorate([
-    Event()
-], DropDownBase.prototype, "select", void 0);
-DropDownBase = __decorate([
-    NotifyPropertyChanges
-], DropDownBase);
 export { DropDownBase };

dist/es6/drop-down-base/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './drop-down-base';

dist/es6/drop-down-list/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './drop-down-list';

dist/es6/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './common/index';
@@ -2,0 +5,0 @@ export * from './drop-down-base/index';

dist/es6/multi-select/index.js

@@ -0,1 +1,4 @@
+/**
+ * export all modules from current location
+ */
 export * from './multi-select';

package.json

 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "15.4.19",
+  "version": "15.4.20",
   "description": "Essential JS 2 DropDown Components",
@@ -9,7 +9,7 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "^15.4.19",
-    "@syncfusion/ej2-data": "^15.4.17",
-    "@syncfusion/ej2-inputs": "^15.4.17",
-    "@syncfusion/ej2-lists": "^15.4.17",
-    "@syncfusion/ej2-popups": "^15.4.17"
+    "@syncfusion/ej2-base": "^15.4.20",
+    "@syncfusion/ej2-data": "^15.4.20",
+    "@syncfusion/ej2-inputs": "^15.4.20",
+    "@syncfusion/ej2-lists": "^15.4.20",
+    "@syncfusion/ej2-popups": "^15.4.20"
   },
@@ -16,0 +16,0 @@ "devDependencies": {

src/auto-complete/auto-complete.js

@@ -208,2 +208,3 @@ var __extends = (this && this.__extends) || (function () {
         AutoComplete.prototype.onPropertyChanged = function (newProp, oldProp) {
+            this.setUpdateInitial(['query', 'dataSource'], newProp);
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -238,53 +239,53 @@ var prop = _a[_i];
         ;
+        __decorate([
+            ej2_base_1.Property({ value: null, iconCss: null, groupBy: null })
+        ], AutoComplete.prototype, "fields", void 0);
+        __decorate([
+            ej2_base_1.Property(true)
+        ], AutoComplete.prototype, "ignoreCase", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], AutoComplete.prototype, "showPopupButton", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], AutoComplete.prototype, "highlight", void 0);
+        __decorate([
+            ej2_base_1.Property(20)
+        ], AutoComplete.prototype, "suggestionCount", void 0);
+        __decorate([
+            ej2_base_1.Property({})
+        ], AutoComplete.prototype, "htmlAttributes", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], AutoComplete.prototype, "query", void 0);
+        __decorate([
+            ej2_base_1.Property(1)
+        ], AutoComplete.prototype, "minLength", void 0);
+        __decorate([
+            ej2_base_1.Property('Contains')
+        ], AutoComplete.prototype, "filterType", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], AutoComplete.prototype, "filtering", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], AutoComplete.prototype, "index", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], AutoComplete.prototype, "valueTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], AutoComplete.prototype, "filterBarPlaceholder", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], AutoComplete.prototype, "allowFiltering", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], AutoComplete.prototype, "text", void 0);
+        AutoComplete = __decorate([
+            ej2_base_2.NotifyPropertyChanges
+        ], AutoComplete);
         return AutoComplete;
     }(combo_box_1.ComboBox));
-    __decorate([
-        ej2_base_1.Property({ value: null, iconCss: null, groupBy: null })
-    ], AutoComplete.prototype, "fields", void 0);
-    __decorate([
-        ej2_base_1.Property(true)
-    ], AutoComplete.prototype, "ignoreCase", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], AutoComplete.prototype, "showPopupButton", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], AutoComplete.prototype, "highlight", void 0);
-    __decorate([
-        ej2_base_1.Property(20)
-    ], AutoComplete.prototype, "suggestionCount", void 0);
-    __decorate([
-        ej2_base_1.Property({})
-    ], AutoComplete.prototype, "htmlAttributes", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], AutoComplete.prototype, "query", void 0);
-    __decorate([
-        ej2_base_1.Property(1)
-    ], AutoComplete.prototype, "minLength", void 0);
-    __decorate([
-        ej2_base_1.Property('Contains')
-    ], AutoComplete.prototype, "filterType", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], AutoComplete.prototype, "filtering", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], AutoComplete.prototype, "index", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], AutoComplete.prototype, "valueTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], AutoComplete.prototype, "filterBarPlaceholder", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], AutoComplete.prototype, "allowFiltering", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], AutoComplete.prototype, "text", void 0);
-    AutoComplete = __decorate([
-        ej2_base_2.NotifyPropertyChanges
-    ], AutoComplete);
     exports.AutoComplete = AutoComplete;
 });

src/combo-box/combo-box.js

@@ -427,2 +427,3 @@ var __extends = (this && this.__extends) || (function () {
         ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
+            this.setUpdateInitial(['query', 'dataSource'], newProp);
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -513,38 +514,38 @@ var prop = _a[_i];
         };
+        __decorate([
+            ej2_base_1.Property(false)
+        ], ComboBox.prototype, "autofill", void 0);
+        __decorate([
+            ej2_base_1.Property(true)
+        ], ComboBox.prototype, "allowCustom", void 0);
+        __decorate([
+            ej2_base_1.Property({})
+        ], ComboBox.prototype, "htmlAttributes", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], ComboBox.prototype, "allowFiltering", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], ComboBox.prototype, "query", void 0);
+        __decorate([
+            ej2_base_1.Property(true)
+        ], ComboBox.prototype, "showClearButton", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], ComboBox.prototype, "customValueSpecifier", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], ComboBox.prototype, "filtering", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], ComboBox.prototype, "valueTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], ComboBox.prototype, "filterBarPlaceholder", void 0);
+        ComboBox = __decorate([
+            ej2_base_2.NotifyPropertyChanges
+        ], ComboBox);
         return ComboBox;
     }(drop_down_list_1.DropDownList));
-    __decorate([
-        ej2_base_1.Property(false)
-    ], ComboBox.prototype, "autofill", void 0);
-    __decorate([
-        ej2_base_1.Property(true)
-    ], ComboBox.prototype, "allowCustom", void 0);
-    __decorate([
-        ej2_base_1.Property({})
-    ], ComboBox.prototype, "htmlAttributes", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], ComboBox.prototype, "allowFiltering", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], ComboBox.prototype, "query", void 0);
-    __decorate([
-        ej2_base_1.Property(true)
-    ], ComboBox.prototype, "showClearButton", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], ComboBox.prototype, "customValueSpecifier", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], ComboBox.prototype, "filtering", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], ComboBox.prototype, "valueTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], ComboBox.prototype, "filterBarPlaceholder", void 0);
-    ComboBox = __decorate([
-        ej2_base_2.NotifyPropertyChanges
-    ], ComboBox);
     exports.ComboBox = ComboBox;
 });

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

@@ -1,2 +0,2 @@
-import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile } from '@syncfusion/ej2-base';import { setStyleAttribute, removeClass, createElement, prepend, isNullOrUndefined, detach, Browser } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, rippleEffect, RippleOptions } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { ListBase, SortOrder, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';
+import { Component, EventHandler, addClass, append, Property, Event, KeyboardEvents, EmitType, L10n, compile } from '@syncfusion/ej2-base';import { setStyleAttribute, removeClass, createElement, prepend, isNullOrUndefined, detach, Browser } 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";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

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

@@ -266,2 +266,6 @@ import { Component, KeyboardEvents, EmitType, L10n } from '@syncfusion/ej2-base';
     protected renderList(): void;
+    protected updateDataSource(prop?: string): void;
+    protected setUpdateInitial(props: string[], newProp: {
+        [key: string]: string;
+    }): void;
     /**
@@ -268,0 +272,0 @@ * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.

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

@@ -427,6 +427,22 @@ var __extends = (this && this.__extends) || (function () {
         };
+        DropDownBase.prototype.updateDataSource = function (prop) {
+            this.resetList(this.dataSource);
+        };
+        DropDownBase.prototype.setUpdateInitial = function (props, newProp) {
+            for (var j = 0; props.length > j; j++) {
+                if (newProp[props[j]]) {
+                    this.updateDataSource(props[j]);
+                }
+            }
+        };
         DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {
+            this.setUpdateInitial(['query', 'sortOrder', 'dataSource', 'itemTemplate'], newProp);
             for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
                 var prop = _a[_i];
                 switch (prop) {
+                    case 'query':
+                    case 'sortOrder':
+                    case 'dataSource':
+                    case 'itemTemplate':
+                        break;
                     case 'enableRtl':
@@ -438,8 +454,2 @@ this.setEnableRtl();
                         break;
-                    case 'query':
-                    case 'sortOrder':
-                    case 'dataSource':
-                    case 'itemTemplate':
-                        this.resetList(this.dataSource);
-                        break;
                     case 'groupTemplate':
@@ -449,3 +459,3 @@ this.renderGroupTemplate(this.list);
                     case 'locale':
-                        if (this.list) {
+                        if (this.list && (!ej2_base_2.isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {
                             this.l10nUpdate();
@@ -571,53 +581,53 @@ }
         ;
+        __decorate([
+            ej2_base_1.Property({ text: null, value: null, iconCss: null, groupBy: null })
+        ], DropDownBase.prototype, "fields", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], DropDownBase.prototype, "enableRtl", void 0);
+        __decorate([
+            ej2_base_1.Property(false)
+        ], DropDownBase.prototype, "enablePersistence", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], DropDownBase.prototype, "itemTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], DropDownBase.prototype, "groupTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property('No Records Found')
+        ], DropDownBase.prototype, "noRecordsTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property('The Request Failed')
+        ], DropDownBase.prototype, "actionFailureTemplate", void 0);
+        __decorate([
+            ej2_base_1.Property('None')
+        ], DropDownBase.prototype, "sortOrder", void 0);
+        __decorate([
+            ej2_base_1.Property(true)
+        ], DropDownBase.prototype, "enabled", void 0);
+        __decorate([
+            ej2_base_1.Property([])
+        ], DropDownBase.prototype, "dataSource", void 0);
+        __decorate([
+            ej2_base_1.Property(null)
+        ], DropDownBase.prototype, "query", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], DropDownBase.prototype, "actionBegin", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], DropDownBase.prototype, "actionComplete", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], DropDownBase.prototype, "actionFailure", void 0);
+        __decorate([
+            ej2_base_1.Event()
+        ], DropDownBase.prototype, "select", void 0);
+        DropDownBase = __decorate([
+            ej2_base_3.NotifyPropertyChanges
+        ], DropDownBase);
         return DropDownBase;
     }(ej2_base_1.Component));
-    __decorate([
-        ej2_base_1.Property({ text: null, value: null, iconCss: null, groupBy: null })
-    ], DropDownBase.prototype, "fields", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], DropDownBase.prototype, "enableRtl", void 0);
-    __decorate([
-        ej2_base_1.Property(false)
-    ], DropDownBase.prototype, "enablePersistence", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], DropDownBase.prototype, "itemTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], DropDownBase.prototype, "groupTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property('No Records Found')
-    ], DropDownBase.prototype, "noRecordsTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property('The Request Failed')
-    ], DropDownBase.prototype, "actionFailureTemplate", void 0);
-    __decorate([
-        ej2_base_1.Property('None')
-    ], DropDownBase.prototype, "sortOrder", void 0);
-    __decorate([
-        ej2_base_1.Property(true)
-    ], DropDownBase.prototype, "enabled", void 0);
-    __decorate([
-        ej2_base_1.Property([])
-    ], DropDownBase.prototype, "dataSource", void 0);
-    __decorate([
-        ej2_base_1.Property(null)
-    ], DropDownBase.prototype, "query", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], DropDownBase.prototype, "actionBegin", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], DropDownBase.prototype, "actionComplete", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], DropDownBase.prototype, "actionFailure", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], DropDownBase.prototype, "select", void 0);
-    DropDownBase = __decorate([
-        ej2_base_3.NotifyPropertyChanges
-    ], DropDownBase);
     exports.DropDownBase = DropDownBase;
 });

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

@@ -391,2 +391,3 @@ /// <reference path="../drop-down-base/drop-down-base-model.d.ts" />
     protected refreshPopup(): void;
+    protected updateDataSource(prop?: string): void;
     /**
@@ -393,0 +394,0 @@ * Dynamically change the value of properties.

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

@@ -1,2 +0,2 @@
-import { DropDownBase, SelectEventArgs, dropDownBaseClasses, FieldSettings, SPINNER_SIZE } 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, FieldSettings, SPINNER_SIZE } 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 {visualMode,MultiSelectChangeEventArgs,RemoveEventArgs,CustomValueEventArgs} from "./multi-select";
@@ -3,0 +3,0 @@ import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";

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

@@ -244,3 +244,3 @@ /// <reference path="../drop-down-base/drop-down-base-model.d.ts" />
     private removelastSelection(e);
-    protected onActionFailure(e: object): void;
+    protected onActionFailure(e: Object): void;
     protected onActionComplete(ulElement: HTMLElement, list: {
@@ -312,3 +312,3 @@ [key: string]: Object;
     protected preRender(): void;
-    private updateData();
+    private updateData(delimiterChar);
     private initialValueUpdate();
@@ -323,3 +323,3 @@ protected isValidLI(li: Element | HTMLElement): boolean;
     private addListSelection(element);
-    private updateDelimeter(eve);
+    private updateDelimeter(delimChar);
     private onMouseClick(e);
@@ -338,2 +338,3 @@ private onMouseOver(e);
     private selectAllItem(state);
+    protected updateDataSource(prop?: string): void;
     /**
@@ -384,3 +385,3 @@ * Get the properties to be maintained in the persisted state.
      */
-    newData: object;
+    newData: Object;
 }
@@ -387,0 +388,0 @@ export interface MultiSelectChangeEventArgs {

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

20239808

increased by6.64%

Lines of code

195515

increased by10.55%

Dependency changes

• Updated@syncfusion/ej2-base@^15.4.20

• Updated@syncfusion/ej2-data@^15.4.20

• Updated@syncfusion/ej2-inputs@^15.4.20

• Updated@syncfusion/ej2-lists@^15.4.20

• Updated@syncfusion/ej2-popups@^15.4.20