@syncfusion/ej2-dropdowns 20.2.40 → 20.2.43-3197

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

@@ -1,4 +1,4 @@
-import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
+import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs, NodeExpandEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
 import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -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.
      */
@@ -283,6 +288,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private nestedTableUpdate;
     private clearIconWidth;
     private isClicked;
+    private isCheckAllCalled;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -345,7 +351,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 +505,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.
@@ -750,6 +763,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private onNodeClicked;
     private onNodeChecked;
     private beforeCheck;
+    private onNodeExpanded;
     private updateClearButton;
     private updateDropDownIconState;
     private updateMode;

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);
@@ -165,6 +168,8 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
+        // Specifies if the checkAll method has been called
+        _this.isCheckAllCalled = false;
         return _this;
     }
     /**
@@ -293,7 +298,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.updateDataAttribute();
         this.setHTMLAttributes();
         this.setAttributes();
-        this.popupDiv = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });
+        this.popupDiv = this.createElement('div', { className: CONTENT });
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
@@ -918,7 +923,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) {
@@ -1088,7 +1098,7 @@ var DropDownTree = /** @class */ (function (_super) {
             if (isValid && this.value !== null && (this.value && this.value.length !== 0)) {
                 addClass([this.inputEle], CHIP_INPUT);
             }
-            else if (this.value === null || (this.value && this.value.length === 0)) {
+            else if (this.value === null || (this.value && this.value.length === 0) || this.chipWrapper) {
                 addClass([this.chipWrapper], HIDEICON);
             }
         }
@@ -1143,6 +1153,7 @@ var DropDownTree = /** @class */ (function (_super) {
             frameSpan.classList.add(CHECK);
             ariaState = 'true';
             if (!this.isReverseUpdate) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
                 if (!this.changeOnBlur) {
                     this.triggerChangeEvent(e);
@@ -1446,10 +1457,12 @@ var DropDownTree = /** @class */ (function (_super) {
             nodeSelected: this.onNodeSelected.bind(this),
             nodeChecked: this.onNodeChecked.bind(this),
             nodeChecking: this.beforeCheck.bind(this),
+            nodeExpanded: this.onNodeExpanded.bind(this),
             actionFailure: this.onActionFailure.bind(this),
             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,
@@ -1552,7 +1565,7 @@ var DropDownTree = /** @class */ (function (_super) {
             var height = Math.round(this.header.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
-        if (this.showCheckBox && this.showSelectAll) {
+        if (this.showCheckBox && this.showSelectAll && (!this.popupDiv.classList.contains(NODATA))) {
             var height = Math.round(this.checkAllParent.getBoundingClientRect().height);
             popupHeight = formatUnit(parseInt(popupHeight, 10) - height + 'px');
         }
@@ -1635,14 +1648,14 @@ var DropDownTree = /** @class */ (function (_super) {
         var isFooter = closest(target, '.' + FOOTER);
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
-        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isFilter || isScroller || isHeader || isFooter)) ||
+        if ((this.isPopupOpen && (this.inputWrapper.contains(target) || isTree || isScroller || isHeader || isFooter)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
                 (this.isPopupOpen && (target.classList.contains(CHECKALLPARENT) || target.classList.contains(ALLTEXT)
                     || target.classList.contains(CHECKBOXFRAME)))))) {
             this.isDocumentClick = false;
             e.preventDefault();
         }
-        else if (!this.inputWrapper.contains(target) && this.inputFocus) {
+        else if (!this.inputWrapper.contains(target) && this.inputFocus && !isFilter) {
             this.focusOut(e);
         }
     };
@@ -1675,6 +1688,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 +1758,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 +1771,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 +1781,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;
@@ -1943,13 +1959,14 @@ var DropDownTree = /** @class */ (function (_super) {
             var nodes = this.treeObj.element.querySelectorAll('li');
             var checkedNodes = this.treeObj.element.querySelectorAll('li .e-checkbox-wrapper[aria-checked=true]');
             var wrap = closest(this.checkBoxElement, '.' + CHECKBOXWRAP);
-            if (wrap && args.action === 'uncheck') {
+            if (wrap && args.action === 'uncheck' && (args.isInteracted || checkedNodes.length === 0)) {
                 this.isReverseUpdate = true;
                 this.changeState(wrap, 'uncheck');
                 this.isReverseUpdate = false;
             }
-            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length) {
+            else if (wrap && args.action === 'check' && checkedNodes.length === nodes.length && this.isCheckAllCalled) {
                 this.isReverseUpdate = true;
+                this.isCheckAllCalled = false;
                 this.changeState(wrap, 'check');
                 this.isReverseUpdate = false;
             }
@@ -1960,6 +1977,13 @@ var DropDownTree = /** @class */ (function (_super) {
             this.oldValue = this.value ? this.value.slice() : this.value;
         }
     };
+    DropDownTree.prototype.onNodeExpanded = function (args) {
+        if (this.hasTemplate && this.portals) {
+            this.portals = [].concat(this.treeObj.portals);
+            /* eslint-enable */
+            this.renderReactTemplates();
+        }
+    };
     DropDownTree.prototype.updateClearButton = function (state) {
         if (state) {
             if (!this.inputWrapper.contains(this.overAllClear)) {
@@ -2260,7 +2284,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) {
@@ -2457,6 +2486,7 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.selectAllItems = function (state) {
         if (this.showCheckBox) {
             if (state) {
+                this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
             }
             else {
@@ -2551,8 +2581,6 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         else {
             this.noRecord = this.createElement('div');
-            addClass([this.noRecord], NODATACONTAINER);
-            prepend([this.noRecord], this.popupDiv);
         }
         if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
@@ -2564,6 +2592,8 @@ var DropDownTree = /** @class */ (function (_super) {
             if (tempArr) {
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, this.noRecord);
+                addClass([this.noRecord], NODATACONTAINER);
+                prepend([this.noRecord], this.popupDiv);
             }
         }
         else {
@@ -2572,6 +2602,8 @@ var DropDownTree = /** @class */ (function (_super) {
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
+            addClass([this.noRecord], NODATACONTAINER);
+            prepend([this.noRecord], this.popupDiv);
         }
     };
     DropDownTree.prototype.updateRecordTemplate = function (action) {
@@ -3083,6 +3115,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/index.d.ts

@@ -9,3 +9,4 @@ export * from './combo-box/index';
 export * from './auto-complete/index';
 export * from './multi-select/index';
 export * from './list-box/index';
+export * from './mention/index';

package/src/index.js

@@ -9,3 +9,4 @@ export * from './combo-box/index';
 export * from './auto-complete/index';
 export * from './multi-select/index';
 export * from './list-box/index';
+export * from './mention/index';

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
+     * @deprecated
+     */
+    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
+     * @deprecated
+     */
+    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
+     * @deprecated
+     */
+    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
+     * @deprecated
+     */
+    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.
@@ -320,7 +336,7 @@ export declare class ListBox extends DropDownBase {
     private initDraggable;
     protected updateActionCompleteData(li: HTMLElement, item: {
         [key: string]: Object;
-    }): void;
+    }, index: number): void;
     private initToolbar;
     private createButtons;
     protected validationAttribute(input: HTMLInputElement, hiddenSelect: HTMLSelectElement): void;
@@ -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[];