@progress/kendo-angular-dropdowns 14.0.2-develop.15 → 14.0.2-develop.16

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/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
@@ -836,7 +844,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 +1077,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,
@@ -1348,7 +1360,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
      */
@@ -1152,7 +1160,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 +1463,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,
@@ -1774,7 +1786,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,
@@ -679,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/dropdownlist/dropdownlist.component.mjs

@@ -1170,7 +1170,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]);

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();

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/multiselect/multiselect.component.mjs

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
-import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject } from '@angular/core';
+import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } 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 { SelectionService } from '../common/selection/selection.service';
@@ -81,7 +81,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -94,6 +94,7 @@ export class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -321,6 +322,13 @@ export class MultiSelectComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
     /**
      * Focuses a specific item of the MultiSelect based on a provided index.
      * If there is a custom item it is positioned at index -1.
@@ -387,7 +395,8 @@ export class MultiSelectComponent {
             if (hasObservers(this.onBlur) ||
                 hasObservers(this.filterChange) ||
                 hasObservers(this.close) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur') {
                 this._zone.run(() => {
                     this.closePopup();
                     if (!(this.isOpen && this.allowCustom)) {
@@ -1674,7 +1683,7 @@ export class MultiSelectComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
@@ -2073,7 +2082,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]
             }], showStickyHeader: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698310847,
-    version: '14.0.2-develop.15',
+    publishDate: 1698414197,
+    version: '14.0.2-develop.16',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2015/progress-kendo-angular-dropdowns.mjs

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698310847,
-    version: '14.0.2-develop.15',
+    publishDate: 1698414197,
+    version: '14.0.2-develop.16',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2863,7 +2863,7 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
  * ```
  */
 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;
@@ -2875,6 +2875,7 @@ class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -3325,6 +3326,13 @@ class AutoCompleteComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper, "tabindex");
         this.subs.add(this.localization
@@ -3605,6 +3613,7 @@ class AutoCompleteComponent {
      * @hidden
      */
     handleBlur() {
+        var _a;
         if (!this.isActionSheetExpanded) {
             const focused = this.filterable ? this.selectionService.focused : -1;
             this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
@@ -3624,7 +3633,11 @@ 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 ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur';
             if (runInZone) {
                 this._zone.run(() => {
                     if (valueHasChanged) {
@@ -3853,7 +3866,7 @@ 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: DataService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: 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: DataService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: 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,
@@ -4137,7 +4150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }, {
                         type: Inject,
                         args: [TOUCH_ENABLED]
-                    }] }];
+                    }] }, { type: i0.Injector }];
     }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
@@ -4344,7 +4357,7 @@ const DEFAULT_FILL_MODE$4 = 'solid';
  * ```
  */
 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;
@@ -4356,6 +4369,7 @@ class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -4833,6 +4847,13 @@ class ComboBoxComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     /**
      * @hidden
      */
@@ -5413,6 +5434,7 @@ class ComboBoxComponent {
      * @hidden
      */
     handleBlur() {
+        var _a;
         if (!this.isActionSheetExpanded) {
             this._filtering = false;
             this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
@@ -5421,7 +5443,11 @@ 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) ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur';
             if (runInZone) {
                 this.zone.run(() => {
                     if (valueHasChanged) {
@@ -5720,7 +5746,7 @@ 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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,
@@ -6044,7 +6070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }, {
                         type: Inject,
                         args: [TOUCH_ENABLED]
-                    }] }];
+                    }] }, { type: i0.Injector }];
     }, propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
@@ -7367,6 +7393,7 @@ class DropDownListComponent {
         }
     }
     componentBlur() {
+        var _a;
         if (!this.isActionSheetExpanded) {
             this.isFocused = false;
             const selectionPresent = isPresent(this.selectionService.selected[0]);
@@ -7375,7 +7402,8 @@ class DropDownListComponent {
                 hasObservers(this.close) ||
                 hasObservers(this.onBlur) ||
                 hasObservers(this.filterChange) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur') {
                 this._zone.run(() => {
                     if (valueHasChanged) {
                         this.selectionService.change(this.selectionService.selected[0]);
@@ -8581,7 +8609,7 @@ const DEFAULT_FILL_MODE$2 = 'solid';
  * ```
  */
 class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -8594,6 +8622,7 @@ class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -8823,6 +8852,13 @@ class MultiSelectComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     /**
      * Focuses a specific item of the MultiSelect based on a provided index.
      * If there is a custom item it is positioned at index -1.
@@ -8881,6 +8917,7 @@ class MultiSelectComponent {
      * @hidden
      */
     onSearchBarBlur() {
+        var _a;
         if (!this.isActionSheetExpanded) {
             if (!this.isFocused) {
                 return;
@@ -8889,7 +8926,8 @@ class MultiSelectComponent {
             if (hasObservers(this.onBlur) ||
                 hasObservers(this.filterChange) ||
                 hasObservers(this.close) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur') {
                 this._zone.run(() => {
                     this.closePopup();
                     if (!(this.isOpen && this.allowCustom)) {
@@ -10177,7 +10215,7 @@ class MultiSelectComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
@@ -10577,7 +10615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }, {
                         type: Inject,
                         args: [TOUCH_ENABLED]
-                    }] }];
+                    }] }, { type: i0.Injector }];
     }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
