@syncfusion/ej2-angular-dropdowns 22.2.12 → 23.1.36

package/fesm2020/syncfusion-ej2-angular-dropdowns.mjs

@@ -3,12 +3,12 @@ import * as i0 from '@angular/core';
 import { forwardRef, Component, ChangeDetectionStrategy, ContentChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { setValue, FormBase, ComponentBase, Template, ComponentMixins } from '@syncfusion/ej2-angular-base';
-import { DropDownList, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, ListBox, DropDownTree, Mention } from '@syncfusion/ej2-dropdowns';
+import { DropDownList, VirtualScroll, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, ListBox, DropDownTree, Mention } from '@syncfusion/ej2-dropdowns';
 export * from '@syncfusion/ej2-dropdowns';
 import { CommonModule } from '@angular/common';
 
 var DropDownListComponent_1;
-const inputs$6 = ['actionFailureTemplate', 'allowFiltering', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
+const inputs$6 = ['actionFailureTemplate', 'allowFiltering', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
 const outputs$6 = ['actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select', 'valueChange'];
 const twoWays$6 = ['value'];
 /**
@@ -18,15 +18,23 @@ const twoWays$6 = ['value'];
 *```
 */
 let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponent extends DropDownList {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.skipFromEvent = true;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
+        try {
+            let mod = this.injector.get('DropDownsVirtualScroll');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
         this.registerEvents(outputs$6);
         this.addTwoWay.call(this, twoWays$6);
         setValue('currentInstance', this, this.viewContainerRef);
@@ -54,8 +62,8 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropDownListComponent, selector: "ejs-dropdownlist", inputs: { actionFailureTemplate: "actionFailureTemplate", allowFiltering: "allowFiltering", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", sortOrder: "sortOrder", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
+DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropDownListComponent, selector: "ejs-dropdownlist", inputs: { actionFailureTemplate: "actionFailureTemplate", allowFiltering: "allowFiltering", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableVirtualization: "enableVirtualization", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", sortOrder: "sortOrder", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DropDownListComponent_1),
@@ -103,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { footerTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { footerTemplate: [{
                 type: ContentChild,
                 args: ['footerTemplate']
             }], headerTemplate: [{
@@ -147,6 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+const VirtualScrollService = { provide: 'DropDownsVirtualScroll', useValue: VirtualScroll };
 /**
  * NgModule definition for the DropDownList component with providers.
  */
@@ -154,7 +163,9 @@ class DropDownListAllModule {
 }
 DropDownListAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DropDownListAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListAllModule, imports: [CommonModule, DropDownListModule], exports: [DropDownListModule] });
-DropDownListAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListAllModule, providers: [], imports: [[CommonModule, DropDownListModule], DropDownListModule] });
+DropDownListAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListAllModule, providers: [
+        VirtualScrollService
+    ], imports: [[CommonModule, DropDownListModule], DropDownListModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownListAllModule, decorators: [{
             type: NgModule,
             args: [{
@@ -162,12 +173,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     exports: [
                         DropDownListModule
                     ],
-                    providers: []
+                    providers: [
+                        VirtualScrollService
+                    ]
                 }]
         }] });
 
 var ComboBoxComponent_1;
-const inputs$5 = ['actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
+const inputs$5 = ['actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
 const outputs$5 = ['actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'customValueSpecifier', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select', 'valueChange'];
 const twoWays$5 = ['value'];
 /**
@@ -177,15 +190,23 @@ const twoWays$5 = ['value'];
 *```
 */
 let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent extends ComboBox {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.skipFromEvent = true;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
+        try {
+            let mod = this.injector.get('DropDownsVirtualScroll');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
         this.registerEvents(outputs$5);
         this.addTwoWay.call(this, twoWays$5);
         setValue('currentInstance', this, this.viewContainerRef);
@@ -213,8 +234,8 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent extends Co
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ComboBoxComponent, selector: "ejs-combobox", inputs: { actionFailureTemplate: "actionFailureTemplate", allowCustom: "allowCustom", allowFiltering: "allowFiltering", autofill: "autofill", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", sortOrder: "sortOrder", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", customValueSpecifier: "customValueSpecifier", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
+ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ComboBoxComponent, selector: "ejs-combobox", inputs: { actionFailureTemplate: "actionFailureTemplate", allowCustom: "allowCustom", allowFiltering: "allowFiltering", autofill: "autofill", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableVirtualization: "enableVirtualization", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", sortOrder: "sortOrder", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", customValueSpecifier: "customValueSpecifier", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ComboBoxComponent_1),
@@ -259,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { footerTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { footerTemplate: [{
                 type: ContentChild,
                 args: ['footerTemplate']
             }], headerTemplate: [{
@@ -320,7 +341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }] });
 
 var AutoCompleteComponent_1;
-const inputs$4 = ['actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'highlight', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'minLength', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'showPopupButton', 'sortOrder', 'suggestionCount', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
+const inputs$4 = ['actionFailureTemplate', 'allowCustom', 'allowFiltering', 'autofill', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'enabled', 'fields', 'filterBarPlaceholder', 'filterType', 'floatLabelType', 'footerTemplate', 'groupTemplate', 'headerTemplate', 'highlight', 'htmlAttributes', 'ignoreAccent', 'ignoreCase', 'index', 'itemTemplate', 'locale', 'minLength', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'showPopupButton', 'sortOrder', 'suggestionCount', 'text', 'value', 'valueTemplate', 'width', 'zIndex'];
 const outputs$4 = ['actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'blur', 'change', 'close', 'created', 'customValueSpecifier', 'dataBound', 'destroyed', 'filtering', 'focus', 'open', 'select', 'valueChange'];
 const twoWays$4 = ['value'];
 /**
@@ -330,15 +351,23 @@ const twoWays$4 = ['value'];
 *```
 */
 let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponent extends AutoComplete {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.skipFromEvent = true;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
+        try {
+            let mod = this.injector.get('DropDownsVirtualScroll');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
         this.registerEvents(outputs$4);
         this.addTwoWay.call(this, twoWays$4);
         setValue('currentInstance', this, this.viewContainerRef);
@@ -366,8 +395,8 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AutoCompleteComponent, selector: "ejs-autocomplete", inputs: { actionFailureTemplate: "actionFailureTemplate", allowCustom: "allowCustom", allowFiltering: "allowFiltering", autofill: "autofill", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", highlight: "highlight", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", minLength: "minLength", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", showPopupButton: "showPopupButton", sortOrder: "sortOrder", suggestionCount: "suggestionCount", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", customValueSpecifier: "customValueSpecifier", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
+AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AutoCompleteComponent, selector: "ejs-autocomplete", inputs: { actionFailureTemplate: "actionFailureTemplate", allowCustom: "allowCustom", allowFiltering: "allowFiltering", autofill: "autofill", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableVirtualization: "enableVirtualization", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", highlight: "highlight", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", index: "index", itemTemplate: "itemTemplate", locale: "locale", minLength: "minLength", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", showClearButton: "showClearButton", showPopupButton: "showPopupButton", sortOrder: "sortOrder", suggestionCount: "suggestionCount", text: "text", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", customValueSpecifier: "customValueSpecifier", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", select: "select", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => AutoCompleteComponent_1),
@@ -412,7 +441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { footerTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { footerTemplate: [{
                 type: ContentChild,
                 args: ['footerTemplate']
             }], headerTemplate: [{
@@ -483,12 +512,13 @@ const twoWays$3 = ['value'];
 *```
 */
 let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent extends MultiSelect {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.skipFromEvent = true;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
@@ -526,7 +556,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent e
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "ejs-multiselect", inputs: { actionFailureTemplate: "actionFailureTemplate", addTagOnBlur: "addTagOnBlur", allowCustomValue: "allowCustomValue", allowFiltering: "allowFiltering", changeOnBlur: "changeOnBlur", closePopupOnSelect: "closePopupOnSelect", cssClass: "cssClass", dataSource: "dataSource", delimiterChar: "delimiterChar", enableGroupCheckBox: "enableGroupCheckBox", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSelectionOrder: "enableSelectionOrder", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", groupTemplate: "groupTemplate", headerTemplate: "headerTemplate", hideSelectedItem: "hideSelectedItem", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", itemTemplate: "itemTemplate", locale: "locale", maximumSelectionLength: "maximumSelectionLength", mode: "mode", noRecordsTemplate: "noRecordsTemplate", openOnClick: "openOnClick", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", query: "query", readonly: "readonly", selectAllText: "selectAllText", showClearButton: "showClearButton", showDropDownIcon: "showDropDownIcon", showSelectAll: "showSelectAll", sortOrder: "sortOrder", text: "text", unSelectAllText: "unSelectAllText", value: "value", valueTemplate: "valueTemplate", width: "width", zIndex: "zIndex" }, outputs: { actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeOpen: "beforeOpen", beforeSelectAll: "beforeSelectAll", blur: "blur", change: "change", chipSelection: "chipSelection", close: "close", created: "created", customValueSelection: "customValueSelection", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", open: "open", removed: "removed", removing: "removing", select: "select", selectedAll: "selectedAll", tagging: "tagging", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -575,7 +605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { footerTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { footerTemplate: [{
                 type: ContentChild,
                 args: ['footerTemplate']
             }], headerTemplate: [{
@@ -654,12 +684,13 @@ const twoWays$2 = ['value'];
 *```
 */
 let ListBoxComponent = ListBoxComponent_1 = class ListBoxComponent extends ListBox {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
         try {
@@ -696,7 +727,7 @@ let ListBoxComponent = ListBoxComponent_1 = class ListBoxComponent extends ListB
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ListBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ListBoxComponent, selector: "ejs-listbox", inputs: { actionFailureTemplate: "actionFailureTemplate", allowDragAndDrop: "allowDragAndDrop", allowFiltering: "allowFiltering", cssClass: "cssClass", dataSource: "dataSource", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", groupTemplate: "groupTemplate", height: "height", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", itemTemplate: "itemTemplate", locale: "locale", maximumSelectionLength: "maximumSelectionLength", noRecordsTemplate: "noRecordsTemplate", query: "query", scope: "scope", selectionSettings: "selectionSettings", sortOrder: "sortOrder", toolbarSettings: "toolbarSettings", value: "value", zIndex: "zIndex" }, outputs: { focus: "focus", blur: "blur", actionBegin: "actionBegin", actionComplete: "actionComplete", actionFailure: "actionFailure", beforeDrop: "beforeDrop", beforeItemRender: "beforeItemRender", change: "change", created: "created", dataBound: "dataBound", destroyed: "destroyed", drag: "drag", dragStart: "dragStart", drop: "drop", filtering: "filtering", select: "select", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -730,7 +761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { itemTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { itemTemplate: [{
                 type: ContentChild,
                 args: ['itemTemplate']
             }], noRecordsTemplate: [{
@@ -789,12 +820,13 @@ const twoWays$1 = ['value'];
 *```
 */
 let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponent extends DropDownTree {
-    constructor(ngEle, srenderer, viewContainerRef, injector) {
+    constructor(ngEle, srenderer, viewContainerRef, injector, cdr) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
+        this.cdr = cdr;
         this.skipFromEvent = true;
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
@@ -825,7 +857,7 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         this.formCompContext.ngAfterContentChecked(this);
     }
 };
-DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: DropDownTreeComponent, selector: "ejs-dropdowntree", inputs: { actionFailureTemplate: "actionFailureTemplate", allowFiltering: "allowFiltering", allowMultiSelection: "allowMultiSelection", changeOnBlur: "changeOnBlur", cssClass: "cssClass", customTemplate: "customTemplate", delimiterChar: "delimiterChar", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enabled: "enabled", fields: "fields", filterBarPlaceholder: "filterBarPlaceholder", filterType: "filterType", floatLabelType: "floatLabelType", footerTemplate: "footerTemplate", headerTemplate: "headerTemplate", htmlAttributes: "htmlAttributes", ignoreAccent: "ignoreAccent", ignoreCase: "ignoreCase", itemTemplate: "itemTemplate", locale: "locale", mode: "mode", noRecordsTemplate: "noRecordsTemplate", placeholder: "placeholder", popupHeight: "popupHeight", popupWidth: "popupWidth", readonly: "readonly", selectAllText: "selectAllText", showCheckBox: "showCheckBox", showClearButton: "showClearButton", showDropDownIcon: "showDropDownIcon", showSelectAll: "showSelectAll", sortOrder: "sortOrder", text: "text", treeSettings: "treeSettings", unSelectAllText: "unSelectAllText", value: "value", width: "width", wrapText: "wrapText", zIndex: "zIndex" }, outputs: { actionFailure: "actionFailure", beforeOpen: "beforeOpen", blur: "blur", change: "change", close: "close", created: "created", dataBound: "dataBound", destroyed: "destroyed", filtering: "filtering", focus: "focus", keyPress: "keyPress", open: "open", select: "select", valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -868,7 +900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     ],
                     queries: {}
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { footerTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { footerTemplate: [{
                 type: ContentChild,
                 args: ['footerTemplate']
             }], headerTemplate: [{
@@ -1048,5 +1080,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutoCompleteAllModule, AutoCompleteComponent, AutoCompleteModule, CheckBoxSelectionService, ComboBoxAllModule, ComboBoxComponent, ComboBoxModule, DropDownListAllModule, DropDownListComponent, DropDownListModule, DropDownTreeAllModule, DropDownTreeComponent, DropDownTreeModule, ListBoxAllModule, ListBoxComponent, ListBoxModule, MentionAllModule, MentionComponent, MentionModule, MultiSelectAllModule, MultiSelectComponent, MultiSelectModule };
+export { AutoCompleteAllModule, AutoCompleteComponent, AutoCompleteModule, CheckBoxSelectionService, ComboBoxAllModule, ComboBoxComponent, ComboBoxModule, DropDownListAllModule, DropDownListComponent, DropDownListModule, DropDownTreeAllModule, DropDownTreeComponent, DropDownTreeModule, ListBoxAllModule, ListBoxComponent, ListBoxModule, MentionAllModule, MentionComponent, MentionModule, MultiSelectAllModule, MultiSelectComponent, MultiSelectModule, VirtualScrollService };
 //# sourceMappingURL=syncfusion-ej2-angular-dropdowns.mjs.map