@progress/kendo-angular-dropdowns 14.0.2-develop.9 → 14.1.0-develop.10

package/autocomplete/autocomplete.component.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, TemplateRef, OnDestroy, SimpleChanges, OnChanges, ChangeDetectorRef, NgZone, AfterViewInit } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, TemplateRef, OnDestroy, SimpleChanges, OnChanges, ChangeDetectorRef, NgZone, AfterViewInit, Injector } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
@@ -69,6 +69,7 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private renderer;
     private hostElement;
     protected touchEnabled: boolean;
+    private injector;
     /**
      * @hidden
      */
@@ -354,9 +355,13 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
      * @hidden
      */
     get isAdaptive(): boolean;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     protected onChangeCallback: Function;
     protected onTouchedCallback: Function;
-    constructor(localization: LocalizationService, dataService: DataService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, _zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef, touchEnabled: boolean);
+    constructor(localization: LocalizationService, dataService: DataService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, _zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef, touchEnabled: boolean, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -474,6 +479,6 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private setComponentClasses;
     private closeActionSheet;
     private openActionSheet;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AutoCompleteComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoCompleteComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": "highlightFirst"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "data": "data"; "value": "value"; "valueField": "valueField"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "clearButton": "clearButton"; "suggest": "suggest"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
 }

package/comboboxes/combobox.component.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, ChangeDetectorRef, NgZone, Renderer2, SimpleChanges, AfterContentChecked, AfterViewInit } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { ElementRef, TemplateRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, ChangeDetectorRef, NgZone, Renderer2, SimpleChanges, AfterContentChecked, AfterViewInit, Injector } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
@@ -67,6 +67,7 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     protected cdr: ChangeDetectorRef;
     protected renderer: Renderer2;
     protected touchEnabled: boolean;
+    protected injector: Injector;
     /**
      * @hidden
      */
@@ -406,6 +407,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     get isFocused(): boolean;
     set isFocused(value: boolean);
     get clearButtonVisiblity(): string;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     /**
      * @hidden
      */
@@ -460,7 +465,7 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     private _size;
     private _rounded;
     private _fillMode;
-    constructor(wrapper: ElementRef<HTMLElement>, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, touchEnabled: boolean);
+    constructor(wrapper: ElementRef<HTMLElement>, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, touchEnabled: boolean, injector: Injector);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     private createValueStream;
@@ -622,6 +627,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     private findIndex;
     private closeActionSheet;
     private openActionSheet;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ComboBoxComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComboBoxComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "kendo-combobox", ["kendoComboBox"], { "icon": "icon"; "svgIcon": "svgIcon"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "allowCustom": "allowCustom"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "valuePrimitive": "valuePrimitive"; "valueNormalizer": "valueNormalizer"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "suggest": "suggest"; "clearButton": "clearButton"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
 }

package/comboboxes/multicolumncombobox.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, NgZone, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ComboBoxComponent } from './combobox.component';
@@ -50,7 +50,7 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
      * @hidden
      */
     protected get listContainerClasses(): string[];
-    constructor(localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean);
+    constructor(localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean, injector: Injector);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**

package/common/list.component.d.ts

@@ -57,6 +57,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     onClick: EventEmitter<any>;
     pageChange: EventEmitter<PageChangeEvent>;
     listResize: EventEmitter<boolean>;
+    popupListScroll: EventEmitter<any>;
     items: QueryList<ListItemDirective>;
     content: ElementRef<HTMLElement>;
     list: ElementRef<HTMLElement>;
