@syncfusion/ej2-dropdowns 20.3.60 → 20.4.40

package/src/drop-down-list/drop-down-list.js

@@ -215,8 +215,12 @@ var DropDownList = /** @class */ (function (_super) {
                 this.resetFocusElement();
             }
         }
-        this.hiddenElement.innerHTML = '';
-        this.inputElement.value = '';
+        if (!isNullOrUndefined(this.hiddenElement)) {
+            this.hiddenElement.innerHTML = '';
+        }
+        if (!isNullOrUndefined(this.inputElement)) {
+            this.inputElement.value = '';
+        }
         this.value = null;
         this.itemData = null;
         this.text = null;
@@ -239,21 +243,21 @@ var DropDownList = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var htmlAttr = _a[_i];
                 if (htmlAttr === 'class') {
-                    var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\s+/g, ' ')).trim();
+                    var updatedClassValue = (this.htmlAttributes["" + htmlAttr].replace(/\s+/g, ' ')).trim();
                     if (updatedClassValue !== '') {
                         addClass([this.inputWrapper.container], updatedClassValue.split(' '));
                     }
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
                     this.enabled = false;
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {
+                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes["" + htmlAttr])) {
                     this.readonly = true;
                     this.dataBind();
                 }
                 else if (htmlAttr === 'style') {
-                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);
+                    this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else {
                     var defaultAttr = ['title', 'id', 'placeholder',
@@ -263,18 +267,18 @@ var DropDownList = /** @class */ (function (_super) {
                         defaultAttr.push('tabindex');
                     }
                     if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {
-                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                     else if (defaultAttr.indexOf(htmlAttr) > -1) {
                         if (htmlAttr === 'placeholder') {
-                            Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement);
+                            Input.setPlaceholder(this.htmlAttributes["" + htmlAttr], this.inputElement);
                         }
                         else {
-                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                            this.inputElement.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                         }
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);
+                        this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -330,7 +334,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.targetElement = function () {
-        return this.inputWrapper.container;
+        return !isNullOrUndefined(this.inputWrapper) ? this.inputWrapper.container : null;
     };
     DropDownList.prototype.getNgDirective = function () {
         return 'EJS-DROPDOWNLIST';
@@ -489,7 +493,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.unBindCommonEvent = function () {
-        if (this.targetElement()) {
+        if (!isNullOrUndefined(this.inputWrapper) && this.targetElement()) {
             EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);
         }
         var formElement = this.inputElement && closest(this.inputElement, 'form');
@@ -519,9 +523,11 @@ var DropDownList = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.wireListEvents = function () {
-        EventHandler.add(this.list, 'click', this.onMouseClick, this);
-        EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
-        EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        if (!isNullOrUndefined(this.list)) {
+            EventHandler.add(this.list, 'click', this.onMouseClick, this);
+            EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
+            EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
+        }
     };
     DropDownList.prototype.onSearch = function (e) {
         if (e.charCode !== 32 && e.charCode !== 13) {
@@ -799,9 +805,11 @@ var DropDownList = /** @class */ (function (_super) {
         this.setSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
-        EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
-        EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
-        EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        if (!isNullOrUndefined(this.inputWrapper)) {
+            EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
+            EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
+            EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
+        }
         this.unBindCommonEvent();
     };
     /**
@@ -810,9 +818,11 @@ var DropDownList = /** @class */ (function (_super) {
      * @returns {void}
      */
     DropDownList.prototype.unWireListEvents = function () {
-        EventHandler.remove(this.list, 'click', this.onMouseClick);
-        EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
-        EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        if (this.list) {
+            EventHandler.remove(this.list, 'click', this.onMouseClick);
+            EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
+            EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
+        }
     };
     DropDownList.prototype.checkSelector = function (id) {
         return '[id="' + id.replace(/(:|\.|\[|\]|,|=|@|\\|\/|#)/g, '\\$1') + '"]';
@@ -820,7 +830,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.onDocumentClick = function (e) {
         var target = e.target;
         if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&
-            !this.inputWrapper.container.contains(e.target)) {
+            !isNullOrUndefined(this.inputWrapper) && !this.inputWrapper.container.contains(e.target)) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 var isActive = this.isRequested;
@@ -1018,9 +1028,11 @@ var DropDownList = /** @class */ (function (_super) {
             this.setScrollPosition(e);
         }
         if (Browser.info.name !== 'mozilla') {
-            attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
-            attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
-            this.targetElement().removeAttribute('aria-live');
+            attributes(this.inputElement, { 'aria-label': this.inputElement.value });
+            if (this.targetElement()) {
+                attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
+                this.targetElement().removeAttribute('aria-live');
+            }
         }
         if (this.isPopupOpen && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
             attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
@@ -1191,9 +1203,11 @@ var DropDownList = /** @class */ (function (_super) {
                 selectedElement.setAttribute('value', this.value.toString());
             }
             else {
-                this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
-                var selectedElement = this.hiddenElement.querySelector('option');
-                selectedElement.setAttribute('value', this.value.toString());
+                if (!isNullOrUndefined(this.hiddenElement)) {
+                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    var selectedElement = this.hiddenElement.querySelector('option');
+                    selectedElement.setAttribute('value', this.value.toString());
+                }
             }
         }
         else {
@@ -1532,7 +1546,7 @@ var DropDownList = /** @class */ (function (_super) {
                     && ((this.dataSource instanceof DataManager)
                         || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&
                             this.dataSource.length !== 0)))) {
-                    if (this.itemTemplate && (this.element.tagName === 'EJS-COMBOBOX' || this.element.tagName === 'EJS-DROPDOWNLIST') && this.allowFiltering) {
+                    if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {
                         setTimeout(function () {
                             _this.updateActionCompleteDataValues(ulElement, list);
                         }, 0);
@@ -1683,9 +1697,11 @@ var DropDownList = /** @class */ (function (_super) {
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
                     offsetValue = _this.getOffsetValue(popupEle);
                     var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];
-                    left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
-                        parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
-                        parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
+                    if (!isNullOrUndefined(_this.inputElement)) {
+                        left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
+                            parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
+                            parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
+                    }
                 }
                 _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
@@ -1731,9 +1747,13 @@ var DropDownList = /** @class */ (function (_super) {
                 var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };
                 _this.trigger('open', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
-                        addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        if (!isNullOrUndefined(_this.inputWrapper)) {
+                            addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);
+                        }
                         _this.renderReactTemplates();
-                        _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
+                        if (!isNullOrUndefined(_this.popupObj)) {
+                            _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);
+                        }
                     }
                     else {
                         _this.beforePopupOpen = false;
@@ -1992,11 +2012,13 @@ var DropDownList = /** @class */ (function (_super) {
                 EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);
                 EventHandler.remove(this.clearIconElement, 'click', this.clearText);
             }
-            EventHandler.remove(this.filterInput, 'input', this.onInput);
-            EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
-            EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
-            EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
-            EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            if (!isNullOrUndefined(this.filterInput)) {
+                EventHandler.remove(this.filterInput, 'input', this.onInput);
+                EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);
+                EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);
+                EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
+                EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
+            }
             this.filterInput = null;
         }
         attributes(this.targetElement(), { 'aria-expanded': 'false' });
@@ -2131,6 +2153,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
+        this.setEnabled();
         this.preventTabIndex(this.element);
         if (!this.enabled) {
             this.targetElement().tabIndex = -1;
@@ -2215,6 +2238,14 @@ var DropDownList = /** @class */ (function (_super) {
         var contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
     };
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    DropDownList.prototype.setEnabled = function () {
+        this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');
+    };
     DropDownList.prototype.setOldText = function (text) {
         this.text = text;
     };
@@ -2590,7 +2621,7 @@ var DropDownList = /** @class */ (function (_super) {
             };
             history.pushState({}, '');
         }
-        if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
+        if (!isNullOrUndefined(this.list) && (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData))) {
             this.renderPopup(e);
         }
     };
@@ -2606,7 +2637,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.hidePopup = function (e) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
         if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {
-            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            if (!isNullOrUndefined(this.inputElement)) {
+                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+            }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
                 var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
@@ -2716,6 +2749,21 @@ var DropDownList = /** @class */ (function (_super) {
             this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);
             detach(this.inputWrapper.container);
         }
+        this.hiddenElement = null;
+        this.inputWrapper = null;
+        this.keyboardModule = null;
+        this.ulElement = null;
+        this.list = null;
+        this.popupObj = null;
+        this.rippleFun = null;
+        this.selectedLI = null;
+        this.liCollections = null;
+        this.item = null;
+        this.inputWrapper = null;
+        this.footer = null;
+        this.header = null;
+        this.previousSelectedLI = null;
+        this.valueTempElement = null;
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
@@ -2757,6 +2805,12 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property('100%')
     ], DropDownList.prototype, "width", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownList.prototype, "enabled", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownList.prototype, "enablePersistence", void 0);
     __decorate([
         Property('300px')
     ], DropDownList.prototype, "popupHeight", void 0);

package/src/drop-down-tree/drop-down-tree-model.d.ts

@@ -58,6 +58,12 @@ export interface FieldsModel {
      */
     query?: Query;
 
+    /**
+     * Specifies whether the node can be selected by users or not 
+     * When set to false, the user interaction is prevented for the corresponding node. 
+     */
+    selectable?: string;
+
     /**
      * Specifies the mapping field for the selected state of the Dropdown Tree item.
      */
@@ -199,7 +205,7 @@ export interface DropDownTreeModel extends ComponentModel{
      *
      * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
      *  expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
-     *  query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
+     *  query: null, selected: 'selected', selectable: 'selectable', tableName: null, tooltip: 'tooltip' }
      */
     fields?: FieldsModel;
 
@@ -370,6 +376,14 @@ export interface DropDownTreeModel extends ComponentModel{
      */
     showCheckBox?: boolean;
 
+    /**
+     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
+     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     * 
+     * @default false
+     */
+    enableHtmlSanitizer?: boolean;
+
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -50,6 +50,11 @@ export declare class Fields extends ChildProperty<Fields> {
      * @default null
      */
     query: Query;
+    /**
+     * Specifies whether the node can be selected by users or not
+     * When set to false, the user interaction is prevented for the corresponding node.
+     */
+    selectable: string;
     /**
      * Specifies the mapping field for the selected state of the Dropdown Tree item.
      */
@@ -345,7 +350,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      *
      * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
      *  expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
-     *  query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
+     *  query: null, selected: 'selected', selectable: 'selectable', tableName: null, tooltip: 'tooltip' }
      */
     fields: FieldsModel;
     /**
@@ -499,6 +504,13 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * @default false
      */
     showCheckBox: boolean;
+    /**
+     * Specifies whether to allow rendering of untrusted HTML values in the Dropdown Tree component.
+     * While enable this property, it sanitize suspected untrusted strings and script, and update in the Dropdown Tree component.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * Specifies whether to show or hide the clear icon in textbox.
      * When the clear button is clicked, `value`, `text` properties will be reset to null.

package/src/drop-down-tree/drop-down-tree.js

@@ -107,6 +107,9 @@ var Fields = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Fields.prototype, "query", void 0);
+    __decorate([
+        Property('selectable')
+    ], Fields.prototype, "selectable", void 0);
     __decorate([
         Property('selected')
     ], Fields.prototype, "selected", void 0);
@@ -918,7 +921,12 @@ var DropDownTree = /** @class */ (function (_super) {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        this.overFlowWrapper.innerHTML = data;
+                        if (this.enableHtmlSanitizer) {
+                            this.overFlowWrapper.innerText = data;
+                        }
+                        else {
+                            this.overFlowWrapper.innerHTML = data;
+                        }
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -1450,6 +1458,7 @@ var DropDownTree = /** @class */ (function (_super) {
             nodeClicked: this.onNodeClicked.bind(this),
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
+            enableHtmlSanitizer: this.enableHtmlSanitizer,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -1675,6 +1684,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         var eventArgs = { data: args.data };
         this.trigger('dataBound', eventArgs);
+        if (this.filterObj === null) {
+            this.isFilteredData = false;
+        }
         if (this.isFilteredData) {
             this.treeObj.expandAll();
         }
@@ -1742,7 +1754,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
             child: this.cloneChildField(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes, query: fields.query,
-            selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+            selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
         };
         return clonedField;
     };
@@ -1755,7 +1767,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 dataSource: fields.dataSource, value: fields.value, text: fields.text, parentValue: fields.parentValue,
                 child: (fields.child ? this.cloneChildField(fields.child) : null), hasChildren: fields.hasChildren,
                 expanded: fields.expanded, iconCss: fields.iconCss, imageUrl: fields.imageUrl, htmlAttributes: fields.htmlAttributes,
-                query: fields.query, selected: fields.selected, tableName: fields.tableName, tooltip: fields.tooltip
+                query: fields.query, selected: fields.selected, selectable: fields.selectable, tableName: fields.tableName, tooltip: fields.tooltip
             };
             return clonedField;
         }
@@ -1765,7 +1777,7 @@ var DropDownTree = /** @class */ (function (_super) {
             dataSource: fields.dataSource, id: fields.value, text: fields.text, parentID: fields.parentValue,
             child: this.getTreeChildren(fields.child), hasChildren: fields.hasChildren, expanded: fields.expanded,
             iconCss: fields.iconCss, imageUrl: fields.imageUrl, isChecked: fields.selected,
-            htmlAttributes: fields.htmlAttributes, query: fields.query, selected: fields.selected,
+            htmlAttributes: fields.htmlAttributes, query: fields.query, selectable: fields.selectable, selected: fields.selected,
             tableName: fields.tableName, tooltip: fields.tooltip
         };
         return treeFields;
@@ -2260,7 +2272,12 @@ var DropDownTree = /** @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        chipContent.innerHTML = text;
+        if (this.enableHtmlSanitizer) {
+            chipContent.innerText = text;
+        }
+        else {
+            chipContent.innerHTML = text;
+        }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -3083,6 +3100,9 @@ var DropDownTree = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownTree.prototype, "showCheckBox", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(true)
     ], DropDownTree.prototype, "showClearButton", void 0);

package/src/list-box/list-box-model.d.ts

@@ -93,6 +93,24 @@ export interface ListBoxModel extends DropDownBaseModel{
      */
     height?: number | string;
 
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+
+     */
+    enabled?: boolean;
+
+    /**
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+
+     */
+    enablePersistence?: boolean;
+
     /**
      * If 'allowDragAndDrop' is set to true, then you can perform drag and drop of the list item.
      * ListBox contains same 'scope' property enables drag and drop between multiple ListBox.

package/src/list-box/list-box.d.ts

@@ -141,6 +141,22 @@ export declare class ListBox extends DropDownBase {
      * @default ''
      */
     height: number | string;
+    /**
+     * Specifies a value that indicates whether the component is enabled or not.
+     *
+     * @default true
+
+     */
+    enabled: boolean;
+    /**
+     * Enable or disable persisting component's state between page reloads.
+     * If enabled, following list of states will be persisted.
+     * 1. value
+     *
+     * @default false
+
+     */
+    enablePersistence: boolean;
     /**
      * If 'allowDragAndDrop' is set to true, then you can perform drag and drop of the list item.
      * ListBox contains same 'scope' property enables drag and drop between multiple ListBox.
@@ -342,6 +358,12 @@ export declare class ListBox extends DropDownBase {
     private removeSelected;
     private getCurIdx;
     private getComponent;
+    /**
+     * Sets the enabled state to DropDownBase.
+     *
+     * @returns {void}
+     */
+    protected setEnabled(): void;
     protected listOption(dataSource: obj[] | string[] | number[] | boolean[], fields: FieldSettingsModel): FieldSettingsModel;
     private triggerBeforeItemRender;
     requiredModules(): ModuleDeclaration[];