@@ -10870,8 +10908,8 @@ const getRowWidthFromColumnsMeta = (columns) => {
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 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
          */
@@ -10994,7 +11032,7 @@ 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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,
@@ -11513,7 +11551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [TOUCH_ENABLED]
-                    }] }];
+                    }] }, { type: i0.Injector }];
     }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowngrid']
@@ -12205,6 +12243,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     handleBlur(e) {
+        var _a;
         if (!this.isActionSheetExpanded) {
             const relatedTarget = e && e.relatedTarget;
             if (this.wrapper.nativeElement.contains(relatedTarget) ||
@@ -12214,7 +12253,8 @@ class DropDownTreeComponent {
             this.isFocused = false;
             this.togglePopup(false);
             if (hasObservers(this.onBlur) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur') {
                 this._zone.run(() => {
                     this.onBlur.emit();
                     this.onTouchedCallback();
@@ -14647,6 +14687,7 @@ class MultiSelectTreeComponent {
      * @hidden
      */
     handleBlur(e) {
+        var _a;
         if (!this.isActionSheetExpanded) {
             const relatedTarget = e && e.relatedTarget;
             if (this.wrapper.nativeElement.contains(relatedTarget) ||
@@ -14656,7 +14697,8 @@ class MultiSelectTreeComponent {
             this.isFocused = false;
             this.togglePopup(false);
             if (hasObservers(this.onBlur) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.updateOn) === 'blur') {
                 this._zone.run(() => {
                     this.onBlur.emit();
                     this.onTouchedCallback();

package/fesm2020/progress-kendo-angular-dropdowns.mjs

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698310847,
-    version: '14.0.2-develop.15',
+    publishDate: 1698414197,
+    version: '14.0.2-develop.16',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2862,7 +2862,7 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
  * ```
  */
 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;
@@ -2874,6 +2874,7 @@ class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -3321,6 +3322,13 @@ 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
@@ -3620,7 +3628,11 @@ 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) {
@@ -3849,7 +3861,7 @@ 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: DataService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: 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: DataService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: 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,
@@ -4132,7 +4144,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: [{
@@ -4338,7 +4350,7 @@ const DEFAULT_FILL_MODE$4 = 'solid';
  * ```
  */
 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;
@@ -4350,6 +4362,7 @@ class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -4825,6 +4838,13 @@ class ComboBoxComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
     /**
      * @hidden
      */
@@ -5412,7 +5432,11 @@ 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) {
@@ -5711,7 +5735,7 @@ 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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,
@@ -6034,7 +6058,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
@@ -7360,7 +7384,8 @@ 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]);
@@ -8564,7 +8589,7 @@ const DEFAULT_FILL_MODE$2 = 'solid';
  * ```
  */
 class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -8577,6 +8602,7 @@ class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * @hidden
          */
@@ -8804,6 +8830,13 @@ class MultiSelectComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return ngControl?.control || null;
+    }
     /**
      * Focuses a specific item of the MultiSelect based on a provided index.
      * If there is a custom item it is positioned at index -1.
@@ -8870,7 +8903,8 @@ class MultiSelectComponent {
             if (hasObservers(this.onBlur) ||
                 hasObservers(this.filterChange) ||
                 hasObservers(this.close) ||
-                isUntouched(this.wrapper.nativeElement)) {
+                isUntouched(this.wrapper.nativeElement) ||
+                this.formControl?.updateOn === 'blur') {
                 this._zone.run(() => {
                     this.closePopup();
                     if (!(this.isOpen && this.allowCustom)) {
@@ -10157,7 +10191,7 @@ class MultiSelectComponent {
         this.actionSheetSearchBar.focus();
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
@@ -10556,7 +10590,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]
             }], showStickyHeader: [{
@@ -10848,8 +10882,8 @@ const getRowWidthFromColumnsMeta = (columns) => {
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 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
          */
@@ -10972,7 +11006,7 @@ 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: 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,
@@ -11490,7 +11524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: 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: [{
@@ -12188,7 +12222,8 @@ 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();
@@ -14628,7 +14663,8 @@ 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/multiselect/multiselect.component.d.ts

@@ -4,8 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { AdaptiveMode, WindowSize } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
-import { Renderer2, ViewContainerRef, ElementRef, TemplateRef, OnDestroy, OnChanges, DoCheck, EventEmitter, AfterContentChecked, AfterViewInit, ChangeDetectorRef, KeyValueDiffers, NgZone, OnInit } from '@angular/core';
+import { Renderer2, ViewContainerRef, ElementRef, TemplateRef, OnDestroy, OnChanges, DoCheck, EventEmitter, AfterContentChecked, AfterViewInit, ChangeDetectorRef, KeyValueDiffers, NgZone, OnInit, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
+import { FormControl } from '@angular/forms';
 import { SelectionService, SelectionEvent } from '../common/selection/selection.service';
 import { PopupSettings } from '../common/models/popup-settings';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -68,6 +69,7 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private renderer;
     private _zone;
     private touchEnabled;
+    private injector;
     /**
      * @hidden
      */
@@ -104,6 +106,10 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
      * @hidden
      */
     get ariaControls(): string;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     /**
      * Focuses a specific item of the MultiSelect based on a provided index.
      * If there is a custom item it is positioned at index -1.
@@ -466,7 +472,7 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private _fillMode;
     private _subtitle;
     private _valueHolder;
-    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, dataService: DataService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, differs: KeyValueDiffers, renderer: Renderer2, _zone: NgZone, touchEnabled: boolean);
+    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, dataService: DataService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, differs: KeyValueDiffers, renderer: Renderer2, _zone: NgZone, touchEnabled: boolean, injector: Injector);
     get listContainerClasses(): any[];
     /**
      * @hidden
@@ -653,6 +659,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private setComponentClasses;
     private closeActionSheet;
     private openActionSheet;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "kendo-multiselect", ["kendoMultiSelect"], { "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "autoClose": "autoClose"; "loading": "loading"; "data": "data"; "value": "value"; "valueField": "valueField"; "textField": "textField"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "checkboxes": "checkboxes"; "readonly": "readonly"; "filterable": "filterable"; "virtual": "virtual"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "valuePrimitive": "valuePrimitive"; "clearButton": "clearButton"; "tagMapper": "tagMapper"; "allowCustom": "allowCustom"; "valueNormalizer": "valueNormalizer"; }, { "filterChange": "filterChange"; "valueChange": "valueChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "removeTag": "removeTag"; }, ["template", "customItemTemplate", "groupTemplate", "fixedGroupTemplate", "headerTemplate", "footerTemplate", "tagTemplate", "groupTagTemplate", "noDataTemplate"], never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "14.0.2-develop.15",
+  "version": "14.0.2-develop.16",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,18 +25,18 @@
     "@angular/forms": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "14.0.2-develop.15",
-    "@progress/kendo-angular-l10n": "14.0.2-develop.15",
-    "@progress/kendo-angular-popup": "14.0.2-develop.15",
-    "@progress/kendo-angular-icons": "14.0.2-develop.15",
-    "@progress/kendo-angular-treeview": "14.0.2-develop.15",
+    "@progress/kendo-angular-common": "14.0.2-develop.16",
+    "@progress/kendo-angular-l10n": "14.0.2-develop.16",
+    "@progress/kendo-angular-popup": "14.0.2-develop.16",
+    "@progress/kendo-angular-icons": "14.0.2-develop.16",
+    "@progress/kendo-angular-treeview": "14.0.2-develop.16",
     "rxjs": "^6.5.3 || ^7.0.0",
-    "@progress/kendo-angular-navigation": "14.0.2-develop.15",
-    "@progress/kendo-angular-label": "14.0.2-develop.15"
+    "@progress/kendo-angular-navigation": "14.0.2-develop.16",
+    "@progress/kendo-angular-label": "14.0.2-develop.16"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.0.2-develop.15",
+    "@progress/kendo-angular-schematics": "14.0.2-develop.16",
     "@progress/kendo-common": "^0.2.1"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
             // peers of the treeview
-            '@progress/kendo-angular-inputs': '14.0.2-develop.15',
+            '@progress/kendo-angular-inputs': '14.0.2-develop.16',
             // peers of inputs
-            '@progress/kendo-angular-intl': '14.0.2-develop.15',
+            '@progress/kendo-angular-intl': '14.0.2-develop.16',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^2.0.0'