@@ -129,5 +130,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private firstGroupHeaderInTargetedPage;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "isActionSheetExpanded": "isActionSheetExpanded"; "showStickyHeader": "showStickyHeader"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "isActionSheetExpanded": "isActionSheetExpanded"; "showStickyHeader": "showStickyHeader"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; "popupListScroll": "popupListScroll"; }, never, never>;
 }

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -2,9 +2,9 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Optional, Inject } from '@angular/core';
+import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { isDocumentAvailable, KendoInput, hasObservers } from '@progress/kendo-angular-common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { SearchBarComponent } from '../common/searchbar.component';
@@ -78,7 +78,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR = {
  * ```
  */
 export class AutoCompleteComponent {
-    constructor(localization, dataService, popupService, selectionService, navigationService, disabledItemsService, _zone, cdr, renderer, hostElement, touchEnabled) {
+    constructor(localization, dataService, popupService, selectionService, navigationService, disabledItemsService, _zone, cdr, renderer, hostElement, touchEnabled, injector) {
         this.localization = localization;
         this.dataService = dataService;
         this.popupService = popupService;
@@ -90,6 +90,7 @@ export class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -537,6 +538,13 @@ export class AutoCompleteComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper, "tabindex");
         this.subs.add(this.localization
@@ -624,6 +632,7 @@ export class AutoCompleteComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -836,7 +845,11 @@ export class AutoCompleteComponent {
             }
             this.isFocused = false;
             const valueHasChanged = this.value !== this.text;
-            const runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
+            const runInZone = hasObservers(this.onBlur) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper) ||
+                valueHasChanged ||
+                this.formControl?.updateOn === 'blur';
             if (runInZone) {
                 this._zone.run(() => {
                     if (valueHasChanged) {
@@ -1065,7 +1078,7 @@ export class AutoCompleteComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
@@ -1200,7 +1213,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1348,7 +1361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
             }], highlightFirst: [{

package/esm2020/comboboxes/combobox.component.mjs

@@ -2,8 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, forwardRef, ElementRef, TemplateRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, HostBinding, isDevMode, Optional, Inject, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, forwardRef, ElementRef, TemplateRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, HostBinding, isDevMode, Optional, Inject, ChangeDetectorRef, NgZone, Renderer2, Injector } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { SearchBarComponent } from '../common/searchbar.component';
@@ -78,7 +78,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class ComboBoxComponent {
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -90,6 +90,7 @@ export class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -565,6 +566,13 @@ export class ComboBoxComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
     /**
      * @hidden
      */
@@ -898,6 +906,7 @@ export class ComboBoxComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -1152,7 +1161,11 @@ export class ComboBoxComponent {
             const currentText = this.searchbar.value;
             const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
             const valueHasChanged = unresolvedSelection || textHasChanged;
-            const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
+            const runInZone = valueHasChanged ||
+                hasObservers(this.onBlur) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur';
             if (runInZone) {
                 this.zone.run(() => {
                     if (valueHasChanged) {
@@ -1451,7 +1464,7 @@ export class ComboBoxComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
@@ -1606,7 +1619,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1774,7 +1787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { icon: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Inject, isDevMode, NgZone, QueryList, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Inject, Injector, isDevMode, NgZone, QueryList, Renderer2, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -37,8 +37,8 @@ import * as i14 from "../common/templates/template-context.directive";
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 export class MultiColumnComboBoxComponent extends ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled) {
-        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled);
+    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled, injector) {
+        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled, injector);
         /**
          * @hidden
          */
@@ -161,7 +161,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         });
     }
 }
-MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }], target: i0.ɵɵFactoryTarget.Component });
+MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiColumnComboBoxComponent, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
         SelectionService,
         DataService,
@@ -299,7 +299,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             <div class="k-data-table" [ngClass]="tableSizeClass">
                 <!--grid header-->
                 <div #header class="k-table-header">
-                    <div class="k-table-header-wrap">
+                    <div #headerWrap class="k-table-header-wrap">
                         <table class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
@@ -376,6 +376,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                     [showStickyHeader]="showStickyHeader"
                     (pageChange)="pageChange($event)"
                     (listResize)="updateHeaderPadding(header)"
+                    (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
                 >
                 </kendo-list>
 
@@ -414,7 +415,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -557,7 +558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <div class="k-data-table" [ngClass]="tableSizeClass">
                 <!--grid header-->
                 <div #header class="k-table-header">
-                    <div class="k-table-header-wrap">
+                    <div #headerWrap class="k-table-header-wrap">
                         <table class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
@@ -634,6 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [showStickyHeader]="showStickyHeader"
                     (pageChange)="pageChange($event)"
                     (listResize)="updateHeaderPadding(header)"
+                    (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
                 >
                 </kendo-list>
 
@@ -677,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { hostClasses: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowngrid']
             }], isDisabled: [{

package/esm2020/common/list.component.mjs

@@ -47,6 +47,7 @@ export class ListComponent {
         this.onClick = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.listResize = new EventEmitter();
+        this.popupListScroll = new EventEmitter();
         this.startFrom = 0;
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
@@ -406,7 +407,7 @@ export class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -426,7 +427,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         [class]="listContentClass"
         [style.overscrollBehavior]="'none'"
         [style.maxHeight.px]="height"
-        unselectable="on">
+        unselectable="on"
+        (scroll)="popupListScroll.emit($event)">
     <ul #list
         role="listbox"
         [class]="listClass"
@@ -559,7 +561,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         [class]="listContentClass"
         [style.overscrollBehavior]="'none'"
         [style.maxHeight.px]="height"
-        unselectable="on">
+        unselectable="on"
+        (scroll)="popupListScroll.emit($event)">
     <ul #list
         role="listbox"
         [class]="listClass"
@@ -719,6 +722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], listResize: [{
                 type: Output
+            }], popupListScroll: [{
+                type: Output
             }], items: [{
                 type: ViewChildren,
                 args: [ListItemDirective]

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -863,6 +863,7 @@ export class DropDownListComponent {
      * @hidden
      */
     setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
         this.disabled = isDisabled;
     }
     /**
@@ -1170,7 +1171,8 @@ export class DropDownListComponent {
                 hasObservers(this.close) ||
                 hasObservers(this.onBlur) ||
                 hasObservers(this.filterChange) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur') {
                 this._zone.run(() => {
                     if (valueHasChanged) {
                         this.selectionService.change(this.selectionService.selected[0]);
@@ -1421,7 +1423,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             popupLabel="Options list"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -1576,7 +1578,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1615,7 +1617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             popupLabel="Options list"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -700,7 +700,8 @@ export class DropDownTreeComponent {
             this.isFocused = false;
             this.togglePopup(false);
             if (hasObservers(this.onBlur) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur') {
                 this._zone.run(() => {
                     this.onBlur.emit();
                     this.onTouchedCallback();
@@ -1281,6 +1282,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span
             [attr.id]="valueLabelId"
             class="k-input-inner"
+            (click)="$event.preventDefault()"
         >
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
@@ -1485,6 +1487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span
             [attr.id]="valueLabelId"
             class="k-input-inner"
+            (click)="$event.preventDefault()"
         >
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -948,7 +948,8 @@ export class MultiSelectTreeComponent {
             this.isFocused = false;
             this.togglePopup(false);
             if (hasObservers(this.onBlur) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur') {
                 this._zone.run(() => {
                     this.onBlur.emit();
                     this.onTouchedCallback();

package/esm2020/index.mjs

@@ -52,10 +52,5 @@ export { DropDownListModule } from './dropdownlist/dropdownlist.module';
 export { SharedDirectivesModule } from './common/shared-directives.module';
 export { ListComponent } from './common/list.component';
 export { ResponsiveRendererComponent } from './common/action-sheet.component';
-/**
- * @hidden
- * TODO: See if the export could be removed (AOT should pass)
- */
-export { PopupComponent } from '@progress/kendo-angular-popup';
 export { PreventableEvent } from './common/models/preventable-event';
 export { RemoveTagEvent } from './common/models/remove-tag-event';